From d9962001e517f31b265ea0ee5b039d6d166c060c Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Tue, 4 Jul 2017 21:46:28 +0900
Subject: [PATCH] Refactor navigationBar (part 3)

Full changelog: https://github.com/brave/browser-laptop/commit/8997c768ecfcc809841ecf12b5b44aa04cb9d01e

Test Plan: available on https://github.com/brave/browser-laptop/pull/9299#issue-234116287
---
 .../components/navigation/homeButton.js       |   7 +-
 .../components/navigation/navigationBar.js    |  46 ++--
 .../components/navigation/navigator.js        | 220 +++++++++---------
 .../components/navigation/publisherToggle.js  |  60 +++--
 app/renderer/components/navigation/urlBar.js  | 167 ++++++++-----
 test/bravery-components/braveryPanelTest.js   |   2 +-
 .../components/navigation/navigatorTest.js    |   4 +-
 7 files changed, 279 insertions(+), 227 deletions(-)

diff --git a/app/renderer/components/navigation/homeButton.js b/app/renderer/components/navigation/homeButton.js
index 5a34dc175ef..226e5315528 100644
--- a/app/renderer/components/navigation/homeButton.js
+++ b/app/renderer/components/navigation/homeButton.js
@@ -56,10 +56,11 @@ class HomeButton extends ImmutableComponent {
   }
 
   render () {
+    // BEM Level: navigator__navigationButtonContainer
     return <span className='navigationButtonContainer'>
       <button className={cx({
         normalizeButton: true,
-        [css(styles.navigator__navigationButtonContainer__navigationButton, styles.navigator__navigationButtonContainer__navigationButton_homeButton)]: true
+        [css(styles.navigationButton, styles.navigationButton_homeButton)]: true
       })}
         data-test-id='homeButton'
         data-l10n-id='homeButton'
@@ -71,7 +72,7 @@ class HomeButton extends ImmutableComponent {
 }
 
 const styles = StyleSheet.create({
-  navigator__navigationButtonContainer__navigationButton: {
+  navigationButton: {
     // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L550-L553
     backgroundColor: globalStyles.color.buttonColor,
     display: 'inline-block',
@@ -83,7 +84,7 @@ const styles = StyleSheet.create({
     padding: 0
   },
 
-  navigator__navigationButtonContainer__navigationButton_homeButton: {
+  navigationButton_homeButton: {
     background: `url(${homeButton}) center no-repeat`,
     backgroundSize: `16px 16px`
   }
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index 728198ed983..7b156dd2c41 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -112,6 +112,25 @@ 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>
+  }
+
   componentDidMount () {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
@@ -212,20 +231,7 @@ 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} />
@@ -315,20 +321,12 @@ 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'
   }
 })
 
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
index 142653ee133..1cea287de0a 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)
   }
@@ -160,6 +152,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({
@@ -238,13 +246,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'}
@@ -254,6 +300,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, ownProps) {
     const currentWindow = state.get('currentWindow')
     const swipeLeftPercent = state.get('swipeLeftPercent')
@@ -334,57 +396,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}
-          {
-            this.props.showNavigationBar
-            ? <NavigationBar />
-            : null
-          }
-          <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
@@ -395,8 +407,6 @@ class Navigator extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(Navigator)
-
 const styles = StyleSheet.create({
   navbarCaptionButtonContainer__navbarMenubarFlexContainer: {
     display: 'flex',
@@ -408,8 +418,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',
@@ -466,55 +475,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,
@@ -529,16 +514,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 bddbe4e059f..00ffe303ab7 100644
--- a/app/renderer/components/navigation/publisherToggle.js
+++ b/app/renderer/components/navigation/publisherToggle.js
@@ -8,7 +8,6 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const BrowserButton = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
@@ -23,6 +22,7 @@ const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
 // 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')
@@ -76,15 +76,12 @@ class PublisherToggle extends React.Component {
       className={css(
         commonStyles.navigator__buttonContainer,
         commonStyles.navigator__buttonContainer_outsideOfURLbar,
-        styles.navigator__buttonContainer_addPublisherButtonContainer,
+        styles.navigator__buttonContainer_publisherToggleContainer
       )}>
-      <BrowserButton
-        custom={[
-          !this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher && styles.noFundVerified,
-          this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher && styles.noFundVerified,
-          !this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher && styles.noFundUnverified,
-          this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher && styles.fundUnverified
-        ]}
+      <button className={cx({
+        normalizeButton: true,
+        [css((!this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButton_noFundVerified, (this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButton_fundVerified, (!this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButton_noFundUnverified, (this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButton_fundUnverified, styles.publisherButton)]: true
+      })}
         data-l10n-id={this.l10nString}
         onClick={this.onAuthorizePublisher}
       />
@@ -92,34 +89,35 @@ class PublisherToggle extends React.Component {
   }
 }
 
-module.exports = ReduxComponent.connect(PublisherToggle)
-
 const styles = StyleSheet.create({
-  // ref: navigator__buttonContainer_bookmarkButtonContainer on navigationBar.js
-  // ref: urlbarForm_isPublisherButtonEnabled on urlBar.js
-  navigator__buttonContainer_addPublisherButtonContainer: {
+  navigator__buttonContainer_publisherToggleContainer: {
     borderLeft: 'none',
-    borderTopLeftRadius: '0',
-    borderBottomLeftRadius: '0'
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
   },
 
-  // TODO: Refactor to BEM style
-  noFundVerified: {
-    backgroundImage: `url(${noFundVerifiedPublisherImage})`,
-    backgroundSize: '18px',
-    marginLeft: '2px'
+  publisherButton_noFundVerified: {
+    // 1px added due to the check mark
+    background: `url(${noFundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
-  fundVerified: {
-    backgroundImage: `url(${fundVerifiedPublisherImage})`,
-    backgroundSize: '18px',
-    marginLeft: '2px'
+
+  publisherButton_fundVerified: {
+    background: `url(${fundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
-  noFundUnverified: {
-    backgroundImage: `url(${noFundUnverifiedPublisherImage})`,
-    backgroundSize: '18px'
+
+  publisherButton_noFundUnverified: {
+    background: `url(${noFundUnverifiedPublisherImage}) 50% no-repeat`
   },
-  fundUnverified: {
-    backgroundImage: `url(${fundUnverifiedPublisherImage})`,
-    backgroundSize: '18px'
+
+  publisherButton_fundUnverified: {
+    background: `url(${fundUnverifiedPublisherImage}) 50% no-repeat`
+  },
+
+  publisherButton: {
+    backgroundSize: '18px 18px',
+    width: '100%',
+    height: '100%'
   }
 })
+
+module.exports = ReduxComponent.connect(PublisherToggle)
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index cc0da050e0e..098dc9fe178 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.js
@@ -394,6 +394,84 @@ class UrlBar extends React.Component {
     return ''
   }
 
+  get UrlBarIcon () {
+    return <UrlBarIcon
+      activateSearchEngine={this.props.activateSearchEngine}
+      active={this.props.isActive}
+      isSecure={this.props.isSecure}
+      isHTTPPage={this.props.isHTTPPage}
+      loading={this.props.loading}
+      location={this.props.location}
+      searchSelectEntry={this.props.searchSelectEntry}
+      title={this.props.title}
+      titleMode={this.props.titleMode}
+      isSearching={this.props.location !== this.props.urlbarLocation}
+      activeTabShowingMessageBox={this.props.activeTabShowingMessageBox}
+    />
+  }
+
+  // BEM Level: urlbarForm__titleBar
+  get titleBar () {
+    return <div id='titleBar' className={css(styles.titleBar)}>
+      <span className={css(styles.titleBar__host)}>{this.props.hostValue}</span>
+      <span>{this.props.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.displayURL === 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()
   }
@@ -488,72 +566,39 @@ class UrlBar extends React.Component {
     return <form
       className={cx({
         urlbarForm: true,
-        [css(styles.urlbarForm, this.props.isWideURLbarEnabled && styles.urlbarForm_wide, this.props.titleMode && styles.urlbarForm_titleMode, !this.props.titleMode && styles.urlbarForm_notTitleMode, !this.showNoScriptInfo && styles.urlbarForm_noScriptEnabled, this.props.publisherButtonVisible && styles.urlbarForm_isPublisherButtonEnabled)]: true
+        [css(styles.urlbarForm, this.props.isWideURLbarEnabled && styles.urlbarForm_wide, this.props.titleMode && styles.urlbarForm_titleMode, !this.props.titleMode && styles.urlbarForm_notTitleMode, !this.props.showNoScriptInfo && styles.urlbarForm_noScriptDisabled, this.props.publisherButtonVisible && styles.urlbarForm_isPublisherButtonEnabled)]: true
       })}
       action='#'
       id='urlbar'>
       <div className={css(commonStyles.navigator__urlbarForm__urlbarIconContainer)}>
-        <UrlBarIcon
-          titleMode={this.props.titleMode}
+        <UrlBarIcon titleMode={this.props.titleMode}
         />
       </div>
       {
         this.props.titleMode
-        ? <div id='titleBar' className={css(styles.urlbarForm__titleBar)}>
-          <span className={css(styles.urlbarForm__titleBar__host)}>{this.props.hostValue}</span>
-          <span>{this.props.hostValue && this.titleValue ? ' | ' : ''}</span>
-          <span>{this.titleValue}</span>
-        </div>
-        : <input type='text'
-          spellCheck='false'
-          disabled={this.props.displayURL === 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
+      }
+      {
+        this.props.titleMode
+        ? null
+        : this.legend
       }
-      <legend className={css(
-        styles.urlbarForm__legend,
-        !!this.props.isFocused && styles.urlbarForm__legend_isFocused,
-        this.props.isPublisherButtonEnabled && styles.urlbarForm__legend_isPublisherButtonEnabled
-      )} />
       {
         this.props.showDisplayTime
-        ? <span className={css(
-          styles.urlbarForm__titleBar__loadTime,
-          this.props.isActive && styles.urlbarForm__titleBar__loadTime_onFocus
-        )}
-          data-test-id='loadtime'>{this.loadTime}</span>
+        ? this.loadTimer
         : null
       }
       {
-        !this.props.showNoScriptInfo
-        ? 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.props.showNoScriptInfo
+        ? this.noScriptInfo
+        : null
       }
       {
-          this.props.showUrlBarSuggestions
-          ? <UrlBarSuggestions />
-          : null
-        }
+        this.props.showUrlBarSuggestions
+        ? <UrlBarSuggestions />
+        : null
+      }
     </form>
   }
 }
@@ -599,7 +644,7 @@ const styles = StyleSheet.create({
     color: globalStyles.color.chromeText
   },
 
-  urlbarForm_noScriptEnabled: {
+  urlbarForm_noScriptDisabled: {
     paddingRight: '10px'
   },
 
@@ -609,7 +654,7 @@ const styles = StyleSheet.create({
     borderBottomRightRadius: 0
   },
 
-  urlbarForm__titleBar: {
+  titleBar: {
     display: 'inline-block',
     color: globalStyles.color.chromeText,
     fontSize: globalStyles.spacing.defaultFontSize,
@@ -619,11 +664,11 @@ const styles = StyleSheet.create({
     whiteSpace: 'nowrap'
   },
 
-  urlbarForm__titleBar__host: {
+  titleBar__host: {
     fontWeight: 600
   },
 
-  urlbarForm__input: {
+  input: {
     background: '#fff',
     border: 'none',
     boxSizing: 'border-box',
@@ -644,7 +689,7 @@ const styles = StyleSheet.create({
     WebkitAppRegion: 'no-drag'
   },
 
-  urlbarForm__input_windows: {
+  input_windows: {
     fontWeight: 500,
     lineHeight: 1.4,
     margin: 0, // #5624
@@ -652,7 +697,7 @@ const styles = StyleSheet.create({
     width: '100%'
   },
 
-  urlbarForm__legend: {
+  legend: {
     ':before': {
       display: 'none',
       content: '" "',
@@ -669,28 +714,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 1c0ad6d93e1..1206d9607dc 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 93b8c9cf6ad..063dd2f36f9 100644
--- a/test/unit/app/renderer/components/navigation/navigatorTest.js
+++ b/test/unit/app/renderer/components/navigation/navigatorTest.js
@@ -175,13 +175,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)
     })
   })
 })