add gradient layer to mimic current title gradient

- text w/ gradient can be buggy. Let's do it with a layer
Auditors: @luixxiul
fix #8414
fix #9398

app/common/state/tabUIState.js

@@ -6,6 +6,8 @@
 const settings = require('../../../js/constants/settings')
 
 // State helpers
+const partitionState = require('../../common/state/tabContentState/partitionState')
+const privateState = require('../../common/state/tabContentState/privateState')
 const closeState = require('../../common/state/tabContentState/closeState')
 const frameStateUtil = require('../../../js/state/frameStateUtil')
 
@@ -18,6 +20,7 @@ const {getSetting} = require('../../../js/settings')
 
 // Styles
 const {intersection} = require('../../renderer/components/styles/global')
+const {theme} = require('../../renderer/components/styles/theme')
 
 module.exports.getThemeColor = (state, frameKey) => {
   const frame = frameStateUtil.getFrameByKey(state, frameKey)
@@ -114,3 +117,44 @@ module.exports.centralizeTabIcons = (state, frameKey, isPinned) => {
 
   return isPinned || isEntryIntersected(state, 'tabs', intersection.at40)
 }
+
+module.exports.getTabEndIconBackgroundColor = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    if (process.env.NODE_ENV !== 'test') {
+      console.error('Unable to find frame for getTabEndIconBackgroundColor method')
+    }
+    return false
+  }
+
+  const themeColor = module.exports.getThemeColor(state, frameKey)
+  const isPrivate = privateState.isPrivateTab(state, frameKey)
+  const isPartition = partitionState.isPartitionTab(state, frameKey)
+  const isHover = frameStateUtil.getTabHoverState(state, frameKey)
+  const isActive = frameStateUtil.isFrameKeyActive(state, frameKey)
+  const hasCloseIcon = closeState.showCloseTabIcon(state, frameKey)
+  const isIntersecting = isEntryIntersected(state, 'tabs', intersection.at40)
+
+  let backgroundColor = theme.tab.background
+
+  if (isActive && themeColor) {
+    backgroundColor = themeColor
+  }
+  if (isActive && !themeColor) {
+    backgroundColor = theme.tab.active.background
+  }
+  if (isIntersecting) {
+    backgroundColor = 'transparent'
+  }
+  if (!isActive && isPrivate) {
+    backgroundColor = theme.tab.private.background
+  }
+  if ((isActive || isHover) && isPrivate) {
+    backgroundColor = theme.tab.active.private.background
+  }
+
+  return isPartition || isPrivate || hasCloseIcon
+    ? `linear-gradient(to left, ${backgroundColor} 13%, transparent 30%)`
+    : `linear-gradient(to left, ${backgroundColor} 0%, transparent 20%)`
+}

app/renderer/components/styles/global.js

@@ -1,18 +1,18 @@
 /* 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/. */
