Frame -> redux component

Resovles brave#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

js/components/frame.js

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
+const ReduxComponent = require('../../app/renderer/components/reduxComponent')
 const urlParse = require('../../app/common/urlParse')
 const windowActions = require('../actions/windowActions')
 const appActions = require('../actions/appActions')
@@ -25,13 +26,14 @@ const {aboutUrls, isSourceMagnetUrl, isSourceAboutUrl, isTargetAboutUrl, getTarg
 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 imageUtil = require('../lib/imageUtil')
 const MessageBox = require('../../app/renderer/components/messageBox')
+const siteSettingsState = require('../../app/common/state/siteSettingsState')
+const tabState = require('../../app/common/state/tabState')
 
 const WEBRTC_DEFAULT = 'default'
 const WEBRTC_DISABLE_NON_PROXY = 'disable_non_proxied_udp'
@@ -97,7 +99,7 @@ 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')
   }
@@ -114,7 +116,7 @@ class Frame extends ImmutableComponent {
     if (!this.props.allSiteSettings) {
       return false
     }
-    const activeSiteSettings = getSiteSettingsForHostPattern(this.props.allSiteSettings,
+    const activeSiteSettings = siteSettings.getSiteSettingsForHostPattern(this.props.allSiteSettings,
                                                              origin)
     if (activeSiteSettings && typeof activeSiteSettings.get('widevine') === 'number') {
       return true
@@ -125,7 +127,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,
+    const activeSiteSettings = siteSettings.getSiteSettingsForHostPattern(this.props.allSiteSettings,
                                                              origin)
     if (!activeSiteSettings) {
       return
@@ -979,7 +981,7 @@ class Frame extends ImmutableComponent {
 
   onFindAgain (forward) {
     if (!this.props.findbarShown) {
-      windowActions.setFindbarShown(this.frame, true)
+      windowActions.setFindbarShown(this.props.frame, true)
     }
     const searchString = this.props.findDetail && this.props.findDetail.get('searchString')
     if (searchString) {
@@ -1015,10 +1017,63 @@ 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 props = {
+      frame,
+      tabIndex: frameStateUtil.getFrameIndex(currentWindow, frame.get('key')),
+      tabData: frame.get('tabId') ? tabState.getByTabId(state, frame.get('tabId')) : null,
+      urlBarFocused: activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'focused']),
+      contextMenuDetail: currentWindow.get('contextMenuDetail'),
+      partition: frameStateUtil.getPartition(frame),
+      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: state.get('noScript'),
+      flash: state.get('flash'),
+      widevine: state.get('widevine'),
+      allSiteSettings: allSiteSettings,
+      sync: state.get('sync') || new Immutable.Map(),
+      ledgerInfo: state.get('ledgerInfo') || new Immutable.Map(),
+      publisherInfo: state.get('publisherInfo') || new Immutable.Map(),
+      braveryDefaults: Immutable.fromJS(siteSettings.braveryDefaults(state, appConfig)),
+      isPreview: frame.get('key') === currentWindow.get('previewFrameKey'),
+      isActive: frameStateUtil.isFrameKeyActive(currentWindow, frame.get('key')),
+      frameSiteSettings: frameSiteSettings,
+      enableNoScript: siteSettingsState.isNoScriptEnabled(state, frameSiteSettings)
+    }
+
+    return Object.assign({}, ownProps, props)
+  }
+
   render () {
     const messageBoxDetail = this.tab && this.tab.get('messageBoxDetail')
     return <div
-      data-partition={frameStateUtil.getPartition(this.frame)}
+      data-partition={frameStateUtil.getPartition(this.props.frame)}
       className={cx({
         frameWrapper: true,
         isPreview: this.props.isPreview,
@@ -1048,12 +1103,12 @@ class Frame extends ImmutableComponent {
         messageBoxDetail
         ? <MessageBox
           isActive={this.props.isActive}
-          tabId={this.frame.get('tabId')}
+          tabId={this.props.frame.get('tabId')}
           detail={messageBoxDetail} />
         : null
       }
     </div>
   }
 }
 
-module.exports = Frame
+module.exports = ReduxComponent.connect(Frame)

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')
@@ -649,10 +649,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) {
@@ -689,7 +686,6 @@ class Main extends ImmutableComponent {
     const sortedFrames = frameStateUtil.getSortedFrames(this.props.windowState)
     const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
     this.frames = {}
-    const allSiteSettings = this.allSiteSettings
     const lastCommittedURL = frameStateUtil.getLastCommittedURL(activeFrame)
     const activeSiteSettings = this.frameSiteSettings(lastCommittedURL)
     const nonPinnedFrames = frameStateUtil.getNonPinnedFrames(this.props.windowState)
@@ -714,7 +710,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') &&
@@ -939,43 +934,10 @@ class Main extends ImmutableComponent {
             sortedFrames.map((frame) =>
               <Frame
                 ref={(node) => { this.frames[frame.get('key')] = node }}
-                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'))}
+                onCloseFrame={this.onCloseFrame}
                 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>