Convert tabs bar with Aphrodite

Closes #11272

- Remove tabs.less
- Set color properties on theme.js
- Ser default properties on tabIcon.js
- BrowserButton component is applied to back/forward button and menu button on the tabs bar

Also:
- Apply no-drag to the new tab button and tab area
- Make the default icon large
- Add will-change:opacity to the animations
- Remove 'content' from theme.tab on theme.js

Test Plan:
1. Test that tabs are pinnable
2. Test that tabs are unpinnable
3. Test that tabs are draggable to same tabset
4. Test that tabs are draggable to alternate tabset
5. Test that tabs can be teared off into a new window
6. Test that you are able to reattach a tab that is teared off into a new window
7. Test that tab pages can be closed
8. Test that tab pages can be muted

Test Plan:
1. Test that the area around tab page indicators is draggable
2. Test that the gap between them is draggable

app/renderer/components/main/main.js

@@ -73,6 +73,9 @@ const isDarwin = platformUtil.isDarwin()
 const isWindows = platformUtil.isWindows()
 const isLinux = platformUtil.isLinux()
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
 class Main extends React.Component {
  constructor (props) {
  super(props)
@@ -702,11 +705,10 @@ class Main extends React.Component {
  {
  this.props.isSinglePage
  ? null
- : <div className={cx({
- tabPages: true,
- allowDragging: this.props.shouldAllowWindowDrag,
- singlePage: this.props.isSinglePage
- })}
+ : <div className={css(
+ styles.tabPagesWrap,
+ this.props.shouldAllowWindowDrag && styles.tabPagesWrap_allowDragging
+ )}
  onContextMenu={this.onTabContextMenu}>
  {
  this.props.showTabPages
@@ -747,4 +749,20 @@ class Main extends React.Component {
  }
 }
 
+const styles = StyleSheet.create({
+ tabPagesWrap: {
+ background: 'none',
+ display: 'flex',
+ justifyContent: 'center',
+ height: globalStyles.spacing.tabPagesHeight,
+ margin: `${globalStyles.spacing.navbarMenubarMargin} 0 ${globalStyles.spacing.navbarMenubarMargin} 0`,
+ position: 'relative',
+ zIndex: globalStyles.zindex.zindexTabs
+ },
+
+ tabPagesWrap_allowDragging: {
+ WebkitAppRegion: 'drag'
+ }
+})
+
 module.exports = ReduxComponent.connect(Main)

app/renderer/components/styles/animations.js

@@ -6,6 +6,7 @@ const spinKeyframes = {
  'from': {
  transform: 'rotate(0deg)'
  },
+
  'to': {
  transform: 'rotate(360deg)'
  }
@@ -15,6 +16,7 @@ const opacityIncreaseKeyframes = {
  'from': {
  opacity: 0
  },
+
  'to': {
  opacity: 1
  }
@@ -30,6 +32,7 @@ const widthIncreaseKeyframes = (start, end) => ({
  'from': {
  width: start
  },
+
  'to': {
  width: end
  }
@@ -43,19 +46,36 @@ const loaderAnimation = {
  '0': {
  transform: 'translate(0,0)'
  },
+
  '50%': {
  transform: 'translate(0,15px)'
  },
+
  '100%': {
  transform: 'translate(0,0)'
  }
 }
 
+const tabFadeInKeyframes = {
+ '0%': {
+ opacity: 0.5
+ },
+
+ '50%': {
+ opacity: 0.6
+ },
+
+ '100%': {
+ opacity: 0.5
+ }
+}
+
 module.exports = {
  spinKeyframes,
  opacityIncreaseKeyframes,
  opacityIncreaseElementKeyframes,
  widthIncreaseKeyframes,
  widthIncreaseElementKeyframes,
+ tabFadeInKeyframes,
  loaderAnimation
 }

app/renderer/components/styles/commonStyles.js

@@ -4,6 +4,7 @@
 
 const {StyleSheet} = require('aphrodite')
 const globalStyles = require('./global')
+const {theme} = require('./theme')
 
 const styles = StyleSheet.create({
  formControl: {
@@ -157,13 +158,13 @@ const styles = StyleSheet.create({
  },
  // last-child will always be orange, but others can be gray
  ':not(:last-child)': {
- borderBottom: `1px solid ${globalStyles.color.tabsToolbarBorderColor}`
+ borderBottom: `1px solid ${theme.tabsToolbar.border.color}`
  }
  },
  notificationBar__notificationItem: {
  backgroundColor: globalStyles.color.notificationItemColor,
  boxSizing: 'border-box',
- boxShadow: `0 -1px 0 ${globalStyles.color.tabsToolbarBorderColor}`,
+ boxShadow: `0 -1px 0 ${theme.tabsToolbar.border.color}`,
  lineHeight: '24px',
  padding: '8px 20px'
  },

app/renderer/components/styles/global.js

@@ -2,7 +2,7 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-const {opacityIncreaseKeyframes} = require('./animations')
+const {opacityIncreaseKeyframes, tabFadeInKeyframes} = require('./animations')
 
 /**
 * Use this file when the style you need
@@ -52,9 +52,6 @@ const globalStyles = {
  navigationBarBackground: 'white',
  chromeControlsBackground: '#bbb',
  chromeControlsBackground2: 'white',
- tabsToolbarBorderColor: '#bbb',
- tabsBackground: '#ddd',
- tabsBackgroundInactive: '#ddd',
  commonFormBottomWrapperBackground: '#ddd',
  commonFormBackgroundColor: '#f7f7f7',
  toolbarBackground: '#eee',
@@ -103,10 +100,6 @@ const globalStyles = {
  urlBarOutline: '#bbb',
  alphaWhite: 'rgba(255,255,255,0.8)'
  },
- filter: {
- makeWhite: 'brightness(0) invert(1)',
- whiteShadow: 'drop-shadow(0px 0px 2px rgb(255, 255, 255))'
- },
  radius: {
  borderRadius: '4px',
  borderRadiusTabs: '4px',
@@ -166,6 +159,7 @@ const globalStyles = {
  iconSize: '16px',
  sessionIconSize: '15px',
  closeIconSize: '13px',
+ newSessionIconSize: '13px',
  narrowIconSize: '12px',
  dialogWidth: '422px',
  dialogSmallWidth: '350px',
@@ -216,7 +210,6 @@ const globalStyles = {
  zindexTabs: '1000',
  zindexTabsAudioTopBorder: '1001',
  zindexTabsThumbnail: '1100',
- zindexTabsDragIndicator: '1100',
  zindexNavigationBar: '2000',
  zindexUrlbarNotLegend: '2100',
  zindexPopUp: '3000',
@@ -247,6 +240,10 @@ const globalStyles = {
  loading: 'fa fa-spinner fa-spin',
  lock: 'fa fa-lock',
  moreInfo: 'fa fa-info-circle',
+ next: 'fa fa-caret-right',
+ openLocation: 'fa fa-folder-open-o',
+ pause: 'fa fa-pause',
+ prev: 'fa fa-caret-left',
  private: 'fa fa-eye',
  question: 'fa fa-question-circle',
  refresh: 'fa fa-refresh',
@@ -263,11 +260,21 @@ const globalStyles = {
  animations: {
  subtleShowUp: {
  opacity: 0,
+ willChange: 'opacity',
  animationName: opacityIncreaseKeyframes,
  animationDelay: '120ms',
  animationTimingFunction: 'linear',
  animationDuration: '120ms',
  animationFillMode: 'forwards'
+ },
+
+ tabFadeIn: {
+ opacity: 0.5,
+ willChange: 'opacity',
+ animationName: tabFadeInKeyframes,
+ animationDuration: '0.75s',
+ animationTimingFunction: 'ease-in-out',
+ animationFillMode: 'forwards'
  }
  },
 

app/renderer/components/styles/theme.js

@@ -10,6 +10,7 @@
  * future theming, including darkUI.
  * Note: If an element is not color-related, it should go into global.js
  */
+
  module.exports.theme = {
  navigator: {
  braveMenu: {
@@ -20,6 +21,57 @@
  }
  },
 
+ audio: {
+ color: globalStyles.color.audioColor
+ },
+
+ filter: {
+ makeWhite: 'brightness(0) invert(1)',
+ whiteShadow: 'drop-shadow(0px 0px 2px rgb(255, 255, 255))'
+ },
+
+ tabsToolbar: {
+ backgroundColor: '#ddd',
+
+ border: {
+ color: '#bbb'
+ },
+
+ button: {
+ backgroundColor: globalStyles.color.buttonColor,
+
+ onHover: {
+ backgroundColor: '#000'
+ }
+ },
+
+ tabs: {
+ navigation: {
+ borderColor: '#bbb'
+ }
+ }
+ },
+
+ tabPage: {
+ backgroundColor: '#fff',
+ borderColor: '#bbb',
+
+ hover: {
+ backgroundColor: globalStyles.color.braveOrange,
+ borderColor: globalStyles.color.braveOrange
+ },
+
+ active: {
+ backgroundColor: globalStyles.color.braveOrange,
+ borderColor: globalStyles.color.braveOrange,
+
+ hover: {
+ backgroundColor: globalStyles.color.braveOrange,
+ borderColor: globalStyles.color.braveOrange
+ }
+ }
+ },
+
  tab: {
  transition: `
  background-color 150ms cubic-bezier(0.26, 0.63, 0.39, 0.65),
@@ -51,26 +103,36 @@
  color: '#4b3c6e'
  },
 
- content: {
- icon: {
- default: {
- primary: '#fff',
- secondary: 'rgb(101, 101, 101)'
- },
-
- private: {
- background: {
- active: '#fff',
- notActive: '#000'
- }
- },
+ icon: {
+ default: {
+ primary: '#fff',
+ secondary: 'rgb(101, 101, 101)'
+ },
+
+ private: {
+ background: {
+ active: '#fff',
+ notActive: '#000'
+ }
+ },
 
-  audio: {
-  color: '#69B9F9'
-  },
+ audio: {
+ color: '#69B9F9'
+ },
 
- close: {
- filter: 'invert(100%) grayscale(1) contrast(0.5) brightness(160%)'
+ 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
+ }
  }
  }
  }

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

@@ -4,7 +4,7 @@
 
 const React = require('react')
 const ReactDOM = require('react-dom')
-const {StyleSheet, css} = require('aphrodite/no-important')
+const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../../reduxComponent')
@@ -19,9 +19,9 @@ const tabState = require('../../../../common/state/tabState')
 const windowActions = require('../../../../../js/actions/windowActions')
 
 // Styles
-const {widthIncreaseElementKeyframes} = require('../../styles/animations')
 const globalStyles = require('../../styles/global')
 const {theme} = require('../../styles/theme')
+const {widthIncreaseElementKeyframes} = require('../../styles/animations')
 
 class AudioTabIcon extends React.Component {
  constructor (props) {
@@ -105,7 +105,7 @@ class AudioTabIcon extends React.Component {
 
  return <TabIcon
  data-test-id={this.audioIcon}
- className={css(styles.audioTab__icon)}
+ className={styles.icon_audio}
  symbol={this.audioIcon}
  onClick={this.toggleMute}
  ref={this.setRef}
@@ -114,22 +114,14 @@ class AudioTabIcon extends React.Component {
 }
 
 const styles = StyleSheet.create({
- audioTab__icon: {
- width: globalStyles.spacing.iconSize,
+ icon_audio: {
  overflow: 'hidden',
  margin: '0 -2px 0 2px',
- zIndex: globalStyles.zindex.zindexTabsAudioTopBorder,
- color: theme.tab.content.icon.audio.color,
+ color: theme.tab.icon.audio.color,
  fontSize: '13px',
- height: globalStyles.spacing.iconSize,
- backgroundSize: globalStyles.spacing.iconSize,
- backgroundPosition: 'center',
- backgroundRepeat: 'no-repeat',
- display: 'flex',
- alignSelf: 'center',
- position: 'relative',
- textAlign: 'center',
- justifyContent: 'center'
+
+ // Override default properties
+ zIndex: globalStyles.zindex.zindexTabsAudioTopBorder
  }
 })