Merge pull request #12565 from brave/styles-tab-preview

Tab style updates x 8
brave · Mar 16, 2018 · fbb45d2 · fbb45d2
2 parents 49523fa + c825159
commit fbb45d2
Show file tree

Hide file tree

Showing 26 changed files with 518 additions and 438 deletions.
diff --git a/app/common/state/tabContentState/titleState.js b/app/common/state/tabContentState/titleState.js
@@ -8,6 +8,7 @@
  const partitionState = require('../tabContentState/partitionState')
  const privateState = require('../tabContentState/privateState')
  const frameStateUtil = require('../../../../js/state/frameStateUtil')
+ const tabUIState = require('../tabUIState')
 
  // Utils
  const {isEntryIntersected} = require('../../../../app/renderer/lib/observerUtil')
@@ -26,11 +27,13 @@
    const isActive = frameStateUtil.isFrameKeyActive(state, frameKey)
    const isPartition = partitionState.isPartitionTab(state, frameKey)
    const isPrivate = privateState.isPrivateTab(state, frameKey)
-   const secondaryIconVisible = !isNewTabPage && (isPartition || isPrivate || isActive)
+   const secondaryIconVisible = !isNewTabPage &&
+    (isPartition || isPrivate || isActive) &&
+    tabUIState.showTabEndIcon(state, frameKey)
 
    // If title is being intersected by ~half with other icons visible
    // such as closeTab (activeTab) or session icons, do not show it
-   if (isEntryIntersected(state, 'tabs', intersection.at45) && secondaryIconVisible) {
+   if (isEntryIntersected(state, 'tabs', intersection.at46) && secondaryIconVisible) {
      return false
    }
 

diff --git a/app/common/state/tabUIState.js b/app/common/state/tabUIState.js
@@ -6,8 +6,6 @@
 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')
 
@@ -20,7 +18,6 @@ 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)
@@ -76,7 +73,7 @@ module.exports.showTabEndIcon = (state, frameKey) => {
   return (
     !closeState.hasFixedCloseIcon(state, frameKey) &&
     !closeState.hasRelativeCloseIcon(state, frameKey) &&
-    !isEntryIntersected(state, 'tabs', intersection.at40)
+    !isEntryIntersected(state, 'tabs', intersection.at46)
   )
 }
 
@@ -99,41 +96,3 @@ 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) {
-    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} 10px, transparent 40px)`
-    : `linear-gradient(to left, ${backgroundColor} 0, transparent 12px)`
-}
diff --git a/app/extensions/brave/img/tabs/close_btn.svg b/app/extensions/brave/img/tabs/close_btn.svg
diff --git a/app/renderer/components/frame/frame.js b/app/renderer/components/frame/frame.js
@@ -869,12 +869,14 @@ class Frame extends React.Component {
     const contextMenu = currentWindow.get('contextMenuDetail')
     const tab = tabId && tabId > -1 && tabState.getByTabId(state, tabId)
 
+    const previewFrameKey = currentWindow.get('previewFrameKey')
+
     const props = {}
     // used in renderer
     props.transitionState = ownProps.transitionState
     props.partition = frameStateUtil.getPartition(frame)
     props.isFullScreen = frame.get('isFullScreen')
-    props.isPreview = frame.get('key') === currentWindow.get('previewFrameKey')
+    props.isPreview = frame.get('key') === previewFrameKey
     props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, frame.get('key'))
     props.showFullScreenWarning = frame.get('showFullScreenWarning')
     props.location = location
@@ -956,8 +958,7 @@ class Frame extends React.Component {
       }
       <div ref={(node) => { this.webviewContainer = node }}
         className={cx({
-          webviewContainer: true,
-          isPreview: this.props.isPreview
+          webviewContainer: true
         })} />
       <HrefPreview frameKey={this.props.frameKey} />
       {

diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js
@@ -574,6 +574,7 @@ class Main extends React.Component {
         item.get('frameOrigin') ? activeOrigin === item.get('frameOrigin') : true).size > 0
     props.showFindBar = activeFrame.get('findbarShown') && !activeFrame.get('isFullScreen')
     props.sortedFrames = frameStateUtil.getSortedFrameKeys(currentWindow)
+    props.hasFramePreview = currentWindow.get('previewFrameKey') != null
     props.showDownloadBar = currentWindow.getIn(['ui', 'downloadsToolbar', 'isVisible']) &&
       state.get('downloads') && state.get('downloads').size > 0
     props.title = activeFrame.get('title')
@@ -736,7 +737,10 @@ class Main extends React.Component {
         }
       </div>
       <div className='mainContainer'>
-        <TransitionGroup className='tabContainer'>
+        <TransitionGroup className={cx({
+          tabContainer: true,
+          hasFramePreview: this.props.hasFramePreview
+        })}>
           {
             this.props.sortedFrames.map((frameKey) =>
               <Transition

diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -32,7 +32,7 @@ const globalStyles = {
     noIntersection: 1,
     at75: 0.75,
     at60: 0.6,
-    at45: 0.45,
+    at46: 0.46,
     at40: 0.4,
     at30: 0.3,
     at20: 0.20,
@@ -150,7 +150,8 @@ const globalStyles = {
     buttonWidth: '25px',
     navbarHeight: '36px',
     downloadsBarHeight: '60px',
-    tabsToolbarHeight: '26px',
+    // This includes the toolbar's borders
+    tabsToolbarHeight: '29px',
     tabPagesHeight: '7px',
     bookmarkHangerMaxWidth: '350px',
     bookmarksToolbarHeight: '24px',
@@ -176,12 +177,12 @@ const globalStyles = {
     aboutPageDetailsPageWidth: '704px',
     aboutPageSectionPadding: '24px',
     aboutPageSectionMargin: '10px',
-    defaultTabMargin: '6px',
+    defaultTabMargin: '10px',
     defaultIconPadding: '2px',
     iconSize: '16px',
-    sessionIconSize: '15px',
-    closeIconSize: '13px',
-    newSessionIconSize: '13px',
+    sessionIconSize: '14px',
+    closeIconSize: '14px',
+    newSessionIconSize: '14px',
     narrowIconSize: '12px',
     dialogWidth: '422px',
     dialogSmallWidth: '350px',
@@ -231,7 +232,6 @@ const globalStyles = {
     zindexWindowIsPreview: '1100',
     zindexDownloadsBar: '1000',
     zindexTabs: '1000',
-    zindexTabsAudioTopBorder: '1001',
     zindexTabsThumbnail: '1100',
     zindexNavigationBar: '2000',
     zindexUrlbarNotLegend: '2100',

diff --git a/app/renderer/components/styles/theme.js b/app/renderer/components/styles/theme.js
@@ -44,11 +44,11 @@
 
     filter: {
       makeWhite: 'brightness(0) invert(1)',
-      whiteShadow: 'drop-shadow(0px 0px 2px rgb(255, 255, 255))'
+      whiteShadow: 'drop-shadow(-10px 0px 12px rgb(255, 255, 255))'
     },
 
     tabsToolbar: {
-      backgroundColor: '#ddd',
+      backgroundColor: '#CDD1D5',
 
       border: {
         color: '#bbb'
@@ -137,36 +137,63 @@
     },
 
     tab: {
-      transition: `
-      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',
+      transitionDurationOut: '400ms',
+      transitionDurationIn: '200ms',
+      transitionEasingOut: 'ease-in',
+      transitionEasingIn: 'ease-out',
+      background: 'rgb(205,209,213)',
       borderColor: '#bbb',
