web: integrate filter docs

2 files changed, 75 insertions, 21 deletions

diff --git a/web/src/css/header.less b/web/src/css/header.less
index ce85d528..3bbd2833 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -1,21 +1,37 @@
+@import (reference) '../../bower_components/bootstrap/less/variables.less';
+@import (reference) '../../bower_components/bootstrap/less/mixins/grid.less';
+
 header {
-    background-color: white;
+  background-color: white;
+
+  .title-bar {
+    line-height: 25px;
+    text-align: center;
+  }
 
-    .title-bar {
-        line-height: 25px;
-        text-align: center;
-    }
+  @separator-color: lighten(grey, 15%);
 
-    @separator-color: lighten(grey, 15%);
+  .menu {
+    padding: 10px;
+    border-bottom: solid @separator-color 1px;
+  }
+}
+
+@menu-row-gutter-width: 5px;
+.menu-row {
+  .make-row(@menu-row-gutter-width);
+}
 
-    .menu {
-        padding: 10px;
-        border-bottom: solid @separator-color 1px;
-    }
+.filter-input {
+  .make-md-column(3, @menu-row-gutter-width);
 }
 
 .filter-input .popover {
-    top: 27px;
-    display: block;
-    width: 100%;
+  top: 27px;
+  display: block;
+  max-width: none;
+  .popover-content {
+    max-height: 500px;
+    overflow-y: auto;
+  }
 }
\ No newline at end of file
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index ba63f12e..6470aec5 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -1,3 +1,45 @@
+var FilterDocs = React.createClass({
+    statics: {
+        xhr: false,
+        doc: false
+    },
+    componentWillMount: function () {
+        if (!FilterDocs.doc) {
+            FilterDocs.xhr = $.getJSON("/filter-help").done(function (doc) {
+                FilterDocs.doc = doc;
+                FilterDocs.xhr = false;
+            });
+        }
+        if (FilterDocs.xhr) {
+            FilterDocs.xhr.done(function () {
+                this.forceUpdate();
+            }.bind(this));
+        }
+    },
+    render: function () {
+        if (!FilterDocs.doc) {
+            return <i className="fa fa-spinner fa-spin"></i>;
+        } else {
+            var commands = FilterDocs.doc.commands.map(function (c) {
+                return <tr>
+                    <td>{c[0].replace(" ", '\u00a0')}</td>
+                    <td>{c[1]}</td>
+                </tr>;
+            });
+            commands.push(<tr>
+                <td colSpan="2">
+                    <a href="https://mitmproxy.org/doc/features/filters.html"
+                        target="_blank">
+                        <i className="fa fa-external-link"></i>
+                    &nbsp; mitmproxy docs</a>
+                </td>
+            </tr>);
+            return <table className="table table-condensed">
+                <tbody>{commands}</tbody>
+            </table>;
+        }
+    }
+});
 var FilterInput = React.createClass({
     getInitialState: function () {
         // Consider both focus and mouseover for showing/hiding the tooltip,
@@ -41,10 +83,7 @@ var FilterInput = React.createClass({
             return desc;
         } else {
             return (
-                <a href="https://mitmproxy.org/doc/features/filters.html" target="_blank">
-                    <i className="fa fa-external-link"></i>
-                    Filter Documentation
-                </a>
+                <FilterDocs/>
             );
         }
     },
@@ -134,28 +173,27 @@ var MainMenu = React.createClass({
 
         return (
             <div>
-                <form className="form-inline" style={{display: "inline"}}>
+                <div className="menu-row">
                     <FilterInput
                         placeholder="Filter"
                         type="filter"
                         color="black"
                         value={filter}
                         onChange={this.onFilterChange} />
-                    <span> </span>
                     <FilterInput
                         placeholder="Highlight"
                         type="tag"
                         color="hsl(48, 100%, 50%)"
                         value={highlight}
                         onChange={this.onHighlightChange}/>
-                    <span> </span>
                     <FilterInput
                         placeholder="Intercept"
                         type="pause"
                         color="hsl(208, 56%, 53%)"
                         value={intercept}
                         onChange={this.onInterceptChange}/>
-                </form>
+                </div>
+                <div className="clearfix"></div>
             </div>
         );
     }