+* 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 {opacityIncreaseKeyframes} = require('./animations')
 
 /**
- * Use this file when the style you need
- * is applied in more than one element, or depends on it
- * Use theme.js file to include colors that can be customized
- *
- * TODO:
- * remove unnecessary styles properties (as items get refactored)
- * migrate customizable options to theme.js
- */
+* Use this file when the style you need
+* is applied in more than one element, or depends on it
+* Use theme.js file to include colors that can be customized
+*
+* TODO:
+* remove unnecessary styles properties (as items get refactored)
+* migrate customizable options to theme.js
+*/
 
 const globalStyles = {
   defaultFontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI"` +
@@ -214,7 +214,7 @@ const globalStyles = {
     zindexWindowIsPreview: '1100',
     zindexDownloadsBar: '1000',
     zindexTabs: '1000',
-    zindexTabsAudioTopBorder: '10001',
+    zindexTabsAudioTopBorder: '1001',
     zindexTabsThumbnail: '1100',
     zindexTabsDragIndicator: '1100',
     zindexNavigationBar: '2000',

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

@@ -58,12 +58,14 @@ module.exports = ReduxComponent.connect(PrivateIcon)
 
 const styles = StyleSheet.create({
   private__icon: {
+    zIndex: 99,
     boxSizing: 'border-box',
     WebkitMaskRepeat: 'no-repeat',
     WebkitMaskPosition: 'center',
     WebkitMaskImage: `url(${privateSvg})`,
     WebkitMaskSize: globalStyles.spacing.sessionIconSize,
     width: globalStyles.spacing.sessionIconSize,
-    height: globalStyles.spacing.sessionIconSize
+    height: globalStyles.spacing.sessionIconSize,
+    marginRight: globalStyles.spacing.defaultTabMargin
   }
 })

app/renderer/components/tabs/tab.js

@@ -1,6 +1,6 @@
 /* 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/. */
+* 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 React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
@@ -250,7 +250,6 @@ class Tab extends React.Component {
     const props = {}
     // TODO: this should have its own method
     props.notificationBarActive = notificationBarActive
-    // used in renderer
     props.frameKey = frameKey
     props.isPinnedTab = isPinned
     props.isPrivateTab = privateState.isPrivateTab(currentWindow, frameKey)
@@ -261,6 +260,7 @@ class Tab extends React.Component {
     props.partOfFullPageSet = partOfFullPageSet
     props.showAudioTopBorder = audioState.showAudioTopBorder(currentWindow, frameKey, isPinned)
     props.centralizeTabIcons = tabUIState.centralizeTabIcons(currentWindow, frameKey, isPinned)
+    props.gradientColor = tabUIState.getTabEndIconBackgroundColor(currentWindow, frameKey)
 
     // used in other functions
     props.dragData = state.getIn(['dragData', 'type']) === dragTypes.TAB && state.get('dragData')
@@ -282,6 +282,13 @@ class Tab extends React.Component {
         }
       }
     })
+    const perPageGradient = StyleSheet.create({
+      tab_gradient: {
+        '::before': {
+          background: this.props.gradientColor
+        }
+      }
+    })
     return <div
       data-tab-area
       className={cx({
@@ -308,12 +315,13 @@ class Tab extends React.Component {
         ref={(node) => { this.tabNode = node }}
         className={css(
           styles.tab,
+          perPageGradient.tab_gradient,
           // Windows specific style
           isWindows && styles.tab_forWindows,
           this.props.isPinnedTab && styles.tab_pinned,
           this.props.isActive && styles.tab_active,
-          this.props.showAudioTopBorder && styles.tab_audioTopBorder,
           this.props.isActive && this.props.themeColor && perPageStyles.tab_themeColor,
+          this.props.showAudioTopBorder && styles.tab_audioTopBorder,
           // Private color should override themeColor
           this.props.isPrivateTab && styles.tab_private,
           this.props.isActive && this.props.isPrivateTab && styles.tab_active_private,
@@ -336,7 +344,7 @@ class Tab extends React.Component {
         <div className={css(
           styles.tab__identity,
           this.props.centralizeTabIcons && styles.tab__content_centered
-          )}>
+        )}>
           <Favicon tabId={this.props.tabId} />
           <AudioTabIcon tabId={this.props.tabId} />
           <TabTitle tabId={this.props.tabId} />
@@ -370,6 +378,16 @@ const styles = StyleSheet.create({
 
     ':hover': {
       background: theme.tab.hover.background
+    },
+
+    // this enable us to have gradient text
+    '::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '-webkit-fill-available',
+      height: '-webkit-fill-available'
     }
   },
 
@@ -378,6 +396,12 @@ const styles = StyleSheet.create({
     color: theme.tab.forWindows.color
   },
 
+  tab_pinned: {
+    padding: 0,
+    width: '28px',
+    justifyContent: 'center'
+  },
+
   tab_active: {
     background: theme.tab.active.background,
 
@@ -386,18 +410,6 @@ const styles = StyleSheet.create({
     }
   },
 
-  // The sentinel is responsible to respond to tabs
-  // intersection state. This is an empty hidden element
-  // which `width` value shouldn't be changed unless the intersection
-  // point needs to be edited.
-  tab__sentinel: {
-    position: 'absolute',
-    left: 0,
-    height: '1px',
-    background: 'transparent',
-    width: globalStyles.spacing.sentinelSize
-  },
-
   tab_audioTopBorder: {
     '::before': {
       content: `''`,
@@ -411,13 +423,26 @@ const styles = StyleSheet.create({
     }
   },
 
+  // The sentinel is responsible to respond to tabs
+  // intersection state. This is an empty hidden element
+  // which `width` value shouldn't be changed unless the intersection
+  // point needs to be edited.
+  tab__sentinel: {
+    position: 'absolute',
+    left: 0,
+    height: '1px',
+    background: 'transparent',
+    width: globalStyles.spacing.sentinelSize
+  },
+
   tab__identity: {
     justifyContent: 'flex-start',
     alignItems: 'center',
+    overflow: 'hidden',
     display: 'flex',
     flex: '1',
     minWidth: '0', // @see https://bugzilla.mozilla.org/show_bug.cgi?id=1108514#c5
-    marginLeft: globalStyles.spacing.defaultTabMargin
+    margin: `0 ${globalStyles.spacing.defaultTabMargin}`
   },
 
   tab__content_centered: {
@@ -427,12 +452,6 @@ const styles = StyleSheet.create({
     margin: 0
   },
 
-  tab_pinned: {
-    padding: 0,
-    width: '28px',
-    justifyContent: 'center'
-  },
-
   tab_active_private: {
     background: theme.tab.active.private.background,
     color: theme.tab.active.private.color,