From 8997c768ecfcc809841ecf12b5b44aa04cb9d01e Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sat, 17 Jun 2017 20:26:02 +0900
Subject: [PATCH] Refactor navigationBar (part 3)

Create components etc  -- navigator.js, navigationBar.js, urlBar.js etc

- navigator.js
  - topLevelEndButtons
  - navigationWrapper
  - counterBraveMenu
- navigationBar.js
  - bookmarkButtonContainer
  - publisherToggleContainer
- urlBar.js
  - titleBar
  - loadTimer
  - input
  - legend
  - noScriptInfo

Also:
- Refactor lionBadge
- Refactor publisherToggle
- replace topLevelEndButtons__braveMenuButton with braveMenuButton, adding the correct BEM level comment.
- Move extensionButtons before braveMenuButton
- Replace navigator__endButtons with commonStyles.navigator__buttonContainer (apply the same styles as bookmarkButtonContainer on navigationBar.js)
- Change the width and height of bookmarkButton and publisherToggle to '100%' (make the whole area inside the publisher toggle container clickable)

- Replace span + BrowserButton with a normal button on publisherToggle.js temporarily
- Move module.exports to the bottom

Test Plan: available on https://github.com/brave/browser-laptop/pull/9299#issue-234116287
---
 .../components/navigation/navigationBar.js    |  90 ++++----
 .../components/navigation/navigator.js        | 216 ++++++++++--------
 .../components/navigation/publisherToggle.js  |  69 +++---
 app/renderer/components/navigation/urlBar.js  | 136 ++++++-----
 test/bravery-components/braveryPanelTest.js   |   2 +-
 .../components/navigation/navigatorTest.js    |   4 +-
 6 files changed, 277 insertions(+), 240 deletions(-)

diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index edc257ce783..f140e844283 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -161,6 +161,41 @@ class NavigationBar extends React.Component {
     />
   }
 
