Subtle animate extensions/braveMenu badges

Close #8186
Auditors:
Test Plan:

app/renderer/components/navigation/browserActionBadge.js

@@ -5,7 +5,7 @@
 const React = require('react')
 const {StyleSheet, css} = require('aphrodite')
 const ImmutableComponent = require('../immutableComponent')
-const commonStyles = require('../styles/global')
+const globalStyles = require('../styles/global')
 
 class BrowserActionBadge extends ImmutableComponent {
   constructor () {
@@ -30,9 +30,13 @@ class BrowserActionBadge extends ImmutableComponent {
       ref='badge'
       className={css(
         styles.browserActionBadge,
-        this.centered && styles.centered
+        this.centered && styles.centered,
+        // delay badge show-up.
+        // this is also set for braveryPanel badge
+        // in a way that both can appear at the same time.
+        styles.subtleShowUp
       )}
-      style={{backgroundColor: this.props.color || commonStyles.color.braveMediumOrange}}
+      style={{backgroundColor: this.props.color || globalStyles.color.braveMediumOrange}}
       >{this.props.text}</div>
   }
 }
@@ -58,7 +62,8 @@ const styles = StyleSheet.create({
     maxWidth: 'calc(100% - 5px)',
     overflow: 'hidden',
     textOverflow: 'ellipsis'
-  }
+  },
+  subtleShowUp: globalStyles.animations.subtleShowUp
 })
 
 module.exports = BrowserActionBadge

app/renderer/components/navigation/navigator.js

@@ -3,7 +3,6 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
 const electron = require('electron')
 const ipc = electron.ipcRenderer
 const Immutable = require('immutable')
@@ -44,6 +43,10 @@ const messages = require('../../../../js/constants/messages')
 const appConfig = require('../../../../js/constants/appConfig')
 const settings = require('../../../../js/constants/settings')
 
+// Styles
+const {StyleSheet, css} = require('aphrodite')
+const globalStyles = require('../styles/global')
+
 class Navigator extends React.Component {
   constructor () {
     super()
@@ -285,7 +288,11 @@ class Navigator extends React.Component {
                 this.props.isCounterEnabled
                   ? <div className={css(
                       styles.lionBadge,
-                      (this.props.menuBarVisible || !isWindows()) && styles.lionBadgeRight
+                      (this.props.menuBarVisible || !isWindows()) && styles.lionBadgeRight,
+                      // delay badge show-up.
+                      // this is also set for extension badge
+                      // in a way that both can appear at the same time.
+                      styles.subtleShowUp
                     )}
                     data-test-id='lionBadge'>
                     {this.props.totalBlocks}
@@ -335,6 +342,7 @@ const styles = StyleSheet.create({
   braveMenuContainer: {
     position: 'relative'
   },
+  subtleShowUp: globalStyles.animations.subtleShowUp,
 
   // TODO: Refactor navigator.js with Aphrodite to remove !important
   navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled: {

app/renderer/components/styles/animations.js

@@ -11,6 +11,16 @@ const spinKeyframes = {
   }
 }
 
+const opacityIncreaseKeyframes = {
+  'from': {
+    opacity: 0
+  },
+  'to': {
+    opacity: 1
+  }
+}
+
 module.exports = {
-  spinKeyframes
+  spinKeyframes,
+  opacityIncreaseKeyframes
 }

app/renderer/components/styles/global.js

@@ -2,6 +2,8 @@
  * 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')
+
 /**
  * Historically this file includes styles with no defined criteria.
  * Imagine this file as a future reference for theming, in a way
@@ -240,6 +242,16 @@ const globalStyles = {
     moreInfo: 'fa fa-info-circle',
     angleDoubleRight: 'fa fa-angle-double-right'
   },
+  animations: {
+    subtleShowUp: {
+      opacity: 0,
+      animationName: opacityIncreaseKeyframes,
+      animationDelay: '120ms',
+      animationTimingFunction: 'linear',
+      animationDuration: '120ms',
+      animationFillMode: 'forwards'
+    }
+  },
   button: {
     default: {
       color: '#5a5a5a',