convert navigationBar to redux component

related #7538

app/common/state/siteSettingsState.js

@@ -1,6 +1,6 @@
 const appConfig = require('../../../js/constants/appConfig')
 const siteSettings = require('../../../js/state/siteSettings')
 
-module.exports.isNoScriptEnabled = (settings, state) => {
+module.exports.isNoScriptEnabled = (state, settings) => {
   return siteSettings.activeSettings(settings, state, appConfig).noScript === true
 }

app/common/state/tabState.js

@@ -288,6 +288,9 @@ const tabState = {
   },
 
   isShowingMessageBox: (state, tabId) => {
+    if (tabId === tabState.TAB_ID_NONE) {
+      return false
+    }
     return tabState.getTabPropertyByTabId(state, tabId, 'messageBoxDetail') || false
   },
 
@@ -309,9 +312,14 @@ const tabState = {
     }
   },
 
-  getActiveTabId: (state) => {
+  getActiveTab: (state, windowId = windowState.getActiveWindowId(state)) => {
     state = validateState(state)
-    const tab = state.get('tabs').find((tab) => tab.get('active') === true)
+    windowId = validateId('windowId', windowId)
+    return state.get('tabs').find((tab) => tab.get('active') === true && tab.get('windowId') === windowId)
+  },
+
+  getActiveTabId: (state, windowId = windowState.getActiveWindowId(state)) => {
+    const tab = tabState.getActiveTab(state, windowId)
     return tab ? tab.get('tabId') : tabState.TAB_ID_NONE
   },
 

app/common/state/windowState.js

@@ -34,6 +34,9 @@ const validateAction = function (action) {
 }
 
 const api = {
+  WINDOW_ID_NONE: -1,
+  WINDOW_ID_CURRENT: -2,
+
   getWindowIndex: (state, windowValue) => {
     state = validateState(state)
 
@@ -68,6 +71,16 @@ const api = {
     }
   },
 
+  getActiveWindow: (state) => {
+    state = validateState(state)
+    return state.get('windows').find((win) => win.get('focused') === true)
+  },
+
+  getActiveWindowId: (state) => {
+    const win = api.getActiveWindow(state)
+    return (win && win.get('windowId')) || api.WINDOW_ID_NONE
+  },
+
   getByWindowId: (state, windowId) => {
     state = validateState(state)
     windowId = validateId('windowId', windowId)

app/importer.js

@@ -19,6 +19,7 @@ const getSetting = require('../js/settings').getSetting
 const locale = require('./locale')
 const tabMessageBox = require('./browser/tabMessageBox')
 const {makeImmutable} = require('./common/state/immutableUtil')
+const tabState = require('./common/state/tabState')
 
 var isMergeFavorites = false
 var isImportingBookmarks = false
@@ -229,9 +230,7 @@ importer.on('add-cookies', (e, cookies) => {
 })
 
 const getActiveTabId = () => {
-  const tabs = makeImmutable(AppStore.getState()).get('tabs')
-  const activeTab = tabs.find((tab) => tab.get('active'))
-  return activeTab && activeTab.get('id')
+  return tabState.getActiveTabId(AppStore.getState())
 }
 
 const showImportWarning = function () {

app/renderer/components/navigation/navigationBar.js

@@ -4,7 +4,7 @@
 
 const React = require('react')
 const Immutable = require('immutable')
-const ImmutableComponent = require('./../../../../js/components/immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 
 const cx = require('../../../../js/lib/classSet')
 const UrlBar = require('./urlBar')
@@ -24,10 +24,15 @@ const windowStore = require('../../../../js/stores/windowStore')
 const contextMenus = require('../../../../js/contextMenus')
 const LongPressButton = require('./../../../../js/components/longPressButton')
 const PublisherToggle = require('../publisherToggle')
+const {getCurrentWindowId} = require('../../currentWindow')
 
-class NavigationBar extends ImmutableComponent {
-  constructor () {
-    super()
+// State
+const tabState = require('../../../common/state/tabState')
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+
+class NavigationBar extends React.Component {
+  constructor (props) {
+    super(props)
     this.onToggleBookmark = this.onToggleBookmark.bind(this)
     this.onStop = this.onStop.bind(this)
     this.onReload = this.onReload.bind(this)
@@ -149,6 +154,43 @@ class NavigationBar extends ImmutableComponent {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
   }
 
+  mergeProps (state, dispatchProps, ownProps) {
+    const windowState = state.get('currentWindow')
+    const activeFrame = frameStateUtil.getActiveFrame(windowState) || Immutable.Map()
+    const activeTab = tabState.getActiveTabValue(state, getCurrentWindowId()) || Immutable.Map()
+    const activeTabId = tabState.getActiveTabId(state, getCurrentWindowId())
+    const props = {}
+
+    props.navbar = activeFrame.get('navbar')
+    props.sites = state.get('sites')
+    props.canGoForward = activeTab.get('canGoForward') || false
+    props.activeFrameKey = activeFrame.get('key')
+    props.location = activeFrame.get('location') || ''
+    props.title = activeFrame.get('title') || ''
+    props.scriptsBlocked = activeFrame.getIn(['noScript', 'blocked'])
+    props.partitionNumber = activeFrame.get('partitionNumber') || 0
+    props.history = activeFrame.get('history') || new Immutable.List()
+    props.suggestionIndex = activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'selectedIndex']) || 0
+    props.isSecure = activeFrame.getIn(['security', 'isSecure'])
+    props.hasLocationValueSuffix = activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'urlSuffix'])
+    props.startLoadTime = activeFrame.get('startLoadTime')
+    props.endLoadTime = activeFrame.get('endLoadTime')
+    props.loading = activeFrame.get('loading')
+    props.bookmarkDetail = windowState.get('bookmarkDetail')
+    props.mouseInTitlebar = windowState.getIn(['ui', 'mouseInTitlebar'])
+    props.searchDetail = windowState.get('searchDetail')
+    props.enableNoScript = ownProps.enableNoScript
+    props.settings = state.get('settings')
+    props.noScriptIsVisible = windowState.getIn(['ui', 'noScriptInfo', 'isVisible']) || false
+    props.menubarVisible = ownProps.menubarVisible
+    props.siteSettings = state.get('siteSettings')
+    props.synopsis = state.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map()
+    props.activeTabShowingMessageBox = tabState.isShowingMessageBox(state, activeTabId)
+    props.locationInfo = state.get('locationInfo')
+
+    return props
+  }
+
   render () {
     if (this.props.activeFrameKey === undefined ||
         this.props.siteSettings === undefined) {
@@ -253,4 +295,4 @@ class NavigationBar extends ImmutableComponent {
   }
 }
 
-module.exports = NavigationBar
+module.exports = ReduxComponent.connect(NavigationBar)

app/renderer/components/navigation/navigator.js

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const Immutable = require('immutable')
 const {StyleSheet, css} = require('aphrodite')
 
 // Actions
@@ -31,7 +30,6 @@ const {getCurrentWindowId, isMaximized} = require('../../currentWindow')
 const {makeImmutable} = require('../../../common/state/immutableUtil')
 const platformUtil = require('../../../common/lib/platformUtil')
 const {braveShieldsEnabled} = require('../../../common/state/shieldState')
-const tabUtil = require('../../lib/tabUtil')
 const eventUtil = require('../../../../js/lib/eventUtil')
 const {isNavigatableAboutPage, getBaseUrl} = require('./../../../../js/lib/appUrlUtil')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
@@ -57,8 +55,8 @@ class Navigator extends ImmutableComponent {
 
   onNav (e, navCheckProp, navType, navAction) {
     const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
-    const activeTabId = tabUtil.activeTabId(this.props.windowState)
-    const activeTab = activeFrame ? this.props.appState.get('tabs').find((tab) => tab.get('tabId') === activeTabId) : null
+    const activeTab = tabState.getActiveTab(this.props.appState)
+    const activeTabId = tabState.getActiveTabId(this.props.appState)
     const isNavigable = isNavigatableAboutPage(getBaseUrl(activeFrame.get('location')))
     if (e && eventUtil.isForSecondaryAction(e) && isNavigable) {
       if (activeTab && activeTab.get(navCheckProp)) {
@@ -96,7 +94,7 @@ class Navigator extends ImmutableComponent {
   }
 
   get extensionButtons () {
-    const activeTabId = tabUtil.activeTabId(this.props.windowState)
+    const activeTabId = tabState.getActiveTabId(this.props.appState)
     const enabledExtensions = extensionState.getEnabledExtensions(this.props.appState)
     const extensionBrowserActions = enabledExtensions
       .map((extension) => extensionState.getBrowserActionByTabId(this.props.appState, extension.get('id'), activeTabId))
@@ -178,7 +176,6 @@ class Navigator extends ImmutableComponent {
     const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
     const totalBlocks = activeFrame ? this.getTotalBlocks(activeFrame) : false
     const contextMenuDetail = this.props.windowState.get('contextMenuDetail')
-    const noScriptIsVisible = this.props.windowState.getIn(['ui', 'noScriptInfo', 'isVisible'])
     const braverySettings = siteSettings.activeSettings(this.props.activeSiteSettings, this.props.appState, appConfig)
     const shieldEnabled = braveShieldsEnabled(activeFrame)
 
@@ -235,32 +232,8 @@ class Navigator extends ImmutableComponent {
             </div>
           </div>
           <NavigationBar
-            navbar={activeFrame && activeFrame.get('navbar')}
-            sites={this.props.appState.get('sites')}
-            canGoForward={activeTab && activeTab.get('canGoForward')}
-            activeFrameKey={(activeFrame && activeFrame.get('key')) || undefined}
-            location={(activeFrame && activeFrame.get('location')) || ''}
-            title={(activeFrame && activeFrame.get('title')) || ''}
-            scriptsBlocked={activeFrame && activeFrame.getIn(['noScript', 'blocked'])}
-            partitionNumber={(activeFrame && activeFrame.get('partitionNumber')) || 0}
-            history={(activeFrame && activeFrame.get('history')) || new Immutable.List()}
-            suggestionIndex={(activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'selectedIndex'])) || 0}
-            isSecure={activeFrame ? activeFrame.getIn(['security', 'isSecure']) : null}
-            hasLocationValueSuffix={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'urlSuffix'])}
-            startLoadTime={(activeFrame && activeFrame.get('startLoadTime')) || undefined}
-            endLoadTime={(activeFrame && activeFrame.get('endLoadTime')) || undefined}
-            loading={activeFrame && activeFrame.get('loading')}
-            bookmarkDetail={this.props.windowState.get('bookmarkDetail')}
-            mouseInTitlebar={this.props.windowState.getIn(['ui', 'mouseInTitlebar'])}
-            searchDetail={this.props.windowState.get('searchDetail')}
-            enableNoScript={siteSettingsState.isNoScriptEnabled(this.props.activeSiteSettings, this.props.appState)}
-            settings={this.props.appState.get('settings')}
-            noScriptIsVisible={noScriptIsVisible}
+            enableNoScript={siteSettingsState.isNoScriptEnabled(this.props.appState, this.props.activeSiteSettings)}
             menubarVisible={this.props.customTitlebar.menubarVisible}
-            siteSettings={this.props.appState.get('siteSettings')}
-            synopsis={this.props.appState.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map()}
-            activeTabShowingMessageBox={activeTabShowingMessageBox}
-            locationInfo={this.props.appState.get('locationInfo')}
           />
           <div className='topLevelEndButtons'>
             <div className={cx({

app/renderer/lib/tabUtil.js

@@ -108,13 +108,3 @@ module.exports.updateTabPageIndex = (state, frameProps) => {
 
   return state
 }
-
-module.exports.activeTab = (state, windowState) => {
-  const activeFrame = frameStateUtil.getActiveFrame(windowState)
-  return activeFrame ? state.get('tabs').find((tab) => tab.get('tabId') === activeFrame.get('tabId')) : null
-}
-
-module.exports.activeTabId = (windowState) => {
-  const activeFrame = frameStateUtil.getActiveFrame(windowState)
-  return activeFrame && activeFrame.get('tabId')
-}

js/components/main.js

@@ -59,6 +59,7 @@ const searchProviders = require('../data/searchProviders')
 const defaultBrowserState = require('../../app/common/state/defaultBrowserState')
 const shieldState = require('../../app/common/state/shieldState')
 const siteSettingsState = require('../../app/common/state/siteSettingsState')
+const tabState = require('../../app/common/state/tabState')
 
 // Util
 const _ = require('underscore')
@@ -68,7 +69,6 @@ const siteSettings = require('../state/siteSettings')
 const debounce = require('../lib/debounce')
 const {getCurrentWindowId, isMaximized, isFocused, isFullScreen} = require('../../app/renderer/currentWindow')
 const platformUtil = require('../../app/common/lib/platformUtil')
-const tabUtil = require('../../app/renderer/lib/tabUtil')
 
 class Main extends ImmutableComponent {
   constructor () {
@@ -715,7 +715,7 @@ class Main extends ImmutableComponent {
     const autofillAddressPanelIsVisible = this.props.windowState.get('autofillAddressDetail')
     const autofillCreditCardPanelIsVisible = this.props.windowState.get('autofillCreditCardDetail')
     const noScriptIsVisible = this.props.windowState.getIn(['ui', 'noScriptInfo', 'isVisible'])
-    const activeTab = tabUtil.activeTab(this.props.appState, this.props.windowState)
+    const activeTab = tabState.getActiveTabValue(this.props.appState, getCurrentWindowId())
     const releaseNotesIsVisible = this.props.windowState.getIn(['ui', 'releaseNotes', 'isVisible'])
     const checkDefaultBrowserDialogIsVisible =
       isFocused() && defaultBrowserState.shouldDisplayDialog(this.props.appState)
@@ -982,7 +982,7 @@ class Main extends ImmutableComponent {
                 allSiteSettings={allSiteSettings}
                 frameSiteSettings={this.frameSiteSettings(frame.get('location'))}
                 onFindHide={this.onFindHide}
-                enableNoScript={siteSettingsState.isNoScriptEnabled(this.frameSiteSettings(frame.get('location')), this.props.appState)}
+                enableNoScript={siteSettingsState.isNoScriptEnabled(this.props.appState, this.frameSiteSettings(frame.get('location')))}
                 braveryDefaults={braveryDefaults}
                 isPreview={frame.get('key') === this.props.windowState.get('previewFrameKey')}
                 isActive={frameStateUtil.isFrameKeyActive(this.props.windowState, frame.get('key'))}