Merge branch 'master' of https://github.com/mitmproxy/mitmproxy

6 files changed, 51 insertions, 66 deletions

diff --git a/web/src/js/components/common.js b/web/src/js/components/common.js
index 5fae7415..447e6eec 100644
--- a/web/src/js/components/common.js
+++ b/web/src/js/components/common.js
@@ -29,40 +29,6 @@ export var StickyHeadMixin = {
     }
 };
 
-export var SettingsState = {
-    contextTypes: {
-        settingsStore: React.PropTypes.object.isRequired
-    },
-    getInitialState: function () {
-        return {
-            settings: this.context.settingsStore.dict
-        };
-    },
-    componentDidMount: function () {
-        this.context.settingsStore.addListener("recalculate", this.onSettingsChange);
-    },
-    componentWillUnmount: function () {
-        this.context.settingsStore.removeListener("recalculate", this.onSettingsChange);
-    },
-    onSettingsChange: function () {
-        this.setState({
-            settings: this.context.settingsStore.dict
-        });
-    },
-};
-
-
-export var ChildFocus = {
-    contextTypes: {
-        returnFocus: React.PropTypes.func
-    },
-    returnFocus: function () {
-        ReactDOM.findDOMNode(this).blur();
-        window.getSelection().removeAllRanges();
-        this.context.returnFocus();
-    }
-};
-
 
 export var Router = {
     contextTypes: {
diff --git a/web/src/js/components/editor.js b/web/src/js/components/editor.js
index c929a244..eed2f7c6 100644
--- a/web/src/js/components/editor.js
+++ b/web/src/js/components/editor.js
@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from 'react-dom';
-import {ChildFocus} from "./common.js";
 import {Key} from "../utils.js";
 
 var contentToHtml = function (content) {
@@ -214,7 +213,9 @@ var ValidateEditor = React.createClass({
  Text Editor with mitmweb-specific convenience features
  */
 export var ValueEditor = React.createClass({
-    mixins: [ChildFocus],
+    contextTypes: {
+        returnFocus: React.PropTypes.func
+    },
     propTypes: {
         content: React.PropTypes.string.isRequired,
         onDone: React.PropTypes.func.isRequired,
@@ -232,6 +233,6 @@ export var ValueEditor = React.createClass({
         ReactDOM.findDOMNode(this).focus();
     },
     onStop: function () {
-        this.returnFocus();
+        this.context.returnFocus();
     }
 });
\ No newline at end of file
diff --git a/web/src/js/components/footer.js b/web/src/js/components/footer.js
index 415c2577..e2d96288 100644
--- a/web/src/js/components/footer.js
+++ b/web/src/js/components/footer.js
@@ -1,19 +1,20 @@
 import React from "react";
 import {SettingsState} from "./common.js";
 
-var Footer = React.createClass({
-    mixins: [SettingsState],
-    render: function () {
-        var mode = this.state.settings.mode;
-        var intercept = this.state.settings.intercept;
-        return (
-            <footer>
-                {mode && mode != "regular" ? <span className="label label-success">{mode} mode</span> : null}
-                &nbsp;
-                {intercept ? <span className="label label-success">Intercept: {intercept}</span> : null}
-            </footer>
-        );
-    }
-});
+Footer.propTypes = {
+    settings: React.PropTypes.object.isRequired,
+};
 
-export default Footer;
\ No newline at end of file
+export default function Footer({ settings }) {
+    const {mode, intercept} = settings;
+    return (
+        <footer>
+            {mode && mode != "regular" && (
+                <span className="label label-success">{mode} mode</span>
+            )}
+            {intercept && (
+                <span className="label label-success">Intercept: {intercept}</span>
+            )}
+        </footer>
+    );
+}
diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index 3833a6ee..1af928a3 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -4,7 +4,7 @@ import $ from "jquery";
 
 import Filt from "../filt/filt.js";
 import {Key} from "../utils.js";
-import {Router, SettingsState, ChildFocus} from "./common.js";
+import {Router} from "./common.js";
 import {SettingsActions, FlowActions} from "../actions.js";
 import {Query} from "../actions.js";
 
@@ -51,7 +51,9 @@ var FilterDocs = React.createClass({
     }
 });
 var FilterInput = React.createClass({
-    mixins: [ChildFocus],
+    contextTypes: {
+        returnFocus: React.PropTypes.func
+    },
     getInitialState: function () {
         // Consider both focus and mouseover for showing/hiding the tooltip,
         // because onBlur of the input is triggered before the click on the tooltip
@@ -118,7 +120,7 @@ var FilterInput = React.createClass({
     },
     blur: function () {
         ReactDOM.findDOMNode(this.refs.input).blur();
-        this.returnFocus();
+        this.context.returnFocus();
     },
     select: function () {
         ReactDOM.findDOMNode(this.refs.input).select();
@@ -159,7 +161,10 @@ var FilterInput = React.createClass({
 });
 
 export var MainMenu = React.createClass({
-    mixins: [Router, SettingsState],
+    mixins: [Router],
+    propTypes: {
+        settings: React.PropTypes.object.isRequired,
+    },
     statics: {
         title: "Start",
         route: "flows"
@@ -180,7 +185,7 @@ export var MainMenu = React.createClass({
     render: function () {
         var search = this.getQuery()[Query.SEARCH] || "";
         var highlight = this.getQuery()[Query.HIGHLIGHT] || "";
-        var intercept = this.state.settings.intercept || "";
+        var intercept = this.props.settings.intercept || "";
 
         return (
             <div>
@@ -349,6 +354,9 @@ var header_entries = [MainMenu, ViewMenu /*, ReportsMenu */];
 
 export var Header = React.createClass({
     mixins: [Router],
+    propTypes: {
+        settings: React.PropTypes.object.isRequired,
+    },
     getInitialState: function () {
         return {
             active: header_entries[0]
@@ -384,7 +392,7 @@ export var Header = React.createClass({
                     {header}
                 </nav>
                 <div className="menu">
-                    <this.state.active ref="active"/>
+                    <this.state.active ref="active" settings={this.props.settings}/>
                 </div>
             </header>
         );
diff --git a/web/src/js/components/prompt.js b/web/src/js/components/prompt.js
index 7b398038..e324f7d4 100644
--- a/web/src/js/components/prompt.js
+++ b/web/src/js/components/prompt.js
@@ -3,10 +3,11 @@ import ReactDOM from 'react-dom';
 import _ from "lodash";
 
 import {Key} from "../utils.js";
-import {ChildFocus} from "./common.js"
 
 var Prompt = React.createClass({
-    mixins: [ChildFocus],
+    contextTypes: {
+        returnFocus: React.PropTypes.func
+    },
     propTypes: {
         options: React.PropTypes.array.isRequired,
         done: React.PropTypes.func.isRequired,
@@ -35,7 +36,7 @@ var Prompt = React.createClass({
     },
     done: function (ret) {
         this.props.done(ret);
-        this.returnFocus();
+        this.context.returnFocus();
     },
     getOptions: function () {
         var opts = [];
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index 24f45ff5..d17a1522 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -23,7 +23,6 @@ var Reports = React.createClass({
 var ProxyAppMain = React.createClass({
     mixins: [Router],
     childContextTypes: {
-        settingsStore: React.PropTypes.object.isRequired,
         flowStore: React.PropTypes.object.isRequired,
         eventStore: React.PropTypes.object.isRequired,
         returnFocus: React.PropTypes.func.isRequired,
@@ -31,10 +30,16 @@ var ProxyAppMain = React.createClass({
     },
     componentDidMount: function () {
         this.focus();
+        this.settingsStore.addListener("recalculate", this.onSettingsChange);
+    },
+    componentWillUnmount: function () {
+        this.settingsStore.removeListener("recalculate", this.onSettingsChange);
+    },
+    onSettingsChange: function () {
+        this.setState({ settings: this.settingsStore.dict });
     },
     getChildContext: function () {
         return {
-            settingsStore: this.state.settingsStore,
             flowStore: this.state.flowStore,
             eventStore: this.state.eventStore,
             returnFocus: this.focus,
@@ -46,15 +51,18 @@ var ProxyAppMain = React.createClass({
         var flowStore = new FlowStore();
         var settingsStore = new SettingsStore();
 
+        this.settingsStore = settingsStore;
         // Default Settings before fetch
         _.extend(settingsStore.dict, {});
         return {
-            settingsStore: settingsStore,
+            settings: settingsStore.dict,
             flowStore: flowStore,
             eventStore: eventStore
         };
     },
     focus: function () {
+        document.activeElement.blur();
+        window.getSelection().removeAllRanges();
         ReactDOM.findDOMNode(this).focus();
     },
     getMainComponent: function () {
@@ -104,10 +112,10 @@ var ProxyAppMain = React.createClass({
         );
         return (
             <div id="container" tabIndex="0" onKeyDown={this.onKeydown}>
-                <Header ref="header"/>
+                <Header ref="header" settings={this.state.settings}/>
                 {children}
                 {eventlog}
-                <Footer/>
+                <Footer settings={this.state.settings}/>
             </div>
         );
     }