Frame -> redux component

brave · Apr 12, 2017 · 820518d · 820518d
1 parent 7a43578
commit 820518d
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 61 deletions.
diff --git a/app/common/state/aboutHistoryState.js b/app/common/state/aboutHistoryState.js
@@ -4,17 +4,32 @@
 
 const {makeImmutable} = require('./immutableUtil')
 const historyUtil = require('../lib/historyUtil')
+const appActions = require('../../../js/actions/appActions')
 
 const aboutHistoryState = {
   getHistory: (state) => {
     state = makeImmutable(state)
     return state.getIn(['about', 'history'])
   },
+
   setHistory: (state) => {
     state = makeImmutable(state)
     state = state.setIn(['about', 'history', 'entries'],
       historyUtil.getHistory(state.get('sites')))
     return state.setIn(['about', 'history', 'updatedStamp'], new Date().getTime())
+  },
+
+  buildHistory: (state, frame) => {
+    if (frame.get('location') === 'about:history') {
+      const history = this.getHistory(state)
+      if (history) {
+        return history
+      }
+
+      appActions.populateHistory()
+    }
+
+    return null
   }
 }
 

diff --git a/app/common/state/siteState.js b/app/common/state/siteState.js
@@ -0,0 +1,45 @@
+const assert = require('assert')
+const Immutable = require('immutable')
+const { makeImmutable, isMap, isList } = require('./immutableUtil')
+const siteTags = require('../../../js/constants/siteTags')
+const siteSettings = require('../../../js/state/siteSettings')
+const appConfig = require('../../../js//constants/appConfig')
+
+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')
+  },
+
+  getBookmarkFolders: (state) => {
+    const sites = this.getSites(state)
+    return sites.filter((site) => site.get('tags')
+      .includes(siteTags.BOOKMARK_FOLDER)) || new Immutable.Map()
+  },
+
+  getBookmarks: (state) => {
+    const sites = this.getSites(state)
+    return sites.filter((site) => site.get('tags')
+        .includes(siteTags.BOOKMARK)) || new Immutable.Map()
+  },
+
+  getAllSiteSettings: (state, frame) => {
+    if (frame && frame.get('isPrivate')) {
+      return state.get('siteSettings').mergeDeep(state.get('temporarySiteSettings'))
+    }
+    return state.get('siteSettings')
+  },
+
+  enabledNoScript (state, settings) {
+    return siteSettings.activeSettings(settings, state, appConfig).noScript === true
+  }
+}
+
+module.exports = siteState
diff --git a/js/components/frame.js b/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,15 @@ 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 {currentWindowWebContents, 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 siteState = require('../../app/common/state/siteState')
+const tabState = require('../../app/common/state/tabState')
+const aboutHistoryState = require('../../app/common/state/aboutHistoryState')
 
 const WEBRTC_DEFAULT = 'default'
 const WEBRTC_DISABLE_NON_PROXY = 'disable_non_proxied_udp'
@@ -92,7 +95,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')
   }