-      color: '#5a5a5a',
-
-      hover: {
-        background: 'rgba(255, 255, 255, 0.4)'
+      borderWidth: 1,
+      color: '#222',
+      identityHeight: globalStyles.spacing.iconSize,
+      defaultFaviconColor: globalStyles.color.mediumGray,
+      defaultFaviconColorLight: '#fff',
+
+      closeButton: {
+        background: 'transparent',
+        borderRadius: '2px',
+        active: {
+          background: '#cb2c00'
+        },
+        hover: {
+          color: 'white',
+          background: '#fd4f01'
+        }
       },
 
-      forWindows: {
-        color: '#555'
+      hover: {
+        background: 'rgb(219,221,223)',
+        active: {
+          background: 'rgb(243,243,243)'
+        },
+        private: {
+          background: 'rgb(225,223,238)',
+          borderColor: 'rgba(75, 60, 110, .7)'
+        }
       },
 
       active: {
-        background: 'rgba(255, 255, 255, 0.8)',
-
+        background: 'rgb(233,233,234)',
+        colorLight: 'rgb(255, 255, 255)',
+        colorDark: '#222',
         private: {
-          background: '#4b3c6e',
-          color: '#fff'
+          background: 'rgb(75,60,110)',
+          color: '#fff',
+          defaultFaviconColor: '#fff'
         }
       },
 
       private: {
-        background: '#d9d6e0',
+        background: 'rgb(217,213,228)',
         color: '#4b3c6e'
       },
 
+      preview: {
+        background: 'rgb(240,240,240)',
+        boxShadow: '0 -2px 12px rgba(0, 0, 0, 0.22)',
+        scale: '1.06'
+      },
+
       icon: {
         default: {
           primary: '#fff',
@@ -181,23 +208,16 @@
         },
 
         audio: {
-          color: '#69B9F9'
+          color: '#2377bb',
+          hoverColor: '#3b566b'
         },
 
         close: {
           filter: 'invert(100%) grayscale(1) contrast(0.5) brightness(160%)'
         },
 
         symbol: {
-          color: globalStyles.color.black100,
-
-          default: {
-            backgroundColor: globalStyles.color.mediumGray,
-
-            light: {
-              backgroundColor: globalStyles.color.white100
-            }
-          }
+          color: globalStyles.color.black100
         }
       }
     },

diff --git a/app/renderer/components/tabs/content/audioTabIcon.js b/app/renderer/components/tabs/content/audioTabIcon.js
@@ -5,6 +5,7 @@
 const React = require('react')
 const ReactDOM = require('react-dom')
 const {StyleSheet} = require('aphrodite/no-important')
+const locale = require('../../../../../js/l10n')
 
 // Components
 const ReduxComponent = require('../../reduxComponent')
@@ -108,6 +109,7 @@ class AudioTabIcon extends React.Component {
       className={styles.icon_audio}
       symbol={this.audioIcon}
       onClick={this.toggleMute}
+      title={locale.translation(this.props.audioPlaying ? 'muteTab' : 'unmuteTab')}
       ref={this.setRef}
     />
   }
@@ -116,12 +118,12 @@ class AudioTabIcon extends React.Component {
 const styles = StyleSheet.create({
   icon_audio: {
     overflow: 'hidden',
-    margin: '0 -2px 0 2px',
+    margin: '1px -2px 0 2px', // get centered with funky font awesome sizing
     color: theme.tab.icon.audio.color,
-    fontSize: '13px',
-
-    // Override default properties
-    zIndex: globalStyles.zindex.zindexTabsAudioTopBorder
+    fontSize: '14px',
+    ':hover': {
+      color: theme.tab.icon.audio.hoverColor
+    }
   }
 })