[web] Add HideInStatic Component

HideInStaic compoent will check the MITMWEB_STATIC var, and hide the
responsive components in static mode.

6 files changed, 32 insertions, 13 deletions

diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx
index 08d15496..9a2f6cf4 100644
--- a/web/src/js/components/Footer.jsx
+++ b/web/src/js/components/Footer.jsx
@@ -49,11 +49,13 @@ function Footer({ settings }) {
                 <span className="label label-success">stream: {formatSize(stream_large_bodies)}</span>
             )}
             <div className="pull-right">
-                {server && (
+                { MITMWEB_STATIC ?
+                    (<span className="label label-primary" title="static">Static</span>):
+                    server && (
                     <span className="label label-primary" title="HTTP Proxy Server Address">
                         {listen_host||"*"}:{listen_port}
-                    </span>
-                )}
+                    </span>)
+                }
             <span className="label label-info" title="Mitmproxy Version">
             v{version}
             </span>
diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx
index ebe7453c..9b7354eb 100644
--- a/web/src/js/components/Header.jsx
+++ b/web/src/js/components/Header.jsx
@@ -8,6 +8,7 @@ import FileMenu from './Header/FileMenu'
 import FlowMenu from './Header/FlowMenu'
 import {setActiveMenu} from '../ducks/ui/header'
 import ConnectionIndicator from "./Header/ConnectionIndicator"
+import HideInStatic from './common/HideInStatic'
 
 class Header extends Component {
     static entries = [MainMenu, OptionMenu]
@@ -40,7 +41,9 @@ class Header extends Component {
                             {Entry.title}
                         </a>
                     ))}
-                    <ConnectionIndicator/>
+                    <HideInStatic>
+                        <ConnectionIndicator/>
+                    </HideInStatic>
                 </nav>
                 <div>
                     <Active/>
diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index 62f721cf..cf346343 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -5,6 +5,7 @@ import FileChooser from '../common/FileChooser'
 import Dropdown, {Divider} from '../common/Dropdown'
 import * as flowsActions from '../../ducks/flows'
 import * as modalActions from '../../ducks/ui/modal'
+import HideInStatic from "../common/HideInStatic";
 
 FileMenu.propTypes = {
     clearFlows: PropTypes.func.isRequired,
@@ -40,7 +41,6 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) {
                 <i className="fa fa-fw fa-cog"></i>
                 &nbsp;Options
             </a>
-
             <Divider/>
 
             <a href="http://mitm.it/" target="_blank">
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index 8f104213..dc822150 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -4,6 +4,7 @@ import { connect } from "react-redux"
 import Button from "../common/Button"
 import { MessageUtils } from "../../flow/utils.js"
 import * as flowsActions from "../../ducks/flows"
+import HideInStatic from "../common/HideInStatic";
 
 FlowMenu.title = 'Flow'
 
@@ -22,7 +23,7 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
         return <div/>
     return (
         <div>
-            <div className="menu-group">
+            <HideInStatic className="menu-group">
                 <div className="menu-content">
                     <Button title="[r]eplay flow" icon="fa-repeat text-primary"
                             onClick={() => replayFlow(flow)}>
@@ -42,7 +43,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
                     </Button>
                 </div>
                 <div className="menu-legend">Flow Modification</div>
-            </div>
+            </HideInStatic>
+
             <div className="menu-group">
                 <div className="menu-content">
                     <Button title="download" icon="fa-download"
@@ -52,7 +54,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
                 </div>
                 <div className="menu-legend">Export</div>
             </div>
-            <div className="menu-group">
+
+            <HideInStatic className="menu-group">
                 <div className="menu-content">
                     <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow"
                             icon="fa-play text-success" onClick={() => resumeFlow(flow)}>
@@ -64,7 +67,7 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
                     </Button>
                 </div>
                 <div className="menu-legend">Interception</div>
-            </div>
+            </HideInStatic>
 
 
         </div>
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index b33d578d..566db42f 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -3,21 +3,23 @@ import PropTypes from 'prop-types'
 import { connect } from "react-redux"
 import { SettingsToggle, EventlogToggle } from "./MenuToggle"
 import DocsLink from "../common/DocsLink"
+import HideInStatic from "../common/HideInStatic";
 
 OptionMenu.title = 'Options'
 
 export default function OptionMenu() {
     return (
         <div>
-            <div className="menu-group">
+            <HideInStatic 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>
                 <div className="menu-legend">Protocol Support</div>
-            </div>
-            <div className="menu-group">
+            </HideInStatic>
+
+            <HideInStatic className="menu-group">
                 <div className="menu-content">
                     <SettingsToggle setting="anticache">
                         Disable Caching <DocsLink resource="features/anticache.html"/>
@@ -28,13 +30,17 @@ export default function OptionMenu() {
                     </SettingsToggle>
                 </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>
diff --git a/web/src/js/components/common/HideInStatic.jsx b/web/src/js/components/common/HideInStatic.jsx
new file mode 100644
index 00000000..9f515c97
--- /dev/null
+++ b/web/src/js/components/common/HideInStatic.jsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function HideInStatic({className, children }) {
+    return MITMWEB_STATIC ? null : ( <div className={className}>{children}</div> )
+}