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,28 @@ const api = {
     // TODO(bridiver) handle restoring state
     state = makeImmutable(state)
     return state.delete('windows')
+  },
+
+  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 Button = require('../../../js/components/button')
 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,31 +49,54 @@ 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)}>
-      <Button iconClass='extensionBrowserAction'
+      <Button
+        iconClass='extensionBrowserAction'
         l10nId='browserActionButton'
-        l10nArgs={{ name: this.props.browserAction.get('title') }}
+        l10nArgs={{ name: this.props.title }}
         className={css(styles.extensionButton)}
         inlineStyles={{
-          backgroundImage: extensionState.browserActionBackgroundImage(this.props.browserAction, this.props.tabId)
+          backgroundImage: this.props.image
         }}
         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'
@@ -73,10 +106,8 @@ const styles = StyleSheet.create({
     backgroundSize: 'contain',
     height: '17px',
     margin: '4px 0 0 0',
-    opacity: '0.85',
+    opacity: 0.85,
     backgroundRepeat: 'no-repeat',
     backgroundPosition: 'center'
   }
 })
-
-module.exports = BrowserAction