[web] Add HideInStatic Component

HideInStaic compoent will check the MITMWEB_STATIC var, and hide the
responsive components in static mode.
This commit is contained in:
Matthew Shao 2017-08-07 11:05:02 +08:00
parent 94a0b82cee
commit f7b494ccf2
6 changed files with 32 additions and 13 deletions

View File

@ -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>

View File

@ -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/>

View File

@ -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">

View File

@ -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>

View File

@ -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>

View File

@ -0,0 +1,5 @@
import React from 'react'
export default function HideInStatic({className, children }) {
return MITMWEB_STATIC ? null : ( <div className={className}>{children}</div> )
}