From 6a161be6b4c526fcc5f6581c7faff00a2c976f37 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Thu, 18 Sep 2014 00:01:45 +0200
Subject: .jsx -> .jsx.js

Rename jsx files to be compatible with Chrome Dev Tools and
Workspace Mapping.
---
 web/src/js/components/eventlog.jsx     |  41 ---------
 web/src/js/components/eventlog.jsx.js  |  41 +++++++++
 web/src/js/components/flowtable.jsx    | 160 --------------------------------
 web/src/js/components/flowtable.jsx.js | 163 +++++++++++++++++++++++++++++++++
 web/src/js/components/footer.jsx       |  12 ---
 web/src/js/components/footer.jsx.js    |  12 +++
 web/src/js/components/header.jsx       |  89 ------------------
 web/src/js/components/header.jsx.js    |  89 ++++++++++++++++++
 web/src/js/components/proxyapp.jsx     |  46 ----------
 web/src/js/components/proxyapp.jsx.js  |  46 ++++++++++
 10 files changed, 351 insertions(+), 348 deletions(-)
 delete mode 100644 web/src/js/components/eventlog.jsx
 create mode 100644 web/src/js/components/eventlog.jsx.js
 delete mode 100644 web/src/js/components/flowtable.jsx
 create mode 100644 web/src/js/components/flowtable.jsx.js
 delete mode 100644 web/src/js/components/footer.jsx
 create mode 100644 web/src/js/components/footer.jsx.js
 delete mode 100644 web/src/js/components/header.jsx
 create mode 100644 web/src/js/components/header.jsx.js
 delete mode 100644 web/src/js/components/proxyapp.jsx
 create mode 100644 web/src/js/components/proxyapp.jsx.js

(limited to 'web/src/js/components')

