web: implement filters

web/gulpfile.js

@@ -7,6 +7,7 @@ var less = require("gulp-less");
 var livereload = require("gulp-livereload");
 var minifyCSS = require('gulp-minify-css');
 var notify = require("gulp-notify");
+var peg = require("gulp-peg");
 var plumber = require("gulp-plumber");
 var qunit = require("gulp-qunit");
 var react = require("gulp-react");
@@ -15,9 +16,9 @@ var sourcemaps = require('gulp-sourcemaps');
 var uglify = require('gulp-uglify');
 
 
-var dont_break_on_errors = function(){
-    return plumber(function(error){
-        notify.onError("Error: <%= error.message %>").apply(this, arguments);
+var dont_break_on_errors = function () {
+    return plumber(function (error) {
+        notify.onError("<%= error.message %>").apply(this, arguments);
         this.emit('end');
     });
 };
@@ -35,6 +36,7 @@ var path = {
             'js/utils.js',
             'js/dispatcher.js',
             'js/actions.js',
+            'js/filt/filt.js',
             'js/flow/utils.js',
             'js/store/store.js',
             'js/store/view.js',
@@ -53,13 +55,18 @@ var path = {
             'js/app.js',
         ],
     },
+    peg: "js/filt/filt.pegjs",
     css: {
         vendor: ["css/vendor.less"],
-        app: ["css/app.less"]
+        app: ["css/app.less"],
+        all: ["css/**"]
     },
+    vendor: ["vendor/**"],
     fonts: ["src/vendor/fontawesome/fontawesome-webfont.*"],
-    html: ["src/*.html", "!src/benchmark.html", "!src/test.html"],
-    images: "src/images",
+    html: ["*.html", "!benchmark.html", "!test.html"],
+    images: ["images/**"],
+    test: ["test.html"],
+    opts: {base: "src", cwd: "src"}
 };
 
 
@@ -70,13 +77,13 @@ gulp.task("fonts", function () {
 
 
 function styles_dev(files) {
-    return (gulp.src(files, {base: "src", cwd: "src"})
+    return (gulp.src(files, path.opts)
         .pipe(dont_break_on_errors())
         .pipe(sourcemaps.init())
         .pipe(less())
         .pipe(sourcemaps.write(".", {sourceRoot: "/static"}))
         .pipe(gulp.dest(path.dist + "static"))
-        .pipe(livereload({ auto: false })));
+        .pipe(livereload({auto: false})));
 }
 gulp.task("styles-app-dev", styles_dev.bind(undefined, path.css.app));
 gulp.task("styles-vendor-dev", styles_dev.bind(undefined, path.css.vendor));
@@ -84,13 +91,13 @@ gulp.task("styles-dev", ["styles-app-dev", "styles-vendor-dev"]);
 
 
 function styles_prod(files) {
-    return (gulp.src(files, {base: "src", cwd: "src"})
+    return (gulp.src(files, path.opts)
         .pipe(less())
         // No sourcemaps support yet :-/
         // https://github.com/jonathanepollack/gulp-minify-css/issues/34
         .pipe(minifyCSS())
         .pipe(gulp.dest(path.dist + "static"))
-        .pipe(livereload({ auto: false })));
+        .pipe(livereload({auto: false})));
 }
 gulp.task("styles-app-prod", styles_prod.bind(undefined, path.css.app));
 gulp.task("styles-vendor-prod", styles_prod.bind(undefined, path.css.vendor));
@@ -98,14 +105,14 @@ gulp.task("styles-prod", ["styles-app-prod", "styles-vendor-prod"]);
 
 
 function scripts_dev(files, filename) {
-    return gulp.src(files, {base: "src", cwd: "src"})
+    return gulp.src(files, path.opts)
         .pipe(dont_break_on_errors())
         .pipe(sourcemaps.init())
         .pipe(react())
         .pipe(concat(filename))
         .pipe(sourcemaps.write(".", {sourceRoot: "/static"}))
         .pipe(gulp.dest(path.dist + "static/js"))
-        .pipe(livereload({ auto: false }));
+        .pipe(livereload({auto: false}));
 }
 gulp.task("scripts-app-dev", scripts_dev.bind(undefined, path.js.app, "app.js"));
 gulp.task("scripts-vendor-dev", scripts_dev.bind(undefined, path.js.vendor, "vendor.js"));
@@ -113,12 +120,12 @@ gulp.task("scripts-dev", ["scripts-app-dev", "scripts-vendor-dev"]);
 
 
 function scripts_prod(files, filename) {
-    return gulp.src(files, {base: "src", cwd: "src"})
+    return gulp.src(files, path.opts)
         .pipe(react())
         .pipe(concat(filename))
         .pipe(uglify())
         .pipe(gulp.dest(path.dist + "static/js"))
-        .pipe(livereload({ auto: false }));
+        .pipe(livereload({auto: false}));
 }
 gulp.task("scripts-app-prod", scripts_prod.bind(undefined, path.js.app, "app.js"));
 gulp.task("scripts-vendor-prod", scripts_prod.bind(undefined, path.js.vendor, "vendor.js"));
@@ -126,41 +133,48 @@ gulp.task("scripts-prod", ["scripts-app-prod", "scripts-vendor-prod"]);
 
 
 gulp.task("jshint", function () {
-    return gulp.src(["src/js/**"])
+    return gulp.src(path.js.app.concat(["!"+path.peg.replace("pegjs","js")]), path.opts)
         .pipe(dont_break_on_errors())
         .pipe(react())
         .pipe(jshint())
         .pipe(jshint.reporter("jshint-stylish"));
 });
 
+gulp.task("peg", function () {
+    return gulp.src(path.peg, path.opts)
+        .pipe(dont_break_on_errors())
+        .pipe(peg({exportVar:"Filt"}))
+        .pipe(gulp.dest(".", path.opts));
+});
+
 gulp.task("images", function () {
     //(spriting code in commit 4ca720b55680e40b3a4361141a2ad39f9de81111)
-    return gulp.src(["src/images/**"])
-        .pipe(gulp.dest(path.dist + "static/images"));
+    return gulp.src(path.images, path.opts)
+        .pipe(gulp.dest(path.dist + "static"));
 });
 
 gulp.task("html", function () {
-    return gulp.src(path.html)
+    return gulp.src(path.html, path.opts)
         .pipe(gulp.dest(path.dist + "templates"))
-        .pipe(livereload({ auto: false }));
+        .pipe(livereload({auto: false}));
 });
 
 
-gulp.task('test', function() {
-    return gulp.src('src/test.html')
+gulp.task('test', function () {
+    return gulp.src(path.test, path.opts)
         .pipe(qunit({verbose: true}));
 });
 
 
-common = ["fonts", "html", "jshint", "images"];
+common = ["fonts", "html", "jshint", "peg", "images"];
 gulp.task("dev", common.concat(["styles-dev", "scripts-dev"]));
 gulp.task("prod", common.concat(["styles-prod", "scripts-prod"]));
 
 gulp.task("default", ["dev"], function () {
     livereload.listen({auto: true});
-    gulp.watch(["src/vendor/**"], ["scripts-vendor-dev", "styles-vendor-dev"]);
-    gulp.watch(["src/js/**"], ["scripts-app-dev", "jshint"]);
-    gulp.watch(["src/css/**"], ["styles-app-dev"]);
-    gulp.watch(["src/images/**", "src/css/sprites.less"], ["sprites"]);
-    gulp.watch(["src/*.html"], ["html"]);
+    gulp.watch(path.vendor, path.opts, ["scripts-vendor-dev", "styles-vendor-dev"]);
+    gulp.watch(path.js.app, path.opts, ["scripts-app-dev", "jshint"]);
+    gulp.watch(path.peg, path.opts, ["peg"]);
+    gulp.watch(path.css.all, path.opts, ["styles-app-dev"]);
+    gulp.watch(path.html, path.opts, ["html"]);
 });

web/package.json

@@ -12,6 +12,7 @@
     "gulp-livereload": "",
     "gulp-minify-css": "",
     "gulp-notify": "",
+    "gulp-peg": "",
     "gulp-plumber": "",
     "gulp-qunit": "",
     "gulp-react": "",

web/src/js/components/proxyapp.jsx.js

@@ -24,6 +24,7 @@ var ProxyAppMain = React.createClass({
     },
     componentDidMount: function () {
         this.state.settings.addListener("recalculate", this.onSettingsChange);
+        window.app = this;
     },
     componentWillUnmount: function () {
         this.state.settings.removeListener("recalculate", this.onSettingsChange);

web/src/js/filt/filt.pegjs

@@ -1,28 +1,131 @@
 // PEG.js filter rules - see http://pegjs.majda.cz/online
 
-/* Explain Filter */
 {
-  var or = function(first, second) {
-    return first + " or " + second;
-  };
-  var and = function(first, second) {
-    return first + " and " + second;
-  };
-  var not = function(expr) {
-    return "not " + expr;
-  };
-  var binding = function(expr) {
-    return "(" + expr + ")";
-  }
-  var assetFilter = "is asset";
-  var trueFilter = true;
-  var falseFilter = false;
-  var bodyFilter = function(s) {
-    return "body ~= '" + s + "'";
-  }
-  var urlFilter = function(s) {
-    return "url ~= '" + s + "'";
-  }
+function or(first, second) {
+    // Add explicit function names to ease debugging.
+    return function orFilter() {
+        first.apply(this, arguments) || second.apply(this, arguments);
+    };
+}
+function and(first, second) {
+    return function andFilter() {
+        return first.apply(this, arguments) && second.apply(this, arguments);
+    }
+}
+function not(expr) {
+    return function notFilter() {
+        return !expr.apply(this, arguments);
+    };
+}
+function binding(expr) {
+    return function bindingFilter() {
+        return expr.apply(this, arguments);
+    };
+}
+function trueFilter(flow) {
+    return true;
+}
+function falseFilter(flow) {
+    return false;
+}
+var ASSET_TYPES = [
+    new RegExp("text/javascript"),
+    new RegExp("application/x-javascript"),
+    new RegExp("application/javascript"),
+    new RegExp("text/css"),
+    new RegExp("image/.*"),
+    new RegExp("application/x-shockwave-flash")
+];
+function assetFilter(flow) {
+    if (flow.response) {
+        var ct = ResponseUtils.getContentType(flow.response);
+        var i = ASSET_TYPES.length;
+        while (i--) {
+            if (ASSET_TYPES[i].test(ct)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function responseCode(code){
+    code = parseInt(code);
+    return function responseCodeFilter(flow){
+        return flow.response && flow.response.code === code;
+    };
+}
+function domain(regex){
+    regex = new RegExp(regex, "i");
+    return function domainFilter(flow){
+        return flow.request && regex.test(flow.request.host);
+    };
+}
+function errorFilter(flow){
+    return !!flow.error;
+}
+function header(regex){
+    regex = new RegExp(regex, "i");
+    return function headerFilter(flow){
+        return (
+            (flow.request && RequestUtils.match_header(flow.request, regex))
+            ||
+            (flow.response && ResponseUtils.match_header(flow.response, regex))
+        );
+    };
+}
+function requestHeader(regex){
+    regex = new RegExp(regex, "i");
+    return function requestHeaderFilter(flow){
+        return (flow.request && RequestUtils.match_header(flow.request, regex));
+    }
+}
+function responseHeader(regex){
+    regex = new RegExp(regex, "i");
+    return function responseHeaderFilter(flow){
+        return (flow.response && ResponseUtils.match_header(flow.response, regex));
+    }
+}
+function method(regex){
+    regex = new RegExp(regex, "i");
+    return function methodFilter(flow){
+        return flow.request && regex.test(flow.request.method);
+    };
+}
+function noResponseFilter(flow){
+    return flow.request && !flow.response;
+}
+function responseFilter(flow){
+    return !!flow.response;
+}
+
+function contentType(regex){
+    regex = new RegExp(regex, "i");
+    return function contentTypeFilter(flow){
+        return (
+            (flow.request && regex.test(RequestUtils.getContentType(flow.request)))
+            ||
+            (flow.response && regex.test(ResponseUtils.getContentType(flow.response)))
+        );
+    };
+}
+function requestContentType(regex){
+    regex = new RegExp(regex, "i");
+    return function requestContentTypeFilter(flow){
+        return flow.request && regex.test(RequestUtils.getContentType(flow.request));
+    };
+}
+function responseContentType(regex){
+    regex = new RegExp(regex, "i");
+    return function responseContentTypeFilter(flow){
+        return flow.response && regex.test(ResponseUtils.getContentType(flow.response));
+    };
+}
+function url(regex){
+    regex = new RegExp(regex, "i");
+    return function urlFilter(flow){
+        return flow.request && regex.test(RequestUtils.pretty_url(flow.request));
+    }
+}
 }
 
 start "filter expression"
@@ -60,15 +163,28 @@ Expr
 
 NullaryExpr
   = BooleanLiteral
-  / "~a" { return assetFilter; };
+  / "~a" { return assetFilter; }
+  / "~e" { return errorFilter; }
+  / "~q" { return noResponseFilter; }
+  / "~s" { return responseFilter; }
+
 
 BooleanLiteral
   = "true" { return trueFilter; }
   / "false" { return falseFilter; }
 
 UnaryExpr
-  = "~b" ws+ s:StringLiteral { return bodyFilter(s); }
-  / s:StringLiteral { return urlFilter(s); }
+  = "~c"  ws+ s:StringLiteral { return responseCode(s); }
+  / "~d"  ws+ s:StringLiteral { return domain(s); }
+  / "~h"  ws+ s:StringLiteral { return header(s); }
+  / "~hq" ws+ s:StringLiteral { return requestHeader(s); }
+  / "~hs" ws+ s:StringLiteral { return responseHeader(s); }
+  / "~m"  ws+ s:StringLiteral { return method(s); }
+  / "~t"  ws+ s:StringLiteral { return contentType(s); }
+  / "~tq" ws+ s:StringLiteral { return requestContentType(s); }
+  / "~ts" ws+ s:StringLiteral { return responseContentType(s); }
+  / "~u"  ws+ s:StringLiteral { return url(s); }
+  / s:StringLiteral { return url(s); }
 
 StringLiteral "string"
   = '"' chars:DoubleStringChar* '"' { return chars.join(""); }

web/src/js/flow/utils.js

@@ -22,6 +22,16 @@ var _MessageUtils = {
             message._headerLookups[regex] = header ? header[1] : undefined;
         }
         return message._headerLookups[regex];
+    },
+    match_header: function(message, regex){
+        var headers = message.headers;
+        var i = headers.length;
+        while(i--){
+            if(regex.test(headers[i].join(" "))){
+                return headers[i];
+            }
+        }
+        return false;
     }
 };