Remove ref dependency from Frame

app/browser/reducers/tabsReducer.js

@@ -8,6 +8,7 @@ const appConstants = require('../../../js/constants/appConstants')
 const tabs = require('../tabs')
 const tabState = require('../../common/state/tabState')
 const windowConstants = require('../../../js/constants/windowConstants')
+const windowAction = require('../../../js/actions/windowActions.js')
 const {makeImmutable} = require('../../common/state/immutableUtil')
 const {getFlashResourceId} = require('../../../js/flash')
 const {l10nErrorText} = require('../../common/lib/httpUtil')
@@ -71,6 +72,51 @@ const tabsReducer = (state, action) => {
     case appConstants.APP_LOAD_URL_IN_ACTIVE_TAB_REQUESTED:
       state = tabs.loadURLInActiveTab(state, action)
       break
+    case appConstants.APP_ON_NAVIGATE_BACK:
+      state = tabs.goBack(state, action)
+      break
+    case appConstants.APP_ON_NAVIGATE_FORWARD:
+      state = tabs.goForward(state, action)
+      break
+    case appConstants.APP_ON_NAVIGATE_INDEX:
+      state = tabs.goToIndex(state, action)
+      break
+    case appConstants.APP_ON_NAVIGATE_BACK_LONG:
+      {
+        const history = tabs.getHistoryEntries(state, action)
+        const tabValue = tabState.getByTabId(state, action.get('tabId'))
+        const windowId = tabs.getWindowId()
+
+        if (history !== null) {
+          windowAction.onLongBackHistory(
+            history,
+            action.getIn(['rect', 'left']),
+            action.getIn(['rect', 'bottom']),
+            tabValue.get('partitionNumber'),
+            action.get('tabId'),
+            windowId
+          )
+        }
+        break
+      }
+    case appConstants.APP_ON_NAVIGATE_FORWARD_LONG:
+      {
+        const history = tabs.getHistoryEntries(state, action)
+        const tabValue = tabState.getByTabId(state, action.get('tabId'))
+        const windowId = tabs.getWindowId()
+
+        if (history !== null) {
+          windowAction.onLongForwardHistory(
+            history,
+            action.getIn(['rect', 'left']),
+            action.getIn(['rect', 'bottom']),
+            tabValue.get('partitionNumber'),
+            action.get('tabId'),
+            windowId
+          )
+        }
+        break
+      }
     case appConstants.APP_FRAME_CHANGED:
       state = tabState.updateFrame(state, action)
       break

app/browser/tabs.js

@@ -1,11 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 const appActions = require('../../js/actions/appActions')
 const config = require('../../js/constants/config')
 const Immutable = require('immutable')
 const tabState = require('../common/state/tabState')
 const {app, BrowserWindow, extensions, session, ipcMain} = require('electron')
 const {makeImmutable} = require('../common/state/immutableUtil')
 const {getTargetAboutUrl, getSourceAboutUrl, isSourceAboutUrl, newFrameUrl} = require('../../js/lib/appUrlUtil')
-const {isURL, getUrlFromInput, toPDFJSLocation} = require('../../js/lib/urlutil')
+const {isURL, getUrlFromInput, toPDFJSLocation, getDefaultFaviconUrl} = require('../../js/lib/urlutil')
 const {isSessionPartition} = require('../../js/state/frameStateUtil')
 const {getOrigin} = require('../../js/state/siteUtil')
 const {getSetting} = require('../../js/settings')
@@ -69,7 +73,7 @@ const getPartitionNumber = (partition) => {
 }
 
 /**
- * Obtains the curent partition.
+ * Obtains the current partition.
  * Warning: This function has global side effects in that it increments the
  * global next partition number if isPartitioned is passed into the create options.
  */
@@ -619,6 +623,87 @@ const api = {
       api.createTab(state, action)
     }
     return state
+  },
+
+  goBack: (state, action) => {
+    action = makeImmutable(action)
+    const tab = api.getWebContents(action.get('tabId'))
+    if (tab && !tab.isDestroyed()) {
+      tab.goBack()
+    }
+    return state
+  },
+
+  goForward: (state, action) => {
+    action = makeImmutable(action)
+    const tab = api.getWebContents(action.get('tabId'))
+    if (tab && !tab.isDestroyed()) {
+      tab.goForward()
+    }
+    return state
+  },
+
+  goToIndex: (state, action) => {
+    action = makeImmutable(action)
+    const tab = api.getWebContents(action.get('tabId'))
+    if (tab && !tab.isDestroyed()) {
+      tab.goToIndex(action.get('index'))
+    }
+    return state
+  },
+
+  getWindowId: () => {
+    if (BrowserWindow.getFocusedWindow()) {
+      return BrowserWindow.getFocusedWindow().id
+    }
+
+    return -1
+  },
+
+  getHistoryEntries: (state, action) => {
+    const tab = api.getWebContents(action.get('tabId'))
+    const sites = state ? state.get('sites') : null
+
+    if (tab && !tab.isDestroyed()) {
+      let history = {
+        count: tab.getEntryCount(),
+        currentIndex: tab.getCurrentEntryIndex(),
+        entries: []
+      }
+
+      for (let index = 0; index < history.count; index++) {
+        const url = tab.getURLAtIndex(index)
+        const title = tab.getTitleAtIndex(index)
+
+        let entry = {
+          index: index,
+          url: url,
+          display: title || url,
+          icon: null
+        }
+
+        if (url.startsWith('chrome-extension://')) {
+          // TODO: return brave lion (or better: get icon from extension if possible as data URI)
+        } else {
+          if (sites) {
+            const site = sites.find(function (element) { return element.get('location') === url })
+            if (site) {
+              entry.icon = site.get('favicon')
+            }
+          }
+
+          if (!entry.icon) {
+            entry.icon = getDefaultFaviconUrl(url)
+          }
+        }
+
+        history.entries.push(entry)
+      }
+
+      return history
+    }
+
+    return null
   }
 }
 

