update web builds, use watchify

libmproxy/models/connections.py

@@ -51,9 +51,9 @@ class ClientConnection(tcp.BaseHandler, stateobject.StateObject):
     def get_state(self, short=False):
         d = super(ClientConnection, self).get_state(short)
         d.update(
-            address={
+            address=({
                 "address": self.address(),
-                "use_ipv6": self.address.use_ipv6},
+                "use_ipv6": self.address.use_ipv6} if self.address else {}),
             clientcert=self.cert.to_pem() if self.clientcert else None)
         return d
 
@@ -136,7 +136,7 @@ class ServerConnection(tcp.TCPClient, stateobject.StateObject):
         d = super(ServerConnection, self).get_state(short)
         d.update(
             address=({"address": self.address(),
-                     "use_ipv6": self.address.use_ipv6} if self.address else {}), 
+                     "use_ipv6": self.address.use_ipv6} if self.address else {}),
             source_address=({"address": self.source_address(),
                              "use_ipv6": self.source_address.use_ipv6} if self.source_address else None),
             cert=self.cert.to_pem() if self.cert else None

libmproxy/web/app.py

@@ -29,7 +29,7 @@ class RequestHandler(tornado.web.RequestHandler):
     def json(self):
         if not self.request.headers.get("Content-Type").startswith("application/json"):
             return None
-        return json.loads(self.request.content)
+        return json.loads(self.request.body)
 
     @property
     def state(self):

libmproxy/web/static/app.css

@@ -137,8 +137,8 @@ header .menu {
   border-bottom: solid #a6a6a6 1px;
 }
 .menu-row {
-  margin-left: -2.5px;
-  margin-right: -2.5px;
+  margin-left: -2px;
+  margin-right: -3px;
 }
 .filter-input {
   position: relative;
@@ -418,4 +418,4 @@ footer {
   padding: 0px 10px 3px;
 }
 
-/*# sourceMappingURL=app.css.map */
+/*# sourceMappingURL=app.css.map */

web/.eslintrc

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

web/.jshintrc

@@ -1,5 +0,0 @@
-{
-    "loopfunc": true,
-    "esnext": true,
-    "validthis": true
-}

web/conf.js

@@ -13,21 +13,19 @@ var conf = {
             "react/addons"
         ],
         app: 'src/js/app.js',
-        jshint: ["src/js/**.js", "!src/js/filt/filt.js"]
+        eslint: ["src/js/**/*.js", "!src/js/filt/filt.js"]
     },
     css: {
         vendor: ["src/css/vendor.less"],
         app: ["src/css/app.less"]
     },
     copy: [
-        "src/images/**",
+        "src/images/**", "src/fonts/fontawesome-webfont.*"
     ],
     templates: [
         "src/templates/*"
     ],
-    fonts: ["src/fontawesome/fontawesome-webfont.*"],
-    peg: ["src/js/filt/filt.peg"],
-    connect: false
+    peg: ["src/js/filt/filt.peg"]
 };
 
 module.exports = conf;

web/gulpfile.js

@@ -4,11 +4,12 @@ var packagejs = require('./package.json');
 var conf = require('./conf.js');
 
 // Sorted alphabetically!
+var babelify = require('babelify');
 var browserify = require('browserify');
 var gulp = require("gulp");
 var concat = require('gulp-concat');
 var connect = require('gulp-connect');
-var jshint = require("gulp-jshint");
+var eslint = require('gulp-eslint');
 var less = require("gulp-less");
 var livereload = require("gulp-livereload");
 var minifyCSS = require('gulp-minify-css');
@@ -18,26 +19,16 @@ var plumber = require("gulp-plumber");
 var react = require("gulp-react");
 var rename = require("gulp-rename");
 var replace = require('gulp-replace');
-var rev = require("gulp-rev");
 var sourcemaps = require('gulp-sourcemaps');