+  // BEM Level: navigator
+  get bookmarkButtonContainer () {
+    return <span className={css(
+      commonStyles.navigator__buttonContainer,
+      commonStyles.navigator__buttonContainer_outsideOfURLbar,
+      styles.navigator__buttonContainer_bookmarkButtonContainer
+    )}>
+      <button className={cx({
+        normalizeButton: true,
+        withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
+        [css(styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton, this.bookmarked && styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton)]: true
+      })}
+        data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+        data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
+        onClick={this.onToggleBookmark}
+      />
+    </span>
+  }
+
+  // BEM Level: navigator
+  get publisherToggleContainer () {
+    return <span className={css(
+      commonStyles.navigator__buttonContainer,
+      commonStyles.navigator__buttonContainer_outsideOfURLbar,
+      styles.navigator__buttonContainer_publisherToggleContainer
+    )}>
+      <PublisherToggle
+        location={this.props.location}
+        locationInfo={this.props.locationInfo}
+        siteSettings={this.props.siteSettings}
+        synopsis={this.props.synopsis}
+      />
+    </span>
+  }
+
   componentDidMount () {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
@@ -247,9 +282,8 @@ class NavigationBar extends React.Component {
         : null
       }
       {
-        this.props.titleMode
-        ? null
-        : <span className={css(
+        !this.props.titleMode
+        ? <span className={css(
             commonStyles.navigationButtonContainer,
             styles.navigator__navigationButtonContainer,
           )}>
@@ -259,6 +293,7 @@ class NavigationBar extends React.Component {
             : this.reloadButton
           }
         </span>
+        : null
       }
       {
         !this.props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
@@ -272,43 +307,18 @@ class NavigationBar extends React.Component {
       }
       {
         !this.props.titleMode
-        ? <span className={cx({
-          bookmarkButtonContainer: true,
-          [css(commonStyles.navigator__buttonContainer, commonStyles.navigator__buttonContainer_outsideOfURLbar, styles.navigator__buttonContainer_bookmarkButtonContainer)]: true
-        })}>
-          <button className={cx({
-            normalizeButton: true,
-            withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-            [css(styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton, this.bookmarked && styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton)]: true
-          })}
-            data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-            data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
-            onClick={this.onToggleBookmark}
-          />
-        </span>
+        ? this.bookmarkButtonContainer
         : null
       }
       <UrlBar
         titleMode={this.props.titleMode}
         onStop={this.onStop}
         menubarVisible={this.props.menubarVisible}
-        />
+      />
       {
-        isSourceAboutUrl(this.props.location)
-        ? null
-        : <div className={css(
-          this.props.titleMode && styles.navigator__endButtons_titleMode,
-          !this.props.titleMode && styles.navigator__endButtons_notTitleMode
-        )}>
-          {
-            <PublisherToggle
-              location={this.props.location}
-              locationInfo={this.props.locationInfo}
-              siteSettings={this.props.siteSettings}
-              synopsis={this.props.synopsis}
-            />
-          }
-        </div>
+        !this.props.titleMode && !isSourceAboutUrl(this.props.location)
+        ? this.publisherToggleContainer
+        : null
       }
     </div>
   }
@@ -390,20 +400,18 @@ const styles = StyleSheet.create({
   navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton: {
     background: `url(${bookmarkButton}) center no-repeat`,
     backgroundSize: '14px 14px',
-    width: globalStyles.navigationBar.urlbarForm.height, // #6704
-    height: globalStyles.navigationBar.urlbarForm.height // #6704
+    width: '100%',
+    height: '100%'
   },
 
   navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton: {
     background: `url(${bookmarkedButton}) center no-repeat`
   },
 
-  navigator__endButtons_titleMode: {
-    display: 'none'
-  },
-
-  navigator__endButtons_notTitleMode: {
-    display: 'flex'
+  navigator__buttonContainer_publisherToggleContainer: {
+    borderLeft: 'none',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
   }
 })
 
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
index 252be3c018e..20b4e0d22fe 100644
--- a/app/renderer/components/navigation/navigator.js
+++ b/app/renderer/components/navigation/navigator.js
@@ -83,14 +83,6 @@ class Navigator extends React.Component {
     }
   }
 
-  get extensionButtons () {
-    let buttons = this.props.extensionBrowserActions.map((id) => <BrowserAction extensionId={id} />).values()
-    buttons = Array.from(buttons)
-    buttons.push(<span className='buttonSeparator' />)
-
-    return buttons
-  }
-
   onBack (e) {
     this.onNav(e, 'canGoBack', 'back', appActions.onGoBack)
   }
@@ -159,6 +151,22 @@ class Navigator extends React.Component {
     ipc.off(messages.SHORTCUT_ACTIVE_FRAME_FORWARD, this.onForward)
   }
 
+  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper
+  get navigatorWrapper () {
+    return <div className={cx({
+      navigatorWrapper: true,
+      [css(styles.navigatorWrapper)]: true
+    })}
+      onDoubleClick={this.onDoubleClick}
+      onDragOver={this.onDragOver}
+      onDrop={this.onDrop}
+    >
+      {this.topLevelStartButtons}
+      <NavigationBar />
+      {this.topLevelEndButtons}
+    </div>
+  }
+
   // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelStartButtons
   get topLevelStartButtons () {
     return <div className={cx({
@@ -225,13 +233,51 @@ class Navigator extends React.Component {
     </span>
   }
 
-  // BEM Level: navigatorWrapper__topLevelEndButtons
+  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons
+  get topLevelEndButtons () {
+    return <div className={cx({
+      topLevelEndButtons: true,
+      [css(styles.topLevelEndButtons, this.props.isWideURLbarEnabled && styles.topLevelEndButtons_isWideURLbarEnabled)]: true
+    })}>
+      <div className={cx({
+        extraDragArea: !this.props.menuBarVisible,
+        allowDragging: this.props.shouldAllowWindowDrag,
+        [css(styles.topLevelEndButtons__extraDragArea_disabled)]: this.props.isWideURLbarEnabled
+      })} />
+      {
+        this.props.showBrowserActions
+          ? this.extensionButtons
+          : null
+      }
+      {this.braveMenuButton}
+      {
+        this.props.isCounterEnabled
+          ? this.counterBraveMenu
+          : null
+      }
+      {
+        this.props.isCaptionButton
+          ? <span className='buttonSeparator' />
+          : null
+      }
+    </div>
+  }
+
+  get extensionButtons () {
+    let buttons = this.props.extensionBrowserActions.map((id) => <BrowserAction extensionId={id} />).values()
+    buttons = Array.from(buttons)
+    buttons.push(<span className='buttonSeparator' />)
+
+    return buttons
+  }
+
+  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__braveMenuButton
   get braveMenuButton () {
     return <BrowserButton className={css(
-      styles.topLevelEndButtons__braveMenuButton,
-      !this.props.shieldsEnabled && styles.topLevelEndButtons__braveMenuButton_shieldsDisabled,
-      this.props.shieldsDown && styles.topLevelEndButtons__braveMenuButton_shieldsDown,
-      this.props.isCaptionButton && styles.topLevelEndButtons__braveMenuButton_leftOfCaptionButton
+      styles.braveMenuButton,
+      !this.props.shieldsEnabled && styles.braveMenuButton_shieldsDisabled,
+      this.props.shieldsDown && styles.braveMenuButton_shieldsDown,
+      this.props.isCaptionButton && styles.braveMenuButton_leftOfCaptionButton
     )}
       l10nId='braveMenu'
       testId={!this.props.shieldsEnabled ? 'braveMenuDisabled' : 'braveMenu'}
@@ -241,6 +287,22 @@ class Navigator extends React.Component {
     />
   }
 
+  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__counter_braveMenu
+  get counterBraveMenu () {
+    return <div data-test-id='counterBraveMenu'
+      className={css(
+        styles.braveMenu,
+        (this.props.menuBarVisible || !isWindows()) && styles.braveMenu_right,
+
+        // delay badge show-up.
+        // this is also set for extension badge
+        // in a way that both can appear at the same time.
+        styles.braveMenu_subtleShowUp
+      )}>
+      {this.props.totalBlocks}
+    </div>
+  }
+
   mergeProps (state, dispatchProps, ownProps) {
     const currentWindow = state.get('currentWindow')
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
@@ -303,53 +365,7 @@ class Navigator extends React.Component {
             </div>
             : null
         }
-        <div className={cx({
-          navigatorWrapper: true,
-          [css(styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper)]: true
-        })}
-          onDoubleClick={this.onDoubleClick}
-          onDragOver={this.onDragOver}
-          onDrop={this.onDrop}
-        >
-          {this.topLevelStartButtons}
-          <NavigationBar />
-          <div className={cx({
-            topLevelEndButtons: true,
-            [css(styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons, this.props.isWideURLbarEnabled && styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled)]: true
-          })}>
-            <div className={cx({
-              extraDragArea: !this.props.menuBarVisible,
-              allowDragging: this.props.shouldAllowWindowDrag,
-              [css(styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__extraDragArea_disabled)]: this.props.isWideURLbarEnabled
-            })} />
-            {
-              this.props.showBrowserActions
-                ? this.extensionButtons
-                : null
-            }
-            {this.braveMenuButton}
-            {
-              this.props.isCounterEnabled
-                ? <div className={css(
-                    styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__counter_braveMenu,
-                    (this.props.menuBarVisible || !isWindows()) && styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__counter_braveMenu_right,
-                    // delay badge show-up.
-                    // this is also set for extension badge
-                    // in a way that both can appear at the same time.
-                    styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__counter_braveMenu_subtleShowUp
-                  )}
-                  data-test-id='lionBadge'>
-                  {this.props.totalBlocks}
-                </div>
-                : null
-            }
-            {
-              this.props.isCaptionButton
-                ? <span className='buttonSeparator' />
-                : null
-            }
-          </div>
-        </div>
+        {this.navigatorWrapper}
       </div>
       {
         this.props.isCaptionButton
@@ -360,8 +376,6 @@ class Navigator extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(Navigator)
-
 const styles = StyleSheet.create({
   navbarCaptionButtonContainer__navbarMenubarFlexContainer: {
     display: 'flex',
@@ -373,8 +387,7 @@ const styles = StyleSheet.create({
     whiteSpace: 'nowrap'
   },
 
-  // TODO (Suguru): The first 2 containers will be updated/renamed
-  navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper: {
+  navigatorWrapper: {
     boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'space-between',
@@ -431,55 +444,31 @@ const styles = StyleSheet.create({
     margin: 0
   },
 
+  topLevelStartButtonContainer__topLevelStartButton_disabled: {
+    opacity: 0.2
+  },
+
   topLevelStartButtonContainer__topLevelStartButton_enabled: {
     opacity: 0.85,
     WebkitAppRegion: 'no-drag'
   },
 
-  topLevelStartButtonContainer__topLevelStartButton_disabled: {
-    opacity: 0.2
-  },
-
-  navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons: {
+  topLevelEndButtons: {
     display: 'flex',
     flexDirection: 'row',
     position: 'relative'
   },
 
-  // TODO (Suguru): Refactor navigator.js with Aphrodite to remove !important
-  navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled: {
-    marginLeft: '6px !important'
+  topLevelEndButtons_isWideURLbarEnabled: {
+    marginLeft: '6px'
   },
 
   // TODO (Suguru): Refactor navigationBar.less to remove !important
-  navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__extraDragArea_disabled: {
+  topLevelEndButtons__extraDragArea_disabled: {
     display: 'none !important'
   },
 
-  navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__counter_braveMenu: {
-    left: 'calc(50% - 1px)',
-    top: '14px',
-    position: 'absolute',
-    color: '#FFF',
-    borderRadius: '2.5px',
-    padding: '1px 2px',
-    pointerEvents: 'none',
-    font: '6pt "Arial Narrow"',
-    textAlign: 'center',
-    border: '0px solid #FFF',
-    background: '#555555',
-    minWidth: '10px',
-    WebkitUserSelect: 'none'
-  },
-
-  navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__counter_braveMenu_right: {
-    left: 'auto',
-    right: '2px'
-  },
-
-  navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__counter_braveMenu_subtleShowUp: globalStyles.animations.subtleShowUp,
-
-  topLevelEndButtons__braveMenuButton: {
+  braveMenuButton: {
     backgroundImage: `-webkit-image-set(url(${braveButton1x}) 1x, url(${braveButton2x}) 2x, url(${braveButton3x}) 3x)`,
     backgroundRepeat: 'no-repeat',
     height: globalStyles.navigationBar.urlbarForm.height,
@@ -494,16 +483,41 @@ const styles = StyleSheet.create({
     }
   },
 
-  topLevelEndButtons__braveMenuButton_shieldsDisabled: {
+  braveMenuButton_shieldsDisabled: {
     filter: 'grayscale(100%)',
     opacity: 0.4
   },
 
-  topLevelEndButtons__braveMenuButton_shieldsDown: {
+  braveMenuButton_shieldsDown: {
     filter: 'grayscale(100%)'
   },
 
-  topLevelEndButtons__braveMenuButton_leftOfCaptionButton: {
+  braveMenuButton_leftOfCaptionButton: {
     marginRight: '3px'
-  }
+  },
+
+  braveMenu: {
+    position: 'absolute',
+    left: 'calc(50% - 1px)',
+    top: '14px',
+    color: '#fff',
+    font: '6pt "Arial Narrow"',
+    textAlign: 'center',
+    padding: '1px 2px',
+    border: '0px solid #fff',
+    borderRadius: '2.5px',
+    background: '#555',
+    minWidth: '10px',
+    pointerEvents: 'none',
+    WebkitUserSelect: 'none'
+  },
+
+  braveMenu_right: {
+    left: 'auto',
+    right: '2px'
+  },
+
+  braveMenu_subtleShowUp: globalStyles.animations.subtleShowUp
 })
+
+module.exports = ReduxComponent.connect(Navigator)
diff --git a/app/renderer/components/navigation/publisherToggle.js b/app/renderer/components/navigation/publisherToggle.js
index 9dbcb570a73..4627f7076e0 100644
--- a/app/renderer/components/navigation/publisherToggle.js
+++ b/app/renderer/components/navigation/publisherToggle.js
@@ -7,7 +7,6 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ImmutableComponent = require('../immutableComponent')
-const BrowserButton = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
@@ -19,9 +18,7 @@ const settings = require('../../../../js/constants/settings')
 const {getSetting} = require('../../../../js/settings')
 const {getHostPattern, isHttpOrHttps} = require('../../../../js/lib/urlutil')
 const {getBaseUrl} = require('../../../../js/lib/appUrlUtil')
-
-// Style
-const commonStyles = require('../styles/commonStyles')
+const cx = require('../../../../js/lib/classSet')
 
 const noFundVerifiedPublisherImage = require('../../../extensions/brave/img/urlbar/browser_URL_fund_no_verified.svg')
 const fundVerifiedPublisherImage = require('../../../extensions/brave/img/urlbar/browser_URL_fund_yes_verified.svg')
@@ -106,58 +103,46 @@ class PublisherToggle extends ImmutableComponent {
     if (!this.props.locationInfo) {
       return null
     }
+
     return this.shouldShowAddPublisherButton
-      ? <span
+      // TODO (Suguru): NormalizeButton
+      // ref: navigator__buttonContainer_bookmarkButtonContainer on navigationBar.js
+      ? <button className={cx({
+        normalizeButton: true,
+        [css((!this.enabledForPaymentsPublisher && this.verifiedPublisher) && styles.publisherButton_noFundVerified, (this.enabledForPaymentsPublisher && this.verifiedPublisher) && styles.publisherButton_fundVerified, (!this.enabledForPaymentsPublisher && !this.verifiedPublisher) && styles.publisherButton_noFundUnverified, (this.enabledForPaymentsPublisher && !this.verifiedPublisher) && styles.publisherButton_fundUnverified, styles.publisherButton)]: true
+      })}
+        data-l10n-id={this.l10nString}
         data-test-id='publisherButton'
         data-test-authorized={this.enabledForPaymentsPublisher}
         data-test-verified={this.verifiedPublisher}
-        className={css(
-          commonStyles.navigator__buttonContainer,
-          commonStyles.navigator__buttonContainer_outsideOfURLbar,
-          styles.navigator__buttonContainer_addPublisherButtonContainer,
-        )}>
-        <BrowserButton
-          custom={[
-            !this.enabledForPaymentsPublisher && this.verifiedPublisher && styles.noFundVerified,
-            this.enabledForPaymentsPublisher && this.verifiedPublisher && styles.fundVerified,
-            !this.enabledForPaymentsPublisher && !this.verifiedPublisher && styles.noFundUnverified,
-            this.enabledForPaymentsPublisher && !this.verifiedPublisher && styles.fundUnverified
-          ]}
-          data-l10n-id={this.l10nString}
-          onClick={this.onAuthorizePublisher}
-        />
-      </span>
+        onClick={this.onAuthorizePublisher}
+      />
       : null
   }
 }
 
 const styles = StyleSheet.create({
-  // ref: navigator__buttonContainer_bookmarkButtonContainer on navigationBar.js
-  // ref: urlbarForm_isPublisherButtonEnabled on urlBar.js
-  navigator__buttonContainer_addPublisherButtonContainer: {
-    borderLeft: 'none',
-    borderTopLeftRadius: '0',
-    borderBottomLeftRadius: '0'
+  publisherButton_noFundVerified: {
+    // 1px added due to the check mark
+    background: `url(${noFundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
 
-  // TODO: Refactor to BEM style
-  noFundVerified: {
-    backgroundImage: `url(${noFundVerifiedPublisherImage})`,
-    backgroundSize: '18px',
-    marginLeft: '2px'
+  publisherButton_fundVerified: {
+    background: `url(${fundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
-  fundVerified: {
-    backgroundImage: `url(${fundVerifiedPublisherImage})`,
-    backgroundSize: '18px',
-    marginLeft: '2px'
+
+  publisherButton_noFundUnverified: {
+    background: `url(${noFundUnverifiedPublisherImage}) 50% no-repeat`
   },
-  noFundUnverified: {
-    backgroundImage: `url(${noFundUnverifiedPublisherImage})`,
-    backgroundSize: '18px'
+
+  publisherButton_fundUnverified: {
+    background: `url(${fundUnverifiedPublisherImage}) 50% no-repeat`
   },
-  fundUnverified: {
-    backgroundImage: `url(${fundUnverifiedPublisherImage})`,
-    backgroundSize: '18px'
+
+  publisherButton: {
+    backgroundSize: '18px 18px',
+    width: '100%',
+    height: '100%'
   }
 })
 
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index 33577e65925..9235d5c6186 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.js
@@ -466,6 +466,68 @@ class UrlBar extends React.Component {
     />
   }
 
+  // BEM Level: urlbarForm__titleBar
+  get titleBar () {
+    return <div id='titleBar' className={css(styles.titleBar)}>
+      <span className={css(styles.titleBar__host)}>{this.hostValue}</span>
+      <span>{this.hostValue && this.titleValue ? ' | ' : ''}</span>
+      <span>{this.titleValue}</span>
+    </div>
+  }
+
+  // BEM Level: urlbarForm__titleBar__loadTime
+  get loadTimer () {
+    return <span className={css(
+      styles.loadTime,
+      this.props.isActive && styles.loadTime_onFocus
+    )}
+      data-test-id='loadTime'>{this.loadTime}</span>
+  }
+
+  // BEM Level: urlbarForm__input
+  get input () {
+    return <input type='text'
+      spellCheck='false'
+      disabled={this.props.location === undefined && this.loadTime === ''}
+      onFocus={this.onFocus}
+      onBlur={this.onBlur}
+      onKeyDown={this.onKeyDown}
+      onKeyUp={this.onKeyUp}
+      onChange={this.onChange}
+      onKeyPress={this.onKeyPress}
+      onClick={this.onClick}
+      onContextMenu={this.onContextMenu}
+      data-l10n-id='urlbar'
+      data-test-id='urlInput'
+      className={cx({
+        private: this.private,
+        testHookLoadDone: !this.props.loading,
+        [css(styles.input, this.props.isWindows && styles.input_windows)]: true
+      })}
+      readOnly={this.props.titleMode}
+      ref={(node) => { this.urlInput = node }}
+    />
+  }
+
+  // BEM Level: urlbarForm__legend
+  get legend () {
+    return <legend className={css(
+      styles.legend,
+      !!this.props.isFocused && styles.legend_isFocused,
+      this.props.isPublisherButtonEnabled && styles.legend_isPublisherButtonEnabled
+    )} />
+  }
+
+  // BEM Level: urlbarForm__buttonContainer_showNoScript
+  get noScriptInfo () {
+    return <span className={css(commonStyles.navigator__urlbarForm__buttonContainer_showNoScriptInfo)}
+      onClick={this.onNoScript}>
+      <span className={css(styles.showNoScript__noScriptButton)}
+        data-l10n-id='noScriptButton'
+        data-test-id='noScriptButton' />
+    </span>
+  }
+
   onNoScript () {
     windowActions.setNoScriptVisible()
   }
@@ -572,55 +634,23 @@ class UrlBar extends React.Component {
       </div>
       {
         this.props.titleMode
-        ? <div id='titleBar' className={css(styles.urlbarForm__titleBar)}>
-          <span className={css(styles.urlbarForm__titleBar__host)}>{this.hostValue}</span>
-          <span>{this.hostValue && this.titleValue ? ' | ' : ''}</span>
-          <span>{this.titleValue}</span>
-        </div>
-        : <input type='text'
-          spellCheck='false'
-          disabled={this.props.location === undefined && this.loadTime === ''}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-          onKeyDown={this.onKeyDown}
-          onKeyUp={this.onKeyUp}
-          onChange={this.onChange}
-          onKeyPress={this.onKeyPress}
-          onClick={this.onClick}
-          onContextMenu={this.onContextMenu}
-          data-l10n-id='urlbar'
-          data-test-id='urlInput'
-          className={cx({
-            private: this.private,
-            testHookLoadDone: !this.props.loading,
-            [css(styles.urlbarForm__input, this.props.isWindows && styles.urlbarForm__input_windows)]: true
-          })}
-          readOnly={this.props.titleMode}
-          ref={(node) => { this.urlInput = node }} />
+        ? this.titleBar
+        : this.input
       }
-      <legend className={css(
-        styles.urlbarForm__legend,
-        !!this.props.isFocused && styles.urlbarForm__legend_isFocused,
-        this.props.isPublisherButtonEnabled && styles.urlbarForm__legend_isPublisherButtonEnabled
-      )} />
       {
-        this.props.titleMode || this.aboutPage
+        this.props.titleMode
         ? null
-        : <span className={css(
-          styles.urlbarForm__titleBar__loadTime,
-          this.props.isActive && styles.urlbarForm__titleBar__loadTime_onFocus
-        )}
-          data-test-id='loadtime'>{this.loadTime}</span>
+        : this.legend
       }
       {
-        !this.showNoScriptInfo
+        this.props.titleMode || this.aboutPage
         ? null
-        : <span className={css(commonStyles.navigator__urlbarForm__buttonContainer_showNoScriptInfo)}
-          onClick={this.onNoScript}>
-          <span className={css(styles.urlbarForm__buttonContainer_showNoScript__noScriptButton)}
-            data-l10n-id='noScriptButton'
-            data-test-id='noScriptButton' />
-        </span>
+        : this.loadTimer
+      }
+      {
+        this.showNoScriptInfo
+        ? this.noScriptInfo
+        : null
       }
       {
           this.shouldRenderUrlBarSuggestions
@@ -686,7 +716,7 @@ const styles = StyleSheet.create({
     borderBottomRightRadius: 0
   },
 
-  urlbarForm__titleBar: {
+  titleBar: {
     display: 'inline-block',
     color: globalStyles.color.chromeText,
     fontSize: globalStyles.spacing.defaultFontSize,
@@ -696,11 +726,11 @@ const styles = StyleSheet.create({
     whiteSpace: 'nowrap'
   },
 
-  urlbarForm__titleBar__host: {
+  titleBar__host: {
     fontWeight: 600
   },
 
-  urlbarForm__input: {
+  input: {
     background: '#fff',
     border: 'none',
     boxSizing: 'border-box',
@@ -721,7 +751,7 @@ const styles = StyleSheet.create({
     WebkitAppRegion: 'no-drag'
   },
 
-  urlbarForm__input_windows: {
+  input_windows: {
     fontWeight: 500,
     lineHeight: 1.4,
     margin: 0, // #5624
@@ -729,7 +759,7 @@ const styles = StyleSheet.create({
     width: '100%'
   },
 
-  urlbarForm__legend: {
+  legend: {
     ':before': {
       display: 'none',
       content: '" "',
@@ -746,28 +776,28 @@ const styles = StyleSheet.create({
     }
   },
 
-  urlbarForm__legend_isFocused: {
+  legend_isFocused: {
     ':before': {
       display: 'block'
     }
   },
 
-  urlbarForm__legend_isPublisherButtonEnabled: {
+  legend_isPublisherButtonEnabled: {
     ':before': {
       borderRadius: 0
     }
   },
 
-  urlbarForm__titleBar__loadTime: {
+  loadTime: {
     color: globalStyles.color.loadTimeColor,
     fontSize: '12px'
   },
 
-  urlbarForm__titleBar__loadTime_onFocus: {
+  loadTime_onFocus: {
     display: 'none'
   },
 
-  urlbarForm__buttonContainer_showNoScript__noScriptButton: {
+  showNoScript__noScriptButton: {
     background: `url(${iconNoScript}) center no-repeat`,
     width: '15px',
     height: '15px',
diff --git a/test/bravery-components/braveryPanelTest.js b/test/bravery-components/braveryPanelTest.js
index 1e8ced971d4..4fdd2392c0c 100644
--- a/test/bravery-components/braveryPanelTest.js
+++ b/test/bravery-components/braveryPanelTest.js
@@ -56,7 +56,7 @@ describe('Bravery Panel', function () {
         .tabByIndex(0)
         .loadUrl(url)
         .windowByUrl(Brave.browserWindowUrl)
-        .waitForTextValue('[data-test-id="lionBadge"]', '2')
+        .waitForTextValue('[data-test-id="counterBraveMenu"]', '2')
     })
   })
   describe('Tracking Protection stats', function () {
diff --git a/test/unit/app/renderer/components/navigation/navigatorTest.js b/test/unit/app/renderer/components/navigation/navigatorTest.js
index e7bb0b59cef..ec5a34fad92 100644
--- a/test/unit/app/renderer/components/navigation/navigatorTest.js
+++ b/test/unit/app/renderer/components/navigation/navigatorTest.js
@@ -174,13 +174,13 @@ describe('Navigator component unit tests', function () {
 
     it('counter is shown by default', function () {
       const wrapper = mount(<Navigator />)
-      assert.equal(wrapper.find('[data-test-id="lionBadge"]').length, 1)
+      assert.equal(wrapper.find('[data-test-id="counterBraveMenu"]').length, 1)
     })
 
     it('counter is not shown when disabled via settings', function () {
       settingDefaultValue = false
       const wrapper = mount(<Navigator />)
-      assert.equal(wrapper.find('[data-test-id="lionBadge"]').length, 0)
+      assert.equal(wrapper.find('[data-test-id="counterBraveMenu"]').length, 0)
     })
   })
 })