add smooth animation transitions to tab content

Auditors: @luixxiul
close #10883

app/renderer/components/styles/animations.js

@@ -20,7 +20,19 @@ const opacityIncreaseKeyframes = {
   }
 }
 
+// TODO: this could be a function with param included
+// to which property should be changed
+const widthIncreaseKeyframes = (start, end) => ({
+  'from': {
+    width: start
+  },
+  'to': {
+    width: end
+  }
+})
+
 module.exports = {
   spinKeyframes,
-  opacityIncreaseKeyframes
+  opacityIncreaseKeyframes,
+  widthIncreaseKeyframes
 }

app/renderer/components/styles/theme.js

@@ -13,7 +13,7 @@
       // mimics chrome hover effect
       transition: `
         background-color 200ms cubic-bezier(0.26, 0.63, 0.39, 0.65),
-        color 200ms linear
+        color 200ms cubic-bezier(0.26, 0.63, 0.39, 0.65)
       `,
       background: '#ddd',
       borderColor: '#bbb',

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

@@ -18,6 +18,7 @@ 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')
 
@@ -71,6 +72,14 @@ class AudioTabIcon extends React.Component {
 
 const styles = StyleSheet.create({
   audioTab__icon: {
+    width: 0,
+    animationName: widthIncreaseKeyframes(0, globalStyles.spacing.iconSize),
+    animationDelay: '50ms',
+    animationTimingFunction: 'linear',
+    animationDuration: '100ms',
+    animationFillMode: 'forwards',
+
+    overflow: 'hidden',
     margin: '0 -2px 0 2px',
     color: theme.tab.content.icon.audio.color,
     fontSize: '13px',

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

@@ -21,7 +21,7 @@ const appActions = require('../../../../../js/actions/appActions')
 
 // Styles
 const {theme} = require('../../styles/theme')
-const {spacing} = require('../../styles/global')
+const {spacing, zindex} = require('../../styles/global')
 const {opacityIncreaseKeyframes} = require('../../styles/animations')
 const closeTabSvg = require('../../../../extensions/brave/img/tabs/close_btn.svg')
 
@@ -91,10 +91,12 @@ const styles = StyleSheet.create({
     willChange: 'opacity',
     animationName: opacityIncreaseKeyframes,
     animationTimingFunction: 'linear',
-    animationDuration: '100ms',
+    animationDuration: '200ms',
     animationDelay: '25ms',
     animationFillMode: 'forwards',
+
     boxSizing: 'border-box',
+    zIndex: zindex.zindexTabsThumbnail,
     backgroundImage: `url(${closeTabSvg})`,
     backgroundSize: spacing.closeIconSize,
     // mask icon to gray to avoid calling another icon on hover

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

@@ -19,7 +19,7 @@ const tabState = require('../../../../common/state/tabState')
 const defaultIconSvg = require('../../../../extensions/brave/img/tabs/default.svg')
 const loadingIconSvg = require('../../../../extensions/brave/img/tabs/loading.svg')
 const {filter, color, spacing} = require('../../styles/global')
-const {spinKeyframes} = require('../../styles/animations')
+const {spinKeyframes, opacityIncreaseKeyframes} = require('../../styles/animations')
 
 class Favicon extends React.Component {
   mergeProps (state, ownProps) {
@@ -99,6 +99,14 @@ module.exports = ReduxComponent.connect(Favicon)
 
 const styles = StyleSheet.create({
   icon: {
+    opacity: 0,
+    willChange: 'opacity',
+    animationName: opacityIncreaseKeyframes,
+    animationDelay: '50ms',
+    animationTimingFunction: 'linear',
+    animationDuration: '200ms',
+    animationFillMode: 'forwards',
+
     position: 'relative',
     boxSizing: 'border-box',
     width: spacing.iconSize,

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

@@ -17,6 +17,7 @@ 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 {
@@ -67,6 +68,14 @@ 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',
+
     zIndex: globalStyles.zindex.zindexWindow,
     boxSizing: 'border-box',
     display: 'flex',

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

@@ -17,6 +17,7 @@ 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 {
@@ -58,7 +59,15 @@ module.exports = ReduxComponent.connect(PrivateIcon)
 
 const styles = StyleSheet.create({
   private__icon: {
-    zIndex: 99,
+    opacity: 0,
+    willChange: 'opacity',
+    animationName: opacityIncreaseKeyframes,
+    animationDelay: '100ms',
+    animationTimingFunction: 'linear',
+    animationDuration: '200ms',
+    animationFillMode: 'forwards',
+
+    zIndex: globalStyles.zindex.zindexWindow,
     boxSizing: 'border-box',
     WebkitMaskRepeat: 'no-repeat',
     WebkitMaskPosition: 'center',

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

@@ -62,6 +62,7 @@ class TabTitle extends React.Component {
 module.exports = ReduxComponent.connect(TabTitle)
 
 const styles = StyleSheet.create({
+
   tab__title: {
     boxSizing: 'border-box',
     display: 'flex',

app/renderer/components/tabs/tab.js

@@ -384,6 +384,7 @@ const styles = StyleSheet.create({
 
     // this enable us to have gradient text
     '::before': {
+      zIndex: globalStyles.zindex.zindexTabs,
       content: '""',
       position: 'absolute',
       top: 0,