diff --git a/web/src/js/components/eventlog.jsx b/web/src/js/components/eventlog.jsx
deleted file mode 100644
index df212177..00000000
--- a/web/src/js/components/eventlog.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/** @jsx React.DOM */
-
-var EventLog = React.createClass({
-    mixins:[AutoScrollMixin],
-    getInitialState: function () {
-        return {
-            log: []
-        };
-    },
-    componentDidMount: function () {
-        this.log = EventLogStore.getView();
-        this.log.addListener("change", this.onEventLogChange);
-    },
-    componentWillUnmount: function () {
-        this.log.removeListener("change", this.onEventLogChange);
-        this.log.close();
-    },
-    onEventLogChange: function () {
-        this.setState({
-            log: this.log.getAll()
-        });
-    },
-    close: function () {
-        SettingsActions.update({
-            showEventLog: false
-        });
-    },
-    render: function () {
-        var messages = this.state.log.map(function(row) {
-            var indicator = null;
-            if(row.source === "ui"){
-                indicator = <i className="fa fa-html5"></i>;
-            }
-            return (
-                <div key={row.id}>
-                    { indicator } {row.message}
-                </div>);
-        });
-        return <pre className="eventlog">{messages}</pre>;
-    }
-});
\ No newline at end of file
diff --git a/web/src/js/components/eventlog.jsx.js b/web/src/js/components/eventlog.jsx.js
new file mode 100644
index 00000000..df212177
--- /dev/null
+++ b/web/src/js/components/eventlog.jsx.js
@@ -0,0 +1,41 @@
+/** @jsx React.DOM */
+
+var EventLog = React.createClass({
+    mixins:[AutoScrollMixin],
+    getInitialState: function () {
+        return {
+            log: []
+        };
+    },
+    componentDidMount: function () {
+        this.log = EventLogStore.getView();
+        this.log.addListener("change", this.onEventLogChange);
+    },
+    componentWillUnmount: function () {
+        this.log.removeListener("change", this.onEventLogChange);
+        this.log.close();
+    },
+    onEventLogChange: function () {
+        this.setState({
+            log: this.log.getAll()
+        });
+    },
+    close: function () {
+        SettingsActions.update({
+            showEventLog: false
+        });
+    },
+    render: function () {
+        var messages = this.state.log.map(function(row) {
+            var indicator = null;
+            if(row.source === "ui"){
+                indicator = <i className="fa fa-html5"></i>;
+            }
+            return (
+                <div key={row.id}>
+                    { indicator } {row.message}
+                </div>);
+        });
+        return <pre className="eventlog">{messages}</pre>;
+    }
+});
\ No newline at end of file
diff --git a/web/src/js/components/flowtable.jsx b/web/src/js/components/flowtable.jsx
deleted file mode 100644
index a94e559f..00000000
--- a/web/src/js/components/flowtable.jsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/** @jsx React.DOM */
-
-var FlowRow = React.createClass({
-    render: function(){
-        var flow = this.props.flow;
-        var columns = this.props.columns.map(function(column){
-            return column({
-                key: column.displayName,
-                flow: flow
-            });
-        }.bind(this));
-        return <tr>{columns}</tr>;
-    }
-});
-
-var FlowTableHead = React.createClass({
-    render: function(){
-        var columns = this.props.columns.map(function(column){
-            return column.renderTitle();
-        }.bind(this));
-        return <thead>{columns}</thead>;
-    }
-});
-
-var FlowTableBody = React.createClass({
-    render: function(){
-        var rows = this.props.flows.map(function(flow){
-            //TODO: Add UUID
-            return <FlowRow flow={flow} columns={this.props.columns}/>;
-        }.bind(this));
-        return <tbody>{rows}</tbody>;
-    }
-});
-
-
-var TLSColumn = React.createClass({
-    statics: {
-        renderTitle: function(){
-            return <th key="tls" className="col-tls"></th>;
-        }
-    },
-    render: function(){
-        var flow = this.props.flow;
-        var ssl = (flow.request.scheme == "https");
-        return <td className={ssl ? "col-tls-https" : "col-tls-http"}></td>;
-    }
-});
-
-
-var IconColumn = React.createClass({
-    statics: {
-        renderTitle: function(){
-            return <th key="icon" className="col-icon"></th>;
-        }
-    },
-    render: function(){
-        var flow = this.props.flow;
-        return <td className="resource-icon resource-icon-plain"></td>;
-    }
-});
-
-var PathColumn = React.createClass({
-    statics: {
-        renderTitle: function(){
-            return <th key="path" className="col-path">Path</th>;
-        }
-    },
-    render: function(){
-        var flow = this.props.flow;
-        return <td>{flow.request.scheme + "://" + flow.request.host + flow.request.path}</td>;
-    }
-});
-
-
-var MethodColumn = React.createClass({
-    statics: {
-        renderTitle: function(){
-            return <th key="method" className="col-method">Method</th>;
-        }
-    },
-    render: function(){
-        var flow = this.props.flow;
-        return <td>{flow.request.method}</td>;
-    }
-});
-
-
-var StatusColumn = React.createClass({
-    statics: {
-        renderTitle: function(){
-            return <th key="status" className="col-status">Status</th>;
-        }
-    },
-    render: function(){
-        var flow = this.props.flow;
-        var status;
-        if(flow.response){
-            status = flow.response.code;
-        } else {
-            status = null;
-        }
-        return <td>{status}</td>;
-    }
-});
-
-
-var TimeColumn = React.createClass({
-    statics: {
-        renderTitle: function(){
-            return <th key="time" className="col-time">Time</th>;
-        }
-    },
-    render: function(){
-        var flow = this.props.flow;
-        var time;
-        if(flow.response){
-            time = Math.round(1000 * (flow.response.timestamp_end - flow.request.timestamp_start))+"ms";
-        } else {
-            time = "...";
-        }
-        return <td>{time}</td>;
-    }
-});
-
-
-var all_columns = [TLSColumn, IconColumn, PathColumn, MethodColumn, StatusColumn, TimeColumn];
-
-
-var FlowTable = React.createClass({
-    getInitialState: function () {
-        return {
-            flows: [],
-            columns: all_columns
-        };
-    },
-    componentDidMount: function () {
-        this.flowStore = FlowStore.getView();
-        this.flowStore.addListener("change",this.onFlowChange);
-    },
-    componentWillUnmount: function () {
-        this.flowStore.removeListener("change",this.onFlowChange);
-        this.flowStore.close();
-    },
-    onFlowChange: function () {
-        this.setState({
-            flows: this.flowStore.getAll()
-        });
-    },
-    render: function () {
-        var flows = this.state.flows.map(function(flow){
-         return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
-        });
-        return (
-            <table className="flow-table">
-                <FlowTableHead columns={this.state.columns}/>
-                <FlowTableBody columns={this.state.columns} flows={this.state.flows}/>
-            </table>
-            );
-    }
-});
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
new file mode 100644
index 00000000..39721baf
--- /dev/null
+++ b/web/src/js/components/flowtable.jsx.js
@@ -0,0 +1,163 @@
+/** @jsx React.DOM */
+
+var FlowRow = React.createClass({
+    render: function(){
+        var flow = this.props.flow;
+        var columns = this.props.columns.map(function(column){
+            return column({
+                key: column.displayName,
+                flow: flow
+            });
+        }.bind(this));
+        return <tr onClick={this.props.onClick} >{columns}</tr>;
+    }
+});
+
+var FlowTableHead = React.createClass({
+    render: function(){
+        var columns = this.props.columns.map(function(column){
+            return column.renderTitle();
+        }.bind(this));
+        return <thead>{columns}</thead>;
+    }
+});
+
+var FlowTableBody = React.createClass({
+    render: function(){
+        var rows = this.props.flows.map(function(flow){
+            //TODO: Add UUID
+            return <FlowRow onClick={this.props.onClick} flow={flow} columns={this.props.columns}/>;
+        }.bind(this));
+        return <tbody>{rows}</tbody>;
+    }
+});
+
+
+var TLSColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="tls" className="col-tls"></th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        var ssl = (flow.request.scheme == "https");
+        return <td className={ssl ? "col-tls-https" : "col-tls-http"}></td>;
+    }
+});
+
+
+var IconColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="icon" className="col-icon"></th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        return <td className="resource-icon resource-icon-plain"></td>;
+    }
+});
+
+var PathColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="path" className="col-path">Path</th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        return <td>{flow.request.scheme + "://" + flow.request.host + flow.request.path}</td>;
+    }
+});
+
+
+var MethodColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="method" className="col-method">Method</th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        return <td>{flow.request.method}</td>;
+    }
+});
+
+
+var StatusColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="status" className="col-status">Status</th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        var status;
+        if(flow.response){
+            status = flow.response.code;
+        } else {
+            status = null;
+        }
+        return <td>{status}</td>;
+    }
+});
+
+
+var TimeColumn = React.createClass({
+    statics: {
+        renderTitle: function(){
+            return <th key="time" className="col-time">Time</th>;
+        }
+    },
+    render: function(){
+        var flow = this.props.flow;
+        var time;
+        if(flow.response){
+            time = Math.round(1000 * (flow.response.timestamp_end - flow.request.timestamp_start))+"ms";
+        } else {
+            time = "...";
+        }
+        return <td>{time}</td>;
+    }
+});
+
+
+var all_columns = [TLSColumn, IconColumn, PathColumn, MethodColumn, StatusColumn, TimeColumn];
+
+
+var FlowTable = React.createClass({
+    getInitialState: function () {
+        return {
+            flows: [],
+            columns: all_columns
+        };
+    },
+    componentDidMount: function () {
+        this.flowStore = FlowStore.getView();
+        this.flowStore.addListener("change",this.onFlowChange);
+    },
+    componentWillUnmount: function () {
+        this.flowStore.removeListener("change",this.onFlowChange);
+        this.flowStore.close();
+    },
+    onFlowChange: function () {
+        this.setState({
+            flows: this.flowStore.getAll()
+        });
+    },
+    onClick: function(e){
+        console.log("rowclick", e);
+    },
+    render: function () {
+        var flows = this.state.flows.map(function(flow){
+         return <div>{flow.request.method} {flow.request.scheme}://{flow.request.host}{flow.request.path}</div>;
+        });
+        return (
+            <table className="flow-table">
+                <FlowTableHead columns={this.state.columns}/>
+                <FlowTableBody onClick={this.onClick} columns={this.state.columns} flows={this.state.flows}/>
+            </table>
+            );
+    }
+});
diff --git a/web/src/js/components/footer.jsx b/web/src/js/components/footer.jsx
deleted file mode 100644
index 9bcbbc2a..00000000
--- a/web/src/js/components/footer.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @jsx React.DOM */
-
-var Footer = React.createClass({
-    render: function () {
-        var mode = this.props.settings.mode;
-        return (
-            <footer>
-                {mode != "regular" ? <span className="label label-success">{mode} mode</span> : null}
-            </footer>
-            );
-    }
-});
diff --git a/web/src/js/components/footer.jsx.js b/web/src/js/components/footer.jsx.js
new file mode 100644
index 00000000..9bcbbc2a
--- /dev/null
+++ b/web/src/js/components/footer.jsx.js
@@ -0,0 +1,12 @@
+/** @jsx React.DOM */
+
+var Footer = React.createClass({
+    render: function () {
+        var mode = this.props.settings.mode;
+        return (
+            <footer>
+                {mode != "regular" ? <span className="label label-success">{mode} mode</span> : null}
+            </footer>
+            );
+    }
+});
diff --git a/web/src/js/components/header.jsx b/web/src/js/components/header.jsx
deleted file mode 100644
index 8f613ff1..00000000
--- a/web/src/js/components/header.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/** @jsx React.DOM */
-
-var MainMenu = React.createClass({
-    toggleEventLog: function () {
-        SettingsActions.update({
-            showEventLog: !this.props.settings.showEventLog
-        });
-    },
-    render: function () {
-        return (
-            <div>
-                <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
-                <i className="fa fa-database"></i> Display Event Log
-                </button>
-            </div>
-            );
-    }
-});
-var ToolsMenu = React.createClass({
-    render: function () {
-        return <div>Tools Menu</div>;
-    }
-});
-var ReportsMenu = React.createClass({
-    render: function () {
-        return <div>Reports Menu</div>;
-    }
-});
-
-
-var _Header_Entries = {
-    main: {
-        title: "Traffic",
-        route: "main",
-        menu: MainMenu
-    },
-    tools: {
-        title: "Tools",
-        route: "main",
-        menu: ToolsMenu
-    },
-    reports: {
-        title: "Visualization",
-        route: "reports",
-        menu: ReportsMenu
-    }
-};
-
-var Header = React.createClass({
-    getInitialState: function () {
-        return {
-            active: "main"
-        };
-    },
-    handleClick: function (active) {
-        this.setState({active: active});
-        ReactRouter.transitionTo(_Header_Entries[active].route);
-        return false;
-    },
-    handleFileClick: function () {
-        console.log("File click");
-    },
-    render: function () {
-        var header = [];
-        for (var item in _Header_Entries) {
-            var classes = this.state.active == item ? "active" : "";
-            header.push(<a key={item} href="#" className={classes}
-                onClick={this.handleClick.bind(this, item)}>{ _Header_Entries[item].title }</a>);
-        }
-
-        var menu = _Header_Entries[this.state.active].menu({
-            settings: this.props.settings
-        });
-        return (
-            <header>
-                <div className="title-bar">
-                    mitmproxy { this.props.settings.version }
-                </div>
-                <nav>
-                    <a href="#" className="special" onClick={this.handleFileClick}> File </a>
-                    {header}
-                </nav>
-                <div className="menu">
-                    { menu }
-                </div>
-            </header>
-            );
-    }
-});
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
new file mode 100644
index 00000000..8f613ff1
--- /dev/null
+++ b/web/src/js/components/header.jsx.js
@@ -0,0 +1,89 @@
+/** @jsx React.DOM */
+
+var MainMenu = React.createClass({
+    toggleEventLog: function () {
+        SettingsActions.update({
+            showEventLog: !this.props.settings.showEventLog
+        });
+    },
+    render: function () {
+        return (
+            <div>
+                <button className={"btn " + (this.props.settings.showEventLog ? "btn-primary" : "btn-default")} onClick={this.toggleEventLog}>
+                <i className="fa fa-database"></i> Display Event Log
+                </button>
+            </div>
+            );
+    }
+});
+var ToolsMenu = React.createClass({
+    render: function () {
+        return <div>Tools Menu</div>;
+    }
+});
+var ReportsMenu = React.createClass({
+    render: function () {
+        return <div>Reports Menu</div>;
+    }
+});
+
+
+var _Header_Entries = {
+    main: {
+        title: "Traffic",
+        route: "main",
+        menu: MainMenu
+    },
+    tools: {
+        title: "Tools",
+        route: "main",
+        menu: ToolsMenu
+    },
+    reports: {
+        title: "Visualization",
+        route: "reports",
+        menu: ReportsMenu
+    }
+};
+
+var Header = React.createClass({
+    getInitialState: function () {
+        return {
+            active: "main"
+        };
+    },
+    handleClick: function (active) {
+        this.setState({active: active});
+        ReactRouter.transitionTo(_Header_Entries[active].route);
+        return false;
+    },
+    handleFileClick: function () {
+        console.log("File click");
+    },
+    render: function () {
+        var header = [];
+        for (var item in _Header_Entries) {
+            var classes = this.state.active == item ? "active" : "";
+            header.push(<a key={item} href="#" className={classes}
+                onClick={this.handleClick.bind(this, item)}>{ _Header_Entries[item].title }</a>);
+        }
+
+        var menu = _Header_Entries[this.state.active].menu({
+            settings: this.props.settings
+        });
+        return (
+            <header>
+                <div className="title-bar">
+                    mitmproxy { this.props.settings.version }
+                </div>
+                <nav>
+                    <a href="#" className="special" onClick={this.handleFileClick}> File </a>
+                    {header}
+                </nav>
+                <div className="menu">
+                    { menu }
+                </div>
+            </header>
+            );
+    }
+});
diff --git a/web/src/js/components/proxyapp.jsx b/web/src/js/components/proxyapp.jsx
deleted file mode 100644
index 63998ffe..00000000
--- a/web/src/js/components/proxyapp.jsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/** @jsx React.DOM */
-
-//TODO: Move out of here, just a stub.
-var Reports = React.createClass({
-    render: function () {
-        return <div>ReportEditor</div>;
-    }
-});
-
-
-var ProxyAppMain = React.createClass({
-    getInitialState: function () {
-        return { settings: SettingsStore.getAll() };
-    },
-    componentDidMount: function () {
-        SettingsStore.addListener("change", this.onSettingsChange);
-    },
-    componentWillUnmount: function () {
-        SettingsStore.removeListener("change", this.onSettingsChange);
-    },
-    onSettingsChange: function () {
-        console.log("onSettingsChange");
-        this.setState({settings: SettingsStore.getAll()});
-    },
-    render: function () {
-        return (
-            <div id="container">
-                <Header settings={this.state.settings}/>
-                <div id="main"><this.props.activeRouteHandler/></div>
-                {this.state.settings.showEventLog ? <EventLog/> : null}
-                <Footer settings={this.state.settings}/>
-            </div>
-            );
-    }
-});
-
-
-var ProxyApp = (
-    <ReactRouter.Routes location="hash">
-        <ReactRouter.Route name="app" path="/" handler={ProxyAppMain}>
-            <ReactRouter.Route name="main" handler={FlowTable}/>
-            <ReactRouter.Route name="reports" handler={Reports}/>
-            <ReactRouter.Redirect to="main"/>
-        </ReactRouter.Route>
-    </ReactRouter.Routes>
-    );
diff --git a/web/src/js/components/proxyapp.jsx.js b/web/src/js/components/proxyapp.jsx.js
new file mode 100644
index 00000000..63998ffe
--- /dev/null
+++ b/web/src/js/components/proxyapp.jsx.js
@@ -0,0 +1,46 @@
+/** @jsx React.DOM */
+
+//TODO: Move out of here, just a stub.
+var Reports = React.createClass({
+    render: function () {
+        return <div>ReportEditor</div>;
+    }
+});
+
+
+var ProxyAppMain = React.createClass({
+    getInitialState: function () {
+        return { settings: SettingsStore.getAll() };
+    },
+    componentDidMount: function () {
+        SettingsStore.addListener("change", this.onSettingsChange);
+    },
+    componentWillUnmount: function () {
+        SettingsStore.removeListener("change", this.onSettingsChange);
+    },
+    onSettingsChange: function () {
+        console.log("onSettingsChange");
+        this.setState({settings: SettingsStore.getAll()});
+    },
+    render: function () {
+        return (
+            <div id="container">
+                <Header settings={this.state.settings}/>
+                <div id="main"><this.props.activeRouteHandler/></div>
+                {this.state.settings.showEventLog ? <EventLog/> : null}
+                <Footer settings={this.state.settings}/>
+            </div>
+            );
+    }
+});
+
+
+var ProxyApp = (
+    <ReactRouter.Routes location="hash">
+        <ReactRouter.Route name="app" path="/" handler={ProxyAppMain}>
+            <ReactRouter.Route name="main" handler={FlowTable}/>
+            <ReactRouter.Route name="reports" handler={Reports}/>
+            <ReactRouter.Redirect to="main"/>
+        </ReactRouter.Route>
+    </ReactRouter.Routes>
+    );
-- 
cgit v1.2.3