@@ -109,7 +112,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
@@ -120,7 +123,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
@@ -973,7 +976,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) {
@@ -1009,10 +1012,96 @@ 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 emptyMap = new Immutable.Map()
+    const allSiteSettings = siteState.getAllSiteSettings(state, activeFrame)
+    const frameSiteSettings = frame.get('location')
+      ? siteSettings.getSiteSettingsForURL(allSiteSettings, frame.get('location'))
+      : undefined
+    const baseUrl = getBaseUrl(frame.get('location'))
+
+    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),
+      settings: ['about:preferences', 'about:history', 'about:adblock'].includes(baseUrl)
+        ? state.get('settings') || emptyMap
+        : null,
+      bookmarks: frame.get('location') === 'about:bookmarks'
+        ? siteState.getBookmarks(state)
+        : null,
+      history: aboutHistoryState.buildHistory(state, frame),
+      extensions: ['about:extensions', 'about:preferences'].includes(baseUrl)
+        ? state.get('extensions') || emptyMap
+        : null,
+      preferencesData: frame.get('location') === 'about:preferences#payments'
+        ? state.getIn(['about', 'preferences']) || emptyMap
+        : null,
+      downloads: state.get('downloads') || emptyMap,
+      bookmarkFolders: frame.get('location') === 'about:bookmarks'
+        ? siteState.getBookmarkFolders(state)
+        : null,
+      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'),
+      passwords: state.get('passwords'),
+      adblock: state.get('adblock'),
+      safeBrowsing: state.get('safeBrowsing'),
+      httpsEverywhere: state.get('httpsEverywhere'),
+      trackingProtection: state.get('trackingProtection'),
+      adInsertion: state.get('adInsertion'),
+      noScript: state.get('noScript'),
+      flash: state.get('flash'),
+      widevine: state.get('widevine'),
+      cookieblock: state.get('cookieblock'),
+      allSiteSettings: allSiteSettings,
+      sync: state.get('sync') || new Immutable.Map(),
+      ledgerInfo: state.get('ledgerInfo') || new Immutable.Map(),
+      publisherInfo: state.get('publisherInfo') || new Immutable.Map(),
+      versionInformation: state.getIn(['about', 'brave', 'versionInformation']),
+      braveryDefaults: Immutable.fromJS(siteSettings.braveryDefaults(state, appConfig)),
+      isPreview: frame.get('key') === currentWindow.get('previewFrameKey'),
+      isActive: frameStateUtil.isFrameKeyActive(currentWindow, frame.get('key')),
+      autofillCreditCards: state.getIn(['autofill', 'creditCards']),
+      autofillAddresses: state.getIn(['autofill', 'addresses']),
+      adblockCount: state.getIn(['adblock', 'count']),
+      trackedBlockersCount: state.getIn(['trackingProtection', 'count']),
+      httpsUpgradedCount: state.getIn(['httpsEverywhere', 'count']),
+      newTabDetail: frame.get('location') === 'about:newtab' ? state.getIn(['about', 'newtab']) : null,
+      frameSiteSettings: frameSiteSettings,
+      enableNoScript: siteState.enabledNoScript(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,
@@ -1042,12 +1131,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)
diff --git a/js/components/main.js b/js/components/main.js
@@ -64,6 +64,7 @@ const frameStateUtil = require('../state/frameStateUtil')
 const siteUtil = require('../state/siteUtil')
 const searchProviders = require('../data/searchProviders')
 const defaultBrowserState = require('../../app/common/state/defaultBrowserState')
+const siteState = require('../../app/common/state/siteState')
 
 // Util
 const _ = require('underscore')
@@ -698,10 +699,6 @@ class Main extends ImmutableComponent {
     windowActions.setModalDialogDetail('checkDefaultBrowserDialog')
   }
 
-  enableNoScript (settings) {
-    return siteSettings.activeSettings(settings, this.props.appState, appConfig).noScript === true
-  }
-
   onCloseFrame (activeFrameProps, forceClose = false) {
     windowActions.closeFrame(frameStateUtil.getFrames(this.props.windowState), activeFrameProps, forceClose)
   }
@@ -800,10 +797,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 siteState.getAllSiteSettings(this.props.appState, activeFrame)
   }
 
   frameSiteSettings (location) {
@@ -813,12 +807,6 @@ class Main extends ImmutableComponent {
     return siteSettings.getSiteSettingsForURL(this.allSiteSettings, location)
   }
 
-  frameBraverySettings (location) {
-    return Immutable.fromJS(siteSettings.activeSettings(this.frameSiteSettings(location),
-                                                        this.props.appState,
-                                                        appConfig))
-  }
-
   get activeTabId () {
     const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
     return activeFrame && activeFrame.get('tabId')
@@ -907,7 +895,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 activeSiteSettings = this.activeSiteSettings
     const nonPinnedFrames = frameStateUtil.getNonPinnedFrames(this.props.windowState)
     const tabsPerPage = Number(getSetting(settings.TABS_PER_PAGE))
@@ -932,7 +919,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') &&
@@ -1048,7 +1034,7 @@ class Main extends ImmutableComponent {
                 bookmarkDetail={this.props.windowState.get('bookmarkDetail')}
                 mouseInTitlebar={this.props.windowState.getIn(['ui', 'mouseInTitlebar'])}
                 searchDetail={this.props.windowState.get('searchDetail')}
-                enableNoScript={this.enableNoScript(activeSiteSettings)}
+                enableNoScript={siteState.enabledNoScript(this.props.appState, activeSiteSettings)}
                 settings={this.props.appState.get('settings')}
                 noScriptIsVisible={noScriptIsVisible}
                 menubarVisible={customTitlebar.menubarVisible}
@@ -1277,45 +1263,10 @@ class Main extends ImmutableComponent {
             sortedFrames.map((frame) =>
               <Frame
                 ref={(node) => { this.frames[frame.get('key')] = node }}
-                tabData={this.props.appState.get('tabs').find((tab) => tab.get('tabId') === frame.get('tabId'))}
-                urlBarFocused={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'focused'])}
-                tabIndex={frameStateUtil.getFrameIndex(this.props.windowState, frame.get('key'))}
-                prefOpenInForeground={getSetting(settings.SWITCH_TO_NEW_TABS)}
-                onCloseFrame={this.onCloseFrame}
                 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={this.enableNoScript(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>