Converts Tabs related components into redux

Resolves brave#8690

app/common/state/tabContentState.js

@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 locale = require('../../../js/l10n')
+const frameStateUtil = require('../../../js/state/frameStateUtil.js')
+
+module.exports.iconSize = 16
+
+const tabContentState = {
+  getDisplayTitle: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+    if (!frame) {
+      return ''
+    }
+
+    // For renderer initiated navigation, make sure we show Untitled
+    // until we know what we're loading.  We should probably do this for
+    // all about: pages that we already know the title for so we don't have
+    // to wait for the title to be parsed.
+    if (frame.get('location') === 'about:blank') {
+      return locale.translation('aboutBlankTitle')
+    } else if (frame.get('location') === 'about:newtab') {
+      return locale.translation('newTab')
+    }
+
+    // YouTube tries to change the title to add a play icon when
+    // there is audio. Since we have our own audio indicator we get
+    // rid of it.
+    return (frame.get('title') || frame.get('location') || '').replace('▶ ', '')
+  }
+}
+
+module.exports = tabContentState

app/common/state/tabState.js

@@ -2,11 +2,15 @@
  * 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 { makeImmutable, isMap, isList } = require('./immutableUtil')
 const Immutable = require('immutable')
 const assert = require('assert')
+
+// State
 const frameState = require('./frameState')
 const windowState = require('./windowState')
+
+// utils
+const { makeImmutable, isMap, isList } = require('./immutableUtil')
 // this file should eventually replace frameStateUtil
 const frameStateUtil = require('../../../js/state/frameStateUtil')
 const {isLocationBookmarked} = require('../../../js/state/siteUtil')
@@ -490,10 +494,6 @@ const tabState = {
     }
   },
 
-  isPinned: (state, tabId) => {
-    return tabState.getTabPropertyByTabId(state, tabId, 'pinned', false)
-  },
-
   getTitle: (state, tabId) => {
     return tabState.getTabPropertyByTabId(state, tabId, 'title', '')
   },

app/renderer/components/bookmarks/bookmarkToolbarButton.js

@@ -25,7 +25,7 @@ const dragTypes = require('../../../../js/constants/dragTypes')
 const siteUtil = require('../../../../js/state/siteUtil')
 const {getCurrentWindowId} = require('../../currentWindow')
 const dnd = require('../../../../js/dnd')
-const iconSize = require('../../../common/lib/faviconUtil').iconSize
+const {iconSize} = require('../../../common/state/tabContentState')
 const cx = require('../../../../js/lib/classSet')
 
 // Styles

app/renderer/components/bookmarks/bookmarksToolbar.js

@@ -30,7 +30,7 @@ const cx = require('../../../../js/lib/classSet')
 const dnd = require('../../../../js/dnd')
 const dndData = require('../../../../js/dndData')
 const calculateTextWidth = require('../../../../js/lib/textCalculator').calculateTextWidth
-const iconSize = require('../../../common/lib/faviconUtil').iconSize
+const {iconSize} = require('../../../common/state/tabContentState')
 
 // Styles
 const globalStyles = require('../styles/global')

app/renderer/components/main/main.js

@@ -13,7 +13,7 @@ const appActions = require('../../../../js/actions/appActions')
 const windowActions = require('../../../../js/actions/windowActions')
 const webviewActions = require('../../../../js/actions/webviewActions')
 const contextMenus = require('../../../../js/contextMenus')
-const getSetting = require('../../../../js/settings').getSetting
+const {getSetting} = require('../../../../js/settings')
 
 // Components
 const Navigator = require('../navigation/navigator')
@@ -58,7 +58,8 @@ const defaultBrowserState = require('../../../common/state/defaultBrowserState')
 const shieldState = require('../../../common/state/shieldState')
 const siteSettingsState = require('../../../common/state/siteSettingsState')
 const menuBarState = require('../../../common/state/menuBarState')
-const windowState = require('../../../common/state/windowState.js')
+const windowState = require('../../../common/state/windowState')
+const windowStore = require('../../../../js/stores/windowStore')
 
 // Util
 const _ = require('underscore')
@@ -84,7 +85,6 @@ class Main extends ImmutableComponent {
     this.onHideNoScript = this.onHideNoScript.bind(this)
     this.onHideReleaseNotes = this.onHideReleaseNotes.bind(this)
     this.onHideCheckDefaultBrowserDialog = this.onHideCheckDefaultBrowserDialog.bind(this)
-    this.onHamburgerMenu = this.onHamburgerMenu.bind(this)
     this.onTabContextMenu = this.onTabContextMenu.bind(this)
     this.onFind = this.onFind.bind(this)
     this.onFindHide = this.onFindHide.bind(this)
@@ -503,6 +503,22 @@ class Main extends ImmutableComponent {
       self.resetAltMenuProcessing()
       windowActions.onBlur(getCurrentWindowId())
     }
+
+    windowStore.addChangeListener(function () {
+      const paymentsEnabled = getSetting(settings.PAYMENTS_ENABLED)
+      if (paymentsEnabled) {
+        const windowState = self.props.windowState
+        const tabs = windowState && windowState.get('tabs')
+        if (tabs) {
+          try {
+            const presentP = tabs.some((tab) => {
+              return tab.get('location') === 'about:preferences#payments'
+            })
+            ipc.send(messages.LEDGER_PAYMENTS_PRESENT, presentP)
+          } catch (ex) { }
+        }
+      }
+    })
   }
 
   checkForTitleMode () {
@@ -527,11 +543,6 @@ class Main extends ImmutableComponent {
     }
   }
 
