Responsive tab / refactor to Aphrodite

Auditors: @bsclifton, @bbondy

/cc @bradleyrichter

Fix #5431
Fix #6511

app/renderer/components/styles/global.js

@@ -4,7 +4,15 @@ const globalStyles = {
     breakpointNarrowViewport: '600px',
     breakpointExtensionButtonPadding: '720px',
     breakpointSmallWin32: '650px',
-    breakpointTinyWin32: '500px'
+    breakpointTinyWin32: '500px',
+    tab: {
+      largeMedium: '83px',
+      medium: '66px',
+      mediumSmall: '53px',
+      small: '42px',
+      extraSmall: '33px',
+      smallest: '19px'
+    }
   },
   color: {
     linkColor: '#0099CC',
@@ -92,7 +100,9 @@ const globalStyles = {
     navbarBraveButtonMarginLeft: '80px',
     navbarLeftMarginDarwin: '76px',
     sideBarWidth: '190px',
-    aboutPageSectionPadding: '24px'
+    aboutPageSectionPadding: '24px',
+    defaultTabPadding: '0 4px',
+    defaultIconPadding: '0 2px'
   },
   shadow: {
     switchShadow: 'inset 0 1px 4px rgba(0, 0, 0, 0.35)',
@@ -133,6 +143,19 @@ const globalStyles = {
     zindexSuggestionText: '3100',
     zindexWindowFullScreen: '4000',
     zindexWindowFullScreenBanner: '4100'
+  },
+  fontSize: {
+    tabIcon: '14px',
+    tabTitle: '12px'
+  },
+  appIcons: {
+    loading: 'fa fa-spinner fa-spin',
+    defaultIcon: 'fa fa-file-o',
+    closeTab: 'fa fa-times-circle',
+    private: 'fa fa-eye',
+    newSession: 'fa fa-user',
+    volumeOn: 'fa fa-volume-up',
+    volumeOff: 'fa fa-volume-off'
   }
 }
 

app/renderer/components/styles/tab.js

@@ -0,0 +1,126 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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 {StyleSheet} = require('aphrodite')
+const globalStyles = require('./global')
+
+const styles = StyleSheet.create({
+  // Windows specific style
+  tabForWindows: {
+    color: '#555'
+  },
+
+  tab: {
+    background: 'linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1))',
+    borderRadius: `${globalStyles.radius.borderRadiusTabs} ${globalStyles.radius.borderRadiusTabs} 0 0`,
+    borderWidth: '1px 1px 0',
+    borderStyle: 'solid',
+    borderColor: 'transparent',
+    boxSizing: 'border-box',
+    color: '#3B3B3B',
+    display: 'flex',
+    height: '23px',
+    marginTop: '2px',
+    transition: 'transform 200ms ease',
+    left: '0',
+    opacity: '1',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: globalStyles.spacing.defaultTabPadding,
+    position: 'relative',
+
+    ':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: {
+    borderWidth: '2px 0 0',
+    borderStyle: 'solid',
+    borderColor: 'lightskyblue'
+  },
+
+  tabNarrowestView: {
+    justifyContent: 'center'
+  },
+
+  tabMinAllowedSize: {
+    padding: 0
+  },
+
+  tabIdNarrowView: {
+    flex: 'inherit'
+  },
+
+  tabIdMinAllowedSize: {
+    overflow: 'hidden'
+  },
+
+  // Add extra space for pages that have no icon
+  // such as about:blank and about:newtab
+  noFavicon: {
+    padding: '0 6px'
+  },
+
+  alternativePlayIndicator: {
+    borderTop: '2px solid lightskyblue'
+  },
+
+  tabId: {
+    alignItems: 'center',
+    display: 'flex',
+    flex: '1',
+    minWidth: '0' // @see https://bugzilla.mozilla.org/show_bug.cgi?id=1108514#c5
+  },
+
+  isPinned: {
+    padding: globalStyles.spacing.defaultIconPadding
+  },
+
+  active: {
+    background: `linear-gradient(to bottom, #fff, ${globalStyles.color.chromePrimary})`,
+    height: '25px',
+    marginTop: '1px',
+    boxShadow: '0 -1px 4px 0 rgba(51, 51, 51, 0.12)',
+    borderWidth: '1px 1px 0',
+    borderStyle: 'solid',
+    borderColor: '#bbb',
+
+    ':hover': {
+      background: `linear-gradient(to bottom, #fff, ${globalStyles.color.chromePrimary})`
+    }
+  },
+
+  activePrivateTab: {
+    background: 'rgb(247, 247, 247)',
+    color: 'black'
+  },
+
+  private: {
+    background: '#9c8dc1', // (globalStyles.color.privateTabBackground, 40%)
+    color: '#fff',
+
+    ':hover': {
+      background: '#665296', // (globalStyles.color.privateTabBackground, 20%)
+      color: '#fff'
+    }
+  },
+
+  dragging: {
+    ':hover': {
+      closeTab: {
+        opacity: '0'
+      }
+    }
+  }
+})
+
+module.exports = styles