Merge remote-tracking branch 'jason/ui'

15 files changed, 551 insertions, 411 deletions

diff --git a/web/src/js/__tests__/ducks/ui.js b/web/src/js/__tests__/ducks/ui.js
index 2388a9ad..289192d9 100644
--- a/web/src/js/__tests__/ducks/ui.js
+++ b/web/src/js/__tests__/ducks/ui.js
@@ -1,36 +1,86 @@
-jest.unmock("../../ducks/ui");
-// @todo fix it ( this is why I don't like to add tests until our architecture is stable :P )
-jest.unmock("../../ducks/views/main");
-
-import reducer, { setActiveMenu } from '../../ducks/ui';
-import { SELECT } from '../../ducks/views/main';
-
-describe("ui reducer", () => {
-    it("should return the initial state", () => {
-        expect(reducer(undefined, {})).toEqual({ activeMenu: 'Start'})
-    }),
-    it("should return the state for view", () => {
-        expect(reducer(undefined, setActiveMenu('View'))).toEqual({ activeMenu: 'View'})
-    }),
-    it("should change the state to Start when deselecting a flow and we a currently at the flow tab", () => {
-        expect(reducer({activeMenu: 'Flow'},
-            { type: SELECT,
-              currentSelection: '1',
-              flowId : undefined
-            })).toEqual({ activeMenu: 'Start'})
-    }),
-    it("should change the state to Flow when we selected a flow and no flow was selected before", () => {
-        expect(reducer({activeMenu: 'Start'},
-            { type: SELECT,
-              currentSelection: undefined,
-              flowId : '1'
-            })).toEqual({ activeMenu: 'Flow'})
-    }),
-    it("should not change the state to Flow when OPTIONS tab is selected and we selected a flow and a flow as selected before", () => {
-        expect(reducer({activeMenu: 'Options'},
-            { type: SELECT,
-              currentSelection: '1',
-              flowId : '2'
-            })).toEqual({ activeMenu: 'Options'})
+jest.unmock('lodash')
+jest.unmock('redux')
+jest.unmock('redux-thunk')
+jest.unmock('../../ducks/ui')
+jest.unmock('../../ducks/views/main')
+
+import _ from 'lodash'
+import thunk from 'redux-thunk'
+import { applyMiddleware, createStore, combineReducers } from 'redux'
+import reducer, { setActiveMenu, selectTabRelative } from '../../ducks/ui'
+import { SELECT } from '../../ducks/views/main'
+
+describe('ui reducer', () => {
+    it('should return the initial state', () => {
+        expect(reducer(undefined, {}).activeMenu).toEqual('Start')
     })
-});
+
+    it('should return the state for view', () => {
+        expect(reducer(undefined, setActiveMenu('View')).activeMenu).toEqual('View')
+    })
+
+    it('should change the state to Start when deselecting a flow and we a currently at the flow tab', () => {
+        expect(reducer({ activeMenu: 'Flow' }, {
+            type: SELECT,
+            currentSelection: 1,
+            flowId : undefined,
+        }).activeMenu).toEqual('Start')
+    })
+
+    it('should change the state to Flow when we selected a flow and no flow was selected before', () => {
+        expect(reducer({ activeMenu: 'Start' }, {
+            type: SELECT,
+            currentSelection: undefined,
+            flowId : 1,
+        }).activeMenu).toEqual('Flow')
+    })
+
+    it('should not change the state to Flow when OPTIONS tab is selected and we selected a flow and a flow as selected before', () => {
+        expect(reducer({activeMenu: 'Options'}, {
+            type: SELECT,
+            currentSelection: 1,
+            flowId : '2',
+        }).activeMenu).toEqual('Options')
+    })
+
+    describe('select tab relative', () => {
+
+        it('should select tab according to flow properties', () => {
+            const store = createTestStore(makeState([{ id: 1 }], 1))
+            store.dispatch(selectTabRelative(1))
+            expect(store.getState().ui.panel).toEqual('details')
+        })
+
+        it('should select last tab when first tab is selected', () => {
+            const store = createTestStore(makeState([{ id: 1, request: true, response: true, error: true }], 1))
+            store.dispatch(selectTabRelative(-1))
+            expect(store.getState().ui.panel).toEqual('details')
+        })
+
+    })
+})
+
+function createTestStore(state) {
+    return createStore(
+        combineReducers({ ui: reducer, flows: (state = {}) => state }),
+        state,
+        applyMiddleware(thunk)
+    )
+}
+
+function makeState(flows, selected) {
+    return {
+        flows: {
+            list: {
+                data: flows,
+                byId: _.fromPairs(flows.map(flow => [flow.id, flow])),
+                indexOf: _.fromPairs(flows.map((flow, index) => [flow.id, index])),
+            },
+            views: {
+                main: {
+                    selected: [selected],
+                },
+            },
+        },
+    }
+}
diff --git a/web/src/js/__tests__/ducks/views/main.js b/web/src/js/__tests__/ducks/views/main.js
new file mode 100644
index 00000000..0edbf68f
--- /dev/null
+++ b/web/src/js/__tests__/ducks/views/main.js
@@ -0,0 +1,82 @@
+jest.unmock('../../../ducks/views/main');
+jest.unmock('../../../ducks/utils/view');
+jest.unmock('redux-thunk')
+jest.unmock('redux')
+
+import reduce, { selectRelative } from '../../../ducks/views/main';
+import thunk from 'redux-thunk'
+import { applyMiddleware, createStore, combineReducers } from 'redux'
+
+describe('main reduce', () => {
+
+    describe('select previous', () => {
+
+        it('should not changed when first flow is selected', () => {
+            const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
+            const store = createTestStore(makeState(flows, 1))
+            store.dispatch(selectRelative(-1))
+            expect(store.getState().flows.views.main.selected).toEqual([1])
+        })
+
+        it('should select last flow if no flow is selected', () => {
+            const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
+            const store = createTestStore(makeState(flows))
+            store.dispatch(selectRelative(-1))
+            expect(store.getState().flows.views.main.selected).toEqual([4])
+        })
+
+    })
+
+    describe('select next', () => {
+
+        it('should not change when last flow is selected', () => {
+            const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
+            const store = createTestStore(makeState(flows, 4))
+            store.dispatch(selectRelative(1))
+            expect(store.getState().flows.views.main.selected).toEqual([4])
+        })
+
+        it('should select first flow if no flow is selected', () => {
+            const flows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]
+            const store = createTestStore(makeState(flows, 1))
+            store.dispatch(selectRelative(1))
+            expect(store.getState().flows.views.main.selected).toEqual([2])
+        })
+
+    })
+})
+
+function createTestStore(defaultState) {
+    return createStore(
+        (state = defaultState, action) => ({
+            flows: {
+                ...state.flows,
+                views: {
+                    main: reduce(state.flows.views.main, action)
+                }
+            }
+        }),
+        defaultState,
+        applyMiddleware(thunk)
+    )
+}
+
+function makeState(flows, selected) {
+    const list = {
+        data: flows,
+        byId: _.fromPairs(flows.map(flow => [flow.id, flow])),
+        indexOf: _.fromPairs(flows.map((flow, index) => [flow.id, index])),
+    }
+
+    return {
+        flows: {
+            list,
+            views: {
+                main: {
+                    selected: [selected],
+                    view: list,
+                }
+            }
+        }
+    }
+}
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 1533684e..6a982a5d 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -1,78 +1,66 @@
 import React, { Component, PropTypes } from 'react'
+import { connect } from 'react-redux'
 import { MessageUtils } from '../flow/utils.js'
-import { ViewAuto, ViewImage } from './ContentView/ContentViews'
+import * as ContentViews from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
 import ContentLoader from './ContentView/ContentLoader'
 import ViewSelector from './ContentView/ViewSelector'
+import { setContentView, setDisplayLarge } from '../ducks/ui'
 
-export default class ContentView extends Component {
-
-    static propTypes = {
-        // It may seem a bit weird at the first glance:
-        // Every view takes the flow and the message as props, e.g.
-        // <Auto flow={flow} message={flow.request}/>
-        flow: React.PropTypes.object.isRequired,
-        message: React.PropTypes.object.isRequired,
-    }
-
-    constructor(props, context) {
-        super(props, context)
+ContentView.propTypes = {
+    // It may seem a bit weird at the first glance:
+    // Every view takes the flow and the message as props, e.g.
+    // <Auto flow={flow} message={flow.request}/>
+    flow: React.PropTypes.object.isRequired,
+    message: React.PropTypes.object.isRequired,
+}
 
-        this.state = { displayLarge: false, View: ViewAuto }
-        this.selectView = this.selectView.bind(this)
-    }
+ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
-    selectView(View) {
-        this.setState({ View })
-    }
+function ContentView(props) {
+    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props
 
-    displayLarge() {
-        this.setState({ displayLarge: true })
+    if (message.contentLength === 0) {
+        return <MetaViews.ContentEmpty {...props}/>
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.message !== this.props.message) {
-            this.setState({ displayLarge: false, View: ViewAuto })
-        }
+    if (message.contentLength === null) {
+        return <MetaViews.ContentMissing {...props}/>
     }
 
-    isContentTooLarge(msg) {
-        return msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2)
+    if (!displayLarge && ContentView.isContentTooLarge(message)) {
+        return <MetaViews.ContentTooLarge {...props} onClick={() => setDisplayLarge(true)}/>
     }
 
-    render() {
-        const { flow, message } = this.props
-        const { displayLarge, View } = this.state
+    const View = ContentViews[contentView]
 
-        if (message.contentLength === 0) {
-            return <MetaViews.ContentEmpty {...this.props}/>
-        }
-
-        if (message.contentLength === null) {
-            return <MetaViews.ContentMissing {...this.props}/>
-        }
-
-        if (!displayLarge && this.isContentTooLarge(message)) {
-            return <MetaViews.ContentTooLarge {...this.props} onClick={this.displayLarge}/>
-        }
-
-        return (
-            <div>
-                {View.textView ? (
-                    <ContentLoader flow={flow} message={message}>
-                        <this.state.View content="" />
-                    </ContentLoader>
-                ) : (
-                    <View flow={flow} message={message} />
-                )}
-                <div className="view-options text-center">
-                    <ViewSelector onSelectView={this.selectView} active={View} message={message}/>
-                    &nbsp;
-                    <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
-                        <i className="fa fa-download"/>
-                    </a>
-                </div>
+    return (
+        <div>
+            {View.textView ? (
+                <ContentLoader flow={flow} message={message}>
+                    <View content="" />
+                </ContentLoader>
+            ) : (
+                <View flow={flow} message={message} />
+            )}
+            <div className="view-options text-center">
+                <ViewSelector onSelectView={selectView} active={View} message={message}/>
+                &nbsp;
+                <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
+                    <i className="fa fa-download"/>
+                </a>
             </div>
-        )
-    }
+        </div>
+    )
 }
+
+export default connect(
+    state => ({
+        contentView: state.ui.contentView,
+        displayLarge: state.ui.displayLarge,
+    }),
+    {
+        selectView: setContentView,
+        setDisplayLarge,
+    }
+)(ContentView)
diff --git a/web/src/js/components/ContentView/MetaViews.jsx b/web/src/js/components/ContentView/MetaViews.jsx
index 83720a13..2d064b54 100644
--- a/web/src/js/components/ContentView/MetaViews.jsx
+++ b/web/src/js/components/ContentView/MetaViews.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {formatSize} from '../../utils.js'
+import { formatSize } from '../../utils.js'
 
 export function ContentEmpty({ flow, message }) {
     return (
diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx
index df3a5b83..9b151a5b 100644
--- a/web/src/js/components/ContentView/ViewSelector.jsx
+++ b/web/src/js/components/ContentView/ViewSelector.jsx
@@ -14,7 +14,7 @@ export default function ViewSelector({ active, message, onSelectView }) {
             {views.map(View => (
                 <button
                     key={View.name}
-                    onClick={() => onSelectView(View)}
+                    onClick={() => onSelectView(View.name)}
                     className={classnames('btn btn-default', { active: View === active })}>
                     {View === ViewAuto ? (
                         `auto: ${ViewAuto.findView(message).name.toLowerCase().replace('view', '')}`
diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx
index 0ef6e5cd..5ba472a5 100644
--- a/web/src/js/components/FlowView.jsx
+++ b/web/src/js/components/FlowView.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import _ from 'lodash'
 
 import Nav from './FlowView/Nav'
@@ -6,47 +7,29 @@ import { Request, Response, ErrorView as Error } from './FlowView/Messages'
 import Details from './FlowView/Details'
 import Prompt from './Prompt'
 
+import { setPrompt, selectTab } from '../ducks/ui'
+
 export default class FlowView extends Component {
 
     static allTabs = { Request, Response, Error, Details }
 
     constructor(props, context) {
         super(props, context)
-
-        this.state = { prompt: false }
-
-        this.closePrompt = this.closePrompt.bind(this)
-        this.selectTab = this.selectTab.bind(this)
-    }
-
-    getTabs() {
-        return ['request', 'response', 'error'].filter(k => this.props.flow[k]).concat(['details'])
-    }
-
-    nextTab(increment) {
-        const tabs = this.getTabs()
-        // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
-        this.selectTab(tabs[(tabs.indexOf(this.props.tab) + increment + tabs.length) % tabs.length])
+        this.onPromptFinish = this.onPromptFinish.bind(this)
     }
 
-    selectTab(panel) {
-        this.props.updateLocation(`/flows/${this.props.flow.id}/${panel}`)
-    }
-
-    closePrompt(edit) {
-        this.setState({ prompt: false })
+    onPromptFinish(edit) {
+        this.props.setPrompt(false)
         if (edit && this.tabComponent) {
             this.tabComponent.edit(edit)
         }
     }
 
-    promptEdit() {
-        let options
-
+    getPromptOptions() {
         switch (this.props.tab) {
 
             case 'request':
-                options = [
+                return [
                     'method',
                     'url',
                     { text: 'http version', key: 'v' },
@@ -55,7 +38,7 @@ export default class FlowView extends Component {
                 break
 
             case 'response':
-                options = [
+                return [
                     { text: 'http version', key: 'v' },
                     'code',
                     'message',
@@ -69,13 +52,11 @@ export default class FlowView extends Component {
             default:
                 throw 'Unknown tab for edit: ' + this.props.tab
         }
-
-        this.setState({ prompt: { options, done: this.closePrompt } })
     }
 
     render() {
-        const tabs = this.getTabs()
         let { flow, tab: active, updateFlow } = this.props
+        const tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details'])
 
         if (tabs.indexOf(active) < 0) {
             if (active === 'response' && flow.error) {
@@ -95,13 +76,23 @@ export default class FlowView extends Component {
                     flow={flow}
                     tabs={tabs}
                     active={active}
-                    onSelectTab={this.selectTab}
+                    onSelectTab={this.props.selectTab}
                 />
                 <Tab ref={ tab => this.tabComponent = tab } flow={flow} updateFlow={updateFlow} />
-                {this.state.prompt && (
-                    <Prompt {...this.state.prompt}/>
+                {this.props.promptOpen && (
+                    <Prompt options={this.getPromptOptions()} done={this.onPromptFinish} />
                 )}
             </div>
         )
     }
 }
+
+export default connect(
+    state => ({
+        promptOpen: state.ui.promptOpen,
+    }),
+    {
+        setPrompt,
+        selectTab,
+    }
+)(FlowView)
diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx
index b6ef1cc7..7f1fa69f 100644
--- a/web/src/js/components/Header.jsx
+++ b/web/src/js/components/Header.jsx
@@ -17,7 +17,7 @@ class Header extends Component {
     }
 
     render() {
-        const { updateLocation, query, selectedFlow, activeMenu} = this.props
+        const { query, selectedFlow, activeMenu} = this.props
 
         let entries = [...Header.entries]
         if(selectedFlow)
@@ -41,7 +41,6 @@ class Header extends Component {
                 <div className="menu">
                     <Active
                         ref="active"
-                        updateLocation={updateLocation}
                         query={query}
                     />
                 </div>
diff --git a/web/src/js/components/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx
index 5b49b788..e421f1a4 100644
--- a/web/src/js/components/Header/FilterInput.jsx
+++ b/web/src/js/components/Header/FilterInput.jsx
@@ -7,10 +7,6 @@ import FilterDocs from './FilterDocs'
 
 export default class FilterInput extends Component {
 
-    static contextTypes = {
-        returnFocus: React.PropTypes.func,
-    }
-
     constructor(props, context) {
         super(props, context)
 
@@ -91,7 +87,6 @@ export default class FilterInput extends Component {
 
     blur() {
         ReactDOM.findDOMNode(this.refs.input).blur()
-        this.context.returnFocus()
     }
 
     select() {
diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx
index 48fea5a2..27a4be60 100644
--- a/web/src/js/components/Header/MainMenu.jsx
+++ b/web/src/js/components/Header/MainMenu.jsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import FilterInput from './FilterInput'
 import { Query } from '../../actions.js'
 import { update as updateSettings } from '../../ducks/settings'
+import { updateQuery, setSelectedInput } from '../../ducks/ui'
 
 class MainMenu extends Component {
 
@@ -12,8 +13,8 @@ class MainMenu extends Component {
     static propTypes = {
         query: PropTypes.object.isRequired,
         settings: PropTypes.object.isRequired,
-        updateLocation: PropTypes.func.isRequired,
         updateSettings: PropTypes.func.isRequired,
+        updateQuery: PropTypes.func.isRequired,
     }
 
     constructor(props, context) {
@@ -22,12 +23,19 @@ class MainMenu extends Component {
         this.onHighlightChange = this.onHighlightChange.bind(this)
     }
 
+    componentWillReceiveProps(nextProps) {
+        if(this.refs[nextProps.selectedInput]) {
+            this.refs[nextProps.selectedInput].select()
+        }
+        this.props.setSelectedInput(undefined)
+    }
+
     onSearchChange(val) {
-        this.props.updateLocation(undefined, { [Query.SEARCH]: val })
+        this.props.updateQuery({ [Query.SEARCH]: val })
     }
 
     onHighlightChange(val) {
-        this.props.updateLocation(undefined, { [Query.HIGHLIGHT]: val })
+        this.props.updateQuery({ [Query.HIGHLIGHT]: val })
     }
 
     render() {
@@ -70,9 +78,12 @@ class MainMenu extends Component {
 export default connect(
     state => ({
         settings: state.settings.settings,
+        selectedInput: state.ui.selectedInput
     }),
     {
         updateSettings,
+        updateQuery,
+        setSelectedInput
     },
     null,
     {
diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx
index 93f7b299..756fa22e 100644
--- a/web/src/js/components/MainView.jsx
+++ b/web/src/js/components/MainView.jsx
@@ -20,10 +20,6 @@ class MainView extends Component {
      * @todo replace with mapStateToProps
      */
     componentWillReceiveProps(nextProps) {
-        // Update redux store with route changes
-        if (nextProps.routeParams.flowId !== (nextProps.selectedFlow || {}).id) {
-            this.props.selectFlow(nextProps.routeParams.flowId)
-        }
         if (nextProps.location.query[Query.SEARCH] !== nextProps.filter) {
             this.props.updateFilter(nextProps.location.query[Query.SEARCH], false)
         }
@@ -32,127 +28,6 @@ class MainView extends Component {
         }
     }
 
-    /**
-     * @todo move to actions
-     */
-    selectFlow(flow) {
-        if (flow) {
-            this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || 'request'}`)
-        } else {
-            this.props.updateLocation('/flows')
-        }
-    }
-
-    /**
-     * @todo move to actions
-     */
-    selectFlowRelative(shift) {
-        const { flows, routeParams, selectedFlow } = this.props
-        let index = 0
-        if (!routeParams.flowId) {
-            if (shift < 0) {
-                index = flows.length - 1
-            }
-        } else {
-            index = Math.min(
-                Math.max(0, flows.indexOf(selectedFlow) + shift),
-                flows.length - 1
-            )
-        }
-        this.selectFlow(flows[index])
-    }
-
-    /**
-     * @todo move to actions
-     */
-    onMainKeyDown(e) {
-        var flow = this.props.selectedFlow
-        if (e.ctrlKey) {
-            return
-        }
-        switch (e.keyCode) {
-            case Key.K:
-            case Key.UP:
-                this.selectFlowRelative(-1)
-                break
-            case Key.J:
-            case Key.DOWN:
-                this.selectFlowRelative(+1)
-                break
-            case Key.SPACE:
-            case Key.PAGE_DOWN:
-                this.selectFlowRelative(+10)
-                break
-            case Key.PAGE_UP:
-                this.selectFlowRelative(-10)
-                break
-            case Key.END:
-                this.selectFlowRelative(+1e10)
-                break
-            case Key.HOME:
-                this.selectFlowRelative(-1e10)
-                break
-            case Key.ESC:
-                this.selectFlow(null)
-                break
-            case Key.H:
-            case Key.LEFT:
-                if (this.refs.flowDetails) {
-                    this.refs.flowDetails.nextTab(-1)
-                }
-                break
-            case Key.L:
-            case Key.TAB:
-            case Key.RIGHT:
-                if (this.refs.flowDetails) {
-                    this.refs.flowDetails.nextTab(+1)
-                }
-                break
-            case Key.C:
-                if (e.shiftKey) {
-                    this.props.clearFlows()
-                }
-                break
-            case Key.D:
-                if (flow) {
-                    if (e.shiftKey) {
-                        this.props.duplicateFlow(flow)
-                    } else {
-                        this.props.removeFlow(flow)
-                    }
-                }
-                break
-            case Key.A:
-                if (e.shiftKey) {
-                    this.props.acceptAllFlows()
-                } else if (flow && flow.intercepted) {
-                    this.props.acceptFlow(flow)
-                }
-                break
-            case Key.R:
-                if (!e.shiftKey && flow) {
-                    this.props.replayFlow(flow)
-                }
-                break
-            case Key.V:
-                if (e.shiftKey && flow && flow.modified) {
-                    this.props.revertFlow(flow)
-                }
-                break
-            case Key.E:
-                if (this.refs.flowDetails) {
-                    this.refs.flowDetails.promptEdit()
-                }
-                break
-            case Key.SHIFT:
-                break
-            default:
-                console.debug('keydown', e.keyCode)
-                return
-        }
-        e.preventDefault()
-    }
-
     render() {
         const { flows, selectedFlow, highlight } = this.props
         return (
@@ -162,7 +37,7 @@ class MainView extends Component {
                     flows={flows}
                     selected={selectedFlow}
                     highlight={highlight}
-                    onSelect={flow => this.selectFlow(flow)}
+                    onSelect={flow => this.props.selectFlow(flow.id)}
                 />
                 {selectedFlow && [
                     <Splitter key="splitter"/>,
@@ -171,7 +46,6 @@ class MainView extends Component {
                         ref="flowDetails"
                         tab={this.props.routeParams.detailTab}
                         query={this.props.query}
-                        updateLocation={this.props.updateLocation}
                         updateFlow={data => this.props.updateFlow(selectedFlow, data)}
                         flow={selectedFlow}
                     />
@@ -193,14 +67,9 @@ export default connect(
         updateFilter,
         updateHighlight,
         updateFlow: flowsActions.update,
-        clearFlows: flowsActions.clear,
-        duplicateFlow: flowsActions.duplicate,
-        removeFlow: flowsActions.remove,
-        acceptAllFlows: flowsActions.acceptAll,
-        acceptFlow: flowsActions.accept,
-        replayFlow: flowsActions.replay,
-        revertFlow: flowsActions.revert,
     },
     undefined,
-    { withRef: true }
+    {
+        withRef: true
+    }
 )(MainView)
diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx
index e6564896..1c20b1a9 100755
--- a/web/src/js/components/Prompt.jsx
+++ b/web/src/js/components/Prompt.jsx
@@ -4,23 +4,15 @@ import _ from 'lodash'
 
 import {Key} from '../utils.js'
 
-Prompt.contextTypes = {
-    returnFocus: PropTypes.func
-}
-
 Prompt.propTypes = {
     options: PropTypes.array.isRequired,
     done: PropTypes.func.isRequired,
     prompt: PropTypes.string,
 }
 
-export default function Prompt({ prompt, done, options }, context) {
+export default function Prompt({ prompt, done, options }) {
     const opts = []
 
-    function keyTaken(k) {
-        return _.map(opts, 'key').includes(k)
-    }
-
     for (let i = 0; i < options.length; i++) {
         let opt = options[i]
         if (_.isString(opt)) {
@@ -35,7 +27,11 @@ export default function Prompt({ prompt, done, options }, context) {
         }
         opts.push(opt)
     }
-    
+
+    function keyTaken(k) {
+        return _.map(opts, 'key').includes(k)
+    }
+
     function onKeyDown(event) {
         event.stopPropagation()
         event.preventDefault()
@@ -44,7 +40,6 @@ export default function Prompt({ prompt, done, options }, context) {
             return
         }
         done(key.key || false)
-        context.returnFocus()
     }
 
     return (
diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
index 1ac979bc..f0e33330 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -4,6 +4,7 @@ import _ from 'lodash'
 import { connect } from 'react-redux'
 
 import { init as appInit, destruct as appDestruct } from '../ducks/app'
+import { onKeyDown } from '../ducks/ui'
 import Header from './Header'
 import EventLog from './EventLog'
 import Footer from './Footer'
@@ -11,124 +12,39 @@ import { Key } from '../utils.js'
 
 class ProxyAppMain extends Component {
 
-    static childContextTypes = {
-        returnFocus: PropTypes.func.isRequired,
-    }
-
     static contextTypes = {
         router: PropTypes.object.isRequired,
     }
 
-    constructor(props, context) {
-        super(props, context)
-
-        this.focus = this.focus.bind(this)
-        this.onKeyDown = this.onKeyDown.bind(this)
-        this.updateLocation = this.updateLocation.bind(this)
-    }
-
     componentWillMount() {
-        this.props.appInit()
-    }
-
-    /**
-     * @todo listen to window's key events
-     */
-    componentDidMount() {
-        this.focus()
+        this.props.appInit(this.context.router)
+        window.addEventListener('keydown', this.props.onKeyDown);
     }
 
     componentWillUnmount() {
-        this.props.appDestruct()
-    }
-
-    /**
-     * @todo use props
-     */
-    getChildContext() {
-        return { returnFocus: this.focus }
-    }
-
-    /**
-     * @todo remove it
-     */
-    focus() {
-        document.activeElement.blur()
-        window.getSelection().removeAllRanges()
-        ReactDOM.findDOMNode(this).focus()
-    }
-
-    /**
-     * @todo move to actions
-     * @todo bind on window
-     */
-    onKeyDown(e) {
-        let name = null
-
-        switch (e.keyCode) {
-            case Key.I:
-                name = 'intercept'
-                break
-            case Key.L:
-                name = 'search'
-                break
-            case Key.H:
-                name = 'highlight'
-                break
-            default:
-                let main = this.refs.view
-                if (this.refs.view.refs.wrappedInstance) {
-                    main = this.refs.view.refs.wrappedInstance
-                }
-                if (main.onMainKeyDown) {
-                    main.onMainKeyDown(e)
-                }
-                return // don't prevent default then
-        }
-
-        if (name) {
-            const headerComponent = this.refs.header.refs.wrappedInstance || this.refs.header
-            headerComponent.setState({ active: Header.entries[0] }, () => {
-                const active = headerComponent.refs.active.refs.wrappedInstance || headerComponent.refs.active
-                active.refs[name].select()
-            })
-        }
-
-        e.preventDefault()
+        this.props.appDestruct(this.context.router)
+        window.removeEventListener('keydown', this.props.onKeyDown);
     }
 
-    /**
-     * @todo move to actions
-     */
-    updateLocation(pathname, queryUpdate) {
-        if (pathname === undefined) {
-            pathname = this.props.location.pathname
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.query === this.props.query && nextProps.selectedFlowId === this.props.selectedFlowId && nextProps.panel === this.props.panel) {
+            return
         }
-        const query = this.props.location.query
-        for (const key of Object.keys(queryUpdate || {})) {
-            query[key] = queryUpdate[key] || undefined
+        if (nextProps.selectedFlowId) {
+            this.context.router.replace({ pathname: `/flows/${nextProps.selectedFlowId}/${nextProps.panel}`, query: nextProps.query })
+        } else {
+            this.context.router.replace({ pathname: '/flows', query: nextProps.query })
         }
-        this.context.router.replace({ pathname, query })
-    }
-
-    /**
-     * @todo pass in with props
-     */
-    getQuery() {
-        // For whatever reason, react-router always returns the same object, which makes comparing
-        // the current props with nextProps impossible. As a workaround, we just clone the query object.
-        return _.clone(this.props.location.query)
     }
 
     render() {
-        const { showEventLog, location, children } = this.props
-        const query = this.getQuery()
+        const { showEventLog, location, children, query } = this.props
         return (
-            <div id="container" tabIndex="0" onKeyDown={this.onKeyDown}>
-                <Header ref="header" updateLocation={this.updateLocation} query={query} />
+            <div id="container" tabIndex="0">
+                <Header ref="header" query={query} />
                 {React.cloneElement(
                     children,
-                    { ref: 'view', location, query, updateLocation: this.updateLocation }
+                    { ref: 'view', location, query }
                 )}
                 {showEventLog && (
                     <EventLog key="eventlog"/>
@@ -142,10 +58,13 @@ class ProxyAppMain extends Component {
 export default connect(
     state => ({
         showEventLog: state.eventLog.visible,
-        settings: state.settings.settings,
+        query: state.ui.query,
+        panel: state.ui.panel,
+        selectedFlowId: state.flows.views.main.selected[0]
     }),
     {
         appInit,
         appDestruct,
+        onKeyDown
     }
 )(ProxyAppMain)
diff --git a/web/src/js/components/ValueEditor.jsx b/web/src/js/components/ValueEditor.jsx
index 0316924f..5f1bf2dc 100755
--- a/web/src/js/components/ValueEditor.jsx
+++ b/web/src/js/components/ValueEditor.jsx
@@ -4,27 +4,17 @@ import ValidateEditor from './ValueEditor/ValidateEditor'
 
 export default class ValueEditor extends Component {
 
-    static contextTypes = {
-        returnFocus: PropTypes.func,
-    }
-
     static propTypes = {
         content: PropTypes.string.isRequired,
         onDone: PropTypes.func.isRequired,
         inline: PropTypes.bool,
     }
 
-    constructor(props) {
-        super(props)
-        this.focus = this.focus.bind(this)
-    }
-
     render() {
-        var tag = this.props.inline ? "span" : 'div'
+        var tag = this.props.inline ? 'span' : 'div'
         return (
             <ValidateEditor
                 {...this.props}
-                onStop={() => this.context.returnFocus()}
                 tag={tag}
             />
         )
diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js
index 4de460aa..15334f88 100644
--- a/web/src/js/ducks/ui.js
+++ b/web/src/js/ducks/ui.js
@@ -1,42 +1,262 @@
-import {SELECT} from "./views/main"
-export const SET_ACTIVE_MENU = 'SET_ACTIVE_MENU';
+import { SELECT as SELECT_FLOW, selectRelative as selectFlowRelative } from './views/main'
+import { Key } from '../utils.js'
+import * as flowsActions from '../ducks/flows'
 
+export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU'
+export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW'
+export const SET_SELECTED_INPUT = 'UI_SET_SELECTED_INPUT'
+export const UPDATE_QUERY = 'UI_UPDATE_QUERY'
+export const SELECT_TAB = 'UI_SELECT_TAB'
+export const SELECT_TAB_RELATIVE = 'UI_SELECT_TAB_RELATIVE'
+export const SET_PROMPT = 'UI_SET_PROMPT'
+export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE'
 
 const defaultState = {
     activeMenu: 'Start',
+    selectedInput: null,
+    displayLarge: false,
+    promptOpen: false,
+    contentView: 'ViewAuto',
+    query: {},
+    panel: 'request'
 }
+
 export default function reducer(state = defaultState, action) {
     switch (action.type) {
+
         case SET_ACTIVE_MENU:
             return {
                 ...state,
-                activeMenu: action.activeMenu
+                activeMenu: action.activeMenu,
             }
-        case SELECT:
-            let isNewSelect = (action.id && !action.currentSelection)
-            let isDeselect = (!action.id && action.currentSelection)
-            if(isNewSelect) {
+
+        case SELECT_FLOW:
+            if (action.flowId && !action.currentSelection) {
                 return {
                     ...state,
-                    activeMenu: "Flow"
+                    displayLarge: false,
+                    activeMenu: 'Flow',
                 }
             }
-            if(isDeselect && state.activeMenu === "Flow") {
+
+            if (!action.flowId && state.activeMenu === 'Flow') {
                 return {
                     ...state,
-                    activeMenu: "Start"
+                    displayLarge: false,
+                    activeMenu: 'Start',
                 }
             }
-            return state
+
+            return {
+                ...state,
+                displayLarge: false,
+            }
+
+        case SET_CONTENT_VIEW:
+            return {
+                ...state,
+                contentView: action.contentView,
+            }
+
+        case SET_SELECTED_INPUT:
+            return {
+                ...state,
+                selectedInput: action.input
+            }
+
+        case UPDATE_QUERY:
+            return {
+                ...state,
+                query: { ...state.query, ...action.query }
+            }
+
+        case SELECT_TAB:
+            return {
+                ...state,
+                panel: action.panel
+            }
+
+        case SELECT_TAB_RELATIVE:
+            if (!action.flow || action.shift === null) {
+                return {
+                    ...state,
+                    panel: 'request'
+                }
+            }
+            const tabs = ['request', 'response', 'error'].filter(k => action.flow[k]).concat(['details'])
+            return {
+                ...state,
+                panel: tabs[(tabs.indexOf(state.panel) + action.shift + tabs.length) % tabs.length]
+            }
+
+        case SET_PROMPT:
+            return {
+                ...state,
+                promptOpen: action.open,
+            }
+
+        case SET_DISPLAY_LARGE:
+            return {
+                ...state,
+                displayLarge: action.displayLarge,
+            }
+
         default:
             return state
     }
 }
 
 export function setActiveMenu(activeMenu) {
-    return {
-        type: SET_ACTIVE_MENU,
-        activeMenu
+    return { type: SET_ACTIVE_MENU, activeMenu }
+}
+
+export function setContentView(contentView) {
+    return { type: SET_CONTENT_VIEW, contentView }
+}
+
+export function setSelectedInput(input) {
+    return { type: SET_SELECTED_INPUT, input }
+}
+
+export function updateQuery(query) {
+    return { type: UPDATE_QUERY, query }
+}
+
+export function selectTab(panel) {
+    return { type: SELECT_TAB, panel }
+}
+
+export function selectTabRelative(shift) {
+    return (dispatch, getState) => {
+        let flow = getState().flows.list.byId[getState().flows.views.main.selected[0]]
+        dispatch({ type: SELECT_TAB_RELATIVE, shift, flow })
     }
 }
 
+export function setPrompt(open) {
+    return { type: SET_PROMPT, open }
+}
+
+export function setDisplayLarge(displayLarge) {
+    return { type: SET_DISPLAY_LARGE, displayLarge }
+}
+
+export function onKeyDown(e) {
+    if(e.ctrlKey) {
+        return () => {}
+    }
+    var key = e.keyCode
+    var shiftKey = e.shiftKey
+    e.preventDefault()
+    return (dispatch, getState) => {
+        switch (key) {
+
+            case Key.I:
+                dispatch(setSelectedInput('intercept'))
+                break
+
+            case Key.L:
+                dispatch(setSelectedInput('search'))
+                break
+
+            case Key.H:
+                dispatch(setSelectedInput('highlight'))
+                break
+
+            case Key.K:
+            case Key.UP:
+                dispatch(selectFlowRelative(-1))
+                break
+
+            case Key.J:
+            case Key.DOWN:
+                dispatch(selectFlowRelative(+1))
+                break
+
+            case Key.SPACE:
+            case Key.PAGE_DOWN:
+                dispatch(selectFlowRelative(+10))
+                break
+
+            case Key.PAGE_UP:
+                dispatch(selectFlowRelative(-10))
+                break
+
+            case Key.END:
+                dispatch(selectFlowRelative(+1e10))
+                break
+
+            case Key.HOME:
+                dispatch(selectFlowRelative(-1e10))
+                break
+
+            case Key.ESC:
+                dispatch(selectFlowRelative(null))
+                dispatch(selectTabRelative(null))
+                break
+
+            case Key.H:
+            case Key.LEFT:
+                dispatch(selectTabRelative(-1))
+                break
+
+            case Key.L:
+            case Key.TAB:
+            case Key.RIGHT:
+                dispatch(selectTabRelative(+1))
+                break
+
+            case Key.C:
+                if (shiftKey) {
+                    dispatch(flowsActions.clear())
+                }
+                break
+
+            case Key.D: {
+                const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]]
+                if (!flow) {
+                    return
+                }
+                if (shiftKey) {
+                    dispatch(flowsActions.duplicate(flow))
+                } else {
+                    dispatch(flowsActions.remove(flow))
+                }
+                break
+            }
+
+            case Key.A: {
+                const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]]
+                if (shiftKey) {
+                    dispatch(flowsActions.acceptAll())
+                } else if (flow && flow.intercepted) {
+                    dispatch(flowsActions.accept(flow))
+                }
+                break
+            }
+
+            case Key.R: {
+                const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]]
+                if (!shiftKey && flow) {
+                    dispatch(flowsActions.replay(flow))
+                }
+                break
+            }
+
+            case Key.V: {
+                const flow = getState().flows.list.byId[getState().flows.views.main.selected[0]]
+                if (!shiftKey && flow && flow.modified) {
+                    dispatch(flowsActions.revert(flow))
+                }
+                break
+            }
+
+            case Key.E:
+                dispatch(setPrompt(true))
+                break
+
+            default:
+                return () => {}
+        }
+    }
+}
diff --git a/web/src/js/ducks/views/main.js b/web/src/js/ducks/views/main.js
index f4968de4..db9de619 100755
--- a/web/src/js/ducks/views/main.js
+++ b/web/src/js/ducks/views/main.js
@@ -7,6 +7,7 @@ export const UPDATE_FILTER = 'FLOW_VIEWS_MAIN_UPDATE_FILTER'
 export const UPDATE_SORT = 'FLOW_VIEWS_MAIN_UPDATE_SORT'
 export const UPDATE_HIGHLIGHT = 'FLOW_VIEWS_MAIN_UPDATE_HIGHLIGHT'
 export const SELECT = 'FLOW_VIEWS_MAIN_SELECT'
+export const SELECT_RELATIVE = 'SELECT_RELATIVE'
 
 const sortKeyFuns = {
 
@@ -52,6 +53,27 @@ export default function reduce(state = defaultState, action) {
                 selected: [action.id]
             }
 
+        case SELECT_RELATIVE:
+            if(action.shift === null) {
+                return {
+                    ...state,
+                    selected: []
+                }
+            }
+            let id = state.selected[0]
+            let index = 0
+            if(!id && action.shift < 0) {
+                index = state.view.data.length - 1
+            } else if(id) {
+                index = state.view.indexOf[id] + action.shift
+                index = index < 0 ? 0 : index
+                index = index > state.view.data.length - 1 ? state.view.data.length - 1 : index
+            }
+            return {
+                ...state,
+                selected: [state.view.data[index].id]
+            }
+
         case UPDATE_FILTER:
             return {
                 ...state,
@@ -171,6 +193,15 @@ export function select(id) {
 }
 
 /**
+ * @public
+ */
+export function selectRelative(shift) {
+    return (dispatch, getState) => {
+        dispatch({ type: SELECT_RELATIVE, currentSelection: getState().flows.views.main.selected[0], shift })
+    }
+}
+
+/**
  * @private
  */
 function makeFilter(filter) {