Set the same opacity to the counter box as the disabled BrowserButton

Fixes #9696

Also:
- Update to the modified BEM style

Auditors:

Test Plan:
1. Open https://jsfiddle.net/6zj4sjxr/
2. Make sure both brave lion icon and the counter box has the same opacity

app/renderer/components/navigation/navigator.js

@@ -40,7 +40,7 @@ const appConfig = require('../../../../js/constants/appConfig')
 const settings = require('../../../../js/constants/settings')
 
 // Styles
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
 
 class Navigator extends React.Component {
@@ -197,14 +197,23 @@ class Navigator extends React.Component {
                 ? this.extensionButtons
                 : null
             }
-            <div className={css(styles.braveMenuContainer)}>
+            <div className={css(
+              styles.braveMenu,
+
+              // See #9696
+              this.props.activeTabShowingMessageBox && styles.braveMenu_disabled
+            )}>
               <BrowserButton
                 iconOnly
                 size={globalStyles.spacing.navbarBraveButtonWidth}
                 custom={[
-                  this.props.shieldsDown && styles.braveMenuContainer__braveShield_down,
-                  !this.props.shieldEnabled && styles.braveMenuContainer__braveShield_disabled,
-                  this.props.isCaptionButton && styles.braveMenuContainer__braveShield_isCaptionButton
+                  this.props.shieldsDown && styles.braveMenu__braveShield_down,
+                  !this.props.shieldEnabled && styles.braveMenu__braveShield_disabled,
+                  this.props.isCaptionButton && styles.braveMenu__braveShield_isCaptionButton,
+
+                  // See #9696: Cancel the opacity of browserButton_disabled
+                  // to inherit the value set by braveMenu_disabled above
+                  this.props.activeTabShowingMessageBox && styles.braveMenu__braveShield_cancelOpacity
                 ]}
                 iconClass='braveMenu'
                 l10nId='braveMenu'
@@ -219,14 +228,16 @@ class Navigator extends React.Component {
               {
                 this.props.isCounterEnabled
                   ? <div className={css(
-                      styles.lionBadge,
-                      (this.props.menuBarVisible || !isWindows) && styles.lionBadgeRight,
+                      styles.braveMenu__counter,
+                      (this.props.menuBarVisible || !isWindows) && styles.braveMenu__counter_right,
+
                       // delay badge show-up.
                       // this is also set for extension badge
                       // in a way that both can appear at the same time.
-                      styles.subtleShowUp
+                      styles.braveMenu__counter_subtleShowUp
                     )}
-                    data-test-id='lionBadge'>
+                    data-test-id='lionBadge'
+                  >
                     {this.props.totalBlocks}
                   </div>
                   : null
@@ -254,10 +265,37 @@ class Navigator extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(Navigator)
-
 const styles = StyleSheet.create({
-  lionBadge: {
+  braveMenu: {
+    position: 'relative'
+  },
+
+  braveMenu_disabled: {
+    // See: browserButton_disabled
+    pointerEvents: 'none',
+    animation: 'none',
+    opacity: 0.25
+  },
+
+  braveMenu__braveShield_down: {
+    filter: 'grayscale(100%)'
+  },
+
+  braveMenu__braveShield_disabled: {
+    filter: 'grayscale(100%)',
+    opacity: 0.4
+  },
+
+  braveMenu__braveShield_isCaptionButton: {
+    marginRight: '3px'
+  },
+
+  braveMenu__braveShield_cancelOpacity: {
+    // Without this the disabled lion icon gets lighter than it should be.
+    opacity: 1
+  },
+
+  braveMenu__counter: {
     left: 'calc(50% - 1px)',
     top: '14px',
     position: 'absolute',
@@ -272,29 +310,13 @@ const styles = StyleSheet.create({
     minWidth: '10px',
     WebkitUserSelect: 'none'
   },
-  lionBadgeRight: {
+
+  braveMenu__counter_right: {
     left: 'auto',
     right: '2px'
   },
 
-  braveMenuContainer: {
-    position: 'relative'
-  },
-
-  braveMenuContainer__braveShield_down: {
-    filter: 'grayscale(100%)'
-  },
-
-  braveMenuContainer__braveShield_disabled: {
-    filter: 'grayscale(100%)',
-    opacity: 0.4
-  },
-
-  braveMenuContainer__braveShield_isCaptionButton: {
-    marginRight: '3px'
-  },
-
-  subtleShowUp: globalStyles.animations.subtleShowUp,
+  braveMenu__counter_subtleShowUp: globalStyles.animations.subtleShowUp,
 
   // TODO: Refactor navigator.js with Aphrodite to remove !important
   navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled: {
@@ -304,3 +326,5 @@ const styles = StyleSheet.create({
     display: 'none'
   }
 })
+
+module.exports = ReduxComponent.connect(Navigator)