switch to esbuild for bundling

web/.babelrc

@@ -1,4 +0,0 @@
-{
-  "presets": ["es2015", "react"],
-  "plugins": ["transform-class-properties", "transform-object-rest-spread"]
-}

web/.eslintrc.yml

@@ -1,6 +0,0 @@
-{
-    "parser": "babel-eslint",
-    "parserOptions": {
-      "sourceType": "module",
-    }
-}

web/README.md

@@ -9,7 +9,7 @@ and activate your virtualenv environment before proceeding.**
 
 ## Testing
 
-- Run `yarn run test` to run the testsuite.
+- Run `yarn test` to run the test suite.
 
 ## Architecture
 

web/babel.config.js

@@ -0,0 +1,4 @@
+/* This currently is only used for jest. We use esbuild for actual bundling. */
+module.exports = {
+    presets: ['@babel/preset-react', '@babel/preset-env', '@babel/preset-typescript'],
+};

web/conf.js

@@ -1,30 +0,0 @@
-
-var conf = {
-    src: "src/",
-    dist: "../mitmproxy/tools/web",
-    static: "../mitmproxy/tools/web/static",
-    js: {
-        // Don't package these in the vendor distribution
-        vendor_excludes: [
-            "bootstrap" // We only use Bootstrap's CSS.
-        ],
-        // Package these as well as the dependencies
-        vendor_includes: [
-        ],
-        app: 'src/js/app',
-        eslint: ["src/js/**/*.js", "!src/js/filt/filt.js"]
-    },
-    css: {
-        vendor: ["src/css/vendor.less"],
-        app: ["src/css/app.less"]
-    },
-    copy: [
-        "src/images/**", "src/fonts/fontawesome-webfont.*"
-    ],
-    templates: [
-        "src/templates/*"
-    ],
-    peg: ["src/js/filt/filt.peg"]
-};
-
-module.exports = conf;

web/gulpfile.js

@@ -1,228 +1,118 @@
-var path = require('path');
+const gulp = require("gulp");
+const gulpEsbuild = require('gulp-esbuild');
+const less = require("gulp-less");
+const livereload = require("gulp-livereload");
+const cleanCSS = require('gulp-clean-css');
+const notify = require("gulp-notify");
+const compilePeg = require("gulp-peg");
+const plumber = require("gulp-plumber");
+const sourcemaps = require('gulp-sourcemaps');
+const through = require("through2");
 
-var packagejs = require('./package.json');
-var conf = require('./conf.js');
-
-// Sorted alphabetically!
-var babelify = require('babelify');
-var envify = require('envify/custom');
-var browserify = require('browserify');
-var gulp = require("gulp");
-var eslint = require('gulp-eslint');
-var less = require("gulp-less");
-var livereload = require("gulp-livereload");
-var cleanCSS = require('gulp-clean-css');
-var notify = require("gulp-notify");
-var peg = require("gulp-peg");
-var plumber = require("gulp-plumber");
-var rename = require("gulp-rename");
-var sourcemaps = require('gulp-sourcemaps');
-var gutil = require("gulp-util");
-var _ = require('lodash');
-var uglifyify = require('uglifyify');
-var buffer = require('vinyl-buffer');
-var source = require('vinyl-source-stream');
-var watchify = require('watchify');
-
-var vendor_packages = _.difference(
-    _.union(
-        _.keys(packagejs.dependencies),
-        conf.js.vendor_includes
-    ),
-    conf.js.vendor_excludes
-);
+const noop = () => through.obj();
 
 var handleError = {errorHandler: notify.onError("Error: <%= error.message %>")};
 