app/common/state/contextMenuState.js

@@ -0,0 +1,159 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const assert = require('assert')
+const eventUtil = require('../../../js/lib/eventUtil.js')
+const appActions = require('../../../js/actions/appActions.js')
+const windowAction = require('../../../js/actions/windowActions.js')
+const config = require('../../../js/constants/config.js')
+const CommonMenu = require('../commonMenu.js')
+const locale = require('../../../js/l10n.js')
+const { makeImmutable, isMap } = require('./immutableUtil')
+
+const validateAction = function (action) {
+  action = makeImmutable(action)
+  assert.ok(isMap(action), 'action must be an Immutable.Map')
+  return action
+}
+
+const validateState = function (state) {
+  state = makeImmutable(state)
+  assert.ok(isMap(state), 'state must be an Immutable.Map')
+  return state
+}
+
+const contextMenuState = {
+  setContextMenu: (state, action) => {
+    action = validateAction(action)
+    state = validateState(state)
+
+    if (!action.get('detail')) {
+      if (state.getIn(['contextMenuDetail', 'type']) === 'hamburgerMenu') {
+        state = state.set('hamburgerMenuWasOpen', true)
+      } else {
+        state = state.set('hamburgerMenuWasOpen', false)
+      }
+      state = state.delete('contextMenuDetail')
+    } else {
+      if (!(action.getIn(['detail', 'type']) === 'hamburgerMenu' && state.get('hamburgerMenuWasOpen'))) {
+        state = state.set('contextMenuDetail', action.get('detail'))
+      }
+      state = state.set('hamburgerMenuWasOpen', false)
+    }
+
+    return state
+  },
+
+  onLongBacHistory: (state, action) => {
+    action = validateAction(action)
+    state = validateState(state)
+    const history = action.get('history')
+
+    const menuTemplate = []
+
+    if (action.get('tabId') > -1 && history && history.get('entries').size > 0) {
+      const stopIndex = Math.max(((history.get('currentIndex') - config.navigationBar.maxHistorySites) - 1), -1)
+      for (let index = (history.get('currentIndex') - 1); index > stopIndex; index--) {
+        const entry = history.getIn(['entries', index])
+        const url = entry.get('url')
+
+        menuTemplate.push({
+          label: entry.get('display'),
+          icon: entry.get('icon'),
+          click: function (e) {
+            if (eventUtil.isForSecondaryAction(e)) {
+              appActions.createTabRequested({
+                url,
+                partitionNumber: action.get('partitionNumber'),
+                active: !!e.shiftKey
+              })
+            } else {
+              appActions.onNavigateIndex(action.get('tabId'), index)
+            }
+          }
+        })
+      }
+
+      // Always display "Show History" link
+      menuTemplate.push(
+        CommonMenu.separatorMenuItem,
+        {
+          label: locale.translation('showAllHistory'),
+          click: function () {
+            appActions.createTabRequested({
+              url: 'about:history'
+            })
+            windowAction.setContextMenuDetail()
+          }
+        })
+
+      state = contextMenuState.setContextMenu(state, makeImmutable({
+        detail: {
+          left: action.get('left'),
+          top: action.get('top'),
+          template: menuTemplate
+        }
+      }))
+    }
+
+    return state
+  },
+
+  onLongForwardHistory: (state, action) => {
+    action = validateAction(action)
+    state = validateState(state)
+    const history = action.get('history')
+
+    const menuTemplate = []
+
+    if (action.get('tabId') > -1 && history && history.get('entries').size > 0) {
+      const stopIndex = Math.min(((history.get('currentIndex') + config.navigationBar.maxHistorySites) + 1), history.get('entries').size)
+      for (let index = (history.get('currentIndex') + 1); index < stopIndex; index++) {
+        const entry = history.getIn(['entries', index])
+        const url = entry.get('url')
+
+        menuTemplate.push({
+          label: entry.get('display'),
+          icon: entry.get('icon'),
+          click: function (e) {
+            if (eventUtil.isForSecondaryAction(e)) {
+              appActions.createTabRequested({
+                url,
+                partitionNumber: action.get('partitionNumber'),
+                active: !!e.shiftKey
+              })
+            } else {
+              appActions.onNavigateIndex(action.get('tabId'), index)
+            }
+          }
+        })
+      }
+
+      // Always display "Show History" link
+      menuTemplate.push(
+        CommonMenu.separatorMenuItem,
+        {
+          label: locale.translation('showAllHistory'),
+          click: function () {
+            appActions.createTabRequested({
+              url: 'about:history'
+            })
+            windowAction.setContextMenuDetail()
+          }
+        })
+
+      state = contextMenuState.setContextMenu(state, makeImmutable({
+        detail: {
+          left: action.get('left'),
+          top: action.get('top'),
+          template: menuTemplate
+        }
+      }))
+    }
+
+    return state
+  }
+}
+
+module.exports = contextMenuState

