remove tab styles file, move styles to their respective tab components

- this just split styles for future refactoring Auditors: @luixxiul Test plan: tab should look visually the same
syuan100 · Nov 9, 2017 · 5d0fc4a · 5d0fc4a
1 parent af00219
commit 5d0fc4a
Show file tree

Hide file tree

Showing 5 changed files with 218 additions and 10 deletions.
diff --git a/app/renderer/components/tabs/content/audioTabIcon.js b/app/renderer/components/tabs/content/audioTabIcon.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {css} = require('aphrodite/no-important')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const Immutable = require('immutable')
 
 // Components
@@ -21,7 +21,6 @@ const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
 // Styles
 const globalStyles = require('../../styles/global')
-const tabStyles = require('../../styles/tab')
 
 class AudioTabIcon extends React.Component {
   constructor (props) {
@@ -61,11 +60,36 @@ class AudioTabIcon extends React.Component {
 
   render () {
     return <TabIcon
-      className={css(tabStyles.icon, tabStyles.icon_audio)}
+      className={css(styles.icon, styles.icon_audio)}
       symbol={this.audioIcon}
       onClick={this.toggleMute}
     />
   }
 }
 
+const styles = StyleSheet.create({
+  icon: {
+    width: globalStyles.spacing.iconSize,
+    minWidth: globalStyles.spacing.iconSize,
+    height: globalStyles.spacing.iconSize,
+    backgroundSize: globalStyles.spacing.iconSize,
+    fontSize: globalStyles.fontSize.tabIcon,
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    paddingLeft: globalStyles.spacing.defaultIconPadding,
+    paddingRight: globalStyles.spacing.defaultIconPadding
+  },
+
+  icon_audio: {
+    color: globalStyles.color.highlightBlue,
+
+    // 16px
+    fontSize: `calc(${globalStyles.fontSize.tabIcon} + 2px)`,
+
+    // equal spacing around audio icon (favicon and tabTitle)
+    padding: globalStyles.spacing.defaultTabPadding,
+    paddingRight: '0 !important'
+  }
+})
+
 module.exports = ReduxComponent.connect(AudioTabIcon)
diff --git a/app/renderer/components/tabs/content/favIcon.js b/app/renderer/components/tabs/content/favIcon.js
@@ -20,7 +20,6 @@ const {isSourceAboutUrl} = require('../../../../../js/lib/appUrlUtil')
 
 // Styles
 const globalStyles = require('../../styles/global')
-const tabStyles = require('../../styles/tab')
 const {spinKeyframes} = require('../../styles/animations')
 const loadingIconSvg = require('../../../../extensions/brave/img/tabs/loading.svg')
 
@@ -71,7 +70,7 @@ class Favicon extends React.Component {
       data-test-favicon={this.props.favicon}
       data-test-id={this.props.isTabLoading ? 'loading' : 'defaultIcon'}
       className={css(
-        tabStyles.icon,
+        styles.icon,
         this.props.favicon && iconStyles.favicon,
         !this.props.isPinnedTab && this.props.isNarrowestView && styles.faviconNarrowView
       )}
@@ -85,6 +84,18 @@ class Favicon extends React.Component {
 module.exports = ReduxComponent.connect(Favicon)
 
 const styles = StyleSheet.create({
+  icon: {
+    width: globalStyles.spacing.iconSize,
+    minWidth: globalStyles.spacing.iconSize,
+    height: globalStyles.spacing.iconSize,
+    backgroundSize: globalStyles.spacing.iconSize,
+    fontSize: globalStyles.fontSize.tabIcon,
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    paddingLeft: globalStyles.spacing.defaultIconPadding,
+    paddingRight: globalStyles.spacing.defaultIconPadding
+  },
+
   faviconNarrowView: {
     minWidth: 'auto',
     width: globalStyles.spacing.narrowIconSize,

diff --git a/app/renderer/components/tabs/content/newSessionIcon.js b/app/renderer/components/tabs/content/newSessionIcon.js
@@ -20,7 +20,7 @@ const {tabs} = require('../../../../../js/constants/config')
 const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
 // Styles
-const tabStyles = require('../../styles/tab')
+const globalStyles = require('../../styles/global')
 const newSessionSvg = require('../../../../extensions/brave/img/tabs/new_session.svg')
 
 class NewSessionIcon extends React.Component {
@@ -57,7 +57,7 @@ class NewSessionIcon extends React.Component {
 
     return <TabIcon symbol
       data-test-id='newSessionIcon'
-      className={css(tabStyles.icon, styles.newSession, newSession.indicator)}
+      className={css(styles.icon, styles.newSession, newSession.indicator)}
       symbolContent={this.props.partitionIndicator}
       l10nArgs={this.props.partitionNumber}
       l10nId='sessionInfoTab'
@@ -68,6 +68,18 @@ class NewSessionIcon extends React.Component {
 module.exports = ReduxComponent.connect(NewSessionIcon)
 
 const styles = StyleSheet.create({
+  icon: {
+    width: globalStyles.spacing.iconSize,
+    minWidth: globalStyles.spacing.iconSize,
+    height: globalStyles.spacing.iconSize,
+    backgroundSize: globalStyles.spacing.iconSize,
+    fontSize: globalStyles.fontSize.tabIcon,
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    paddingLeft: globalStyles.spacing.defaultIconPadding,
+    paddingRight: globalStyles.spacing.defaultIconPadding
+  },
+
   newSession: {
     position: 'relative',
     backgroundImage: `url(${newSessionSvg})`,

diff --git a/app/renderer/components/tabs/content/privateIcon.js b/app/renderer/components/tabs/content/privateIcon.js
@@ -14,7 +14,6 @@ const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
 // Styles
 const globalStyles = require('../../styles/global')
-const tabStyles = require('../../styles/tab')
 const privateSvg = require('../../../../extensions/brave/img/tabs/private.svg')
 
 class PrivateIcon extends React.Component {
@@ -41,14 +40,26 @@ class PrivateIcon extends React.Component {
 
     return <TabIcon
       data-test-id='privateIcon'
-      className={css(tabStyles.icon, styles.secondaryIcon, privateStyles.icon)}
+      className={css(styles.icon, styles.secondaryIcon, privateStyles.icon)}
     />
   }
 }
 
 module.exports = ReduxComponent.connect(PrivateIcon)
 
 const styles = StyleSheet.create({
+  icon: {
+    width: globalStyles.spacing.iconSize,
+    minWidth: globalStyles.spacing.iconSize,
+    height: globalStyles.spacing.iconSize,
+    backgroundSize: globalStyles.spacing.iconSize,
+    fontSize: globalStyles.fontSize.tabIcon,
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    paddingLeft: globalStyles.spacing.defaultIconPadding,
+    paddingRight: globalStyles.spacing.defaultIconPadding
+  },
+
   secondaryIcon: {
     WebkitMaskRepeat: 'no-repeat',
     WebkitMaskPosition: 'center',

diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js
@@ -31,7 +31,7 @@ const tabState = require('../../../common/state/tabState')
 const dragTypes = require('../../../../js/constants/dragTypes')
 
 // Styles
-const styles = require('../styles/tab')
+const globalStyles = require('../styles/global')
 
 // Utils
 const cx = require('../../../../js/lib/classSet')
@@ -382,4 +382,154 @@ class Tab extends React.Component {
   }
 }
 
+const styles = StyleSheet.create({
+  // Windows specific style
+  tabForWindows: {
+    color: '#555'
+  },
+
+  tab: {
+    borderWidth: '0 1px 0 0',
+    borderStyle: 'solid',
+    borderColor: '#bbb',
+    boxSizing: 'border-box',
+    color: '#5a5a5a',
+    display: 'flex',
+    marginTop: '0',
+    transition: `transform 200ms ease, ${globalStyles.transition.tabBackgroundTransition}`,
+    left: '0',
+    opacity: '1',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: globalStyles.spacing.defaultTabPadding,
+    position: 'relative',
+
+    // globalStyles.spacing.tabHeight has been set to globalStyles.spacing.tabsToolbarHeight,
+    // which is 1px extra due to the border-top of .tabsToolbar
+    height: '-webkit-fill-available',
+
+    ':hover': {
+      background: 'linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(250, 250, 250, 0.4))'
+    }
+  },
+
+  // Custom classes based on tab's width and behaviour
+  tabNarrowView: {
+    padding: '0 2px'
+  },
+
+  narrowViewPlayIndicator: {
+    '::before': {
+      content: `''`,
+      display: 'block',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      height: '2px',
+      background: 'lightskyblue'
+    }
+  },
+
+  tabNarrowestView: {
+    justifyContent: 'center'
+  },
+
+  tabMinAllowedSize: {
+    padding: 0
+  },
+
+  tabIdNarrowView: {
+    flex: 'inherit'
+  },
+
+  tabIdMinAllowedSize: {
+    overflow: 'hidden'
+  },
+
+  alternativePlayIndicator: {
+    borderTop: '2px solid lightskyblue'
+  },
+
+  tabId: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    flex: '1',
+
+    // @see https://bugzilla.mozilla.org/show_bug.cgi?id=1108514#c5
+    minWidth: '0',
+
+    // prevent the icons wrapper from being the target of mouse events.
+    pointerEvents: 'none'
+  },
+
+  isPinned: {
+    padding: 0,
+    width: `calc(${globalStyles.spacing.tabsToolbarHeight} * 1.1)`,
+    justifyContent: 'center'
+  },
+
+  active: {
+    background: `rgba(255, 255, 255, 1.0)`,
+    marginTop: '0',
+    borderWidth: '0 1px 0 0',
+    borderStyle: 'solid',
+    borderColor: '#bbb',
+    color: '#000',
+
+    ':hover': {
+      background: `linear-gradient(to bottom, #fff, ${globalStyles.color.chromePrimary})`
+    }
+  },
+
+  activePrivateTab: {
+    background: globalStyles.color.privateTabBackgroundActive,
+
+    ':hover': {
+      background: globalStyles.color.privateTabBackgroundActive
+    }
+  },
+
+  private: {
+    background: 'rgba(75, 60, 110, 0.2)',
+
+    ':hover': {
+      background: globalStyles.color.privateTabBackgroundActive
+    }
+  },
+
+  dragging: {
+    ':hover': {
+      closeTab: {
+        opacity: '0'
+      }
+    }
+  },
+
+  icon: {
+    width: globalStyles.spacing.iconSize,
+    minWidth: globalStyles.spacing.iconSize,
+    height: globalStyles.spacing.iconSize,
+    backgroundSize: globalStyles.spacing.iconSize,
+    fontSize: globalStyles.fontSize.tabIcon,
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    paddingLeft: globalStyles.spacing.defaultIconPadding,
+    paddingRight: globalStyles.spacing.defaultIconPadding
+  },
+
+  icon_audio: {
+    color: globalStyles.color.highlightBlue,
+
+    // 16px
+    fontSize: `calc(${globalStyles.fontSize.tabIcon} + 2px)`,
+
+    // equal spacing around audio icon (favicon and tabTitle)
+    padding: globalStyles.spacing.defaultTabPadding,
+    paddingRight: '0 !important'
+  }
+})
+
 module.exports = ReduxComponent.connect(Tab)