Tab style updates x 8

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
  }
 

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)`
-}

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} />
  {

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

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',

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
  }
  }
  },

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
+ }
  }
 })