-  onHamburgerMenu (e) {
-    const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
-    contextMenus.onHamburgerMenu((activeFrame && activeFrame.get('location')) || '', e)
-  }
-
   onHideSiteInfo () {
     windowActions.setSiteInfoVisible(false)
   }
@@ -695,7 +706,6 @@ class Main extends ImmutableComponent {
 
     const notifications = this.props.appState.get('notifications')
     const hasNotifications = notifications && notifications.size
-    const notificationBarOrigin = notifications.map(bar => bar.get('frameOrigin'))
 
     return <div id='window'
       className={cx({
@@ -847,27 +857,7 @@ class Main extends ImmutableComponent {
             : null
           }
         </div>
-        <TabsToolbar
-          paintTabs={getSetting(settings.PAINT_TABS)}
-          shouldAllowWindowDrag={shouldAllowWindowDrag}
-          dragData={this.props.appState.getIn(['dragData', 'type']) === dragTypes.TAB && this.props.appState.get('dragData')}
-          previewTabs={getSetting(settings.SHOW_TAB_PREVIEWS)}
-          tabsPerTabPage={tabsPerPage}
-          tabPageIndex={this.props.windowState.getIn(['ui', 'tabs', 'tabPageIndex'])}
-          previewTabPageIndex={this.props.windowState.getIn(['ui', 'tabs', 'previewTabPageIndex'])}
-          fixTabWidth={this.props.windowState.getIn(['ui', 'tabs', 'fixTabWidth'])}
-          frames={this.props.windowState.get('frames')}
-          sites={appStateSites}
-          key='tab-bar'
-          activeFrameKey={(activeFrame && activeFrame.get('key')) || undefined}
-          onMenu={this.onHamburgerMenu}
-          notificationBarActive={notificationBarOrigin}
-          hasTabInFullScreen={
-            sortedFrames
-              .map((frame) => frame.get('isFullScreen'))
-              .some(fullScreenMode => fullScreenMode === true)
-          }
-        />
+        <TabsToolbar key='tab-bar' />
         {
           hasNotifications && activeFrame
           ? <NotificationBar notifications={notifications} activeFrame={activeFrame} />

app/renderer/components/tabs/content/audioTabIcon.js

@@ -6,44 +6,66 @@ const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
-const ImmutableComponent = require('../../immutableComponent')
+const ReduxComponent = require('../../reduxComponent')
 const TabIcon = require('./tabIcon')
 
+// State
+const tabState = require('../../../../common/state/tabState')
+
+// Actions
+const windowActions = require('../../../../../js/actions/windowActions')
+
+// Utils
+const frameStateUtil = require('../../../../../js/state/frameStateUtil')
+
 // Styles
 const globalStyles = require('../../styles/global')
 const tabStyles = require('../../styles/tab')
 
-class AudioTabIcon extends ImmutableComponent {
-  get pageCanPlayAudio () {
-    return !!this.props.frame.get('audioPlaybackActive')
+class AudioTabIcon extends React.Component {
+  constructor () {
+    super()
+    this.toggleMute = this.toggleMute.bind(this)
   }
 
-  get shouldShowAudioIcon () {
-    // We switch to blue top bar for all breakpoints but default
-    return this.props.frame.get('breakpoint') === 'default'
+  get audioIcon () {
+    const isMuted = this.props.pageCanPlayAudio && !this.props.audioMuted
+
+    return isMuted
+      ? globalStyles.appIcons.volumeOn
+      : globalStyles.appIcons.volumeOff
   }
 
-  get mutedState () {
-    return this.pageCanPlayAudio && !!this.props.frame.get('audioMuted')
+  toggleMute (event) {
+    event.stopPropagation()
+    windowActions.setAudioMuted(this.props.frameKey, this.props.tabId, !this.props.audioMuted)
   }
 
-  get audioIcon () {
-    return !this.mutedState
-      ? globalStyles.appIcons.volumeOn
-      : globalStyles.appIcons.volumeOff
+  mergeProps (state, dispatchProps, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const frame = frameStateUtil.getFrameByKey(currentWindow, ownProps.frameKey)
+
+    const props = {}
+    // used in renderer
+
+    // used in other functions
+    props.frameKey = ownProps.frameKey
+    props.pageCanPlayAudio = !!frame.get('audioPlaybackActive')
+    props.tabId = frame ? frame.get('tabId') : tabState.TAB_ID_NONE
+    props.audioMuted = frame.get('audioMuted')
+
+    return props
   }
 
   render () {
-    return this.pageCanPlayAudio && this.shouldShowAudioIcon
-      ? <TabIcon
-        className={css(tabStyles.icon, styles.audioIcon)}
-        symbol={this.audioIcon}
-        onClick={this.props.onClick} />
-      : null
+    return <TabIcon
+      className={css(tabStyles.icon, styles.audioIcon)}
+      symbol={this.audioIcon}
+      onClick={this.toggleMute} />
   }
 }
 
-module.exports = AudioTabIcon
+module.exports = ReduxComponent.connect(AudioTabIcon)
 
 const styles = StyleSheet.create({
   audioIcon: {