fix up web stuff

mitmproxy/web/static/app.css

@@ -42,7 +42,8 @@ html {
 }
 html,
 body,
-#container {
+#container,
+#mitmproxy {
   height: 100%;
   margin: 0;
   overflow: hidden;

mitmproxy/web/static/vendor.css

@@ -264,10 +264,10 @@ th {
   -moz-osx-font-smoothing: grayscale;
 }
 .glyphicon-asterisk:before {
-  content: "\2a";
+  content: "\002a";
 }
 .glyphicon-plus:before {
-  content: "\2b";
+  content: "\002b";
 }
 .glyphicon-euro:before,
 .glyphicon-eur:before {
@@ -2564,6 +2564,10 @@ output {
 .form-control::-webkit-input-placeholder {
   color: #999;
 }
+.form-control::-ms-expand {
+  border: 0;
+  background-color: transparent;
+}
 .form-control[disabled],
 .form-control[readonly],
 fieldset[disabled] .form-control {
@@ -2970,7 +2974,7 @@ select[multiple].input-lg {
 }
 @media (min-width: 768px) {
   .form-horizontal .form-group-lg .control-label {
-    padding-top: 14.333333px;
+    padding-top: 11px;
     font-size: 18px;
   }
 }
@@ -3077,9 +3081,6 @@ fieldset[disabled] a.btn {
 .open > .dropdown-toggle.btn-default {
   background-image: none;
 }
-.btn-default.disabled,
-.btn-default[disabled],
-fieldset[disabled] .btn-default,
 .btn-default.disabled:hover,
 .btn-default[disabled]:hover,
 fieldset[disabled] .btn-default:hover,
@@ -3088,13 +3089,7 @@ fieldset[disabled] .btn-default:hover,
 fieldset[disabled] .btn-default:focus,
 .btn-default.disabled.focus,
 .btn-default[disabled].focus,
-fieldset[disabled] .btn-default.focus,
-.btn-default.disabled:active,
-.btn-default[disabled]:active,
-fieldset[disabled] .btn-default:active,
-.btn-default.disabled.active,
-.btn-default[disabled].active,
-fieldset[disabled] .btn-default.active {
+fieldset[disabled] .btn-default.focus {
   background-color: #fff;
   border-color: #ccc;
 }
@@ -3143,9 +3138,6 @@ fieldset[disabled] .btn-default.active {
 .open > .dropdown-toggle.btn-primary {
   background-image: none;
 }
-.btn-primary.disabled,
-.btn-primary[disabled],
-fieldset[disabled] .btn-primary,
 .btn-primary.disabled:hover,
 .btn-primary[disabled]:hover,
 fieldset[disabled] .btn-primary:hover,
@@ -3154,13 +3146,7 @@ fieldset[disabled] .btn-primary:hover,
 fieldset[disabled] .btn-primary:focus,
 .btn-primary.disabled.focus,
 .btn-primary[disabled].focus,
-fieldset[disabled] .btn-primary.focus,
-.btn-primary.disabled:active,
-.btn-primary[disabled]:active,
-fieldset[disabled] .btn-primary:active,
-.btn-primary.disabled.active,
-.btn-primary[disabled].active,
-fieldset[disabled] .btn-primary.active {
+fieldset[disabled] .btn-primary.focus {
   background-color: #337ab7;
   border-color: #2e6da4;
 }
@@ -3209,9 +3195,6 @@ fieldset[disabled] .btn-primary.active {
 .open > .dropdown-toggle.btn-success {
   background-image: none;
 }
-.btn-success.disabled,
-.btn-success[disabled],
-fieldset[disabled] .btn-success,
 .btn-success.disabled:hover,
 .btn-success[disabled]:hover,
 fieldset[disabled] .btn-success:hover,
@@ -3220,13 +3203,7 @@ fieldset[disabled] .btn-success:hover,
 fieldset[disabled] .btn-success:focus,
 .btn-success.disabled.focus,
 .btn-success[disabled].focus,
-fieldset[disabled] .btn-success.focus,
-.btn-success.disabled:active,
-.btn-success[disabled]:active,
-fieldset[disabled] .btn-success:active,
-.btn-success.disabled.active,
-.btn-success[disabled].active,
-fieldset[disabled] .btn-success.active {
+fieldset[disabled] .btn-success.focus {
   background-color: #5cb85c;
   border-color: #4cae4c;
 }
@@ -3275,9 +3252,6 @@ fieldset[disabled] .btn-success.active {
 .open > .dropdown-toggle.btn-info {
   background-image: none;
 }
-.btn-info.disabled,
-.btn-info[disabled],
-fieldset[disabled] .btn-info,
 .btn-info.disabled:hover,
 .btn-info[disabled]:hover,
 fieldset[disabled] .btn-info:hover,
@@ -3286,13 +3260,7 @@ fieldset[disabled] .btn-info:hover,
 fieldset[disabled] .btn-info:focus,
 .btn-info.disabled.focus,
 .btn-info[disabled].focus,
-fieldset[disabled] .btn-info.focus,
-.btn-info.disabled:active,
-.btn-info[disabled]:active,
-fieldset[disabled] .btn-info:active,
-.btn-info.disabled.active,
-.btn-info[disabled].active,
-fieldset[disabled] .btn-info.active {
+fieldset[disabled] .btn-info.focus {
   background-color: #5bc0de;
   border-color: #46b8da;
 }
@@ -3341,9 +3309,6 @@ fieldset[disabled] .btn-info.active {
 .open > .dropdown-toggle.btn-warning {
   background-image: none;
 }
-.btn-warning.disabled,
-.btn-warning[disabled],
-fieldset[disabled] .btn-warning,
 .btn-warning.disabled:hover,
 .btn-warning[disabled]:hover,
 fieldset[disabled] .btn-warning:hover,
@@ -3352,13 +3317,7 @@ fieldset[disabled] .btn-warning:hover,
 fieldset[disabled] .btn-warning:focus,
 .btn-warning.disabled.focus,
 .btn-warning[disabled].focus,
-fieldset[disabled] .btn-warning.focus,
-.btn-warning.disabled:active,
-.btn-warning[disabled]:active,
-fieldset[disabled] .btn-warning:active,
-.btn-warning.disabled.active,
-.btn-warning[disabled].active,
-fieldset[disabled] .btn-warning.active {
+fieldset[disabled] .btn-warning.focus {
   background-color: #f0ad4e;
   border-color: #eea236;
 }
@@ -3407,9 +3366,6 @@ fieldset[disabled] .btn-warning.active {
 .open > .dropdown-toggle.btn-danger {
   background-image: none;
 }
-.btn-danger.disabled,
-.btn-danger[disabled],
-fieldset[disabled] .btn-danger,
 .btn-danger.disabled:hover,
 .btn-danger[disabled]:hover,
 fieldset[disabled] .btn-danger:hover,
@@ -3418,13 +3374,7 @@ fieldset[disabled] .btn-danger:hover,
 fieldset[disabled] .btn-danger:focus,
 .btn-danger.disabled.focus,
 .btn-danger[disabled].focus,
-fieldset[disabled] .btn-danger.focus,
-.btn-danger.disabled:active,
-.btn-danger[disabled]:active,
-fieldset[disabled] .btn-danger:active,
-.btn-danger.disabled.active,
-.btn-danger[disabled].active,
-fieldset[disabled] .btn-danger.active {
+fieldset[disabled] .btn-danger.focus {
   background-color: #d9534f;
   border-color: #d43f3a;
 }
@@ -3795,13 +3745,15 @@ tbody.collapse.in {
 }
 .btn-group-vertical > .btn:first-child:not(:last-child) {
   border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 .btn-group-vertical > .btn:last-child:not(:first-child) {
-  border-bottom-left-radius: 4px;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
 }
 .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
@@ -3858,6 +3810,9 @@ tbody.collapse.in {
   width: 100%;
   margin-bottom: 0;
 }
+.input-group .form-control:focus {
+  z-index: 3;
+}
 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn {
@@ -4768,7 +4723,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
 .pagination > li > span:hover,
 .pagination > li > a:focus,
 .pagination > li > span:focus {
-  z-index: 3;
+  z-index: 2;
   color: #23527c;
   background-color: #eeeeee;
   border-color: #ddd;
@@ -4779,7 +4734,7 @@ fieldset[disabled] .navbar-inverse .btn-link:focus {
 .pagination > .active > span:hover,
 .pagination > .active > a:focus,
 .pagination > .active > span:focus {
-  z-index: 2;
+  z-index: 3;
   color: #fff;
   background-color: #337ab7;
   border-color: #337ab7;
@@ -5001,6 +4956,8 @@ a.badge:focus {
 .container .jumbotron,
 .container-fluid .jumbotron {
   border-radius: 6px;
+  padding-left: 15px;
+  padding-right: 15px;
 }
 .jumbotron .container {
   max-width: 100%;
@@ -5947,7 +5904,6 @@ button.close {
 .modal-header {
   padding: 15px;
   border-bottom: 1px solid #e5e5e5;
-  min-height: 16.42857143px;
 }
 .modal-header .close {
   margin-top: -2px;
@@ -6339,6 +6295,7 @@ button.close {
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0);
 }
 .carousel-control.left {
   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
@@ -6448,16 +6405,16 @@ button.close {
   .carousel-control .icon-next {
     width: 30px;
     height: 30px;
-    margin-top: -15px;
+    margin-top: -10px;
     font-size: 30px;
   }
   .carousel-control .glyphicon-chevron-left,
   .carousel-control .icon-prev {
-    margin-left: -15px;
+    margin-left: -10px;
   }
   .carousel-control .glyphicon-chevron-right,
   .carousel-control .icon-next {
-    margin-right: -15px;
+    margin-right: -10px;
   }
   .carousel-caption {
     left: 20%;
@@ -6496,6 +6453,8 @@ button.close {
 .pager:after,
 .panel-body:before,
 .panel-body:after,
+.modal-header:before,
+.modal-header:after,
 .modal-footer:before,
 .modal-footer:after {
   content: " ";
@@ -6515,6 +6474,7 @@ button.close {
 .navbar-collapse:after,
 .pager:after,
 .panel-body:after,
+.modal-header:after,
 .modal-footer:after {
   clear: both;
 }

mitmproxy/web/templates/index.html

@@ -10,5 +10,6 @@
     <script src="/static/app.js"></script>
 </head>
 <body>
+<div id="mitmproxy"></div>
 </body>
 </html>

web/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "react"]
+}

web/.bowerrc

@@ -1,3 +0,0 @@
-{
-  "directory" : "bower_components"
-}

web/.eslintrc

@@ -1,8 +0,0 @@
-{
-  "ecmaFeatures": {
-    "jsx": true
-  },
-  "env": {
-    "es6": true
-  }
-}

web/.eslintrc.yml

@@ -0,0 +1,9 @@
+{
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    }
+}

web/gulpfile.js

@@ -7,8 +7,6 @@ var conf = require('./conf.js');
 var babelify = require('babelify');
 var browserify = require('browserify');
 var gulp = require("gulp");
-var concat = require('gulp-concat');
-var connect = require('gulp-connect');
 var eslint = require('gulp-eslint');
 var less = require("gulp-less");
 var livereload = require("gulp-livereload");
@@ -16,18 +14,13 @@ var minifyCSS = require('gulp-minify-css');
 var notify = require("gulp-notify");
 var peg = require("gulp-peg");
 var plumber = require("gulp-plumber");
-var react = require("gulp-react");
 var rename = require("gulp-rename");
-var replace = require('gulp-replace');
 var sourcemaps = require('gulp-sourcemaps');
 var gutil = require("gulp-util");
 var _ = require('lodash');
-var map = require("map-stream");
-var reactify = require('reactify');
 var uglifyify = require('uglifyify');
 var buffer = require('vinyl-buffer');
 var source = require('vinyl-source-stream');
-var transform = require('vinyl-transform');
 var watchify = require('watchify');
 
 var vendor_packages = _.difference(
@@ -116,6 +109,7 @@ function buildScript(bundler, filename, dev) {
     // listen for an update and run rebundle
     bundler.on('update', rebundle);
     bundler.on('log', gutil.log);
+    bundler.on('error', gutil.log);
 
     // run it once the first time buildScript is called
     return rebundle();
@@ -150,7 +144,7 @@ function app_stream(dev) {
     for (var vp of vendor_packages) {
         bundler.external(vp);
     }
-    bundler = bundler.transform(babelify).transform(reactify);
+    bundler = bundler.transform(babelify);
     return buildScript(bundler, "app.js", dev);
 }
 gulp.task('scripts-app-dev', function () {

web/package.json

@@ -15,41 +15,36 @@
     "testDirectoryName": "tests"
   },
   "dependencies": {
-    "bootstrap": "^3.3.4",
+    "bootstrap": "^3.3.6",
     "flux": "^2.1.1",
-    "jquery": "^2.1.4",
-    "lodash": "^3.10.1",
-    "react": "^0.13.3",
-    "react-router": "^0.13.2"
+    "jquery": "^2.2.1",
+    "lodash": "^4.5.1",
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7",
+    "react-router": "^2.0.0"
   },
   "devDependencies": {
-    "babelify": "^6.3.0",
-    "browserify": "^11.2.0",
-    "eslint": "^1.5.1",
-    "gulp": "^3.9.0",
-    "gulp-concat": "^2.6.0",
-    "gulp-connect": "^2.2.0",
-    "gulp-eslint": "^1.0.0",
-    "gulp-jshint": "^1.11.2",
-    "gulp-less": "^3.0.3",
+    "babel-core": "^6.5.2",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "babelify": "^7.2.0",
+    "browserify": "^13.0.0",
+    "eslint": "^2.2.0",
+    "gulp": "^3.9.1",
+    "gulp-eslint": "^2.0.0",
+    "gulp-less": "^3.0.5",
     "gulp-livereload": "^3.8.1",
-    "gulp-minify-css": "^1.2.1",
+    "gulp-minify-css": "^1.2.4",
     "gulp-notify": "^2.2.0",
-    "gulp-peg": "^0.1.2",
-    "gulp-plumber": "^1.0.1",
-    "gulp-react": "^3.0.1",
+    "gulp-peg": "^0.2.0",
+    "gulp-plumber": "^1.1.0",
     "gulp-rename": "^1.2.2",
-    "gulp-replace": "^0.5.4",
     "gulp-sourcemaps": "^1.6.0",
-    "gulp-uglify": "^1.4.1",
-    "gulp-util": "^3.0.6",
-    "lodash": "^3.10.1",
-    "map-stream": "0.0.6",
-    "reactify": "^1.1.1",
+    "gulp-util": "^3.0.7",
+    "lodash": "^4.5.1",
     "uglifyify": "^3.0.1",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
-    "vinyl-transform": "^1.0.0",
-    "watchify": "^3.4.0"
+    "watchify": "^3.7.0"
   }
 }

web/src/css/layout.less

@@ -1,4 +1,4 @@
-html, body, #container {
+html, body, #container, #mitmproxy {
     height: 100%;
     margin: 0;
     overflow: hidden;

web/src/js/app.js

@@ -1,9 +1,9 @@
-var React = require("react");
-var ReactRouter = require("react-router");
-var $ = require("jquery");
-var Connection = require("./connection");
-var proxyapp = require("./components/proxyapp.js");
-var EventLogActions = require("./actions.js").EventLogActions;
+import React from "react"
+import { render } from 'react-dom'
+import $ from "jquery"
+import Connection from "./connection"
+import {app} from "./components/proxyapp.js"
+import { EventLogActions } from "./actions.js"
 
 $(function () {
     window.ws = new Connection("/updates");
@@ -12,8 +12,6 @@ $(function () {
         EventLogActions.add_event(msg);
     };
 
-    ReactRouter.run(proxyapp.routes, function (Handler, state) {
-        React.render(<Handler/>, document.body);
-    });
+    render(app, document.getElementById("mitmproxy"));
 });
 

web/src/js/components/common.js

@@ -1,11 +1,12 @@
 var React = require("react");
+var ReactDOM = require("react-dom");
 var ReactRouter = require("react-router");
 var _ = require("lodash");
 
 // http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html (also contains inverse example)
-var AutoScrollMixin = {
+export var AutoScrollMixin = {
     componentWillUpdate: function () {
-        var node = this.getDOMNode();
+        var node = ReactDOM.findDOMNode(this);
         this._shouldScrollBottom = (
         node.scrollTop !== 0 &&
         node.scrollTop + node.clientHeight === node.scrollHeight
@@ -13,23 +14,23 @@ var AutoScrollMixin = {
     },
     componentDidUpdate: function () {
         if (this._shouldScrollBottom) {
-            var node = this.getDOMNode();
+            var node = ReactDOM.findDOMNode(this);
             node.scrollTop = node.scrollHeight;
         }
     },
 };
 
 
-var StickyHeadMixin = {
+export var StickyHeadMixin = {
     adjustHead: function () {
         // Abusing CSS transforms to set the element
         // referenced as head into some kind of position:sticky.
-        var head = this.refs.head.getDOMNode();
-        head.style.transform = "translate(0," + this.getDOMNode().scrollTop + "px)";
+        var head = this.refs.head;
+        head.style.transform = "translate(0," + ReactDOM.findDOMNode(this).scrollTop + "px)";
     }
 };
 
-var SettingsState = {
+export var SettingsState = {
     contextTypes: {
         settingsStore: React.PropTypes.object.isRequired
     },
@@ -52,58 +53,62 @@ var SettingsState = {
 };
 
 
-var ChildFocus = {
+export var ChildFocus = {
     contextTypes: {
         returnFocus: React.PropTypes.func
     },
     returnFocus: function(){
-        React.findDOMNode(this).blur();
+        ReactDOM.findDOMNode(this).blur();
         window.getSelection().removeAllRanges();
         this.context.returnFocus();
     }
 };
 
 
-var Navigation = _.extend({}, ReactRouter.Navigation, {
+export var Navigation = {
+    contextTypes: {
+        routerFoo: React.PropTypes.object,
+        router: React.PropTypes.object.isRequired
+    },
     setQuery: function (dict) {
-        var q = this.context.router.getCurrentQuery();
+        var q = this.context.routerFoo.location.query;
         for (var i in dict) {
             if (dict.hasOwnProperty(i)) {
                 q[i] = dict[i] || undefined; //falsey values shall be removed.
             }
         }
-        this.replaceWith(this.context.router.getCurrentPath(), this.context.router.getCurrentParams(), q);
+        this.replaceWith(undefined, q);
     },
-    replaceWith: function (routeNameOrPath, params, query) {
-        if (routeNameOrPath === undefined) {
-            routeNameOrPath = this.context.router.getCurrentPath();
-        }
-        if (params === undefined) {
-            params = this.context.router.getCurrentParams();
+    replaceWith: function (pathname, query) {
+        if (pathname === undefined) {
+            pathname = this.context.routerFoo.location.pathname;
         }
         if (query === undefined) {
-            query = this.context.router.getCurrentQuery();
+            query = this.context.routerFoo.query;
         }
-
-        this.context.router.replaceWith(routeNameOrPath, params, query);
+        console.log({ pathname, query });
+        this.context.router.replace({ pathname, query });
     }
-});
+};
 
 // react-router is fairly good at changing its API regularly.
 // We keep the old method for now - if it should turn out that their changes are permanent,
 // we may remove this mixin and access react-router directly again.
-var RouterState = _.extend({}, ReactRouter.State, {
+export var RouterState = {
+    contextTypes: {
+        routerFoo: React.PropTypes.object,
+    },
     getQuery: function () {
         // For whatever reason, react-router always returns the same object, which makes comparing
         // the current props with nextProps impossible. As a workaround, we just clone the query object.
-        return _.clone(this.context.router.getCurrentQuery());
+        return _.clone(this.context.routerFoo.location.query);
     },
     getParams: function () {
-        return _.clone(this.context.router.getCurrentParams());
+        return _.clone(this.context.routerFoo.params);
     }
-});
+};
 
-var Splitter = React.createClass({
+export var Splitter = React.createClass({
     getDefaultProps: function () {
         return {
             axis: "x"
@@ -127,7 +132,7 @@ var Splitter = React.createClass({
         window.addEventListener("dragend", this.onDragEnd);
     },
     onDragEnd: function () {
-        this.getDOMNode().style.transform = "";
+        ReactDOM.findDOMNode(this).style.transform = "";
         window.removeEventListener("dragend", this.onDragEnd);
         window.removeEventListener("mouseup", this.onMouseUp);
         window.removeEventListener("mousemove", this.onMouseMove);
@@ -135,7 +140,7 @@ var Splitter = React.createClass({
     onMouseUp: function (e) {
         this.onDragEnd();
 
-        var node = this.getDOMNode();
+        var node = ReactDOM.findDOMNode(this);
         var prev = node.previousElementSibling;
         var next = node.nextElementSibling;
 
@@ -163,7 +168,7 @@ var Splitter = React.createClass({
         } else {
             dY = e.pageY - this.state.startY;
         }
-        this.getDOMNode().style.transform = "translate(" + dX + "px," + dY + "px)";
+        ReactDOM.findDOMNode(this).style.transform = "translate(" + dX + "px," + dY + "px)";
     },
     onResize: function () {
         // Trigger a global resize event. This notifies components that employ virtual scrolling
@@ -176,7 +181,7 @@ var Splitter = React.createClass({
         if (!this.state.applied) {
             return;
         }
-        var node = this.getDOMNode();
+        var node = ReactDOM.findDOMNode(this);
         var prev = node.previousElementSibling;
         var next = node.nextElementSibling;
 
@@ -207,13 +212,3 @@ var Splitter = React.createClass({
         );
     }
 });
-
-module.exports = {
-    ChildFocus: ChildFocus,
-    RouterState: RouterState,
-    Navigation: Navigation,
-    StickyHeadMixin: StickyHeadMixin,
-    AutoScrollMixin: AutoScrollMixin,
-    Splitter: Splitter,
-    SettingsState: SettingsState
-};

web/src/js/components/editor.js

@@ -1,4 +1,5 @@
 var React = require("react");
+var ReactDOM = require('react-dom');
 var common = require("./common.js");
 var utils = require("../utils.js");
 
@@ -98,12 +99,12 @@ var EditorBase = React.createClass({
             range = document.caretRangeFromPoint(e.clientX, e.clientY);
         } else {
             range = document.createRange();
-            range.selectNodeContents(React.findDOMNode(this));
+            range.selectNodeContents(ReactDOM.findDOMNode(this));
         }
 
         this._ignore_events = true;
         this.setState({editable: true}, function () {
-            var node = React.findDOMNode(this);
+            var node = ReactDOM.findDOMNode(this);
             node.blur();
             node.focus();
             this._ignore_events = false;
@@ -117,7 +118,7 @@ var EditorBase = React.createClass({
         // a stop would cause a blur as a side-effect.
         // but a blur event must trigger a stop as well.
         // to fix this, make stop = blur and do the actual stop in the onBlur handler.
-        React.findDOMNode(this).blur();
+        ReactDOM.findDOMNode(this).blur();
         this.props.onStop && this.props.onStop();
     },
     _stop: function (e) {
@@ -126,14 +127,14 @@ var EditorBase = React.createClass({
         }
         console.log("_stop", _.extend({}, e));
         window.getSelection().removeAllRanges(); //make sure that selection is cleared on blur
-        var node = React.findDOMNode(this);
+        var node = ReactDOM.findDOMNode(this);
         var content = this.props.nodeToContent(node);
         this.setState({editable: false});
         this.props.onDone(content);
         this.props.onBlur && this.props.onBlur(e);
     },
     reset: function () {
-        React.findDOMNode(this).innerHTML = this.props.contentToHtml(this.props.content);
+        ReactDOM.findDOMNode(this).innerHTML = this.props.contentToHtml(this.props.content);
     },
     onKeyDown: function (e) {
         e.stopPropagation();
@@ -154,7 +155,7 @@ var EditorBase = React.createClass({
         }
     },
     onInput: function () {
-        var node = React.findDOMNode(this);
+        var node = ReactDOM.findDOMNode(this);
         var content = this.props.nodeToContent(node);
         this.props.onInput && this.props.onInput(content);
     }
@@ -228,7 +229,7 @@ var ValueEditor = React.createClass({
         />;
     },
     focus: function () {
-        React.findDOMNode(this).focus();
+        ReactDOM.findDOMNode(this).focus();
     },
     onStop: function () {
         this.returnFocus();

web/src/js/components/eventlog.js

@@ -1,7 +1,7 @@
 var React = require("react");
 var common = require("./common.js");
 var Query = require("../actions.js").Query;
-var VirtualScrollMixin = require("./virtualscroll.js");
+import { VirtualScrollMixin } from "./virtualscroll.js"
 var views = require("../store/view.js");
 var _ = require("lodash");
 

web/src/js/components/flowtable.js

@@ -1,9 +1,10 @@
 var React = require("react");
+var ReactDOM = require('react-dom');
 var common = require("./common.js");
 var utils = require("../utils.js");
 var _ = require("lodash");
 
-var VirtualScrollMixin = require("./virtualscroll.js");
+import { VirtualScrollMixin } from "./virtualscroll.js"
 var flowtable_columns = require("./flowtable-columns.js");
 
 var FlowRow = React.createClass({
@@ -143,7 +144,7 @@ var FlowTable = React.createClass({
     scrollIntoView: function (flow) {
         this.scrollRowIntoView(
             this.context.view.index(flow),
-            this.refs.body.getDOMNode().offsetTop
+            ReactDOM.findDOMNode(this.refs.body).offsetTop
         );
     },
     renderRow: function (flow) {

web/src/js/components/flowview/index.js

@@ -40,13 +40,7 @@ var FlowView = React.createClass({
         this.selectTab(tabs[nextIndex]);
     },
     selectTab: function (panel) {
-        this.replaceWith(
-            "flow",
-            {
-                flowId: this.getParams().flowId,
-                detailTab: panel
-            }
-        );
+        this.replaceWith(`/flows/${this.getParams().flowId}/${panel}`);
     },
     getActive: function(){
         return this.getParams().detailTab;
@@ -93,7 +87,7 @@ var FlowView = React.createClass({
         var tabs = this.getTabs(flow);
         var active = this.getActive();
 
-        if (!_.contains(tabs, active)) {
+        if (tabs.indexOf(active) < 0) {
             if (active === "response" && flow.error) {
                 active = "error";
             } else if (active === "error" && flow.response) {

web/src/js/components/flowview/messages.js

@@ -1,4 +1,5 @@
 var React = require("react");
+var ReactDOM = require('react-dom');
 var _ = require("lodash");
 
 var common = require("../common.js");
@@ -98,7 +99,7 @@ var HeaderEditor = React.createClass({
         return <ValueEditor ref="input" {...this.props} onKeyDown={this.onKeyDown} inline/>;
     },
     focus: function () {
-        this.getDOMNode().focus();
+        ReactDOM.findDOMNode(this).focus();
     },
     onKeyDown: function (e) {
         switch (e.keyCode) {

web/src/js/components/header.js

@@ -1,4 +1,5 @@
 var React = require("react");
+var ReactDOM = require('react-dom');
 var $ = require("jquery");
 
 var Filt = require("../filt/filt.js");
@@ -76,26 +77,24 @@ var FilterInput = React.createClass({
     },
     isValid: function (filt) {
         try {
+            var str = filt || this.state.value;
+            if(str){
                 Filt.parse(filt || this.state.value);
+            }
             return true;
         } catch (e) {
             return false;
         }
     },
     getDesc: function () {
-        var desc;
+        if(this.state.value) {
             try {
-            desc = Filt.parse(this.state.value).desc;
+                return Filt.parse(this.state.value).desc;
             } catch (e) {
-            desc = "" + e;
+                return "" + e;
             }
-        if (desc !== "true") {
-            return desc;
-        } else {
-            return (
-                <FilterDocs/>
-            );
         }
+        return <FilterDocs/>;
     },
     onFocus: function () {
         this.setState({focus: true});
@@ -118,11 +117,11 @@ var FilterInput = React.createClass({
         e.stopPropagation();
     },
     blur: function () {
-        this.refs.input.getDOMNode().blur();
+        ReactDOM.findDOMNode(this.refs.input).blur();
         this.returnFocus();
     },
     select: function () {
-        this.refs.input.getDOMNode().select();
+        ReactDOM.findDOMNode(this.refs.input).select();
     },
     render: function () {
         var isValid = this.isValid();

web/src/js/components/mainview.js

@@ -42,7 +42,8 @@ var MainView = React.createClass({
     },
     getViewFilt: function () {
         try {
-            var filt = Filt.parse(this.getQuery()[Query.SEARCH] || "");
+            var filtStr = this.getQuery()[Query.SEARCH];
+            var filt = filtStr ? Filt.parse(filtStr) : function(){return true};
             var highlightStr = this.getQuery()[Query.HIGHLIGHT];
             var highlight = highlightStr ? Filt.parse(highlightStr) : false;
         } catch (e) {
@@ -90,16 +91,11 @@ var MainView = React.createClass({
     },
     selectFlow: function (flow) {
         if (flow) {
-            this.replaceWith(
-                "flow",
-                {
-                    flowId: flow.id,
-                    detailTab: this.getParams().detailTab || "request"
-                }
-            );
+            var tab = this.getParams().detailTab || "request";
+            this.replaceWith(`/flows/${flow.id}/${tab}`);
             this.refs.flowTable.scrollIntoView(flow);
         } else {
-            this.replaceWith("flows", {});
+            this.replaceWith("/flows");
         }
     },
     selectFlowRelative: function (shift) {

web/src/js/components/prompt.js

@@ -1,4 +1,5 @@
 var React = require("react");
+var ReactDOM = require('react-dom');
 var _ = require("lodash");
 
 var utils = require("../utils.js");
@@ -12,7 +13,7 @@ var Prompt = React.createClass({
         prompt: React.PropTypes.string
     },
     componentDidMount: function () {
-        React.findDOMNode(this).focus();
+        ReactDOM.findDOMNode(this).focus();
     },
     onKeyDown: function (e) {
         e.stopPropagation();

web/src/js/components/proxyapp.js

@@ -1,4 +1,5 @@
 var React = require("react");
+var ReactDOM = require("react-dom");
 var ReactRouter = require("react-router");
 var _ = require("lodash");
 
@@ -27,6 +28,7 @@ var ProxyAppMain = React.createClass({
         flowStore: React.PropTypes.object.isRequired,
         eventStore: React.PropTypes.object.isRequired,
         returnFocus: React.PropTypes.func.isRequired,
+        routerFoo: React.PropTypes.object,
     },
     componentDidMount: function () {
         this.focus();
@@ -37,6 +39,10 @@ var ProxyAppMain = React.createClass({
             flowStore: this.state.flowStore,
             eventStore: this.state.eventStore,
             returnFocus: this.focus,
+            routerFoo: {
+                location: this.props.location,
+                params: this.props.params
+            }
         };
     },
     getInitialState: function () {
@@ -53,10 +59,10 @@ var ProxyAppMain = React.createClass({
         };
     },
     focus: function () {
-        React.findDOMNode(this).focus();
+        ReactDOM.findDOMNode(this).focus();
     },
     getMainComponent: function () {
-        return this.refs.view.refs.__routeHandler__;
+        return this.refs.view;
     },
     onKeydown: function (e) {
 
@@ -88,7 +94,7 @@ var ProxyAppMain = React.createClass({
     },
     render: function () {
         var eventlog;
-        if (this.getQuery()[Query.SHOW_EVENTLOG]) {
+        if (this.props.location.query[Query.SHOW_EVENTLOG]) {
             eventlog = [
                 <common.Splitter key="splitter" axis="y"/>,
                 <EventLog key="eventlog"/>
@@ -96,10 +102,14 @@ var ProxyAppMain = React.createClass({
         } else {
             eventlog = null;
         }
+        var children = React.cloneElement(
+            this.props.children,
+            { ref: "view", query: this.props.location.query }
+        );
         return (
             <div id="container" tabIndex="0" onKeyDown={this.onKeydown}>
                 <header.Header ref="header"/>
-                <RouteHandler ref="view" query={this.getQuery()}/>
+                {children}
                 {eventlog}
                 <Footer/>
             </div>
@@ -108,22 +118,15 @@ var ProxyAppMain = React.createClass({
 });
 
 
-var Route = ReactRouter.Route;
-var RouteHandler = ReactRouter.RouteHandler;
-var Redirect = ReactRouter.Redirect;
-var DefaultRoute = ReactRouter.DefaultRoute;
-var NotFoundRoute = ReactRouter.NotFoundRoute;
+import { Route, Router, hashHistory, Redirect} from "react-router";
 
-
-var routes = (
-    <Route path="/" handler={ProxyAppMain}>
-        <Route name="flows" path="flows" handler={MainView}/>
-        <Route name="flow" path="flows/:flowId/:detailTab" handler={MainView}/>
-        <Route name="reports" handler={Reports}/>
-        <Redirect path="/" to="flows" />
+export var app = (
+<Router history={hashHistory}>
+    <Redirect from="/" to="/flows" />
+    <Route path="/" component={ProxyAppMain}>
+        <Route path="flows" component={MainView}/>
+        <Route path="flows/:flowId/:detailTab" component={MainView}/>
+        <Route path="reports" component={Reports}/>
     </Route>
+</Router>
 );
-
-module.exports = {
-    routes: routes
-};

web/src/js/components/virtualscroll.js

@@ -1,6 +1,7 @@
-var React = require("react");
+import React from "react";
+import ReactDOM from "react-dom";
 
-var VirtualScrollMixin = {
+export var VirtualScrollMixin = {
     getInitialState: function () {
         return {
             start: 0,
@@ -43,7 +44,7 @@ var VirtualScrollMixin = {
         window.removeEventListener('resize', this.onScroll);
     },
     onScroll: function () {
-        var viewport = this.getDOMNode();
+        var viewport = ReactDOM.findDOMNode(this);
         var top = viewport.scrollTop;
         var height = viewport.offsetHeight;
         var start = Math.floor(top / this.props.rowHeight);
@@ -69,7 +70,7 @@ var VirtualScrollMixin = {
         var row_top = (index * this.props.rowHeight) + head_height;
         var row_bottom = row_top + this.props.rowHeight;
 
-        var viewport = this.getDOMNode();
+        var viewport = ReactDOM.findDOMNode(this);
         var viewport_top = viewport.scrollTop;
         var viewport_bottom = viewport_top + viewport.offsetHeight;
 
@@ -81,5 +82,3 @@ var VirtualScrollMixin = {
         }
     },
 };
-
-module.exports  = VirtualScrollMixin;

web/src/js/filt/filt.peg

@@ -166,7 +166,6 @@ function url(regex){
 
 start "filter expression"
   = __ orExpr:OrExpr __ { return orExpr; }
-  / {return trueFilter; }
 
 ws "whitespace" = [ \t\n\r]
 cc "control character" = [|&!()~"]

web/src/templates/index.html

@@ -10,5 +10,6 @@
     <script src="/static/app.js"></script>
 </head>
 <body>
+<div id="mitmproxy"></div>
 </body>
 </html>