Basic support for back and forward

js/actions/appActions.js

@@ -62,6 +62,15 @@ const AppActions = {
     })
   },
 
+  updateBackForwardState: function (frameProps, canGoBack, canGoForward) {
+    AppDispatcher.dispatch({
+      actionType: AppConstants.APP_UPDATE_BACK_FORWARD,
+      frameProps,
+      canGoBack,
+      canGoForward
+    })
+  },
+
   tabDragStart: function (frameProps) {
     AppDispatcher.dispatch({
       actionType: AppConstants.APP_TAB_DRAG_START,

js/components/frame.js

@@ -1,5 +1,6 @@
 const React = require('react')
 const ReactDOM = require('react-dom')
+const AppActions = require('../actions/appActions')
 const ImmutableComponent = require('./immutableComponent')
 const ipc = require('ipc')
 const cx = require('../lib/classSet.js')
@@ -58,9 +59,21 @@ class Frame extends ImmutableComponent {
     })
     webview.addEventListener('did-finish-load', () => {
       console.log('did finish load')
+      AppActions.updateBackForwardState(
+        this.props.frame,
+        this.refs.webview.canGoBack(),
+        this.refs.webview.canGoForward())
     })
   }
 
+  goBack () {
+    this.refs.webview.goBack()
+  }
+
+  goForward () {
+    this.refs.webview.goForward()
+  }
+
   render () {
     return <div
         className={cx({

js/components/main.js

@@ -36,12 +36,36 @@ class Main extends ImmutableComponent {
       AppActions.closeFrame())
   }
 
+  get activeFrame () {
+    return this.refs[`frame${this.props.browser.get('activeFrameKey')}`]
+  }
+
+  onBack () {
+    this.activeFrame.goBack()
+  }
+
+  onForward () {
+    this.activeFrame.goForward()
+  }
+
   render () {
     const comparatorByKeyAsc = (a, b) => a.get('key') > b.get('key')
       ? 1 : b.get('key') > a.get('key') ? -1 : 0
 
+    let activeFrame = FrameStateUtil.getActiveFrame(this.props.browser)
+
     return <div id='browser'>
       <div className='top'>
+        <div className='backforward'>
+          <span
+            className='back fa fa-angle-left'
+            disabled={!activeFrame || !activeFrame.get('canGoBack')}
+            onClick={this.onBack.bind(this)} />
+          <span
+            className='forward fa fa-angle-right'
+            disabled={!activeFrame || !activeFrame.get('canGoForward')}
+            onClick={this.onForward.bind(this)} />
+        </div>
         <NavigationBar
           navbar={this.props.browser.getIn(['ui', 'navbar'])}
           activeFrame={this.props.browser.get('frame')}
@@ -50,14 +74,15 @@ class Main extends ImmutableComponent {
           tabs={this.props.browser.getIn(['ui', 'tabs'])}
           frames={this.props.browser.get('frames')}
           key='tab-bar'
-          activeFrame={FrameStateUtil.getActiveFrame(this.props.browser)}
+          activeFrame={activeFrame}
         />
       </div>
       <div className='mainContainer'>
         <div className='tabContainer'>
         {
           this.props.browser.get('frames').sort(comparatorByKeyAsc).map(frame =>
             <Frame
+              ref={`frame${frame.get('key')}`}
               frame={frame}
               key={frame.get('key')}
               isActive={FrameStateUtil.isFrameKeyActive(this.props.browser, frame.get('key'))}

js/constants/appConstants.js

@@ -11,5 +11,6 @@ module.exports = {
   APP_TAB_DRAGGING_ON: 10,
   APP_TAB_DRAG_EXIT: 11,
   APP_TAB_DRAG_EXIT_RIGHT: 12,
-  APP_TAB_MOVE: 13
+  APP_TAB_MOVE: 13,
+  APP_UPDATE_BACK_FORWARD: 14
 }

js/state/frameStateUtil.js

@@ -120,6 +120,8 @@ export function addFrame (frames, frameOpts, newKey, activeFrameKey) {
   let frame = Immutable.fromJS({
     src: url,
     location: url,
+    canGoBack: false,
+    canGoForward: false,
     isPrivate: frameOpts.isPrivate || false,
     element: frameOpts.element,
     features: getFeatures(frameOpts.features),

js/stores/appStore.js

@@ -93,6 +93,13 @@ AppDispatcher.register((action) => {
       })
       appStore.emitChange()
       break
+    case AppConstants.APP_UPDATE_BACK_FORWARD:
+      appState = appState.mergeIn(['frames', FrameStateUtil.getFramePropsIndex(appState.get('frames'), action.frameProps)], {
+        canGoBack: action.canGoBack,
+        canGoForward: action.canGoForward
+      })
+      appStore.emitChange()
+      break
     case AppConstants.APP_TAB_DRAG_START:
       appState = appState.mergeIn(['frames', FrameStateUtil.getFramePropsIndex(appState.get('frames'), action.frameProps)], {
         tabIsDragging: true