app/renderer/components/navigation/navigator.js

@@ -10,7 +10,6 @@ const ipc = electron.ipcRenderer
 // Actions
 const appActions = require('../../../../js/actions/appActions')
 const windowActions = require('../../../../js/actions/windowActions')
-const contextMenus = require('../../../../js/contextMenus')
 const getSetting = require('../../../../js/settings').getSetting
 
 // Components
@@ -69,7 +68,7 @@ class Navigator extends ImmutableComponent {
         })
       }
     } else {
-      navAction.call(this.activeFrame)
+      navAction.call(this, this.props.activeTab.get('tabId'))
     }
   }
 
@@ -122,19 +121,29 @@ class Navigator extends ImmutableComponent {
   }
 
   onBack (e) {
-    this.onNav(e, 'canGoBack', 'back', this.activeFrame.goBack)
+    this.onNav(e, 'canGoBack', 'back', appActions.onNavigateBack)
   }
 
   onForward (e) {
-    this.onNav(e, 'canGoForward', 'forward', this.activeFrame.goForward)
+    this.onNav(e, 'canGoForward', 'forward', appActions.onNavigateForward)
   }
 
   onBackLongPress (target) {
-    contextMenus.onBackButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), target)
+    const activeTab = this.props.activeTab
+    const rect = target.parentNode.getBoundingClientRect()
+    appActions.onNavigateBackLong(activeTab.get('tabId'), {
+      left: rect.left,
+      bottom: rect.bottom
+    })
   }
 
   onForwardLongPress (target) {
-    contextMenus.onForwardButtonHistoryMenu(this.activeFrame, this.activeFrame.getHistory(this.props.appState), target)
+    const activeTab = this.props.activeTab
+    const rect = target.parentNode.getBoundingClientRect()
+    appActions.onNavigateForwardLong(activeTab.get('tabId'), {
+      left: rect.left,
+      bottom: rect.bottom
+    })
   }
 
   onDragOver (e) {