Frame -> redux component

Resovles #8392

Auditors: @bridiver @bbondy

Test plan:
- test should be green

app/common/state/siteSettingsState.js

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

app/common/state/siteState.js

@@ -0,0 +1,18 @@
+const assert = require('assert')
+const { makeImmutable, isMap, isList } = require('./immutableUtil')
+
+const validateState = function (state) {
+  state = makeImmutable(state)
+  assert.ok(isMap(state), 'state must be an Immutable.Map')
+  assert.ok(isList(state.get('sites')), 'state must contain an Immutable.List of sites')
+  return state
+}
+
+const siteState = {
+  getSites: (state) => {
+    state = validateState(state)
+    return state.get('sites')
+  }
+}
+
+module.exports = siteState

app/common/state/tabMessageBoxState.js

@@ -2,11 +2,26 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+const assert = require('assert')
 const tabState = require('./tabState')
-const {makeImmutable} = require('./immutableUtil')
+const {makeImmutable, isList, isMap} = require('./immutableUtil')
 
 const messageBoxDetail = 'messageBoxDetail'
 
+const validateState = function (state) {
+  state = makeImmutable(state)
+  assert.ok(isMap(state), 'state must be an Immutable.Map')
+  assert.ok(isList(state.get('tabs')), 'state must contain an Immutable.List of tabs')
+  return state
+}
+
+const validateId = function (propName, id) {
+  assert.ok(id, `${propName} cannot be null`)
+  id = parseInt(id)
+  assert.ok(id === -1 || id > 0, `${propName} must be positive`)
+  return id
+}
+
 const tabMessageBoxState = {
   show: (state, action) => {
     state = makeImmutable(state)
@@ -56,6 +71,34 @@ const tabMessageBoxState = {
 
     tabValue = tabValue.delete(messageBoxDetail)
     return tabState.updateTab(state, {tabValue, replace: true})
+  },
+
+  getPropertyByTabId: (state, tabId, property) => {
+    state = validateState(state)
+    tabId = validateId('tabId', tabId)
+    const tab = tabState.getByTabId(state, tabId)
+
+    if (tab) {
+      return tab.getIn([messageBoxDetail, property])
+    }
+
+    return undefined
+  },
+
+  getSuppress: (state, tabId) => {
+    return tabMessageBoxState.getPropertyByTabId(state, tabId, 'suppress') || false
+  },
+
+  getShowSuppress: (state, tabId) => {
+    return tabMessageBoxState.getPropertyByTabId(state, tabId, 'showSuppress') || false
+  },
+
+  getTitle: (state, tabId) => {
+    return tabMessageBoxState.getPropertyByTabId(state, tabId, 'title') || ''
+  },
+
+  getButtons: (state, tabId) => {
+    return tabMessageBoxState.getPropertyByTabId(state, tabId, 'buttons') || makeImmutable(['ok'])
   }
 }
 

app/renderer/components/common/messageBox.js

@@ -3,20 +3,34 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const ImmutableComponent = require('../immutableComponent')
+const {StyleSheet, css} = require('aphrodite')
+
+// Components
+const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../../../../js/components/dialog')
 const Button = require('../../../../js/components/button')
 const SwitchControl = require('../../../../js/components/switchControl')
+
+// Actions
 const appActions = require('../../../../js/actions/appActions')
+
+// Constants
 const KeyCodes = require('../../../common/constants/keyCodes')
 const config = require('../../../../js/constants/config')
+
+// State
+const tabState = require('../../../common/state/tabState')
+const tabMessageBoxState = require('../../../common/state/tabMessageBoxState')
+const frameStateUtil = require('../../../../js/state/frameStateUtil.js')
+
+// Utils
 const {makeImmutable} = require('../../../common/state/immutableUtil')
 
-const {StyleSheet, css} = require('aphrodite')
+// Styles
 const commonStyles = require('../styles/commonStyles')
 const globalStyles = require('../styles/global')
 
-class MessageBox extends ImmutableComponent {
+class MessageBox extends React.Component {
   constructor () {
     super()
     this.onKeyDown = this.onKeyDown.bind(this)
@@ -26,105 +40,106 @@ class MessageBox extends ImmutableComponent {
   componentWillMount () {
     document.addEventListener('keydown', this.onKeyDown)
   }
+
   componentWillUnmount () {
     document.removeEventListener('keydown', this.onKeyDown)
   }
 
-  get tabId () {
-    return this.props.tabId || ''
-  }
-
-  get title () {
-    const msgBoxTitle = (this.props.detail && this.props.detail.get('title')) || ''
-    return msgBoxTitle.replace(config.braveExtensionId, 'Brave')
-  }
-
-  get message () {
-    return (this.props.detail && this.props.detail.get('message')) || ''
-  }
-
-  get buttons () {
-    return (this.props.detail && this.props.detail.get('buttons')) || makeImmutable(['ok'])
-  }
-
-  get cancelId () {
-    return this.props.detail && this.props.detail.get('cancelId')
-  }
-
-  get suppress () {
-    return (this.props.detail && this.props.detail.get('suppress')) || false
-  }
-
-  get showSuppress () {
-    return (this.props.detail && this.props.detail.get('showSuppress')) || false
-  }
-
   onKeyDown (e) {
     if (this.props.isActive) {
       switch (e.keyCode) {
         case KeyCodes.ENTER:
-          this.onDismiss(this.tabId)
+          this.onDismiss(this.props.tabId)
           break
         case KeyCodes.ESC:
-          this.onDismiss(this.tabId, this.cancelId)
+          this.onDismiss(this.props.tabId, this.props.cancelId)
           break
       }
     }
   }
 
-  onSuppressChanged (e) {
-    const detail = this.props.detail.toJS()
-    detail.suppress = !detail.suppress
-    appActions.tabMessageBoxUpdated(this.tabId, detail)
+  onSuppressChanged () {
+    const detail = {
+      buttons: this.props.buttons,
+      cancelId: this.props.cancelId,
+      message: this.props.message,
+      showSuppress: this.props.showSuppress,
+      suppress: !this.props.suppress,
+      title: this.props.title
+    }
+
+    appActions.tabMessageBoxUpdated(this.props.tabId, detail)
   }
 
   onDismiss (tabId, buttonId) {
     const response = {
-      suppress: this.suppress,
+      suppress: this.props.suppress,
       result: true
     }
 
-    if (typeof this.cancelId === 'number') {
-      response.result = buttonId !== this.cancelId
+    if (typeof this.props.cancelId === 'number') {
+      response.result = buttonId !== this.props.cancelId
     }
 
-    appActions.tabMessageBoxDismissed(this.tabId, response)
+    appActions.tabMessageBoxDismissed(tabId, response)
   }
 
   get messageBoxButtons () {
-    const buttons = []
+    const buttons = this.props.buttons || makeImmutable(['ok'])
+    const newButtons = []
 
-    for (let index = (this.buttons.size - 1); index > -1; index--) {
-      buttons.push(<Button l10nId={this.buttons.get(index)}
+    for (let index = (buttons.size - 1); index > -1; index--) {
+      newButtons.push(<Button l10nId={buttons.get(index)}
         className={index === 0 ? 'primaryButton' : 'whiteButton'}
-        onClick={this.onDismiss.bind(this, this.tabId, index)} />)
+        onClick={this.onDismiss.bind(this, this.props.tabId, index)} />)
     }
 
-    return buttons
+    return newButtons
+  }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const tabId = ownProps.tabId
+    const tab = tabState.getByTabId(state, tabId)
+    const messageBoxDetail = tab.get('messageBoxDetail')
+
+    const props = {}
+    // used in renderer
+    props.tabId = tabId
+    props.message = messageBoxDetail.get('message')
+    props.suppress = tabMessageBoxState.getSuppress(state, tabId)
+    props.title = tabMessageBoxState.getTitle(state, tabId)
+    props.showSuppress = tabMessageBoxState.getShowSuppress(state, tabId)
+    props.buttons = tabMessageBoxState.getButtons(state, tabId)
+
+    // used in other functions
+    props.cancelId = messageBoxDetail.get('cancelId')
+    props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, tab.getIn(['frame', 'key']))
+
+    return Object.assign({}, ownProps, props)
   }
 
   render () {
     return <Dialog className={css(styles.dialog)}>
-      <div data-test-id={'msgBoxTab_' + this.tabId}
-        onClick={this.onClick}
+      <div data-test-id={'msgBoxTab_' + this.props.tabId}
         onKeyDown={this.onKeyDown}
         className={css(
           commonStyles.flyoutDialog,
           styles.container
         )}>
         <div className={css(styles.title)} data-test-id='msgBoxTitle'>
-          {this.title}
+          {this.props.title.replace(config.braveExtensionId, 'Brave')}
         </div>
         <div className={css(styles.body)} data-test-id='msgBoxMessage'>
-          {this.message}
+          {this.props.message}
         </div>
         {
-          this.showSuppress
+          this.props.showSuppress
             ? <SwitchControl
               // TODO: refactor SwitchControl
               className={css(commonStyles.noPaddingLeft)}
               rightl10nId='preventMoreAlerts'
-              checkedOn={this.suppress}
+              checkedOn={this.props.suppress}
               onClick={this.onSuppressChanged} />
             : null
         }
@@ -163,4 +178,4 @@ const styles = StyleSheet.create({
   }
 })
 
-module.exports = MessageBox
+module.exports = ReduxComponent.connect(MessageBox)

app/renderer/lib/domUtil.js

@@ -0,0 +1,7 @@
+module.exports.createWebView = () => {
+  return document.createElement('webview')
+}
+
+module.exports.appendChild = (element, child) => {
+  element.appendChild(child)
+}

docs/windowActions.md

@@ -121,15 +121,15 @@ Unlike setLocation and loadUrl, this does not modify the state of src and locati
 
 
 
-### setFindbarShown(frameProps, shown) 
+### setFindbarShown(frameKey, shown) 
 
 Shows/hides the find-in-page bar.
 
 **Parameters**
 
-**frameProps**: `Object`, The frame properties to modify
+**frameKey**: `number`, Key of the frame that we want to modify
 
-**shown**: `boolean`, Whether to show the findbar
+**shown**: `boolean`, Whether to show the find bar
 
 
 
@@ -452,13 +452,13 @@ Dispatches a message to set the search engine details.
 
 
 
-### setFindDetail(frameProps, findDetail) 
+### setFindDetail(frameKey, findDetail) 
 
 Dispatches a message to set the find-in-page details.
 
 **Parameters**
 
-**frameProps**: `Object`, Properties of the frame in question
+**frameKey**: `Object`, Frame key of the frame in question
 
 **findDetail**: `Object`, the find details
 

js/actions/windowActions.js

@@ -143,13 +143,13 @@ const windowActions = {
 
   /**
    * Shows/hides the find-in-page bar.
-   * @param {Object} frameProps - The frame properties to modify
-   * @param {boolean} shown - Whether to show the findbar
+   * @param {number} frameKey - Key of the frame that we want to modify
+   * @param {boolean} shown - Whether to show the find bar
    */
-  setFindbarShown: function (frameProps, shown) {
+  setFindbarShown: function (frameKey, shown) {
     dispatch({
       actionType: windowConstants.WINDOW_SET_FINDBAR_SHOWN,
-      frameProps,
+      frameKey,
       shown
     })
   },
@@ -545,13 +545,13 @@ const windowActions = {
 
   /**
    * Dispatches a message to set the find-in-page details.
-   * @param {Object} frameProps - Properties of the frame in question
+   * @param {Object} frameKey - Frame key of the frame in question
    * @param {Object} findDetail - the find details
    */
-  setFindDetail: function (frameProps, findDetail) {
+  setFindDetail: function (frameKey, findDetail) {
     dispatch({
       actionType: windowConstants.WINDOW_SET_FIND_DETAIL,
-      frameProps,
+      frameKey,
       findDetail
     })
   },