Refactor of tabs related components (redux component)

app/common/state/tabContentState.js

@@ -0,0 +1,160 @@
+/* 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/. */
+
+// Constants
+const settings = require('../../../js/constants/settings')
+const {braveExtensionId} = require('../../../js/constants/config')
+
+// Utils
+const locale = require('../../../js/l10n')
+const frameStateUtil = require('../../../js/state/frameStateUtil')
+const {getTextColorForBackground} = require('../../../js/lib/color')
+const {hasBreakpoint} = require('../../renderer/lib/tabUtil')
+const {getSetting} = require('../../../js/settings')
+
+// Styles
+const styles = require('../../renderer/components/styles/global')
+
+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('▶ ', '')
+  },
+
+  hasTabInFullScreen: (state) => {
+    return state.get('frames')
+      .map((frame) => frame.get('isFullScreen'))
+      .some(fullScreenMode => fullScreenMode === true)
+  },
+
+  getThemeColor: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+    return getSetting(settings.PAINT_TABS) && (frame.get('themeColor') || frame.get('computedThemeColor'))
+  },
+
+  canPlayAudio (state, frameKey) {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+    return frame.get('audioPlaybackActive') || frame.get('audioMuted')
+  },
+
+  isTabLoading: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+    return frame &&
+      (
+        frame.get('loading') ||
+        frame.get('location') === 'about:blank'
+      ) &&
+      (
+        !frame.get('provisionalLocation') ||
+        !frame.get('provisionalLocation').startsWith(`chrome-extension://${braveExtensionId}/`)
+      )
+  },
+
+  getPageIndex: (state) => {
+    const tabPageIndex = state.getIn(['ui', 'tabs', 'tabPageIndex'])
+    const previewTabPageIndex = state.getIn(['ui', 'tabs', 'previewTabPageIndex'])
+
+    return previewTabPageIndex !== undefined ? previewTabPageIndex : tabPageIndex
+  },
+
+  isMediumView: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+    return frame
+      ? ['large', 'largeMedium'].includes(frame.get('breakpoint'))
+      : false
+  },
+
+  isNarrowView: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+    return frame
+      ? ['medium', 'mediumSmall', 'small', 'extraSmall', 'smallest'].includes(frame.get('breakpoint'))
+      : false
+  },
+
+  isNarrowestView: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+    return frame
+      ? ['extraSmall', 'smallest'].includes(frame.get('breakpoint'))
+      : false
+  },
+
+  getTabIconColor: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+    const isActive = frameStateUtil.isFrameKeyActive(state, frameKey)
+
+    if (!frame) {
+      return ''
+    }
+
+    const themeColor = frame.get('themeColor') || frame.get('computedThemeColor')
+    const activeNonPrivateTab = !frame.get('isPrivate') && isActive
+    const isPrivateTab = frame.get('isPrivate') && (isActive || frame.get('hoverState'))
+    const defaultColor = isPrivateTab ? styles.color.white100 : styles.color.black100
+    const isPaintTabs = getSetting(settings.PAINT_TABS)
+
+    return activeNonPrivateTab && isPaintTabs && !!themeColor
+      ? getTextColorForBackground(themeColor)
+      : defaultColor
+  },
+
+  /**
+   * Check whether or not closeTab icon is always visible (fixed) in tab
+   */
+  hasFixedCloseIcon: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+    const isActive = frameStateUtil.isFrameKeyActive(state, frameKey)
+
+    return (
+      isActive &&
+      // Larger sizes still have a relative closeIcon
+      // We don't resize closeIcon as we do with favicon so don't show it (smallest)
+      !hasBreakpoint(frame.get('breakpoint'), ['default', 'large', 'smallest'])
+    )
+  },
+
+  /**
+   * Check whether or not closeTab icon is relative to hover state
+   */
+  hasRelativeCloseIcon: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+    return frame.get('hoverState') && hasBreakpoint(frame.get('breakpoint'), ['default', 'large'])
+  },
+
+  /**
+   * Check whether or not private or newSession icon should be visible
+   */
+  hasVisibleSecondaryIcon: (state, frameKey) => {
+    const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+    return (
+      // Hide icon on hover
+      !tabContentState.hasRelativeCloseIcon(state, frameKey) &&
+      // If closeIcon is fixed then there's no room for another icon
+      !tabContentState.hasFixedCloseIcon(state, frameKey) &&
+      // completely hide it for small sizes
+      !hasBreakpoint(frame.get('breakpoint'), ['mediumSmall', 'small', 'extraSmall', 'smallest'])
+    )
+  }
+}
+
+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

@@ -20,12 +20,12 @@ const windowStore = require('../../../../js/stores/windowStore')
 // Constants
 const siteTags = require('../../../../js/constants/siteTags')
 const dragTypes = require('../../../../js/constants/dragTypes')
+const {iconSize} = require('../../../../js/constants/config')
 
 // Utils
 const siteUtil = require('../../../../js/state/siteUtil')
 const {getCurrentWindowId} = require('../../currentWindow')
 const dnd = require('../../../../js/dnd')
-const iconSize = require('../../../common/lib/faviconUtil').iconSize
 const cx = require('../../../../js/lib/classSet')
 
 // Styles

app/renderer/components/bookmarks/bookmarksToolbar.js

@@ -22,15 +22,15 @@ const windowStore = require('../../../../js/stores/windowStore')
 // Constants
 const siteTags = require('../../../../js/constants/siteTags')
 const dragTypes = require('../../../../js/constants/dragTypes')
+const {iconSize} = require('../../../../js/constants/config')
 
 // Utils
 const siteUtil = require('../../../../js/state/siteUtil')
 const contextMenus = require('../../../../js/contextMenus')
 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 {calculateTextWidth} = require('../../../../js/lib/textCalculator')
 
 // 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} />