-var uglify = require('gulp-uglify');
+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');
-
-// FIXME: react-with-addons.min.js for prod use issue
-// FIXME: Sourcemap URLs don't work correctly.
-// FIXME: Why don't we use gulp-rev's manifest feature?
-
-var manifest = {
-    "vendor.css": "vendor.css",
-    "app.css": "app.css",
-    "vendor.js": "vendor.js",
-    "app.js": "app.js",
-};
+var watchify = require('watchify');
 
 var vendor_packages = _.difference(
     _.union(
@@ -47,45 +38,7 @@ var vendor_packages = _.difference(
     conf.js.vendor_excludes
 );
 
-
-// Custom linting reporter used for error notify
-var jsHintErrorReporter = function(){
-    return map(function (file, cb) {
-        if (file.jshint && !file.jshint.success) {
-            file.jshint.results.forEach(function (err) {
-                if (err) {
-                    var msg = [
-                        path.basename(file.path),
-                        'Line: ' + err.error.line,
-                        'Reason: ' + err.error.reason
-                    ];
-                    notify.onError(
-                        "Error: <%= error.message %>"
-                    )(new Error(msg.join("\n")));
-                }
-            });
-        }
-        cb(null, file);
-    })
-};
-
-function save_rev(){
-    return map(function(file, callback){
-        if (file.revOrigBase){
-            manifest[path.basename(file.revOrigPath)] = path.basename(file.path);
-        }
-        callback(null, file);
-    })
-}
-
-var dont_break_on_errors = function(){
-    return plumber(
-        function(error){
-            notify.onError("Error: <%= error.message %>").apply(this, arguments);
-            this.emit('end');
-        }
-    );
-};
+var handleError = {errorHandler: notify.onError("Error: <%= error.message %>")};
 
 /*
  * Sourcemaps are a wonderful way to develop directly from the chrome devtools.
@@ -94,193 +47,178 @@ var dont_break_on_errors = function(){
  * a single misbehaving transform breaks everything.
  * Thus, we just manually fix all paths.
  */
-//Normalize \ to / on Windows.
-function unixStylePath(filePath) {
-  return filePath.split(path.sep).join('/');
-}
-// Hijack the sourceRoot attr to do our transforms
-function fixSourceMapPaths(file){
+function fixSourceMaps(file) {
     file.sourceMap.sources = file.sourceMap.sources.map(function (x) {
-        return unixStylePath(path.relative(".", x));
+        return path.relative(".", x).split(path.sep).join('/');
     });
     return "/";
 }
 // Browserify fails for paths starting with "..".
-function fixBrowserifySourceMapPaths(file){
-    file.sourceMap.sources = file.sourceMap.sources.map(function (x) {
-        return x.replace("src/js/node_modules","node_modules");
+function fixBrowserifySourceMaps(file) {
+    file.sourceMap.sources = file.sourceMap.sources.map((x) => {
+        return x.replace("src/js/node_modules", "node_modules");
     });
-    return fixSourceMapPaths(file);
+    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);
 }
 
-gulp.task("fonts", function () {
-    return gulp.src(conf.fonts)
-        .pipe(gulp.dest(conf.static + "/fonts"))
-});
-
-function styles_dev(files) {
-    return (gulp.src(files)
-        .pipe(dont_break_on_errors())
+function styles(files, dev){
+    return gulp.src(files)
+        .pipe(dev ? plumber(handleError) : gutil.noop())
         .pipe(sourcemaps.init())
         .pipe(less())
-        .pipe(sourcemaps.write(".", {sourceRoot: fixSourceMapPaths}))
+        .pipe(dev ? gutil.noop() : minifyCSS())
+        .pipe(sourcemaps.write(".", {sourceRoot: fixLessSourceMaps}))
         .pipe(gulp.dest(conf.static))
-        .pipe(livereload({ auto: false })));
+        .pipe(livereload({auto: false}));
 }
-gulp.task("styles-app-dev", function(){
-    styles_dev(conf.css.app);
+gulp.task("styles-app-dev", function () {
+    styles(conf.css.app, true);
 });
-gulp.task("styles-vendor-dev", function(){
-    styles_dev(conf.css.vendor);
+gulp.task("styles-vendor-dev", function () {
+    styles(conf.css.vendor, true);
+});
+gulp.task("styles-app-prod", function () {
+    styles(conf.css.app, false);
+});
+gulp.task("styles-vendor-prod", function () {
+    styles(conf.css.app, false);
 });
 
 
-function styles_prod(files) {
-    return (gulp.src(files)
-        .pipe(less())
-        .pipe(minifyCSS())
-        .pipe(rev())
-        .pipe(save_rev())
-        .pipe(gulp.dest(conf.static))
-        .pipe(livereload({ auto: false })));
+function buildScript(bundler, filename, dev) {
+    if (dev) {
+        bundler = watchify(bundler);
+    } else {
+        bundler = bundler.transform({global: true}, uglifyify);
+    }
+
+    function rebundle() {
+        return bundler.bundle()
+            .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);
+
+    // run it once the first time buildScript is called
+    return rebundle();
 }
-gulp.task("styles-app-prod", function(){
-    styles_prod(conf.css.app);
-});
-gulp.task("styles-vendor-prod", function(){
-    styles_prod(conf.css.vendor);
-});
 
-
-function vendor_stream(debug){
-    var vendor = browserify(vendor_packages, {debug: debug});
-    _.each(vendor_packages, function(v){
-        vendor.require(v);
+function vendor_stream(dev) {
+    var bundler = browserify({
+        entries: [],
+        debug: true,
+        cache: {}, // required for watchify
+        packageCache: {} // required for watchify
     });
-    return vendor.bundle()
-        .pipe(source("dummy.js"))
-        .pipe(rename("vendor.js"));
+    for (var vp of vendor_packages) {
+        bundler.require(vp);
+    }
+    return buildScript(bundler, "vendor.js", dev);
 }
-gulp.task("scripts-vendor-dev", function (){
-    return vendor_stream(false)
-        .pipe(gulp.dest(conf.static));
+gulp.task("scripts-vendor-dev", function () {
+    return vendor_stream(true);
 });
-gulp.task("scripts-vendor-prod", function(){
-    return vendor_stream(false)
-        .pipe(buffer())
-        .pipe(uglify())
-        .pipe(rev())
-        .pipe(save_rev())
-        .pipe(gulp.dest(conf.static));
+gulp.task("scripts-vendor-prod", function () {
+    return vendor_stream(false);
 });
 
-
-function app_stream(debug) {
-    var browserified = transform(function(filename) {
-        var b = browserify(filename, {debug: debug});
-        _.each(vendor_packages, function(v){
-            b.external(v);
-        });
-        b.transform(reactify);
-        return b.bundle();
+function app_stream(dev) {
+    var bundler = browserify({
+        entries: [conf.js.app],
+        debug: true,
+        cache: {}, // required for watchify
+        packageCache: {} // required for watchify
     });
-
-    return gulp.src([conf.js.app], {base: "."})
-        .pipe(dont_break_on_errors())
-        .pipe(browserified)
-        .pipe(sourcemaps.init({ loadMaps: true }))
-        .pipe(rename("app.js"));
+    for (var vp of vendor_packages) {
+        bundler.external(vp);
+    }
+    bundler = bundler.transform(babelify).transform(reactify);
+    return buildScript(bundler, "app.js", dev);
 }
-
 gulp.task('scripts-app-dev', function () {
-    return app_stream(true)
-        .pipe(sourcemaps.write('./', {sourceRoot: fixBrowserifySourceMapPaths}))
-        .pipe(gulp.dest(conf.static))
-        .pipe(livereload({ auto: false }));
+    return app_stream(true);
 });
-
 gulp.task('scripts-app-prod', function () {
-    return app_stream(true)
-        .pipe(buffer())
-        .pipe(uglify())
-        .pipe(rev())
-        .pipe(sourcemaps.write('./', {sourceRoot: fixBrowserifySourceMapPaths}))
-        .pipe(save_rev())
-        .pipe(gulp.dest(conf.static));
+    return app_stream(false);
 });
 
 
-gulp.task("jshint", function () {
-    return gulp.src(conf.js.jshint)
-        .pipe(dont_break_on_errors())
-        .pipe(react())
-        .pipe(jshint())
-        .pipe(jshint.reporter("jshint-stylish"))
-        .pipe(jsHintErrorReporter());
+gulp.task("eslint", function () {
+    return gulp.src(conf.js.eslint)
+        .pipe(plumber(handleError))
+        .pipe(eslint())
+        .pipe(eslint.format())
 });
 
-gulp.task("copy", function(){
+gulp.task("copy", function () {
     return gulp.src(conf.copy, {base: conf.src})
         .pipe(gulp.dest(conf.static));
 });
 
-function templates(){
+
+gulp.task('templates', function(){
     return gulp.src(conf.templates, {base: conf.src})
-        .pipe(replace(/\{\{\{(\S*)\}\}\}/g, function(match, p1) {
-            return manifest[p1];
-        }))
         .pipe(gulp.dest(conf.dist));
-}
-gulp.task('templates', templates);
+});
 
 gulp.task("peg", function () {
     return gulp.src(conf.peg, {base: conf.src})
-        .pipe(dont_break_on_errors())
+        .pipe(plumber(handleError))
         .pipe(peg())
         .pipe(gulp.dest("src/"));
 });
 
-gulp.task('connect', function() {
-    if(conf.connect){
-        connect.server({
-            port: conf.connect.port
-        });
-    }
-});
-
 gulp.task(
     "dev",
     [
-        "fonts",
         "copy",
         "styles-vendor-dev",
         "styles-app-dev",
         "scripts-vendor-dev",
         "peg",
         "scripts-app-dev",
-    ],
-    templates
+        "templates"
+    ]
 );
 gulp.task(
     "prod",
     [
-        "fonts",
         "copy",
         "styles-vendor-prod",
         "styles-app-prod",
         "scripts-vendor-prod",
         "peg",
         "scripts-app-prod",
-    ],
-    templates
+        "templates"
+    ]
 );
 
-gulp.task("default", ["dev", "connect"], function () {
+gulp.task("default", ["dev"], function () {
     livereload.listen({auto: true});
     gulp.watch(["src/css/vendor*"], ["styles-vendor-dev"]);
-    gulp.watch(conf.peg, ["peg", "scripts-app-dev"]);
-    gulp.watch(["src/js/**"], ["scripts-app-dev", "jshint"]);
     gulp.watch(["src/css/**"], ["styles-app-dev"]);
+
     gulp.watch(conf.templates, ["templates"]);
+    gulp.watch(conf.peg, ["peg"]);
+    gulp.watch(["src/js/**"], ["eslint"]);
+    // other JS is handled by watchify.
     gulp.watch(conf.copy, ["copy"]);
 });

web/package.json

@@ -16,37 +16,40 @@
   },
   "dependencies": {
     "bootstrap": "^3.3.4",
-    "flux": "",
-    "jquery": "",
-    "lodash": "",
-    "react": "^0.13.1",
+    "flux": "^2.1.1",
+    "jquery": "^2.1.4",
+    "lodash": "^3.10.1",
+    "react": "^0.13.3",
     "react-router": "^0.13.2"
   },
   "devDependencies": {
-    "browserify": "=8.0.1",
-    "gulp": "",
-    "gulp-concat": "",
-    "gulp-connect": "",
-    "gulp-jshint": "",
-    "gulp-less": "",
-    "gulp-livereload": "",
-    "gulp-minify-css": "",
-    "gulp-notify": "",
-    "gulp-peg": "",
-    "gulp-plumber": "",
-    "gulp-react": "",
-    "gulp-rename": "",
-    "gulp-replace": "",
-    "gulp-rev": "",
-    "gulp-sourcemaps": "",
-    "gulp-uglify": "",
-    "jest-cli": "^0.1.18",
-    "jshint-stylish": "",
-    "lodash": "",
-    "map-stream": "",
-    "reactify": "",
-    "vinyl-buffer": "",
-    "vinyl-source-stream": "",
-    "vinyl-transform": ""
+    "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",
+    "gulp-livereload": "^3.8.1",
+    "gulp-minify-css": "^1.2.1",
+    "gulp-notify": "^2.2.0",
+    "gulp-peg": "^0.1.2",
+    "gulp-plumber": "^1.0.1",
+    "gulp-react": "^3.0.1",
+    "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",
+    "uglifyify": "^3.0.1",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "vinyl-transform": "^1.0.0",
+    "watchify": "^3.4.0"
   }
 }

web/src/css/vendor.less

@@ -1,3 +1,3 @@
 // Bootstrap
 @import 'vendor-bootstrap.less';
-@import (less) '../fontawesome/font-awesome.css';
+@import (less) '../fonts/font-awesome.css';

web/src/js/components/eventlog.js

@@ -108,6 +108,7 @@ var ToggleFilter = React.createClass({
 });
 
 var EventLog = React.createClass({
+    mixins: [common.Navigation],
     getInitialState: function () {
         return {
             filter: {

web/src/js/filt/filt.js

@@ -1771,4 +1771,4 @@ module.exports = (function() {
     SyntaxError: SyntaxError,
     parse:       parse
   };
-})();
+})();