Refactors Navigator and BrowserAction into redux components

Resovles brave#8651

Auditors: @bsclifton @bridiver

Test Plan:
- test if navigation buttons are working correctly
- test if extension icon are displayed correctly and text is working for them

app/common/state/siteSettingsState.js

@@ -1,17 +1,18 @@
 const appConfig = require('../../../js/constants/appConfig')
 const siteSettings = require('../../../js/state/siteSettings')
 
-const siteSettingsState = {
+const api = {
   getAllSiteSettings: (state, isPrivate) => {
     if (isPrivate) {
       return state.get('siteSettings').mergeDeep(state.get('temporarySiteSettings'))
     }
     return state.get('siteSettings')
   },
 
-  isNoScriptEnabled (state, settings) {
+  isNoScriptEnabled (state, isPrivate) {
+    const settings = api.getAllSiteSettings(state, isPrivate)
     return siteSettings.activeSettings(settings, state, appConfig).noScript === true
   }
 }
 
-module.exports = siteSettingsState
+module.exports = api

app/common/state/windowState.js

@@ -4,6 +4,8 @@
 
 const { makeImmutable, isMap, isList } = require('./immutableUtil')
 const assert = require('assert')
+const defaultBrowserState = require('./defaultBrowserState')
+const shieldState = require('./shieldState')
 
 // TODO(bridiver) - make these generic validation functions
 const validateId = function (propName, id) {
@@ -155,6 +157,30 @@ const api = {
     // TODO(bridiver) handle restoring state
     state = makeImmutable(state)
     return state.delete('windows')
+  },
+
+  // TODO (nejc) we should only pass in one state
+  // refactor when window state is merged into app state
+  shouldAllowWindowDrag: (state, windowState, frame, isFocused) => {
+    const braveryPanelIsVisible = shieldState.braveShieldsEnabled(frame) &&
+      windowState.get('braveryPanelDetail')
+    const checkDefaultBrowserDialogIsVisible = isFocused &&
+      defaultBrowserState.shouldDisplayDialog(state)
+
+    return !state.get('contextMenuDetail') &&
+      !windowState.get('bookmarkDetail') &&
+      !windowState.getIn(['ui', 'siteInfo', 'isVisible']) &&
+      !braveryPanelIsVisible &&
+      !windowState.getIn(['ui', 'isClearBrowsingDataPanelVisible']) &&
+      !windowState.get('importBrowserDataDetail') &&
+      !windowState.getIn(['widevinePanelDetail', 'shown']) &&
+      !windowState.get('autofillAddressDetail') &&
+      !windowState.get('autofillCreditCardDetail') &&
+      !windowState.getIn(['ui', 'releaseNotes', 'isVisible']) &&
+      !checkDefaultBrowserDialogIsVisible &&
+      !windowState.getIn(['ui', 'noScriptInfo', 'isVisible']) &&
+      frame && !frame.getIn(['security', 'loginRequiredDetail']) &&
+      !windowState.getIn(['ui', 'menubar', 'selectedIndex'])
   }
 }
 

app/renderer/components/browserAction.js

@@ -3,16 +3,26 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('./immutableComponent')
 const electron = require('electron')
 const ipc = electron.ipcRenderer
+const {StyleSheet, css} = require('aphrodite')
+
+// Components
+const ReduxComponent = require('./reduxComponent')
 const BrowserButton = require('./common/browserButton')
 const BrowserActionBadge = require('../../renderer/components/browserActionBadge')
+
+// State
 const extensionState = require('../../common/state/extensionState')
+const tabState = require('../../common/state/tabState')
+
+// Actions
 const windowActions = require('../../../js/actions/windowActions')
-const {StyleSheet, css} = require('aphrodite')
 
-class BrowserAction extends ImmutableComponent {
+// Utils
+const {getCurrentWindowId} = require('../currentWindow')
+
+class BrowserAction extends React.Component {
   constructor () {
     super()
     this.onClick = this.onClick.bind(this)
@@ -39,39 +49,59 @@ class BrowserAction extends ImmutableComponent {
       offsetX: e.nativeEvent.offsetX,
       offsetY: e.nativeEvent.offsetY
     }
-    ipc.send('chrome-browser-action-clicked', this.props.extensionId, this.props.tabId, this.props.browserAction.get('title'), props)
+    ipc.send('chrome-browser-action-clicked', this.props.extensionId, this.props.activeTabId, this.props.title, props)
+  }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const activeTab = tabState.getActiveTabValue(state, getCurrentWindowId())
+    const activeTabId = activeTab && activeTab.get('tabId')
+    const browserActions = extensionState.getBrowserActionByTabId(state, ownProps.extensionId, activeTabId)
+
+    const props = {}
+    // used in renderer
+    props.title = browserActions.get('title')
+    props.text = browserActions.get('text')
+    props.color = browserActions.get('color')
+    props.image = extensionState.browserActionBackgroundImage(browserActions, activeTabId)
+
+    // used in other functions
+    props.popupWindowSrc = currentWindow.getIn(['popupWindowDetail', 'src'])
+    props.activeTabId = activeTabId
+
+    return Object.assign({}, ownProps, props)
   }
 
   render () {
-    const browserBadgeText = this.props.browserAction.get('text')
-    const browserBadgeColor = this.props.browserAction.get('color')
     // TODO(bridiver) should have some visual notification of hover/press
     return <div className={css(styles.browserActionButton)}>
-      <BrowserButton extensionItem
+      <BrowserButton
+        extensionItem
         l10nId='browserActionButton'
         testId='extensionBrowserAction'
-        l10nArgs={{ name: this.props.browserAction.get('title') }}
+        l10nArgs={{ name: this.props.title }}
         inlineStyles={{
-          backgroundImage: extensionState
-            .browserActionBackgroundImage(this.props.browserAction, this.props.tabId),
+          backgroundImage: this.props.image,
           backgroundPosition: 'center',
           backgroundSize: 'contain',
           backgroundRepeat: 'no-repeat'
         }}
         dataButtonValue={this.props.extensionId}
-        onClick={this.onClick} />
-      { browserBadgeText
-        ? <BrowserActionBadge text={browserBadgeText} color={browserBadgeColor} />
+        onClick={this.onClick}
+      />
+      {
+        this.props.text
+        ? <BrowserActionBadge text={this.props.text} color={this.props.color} />
         : null
       }
     </div>
   }
 }
 
+module.exports = ReduxComponent.connect(BrowserAction)
+
 const styles = StyleSheet.create({
   browserActionButton: {
     position: 'relative'
   }
 })
-
-module.exports = BrowserAction

app/renderer/components/navigation/navigationBar.js

@@ -29,6 +29,8 @@ const {getCurrentWindowId} = require('../../currentWindow')
 // State
 const tabState = require('../../../common/state/tabState')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
+const menuBarState = require('../../../common/state/menuBarState')
+const siteSettingsState = require('../../../common/state/siteSettingsState')
 
 class NavigationBar extends React.Component {
   constructor (props) {
@@ -125,6 +127,7 @@ class NavigationBar extends React.Component {
     const loading = activeFrame.get('loading')
     const location = activeFrame.get('location') || ''
     const navbar = activeFrame.get('navbar') || Immutable.Map()
+    const isPrivate = activeFrame.get('isPrivate') || false
 
     const hasTitle = title && location && title !== location.replace(/^https?:\/\//, '')
     const titleMode = activeTabShowingMessageBox ||
@@ -151,9 +154,9 @@ class NavigationBar extends React.Component {
     props.loading = loading
     props.bookmarkDetail = bookmarkDetail
     props.mouseInTitlebar = mouseInTitlebar
-    props.enableNoScript = ownProps.enableNoScript
+    props.enableNoScript = siteSettingsState.isNoScriptEnabled(state, isPrivate)
     props.settings = state.get('settings')
-    props.menubarVisible = ownProps.menubarVisible
+    props.menubarVisible = menuBarState.isMenuBarVisible(windowState)
     props.siteSettings = state.get('siteSettings')
     props.synopsis = state.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map()
     props.activeTabShowingMessageBox = activeTabShowingMessageBox