make tabTitle work for gradient calc instead of tab

Auditors: @luixxiul Address brave#10691 Follow-up of sha 33c5d10
syuan100 · Nov 9, 2017 · a95fe3d · a95fe3d
1 parent 7af214b
commit a95fe3d
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 27 deletions.
diff --git a/app/renderer/components/styles/theme.js b/app/renderer/components/styles/theme.js
@@ -10,11 +10,10 @@
   */
   module.exports.theme = {
     tab: {
-      // mimics chrome hover effect
       transition: `
-        background-color 200ms cubic-bezier(0.26, 0.63, 0.39, 0.65),
-        color 200ms cubic-bezier(0.26, 0.63, 0.39, 0.65)
-      `,
+      background-color 150ms cubic-bezier(0.26, 0.63, 0.39, 0.65),
+      color 150ms cubic-bezier(0.26, 0.63, 0.39, 0.65)
+    `,
       background: '#ddd',
       borderColor: '#bbb',
       color: '#5a5a5a',

diff --git a/app/renderer/components/tabs/content/newSessionIcon.js b/app/renderer/components/tabs/content/newSessionIcon.js
@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
     animationDuration: '200ms',
     animationFillMode: 'forwards',
 
-    zIndex: globalStyles.zindex.zindexWindow,
+    zIndex: globalStyles.zindex.zindexTabsThumbnail,
     boxSizing: 'border-box',
     display: 'flex',
     alignItems: 'center',

diff --git a/app/renderer/components/tabs/content/privateIcon.js b/app/renderer/components/tabs/content/privateIcon.js
@@ -67,7 +67,7 @@ const styles = StyleSheet.create({
     animationDuration: '200ms',
     animationFillMode: 'forwards',
 
-    zIndex: globalStyles.zindex.zindexWindow,
+    zIndex: globalStyles.zindex.zindexTabsThumbnail,
     boxSizing: 'border-box',
     WebkitMaskRepeat: 'no-repeat',
     WebkitMaskPosition: 'center',

diff --git a/app/renderer/components/tabs/content/tabTitle.js b/app/renderer/components/tabs/content/tabTitle.js
@@ -36,6 +36,7 @@ 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
@@ -45,10 +46,18 @@ 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
@@ -72,7 +81,21 @@ const styles = StyleSheet.create({
     lineHeight: '1.6',
     minWidth: 0, // see https://stackoverflow.com/a/36247448/4902448
     marginLeft: '4px',
-    overflow: 'hidden'
+    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'
+    }
   },
 
   tab__title_isDarwin: {

diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js
@@ -266,7 +266,6 @@ 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')
@@ -288,13 +287,6 @@ class Tab extends React.Component {
         }
       }
     })
-    const perPageGradient = StyleSheet.create({
-      tab_gradient: {
-        '::after': {
-          background: this.props.gradientColor
-        }
-      }
-    })
     return <div
       data-tab-area
       className={cx({
@@ -321,7 +313,6 @@ class Tab extends React.Component {
         ref={(node) => { this.tabNode = node }}
         className={css(
           styles.tab,
-          !this.props.isPinnedTab && perPageGradient.tab_gradient,
           // Windows specific style
           isWindows && styles.tab_forWindows,
           this.props.isPinnedTab && styles.tab_pinned,
@@ -381,17 +372,6 @@ const styles = StyleSheet.create({
 
     ':hover': {
       background: theme.tab.hover.background
-    },
-
-    // this enable us to have gradient text
-    '::before': {
-      zIndex: globalStyles.zindex.zindexTabs,
-      content: '""',
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-      width: '-webkit-fill-available',
-      height: '-webkit-fill-available'
     }
   },