Add back/forward features for the current tab

Close #245

CHANGELOG.md

@@ -20,6 +20,9 @@ Release date: TBD
 - Add access to settings through tray menu
 - Removed unclear desktop notifications when failed to load tabs.
 - Reload automatically the failed tab when the computer becomes online.
+- Added back/forward features for the current tab.
+  - Windows and Linux: Alt+Left, Alt+Right
+  - OS X: Command+[, Command+]
 
 #### Windows
 - Added an option to toogle the red dot icon for unread messages (default is on).

docs/setup.md

@@ -162,6 +162,9 @@ Below lists menu options (shortcut keys are listed in brackets, `Ctrl` becomes `
   - **Actual Size** (Ctrl+0) - Reset zoom level
   - **Zoom In** (Ctrl+Plus) - Enlarge the rendered contents size
   - **Zoom In** (Ctrl+Minus) - Shrink the rendered contents size
+- **History**
+  - **Back** (Alt+Left, Command+[ on OS X) - Go back to previous web page in the current tab
+  - **Forward** (Alt+Right, Command+] on OS X) - Go forward to next web page in the current tab
 - **Window**
   - **Close** (Ctrl+W) - Close the window (On Window and Linux, the main window is minimized)
   - **Minimize** (Ctrl+M) - Minimize the window

src/browser/index.jsx

@@ -97,6 +97,21 @@ var MainPage = React.createClass({
     window.addEventListener('beforeunload', function() {
       currentWindow.removeListener('focus', focusListener);
     });
+
+    //goBack and goForward
+    ipcRenderer.on('go-back', () => {
+      const mattermost = thisObj.refs[`mattermostView${thisObj.state.key}`];
+      if (mattermost.canGoBack()) {
+        mattermost.goBack();
+      }
+    });
+
+    ipcRenderer.on('go-forward', () => {
+      const mattermost = thisObj.refs[`mattermostView${thisObj.state.key}`];
+      if (mattermost.canGoForward()) {
+        mattermost.goForward();
+      }
+    });
   },
   componentDidUpdate: function() {
     this.refs[`mattermostView${this.state.key}`].focusOnWebView();
@@ -462,6 +477,7 @@ var MattermostView = React.createClass({
       webContents.reload();
     });
   },
+
   focusOnWebView: function() {
     const webview = ReactDOM.findDOMNode(this.refs.webview);
     if (!webview.getWebContents().isFocused()) {
@@ -469,6 +485,27 @@ var MattermostView = React.createClass({
       webview.getWebContents().focus();
     }
   },
+
+  canGoBack() {
+    const webview = ReactDOM.findDOMNode(this.refs.webview);
+    return webview.getWebContents().canGoBack();
+  },
+
+  canGoForward() {
+    const webview = ReactDOM.findDOMNode(this.refs.webview);
+    return webview.getWebContents().canGoForward();
+  },
+
+  goBack() {
+    const webview = ReactDOM.findDOMNode(this.refs.webview);
+    webview.getWebContents().goBack();
+  },
+
+  goForward() {
+    const webview = ReactDOM.findDOMNode(this.refs.webview);
+    webview.getWebContents().goForward();
+  },
+
   render: function() {
     const errorView = this.state.errorInfo ? (<ErrorView id={ this.props.id + '-fail' } style={ this.props.style } className="errorView" errorInfo={ this.state.errorInfo }></ErrorView>) : null;
     // 'disablewebsecurity' is necessary to display external images.

src/main/menus/app.js

@@ -161,6 +161,37 @@ var createTemplate = function(mainWindow, config) {
       }
     }]
   });
+  template.push({
+    label: '&History',
+    submenu: [{
+      label: 'Back',
+      accelerator: process.platform === 'darwin' ? 'Cmd+[' : 'Alt+Left',
+      click: (item, focusedWindow) => {
+        if (focusedWindow === mainWindow) {
+          mainWindow.webContents.send('go-back');
+        }
+        else {
+          if (focusedWindow.webContents.canGoBack()) {
+            focusedWindow.goBack();
+          }
+        }
+      }
+    }, {
+      label: 'Forward',
+      accelerator: process.platform === 'darwin' ? 'Cmd+]' : 'Alt+Right',
+      click: (item, focusedWindow) => {
+        if (focusedWindow === mainWindow) {
+          mainWindow.webContents.send('go-forward');
+        }
+        else {
+          if (focusedWindow.webContents.canGoForward()) {
+            focusedWindow.goForward();
+          }
+        }
+      }
+    }]
+  });
+
 
   const window_menu = {
     label: '&Window',