From 1b1998fe6a85b0c26b687e8ec32e371954758a0b Mon Sep 17 00:00:00 2001
From: NejcZdovc <nejc.zdovc@3zsistemi.si>
Date: Tue, 11 Apr 2017 13:49:35 +0200
Subject: [PATCH] Frame -> redux component

Resovles #8392

Auditors: @bridiver @bbondy

Test plan:
- test should be green
---
 app/common/state/siteSettingsState.js         |  15 +-
 app/common/state/siteState.js                 |  18 ++
 app/common/state/tabMessageBoxState.js        |  45 ++-
 app/renderer/components/common/messageBox.js  | 123 ++++----
 app/renderer/lib/domUtil.js                   |   7 +
 docs/windowActions.md                         |  10 +-
 js/actions/windowActions.js                   |  14 +-
 js/components/findbar.js                      |   6 +-
 js/components/frame.js                        | 221 +++++++++-----
 js/components/main.js                         |  54 +---
 js/state/frameStateUtil.js                    |  15 +-
 js/stores/windowStore.js                      |  16 +-
 .../common/state/tabMessageBoxStateTest.js    | 108 ++++++-
 .../app/renderer/components/messageBoxTest.js | 269 +++---------------
 test/unit/js/components/frameTest.js          |  75 ++++-
 15 files changed, 562 insertions(+), 434 deletions(-)
 create mode 100644 app/common/state/siteState.js
 create mode 100644 app/renderer/lib/domUtil.js

diff --git a/app/common/state/siteSettingsState.js b/app/common/state/siteSettingsState.js
index 410b19dfacc..a391e65854b 100644
--- a/app/common/state/siteSettingsState.js
+++ b/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
diff --git a/app/common/state/siteState.js b/app/common/state/siteState.js
new file mode 100644
index 00000000000..65d6c476a12
--- /dev/null
+++ b/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
diff --git a/app/common/state/tabMessageBoxState.js b/app/common/state/tabMessageBoxState.js
index 74a3c79a46e..a0d5b67606e 100644
--- a/app/common/state/tabMessageBoxState.js
+++ b/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'])
   }
 }
 
diff --git a/app/renderer/components/common/messageBox.js b/app/renderer/components/common/messageBox.js
index 30389810077..5e38ea8cefe 100644
--- a/app/renderer/components/common/messageBox.js
+++ b/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)
diff --git a/app/renderer/lib/domUtil.js b/app/renderer/lib/domUtil.js
new file mode 100644
index 00000000000..fc0d372c92a
--- /dev/null
+++ b/app/renderer/lib/domUtil.js
@@ -0,0 +1,7 @@
+module.exports.createWebView = () => {
+  return document.createElement('webview')
+}
+
+module.exports.appendChild = (element, child) => {
+  element.appendChild(child)
+}
diff --git a/docs/windowActions.md b/docs/windowActions.md
index ef980567702..e2b0f3ffd19 100644
--- a/docs/windowActions.md
+++ b/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
 
diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js
index dde194230f6..1f1ee6c2dc0 100644
--- a/js/actions/windowActions.js
+++ b/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
     })
   },
