From b92980efeca831c879c969e673cd60f93d0e3ace Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 11 Dec 2016 15:26:49 +0100 Subject: [web] show proxy address, add websocket toggle --- web/src/js/components/Footer.jsx | 15 ++++++++++++--- web/src/js/components/Header/OptionMenu.jsx | 4 ++++ 2 files changed, 16 insertions(+), 3 deletions(-) (limited to 'web/src') diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx index 1ae4ee73..ee26dad2 100644 --- a/web/src/js/components/Footer.jsx +++ b/web/src/js/components/Footer.jsx @@ -7,7 +7,8 @@ Footer.propTypes = { } function Footer({ settings }) { - let {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, anticache, anticomp, stickyauth, stickycookie, stream_large_bodies} = settings; + let {mode, intercept, showhost, no_upstream_cert, rawtcp, http2, websocket, anticache, anticomp, + stickyauth, stickycookie, stream_large_bodies, listen_host, listen_port} = settings; return ( ) } diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index 186a9c6a..f1d19f48 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -31,6 +31,10 @@ function OptionMenu({ settings, updateSettings }) { checked={settings.http2} onToggle={() => updateSettings({ http2: !settings.http2 })} /> + updateSettings({ websocket: !settings.websocket })} + /> updateSettings({ anticache: !settings.anticache })} -- cgit v1.2.3 From 795e76eee298e23079f7e979119defc4c187b833 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 11 Dec 2016 17:37:11 +0100 Subject: [web] style options menu The other menus are WIP. --- web/src/css/header.less | 58 +++++++++++-- web/src/js/components/FlowView/ToggleEdit.jsx | 4 +- web/src/js/components/Header.jsx | 7 +- web/src/js/components/Header/FlowMenu.jsx | 15 ++-- web/src/js/components/Header/MainMenu.jsx | 21 +++-- web/src/js/components/Header/MenuToggle.jsx | 69 ++++++++++++++++ web/src/js/components/Header/OptionMenu.jsx | 112 +++++++++++--------------- web/src/js/components/Header/ViewMenu.jsx | 32 -------- web/src/js/components/common/DocsLink.jsx | 14 ++++ web/src/js/ducks/ui/header.js | 4 +- 10 files changed, 203 insertions(+), 133 deletions(-) create mode 100644 web/src/js/components/Header/MenuToggle.jsx delete mode 100644 web/src/js/components/Header/ViewMenu.jsx create mode 100644 web/src/js/components/common/DocsLink.jsx (limited to 'web/src') diff --git a/web/src/css/header.less b/web/src/css/header.less index 4813b933..90907ec7 100644 --- a/web/src/css/header.less +++ b/web/src/css/header.less @@ -1,24 +1,66 @@ @import (reference) '../../node_modules/bootstrap/less/variables.less'; @import (reference) '../../node_modules/bootstrap/less/mixins/grid.less'; +@menu-height: 85px; + + header { - padding-top: 0.5em; + padding-top: 6px; background-color: white; @separator-color: lighten(grey, 15%); - .menu { - padding: 10px; + menu { + display: block; + margin: 0; + padding: 0; border-bottom: solid @separator-color 1px; + height: @menu-height; + overflow: visible; // search help context laps over. } } -@menu-row-gutter-width: 5px; -.menu-row { - .make-row(@menu-row-gutter-width); +.menu-group { + @description-height: 16px; + display: inline-block; + height: @menu-height; + vertical-align: top; + + .entry { + height: (@menu-height - @description-height)/3; + line-height: 1; + padding: 0.5rem 1rem; + + label { + font-size: 1.2rem; + font-weight: normal; + margin: 0; + } + input[type=checkbox] { + margin: 0 2px; + vertical-align: middle; + } + } + .description { + height: @description-height; + text-align: center; + font-size: 0.9rem; + } +} +.menu-group + .menu-group:before { + @space: 10px; + content: " "; + border-left: solid 1px lighten(grey, 40%); + margin-top: @space; + height: @menu-height - @space*2; + position: absolute; +} + +@menu-main-gutter-width: 5px; +.menu-main { + .make-row(@menu-main-gutter-width); } .filter-input { - .make-sm-column(3, @menu-row-gutter-width); - margin-bottom:5px; + .make-sm-column(4, @menu-main-gutter-width); } .filter-input .popover { diff --git a/web/src/js/components/FlowView/ToggleEdit.jsx b/web/src/js/components/FlowView/ToggleEdit.jsx index 9016348e..6a691a3d 100644 --- a/web/src/js/components/FlowView/ToggleEdit.jsx +++ b/web/src/js/components/FlowView/ToggleEdit.jsx @@ -14,11 +14,11 @@ function ToggleEdit({ isEdit, startEdit, stopEdit, flow, modifiedFlow }) { return (
{isEdit ? - stopEdit(flow, modifiedFlow)}> + stopEdit(flow, modifiedFlow)}> : - startEdit(flow)}> + startEdit(flow)}> } diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx index 702786e6..1500db1b 100644 --- a/web/src/js/components/Header.jsx +++ b/web/src/js/components/Header.jsx @@ -2,14 +2,13 @@ import React, { Component, PropTypes } from 'react' import { connect } from 'react-redux' import classnames from 'classnames' import MainMenu from './Header/MainMenu' -import ViewMenu from './Header/ViewMenu' import OptionMenu from './Header/OptionMenu' import FileMenu from './Header/FileMenu' import FlowMenu from './Header/FlowMenu' import {setActiveMenu} from '../ducks/ui/header' class Header extends Component { - static entries = [MainMenu, ViewMenu, OptionMenu] + static entries = [MainMenu, OptionMenu] handleClick(active, e) { e.preventDefault() @@ -38,9 +37,9 @@ class Header extends Component { ))} -
+ -
+ ) } diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index e78a49aa..e0c59afe 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -18,15 +18,12 @@ FlowMenu.propTypes = { function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) { return (
-
-
-
+
) } diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx index 5ab3fa9d..6a4e12bf 100644 --- a/web/src/js/components/Header/MainMenu.jsx +++ b/web/src/js/components/Header/MainMenu.jsx @@ -1,20 +1,17 @@ -import React, { Component, PropTypes } from 'react' -import { connect } from 'react-redux' -import FilterInput from './FilterInput' -import { update as updateSettings } from '../../ducks/settings' -import { setFilter, setHighlight } from '../../ducks/flows' +import React, { Component, PropTypes } from "react" +import { connect } from "react-redux" +import FilterInput from "./FilterInput" +import { update as updateSettings } from "../../ducks/settings" +import { setFilter, setHighlight } from "../../ducks/flows" MainMenu.title = "Start" export default function MainMenu() { return ( -
-
- - - -
-
+
+ + +
) } diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx new file mode 100644 index 00000000..726db7bd --- /dev/null +++ b/web/src/js/components/Header/MenuToggle.jsx @@ -0,0 +1,69 @@ +import { PropTypes } from "react" +import { connect } from "react-redux" +import { update as updateSettings } from "../../ducks/settings" +import { toggleVisibility } from "../../ducks/eventLog" + +MenuToggle.propTypes = { + value: PropTypes.bool.isRequired, + onChange: PropTypes.func.isRequired, + children: PropTypes.node.isRequired, +} + +export function MenuToggle({ value, onChange, children }) { + return ( +
+ +
+ ) +} + + +SettingsToggle.propTypes = { + setting: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, +} + +export function SettingsToggle({ setting, children, settings, updateSettings }) { + return ( + updateSettings({ [setting]: !settings[setting] })} + > + {children} + + ) +} +SettingsToggle = connect( + state => ({ + settings: state.settings, + }), + { + updateSettings, + } +)(SettingsToggle) + + +export function EventlogToggle({ toggleVisibility, eventLogVisible }) { + return ( + + Display Event Log + + ) +} +EventlogToggle = connect( + state => ({ + eventLogVisible: state.eventLog.visible, + }), + { + toggleVisibility, + } +)(EventlogToggle) + diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx index f1d19f48..4fb5dc1f 100644 --- a/web/src/js/components/Header/OptionMenu.jsx +++ b/web/src/js/components/Header/OptionMenu.jsx @@ -1,75 +1,59 @@ import React, { PropTypes } from 'react' import { connect } from 'react-redux' -import ToggleButton from '../common/ToggleButton' -import ToggleInputButton from '../common/ToggleInputButton' -import { update as updateSettings } from '../../ducks/settings' +import {SettingsToggle, EventlogToggle} from './MenuToggle' +import DocsLink from '../common/DocsLink' OptionMenu.title = 'Options' -OptionMenu.propTypes = { - settings: PropTypes.object.isRequired, - updateSettings: PropTypes.func.isRequired, -} - -function OptionMenu({ settings, updateSettings }) { +export default function OptionMenu() { return (
-
- updateSettings({ showhost: !settings.showhost })} - /> - updateSettings({ no_upstream_cert: !settings.no_upstream_cert })} - /> - updateSettings({ rawtcp: !settings.rawtcp })} - /> - updateSettings({ http2: !settings.http2 })} - /> - updateSettings({ websocket: !settings.websocket })} - /> - updateSettings({ anticache: !settings.anticache })} - /> - updateSettings({ anticomp: !settings.anticomp })} - /> - updateSettings({ stickyauth: !settings.stickyauth ? txt : null })} - /> - updateSettings({ stickycookie: !settings.stickycookie ? txt : null })} - /> - updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })} - /> +
+ HTTP/2.0 + WebSockets + Raw TCP +
Protocol Support
+
+
+ + Disable Caching + + + Disable Compression + +
+
HTTP Options
-
+
+ + Use Host Header + + +
+
View Options
+
+ { /* + updateSettings({ no_upstream_cert: !settings.no_upstream_cert })} + /> + updateSettings({ stickyauth: !settings.stickyauth ? txt : null })} + /> + updateSettings({ stickycookie: !settings.stickycookie ? txt : null })} + /> + updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })} + /> + */}
) } - -export default connect( - state => ({ - settings: state.settings, - }), - { - updateSettings, - } -)(OptionMenu) diff --git a/web/src/js/components/Header/ViewMenu.jsx b/web/src/js/components/Header/ViewMenu.jsx deleted file mode 100644 index 22b370d1..00000000 --- a/web/src/js/components/Header/ViewMenu.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { PropTypes } from 'react' -import { connect } from 'react-redux' -import ToggleButton from '../common/ToggleButton' -import { toggleVisibility } from '../../ducks/eventLog' - -ViewMenu.title = 'View' -ViewMenu.route = 'flows' - -ViewMenu.propTypes = { - eventLogVisible: PropTypes.bool.isRequired, - toggleEventLog: PropTypes.func.isRequired, -} - -function ViewMenu({ eventLogVisible, toggleEventLog }) { - return ( -
-
- -
-
-
- ) -} - -export default connect( - state => ({ - eventLogVisible: state.eventLog.visible, - }), - { - toggleEventLog: toggleVisibility, - } -)(ViewMenu) diff --git a/web/src/js/components/common/DocsLink.jsx b/web/src/js/components/common/DocsLink.jsx new file mode 100644 index 00000000..182811a3 --- /dev/null +++ b/web/src/js/components/common/DocsLink.jsx @@ -0,0 +1,14 @@ +import { PropTypes } from 'react' + +DocsLink.propTypes = { + resource: PropTypes.string.isRequired, +} + +export default function DocsLink({ children, resource }) { + let url = `http://docs.mitmproxy.org/en/stable/${resource}` + return ( + + {children || } + + ) +} diff --git a/web/src/js/ducks/ui/header.js b/web/src/js/ducks/ui/header.js index 25dfe602..1eff3ef6 100644 --- a/web/src/js/ducks/ui/header.js +++ b/web/src/js/ducks/ui/header.js @@ -4,7 +4,7 @@ export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU' const defaultState = { - activeMenu: 'Start', + activeMenu: 'Options', isFlowSelected: false, } @@ -22,7 +22,7 @@ export default function reducer(state = defaultState, action) { if (action.flowIds.length && !state.isFlowSelected) { return { ...state, - activeMenu: 'Flow', + activeMenu: 'Options', isFlowSelected: true, } } -- cgit v1.2.3 From 6540aedaab107a7eecf57d2275e578d97fc77335 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 11 Dec 2016 18:49:28 +0100 Subject: [web] style start menu --- web/src/css/header.less | 16 +++++++++++++++- web/src/js/components/Header/FilterDocs.jsx | 2 +- web/src/js/ducks/ui/header.js | 4 ++-- 3 files changed, 18 insertions(+), 4 deletions(-) (limited to 'web/src') diff --git a/web/src/css/header.less b/web/src/css/header.less index 90907ec7..c90e91c4 100644 --- a/web/src/css/header.less +++ b/web/src/css/header.less @@ -57,10 +57,24 @@ header { @menu-main-gutter-width: 5px; .menu-main { .make-row(@menu-main-gutter-width); + padding: 2px 5px; } .filter-input { - .make-sm-column(4, @menu-main-gutter-width); + .make-sm-column(5, @menu-main-gutter-width); + padding: 2.5px; + + @media (max-width: @screen-xs-max) { + + padding: 2px 2.5px; + + >.form-control,> .input-group-addon, > .input-group-btn>.btn { + height: 23.5px; + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; + } + } } .filter-input .popover { diff --git a/web/src/js/components/Header/FilterDocs.jsx b/web/src/js/components/Header/FilterDocs.jsx index c237e230..49fb5fbc 100644 --- a/web/src/js/components/Header/FilterDocs.jsx +++ b/web/src/js/components/Header/FilterDocs.jsx @@ -47,7 +47,7 @@ export default class FilterDocs extends Component { -   mitmproxy docs +   mitmproxy docs diff --git a/web/src/js/ducks/ui/header.js b/web/src/js/ducks/ui/header.js index 1eff3ef6..25dfe602 100644 --- a/web/src/js/ducks/ui/header.js +++ b/web/src/js/ducks/ui/header.js @@ -4,7 +4,7 @@ export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU' const defaultState = { - activeMenu: 'Options', + activeMenu: 'Start', isFlowSelected: false, } @@ -22,7 +22,7 @@ export default function reducer(state = defaultState, action) { if (action.flowIds.length && !state.isFlowSelected) { return { ...state, - activeMenu: 'Options', + activeMenu: 'Flow', isFlowSelected: true, } } -- cgit v1.2.3 From d1c7b203f08d4b1e1ee3c7a50762a4f08843feef Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Sun, 11 Dec 2016 19:59:54 +0100 Subject: [web] style flow menu --- web/src/css/header.less | 72 ++++++++++++++-------- web/src/js/components/Header/FlowMenu.jsx | 62 +++++++++++++++---- web/src/js/components/Header/MenuToggle.jsx | 2 +- web/src/js/components/Header/OptionMenu.jsx | 92 +++++++++++++++-------------- web/src/js/components/common/Button.jsx | 16 ++--- 5 files changed, 158 insertions(+), 86 deletions(-) (limited to 'web/src') diff --git a/web/src/css/header.less b/web/src/css/header.less index c90e91c4..a026d8aa 100644 --- a/web/src/css/header.less +++ b/web/src/css/header.less @@ -3,7 +3,6 @@ @menu-height: 85px; - header { padding-top: 6px; background-color: white; @@ -18,35 +17,62 @@ header { } } +@menu-legend-height: 16px; +@menu-group-hmargin: 3px; .menu-group { - @description-height: 16px; + margin: 0 @menu-group-hmargin; display: inline-block; height: @menu-height; vertical-align: top; +} - .entry { - height: (@menu-height - @description-height)/3; - line-height: 1; - padding: 0.5rem 1rem; +.menu-content { + height: @menu-height - @menu-legend-height; + text-align: center; - label { - font-size: 1.2rem; - font-weight: normal; - margin: 0; - } - input[type=checkbox] { - margin: 0 2px; - vertical-align: middle; + > .btn { + height: @menu-height - @menu-legend-height; + text-align: center; + margin: 0 1px; + padding: 12px 5px; + border: none; + border-radius: 0; + i { + font-size: 20px; + display: block; + margin: 0 auto 5px; } } - .description { - height: @description-height; - text-align: center; - font-size: 0.9rem; +} + + +.menu-entry { + height: (@menu-height - @menu-legend-height)/3; + line-height: 1; + padding: 0.5rem 1rem; + + label { + font-size: 1.2rem; + font-weight: normal; + margin: 0; + } + input[type=checkbox] { + margin: 0 2px; + vertical-align: middle; } } + + +.menu-legend { + height: @menu-legend-height; + text-align: center; + font-size: 12px; + padding: 0 5px; +} + .menu-group + .menu-group:before { @space: 10px; + margin-left: -@menu-group-hmargin; content: " "; border-left: solid 1px lighten(grey, 40%); margin-top: @space; @@ -68,11 +94,11 @@ header { padding: 2px 2.5px; - >.form-control,> .input-group-addon, > .input-group-btn>.btn { - height: 23.5px; - padding: 1px 5px; - font-size: 12px; - line-height: 1.5; + > .form-control, > .input-group-addon, > .input-group-btn > .btn { + height: 23.5px; + padding: 1px 5px; + font-size: 12px; + line-height: 1.5; } } } diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx index e0c59afe..420cb054 100644 --- a/web/src/js/components/Header/FlowMenu.jsx +++ b/web/src/js/components/Header/FlowMenu.jsx @@ -1,13 +1,13 @@ -import React, { PropTypes } from 'react' -import { connect } from 'react-redux' -import Button from '../common/Button' -import { MessageUtils } from '../../flow/utils.js' -import * as flowsActions from '../../ducks/flows' +import React, { PropTypes } from "react" +import { connect } from "react-redux" +import Button from "../common/Button" +import { MessageUtils } from "../../flow/utils.js" +import * as flowsActions from "../../ducks/flows" FlowMenu.title = 'Flow' FlowMenu.propTypes = { - flow: PropTypes.object.isRequired, + flow: PropTypes.object, acceptFlow: PropTypes.func.isRequired, replayFlow: PropTypes.func.isRequired, duplicateFlow: PropTypes.func.isRequired, @@ -16,14 +16,52 @@ FlowMenu.propTypes = { } function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, revertFlow }) { + if (!flow) + return
return (
- + + + +
+
Flow Modification
+
+
+
+ +
+
Export
+
+
+
+ + +
+
Interception
+
+ + +
) } diff --git a/web/src/js/components/Header/MenuToggle.jsx b/web/src/js/components/Header/MenuToggle.jsx index 726db7bd..8977f3b9 100644 --- a/web/src/js/components/Header/MenuToggle.jsx +++ b/web/src/js/components/Header/MenuToggle.jsx @@ -11,7 +11,7 @@ MenuToggle.propTypes = { export function MenuToggle({ value, onChange, children }) { return ( -
+