-/*
- * Sourcemaps are a wonderful way to develop directly from the chrome devtools.
- * However, generating correct sourcemaps is a huge PITA, especially on Windows.
- * Fixing this upstream is tedious as apparently nobody really cares and
- * a single misbehaving transform breaks everything.
- * Thus, we just manually fix all paths.
- */
-function fixSourceMaps(file) {
-    file.sourceMap.sources = file.sourceMap.sources.map(function (x) {
-        return path.relative(".", x).split(path.sep).join('/');
-    });
-    return "/";
-}
-// Browserify fails for paths starting with "..".
-function fixBrowserifySourceMaps(file) {
-    file.sourceMap.sources = file.sourceMap.sources.map((x) => {
-        return x.replace("src/js/node_modules", "node_modules");
-    });
-    return fixSourceMaps(file);
-}
-function fixLessSourceMaps(file) {
-    file.sourceMap.sources = file.sourceMap.sources.map((x) => {
-        if(!x.startsWith("..")){
-            return "../src/css/" + x;
-        }
-        return x.replace("src/js/node_modules", "node_modules");
-    });
-    return fixSourceMaps(file);
-}
-
-function styles(files, dev){
+function styles(files, dev) {
     return gulp.src(files)
-        .pipe(dev ? plumber(handleError) : gutil.noop())
+        .pipe(dev ? plumber(handleError) : noop())
         .pipe(sourcemaps.init())
         .pipe(less())
-        .pipe(dev ? gutil.noop() : cleanCSS())
-        .pipe(sourcemaps.write(".", {sourceRoot: fixLessSourceMaps}))
-        .pipe(gulp.dest(conf.static))
+        .pipe(dev ? noop() : cleanCSS())
+        .pipe(sourcemaps.write(".", {sourceRoot: '/src/css'}))
+        .pipe(gulp.dest("../mitmproxy/tools/web/static"))
         .pipe(livereload({auto: false}));
 }
-gulp.task("styles-app-dev", function () {
-    return styles(conf.css.app, true);
-});
-gulp.task("styles-vendor-dev", function () {
-    return styles(conf.css.vendor, true);
-});
-gulp.task("styles-app-prod", function () {
-    return styles(conf.css.app, false);
-});
-gulp.task("styles-vendor-prod", function () {
-    return styles(conf.css.vendor, false);
-});
 
-
-function buildScript(bundler, filename, dev) {
-    if (dev) {
-        bundler = watchify(bundler);
-    } else {
-        bundler = bundler.transform(envify({ _: 'purge', NODE_ENV: 'production' }), { global: true });
-        bundler = bundler.transform({global: true}, uglifyify);
-    }
-
-    function rebundle() {
-        return bundler.bundle()
-            .on('error', function(error) {
-                gutil.log(error + '\n' + error.codeFrame);
-                this.emit('end');
-            })
-            .pipe(dev ? plumber(handleError) : gutil.noop())
-            .pipe(source('bundle.js'))
-            .pipe(buffer())
-            .pipe(sourcemaps.init({loadMaps: true}))
-            .pipe(rename(filename))
-            .pipe(sourcemaps.write('.', {sourceRoot: fixBrowserifySourceMaps}))
-            .pipe(gulp.dest(conf.static))
-            .pipe(livereload({auto: false}));
-    }
-
-    // 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();
+function styles_vendor_prod() {
+    return styles("src/css/vendor.less", false)
 }
 
-function vendor_stream(dev) {
-    var bundler = browserify({
-        entries: [],
-        debug: true,
-        cache: {}, // required for watchify
-        packageCache: {} // required for watchify
-    });
-    for (var vp of vendor_packages) {
-        bundler.require(vp);
-    }
-    return buildScript(bundler, "vendor.js", dev);
+function styles_vendor_dev() {
+    return styles("src/css/vendor.less", true)
 }
-gulp.task("scripts-vendor-dev", function () {
-    return vendor_stream(true);
-});
-gulp.task("scripts-vendor-prod", function () {
-    return vendor_stream(false);
-});
 
-function app_stream(dev) {
-    var bundler = browserify({
-        entries: [conf.js.app],
-        debug: true,
-        extensions: ['.jsx'],
-        cache: {}, // required for watchify
-        packageCache: {} // required for watchify
-    });
-    for (var vp of vendor_packages) {
-        bundler.external(vp);
-    }
-    bundler = bundler.transform(babelify);
-    return buildScript(bundler, "app.js", dev);
+function styles_app_prod() {
+    return styles("src/css/app.less", false)
+}
+
+function styles_app_dev() {
+    return styles("src/css/app.less", true)
 }
-gulp.task('scripts-app-dev', function () {
-    return app_stream(true);
-});
-gulp.task('scripts-app-prod', function () {
-    return app_stream(false);
-});
 
 
-gulp.task("eslint", function () {
-    return gulp.src(conf.js.eslint)
+function esbuild(dev) {
+    return gulp.src('src/js/app.jsx').pipe(
+        gulpEsbuild({
+            outfile: 'app.js',
+            sourcemap: true,
+            sourceRoot: "/",
+            minify: !dev,
+            keepNames: true,
+            bundle: true,
+        }))
+        .pipe(gulp.dest("../mitmproxy/tools/web/static"))
+        .pipe(livereload({auto: false}));
+}
+
+function scripts_dev() {
+    return esbuild(true);
+}
+
+function scripts_prod() {
+    return esbuild(false);
+}
+
+const copy_src = ["src/images/**", "src/fonts/fontawesome-webfont.*"];
+
+function copy() {
+    return gulp.src(copy_src, {base: "src/"})
+        .pipe(gulp.dest("../mitmproxy/tools/web/static"));
+}
+
+const template_src = "src/templates/*";
+
+function templates() {
+    return gulp.src(template_src, {base: "src/"})
+        .pipe(gulp.dest("../mitmproxy/tools/web"));
+}
+
+const peg_src = "src/js/filt/filt.peg";
+
+function peg() {
+    return gulp.src(peg_src, {base: "src/"})
         .pipe(plumber(handleError))
-        .pipe(eslint())
-        .pipe(eslint.format())
-});
-
-gulp.task("copy", function () {
-    return gulp.src(conf.copy, {base: conf.src})
-        .pipe(gulp.dest(conf.static));
-});
-
-
-gulp.task('templates', function(){
-    return gulp.src(conf.templates, {base: conf.src})
-        .pipe(gulp.dest(conf.dist));
-});
-
-gulp.task("peg", function () {
-    return gulp.src(conf.peg, {base: conf.src})
-        .pipe(plumber(handleError))
-        .pipe(peg())
+        .pipe(compilePeg())
         .pipe(gulp.dest("src/"));
-});
+}
 
-gulp.task(
-    "dev",
-    gulp.series(
-        "copy",
-        "styles-vendor-dev",
-        "styles-app-dev",
-        "scripts-vendor-dev",
-        "peg",
-        "scripts-app-dev",
-        "templates"
-    )
-);
-gulp.task(
-    "prod",
-    gulp.series(
-        "copy",
-        "styles-vendor-prod",
-        "styles-app-prod",
-        "scripts-vendor-prod",
-        "peg",
-        "scripts-app-prod",
-        "templates"
-    )
+const dev = gulp.parallel(
+    copy,
+    styles_vendor_dev,
+    styles_app_dev,
+    peg,
+    scripts_dev,
+    templates
 );
 
-gulp.task("default", gulp.series(
-    "dev",
-    function watch() {
-        livereload.listen({auto: true});
-        gulp.watch(["src/css/vendor*"], gulp.series("styles-vendor-dev"));
-        gulp.watch(["src/css/**"], gulp.series("styles-app-dev"));
-
-        gulp.watch(conf.templates, gulp.series("templates"));
-        gulp.watch(conf.peg, gulp.series("peg"));
-        gulp.watch(["src/js/**"], gulp.series("eslint"));
-        // other JS is handled by watchify.
-        gulp.watch(conf.copy, gulp.series("copy"));
-    })
+const prod = gulp.parallel(
+    copy,
+    styles_vendor_prod,
+    styles_app_prod,
+    peg,
+    scripts_prod,
+    templates
 );
+
+exports.dev = dev;
+exports.prod = prod;
+exports.default = function watch() {
+    const opts = {ignoreInitial: false};
+    livereload.listen({auto: true});
+    gulp.watch(["src/css/vendor*"], opts, styles_vendor_dev);
+    gulp.watch(["src/css/**"], opts, styles_app_dev);
+    gulp.watch(["src/js/**"], opts, scripts_dev);
+    gulp.watch(template_src, opts, templates);
+    gulp.watch(peg_src, opts, peg);
+    gulp.watch(copy_src, opts, copy);
+}

web/jest.config.js

@@ -1,7 +1,8 @@
 process.env.TZ = 'UTC';
 
 module.exports = {
-    "testRegex": "__tests__/.*Spec.js$",
+    "testEnvironment": "jsdom",
+    "testRegex": "__tests__/.*Spec.(js|ts)x?$",
     "roots": [
         "<rootDir>/src/js"
     ],
@@ -13,6 +14,6 @@ module.exports = {
         "<rootDir>/src/js/filt/filt.js"
     ],
     "collectCoverageFrom": [
-        "src/js/**/*.{js,jsx}"
+        "src/js/**/*.{js,jsx,ts,tsx}"
     ]
 };

web/package.json

@@ -1,72 +1,47 @@
 {
-  "name": "mitmproxy",
-  "private": true,
-  "scripts": {
-    "test": "jest --coverage",
-    "build": "gulp prod",
-    "start": "gulp"
-  },
-  "jest": {
-    "testRegex": "__tests__/.*Spec.js$",
-    "roots": [
-      "<rootDir>/src/js"
-    ],
-    "unmockedModulePathPatterns": [
-      "react"
-    ],
-    "coverageDirectory": "./coverage",
-    "coveragePathIgnorePatterns": [
-      "<rootDir>/src/js/filt/filt.js"
-    ],
-    "collectCoverageFrom": [
-      "src/js/**/*.{js,jsx}"
-    ]
-  },
-  "dependencies": {
-    "bootstrap": "^3.3.7",
-    "classnames": "^2.3.1",
-    "lodash": "^4.17.21",
-    "mock-xmlhttprequest": "^1.1.0",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-codemirror": "^1.0.0",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.4",
-    "react-test-renderer": "^17.0.2",
-    "redux": "^4.1.0",
-    "redux-logger": "^3.0.6",
-    "redux-mock-store": "^1.5.4",
-    "redux-thunk": "^2.3.0",
-    "shallowequal": "^1.1.0",
-    "stable": "^0.1.8"
-  },
-  "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-eslint": "^8.0.1",
-    "babel-jest": "^21.2.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babelify": "^8.0.0",
-    "browserify": "^14.5.0",
-    "envify": "^4.1.0",
-    "eslint": "^4.9.0",
-    "gulp": "^4.0.2",
-    "gulp-clean-css": "^4.2.0",
-    "gulp-eslint": "^6.0.0",
-    "gulp-less": "^4.0.1",
-    "gulp-livereload": "^4.0.2",
-    "gulp-notify": "^3.2.0",
-    "gulp-peg": "^0.2.0",
-    "gulp-plumber": "^1.2.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-sourcemaps": "^2.6.5",
-    "gulp-util": "^3.0.8",
-    "jest": "^21.2.1",
-    "uglifyify": "^4.0.4",
-    "vinyl-buffer": "^1.0.1",
-    "vinyl-source-stream": "^2.0.0",
-    "watchify": "^3.11.1"
-  }
+    "name": "mitmproxy",
+    "private": true,
+    "scripts": {
+        "test": "jest --coverage",
+        "build": "gulp prod",
+        "start": "gulp"
+    },
+    "dependencies": {
+        "bootstrap": "^3.3.7",
+        "classnames": "^2.3.1",
+        "lodash": "^4.17.21",
+        "mock-xmlhttprequest": "^1.1.0",
+        "prop-types": "^15.7.2",
+        "react": "^17.0.2",
+        "react-codemirror": "^1.0.0",
+        "react-dom": "^17.0.2",
+        "react-redux": "^7.2.4",
+        "react-test-renderer": "^17.0.2",
+        "redux": "^4.1.0",
+        "redux-logger": "^3.0.6",
+        "redux-mock-store": "^1.5.4",
+        "redux-thunk": "^2.3.0",
+        "shallowequal": "^1.1.0",
+        "stable": "^0.1.8"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.14.3",
+        "@babel/preset-env": "^7.14.4",
+        "@babel/preset-react": "^7.13.13",
+        "@babel/preset-typescript": "^7.13.0",
+        "babel-jest": "^27.0.2",
+        "esbuild": "^0.12.8",
+        "esbuild-jest": "^0.5.0",
+        "gulp": "^4.0.2",
+        "gulp-clean-css": "^4.3.0",
+        "gulp-esbuild": "^0.8.1",
+        "gulp-less": "^4.0.1",
+        "gulp-livereload": "^4.0.2",
+        "gulp-notify": "^4.0.0",
+        "gulp-peg": "^0.2.0",
+        "gulp-plumber": "^1.2.1",
+        "gulp-sourcemaps": "^3.0.0",
+        "jest": "^27.0.4",
+        "through2": "^4.0.2"
+    }
 }

web/src/js/__tests__/components/ContentView/__snapshots__/MetaViewsSpec.js.snap

@@ -26,7 +26,7 @@ exports[`ContentTooLarge Components should render correctly 1`] = `
   >
     <button
       className="btn btn-xs btn-warning pull-right"
-      onClick={[Function]}
+      onClick={[MockFunction]}
     >
       Display anyway
     </button>

web/src/js/__tests__/components/ContentView/__snapshots__/ShowFullContentButtonSpec.js.snap

@@ -6,9 +6,7 @@ exports[`ShowFullContentButton Component should render correctly 1`] = `
 <div>
   <div
     className="view-all-content-btn btn-xs btn btn-default"
-    disabled={undefined}
     onClick={[Function]}
-    title={undefined}
   >
     Show full content
   </div>

web/src/js/__tests__/components/EventLogSpec.js

@@ -2,10 +2,9 @@ jest.mock('../../components/EventLog/EventList')
 
 import React from 'react'
 import renderer from 'react-test-renderer'
-import TestUtils from 'react-dom/test-utils'
-import EventLog, { PureEventLog } from '../../components/EventLog'
-import { Provider } from 'react-redux'
-import { TStore } from '../ducks/tutils'
+import EventLog, {PureEventLog} from '../../components/EventLog'
+import {Provider} from 'react-redux'
+import {TStore} from '../ducks/tutils'
 
 window.addEventListener = jest.fn()
 window.removeEventListener = jest.fn()
@@ -13,9 +12,9 @@ window.removeEventListener = jest.fn()
 describe('EventLog Component', () => {
     let store = TStore(),
         provider = renderer.create(
-        <Provider store={store}>
-            <EventLog/>
-        </Provider>),
+            <Provider store={store}>
+                <EventLog/>
+            </Provider>),
         tree = provider.toJSON()
 
     it('should connect to state and render correctly', () => {
@@ -30,7 +29,7 @@ describe('EventLog Component', () => {
     provider = renderer.create(
         <Provider store={store}><EventLog/></Provider>)
     let eventLog = provider.root.findByType(PureEventLog),
-        mockEvent = { preventDefault: jest.fn() }
+        mockEvent = {preventDefault: jest.fn()}
 
     it('should handle DragStart', () => {
         eventLog.instance.onDragStart(mockEvent)

web/src/js/__tests__/components/FlowView/__snapshots__/HeadersSpec.js.snap

@@ -3,7 +3,6 @@
 exports[`HeaderEditor Component should render correctly 1`] = `
 <div
   className="inline-input editable"
-  contentEditable={undefined}
   dangerouslySetInnerHTML={
     Object {
       "__html": "foo",
@@ -31,7 +30,6 @@ exports[`Headers Component should handle correctly 1`] = `
       >
         <div
           className="inline-input editable"
-          contentEditable={undefined}
           dangerouslySetInnerHTML={
             Object {
               "__html": "k1",
@@ -57,7 +55,6 @@ exports[`Headers Component should handle correctly 1`] = `
       >
         <div
           className="inline-input editable"
-          contentEditable={undefined}
           dangerouslySetInnerHTML={
             Object {
               "__html": "v1",
@@ -80,7 +77,6 @@ exports[`Headers Component should handle correctly 1`] = `
       >
         <div
           className="inline-input editable"
-          contentEditable={undefined}
           dangerouslySetInnerHTML={
             Object {
               "__html": "k2",
@@ -106,7 +102,6 @@ exports[`Headers Component should handle correctly 1`] = `
       >
         <div
           className="inline-input editable"
-          contentEditable={undefined}
           dangerouslySetInnerHTML={
             Object {
               "__html": "",

web/src/js/__tests__/components/FlowView/__snapshots__/MessagesSpec.js.snap

@@ -41,7 +41,6 @@ exports[`Request Component should render correctly 1`] = `
       <div>
         <div
           className="inline-input readonly"
-          contentEditable={undefined}
           dangerouslySetInnerHTML={
             Object {
               "__html": "GET",
@@ -54,12 +53,10 @@ exports[`Request Component should render correctly 1`] = `
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onPaste={[Function]}
-          tabIndex={undefined}
         />
          
         <div
           className="inline-input readonly has-success"
-          contentEditable={undefined}
           dangerouslySetInnerHTML={
             Object {
               "__html": "http://address:22/path",
@@ -72,12 +69,10 @@ exports[`Request Component should render correctly 1`] = `
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onPaste={[Function]}
-          tabIndex={undefined}
         />
          
         <div
           className="inline-input readonly has-success"
-          contentEditable={undefined}
           dangerouslySetInnerHTML={
             Object {
               "__html": "HTTP/1.1",
@@ -90,7 +85,6 @@ exports[`Request Component should render correctly 1`] = `
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onPaste={[Function]}
-          tabIndex={undefined}
         />
       </div>
     </div>
@@ -104,7 +98,6 @@ exports[`Request Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "header",
@@ -117,7 +110,6 @@ exports[`Request Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
             <span
               className="header-colon"
@@ -130,7 +122,6 @@ exports[`Request Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "qvalue",
@@ -143,7 +134,6 @@ exports[`Request Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
           </td>
         </tr>
@@ -153,7 +143,6 @@ exports[`Request Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "content-length",
@@ -166,7 +155,6 @@ exports[`Request Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
             <span
               className="header-colon"
@@ -179,7 +167,6 @@ exports[`Request Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "7",
@@ -192,7 +179,6 @@ exports[`Request Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
           </td>
         </tr>
@@ -210,7 +196,6 @@ exports[`Request Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "trailer",
@@ -223,7 +208,6 @@ exports[`Request Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
             <span
               className="header-colon"
@@ -236,7 +220,6 @@ exports[`Request Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "qvalue",
@@ -249,7 +232,6 @@ exports[`Request Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
           </td>
         </tr>
@@ -361,7 +343,6 @@ exports[`Response Component should render correctly 1`] = `
     >
       <div
         className="inline-input readonly has-success"
-        contentEditable={undefined}
         dangerouslySetInnerHTML={
           Object {
             "__html": "HTTP/1.1",
@@ -374,12 +355,10 @@ exports[`Response Component should render correctly 1`] = `
         onKeyDown={[Function]}
         onMouseDown={[Function]}
         onPaste={[Function]}
-        tabIndex={undefined}
       />
        
       <div
         className="inline-input readonly has-success"
-        contentEditable={undefined}
         dangerouslySetInnerHTML={
           Object {
             "__html": "200",
@@ -392,12 +371,10 @@ exports[`Response Component should render correctly 1`] = `
         onKeyDown={[Function]}
         onMouseDown={[Function]}
         onPaste={[Function]}
-        tabIndex={undefined}
       />
        
       <div
         className="inline-input readonly"
-        contentEditable={undefined}
         dangerouslySetInnerHTML={
           Object {
             "__html": "OK",
@@ -410,7 +387,6 @@ exports[`Response Component should render correctly 1`] = `
         onKeyDown={[Function]}
         onMouseDown={[Function]}
         onPaste={[Function]}
-        tabIndex={undefined}
       />
     </div>
     <table
@@ -423,7 +399,6 @@ exports[`Response Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "header-response",
@@ -436,7 +411,6 @@ exports[`Response Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
             <span
               className="header-colon"
@@ -449,7 +423,6 @@ exports[`Response Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "svalue",
@@ -462,7 +435,6 @@ exports[`Response Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
           </td>
         </tr>
@@ -472,7 +444,6 @@ exports[`Response Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "content-length",
@@ -485,7 +456,6 @@ exports[`Response Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
             <span
               className="header-colon"
@@ -498,7 +468,6 @@ exports[`Response Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "7",
@@ -511,7 +480,6 @@ exports[`Response Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
           </td>
         </tr>
@@ -529,7 +497,6 @@ exports[`Response Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "trailer",
@@ -542,7 +509,6 @@ exports[`Response Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
             <span
               className="header-colon"
@@ -555,7 +521,6 @@ exports[`Response Component should render correctly 1`] = `
           >
             <div
               className="inline-input readonly"
-              contentEditable={undefined}
               dangerouslySetInnerHTML={
                 Object {
                   "__html": "qvalue",
@@ -568,7 +533,6 @@ exports[`Response Component should render correctly 1`] = `
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onPaste={[Function]}
-              tabIndex={undefined}
             />
           </td>
         </tr>

web/src/js/__tests__/components/Header/__snapshots__/FileMenuSpec.js.snap

@@ -31,10 +31,8 @@ exports[`FileMenu Component should render correctly 1`] = `
     <li>
        
       <a
-        className={undefined}
         href="#"
         onClick={[Function]}
-        title={undefined}
       >
         <i
           className="fa fa-fw fa-folder-open"

web/src/js/__tests__/components/Header/__snapshots__/FilterInputSpec.js.snap

@@ -24,7 +24,6 @@ exports[`FilterInput Component should render correctly 1`] = `
     onKeyDown={[Function]}
     placeholder="bar"
     type="text"
-    value={undefined}
   />
 </div>
 `;

web/src/js/__tests__/components/Header/__snapshots__/FlowMenuSpec.js.snap

@@ -10,7 +10,6 @@ exports[`FlowMenu Component should connect to state 1`] = `
     >
       <div
         className="btn btn-default"
-        disabled={undefined}
         onClick={[Function]}
         title="[r]eplay flow"
       >
@@ -21,7 +20,6 @@ exports[`FlowMenu Component should connect to state 1`] = `
       </div>
       <div
         className="btn btn-default"
-        disabled={undefined}
         onClick={[Function]}
         title="[D]uplicate flow"
       >
@@ -33,7 +31,6 @@ exports[`FlowMenu Component should connect to state 1`] = `
       <div
         className="btn btn-default"
         disabled={true}
-        onClick={undefined}
         title="revert changes to flow [V]"
       >
         <i
@@ -43,7 +40,6 @@ exports[`FlowMenu Component should connect to state 1`] = `
       </div>
       <div
         className="btn btn-default"
-        disabled={undefined}
         onClick={[Function]}
         title="[d]elete flow"
       >
@@ -67,7 +63,6 @@ exports[`FlowMenu Component should connect to state 1`] = `
     >
       <div
         className="btn btn-default"
-        disabled={undefined}
         onClick={[Function]}
         title="download"
       >
@@ -92,7 +87,6 @@ exports[`FlowMenu Component should connect to state 1`] = `
       <div
         className="btn btn-default"
         disabled={true}
-        onClick={undefined}
         title="[a]ccept intercepted flow"
       >
         <i
@@ -103,7 +97,6 @@ exports[`FlowMenu Component should connect to state 1`] = `
       <div
         className="btn btn-default"
         disabled={true}
-        onClick={undefined}
         title="kill intercepted flow [x]"
       >
         <i
@@ -131,7 +124,6 @@ exports[`FlowMenu Component should render correctly with flow 1`] = `
     >
       <div
         className="btn btn-default"
-        disabled={undefined}
         onClick={[Function]}
         title="[r]eplay flow"
       >
@@ -142,7 +134,6 @@ exports[`FlowMenu Component should render correctly with flow 1`] = `
       </div>
       <div
         className="btn btn-default"
-        disabled={undefined}
         onClick={[Function]}
         title="[D]uplicate flow"
       >
@@ -164,7 +155,6 @@ exports[`FlowMenu Component should render correctly with flow 1`] = `
       </div>
       <div
         className="btn btn-default"
-        disabled={undefined}
         onClick={[Function]}
         title="[d]elete flow"
       >
@@ -188,7 +178,6 @@ exports[`FlowMenu Component should render correctly with flow 1`] = `
     >
       <div
         className="btn btn-default"
-        disabled={undefined}
         onClick={[Function]}
         title="download"
       >

web/src/js/__tests__/components/Header/__snapshots__/MenuToggleSpec.js.snap

@@ -22,7 +22,7 @@ exports[`MenuToggle Component should render correctly 1`] = `
   <label>
     <input
       checked={true}
-      onChange={[Function]}
+      onChange={[MockFunction]}
       type="checkbox"
     />
     <p>

web/src/js/__tests__/components/Header/__snapshots__/OptionMenuSpec.js.snap

@@ -10,7 +10,6 @@ exports[`OptionMenu Component should render correctly 1`] = `
     >
       <div
         className="btn btn-default"
-        disabled={undefined}
         onClick={[Function]}
         title="Open Options"
       >

web/src/js/__tests__/components/ValueEditor/__snapshots__/ValidateEditorSpec.js.snap

@@ -3,7 +3,6 @@
 exports[`ValidateEditor Component should render correctly 1`] = `
 <div
   className="inline-input editable has-success"
-  contentEditable={undefined}
   dangerouslySetInnerHTML={
     Object {
       "__html": "foo",

web/src/js/__tests__/components/ValueEditor/__snapshots__/ValueEditorSpec.js.snap

@@ -3,7 +3,6 @@
 exports[`ValueEditor Component should render correctly 1`] = `
 <div
   className="inline-input editable"
-  contentEditable={undefined}
   dangerouslySetInnerHTML={
     Object {
       "__html": "foo",

web/src/js/__tests__/components/common/__snapshots__/ButtonSpec.js.snap

@@ -4,8 +4,6 @@ exports[`Button Component should be able to be disabled 1`] = `
 <div
   className="classname btn btn-default"
   disabled="true"
-  onClick={undefined}
-  title={undefined}
 >
   <a>
     foo
@@ -16,7 +14,6 @@ exports[`Button Component should be able to be disabled 1`] = `
 exports[`Button Component should render correctly 1`] = `
 <div
   className="classname btn btn-default"
-  disabled={undefined}
   onClick={[Function]}
   title="title"
 >

web/src/js/__tests__/components/common/__snapshots__/ToggleButtonSpec.js.snap

@@ -3,7 +3,7 @@
 exports[`ToggleButton Component should render correctly 1`] = `
 <div
   className="btn btn-toggle btn-primary"
-  onClick={[Function]}
+  onClick={[MockFunction]}
 >
   <i
     className="fa fa-fw fa-check-square-o"

web/src/js/app.jsx

@@ -26,7 +26,7 @@ const store = createStore(
 )
 
 useUrlState(store)
-if (MITMWEB_STATIC) {
+if (window.MITMWEB_STATIC) {
     window.backend = new StaticBackend(store)
 } else {
     window.backend = new WebSocketBackend(store)

web/src/js/components/common/HideInStatic.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
 
 export default function HideInStatic({ children }) {
-    return global.MITMWEB_STATIC ? null : [children]
+    return window.MITMWEB_STATIC ? null : [children]
 }

web/src/templates/index.html

@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="/static/app.css"/>
     <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon"/>
     <script src="/static/static.js"></script>
-    <script src="/static/vendor.js"></script>
     <script src="/static/app.js"></script>
 </head>
 <body>