Smoother visual transition between selected tabs

Ensures that the gradient used for hiding the title is not visible in the tab's previous colors when a tab switches between active and inactive.
Still allows for transitioning the color of the tab title text.

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

@@ -21,6 +21,7 @@ const isDarwin = platformUtil.isDarwin()
 
 // Styles
 const globalStyles = require('../../styles/global')
+const {theme} = require('../../styles/theme')
 
 class TabTitle extends React.Component {
   mergeProps (state, ownProps) {
@@ -36,7 +37,6 @@ class TabTitle extends React.Component {
     props.displayTitle = titleState.getDisplayTitle(currentWindow, frameKey)
     props.addExtraGutter = tabUIState.addExtraGutterToTitle(currentWindow, frameKey)
     props.isTextWhite = tabUIState.checkIfTextColor(currentWindow, frameKey, 'white')
-    props.gradientColor = tabUIState.getTabEndIconBackgroundColor(currentWindow, frameKey)
     props.tabId = tabId
 
     return props
@@ -46,18 +46,9 @@ class TabTitle extends React.Component {
     if (this.props.isPinned || !this.props.showTabTitle) {
       return null
     }
-    const perPageGradient = StyleSheet.create({
-      tab__title_gradient: {
-        '::after': {
-          background: this.props.gradientColor
-        }
-      }
-    })
-
     return <div data-test-id='tabTitle'
       className={css(
         styles.tab__title,
-        !this.props.isPinned && perPageGradient.tab__title_gradient,
         this.props.addExtraGutter && styles.tab__title_extraGutter,
         (this.props.isDarwin && this.props.isTextWhite) && styles.tab__title_isDarwin,
         // Windows specific style
@@ -82,20 +73,14 @@ const styles = StyleSheet.create({
     minWidth: 0, // see https://stackoverflow.com/a/36247448/4902448
     marginLeft: '6px',
     overflow: 'hidden',
-
-    // this enable us to have gradient text
-    '::after': {
-      zIndex: globalStyles.zindex.zindexTabs,
-      content: '""',
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-      width: '-webkit-fill-available',
-      height: '-webkit-fill-available',
-      // add a pixel margin so the box-shadow of the
-      // webview is not covered by the gradient
-      marginBottom: '1px'
-    }
+    // relative position is required for background-clip
+    position: 'relative',
+    transition: `background ${theme.tab.transitionDurationOut} ${theme.tab.transitionEasingOut}`,
+    // fade text color to transparent if it's too long,
+    // whilst preserving ability to animate the color with a second background layer
+    background: `linear-gradient(to left, var(--tab-background) 0, var(--tab-color) 9px) right top / 9px 100% no-repeat, var(--tab-color)`,
+    WebkitBackgroundClip: 'text !important', // !important is neccessary because aphrodite will put this at top of ruleset :-(
+    color: 'transparent'
   },
 
   tab__title_isDarwin: {