diff --git a/js/components/findbar.js b/js/components/findbar.js
index d021ddcceb6..0a433918c91 100644
--- a/js/components/findbar.js
+++ b/js/components/findbar.js
@@ -33,14 +33,14 @@ class FindBar extends ImmutableComponent {
   }
 
   onInput (e) {
-    windowActions.setFindDetail(this.frame, Immutable.fromJS({
+    windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
       searchString: e.target.value,
       caseSensitivity: this.isCaseSensitive
     }))
   }
 
   onCaseSensitivityChange (e) {
-    windowActions.setFindDetail(this.frame, Immutable.fromJS({
+    windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
       searchString: this.searchString,
       caseSensitivity: !this.isCaseSensitive
     }))
@@ -134,7 +134,7 @@ class FindBar extends ImmutableComponent {
 
   onClear () {
     this.searchInput.value = ''
-    windowActions.setFindDetail(this.frame, Immutable.fromJS({
+    windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
       searchString: '',
       caseSensitivity: this.isCaseSensitive
     }))
diff --git a/js/components/frame.js b/js/components/frame.js
index fefc271b8d1..07141b7a891 100644
--- a/js/components/frame.js
+++ b/js/components/frame.js
@@ -3,50 +3,71 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const urlParse = require('../../app/common/urlParse')
-const windowActions = require('../actions/windowActions')
+const Immutable = require('immutable')
+const ipc = require('electron').ipcRenderer
+
+// Actions
 const appActions = require('../actions/appActions')
+const windowActions = require('../actions/windowActions')
 const webviewActions = require('../actions/webviewActions')
-const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
-const Immutable = require('immutable')
-const cx = require('../lib/classSet')
-const siteUtil = require('../state/siteUtil')
+const getSetting = require('../settings').getSetting
+
+// Components
+const ReduxComponent = require('../../app/renderer/components/reduxComponent')
+const FullScreenWarning = require('../../app/renderer/components/fullScreenWarning')
+const MessageBox = require('../../app/renderer/components/common/messageBox')
+
+// Store
+const windowStore = require('../stores/windowStore')
+const appStoreRenderer = require('../stores/appStoreRenderer')
+
+// State
+const siteSettings = require('../state/siteSettings')
+const siteSettingsState = require('../../app/common/state/siteSettingsState')
+const tabState = require('../../app/common/state/tabState')
+
+// Utils
 const frameStateUtil = require('../state/frameStateUtil')
+const siteUtil = require('../state/siteUtil')
 const UrlUtil = require('../lib/urlutil')
-const messages = require('../constants/messages')
+const cx = require('../lib/classSet')
+const urlParse = require('../../app/common/urlParse')
 const contextMenus = require('../contextMenus')
-const ipc = require('electron').ipcRenderer
-const FullScreenWarning = require('../../app/renderer/components/fullScreenWarning')
-const debounce = require('../lib/debounce')
-const getSetting = require('../settings').getSetting
-const config = require('../constants/config')
-const settings = require('../constants/settings')
-const {aboutUrls, isSourceMagnetUrl, isSourceAboutUrl, isTargetAboutUrl, getTargetAboutUrl, getBaseUrl, isIntermediateAboutPage} = require('../lib/appUrlUtil')
+const domUtil = require('../../app/renderer/lib/domUtil')
+const {
+  aboutUrls,
+  isSourceMagnetUrl,
+  isSourceAboutUrl,
+  isTargetAboutUrl,
+  getTargetAboutUrl,
+  getBaseUrl,
+  isIntermediateAboutPage
+} = require('../lib/appUrlUtil')
 const {isFrameError, isAborted} = require('../../app/common/lib/httpUtil')
-const locale = require('../l10n')
-const appConfig = require('../constants/appConfig')
-const {getSiteSettingsForHostPattern} = require('../state/siteSettings')
 const {isFocused} = require('../../app/renderer/currentWindow')
-const windowStore = require('../stores/windowStore')
-const appStoreRenderer = require('../stores/appStoreRenderer')
-const siteSettings = require('../state/siteSettings')
+const debounce = require('../lib/debounce')
+const locale = require('../l10n')
 const imageUtil = require('../lib/imageUtil')
-const MessageBox = require('../../app/renderer/components/common/messageBox')
 
+// Constants
+const settings = require('../constants/settings')
+const appConfig = require('../constants/appConfig')
+const messages = require('../constants/messages')
+const config = require('../constants/config')
+
+const pdfjsOrigin = `chrome-extension://${config.PDFJSExtensionId}/`
 const WEBRTC_DEFAULT = 'default'
 const WEBRTC_DISABLE_NON_PROXY = 'disable_non_proxied_udp'
 // Looks like Brave leaks true public IP from behind system proxy when this option
 // is on.
 // const WEBRTC_PUBLIC_ONLY = 'default_public_interface_only'
 
-const pdfjsOrigin = `chrome-extension://${config.PDFJSExtensionId}/`
-
 function isTorrentViewerURL (url) {
   const isEnabled = getSetting(settings.TORRENT_VIEWER_ENABLED)
   return isEnabled && isSourceMagnetUrl(url)
 }
 
-class Frame extends ImmutableComponent {
+class Frame extends React.Component {
   constructor () {
     super()
     this.onCloseFrame = this.onCloseFrame.bind(this)
@@ -97,13 +118,13 @@ class Frame extends ImmutableComponent {
   }
 
   runInsecureContent () {
-    const activeSiteSettings = getSiteSettingsForHostPattern(this.props.allSiteSettings, this.origin)
+    const activeSiteSettings = siteSettings.getSiteSettingsForHostPattern(this.props.allSiteSettings, this.origin)
     return activeSiteSettings === undefined
       ? false : activeSiteSettings.get('runInsecureContent')
   }
 
   allowRunningWidevinePlugin (url) {
-    if (!this.props.widevine || !this.props.widevine.get('enabled')) {
+    if (!this.props.isWidevineEnabled) {
       return false
     }
     const origin = url ? siteUtil.getOrigin(url) : this.origin
@@ -114,8 +135,7 @@ class Frame extends ImmutableComponent {
     if (!this.props.allSiteSettings) {
       return false
     }
-    const activeSiteSettings = getSiteSettingsForHostPattern(this.props.allSiteSettings,
-                                                             origin)
+    const activeSiteSettings = siteSettings.getSiteSettingsForHostPattern(this.props.allSiteSettings, origin)
     if (activeSiteSettings && typeof activeSiteSettings.get('widevine') === 'number') {
       return true
     }
@@ -125,8 +145,7 @@ class Frame extends ImmutableComponent {
   expireContentSettings (origin) {
     // Expired Flash settings should be deleted when the webview is
     // navigated or closed. Same for NoScript's allow-once option.
-    const activeSiteSettings = getSiteSettingsForHostPattern(this.props.allSiteSettings,
-                                                             origin)
+    const activeSiteSettings = siteSettings.getSiteSettingsForHostPattern(this.props.allSiteSettings, origin)
     if (!activeSiteSettings) {
       return
     }
@@ -155,12 +174,12 @@ class Frame extends ImmutableComponent {
   updateWebview (cb, prevProps, newSrc) {
     // lazy load webview
     if (!this.webview && !this.props.isActive && !this.props.isPreview &&
-        // allow force loading of new frames
-        this.props.unloaded === true &&
-        // don't lazy load about pages
-        !aboutUrls.get(getBaseUrl(this.props.src)) &&
-        // pinned tabs don't serialize their state so the icon is lost for lazy loading
-        !this.props.pinnedLocation) {
+      // allow force loading of new frames
+      this.props.unloaded === true &&
+      // don't lazy load about pages
+      !aboutUrls.get(getBaseUrl(this.props.src)) &&
+      // pinned tabs don't serialize their state so the icon is lost for lazy loading
+      !this.props.pinnedLocation) {
       return
     }
 
@@ -173,7 +192,7 @@ class Frame extends ImmutableComponent {
     // Create the webview dynamically because React doesn't whitelist all
     // of the attributes we need
     if (this.shouldCreateWebview()) {
-      this.webview = document.createElement('webview')
+      this.webview = domUtil.createWebView()
       this.webview.setAttribute('data-frame-key', this.props.frameKey)
 
       this.addEventListeners()
@@ -192,7 +211,7 @@ class Frame extends ImmutableComponent {
         this.webview.setAttribute('partition', frameStateUtil.getPartition(this.frame))
         this.webview.setAttribute('src', newSrc)
       }
-      this.webviewContainer.appendChild(this.webview)
+      domUtil.appendChild(this.webviewContainer, this.webview)
     } else {
       cb && cb(prevProps)
     }
@@ -229,7 +248,7 @@ class Frame extends ImmutableComponent {
   }
 
   get zoomLevel () {
-    const zoom = this.props.frameSiteSettings && this.props.frameSiteSettings.get('zoomLevel')
+    const zoom = this.props.siteZoomLevel
     appActions.removeSiteSetting(this.origin, 'zoomLevel', this.props.isPrivate)
     return zoom
   }
@@ -294,7 +313,7 @@ class Frame extends ImmutableComponent {
       // make sure the webview content updates to
       // match the fullscreen state of the frame
       if (prevProps.isFullScreen !== this.props.isFullScreen ||
-          (this.props.isFullScreen && !this.props.isActive)) {
+        (this.props.isFullScreen && !this.props.isActive)) {
         if (this.props.isFullScreen && this.props.isActive) {
           this.enterHtmlFullScreen()
         } else {
@@ -337,15 +356,15 @@ class Frame extends ImmutableComponent {
         // This can happen for pages which don't load properly.
         // Some examples are basic http auth and bookmarklets.
         // In this case both the user display and the user think they're on this.props.location.
-        if (this.tab.get('url') !== this.props.location &&
+        if (this.props.tabUrl !== this.props.location &&
           !this.isAboutPage() &&
           !isTorrentViewerURL(this.props.location)) {
           this.webview.loadURL(this.props.location)
         } else if (this.isIntermediateAboutPage() &&
-          this.tab.get('url') !== this.props.location &&
-          this.tab.get('url') !== this.props.aboutDetails.get('url')) {
-          appActions.loadURLRequested(this.props.aboutDetails.get('url'),
-            this.props.aboutDetails.get('frameKey'))
+          this.props.tabUrl !== this.props.location &&
+          this.props.tabUrl !== this.props.aboutDetailsUrl) {
+          appActions.loadURLRequested(this.props.aboutDetailsUrl,
+            this.props.aboutDetailsFrameKey)
         } else {
           this.webview.reload()
         }
@@ -366,7 +385,7 @@ class Frame extends ImmutableComponent {
         this.zoomReset()
         break
       case 'view-source':
-        const sourceLocation = UrlUtil.getViewSourceUrlFromUrl(this.tab.get('url'))
+        const sourceLocation = UrlUtil.getViewSourceUrlFromUrl(this.props.tabUrl)
         if (sourceLocation !== null) {
           appActions.createTabRequested({
             url: sourceLocation,
@@ -380,8 +399,8 @@ class Frame extends ImmutableComponent {
         break
       case 'save':
         const downloadLocation = getSetting(settings.PDFJS_ENABLED)
-          ? UrlUtil.getLocationIfPDF(this.tab.get('url'))
-          : this.tab.get('url')
+          ? UrlUtil.getLocationIfPDF(this.props.tabUrl)
+          : this.props.tabUrl
         // TODO: Sometimes this tries to save in a non-existent directory
         this.webview.downloadURL(downloadLocation, true)
         break
@@ -389,17 +408,17 @@ class Frame extends ImmutableComponent {
         this.webview.print()
         break
       case 'show-findbar':
-        windowActions.setFindbarShown(this.frame, true)
+        windowActions.setFindbarShown(this.props.frameKey, true)
         break
       case 'fill-password':
-        let currentUrl = urlParse(this.tab.get('url'))
+        let currentUrl = urlParse(this.props.tabUrl)
         if (currentUrl &&
-            [currentUrl.protocol, currentUrl.host].join('//') === this.props.activeShortcutDetails.get('origin')) {
+            [currentUrl.protocol, currentUrl.host].join('//') === this.props.shortcutDetailsOrigin) {
           this.webview.send(messages.GOT_PASSWORD,
-                            this.props.activeShortcutDetails.get('username'),
-                            this.props.activeShortcutDetails.get('password'),
-                            this.props.activeShortcutDetails.get('origin'),
-                            this.props.activeShortcutDetails.get('action'),
+                            this.props.shortcutDetailsUsername,
+                            this.props.shortcutDetailsPassword,
+                            this.props.shortcutDetailsOrigin,
+                            this.props.shortcutDetailsAction,
                             true)
         }
         break
@@ -453,7 +472,7 @@ class Frame extends ImmutableComponent {
     // cryptographically random.
     const nonce = Math.random().toString()
 
-    if (this.props.widevine && this.props.widevine.get('enabled')) {
+    if (this.props.isWidevineEnabled) {
       const message = locale.translation('allowWidevine').replace(/{{\s*origin\s*}}/, this.origin)
       // Show Widevine notification bar
       appActions.showNotification({
@@ -594,7 +613,7 @@ class Frame extends ImmutableComponent {
       contextMenus.onShowAutofillMenu(e.suggestions, e.rect, this.frame)
     })
     this.webview.addEventListener('hide-autofill-popup', (e) => {
-      if (this.props.contextMenuDetail && this.props.contextMenuDetail.get('type') === 'autofill') {
+      if (this.props.isAutFillContextMenu) {
         windowActions.autofillPopupHidden(this.props.tabId)
       }
     })
@@ -692,7 +711,7 @@ class Frame extends ImmutableComponent {
       }
 
       const protocol = parsedUrl.protocol
-      const isError = this.props.aboutDetails && this.props.aboutDetails.get('errorCode')
+      const isError = this.props.aboutDetailsErrorCode
       if (!this.props.isPrivate && (protocol === 'http:' || protocol === 'https:') && !isError && savePage) {
         // Register the site for recent history for navigation bar
         // calling with setTimeout is an ugly hack for a race condition
@@ -783,7 +802,7 @@ class Frame extends ImmutableComponent {
     })
     this.webview.addEventListener('did-navigate', (e) => {
       if (this.props.findbarShown) {
-        this.props.onFindHide()
+        frameStateUtil.onFindBarHide(this.props.activeFrameKey)
       }
 
       for (let message in this.notificationCallbacks) {
@@ -883,15 +902,15 @@ class Frame extends ImmutableComponent {
       }
       if (e.result !== undefined && (e.result.matches !== undefined || e.result.activeMatchOrdinal !== undefined)) {
         if (e.result.matches === 0) {
-          windowActions.setFindDetail(this.frame, Immutable.fromJS({
+          windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
             numberOfMatches: 0,
             activeMatchOrdinal: 0
           }))
           return
         }
-        windowActions.setFindDetail(this.frame, Immutable.fromJS({
-          numberOfMatches: e.result.matches || (this.props.findDetail && this.props.findDetail.get('numberOfMatches')) || 0,
-          activeMatchOrdinal: e.result.activeMatchOrdinal || (this.props.findDetail && this.props.findDetail.get('activeMatchOrdinal'))
+        windowActions.setFindDetail(this.props.frameKey, Immutable.fromJS({
+          numberOfMatches: e.result.matches || this.props.findDetailNumberOfMatches,
+          activeMatchOrdinal: e.result.activeMatchOrdinal || this.props.findDetailActiveMatchOrdinal
         }))
       }
     })
@@ -925,11 +944,11 @@ class Frame extends ImmutableComponent {
 
   onFindAgain (forward) {
     if (!this.props.findbarShown) {
-      windowActions.setFindbarShown(this.frame, true)
+      windowActions.setFindbarShown(this.props.frameKey, true)
     }
-    const searchString = this.props.findDetail && this.props.findDetail.get('searchString')
+    const searchString = this.props.findDetailSearchString
     if (searchString) {
-      webviewActions.findInPage(searchString, (this.props.findDetail && this.props.findDetail.get('caseSensitivity')) || undefined, forward, this.props.findDetail.get('internalFindStatePresent'), this.webview)
+      webviewActions.findInPage(searchString, this.props.findDetailCaseSensitivity, forward, this.props.findDetailInternalFindStatePresent, this.webview)
     }
   }
 
@@ -961,10 +980,68 @@ class Frame extends ImmutableComponent {
     }
   }
 
+  mergeProps (state, dispatchProps, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const frame = frameStateUtil.getFrameByKey(currentWindow, ownProps.frameKey)
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow)
+    const allSiteSettings = siteSettingsState.getAllSiteSettings(state, activeFrame)
+    const frameSiteSettings = frame.get('location')
+      ? siteSettings.getSiteSettingsForURL(allSiteSettings, frame.get('location'))
+      : undefined
+    const contextMenu = currentWindow.get('contextMenuDetail')
+    const tabId = frame.get('tabId')
+    const tab = tabId && tabId > -1 && tabState.getByTabId(state, tabId)
+
+    const props = {}
+    // used in renderer
+    props.partition = frameStateUtil.getPartition(frame)
+    props.isFullScreen = frame.get('isFullScreen')
+    props.isPreview = frame.get('key') === currentWindow.get('previewFrameKey')
+    props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, frame.get('key'))
+    props.showFullScreenWarning = frame.get('showFullScreenWarning')
+    props.location = frame.get('location')
+    props.hrefPreview = frame.get('hrefPreview')
+    props.showOnRight = frame.get('showOnRight')
+    props.tabId = tabId
+    props.showMessageBox = tab && tab.get('messageBoxDetail')
+
+    // used in other functions
+    props.activeFrameKey = activeFrame.get('key')
+    props.tabIndex = frameStateUtil.getFrameIndex(currentWindow, frame.get('key'))
+    props.urlBarFocused = activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'focused'])
+    props.isAutFillContextMenu = contextMenu && contextMenu.get('type') === 'autofill'
+    props.isSecure = frame.getIn(['security', 'isSecure'])
+    props.findbarShown = frame.get('findbarShown')
+    props.findDetailCaseSensitivity = frame.getIn(['findDetail', 'caseSensitivity']) || undefined
+    props.findDetailNumberOfMatches = frame.getIn(['findDetail', 'numberOfMatches']) || 0
+    props.findDetailSearchString = frame.getIn(['findDetail', 'searchString'])
+    props.findDetailInternalFindStatePresent = frame.getIn(['findDetail', 'internalFindStatePresent'])
+    props.findDetailActiveMatchOrdinal = frame.getIn(['findDetail', 'activeMatchOrdinal'])
+    props.isPrivate = frame.get('isPrivate')
+    props.activeShortcut = frame.get('activeShortcut')
+    props.shortcutDetailsUsername = frame.getIn(['activeShortcutDetails', 'username'])
+    props.shortcutDetailsPassword = frame.getIn(['activeShortcutDetails', 'password'])
+    props.shortcutDetailsOrigin = frame.getIn(['activeShortcutDetails', 'origin'])
+    props.shortcutDetailsAction = frame.getIn(['activeShortcutDetails', 'action'])
+    props.provisionalLocation = frame.get('provisionalLocation')
+    props.pinnedLocation = frame.get('pinnedLocation')
+    props.src = frame.get('src')
+    props.guestInstanceId = frame.get('guestInstanceId')
+    props.aboutDetailsUrl = frame.getIn(['aboutDetails', 'url'])
+    props.aboutDetailsFrameKey = frame.getIn(['aboutDetails', 'frameKey'])
+    props.aboutDetailsErrorCode = frame.getIn(['aboutDetails', 'errorCode'])
+    props.unloaded = frame.get('unloaded')
+    props.isWidevineEnabled = state.get('widevine') && state.getIn(['widevine', 'enabled'])
+    props.siteZoomLevel = frameSiteSettings && frameSiteSettings.get('zoomLevel')
+    props.allSiteSettings = allSiteSettings // TODO (nejc) can be improved even more
+    props.tabUrl = tab && tab.get('url')
+
+    return Object.assign({}, ownProps, props)
+  }
+
   render () {
-    const messageBoxDetail = this.tab && this.tab.get('messageBoxDetail')
     return <div
-      data-partition={frameStateUtil.getPartition(this.frame)}
+      data-partition={this.props.partition}
       className={cx({
         frameWrapper: true,
         isPreview: this.props.isPreview,
@@ -991,15 +1068,13 @@ class Frame extends ImmutableComponent {
         : null
       }
       {
-        messageBoxDetail
+        this.props.showMessageBox
         ? <MessageBox
-          isActive={this.props.isActive}
-          tabId={this.frame.get('tabId')}
-          detail={messageBoxDetail} />
+          tabId={this.props.tabId} />
         : null
       }
     </div>
   }
 }
 
-module.exports = Frame
+module.exports = ReduxComponent.connect(Frame)
diff --git a/js/components/main.js b/js/components/main.js
index 08b3d4de7c2..a5a536cbbec 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -58,8 +58,8 @@ const siteUtil = require('../state/siteUtil')
 const searchProviders = require('../data/searchProviders')
 const defaultBrowserState = require('../../app/common/state/defaultBrowserState')
 const shieldState = require('../../app/common/state/shieldState')
-const siteSettingsState = require('../../app/common/state/siteSettingsState')
 const tabState = require('../../app/common/state/tabState')
+const siteSettingsState = require('../../app/common/state/siteSettingsState')
 
 // Util
 const _ = require('underscore')
@@ -623,20 +623,14 @@ class Main extends ImmutableComponent {
 
   onFindHide () {
     const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
-    windowActions.setFindbarShown(activeFrame, false)
-    webviewActions.stopFindInPage()
-    windowActions.setFindDetail(activeFrame, Immutable.fromJS({
-      internalFindStatePresent: false,
-      numberOfMatches: -1,
-      activeMatchOrdinal: 0
-    }))
+    frameStateUtil.onFindBarHide(activeFrame.get('key'))
   }
 
   onFind (searchString, caseSensitivity, forward, findNext) {
     const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
     webviewActions.findInPage(searchString, caseSensitivity, forward, findNext)
     if (!findNext) {
-      windowActions.setFindDetail(activeFrame, Immutable.fromJS({
+      windowActions.setFindDetail(activeFrame.get('key'), Immutable.fromJS({
         internalFindStatePresent: true
       }))
     }
@@ -649,10 +643,7 @@ class Main extends ImmutableComponent {
 
   get allSiteSettings () {
     const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
-    if (activeFrame && activeFrame.get('isPrivate')) {
-      return this.props.appState.get('siteSettings').mergeDeep(this.props.appState.get('temporarySiteSettings'))
-    }
-    return this.props.appState.get('siteSettings')
+    return siteSettingsState.getAllSiteSettings(this.props.appState, activeFrame)
   }
 
   frameSiteSettings (location) {
@@ -688,7 +679,6 @@ class Main extends ImmutableComponent {
     // can be passed everywhere other than the Frame elements.
     const sortedFrames = frameStateUtil.getSortedFrames(this.props.windowState)
     const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
-    const allSiteSettings = this.allSiteSettings
     const lastCommittedURL = frameStateUtil.getLastCommittedURL(activeFrame)
     const activeSiteSettings = this.frameSiteSettings(lastCommittedURL)
     const nonPinnedFrames = frameStateUtil.getNonPinnedFrames(this.props.windowState)
@@ -713,7 +703,6 @@ class Main extends ImmutableComponent {
     const braverySettings = siteSettings.activeSettings(activeSiteSettings, this.props.appState, appConfig)
     const loginRequiredDetail = activeFrame ? basicAuthState.getLoginRequiredDetail(this.props.appState, activeFrame.get('tabId')) : null
     const customTitlebar = this.customTitlebar
-    const braveryDefaults = Immutable.fromJS(siteSettings.braveryDefaults(this.props.appState, appConfig))
     const contextMenuDetail = this.props.windowState.get('contextMenuDetail')
     const shouldAllowWindowDrag = !contextMenuDetail &&
       !this.props.windowState.get('bookmarkDetail') &&
@@ -940,43 +929,8 @@ class Main extends ImmutableComponent {
           {
             sortedFrames.map((frame) =>
               <Frame
-                urlBarFocused={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'focused'])}
-                tabIndex={frameStateUtil.getFrameIndex(this.props.windowState, frame.get('key'))}
-                prefOpenInForeground={getSetting(settings.SWITCH_TO_NEW_TABS)}
                 frameKey={frame.get('key')}
-                contextMenuDetail={contextMenuDetail}
-                partition={frameStateUtil.getPartition(frame)}
                 key={frame.get('key')}
-                isFullScreen={frame.get('isFullScreen')}
-                isSecure={frame.getIn(['security', 'isSecure'])}
-                showFullScreenWarning={frame.get('showFullScreenWarning')}
-                findbarShown={frame.get('findbarShown')}
-                findDetail={frame.get('findDetail')}
-                hrefPreview={frame.get('hrefPreview')}
-                showOnRight={frame.get('showOnRight')}
-                location={frame.get('location')}
-                isPrivate={frame.get('isPrivate')}
-                partitionNumber={frame.get('partitionNumber')}
-                activeShortcut={frame.get('activeShortcut')}
-                activeShortcutDetails={frame.get('activeShortcutDetails')}
-                provisionalLocation={frame.get('provisionalLocation')}
-                pinnedLocation={frame.get('pinnedLocation')}
-                src={frame.get('src')}
-                guestInstanceId={frame.get('guestInstanceId')}
-                tabId={frame.get('tabId')}
-                aboutDetails={frame.get('aboutDetails')}
-                unloaded={frame.get('unloaded')}
-                audioMuted={frame.get('audioMuted')}
-                noScript={this.props.appState.get('noScript')}
-                flash={this.props.appState.get('flash')}
-                widevine={this.props.appState.get('widevine')}
-                allSiteSettings={allSiteSettings}
-                frameSiteSettings={this.frameSiteSettings(frame.get('location'))}
-                onFindHide={this.onFindHide}
-                enableNoScript={siteSettingsState.isNoScriptEnabled(this.props.appState, this.frameSiteSettings(frame.get('location')))}
-                braveryDefaults={braveryDefaults}
-                isPreview={frame.get('key') === this.props.windowState.get('previewFrameKey')}
-                isActive={frameStateUtil.isFrameKeyActive(this.props.windowState, frame.get('key'))}
               />)
           }
         </div>
diff --git a/js/state/frameStateUtil.js b/js/state/frameStateUtil.js
index b305b0762b3..607fc2d69b0 100644
--- a/js/state/frameStateUtil.js
+++ b/js/state/frameStateUtil.js
@@ -8,6 +8,8 @@ const {tabCloseAction} = require('../../app/common/constants/settingsEnums')
 const {makeImmutable} = require('../../app/common/state/immutableUtil')
 const {isIntermediateAboutPage} = require('../lib/appUrlUtil')
 const urlParse = require('../../app/common/urlParse')
+const windowActions = require('../actions/windowActions.js')
+const webviewActions = require('../actions/webviewActions.js')
 
 const comparatorByKeyAsc = (a, b) => a.get('key') > b.get('key')
       ? 1 : b.get('key') > a.get('key') ? -1 : 0
@@ -695,6 +697,16 @@ function getFrameTabPageIndex (frames, frameProps, tabsPerTabPage) {
   return Math.floor(index / tabsPerTabPage)
 }
 
+function onFindBarHide (frameKey) {
+  windowActions.setFindbarShown(frameKey, false)
+  webviewActions.stopFindInPage()
+  windowActions.setFindDetail(frameKey, Immutable.fromJS({
+    internalFindStatePresent: false,
+    numberOfMatches: -1,
+    activeMatchOrdinal: 0
+  }))
+}
+
 const frameStatePath = (windowState, key) =>
   ['frames', findIndexForFrameKey(windowState.get('frames'), key)]
 
@@ -768,5 +780,6 @@ module.exports = {
   frameStatePathForFrame,
   tabStatePath,
   tabStatePathForFrame,
-  getLastCommittedURL
+  getLastCommittedURL,
+  onFindBarHide
 }
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
index 57f2adfc22b..f1d7ffc2cfc 100644
--- a/js/stores/windowStore.js
+++ b/js/stores/windowStore.js
@@ -64,6 +64,10 @@ class WindowStore extends EventEmitter {
     return windowState
   }
 
+  set state (newWindowState) {
+    windowState = newWindowState
+  }
+
   getFrames () {
     return frameStateUtil.getFrames(this.state)
   }
@@ -298,10 +302,11 @@ const doAction = (action) => {
       })
       break
     case windowConstants.WINDOW_SET_FINDBAR_SHOWN:
-      windowState = windowState.mergeIn(['frames', frameStateUtil.getFramePropsIndex(frameStateUtil.getFrames(windowState), action.frameProps)], {
+      const frameIndex = frameStateUtil.findIndexForFrameKey(windowState.get('frames'), action.frameKey)
+      windowState = windowState.mergeIn(['frames', frameIndex], {
         findbarShown: action.shown
       })
-      windowState = windowState.mergeIn(['frames', frameStateUtil.getFramePropsIndex(frameStateUtil.getFrames(windowState), action.frameProps)], {
+      windowState = windowState.mergeIn(['frames', frameIndex], {
         findbarSelected: action.shown
       })
       break
@@ -458,8 +463,11 @@ const doAction = (action) => {
       })
       break
     case windowConstants.WINDOW_SET_FIND_DETAIL:
-      windowState = windowState.mergeIn(['frames', frameStateUtil.getFramePropsIndex(frameStateUtil.getFrames(windowState), action.frameProps), 'findDetail'], action.findDetail)
-      break
+      {
+        const frameIndex = frameStateUtil.findIndexForFrameKey(windowState.get('frames'), action.frameKey)
+        windowState = windowState.mergeIn(['frames', frameIndex, 'findDetail'], action.findDetail)
+        break
+      }
     case windowConstants.WINDOW_SET_BOOKMARK_DETAIL:
       if (!action.currentDetail && !action.originalDetail) {
         windowState = windowState.delete('bookmarkDetail')
diff --git a/test/unit/app/common/state/tabMessageBoxStateTest.js b/test/unit/app/common/state/tabMessageBoxStateTest.js
index c660db07ee7..be097a2fadc 100644
--- a/test/unit/app/common/state/tabMessageBoxStateTest.js
+++ b/test/unit/app/common/state/tabMessageBoxStateTest.js
@@ -1,6 +1,7 @@
 /* global describe, it, before, after */
 const tabMessageBoxState = require('../../../../../app/common/state/tabMessageBoxState')
 const tabState = require('../../../../../app/common/state/tabState')
+const {makeImmutable} = require('../../../../../app/common/state/immutableUtil')
 const sinon = require('sinon')
 const Immutable = require('immutable')
 const assert = require('assert')
@@ -17,8 +18,8 @@ const exampleMessageBox = Immutable.fromJS({
   message: 'example message',
   title: 'example title',
   buttons: ['OK'],
-  suppress: false,
-  showSuppress: false
+  suppress: true,
+  showSuppress: true
 })
 
 const defaultTabId = 1
@@ -179,4 +180,107 @@ describe('tabMessageBoxState unit tests', function () {
       })
     })
   })
+
+  describe('getSuppress', function () {
+    it('when data exists', function () {
+      const appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      const suppress = tabMessageBoxState.getSuppress(appState, defaultTabId)
+      assert.equal(suppress, defaultTab.getIn(['messageBoxDetail', 'suppress']))
+    })
+
+    it('when tab is missing', function () {
+      const suppress = tabMessageBoxState.getSuppress(defaultAppState, defaultTabId)
+      assert.equal(suppress, false)
+    })
+
+    it('when data is missing', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      appState = appState.deleteIn(['tabs', 0, 'messageBoxDetail', 'suppress'])
+      const suppress = tabMessageBoxState.getSuppress(appState, defaultTabId)
+      assert.equal(suppress, false)
+    })
+  })
+
+  describe('getShowSuppress', function () {
+    it('when data exists', function () {
+      const appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      const getShowSuppress = tabMessageBoxState.getShowSuppress(appState, defaultTabId)
+      assert.equal(getShowSuppress, defaultTab.getIn(['messageBoxDetail', 'showSuppress']))
+    })
+
+    it('when tab is missing', function () {
+      const getShowSuppress = tabMessageBoxState.getShowSuppress(defaultAppState, defaultTabId)
+      assert.equal(getShowSuppress, false)
+    })
+
+    it('when data is missing', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      appState = appState.deleteIn(['tabs', 0, 'messageBoxDetail', 'showSuppress'])
+      const getShowSuppress = tabMessageBoxState.getShowSuppress(appState, defaultTabId)
+      assert.equal(getShowSuppress, false)
+    })
+  })
+
+  describe('getTitle', function () {
+    it('when data exists', function () {
+      const appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      const title = tabMessageBoxState.getTitle(appState, defaultTabId)
+      assert.equal(title, defaultTab.getIn(['messageBoxDetail', 'title']))
+    })
+
+    it('when tab is missing', function () {
+      const title = tabMessageBoxState.getTitle(defaultAppState, defaultTabId)
+      assert.equal(title, '')
+    })
+
+    it('when data is missing', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      appState = appState.deleteIn(['tabs', 0, 'messageBoxDetail', 'title'])
+      const title = tabMessageBoxState.getTitle(appState, defaultTabId)
+      assert.equal(title, '')
+    })
+  })
+
+  describe('getButtons', function () {
+    let defaultValue = makeImmutable(['ok'])
+
+    it('when data exists', function () {
+      const appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      const buttons = tabMessageBoxState.getButtons(appState, defaultTabId)
+      assert.equal(buttons, defaultTab.getIn(['messageBoxDetail', 'buttons']))
+    })
+
+    it('when tab is missing', function () {
+      const buttons = tabMessageBoxState.getButtons(defaultAppState, defaultTabId)
+      assert.deepEqual(buttons, defaultValue)
+    })
+
+    it('when data is missing', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      appState = appState.deleteIn(['tabs', 0, 'messageBoxDetail', 'buttons'])
+      const buttons = tabMessageBoxState.getButtons(appState, defaultTabId)
+      assert.deepEqual(buttons, defaultValue)
+    })
+  })
+
+  describe('getPropertyByTabId', function () {
+    it('when everything is correct', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      const property = tabMessageBoxState.getPropertyByTabId(appState, defaultTabId, 'suppress')
+      assert.deepEqual(property, exampleMessageBox.get('suppress'))
+    })
+
+    it('when tab is wrong', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      const property = tabMessageBoxState.getPropertyByTabId(appState, 3, 'message')
+      assert.deepEqual(property, undefined)
+    })
+
+    it('when property is missing', function () {
+      let appState = defaultAppState.set('tabs', Immutable.fromJS([defaultTab]))
+      appState = appState.deleteIn(['tabs', 0, 'messageBoxDetail', 'suppress'])
+      const property = tabMessageBoxState.getPropertyByTabId(appState, defaultTabId, 'suppress')
+      assert.deepEqual(property, undefined)
+    })
+  })
 })
diff --git a/test/unit/app/renderer/components/messageBoxTest.js b/test/unit/app/renderer/components/messageBoxTest.js
index 22c0843b8f6..dd4dc8db7d4 100644
--- a/test/unit/app/renderer/components/messageBoxTest.js
+++ b/test/unit/app/renderer/components/messageBoxTest.js
@@ -4,14 +4,38 @@
 /* global describe, before, after, it */
 
 const mockery = require('mockery')
-const {mount, shallow} = require('enzyme')
+const {mount} = require('enzyme')
 const sinon = require('sinon')
 const assert = require('assert')
 const Immutable = require('immutable')
-const config = require('../../../../../js/constants/config')
-let MessageBox, appActions
+let MessageBox, appActions, appStoreRenderer
 require('../../../braveUnit')
 
+const tabId = 1
+
+const detail1 = {
+  title: 'An embedded page at brave.com says:',
+  message: 'Example message',
+  buttons: ['OK', 'Cancel'],
+  cancelId: 1,
+  suppress: true,
+  showSuppress: true
+}
+
+let appState = Immutable.fromJS({
+  windows: [{
+    windowId: 1,
+    windowUUID: 'uuid'
+  }],
+  tabs: [{
+    tabId: tabId,
+    windowId: 1,
+    windowUUID: 'uuid',
+    url: 'https://brave.com',
+    messageBoxDetail: detail1
+  }]
+})
+
 describe('MessageBox component unit tests', function () {
   before(function () {
     mockery.enable({
@@ -22,223 +46,21 @@ describe('MessageBox component unit tests', function () {
     mockery.registerMock('electron', require('../../../lib/fakeElectron'))
     MessageBox = require('../../../../../app/renderer/components/common/messageBox')
     appActions = require('../../../../../js/actions/appActions')
+    appStoreRenderer = require('../../../../../js/stores/appStoreRenderer')
   })
+
   after(function () {
     mockery.disable()
   })
 
-  const tabId = 1
-  const detail1 = {
-    title: 'An embedded page at brave.com says:',
-    message: 'Example message',
-    buttons: ['OK', 'Cancel'],
-    cancelId: 1,
-    suppress: true,
-    showSuppress: true
-  }
-
-  describe('Object properties', function () {
-    describe('tabId', function () {
-      it('binds the text from the detail object', function () {
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail1)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.tabId, tabId)
-      })
-
-      it('defaults to "" if detail has falsey value', function () {
-        const wrapper = shallow(
-          <MessageBox
-            detail={Immutable.fromJS(detail1)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.tabId, '')
-      })
-    })
-
-    describe('title', function () {
-      it('binds the text from the detail object', function () {
-        const detail2 = Object.assign({}, detail1)
-        detail2.title = 'example title'
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail2)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.title, detail2.title)
-      })
-
-      it('defaults to "" if detail has falsey value', function () {
-        const detail2 = Object.assign({}, detail1)
-        detail2.title = undefined
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail2)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.title, '')
-      })
-
-      it('replaces the Brave extensionId with "Brave"', function () {
-        const detail2 = Object.assign({}, detail1)
-        detail2.title = config.braveExtensionId + ' says:'
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail2)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.title, 'Brave says:')
-      })
-    })
-
-    describe('message', function () {
-      it('binds the text from the detail object', function () {
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail1)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.message, detail1.message)
-      })
-
-      it('defaults to "" if detail has falsey value', function () {
-        const detail2 = Object.assign({}, detail1)
-        detail2.message = undefined
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail2)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.message, '')
-      })
-    })
-
-    describe('buttons', function () {
-      it('binds the buttons from the detail object', function () {
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail1)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.deepEqual(instance.buttons.toJS(), detail1.buttons)
-      })
-
-      it('defaults to "[OK]" if detail has falsey value', function () {
-        const detail2 = Object.assign({}, detail1)
-        detail2.buttons = undefined
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail2)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.deepEqual(instance.buttons.toJS(), ['ok'])
-      })
-    })
-
-    describe('cancelId', function () {
-      it('binds the cancelId from the detail object', function () {
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail1)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.cancelId, detail1.cancelId)
-      })
-
-      it('does not have a default if value is falsey', function () {
-        const detail2 = Object.assign({}, detail1)
-        detail2.cancelId = undefined
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail2)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.cancelId, undefined)
-      })
-    })
-
-    describe('suppress', function () {
-      it('binds the suppress from the detail object', function () {
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail1)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.suppress, detail1.suppress)
-      })
-
-      it('defaults to false if detail has falsey value', function () {
-        const detail2 = Object.assign({}, detail1)
-        detail2.suppress = undefined
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail2)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.suppress, false)
-      })
-    })
-
-    describe('showSuppress', function () {
-      it('binds the showSuppress from the detail object', function () {
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail1)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.showSuppress, detail1.showSuppress)
-      })
-
-      it('defaults to false if detail has falsey value', function () {
-        const detail2 = Object.assign({}, detail1)
-        detail2.showSuppress = undefined
-        const wrapper = shallow(
-          <MessageBox
-            tabId={tabId}
-            detail={Immutable.fromJS(detail2)}
-          />
-        )
-        const instance = wrapper.instance()
-        assert.equal(instance.showSuppress, false)
-      })
-    })
-  })
-
   describe('Rendering', function () {
+    before(function () {
+      appStoreRenderer.state = Immutable.fromJS(appState)
+    })
     it('renders itself inside a dialog component', function () {
       const wrapper = mount(
         <MessageBox
           tabId={tabId}
-          detail={Immutable.fromJS(detail1)}
         />
       )
       assert.equal(wrapper.find('div.dialog').length, 1)
@@ -248,52 +70,51 @@ describe('MessageBox component unit tests', function () {
       const wrapper = mount(
         <MessageBox
           tabId={tabId}
-          detail={Immutable.fromJS(detail1)}
         />
       )
       assert.equal(wrapper.find('div.switchControl').length, 1)
     })
 
-    it('hides the suppress checkbox if showSuppress is false', function () {
-      const detail2 = Object.assign({}, detail1)
-      detail2.showSuppress = false
+    it('renders the button index 0 as primaryButton', function () {
       const wrapper = mount(
         <MessageBox
           tabId={tabId}
-          detail={Immutable.fromJS(detail2)}
         />
       )
-      assert.equal(wrapper.find('div.switchControl').length, 0)
+      assert.equal(wrapper.find('button[data-l10n-id="OK"].primaryButton').length, 1)
     })
 
-    it('renders the button index 0 as primaryButton', function () {
+    it('renders the button index 1 as whiteButton', function () {
       const wrapper = mount(
         <MessageBox
           tabId={tabId}
-          detail={Immutable.fromJS(detail1)}
         />
       )
-      assert.equal(wrapper.find('button[data-l10n-id="OK"].primaryButton').length, 1)
+      assert.equal(wrapper.find('button[data-l10n-id="Cancel"].whiteButton').length, 1)
     })
 
-    it('renders the button index 1 as whiteButton', function () {
+    it('hides the suppress checkbox if showSuppress is false', function () {
+      const appState2 = appState.setIn(['tabs', 0, 'messageBoxDetail', 'showSuppress'], false)
+      appStoreRenderer.state = Immutable.fromJS(appState2)
       const wrapper = mount(
         <MessageBox
           tabId={tabId}
-          detail={Immutable.fromJS(detail1)}
         />
       )
-      assert.equal(wrapper.find('button[data-l10n-id="Cancel"].whiteButton').length, 1)
+      assert.equal(wrapper.find('div.switchControl').length, 0)
     })
   })
 
   describe('Events', function () {
+    before(function () {
+      appStoreRenderer.state = Immutable.fromJS(appState)
+    })
+
     it('calls appActions.tabMessageBoxUpdated when SwitchControl is toggled', function () {
       const spy = sinon.spy(appActions, 'tabMessageBoxUpdated')
       const wrapper = mount(
         <MessageBox
           tabId={tabId}
-          detail={Immutable.fromJS(detail1)}
         />
       )
       wrapper.find('.switchBackground').simulate('click')
@@ -306,7 +127,6 @@ describe('MessageBox component unit tests', function () {
       const wrapper = mount(
         <MessageBox
           tabId={tabId}
-          detail={Immutable.fromJS(detail1)}
         />
       )
       const response = {
@@ -323,7 +143,6 @@ describe('MessageBox component unit tests', function () {
       const wrapper = mount(
         <MessageBox
           tabId={tabId}
-          detail={Immutable.fromJS(detail1)}
         />
       )
       const response = {
diff --git a/test/unit/js/components/frameTest.js b/test/unit/js/components/frameTest.js
index bdbdb70a0fb..fe0dfeeebba 100644
--- a/test/unit/js/components/frameTest.js
+++ b/test/unit/js/components/frameTest.js
@@ -4,16 +4,69 @@
 /* global describe, before, after, it */
 
 const mockery = require('mockery')
-const {shallow} = require('enzyme')
+const {mount} = require('enzyme')
 const sinon = require('sinon')
 const assert = require('assert')
-let Frame
+const Immutable = require('immutable')
+let Frame, windowStore
 require('../../braveUnit')
 
+const tabId = 1
+const frameKey = 0
+
+const fakeAppStoreRenderer = {
+  state: Immutable.fromJS({
+    windows: [{
+      windowId: 1,
+      windowUUID: 'uuid'
+    }],
+    tabs: [{
+      tabId: tabId,
+      windowId: 1,
+      windowUUID: 'uuid',
+      url: 'https://brave.com'
+    }]
+  }),
+  addChangeListener: () => {},
+  removeChangeListener: () => {}
+}
+
+const defaultWindowStore = Immutable.fromJS({
+  activeFrameKey: frameKey,
+  frames: [{
+    key: frameKey,
+    tabId: tabId,
+    location: 'http://brave.com'
+  }],
+  tabs: [{
+    key: frameKey
+  }]
+})
+
 describe('Frame component unit tests', function () {
   const fakeWindowActions = {
     frameShortcutChanged: () => {},
-    setFindbarShown: () => {}
+    setFindbarShown: () => {},
+    setActiveFrame: () => {},
+    setLastZoomPercentage: () => {}
+  }
+
+  const domUtil = {
+    appendChild: () => {},
+    createWebView: () => {
+      return {
+        setAttribute: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        attachGuest: () => {},
+        zoomIn: () => {},
+        zoomOut: () => {},
+        zoomReset: () => {},
+        executeScriptInTab: () => {},
+        focus: () => {},
+        getZoomPercent: () => {}
+      }
+    }
   }
 
   before(function () {
@@ -30,7 +83,13 @@ describe('Frame component unit tests', function () {
     mockery.registerMock('../../extensions/brave/img/caret_down_grey.svg', 'caret_down_grey.svg')
     mockery.registerMock('electron', require('../../lib/fakeElectron'))
     mockery.registerMock('../actions/windowActions', fakeWindowActions)
+    mockery.registerMock('../../app/renderer/lib/domUtil', domUtil)
+    // the version in frame.js
+    mockery.registerMock('../stores/appStoreRenderer', fakeAppStoreRenderer)
+    // the version in reduxComponent.js
+    mockery.registerMock('../../../js/stores/appStoreRenderer', fakeAppStoreRenderer)
     Frame = require('../../../../js/components/frame')
+    windowStore = require('../../../../js/stores/windowStore')
   })
 
   after(function () {
@@ -38,8 +97,9 @@ describe('Frame component unit tests', function () {
   })
 
   const expectCall = (shortcut, expectedCall, expectedArgs) => {
-    const wrapper = shallow(
-      <Frame activeShortcut={shortcut} />
+    windowStore.state = defaultWindowStore.setIn(['frames', 0, 'activeShortcut'], shortcut)
+    const wrapper = mount(
+      <Frame frameKey={frameKey} />
     )
     const instance = wrapper.instance()
     const expectedCallSpy = sinon.spy(instance, expectedCall)
@@ -53,8 +113,9 @@ describe('Frame component unit tests', function () {
   }
 
   const expectWindowActionCall = (shortcut, expectedCall, expectNoCalls) => {
-    const wrapper = shallow(
-      <Frame activeShortcut={shortcut} />
+    windowStore.state = defaultWindowStore.setIn(['frames', 0, 'activeShortcut'], shortcut)
+    const wrapper = mount(
+      <Frame frameKey={frameKey} />
     )
     const instance = wrapper.instance()
     const expectedCallSpy = sinon.spy(fakeWindowActions, expectedCall)