Merge pull request #8266 from brave/redux-navbar

convert navigationBar to redux component

Author: bridiver

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')
@@ -14,7 +14,7 @@ const siteTags = require('../../../../js/constants/siteTags')
 const messages = require('../../../../js/constants/messages')
 const settings = require('../../../../js/constants/settings')
 const ipc = require('electron').ipcRenderer
-const {isSourceAboutUrl, getBaseUrl} = require('../../../../js/lib/appUrlUtil')
+const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil')
 const AddEditBookmarkHanger = require('../addEditBookmarkHanger')
 const siteUtil = require('../../../../js/state/siteUtil')
 const eventUtil = require('../../../../js/lib/eventUtil')
@@ -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)
@@ -121,34 +126,38 @@ class NavigationBar extends ImmutableComponent {
       )
   }
 
-  get locationId () {
-    return getBaseUrl(this.props.location)
-  }
-
-  get publisherId () {
-    return this.props.locationInfo && this.props.locationInfo.getIn([this.locationId, 'publisher'])
-  }
-
-  get visiblePublisher () {
-    const hostPattern = UrlUtil.getHostPattern(this.publisherId)
-    const hostSettings = this.props.siteSettings.get(hostPattern)
-    const ledgerPaymentsShown = hostSettings && hostSettings.get('ledgerPaymentsShown')
-    return typeof ledgerPaymentsShown === 'boolean'
-      ? ledgerPaymentsShown
-      : true
-  }
-
-  get isPublisherButtonEnabled () {
-    return getSetting(settings.PAYMENTS_ENABLED) &&
-      UrlUtil.isHttpOrHttps(this.props.location) &&
-      this.visiblePublisher
-  }
-
   componentDidMount () {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
     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 activeTabId = tabState.getActiveTabId(state, getCurrentWindowId())
+    const props = {}
+
+    props.navbar = activeFrame.get('navbar')
+    props.sites = state.get('sites')
+    props.activeFrameKey = activeFrame.get('key')
+    props.location = activeFrame.get('location') || ''
+    props.title = activeFrame.get('title') || ''
+    props.partitionNumber = activeFrame.get('partitionNumber') || 0
+    props.isSecure = activeFrame.getIn(['security', 'isSecure'])
+    props.loading = activeFrame.get('loading')
+    props.bookmarkDetail = windowState.get('bookmarkDetail')
+    props.mouseInTitlebar = windowState.getIn(['ui', 'mouseInTitlebar'])
+    props.enableNoScript = ownProps.enableNoScript
+    props.settings = state.get('settings')
+    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) {
@@ -214,26 +223,11 @@ class NavigationBar extends ImmutableComponent {
           : null
         }
       </div>
-      <UrlBar ref='urlBar'
-        activeFrameKey={this.props.activeFrameKey}
-        canGoForward={this.props.canGoForward}
-        searchDetail={this.props.searchDetail}
-        loading={this.loading}
-        location={this.props.location}
-        title={this.props.title}
-        history={this.props.history}
-        isSecure={this.props.isSecure}
-        hasLocationValueSuffix={this.props.hasLocationValueSuffix}
-        startLoadTime={this.props.startLoadTime}
-        endLoadTime={this.props.endLoadTime}
+      <UrlBar
         titleMode={this.titleMode}
-        urlbar={this.props.navbar.get('urlbar')}
         onStop={this.onStop}
         menubarVisible={this.props.menubarVisible}
-        noBorderRadius={this.isPublisherButtonEnabled}
-        activeTabShowingMessageBox={this.props.activeTabShowingMessageBox}
         enableNoScript={this.props.enableNoScript}
-        scriptsBlocked={this.props.scriptsBlocked}
         />
       {
         isSourceAboutUrl(this.props.location)
@@ -253,4 +247,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/components/navigation/urlBar.js

@@ -4,8 +4,9 @@
 
 const React = require('react')
 
-const ImmutableComponent = require('../../../../js/components/immutableComponent')
+const ReduxComponent = require('../reduxComponent')
 const {StyleSheet, css} = require('aphrodite')
+const Immutable = require('immutable')
 
 const windowActions = require('../../../../js/actions/windowActions')
 const appActions = require('../../../../js/actions/appActions')
@@ -18,20 +19,26 @@ const ipc = require('electron').ipcRenderer
 const UrlBarSuggestions = require('./urlBarSuggestions')
 const UrlBarIcon = require('./urlBarIcon')
 const messages = require('../../../../js/constants/messages')
+const siteSettings = require('../../../../js/state/siteSettings')
 const {getSetting} = require('../../../../js/settings')
 const settings = require('../../../../js/constants/settings')
 const contextMenus = require('../../../../js/contextMenus')
 const windowStore = require('../../../../js/stores/windowStore')
 const UrlUtil = require('../../../../js/lib/urlutil')
 const {eventElHasAncestorWithClasses, isForSecondaryAction} = require('../../../../js/lib/eventUtil')
-const {isUrl, isIntermediateAboutPage} = require('../../../../js/lib/appUrlUtil')
+const {getBaseUrl, isUrl, isIntermediateAboutPage} = require('../../../../js/lib/appUrlUtil')
+const {getCurrentWindowId} = require('../../currentWindow')
 
 // Icons
 const iconNoScript = require('../../../../img/url-bar-no-script.svg')
 
-class UrlBar extends ImmutableComponent {
-  constructor () {
-    super()
+// State
+const frameStateUtil = require('../../../../js/state/frameStateUtil')
+const tabState = require('../../../common/state/tabState')
+
+class UrlBar extends React.Component {
+  constructor (props) {
+    super(props)
     this.onFocus = this.onFocus.bind(this)
     this.onBlur = this.onBlur.bind(this)
     this.onKeyDown = this.onKeyDown.bind(this)
@@ -505,6 +512,47 @@ class UrlBar extends ImmutableComponent {
     contextMenus.onUrlBarContextMenu(this.props.searchDetail, this.activeFrame, e)
   }
 
+  mergeProps (state, dispatchProps, ownProps) {
+    const windowState = state.get('currentWindow')
+    const activeFrame = frameStateUtil.getActiveFrame(windowState) || Immutable.Map()
+    const activeTabId = tabState.getActiveTabId(state, getCurrentWindowId())
+
+    const location = activeFrame.get('location') || ''
+    const baseUrl = getBaseUrl(location)
+
+    // TODO(bridiver) - this definitely needs a helper
+    const publisherId = state.getIn(['locationInfo', baseUrl, 'publisher'])
+    const hostPattern = UrlUtil.getHostPattern(publisherId)
+    const hostSettings = siteSettings.getSiteSettingsForHostPattern(state.get('settings'), hostPattern)
+    const ledgerPaymentsShown = hostSettings && hostSettings.get('ledgerPaymentsShown')
+    const visiblePublisher = typeof ledgerPaymentsShown === 'boolean' ? ledgerPaymentsShown : true
+    const isPublisherButtonEnabled = getSetting(settings.PAYMENTS_ENABLED) &&
+        UrlUtil.isHttpOrHttps(location) && visiblePublisher
+
+    const props = {}
+
+    props.activeFrameKey = activeFrame.get('key')
+    props.location = location
+    props.title = activeFrame.get('title') || ''
+    props.scriptsBlocked = activeFrame.getIn(['noScript', 'blocked'])
+    props.history = activeFrame.get('history') || new Immutable.List()
+    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.searchDetail = windowState.get('searchDetail')
+    props.enableNoScript = ownProps.enableNoScript
+    props.noScriptIsVisible = windowState.getIn(['ui', 'noScriptInfo', 'isVisible']) || false
+    props.menubarVisible = ownProps.menubarVisible
+    props.activeTabShowingMessageBox = tabState.isShowingMessageBox(state, activeTabId)
+    props.noBorderRadius = isPublisherButtonEnabled
+    props.urlbar = activeFrame.getIn(['navbar', 'urlbar'])
+    props.onStop = ownProps.onStop
+    props.titleMode = ownProps.titleMode
+    return props
+  }
+
   render () {
     return <form
       className={cx({
@@ -605,4 +653,4 @@ const styles = StyleSheet.create({
   }
 })
 
-module.exports = UrlBar
+module.exports = ReduxComponent.connect(UrlBar)