From 756b734ae294da09041303be52f9e9ced0b40d2d Mon Sep 17 00:00:00 2001
From: Matthew Shao <me@matshao.com>
Date: Tue, 8 Aug 2017 21:57:42 +0800
Subject: [PATCH] [web] update HideInStatic and some components.

---
 web/src/js/components/Footer.jsx              | 6 ++++--
 web/src/js/components/Header/FileMenu.jsx     | 2 ++
 web/src/js/components/Header/FlowMenu.jsx     | 8 ++++++--
 web/src/js/components/Header/OptionMenu.jsx   | 8 ++++++--
 web/src/js/components/common/HideInStatic.jsx | 4 ++--
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/web/src/js/components/Footer.jsx b/web/src/js/components/Footer.jsx
index 9a2f6cf48..db9afe6f4 100644
--- a/web/src/js/components/Footer.jsx
+++ b/web/src/js/components/Footer.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { formatSize } from '../utils.js'
+import HideInStatic from '../components/common/HideInStatic'
 
 Footer.propTypes = {
     settings: PropTypes.object.isRequired,
@@ -49,13 +50,14 @@ function Footer({ settings }) {
                 <span className="label label-success">stream: {formatSize(stream_large_bodies)}</span>
             )}
             <div className="pull-right">
-                { MITMWEB_STATIC ?
-                    (<span className="label label-primary" title="static">Static</span>):
+                <HideInStatic>
+                {
                     server && (
                     <span className="label label-primary" title="HTTP Proxy Server Address">
                         {listen_host||"*"}:{listen_port}
                     </span>)
                 }
+                </HideInStatic>
             <span className="label label-info" title="Mitmproxy Version">
             v{version}
             </span>
diff --git a/web/src/js/components/Header/FileMenu.jsx b/web/src/js/components/Header/FileMenu.jsx
index cf3463434..5cb8e507a 100644
--- a/web/src/js/components/Header/FileMenu.jsx
+++ b/web/src/js/components/Header/FileMenu.jsx
@@ -37,6 +37,7 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) {
                 &nbsp;Save...
             </a>
 
+            <HideInStatic>
             <a href="#" onClick={e => { e.preventDefault(); openModal(); }}>
                 <i className="fa fa-fw fa-cog"></i>
                 &nbsp;Options
@@ -47,6 +48,7 @@ export function FileMenu ({clearFlows, loadFlows, saveFlows, openModal}) {
                 <i className="fa fa-fw fa-external-link"></i>
                 &nbsp;Install Certificates...
             </a>
+            </HideInStatic>
         </Dropdown>
     )
 }
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index dc8221501..70c8bfcfe 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -23,7 +23,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
         return <div/>
     return (
         <div>
-            <HideInStatic className="menu-group">
+            <HideInStatic>
+            <div className="menu-group">
                 <div className="menu-content">
                     <Button title="[r]eplay flow" icon="fa-repeat text-primary"
                             onClick={() => replayFlow(flow)}>
@@ -43,6 +44,7 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
                     </Button>
                 </div>
                 <div className="menu-legend">Flow Modification</div>
+            </div>
             </HideInStatic>
 
             <div className="menu-group">
@@ -55,7 +57,8 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
                 <div className="menu-legend">Export</div>
             </div>
 
-            <HideInStatic className="menu-group">
+            <HideInStatic>
+            <div 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)}>
@@ -67,6 +70,7 @@ export function FlowMenu({ flow, resumeFlow, killFlow, replayFlow, duplicateFlow
                     </Button>
                 </div>
                 <div className="menu-legend">Interception</div>
+            </div>
             </HideInStatic>
 
 
diff --git a/web/src/js/components/Header/OptionMenu.jsx b/web/src/js/components/Header/OptionMenu.jsx
index 566db42f9..78519a340 100644
--- a/web/src/js/components/Header/OptionMenu.jsx
+++ b/web/src/js/components/Header/OptionMenu.jsx
@@ -10,16 +10,19 @@ OptionMenu.title = 'Options'
 export default function OptionMenu() {
     return (
         <div>
-            <HideInStatic className="menu-group">
+            <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>
                 <div className="menu-legend">Protocol Support</div>
+            </div>
             </HideInStatic>
 
-            <HideInStatic className="menu-group">
+            <HideInStatic>
+            <div className="menu-group">
                 <div className="menu-content">
                     <SettingsToggle setting="anticache">
                         Disable Caching <DocsLink resource="features/anticache.html"/>
@@ -30,6 +33,7 @@ export default function OptionMenu() {
                     </SettingsToggle>
                 </div>
                 <div className="menu-legend">HTTP Options</div>
+            </div>
             </HideInStatic>
 
             <div className="menu-group">
diff --git a/web/src/js/components/common/HideInStatic.jsx b/web/src/js/components/common/HideInStatic.jsx
index 9f515c972..c5f3bf472 100644
--- a/web/src/js/components/common/HideInStatic.jsx
+++ b/web/src/js/components/common/HideInStatic.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export default function HideInStatic({className, children }) {
-    return MITMWEB_STATIC ? null : ( <div className={className}>{children}</div> )
+export default function HideInStatic({ children }) {
+    return global.MITMWEB_STATIC ? null : [children]
 }