web: add more keyboard shortcuts

4 files changed, 43 insertions, 21 deletions

diff --git a/web/src/js/components/header.js b/web/src/js/components/header.js
index b2934df6..0452af3f 100644
--- a/web/src/js/components/header.js
+++ b/web/src/js/components/header.js
@@ -50,6 +50,7 @@ var FilterDocs = React.createClass({
     }
 });
 var FilterInput = React.createClass({
+    mixins: [common.ChildFocus],
     getInitialState: function () {
         // Consider both focus and mouseover for showing/hiding the tooltip,
         // because onBlur of the input is triggered before the click on the tooltip
@@ -114,11 +115,13 @@ var FilterInput = React.createClass({
             // If closed using ESC/ENTER, hide the tooltip.
             this.setState({mousefocus: false});
         }
+        e.stopPropagation();
     },
     blur: function () {
         this.refs.input.getDOMNode().blur();
+        this.context.returnFocus && this.context.returnFocus();
     },
-    focus: function () {
+    select: function () {
         this.refs.input.getDOMNode().select();
     },
     render: function () {
@@ -184,18 +187,21 @@ var MainMenu = React.createClass({
             <div>
                 <div className="menu-row">
                     <FilterInput
+                        ref="filter"
                         placeholder="Filter"
                         type="filter"
                         color="black"
                         value={filter}
                         onChange={this.onFilterChange} />
                     <FilterInput
+                        ref="highlight"
                         placeholder="Highlight"
                         type="tag"
                         color="hsl(48, 100%, 50%)"
                         value={highlight}
                         onChange={this.onHighlightChange}/>
                     <FilterInput
+                        ref="intercept"
                         placeholder="Intercept"
                         type="pause"
                         color="hsl(208, 56%, 53%)"
@@ -357,7 +363,7 @@ var Header = React.createClass({
     render: function () {
         var header = header_entries.map(function (entry, i) {
             var className;
-            if(entry === this.state.active){
+            if (entry === this.state.active) {
                 className = "active";
             } else {
                 className = "";
@@ -379,7 +385,7 @@ var Header = React.createClass({
                     {header}
                 </nav>
                 <div className="menu">
-                    <this.state.active/>
+                    <this.state.active ref="active"/>
                 </div>
             </header>
         );
@@ -388,5 +394,6 @@ var Header = React.createClass({
 
 
 module.exports = {
-    Header: Header
+    Header: Header,
+    MainMenu: MainMenu
 };
\ No newline at end of file
diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index f102ed5e..8f6989ae 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -15,18 +15,13 @@ var MainView = React.createClass({
         flowStore: React.PropTypes.object.isRequired,
     },
     childContextTypes: {
-        returnFocus: React.PropTypes.func.isRequired,
         view: React.PropTypes.object.isRequired,
     },
     getChildContext: function () {
         return {
-            returnFocus: this.returnFocus,
             view: this.state.view
         };
     },
-    returnFocus: function () {
-        this.getDOMNode().focus();
-    },
     getInitialState: function () {
         var sortKeyFun = false;
         var view = new views.StoreView(this.context.flowStore, this.getViewFilt(), sortKeyFun);
diff --git a/web/src/js/components/proxyapp.js b/web/src/js/components/proxyapp.js
index 4013c3e4..ead6f7e8 100644
--- a/web/src/js/components/proxyapp.js
+++ b/web/src/js/components/proxyapp.js
@@ -25,16 +25,18 @@ var ProxyAppMain = React.createClass({
     childContextTypes: {
         settingsStore: React.PropTypes.object.isRequired,
         flowStore: React.PropTypes.object.isRequired,
-        eventStore: React.PropTypes.object.isRequired
+        eventStore: React.PropTypes.object.isRequired,
+        returnFocus: React.PropTypes.func.isRequired,
     },
     componentDidMount: function () {
-        React.findDOMNode(this).focus();
+        this.focus();
     },
     getChildContext: function () {
         return {
             settingsStore: this.state.settingsStore,
             flowStore: this.state.flowStore,
-            eventStore: this.state.eventStore
+            eventStore: this.state.eventStore,
+            returnFocus: this.focus,
         };
     },
     getInitialState: function () {
@@ -50,21 +52,39 @@ var ProxyAppMain = React.createClass({
             eventStore: eventStore
         };
     },
+    focus: function () {
+        React.findDOMNode(this).focus();
+    },
     getMainComponent: function () {
         return this.refs.view.refs.__routeHandler__;
     },
     onKeydown: function (e) {
-        switch(e.keyCode){
+
+        var selectFilterInput = function (name) {
+            var headerComponent = this.refs.header;
+            headerComponent.setState({active: header.MainMenu}, function () {
+                headerComponent.refs.active.refs[name].select();
+            });
+        }.bind(this);
+
+        switch (e.keyCode) {
             case Key.I:
-                console.error("unimplemented: intercept");
+                selectFilterInput("intercept");
+                break;
+            case Key.L:
+                selectFilterInput("filter");
+                break;
+            case Key.H:
+                selectFilterInput("highlight");
                 break;
             default:
                 var main = this.getMainComponent();
-                if(main && main.onMainKeyDown){
+                if (main.onMainKeyDown) {
                     main.onMainKeyDown(e);
                 }
+                return; // don't prevent default then
         }
-
+        e.preventDefault();
     },
     render: function () {
         var eventlog;
@@ -78,7 +98,7 @@ var ProxyAppMain = React.createClass({
         }
         return (
             <div id="container" tabIndex="0" onKeyDown={this.onKeydown}>
-                <header.Header/>
+                <header.Header ref="header"/>
                 <RouteHandler ref="view" query={this.getQuery()}/>
                 {eventlog}
                 <Footer/>
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index 7aaf213f..d848ff24 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -2,10 +2,10 @@ var $ = require("jquery");
 var _ = require("lodash");
 var actions = require("./actions.js");
 
-//debug
-window.$ = $;
-window._ = _;
-window.React = require("React/addons");
+//Debug (don't expose by default, this increases compile time drastically)
+//window.$ = $;
+//window._ = _;
+//window.React = require("React");
 
 var Key = {
     UP: 38,