[web] move options editor from file menu to options menu

ultimately we probably want to open the options editor immediately if someone presses "Options".
This still requires us to

  1. have a nicer editors for common settings.
  2. Add a "view event log" button somewhere else,
     for example in the footer.

For now, the options editor is marked as beta, as there are some options you
clearly do not want to edit (e.g. wfile).

2 files changed, 34 insertions, 59 deletions

diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index 1e3b9268..c88efcd8 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -11,7 +11,6 @@ FileMenu.propTypes = {
     clearFlows: PropTypes.func.isRequired,
     loadFlows: PropTypes.func.isRequired,
     saveFlows: PropTypes.func.isRequired,
-    openModal: PropTypes.func.isRequired,
 }
 
 FileMenu.onNewClick = (e, clearFlows) => {
@@ -20,7 +19,7 @@ FileMenu.onNewClick = (e, clearFlows) => {
         clearFlows()
 }
 
-export function FileMenu ({clearFlows, loadFlows, saveFlows, openOptions}) {
+export function FileMenu ({clearFlows, loadFlows, saveFlows}) {
      return (
         <Dropdown className="pull-left" btnClass="special" text="mitmproxy">
             <a href="#" onClick={e => FileMenu.onNewClick(e, clearFlows)}>
@@ -38,12 +37,7 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openOptions}) {
             </a>
 
             <HideInStatic>
-            <a href="#" onClick={e => { e.preventDefault(); openOptions(); }}>
-                <i className="fa fa-fw fa-cog"></i>
-                &nbsp;Options
-            </a>
             <Divider/>
-
             <a href="http://mitm.it/" target="_blank">
                 <i className="fa fa-fw fa-external-link"></i>
                 &nbsp;Install Certificates...
@@ -59,6 +53,5 @@ export default connect(
         clearFlows: flowsActions.clear,
         loadFlows: flowsActions.upload,
         saveFlows: flowsActions.download,
-        openOptions: () => modalActions.setActiveModal('OptionModal'),
     }
 )(FileMenu)
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index c41c9d99..765129ed 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -1,74 +1,56 @@
-import React  from "react"
-import PropTypes from 'prop-types'
+import React from "react"
 import { connect } from "react-redux"
-import { SettingsToggle, EventlogToggle } from "./MenuToggle"
+import { EventlogToggle, SettingsToggle } from "./MenuToggle"
+import Button from "../common/Button"
 import DocsLink from "../common/DocsLink"
 import HideInStatic from "../common/HideInStatic";
+import * as modalActions from "../../ducks/ui/modal"
 
 OptionMenu.title = 'Options'
 
-export default function OptionMenu() {
+function OptionMenu({ openOptions }) {
     return (
         <div>
             <HideInStatic>
-            <div className="menu-group">
-                <div className="menu-content">
-                    <SettingsToggle setting="http2">HTTP/2.0</SettingsToggle>
-                    <SettingsToggle setting="websocket">WebSockets</SettingsToggle>
-                    <SettingsToggle setting="rawtcp">Raw TCP</SettingsToggle>
+                <div className="menu-group">
+                    <div className="menu-content">
+                        <Button title="Open Options" icon="fa-cogs text-primary"
+                                onClick={openOptions}>
+                            Edit Options <sup>alpha</sup>
+                        </Button>
+                    </div>
+                    <div className="menu-legend">Options Editor</div>
                 </div>
-                <div className="menu-legend">Protocol Support</div>
-            </div>
 
-            <div className="menu-group">
-                <div className="menu-content">
-                    <SettingsToggle setting="anticache">
-                        Disable Caching <DocsLink resource="features/anticache.html"/>
-                    </SettingsToggle>
-                    <SettingsToggle setting="anticomp">
-                        Disable Compression <i className="fa fa-question-circle"
-                                               title="Do not forward Accept-Encoding headers to the server to force an uncompressed response."></i>
-                    </SettingsToggle>
+                <div className="menu-group">
+                    <div className="menu-content">
+                        <SettingsToggle setting="anticache">
+                            Strip cache headers <DocsLink resource="features/anticache.html"/>
+                        </SettingsToggle>
+                        <SettingsToggle setting="showhost">
+                            Use host header for display
+                        </SettingsToggle>
+                        <SettingsToggle setting="ssl_insecure">
+                            Verify server certificates
+                        </SettingsToggle>
+                    </div>
+                    <div className="menu-legend">Quick Options</div>
                 </div>
-                <div className="menu-legend">HTTP Options</div>
-            </div>
             </HideInStatic>
 
             <div className="menu-group">
                 <div className="menu-content">
-                    <HideInStatic>
-                    <SettingsToggle setting="showhost">
-                        Use Host Header <i className="fa fa-question-circle"
-                                           title="Use the Host header to construct URLs for display."></i>
-                    </SettingsToggle>
-                    </HideInStatic>
-
                     <EventlogToggle/>
                 </div>
                 <div className="menu-legend">View Options</div>
             </div>
-            { /*
-             <ToggleButton text="no_upstream_cert"
-             checked={settings.no_upstream_cert}
-             onToggle={() => updateSettings({ no_upstream_cert: !settings.no_upstream_cert })}
-             />
-             <ToggleInputButton name="stickyauth" placeholder="Sticky auth filter"
-             checked={!!settings.stickyauth}
-             txt={settings.stickyauth}
-             onToggleChanged={txt => updateSettings({ stickyauth: !settings.stickyauth ? txt : null })}
-             />
-             <ToggleInputButton name="stickycookie" placeholder="Sticky cookie filter"
-             checked={!!settings.stickycookie}
-             txt={settings.stickycookie}
-             onToggleChanged={txt => updateSettings({ stickycookie: !settings.stickycookie ? txt : null })}
-             />
-             <ToggleInputButton name="stream_large_bodies" placeholder="stream..."
-             checked={!!settings.stream_large_bodies}
-             txt={settings.stream_large_bodies}
-             inputType="number"
-             onToggleChanged={txt => updateSettings({ stream_large_bodies: !settings.stream_large_bodies ? txt : null })}
-             />
-             */}
         </div>
     )
 }
+
+export default connect(
+    null,
+    {
+        openOptions: () => modalActions.setActiveModal('OptionModal')
+    }
+)(OptionMenu)