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/theme.js

@@ -32,7 +32,7 @@
         }
       },
       private: {
-        background: 'rgba(75, 60, 110, 0.2)',
+        background: '#d9d6e0',
         color: '#4b3c6e'
       },
       content: {

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

@@ -104,6 +104,7 @@ const styles = StyleSheet.create({
     backgroundRepeat: 'no-repeat',
     width: spacing.closeIconSize,
     height: spacing.closeIconSize,
+    marginRight: spacing.defaultTabMargin,
 
     ':hover': {
       filter: 'none'

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

@@ -251,8 +251,6 @@ class Tab extends React.Component {
     props.frameKey = ownProps.frameKey
     props.isPrivateTab = frame.get('isPrivate')
     props.notificationBarActive = notificationBarActive
-
-    // used in renderer
     props.frameKey = frameKey
     props.isPinnedTab = isPinned
     props.isPrivateTab = privateState.isPrivateTab(currentWindow, frameKey)
@@ -263,6 +261,7 @@ class Tab extends React.Component {
     props.partOfFullPageSet = ownProps.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.totalTabs = state.get('tabs').size
@@ -285,6 +284,13 @@ class Tab extends React.Component {
         }
       }
     })
+    const perPageGradient = StyleSheet.create({
+      tab_gradient: {
+        '::before': {
+          background: this.props.gradientColor
+        }
+      }
+    })
     return <div
       data-tab-area
       className={cx({
@@ -311,6 +317,7 @@ 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,
@@ -373,6 +380,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'
     }
   },
 
@@ -417,6 +434,7 @@ const styles = StyleSheet.create({
   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