Polish Tab icons' animations

- Set default animation to global.js
- Move tab icons' animations to global.js
- Add will-change:opacity to the animations

Set default animation

app/renderer/components/styles/global.js

@@ -266,6 +266,7 @@ const globalStyles = {
   animations: {
     subtleShowUp: {
       opacity: 0,
+      willChange: 'opacity',
       animationName: opacityIncreaseKeyframes,
       animationDelay: '120ms',
       animationTimingFunction: 'linear',
@@ -275,10 +276,23 @@ const globalStyles = {
 
     tabFadeIn: {
       opacity: 0.5,
+      willChange: 'opacity',
       animationName: tabFadeInKeyframes,
       animationDuration: '0.75s',
       animationTimingFunction: 'ease-in-out',
       animationFillMode: 'forwards'
+    },
+
+    icon: {
+      default: {
+        opacity: 0,
+        willChange: 'opacity',
+        animationName: opacityIncreaseKeyframes,
+        animationDelay: '100ms',
+        animationTimingFunction: 'linear',
+        animationDuration: '200ms',
+        animationFillMode: 'forwards'
+      }
     }
   },
 

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

@@ -18,9 +18,9 @@ const tabState = require('../../../../common/state/tabState')
 const windowActions = require('../../../../../js/actions/windowActions')
 
 // Styles
-const {widthIncreaseKeyframes} = require('../../styles/animations')
 const globalStyles = require('../../styles/global')
 const {theme} = require('../../styles/theme')
+const {widthIncreaseKeyframes} = require('../../styles/animations')
 
 class AudioTabIcon extends React.Component {
   constructor (props) {
@@ -63,22 +63,16 @@ class AudioTabIcon extends React.Component {
 
     return <TabIcon
       data-test-id={this.audioIcon}
-      className={css(styles.audioTab__icon)}
+      className={css(styles.icon_audioTab, styles.icon_audioTab_animation)}
       symbol={this.audioIcon}
       onClick={this.toggleMute}
     />
   }
 }
 
 const styles = StyleSheet.create({
-  audioTab__icon: {
+  icon_audioTab: {
     width: 0,
-    animationName: widthIncreaseKeyframes(0, globalStyles.spacing.iconSize),
-    animationDelay: '50ms',
-    animationTimingFunction: 'linear',
-    animationDuration: '100ms',
-    animationFillMode: 'forwards',
-
     overflow: 'hidden',
     margin: '0 -2px 0 2px',
     zIndex: globalStyles.zindex.zindexTabsAudioTopBorder,
@@ -93,6 +87,16 @@ const styles = StyleSheet.create({
     position: 'relative',
     textAlign: 'center',
     justifyContent: 'center'
+  },
+
+  icon_audioTab_animation: {
+    // 16px == spacing.iconSize
+    animationName: widthIncreaseKeyframes(0, '16px'),
+
+    animationDelay: '50ms',
+    animationTimingFunction: 'linear',
+    animationDuration: '100ms',
+    animationFillMode: 'forwards'
   }
 })
 

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

@@ -17,8 +17,7 @@ const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
 // Styles
 const {theme} = require('../../styles/theme')
-const {spacing, zindex} = require('../../styles/global')
-const {opacityIncreaseKeyframes} = require('../../styles/animations')
+const globalStyles = require('../../styles/global')
 const closeTabSvg = require('../../../../extensions/brave/img/tabs/close_btn.svg')
 
 class CloseTabIcon extends React.Component {
@@ -55,8 +54,10 @@ class CloseTabIcon extends React.Component {
       data-test-id='closeTabIcon'
       data-test2-id={this.props.showCloseIcon ? 'close-icon-on' : 'close-icon-off'}
       className={css(
-        styles.closeTab__icon,
-        this.props.centralizeTabIcons && styles.closeTab__icon_centered
+        styles.icon_closeTab,
+        styles.icon_closeTab_animation_default,
+        styles.icon_closeTab_animation,
+        this.props.centralizeTabIcons && styles.icon_closeTab_centered
       )}
       l10nId='closeTabButton'
       onClick={this.props.onClick}
@@ -66,37 +67,33 @@ class CloseTabIcon extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(CloseTabIcon)
-
 const styles = StyleSheet.create({
-  closeTab__icon: {
-    opacity: 0,
-    willChange: 'opacity',
-    animationName: opacityIncreaseKeyframes,
-    animationTimingFunction: 'linear',
-    animationDuration: '200ms',
-    animationDelay: '25ms',
-    animationFillMode: 'forwards',
-
+  icon_closeTab: {
     boxSizing: 'border-box',
-    zIndex: zindex.zindexTabsThumbnail,
+    zIndex: globalStyles.zindex.zindexTabsThumbnail,
     backgroundImage: `url(${closeTabSvg})`,
-    backgroundSize: spacing.closeIconSize,
+    backgroundSize: globalStyles.spacing.closeIconSize,
     // mask icon to gray to avoid calling another icon on hover
     transition: 'filter 150ms linear',
     filter: theme.tab.content.icon.close.filter,
     backgroundPosition: 'center center',
     backgroundRepeat: 'no-repeat',
-    width: spacing.closeIconSize,
-    height: spacing.closeIconSize,
-    marginRight: spacing.defaultTabMargin,
+    width: globalStyles.spacing.closeIconSize,
+    height: globalStyles.spacing.closeIconSize,
+    marginRight: globalStyles.spacing.defaultTabMargin,
 
     ':hover': {
       filter: 'none'
     }
   },
 
-  closeTab__icon_centered: {
+  icon_closeTab_animation_default: globalStyles.animations.icon.default,
+
+  icon_closeTab_animation: {
+    animationDelay: '50ms'
+  },
+
+  icon_closeTab_centered: {
     position: 'absolute',
     margin: 'auto',
     left: 0,
@@ -105,3 +102,5 @@ const styles = StyleSheet.create({
     bottom: 0
   }
 })
+
+module.exports = ReduxComponent.connect(CloseTabIcon)

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

@@ -91,8 +91,6 @@ class Favicon extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(Favicon)
-
 const styles = StyleSheet.create({
   icon: {
     opacity: 0,
@@ -166,3 +164,5 @@ const styles = StyleSheet.create({
     backgroundColor: color.white100
   }
 })
+
+module.exports = ReduxComponent.connect(Favicon)

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

@@ -17,7 +17,6 @@ const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
 // Styles
 const globalStyles = require('../../styles/global')
-const {opacityIncreaseKeyframes} = require('../../styles/animations')
 const newSessionSvg = require('../../../../extensions/brave/img/tabs/new_session.svg')
 
 class NewSessionIcon extends React.Component {
@@ -56,26 +55,20 @@ class NewSessionIcon extends React.Component {
 
     return <TabIcon symbol
       data-test-id='newSessionIcon'
-      className={css(styles.newSession__icon, newSessionProps.newSession__indicator)}
+      className={css(
+        styles.icon_newSession,
+        styles.icon_newSession_animation,
+        newSessionProps.newSession__indicator
+      )}
       symbolContent={this.props.partitionNumber}
       l10nArgs={{partitionNumber: this.props.partitionNumber}}
       l10nId='sessionInfoTab'
     />
   }
 }
 
-module.exports = ReduxComponent.connect(NewSessionIcon)
-
 const styles = StyleSheet.create({
-  newSession__icon: {
-    opacity: 0,
-    willChange: 'opacity',
-    animationName: opacityIncreaseKeyframes,
-    animationDelay: '100ms',
-    animationTimingFunction: 'linear',
-    animationDuration: '200ms',
-    animationFillMode: 'forwards',
-
+  icon_newSession: {
     zIndex: globalStyles.zindex.zindexTabsThumbnail,
     boxSizing: 'border-box',
     display: 'flex',
@@ -87,5 +80,9 @@ const styles = StyleSheet.create({
     width: globalStyles.spacing.iconSize,
     height: globalStyles.spacing.iconSize,
     marginRight: globalStyles.spacing.defaultTabMargin
-  }
+  },
+
+  icon_newSession_animation: globalStyles.animations.icon.default
 })
+
+module.exports = ReduxComponent.connect(NewSessionIcon)

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

@@ -17,7 +17,6 @@ const tabState = require('../../../../common/state/tabState')
 // Styles
 const {theme} = require('../../styles/theme')
 const globalStyles = require('../../styles/global')
-const {opacityIncreaseKeyframes} = require('../../styles/animations')
 const privateSvg = require('../../../../extensions/brave/img/tabs/private.svg')
 
 class PrivateIcon extends React.Component {
@@ -41,7 +40,7 @@ class PrivateIcon extends React.Component {
     }
 
     const privateProps = StyleSheet.create({
-      private__icon_color: {
+      icon_private_color: {
         backgroundColor: this.props.isActive
           ? theme.tab.content.icon.private.background.active
           : theme.tab.content.icon.private.background.notActive
@@ -50,23 +49,17 @@ class PrivateIcon extends React.Component {
 
     return <TabIcon
       data-test-id='privateIcon'
-      className={css(styles.private__icon, privateProps.private__icon_color)}
+      className={css(
+        styles.icon_private,
+        styles.icon_private_animation,
+        privateProps.icon_private_color
+      )}
     />
   }
 }
 
-module.exports = ReduxComponent.connect(PrivateIcon)
-
 const styles = StyleSheet.create({
-  private__icon: {
-    opacity: 0,
-    willChange: 'opacity',
-    animationName: opacityIncreaseKeyframes,
-    animationDelay: '100ms',
-    animationTimingFunction: 'linear',
-    animationDuration: '200ms',
-    animationFillMode: 'forwards',
-
+  icon_private: {
     zIndex: globalStyles.zindex.zindexTabsThumbnail,
     boxSizing: 'border-box',
     WebkitMaskRepeat: 'no-repeat',
@@ -76,5 +69,9 @@ const styles = StyleSheet.create({
     width: globalStyles.spacing.sessionIconSize,
     height: globalStyles.spacing.sessionIconSize,
     marginRight: globalStyles.spacing.defaultTabMargin
-  }
+  },
+
+  icon_private_animation: globalStyles.animations.icon.default
 })
+
+module.exports = ReduxComponent.connect(PrivateIcon)

app/renderer/components/tabs/tab.js

@@ -339,10 +339,8 @@ class Tab extends React.Component {
           // Windows specific style
           isWindows && styles.tabArea__tab_forWindows,
 
-          // Active tab
+          // Active tab and private tab
           this.props.isActive && styles.tabArea__tab_active,
-
-          // Private color should override themeColor
           this.props.isPrivateTab && styles.tabArea__tab_private,
           (this.props.isPrivateTab && this.props.isActive) && styles.tabArea__tab_private_active,