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, frame) => {
     if (frame && frame.get('isPrivate')) {
       return state.get('siteSettings').mergeDeep(state.get('temporarySiteSettings'))
     }
     return state.get('siteSettings')
   },
 
-  isNoScriptEnabled (state, settings) {
+  isNoScriptEnabled (state, frame) {
+    const settings = api.getAllSiteSettings(state, frame)
     return siteSettings.activeSettings(settings, state, appConfig).noScript === true
   }
 }
 
-module.exports = siteSettingsState
+module.exports = api

app/renderer/components/browserAction.js

@@ -3,16 +3,18 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('./immutableComponent')
+const ReduxComponent = require('./reduxComponent')
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const Button = require('../../../js/components/button')
 const BrowserActionBadge = require('../../renderer/components/browserActionBadge')
 const extensionState = require('../../common/state/extensionState')
 const windowActions = require('../../../js/actions/windowActions')
+var tabState = require('../../common/state/tabState.js')
 const {StyleSheet, css} = require('aphrodite')
+const {getCurrentWindowId} = require('../currentWindow')
 
-class BrowserAction extends ImmutableComponent {
+class BrowserAction extends React.Component {
   constructor () {
     super()
     this.onClick = this.onClick.bind(this)
@@ -39,31 +41,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'
@@ -78,5 +103,3 @@ const styles = StyleSheet.create({
     backgroundPosition: 'center'
   }
 })
-
-module.exports = BrowserAction