From 75f3a18145b474c4538d7aa7cb7a915074c9b3ba Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Thu, 20 Jul 2017 00:51:58 +0900
Subject: [PATCH] Refactor navigationBar (part 2)

Addresses #9283

Full changelog:
https://github.com/brave/browser-laptop/commit/561ffbd17d9581e283587708ef7b7332f6792c6a
https://github.com/brave/browser-laptop/commit/d82d8bcf919f0bebdb523e993c97a9fb9d808115
https://github.com/brave/browser-laptop/commit/3990ecba458dde443e35e7c9bca74eb12ea77b82
https://github.com/brave/browser-laptop/commit/c1b8416ef91b4714e5c645a7cc894e443469e7e7
https://github.com/brave/browser-laptop/commit/2d7d7fa476ee82ff98a9b563e4fb81a327a926a2
https://github.com/brave/browser-laptop/commit/7d711083bf1f3cad789a51636dc8d318f6ce5ffc
https://github.com/brave/browser-laptop/commit/e7e96c81b0c9302270f0cbca0f93fdf9728876aa
https://github.com/brave/browser-laptop/commit/fcb7989105a72db2f05d06bc61411b1b77f05470
---
 .../components/common/browserButton.js        |  25 ++-
 .../components/common/longPressButton.js      |  34 +++-
 .../components/navigation/browserAction.js    |   9 +-
 .../navigation/browserActionBadge.js          |  12 +-
 .../navigation/buttons/bookmarkButton.js      |  47 ++---
 .../navigation/buttons/homeButton.js          |  37 ++--
 .../buttons/navigationBarButtonContainer.js   |  45 +++--
 .../navigation/buttons/reloadButton.js        |  34 +---
 .../navigation/buttons/stopButton.js          |  55 ++----
 .../components/navigation/navigationBar.js    |  22 ++-
 .../components/navigation/navigator.js        |  77 ++++----
 .../components/navigation/publisherToggle.js  |  59 ++----
 app/renderer/components/navigation/urlBar.js  | 170 +++++++++---------
 .../components/navigation/urlBarIcon.js       |  28 +--
 .../app/renderer/components/messageBoxTest.js |   4 +-
 test/lib/selectors.js                         |  10 +-
 test/navbar-components/navigationBarTest.js   |  88 ++++-----
 test/navbar-components/urlBarTest.js          |  18 +-
 test/tab-components/frameTest.js              |  20 +--
 test/tab-components/tabTest.js                |   2 +-
 .../navigation/navigationBarTest.js           |  11 ++
 .../components/navigation/navigatorTest.js    |   6 +-
 .../navigation/publisherToggleTest.js         |   6 +-
 23 files changed, 407 insertions(+), 412 deletions(-)

diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
index ee6eb09d22d..8ba8519072e 100644
--- a/app/renderer/components/common/browserButton.js
+++ b/app/renderer/components/common/browserButton.js
@@ -88,7 +88,14 @@ class NormalizedButton extends ImmutableComponent {
       data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
       data-button-value={this.props.dataButtonValue}
       onClick={this.props.onClick}
-      className={css(styles.normalizedButton, this.props.custom)}
+      className={css(
+        styles.normalizedButton,
+
+        // For homeButton, stopButton, and bookmarkButton
+        this.props.navigationButton && styles.normalizedButton_navigationButton,
+
+        this.props.custom
+      )}
 
       // for publisherToggle.js
       data-test-authorized={this.props.testAuthorized}
@@ -202,13 +209,12 @@ const styles = StyleSheet.create({
     }
   },
 
+  // This should be included in navigationBarButtonContainer
   browserButton_extensionItem: {
-    WebkitAppRegion: 'no-drag',
     backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
     height: '17px',
-    margin: '4px 0 0 0',
-    opacity: '0.85',
-    backgroundRepeat: 'no-repeat'
+    opacity: '0.85'
   },
 
   browserButton_groupedItem: {
@@ -285,6 +291,15 @@ const styles = StyleSheet.create({
     margin: 0,
     userSelect: 'none',
     whiteSpace: 'nowrap'
+  },
+
+  normalizedButton_navigationButton: {
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L585
+    padding: 0
   }
 })
 
diff --git a/app/renderer/components/common/longPressButton.js b/app/renderer/components/common/longPressButton.js
index 3b3d3df1a2f..710244b6ab3 100644
--- a/app/renderer/components/common/longPressButton.js
+++ b/app/renderer/components/common/longPressButton.js
@@ -4,6 +4,8 @@
 
 const React = require('react')
 const ImmutableComponent = require('../immutableComponent')
+const cx = require('../../../../js/lib/classSet')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 class LongPressButton extends ImmutableComponent {
   constructor () {
@@ -78,16 +80,42 @@ class LongPressButton extends ImmutableComponent {
   }
 
   render () {
-    return <button data-l10n-id={this.props.l10nId}
+    return <button
+      // Add 'navigationButton' for the buttons on navigationBarWrapper
+      // eg. reloadButton, backButton and forwardButton
+      // TODO (Suguru): Refactor newFrameButton on tabs.js
+      className={cx({
+        [this.props.className]: this.props.className,
+        [css(styles.normalizedButton, this.props.navigationButton && styles.normalizedButton_navigationButton, this.props.custom)]: true
+      })}
+      data-l10n-id={this.props.l10nId}
       data-test-id={this.props.testId}
-      className={this.props.className}
       disabled={this.props.disabled}
       onClick={this.onClick}
       ref={(node) => { this.buttonNode = node }}
       onMouseDown={this.onMouseDown}
       onMouseUp={this.onMouseUp}
-      onMouseLeave={this.onMouseLeave} />
+      onMouseLeave={this.onMouseLeave}
+    />
   }
 }
 
+const styles = StyleSheet.create({
+  // See browserButton.js for the same properties
+  normalizedButton: {
+    background: 'none',
+    outline: 'none',
+    border: 'none',
+    margin: 0,
+    whiteSpace: 'nowrap'
+  },
+
+  normalizedButton_navigationButton: {
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+    padding: 0
+  }
+})
+
 module.exports = LongPressButton
diff --git a/app/renderer/components/navigation/browserAction.js b/app/renderer/components/navigation/browserAction.js
index 842372bed97..cc086426143 100644
--- a/app/renderer/components/navigation/browserAction.js
+++ b/app/renderer/components/navigation/browserAction.js
@@ -5,11 +5,12 @@
 const React = require('react')
 const electron = require('electron')
 const ipc = electron.ipcRenderer
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet} = require('aphrodite/no-important')
 const Immutable = require('immutable')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
+const NavigationBarButtonContainer = require('./buttons/navigationBarButtonContainer')
 const {BrowserButton} = require('../common/browserButton')
 const BrowserActionBadge = require('./browserActionBadge')
 
@@ -81,7 +82,9 @@ class BrowserAction extends React.Component {
 
   render () {
     // TODO(bridiver) should have some visual notification of hover/press
-    return <div className={css(styles.browserActionButton)}>
+    return <NavigationBarButtonContainer
+      isSquare
+      containerFor={styles.browserActionButton}>
       <BrowserButton
         extensionItem
         l10nId='browserActionButton'
@@ -101,7 +104,7 @@ class BrowserAction extends React.Component {
         ? <BrowserActionBadge text={this.props.text} color={this.props.color} />
         : null
       }
-    </div>
+    </NavigationBarButtonContainer>
   }
 }
 
diff --git a/app/renderer/components/navigation/browserActionBadge.js b/app/renderer/components/navigation/browserActionBadge.js
index 3a0e356a826..07c131cf4cd 100644
--- a/app/renderer/components/navigation/browserActionBadge.js
+++ b/app/renderer/components/navigation/browserActionBadge.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const ImmutableComponent = require('../immutableComponent')
 const globalStyles = require('../styles/global')
 
@@ -30,11 +30,11 @@ class BrowserActionBadge extends ImmutableComponent {
       ref='badge'
       className={css(
         styles.browserActionBadge,
-        this.centered && styles.centered,
+        this.centered && styles.browserActionBadge_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
+        styles.browserActionBadge_subtleShowUp
       )}
       style={{backgroundColor: this.props.color || globalStyles.color.braveMediumOrange}}
       >{this.props.text}</div>
@@ -56,14 +56,16 @@ const styles = StyleSheet.create({
     minWidth: '10px',
     userSelect: 'none'
   },
-  centered: {
+
+  browserActionBadge_centered: {
     left: '50%',
     transform: 'translateX(-50%)',
     maxWidth: 'calc(100% - 5px)',
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   },
-  subtleShowUp: globalStyles.animations.subtleShowUp
+
+  browserActionBadge_subtleShowUp: globalStyles.animations.subtleShowUp
 })
 
 module.exports = BrowserActionBadge
diff --git a/app/renderer/components/navigation/buttons/bookmarkButton.js b/app/renderer/components/navigation/buttons/bookmarkButton.js
index 93ab551c29b..0ea3bfe087a 100644
--- a/app/renderer/components/navigation/buttons/bookmarkButton.js
+++ b/app/renderer/components/navigation/buttons/bookmarkButton.js
@@ -8,6 +8,7 @@ const ipc = require('electron').ipcRenderer
 
 // Components
 const ReduxComponent = require('../../reduxComponent')
+const {NormalizedButton} = require('../../common/browserButton')
 
 // Actions
 const windowActions = require('../../../../../js/actions/windowActions')
@@ -15,22 +16,16 @@ const windowActions = require('../../../../../js/actions/windowActions')
 // Constants
 const siteTags = require('../../../../../js/constants/siteTags')
 const messages = require('../../../../../js/constants/messages')
-const settings = require('../../../../../js/constants/settings')
 
 // State
 const tabState = require('../../../../common/state/tabState')
 const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
-// Store
-const windowStore = require('../../../../../js/stores/windowStore')
-
 // Utils
-const cx = require('../../../../../js/lib/classSet')
 const siteUtil = require('../../../../../js/state/siteUtil')
 const UrlUtil = require('../../../../../js/lib/urlutil')
-const {getSetting} = require('../../../../../js/settings')
 
-const {StyleSheet, css} = require('aphrodite/no-important')
+const {StyleSheet} = require('aphrodite/no-important')
 
 const bookmarkButtonIcon = require('../../../../../img/toolbar/bookmark_btn.svg')
 const bookmarkedButtonIcon = require('../../../../../img/toolbar/bookmark_marked.svg')
@@ -41,14 +36,6 @@ class BookmarkButton extends React.Component {
     this.onToggleBookmark = this.onToggleBookmark.bind(this)
   }
 
-  get bookmarked () {
-    return this.props.activeFrameKey !== undefined && this.props.bookmarked
-  }
-
-  get activeFrame () {
-    return windowStore.getFrame(this.props.activeFrameKey)
-  }
-
   onToggleBookmark () {
     const editing = this.bookmarked
     // show the AddEditBookmarkHanger control; saving/deleting takes place there
@@ -78,14 +65,11 @@ class BookmarkButton extends React.Component {
   mergeProps (state, dispatchProps, ownProps) {
     const currentWindow = state.get('currentWindow')
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
-    const activeFrameKey = activeFrame.get('key')
     const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
     const activeTab = tabState.getByTabId(state, activeTabId)
 
     const props = {}
-    props.activeFrameKey = activeFrameKey
     props.bookmarked = activeTab && activeTab.get('bookmarked')
-    props.sites = state.get('sites')
 
     return props
   }
@@ -97,18 +81,13 @@ class BookmarkButton extends React.Component {
 
   render () {
     return (
-      <button
-        className={cx({
-          // TODO: check if iconOnly solves this and if not
-          // find a way to remove cx cos cx is evooool :P
-          normalizeButton: true,
-          withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-          [css(styles.bookmark__button, this.bookmarked && styles.bookmark__button_remove)]: true
-        })}
-        data-l10n-id={
-          this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'
-        }
-        data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
+      <NormalizedButton navigationButton
+        custom={[
+          styles.bookmarkButton,
+          this.bookmarked && styles.bookmarkButton_bookmarked
+        ]}
+        l10nId={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+        testId={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
         onClick={this.onToggleBookmark}
       />
     )
@@ -116,14 +95,12 @@ class BookmarkButton extends React.Component {
 }
 
 const styles = StyleSheet.create({
-  bookmark__button: {
+  bookmarkButton: {
     background: `url(${bookmarkButtonIcon}) center no-repeat`,
-    backgroundSize: '14px 14px',
-    width: '100%',
-    height: '100%'
+    backgroundSize: '14px 14px'
   },
 
-  bookmark__button_remove: {
+  bookmarkButton_bookmarked: {
     background: `url(${bookmarkedButtonIcon}) center no-repeat`
   }
 })
diff --git a/app/renderer/components/navigation/buttons/homeButton.js b/app/renderer/components/navigation/buttons/homeButton.js
index b4267b65827..718ec955fb2 100644
--- a/app/renderer/components/navigation/buttons/homeButton.js
+++ b/app/renderer/components/navigation/buttons/homeButton.js
@@ -4,9 +4,11 @@
 
 const React = require('react')
 const Immutable = require('immutable')
+const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../../reduxComponent')
+const {NormalizedButton} = require('../../common/browserButton')
 
 // Actions
 const appActions = require('../../../../../js/actions/appActions')
@@ -19,13 +21,9 @@ const tabState = require('../../../../common/state/tabState')
 const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
 // Utils
-const cx = require('../../../../../js/lib/classSet')
 const eventUtil = require('../../../../../js/lib/eventUtil')
 const {getSetting} = require('../../../../../js/settings')
 
-const {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('../../styles/global')
-
 const homeButtonIcon = require('../../../../../img/toolbar/home_btn.svg')
 
 class HomeButton extends React.Component {
@@ -60,33 +58,20 @@ class HomeButton extends React.Component {
     return props
   }
 
+  // BEM Level: navigationBar__buttonContainer
   render () {
-    return (
-      <button className={cx({
-        // TODO: check if iconOnly solves this and if not
-        // find a way to remove cx cos cx is evooool :P
-        normalizeButton: true,
-        [css(styles.navigationButton, styles.navigationButton_home)]: true
-      })}
-        data-test-id='homeButton'
-        data-l10n-id='homeButton'
-        onClick={this.onHome}
-      />
-    )
+    return <NormalizedButton
+      navigationButton
+      custom={styles.homeButton}
+      testId='homeButton'
+      l10nId='homeButton'
+      onClick={this.onHome}
+    />
   }
 }
 
 const styles = StyleSheet.create({
-  navigationButton: {
-    backgroundColor: globalStyles.color.buttonColor,
-    display: 'inline-block',
-    width: '100%',
-    height: '100%',
-    margin: 0,
-    padding: 0
-  },
-
-  navigationButton_home: {
+  homeButton: {
     background: `url(${homeButtonIcon}) center no-repeat`,
     backgroundSize: '16px 16px'
   }
diff --git a/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js b/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
index b885fcdf390..7b5aed340cc 100644
--- a/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
+++ b/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
@@ -6,20 +6,37 @@ const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../../styles/global')
 
-// TODO: Check if stateless components can benefit from reduxComponent
-// by setting ownProps to stateless props.
+// This component normalizes the wrapper for buttons called on files
+// under app/renderer/components/navigation/buttons/ ro reduce the risk of
+// visual regressions and style inconsistency.
+// Ref https://github.com/brave/browser-laptop/pull/9299#discussion_r124714562
+
+// TODO (Cezar): Check if stateless components can benefit
+// from reduxComponent by setting ownProps to stateless props.
 class NavigationBarButtonContainer extends React.Component {
   render () {
     return (
       <div className={css(
-        this.props.isBoxed && styles.boxed,
-        this.props.isNested && styles.nestedContainer,
-        this.props.isStandalone && styles.standaloneContainer,
-        this.props.onNavigationBarChrome && styles.chromeContainer,
+        // Used for bookmarkButtonContainer, PublisherToggle, noScriptInfo, UrlBarIcon, and BrowserAction
+        this.props.isSquare && styles.container_square,
+
+        // isNested and isStandalone should not be called at the same time
+        // Add border to the bookmark button and publisher button only
+        this.props.isNested && styles.container_nested,
+
+        // Used for stopButton, reloadButton, and homeButton on navigationBar.js
+        // and backButton and forwardButton on navigator.js
+        this.props.isStandalone && styles.container_standalone,
+
+        // Used for stopButton, reloadButton, and homeButton on navigationBar.js
+        // NOT used for the backButton and forwardButton
+        this.props.onNavigationBarChrome && styles.container_chromeButton,
 
         // BEM style class name unique for each component
         this.props.containerFor
-      )}>
+      )}
+        data-test-id={this.props.testId}
+        style={this.props.containerStyle}>
         {this.props.children}
       </div>
     )
@@ -28,9 +45,8 @@ class NavigationBarButtonContainer extends React.Component {
 
 const styles = StyleSheet.create({
   // #9283
-  // Create 25x25 squares and place the buttons at the center of each container
-  // Used for bookmarkButtonContainer, PublisherToggle, noScriptInfo, and UrlBarIcon.
-  boxed: {
+  // Create 25x25 square and place the button at the center of each container
+  container_square: {
     boxSizing: 'border-box',
     display: 'flex',
     alignItems: 'center',
@@ -42,15 +58,12 @@ const styles = StyleSheet.create({
     WebkitAppRegion: 'no-drag'
   },
 
-  // Add border to the bookmark button and publisher button only
-  nestedContainer: {
+  container_nested: {
     border: `1px solid ${globalStyles.color.urlBarOutline}`,
     borderRadius: globalStyles.radius.borderRadiusURL
   },
 
-  // Used for stopButton, reloadButton, and homeButton on navigationBar.js
-  // and backButton and forwardButton on navigator.js
-  standaloneContainer: {
+  container_standalone: {
     display: 'inline-block',
     borderRadius: globalStyles.radius.borderRadiusNavigationButton,
     height: globalStyles.navigationBar.urlbarForm.height,
@@ -62,7 +75,7 @@ const styles = StyleSheet.create({
     }
   },
 
-  chromeContainer: {
+  container_chromeButton: {
     width: globalStyles.navigationBar.navigationButtonContainer.width
   }
 })
diff --git a/app/renderer/components/navigation/buttons/reloadButton.js b/app/renderer/components/navigation/buttons/reloadButton.js
index b9a99515438..cdd3810ba69 100644
--- a/app/renderer/components/navigation/buttons/reloadButton.js
+++ b/app/renderer/components/navigation/buttons/reloadButton.js
@@ -21,11 +21,10 @@ const tabState = require('../../../../common/state/tabState')
 const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
 // Utils
-const cx = require('../../../../../js/lib/classSet')
 const eventUtil = require('../../../../../js/lib/eventUtil')
 const contextMenus = require('../../../../../js/contextMenus')
 
-const {StyleSheet, css} = require('aphrodite/no-important')
+const {StyleSheet} = require('aphrodite/no-important')
 
 const reloadButtonIcon = require('../../../../../img/toolbar/reload_btn.svg')
 
@@ -62,33 +61,18 @@ class ReloadButton extends React.Component {
 
   render () {
     // BEM Level: navigationBar__buttonContainer
-    return (
-      // TODO: check if iconOnly solves this and if not
-      // find a way to remove cx cos cx is evooool :P
-      <LongPressButton className={cx({
-        normalizeButton: true,
-        [css(styles.navigationButton, styles.navigationButton_reload)]: true
-      })}
-        l10nId='reloadButton'
-        testId='reloadButton'
-        onClick={this.onReload}
-        onLongPress={this.onReloadLongPress}
-      />
-    )
+    return <LongPressButton
+      navigationButton
+      custom={styles.navigationButton_reload}
+      l10nId='reloadButton'
+      testId='reloadButton'
+      onClick={this.onReload}
+      onLongPress={this.onReloadLongPress}
+    />
   }
 }
 
 const styles = StyleSheet.create({
-  navigationButton: {
-    display: 'inline-block',
-    width: '100%',
-    height: '100%',
-
-    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L584-L585
-    margin: 0,
-    padding: 0
-  },
-
   navigationButton_reload: {
     background: `url(${reloadButtonIcon}) center no-repeat`,
     backgroundSize: '13px 13px'
diff --git a/app/renderer/components/navigation/buttons/stopButton.js b/app/renderer/components/navigation/buttons/stopButton.js
index 1868bf15513..76ceade5700 100644
--- a/app/renderer/components/navigation/buttons/stopButton.js
+++ b/app/renderer/components/navigation/buttons/stopButton.js
@@ -3,51 +3,34 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-
-// Utils
-const cx = require('../../../../../js/lib/classSet')
-
-const {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('../../styles/global')
+const {StyleSheet} = require('aphrodite/no-important')
+const {NormalizedButton} = require('../../common/browserButton')
 
 const stopLoadingButtonIcon = require('../../../../../img/toolbar/stoploading_btn.svg')
 
 class StopButton extends React.Component {
+  // BEM Level: navigationBar__buttonContainer
   render () {
-    return (
-      <button className={cx({
-        // TODO: check if iconOnly solves this and if not
-        // find a way to remove cx cos cx is evooool :P
-        normalizeButton: true,
-        [css(styles.navigationButton, styles.navigationButton_stop)]: true
-      })}
-        data-l10n-id='stopButton'
-        onClick={
-          /*
-          TODO: check if this is ok to ship as-is.
-          This is likely not the best way given it is
-          expecting the property from parent component but this
-          was a quick workaround to avoid dupping code in both navigationbar
-          and this component.
-          */
-          this.props.onStop
-        }
-      />
-    )
+    return <NormalizedButton
+      navigationButton
+      custom={styles.stopButton}
+      l10nid='stopButton'
+      onClick={
+        /*
+        TODO: check if this is ok to ship as-is.
+        This is likely not the best way given it is
+        expecting the property from parent component but this
+        was a quick workaround to avoid dupping code in both navigationbar
+        and this component.
+        */
+        this.props.onStop
+      }
+    />
   }
 }
 
 const styles = StyleSheet.create({
-  navigationButton: {
-    backgroundColor: globalStyles.color.buttonColor,
-    display: 'inline-block',
-    width: '100%',
-    height: '100%',
-    margin: 0,
-    padding: 0
-  },
-
-  navigationButton_stop: {
+  stopButton: {
     background: `url(${stopLoadingButtonIcon}) center no-repeat`,
     backgroundSize: '11px 11px'
   }
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index dc338536c47..8ef3bbcda3a 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -152,7 +152,7 @@ class NavigationBar extends React.Component {
         : null
       }
       {
-        this.props.showHomeButton
+        !this.props.titleMode && this.props.showHomeButton
         ? (
           <NavigationBarButtonContainer isStandalone onNavigationBarChrome>
             <HomeButton />
@@ -173,8 +173,14 @@ class NavigationBar extends React.Component {
       }
       <UrlBar titleMode={this.props.titleMode} />
       {
-        this.props.showPublisherToggle
-        ? <PublisherToggle />
+        !this.props.titleMode && this.props.showPublisherToggle
+        ? (
+          <NavigationBarButtonContainer isSquare isNested
+            containerFor={styles.navigationBar__urlBarEnd}
+          >
+            <PublisherToggle />
+          </NavigationBarButtonContainer>
+          )
         : null
       }
     </div>
@@ -213,10 +219,20 @@ const styles = StyleSheet.create({
   },
 
   // Applies for the first urlBar nested button
+  // currently for BookmarkButton
   navigationBar__urlBarStart: {
     borderRight: 'none',
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
+  },
+
+ // Applies for the end urlBar nested button
+ // currently for PublisherToggle
+ // TODO: remove animation of the toggle when titleMode is enabled
+  navigationBar__urlBarEnd: {
+    borderLeft: 'none',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
   }
 })
 
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
index ba2f70f4076..f3702504d9f 100644
--- a/app/renderer/components/navigation/navigator.js
+++ b/app/renderer/components/navigation/navigator.js
@@ -14,6 +14,7 @@ const windowActions = require('../../../../js/actions/windowActions')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const NavigationBar = require('./navigationBar')
+const NavigationBarButtonContainer = require('./buttons/navigationBarButtonContainer')
 const LongPressButton = require('../common/longPressButton')
 const MenuBar = require('./menuBar')
 const WindowCaptionButtons = require('./windowCaptionButtons')
@@ -46,7 +47,6 @@ const settings = require('../../../../js/constants/settings')
 // Styles
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
-const commonStyles = require('../styles/commonStyles')
 
 const backButton = require('../../../../img/toolbar/back_btn.svg')
 const forwardButton = require('../../../../img/toolbar/forward_btn.svg')
@@ -182,68 +182,70 @@ class Navigator extends React.Component {
 
   // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons__topLevelStartButtonContainer
   get backButton () {
-    return <span data-test-id={
-      !this.props.canGoBack
-        ? 'navigationBackButtonDisabled'
-        : 'navigationBackButton'
-      }
-      className={css(
-        commonStyles.navbarButtonContainer,
+    return <NavigationBarButtonContainer isStandalone
+      containerFor={[
         styles.topLevelStartButtonContainer,
         !this.props.canGoBack && styles.topLevelStartButtonContainer_disabled
-      )}
+      ]}
 
       // TODO (Suguru): Convert with Aphrodite
-      style={{
+      containerStyle={{
         transform: this.props.canGoBack ? `scale(${this.props.swipeLeftPercent})` : `scale(1)`,
         opacity: `${this.props.swipeLeftOpacity}`
-      }}>
-      <LongPressButton className={cx({
-        normalizeButton: true,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_backButton)]: true,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_disabled)]: !this.props.canGoBack,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_enabled)]: this.props.canGoBack
-      })}
+      }}
+
+      testId={!this.props.canGoBack
+        ? 'navigationBackButtonDisabled'
+        : 'navigationBackButton'
+      }>
+      <LongPressButton
+        navigationButton
+        custom={[
+          styles.topLevelStartButtonContainer__topLevelStartButton_backButton,
+          !this.props.canGoBack && styles.topLevelStartButtonContainer__topLevelStartButton_disabled,
+          this.props.canGoBack && styles.topLevelStartButtonContainer__topLevelStartButton_enabled
+        ]}
         l10nId='backButton'
         testId={!this.props.canGoBack ? 'backButtonDisabled' : 'backButton'}
         disabled={!this.props.canGoBack}
         onClick={this.onBack}
         onLongPress={this.onBackLongPress}
       />
-    </span>
+    </NavigationBarButtonContainer>
   }
 
   // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons__topLevelStartButtonContainer
   get forwardButton () {
-    return <span data-test-id={
-      !this.props.canGoForward
-        ? 'navigationForwardButtonDisabled'
-        : 'navigationForwardButton'
-      }
-      className={css(
-        commonStyles.navbarButtonContainer,
+    return <NavigationBarButtonContainer isStandalone
+      containerFor={[
         styles.topLevelStartButtonContainer,
         !this.props.canGoForward && styles.topLevelStartButtonContainer_disabled
-      )}
+      ]}
 
       // TODO (Suguru): Convert with Aphrodite
-      style={{
+      containerStyle={{
         transform: this.props.canGoForward ? `scale(${this.props.swipeRightPercent})` : `scale(1)`,
         opacity: `${this.props.swipeRightOpacity}`
-      }}>
-      <LongPressButton className={cx({
-        normalizeButton: true,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_forwardButton)]: true,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_disabled)]: !this.props.canGoForward,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_enabled)]: this.props.canGoForward
-      })}
+      }}
+
+      testId={!this.props.canGoForward
+        ? 'navigationForwardButtonDisabled'
+        : 'navigationForwardButton'
+      }>
+      <LongPressButton
+        navigationButton
+        custom={[
+          styles.topLevelStartButtonContainer__topLevelStartButton_forwardButton,
+          !this.props.canGoForward && styles.topLevelStartButtonContainer__topLevelStartButton_disabled,
+          this.props.canGoForward && styles.topLevelStartButtonContainer__topLevelStartButton_enabled
+        ]}
         l10nId='forwardButton'
         testId={!this.props.canGoForward ? 'forwardButtonDisabled' : 'forwardButton'}
         disabled={!this.props.canGoForward}
         onClick={this.onForward}
         onLongPress={this.onForwardLongPress}
       />
-    </span>
+    </NavigationBarButtonContainer>
   }
 
   // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons
@@ -486,7 +488,7 @@ const styles = StyleSheet.create({
 
   topLevelEndButtons: {
     display: 'flex',
-    flexDirection: 'row',
+    alignItems: 'center',
     position: 'relative'
   },
 
@@ -502,7 +504,8 @@ const styles = StyleSheet.create({
   topLevelEndButtons__buttonSeparator: {
     width: '1px',
     borderLeft: '1px solid #e2e2e2',
-    margin: '4px 3px 4px 3px'
+    margin: '0 3px',
+    height: globalStyles.navigationBar.urlbarForm.height
   },
 
   braveMenuButton: {
diff --git a/app/renderer/components/navigation/publisherToggle.js b/app/renderer/components/navigation/publisherToggle.js
index b215eb81040..c857fa9444f 100644
--- a/app/renderer/components/navigation/publisherToggle.js
+++ b/app/renderer/components/navigation/publisherToggle.js
@@ -4,7 +4,7 @@
 
 const React = require('react')
 const Immutable = require('immutable')
-const {StyleSheet, css} = require('aphrodite/no-important')
+const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
@@ -21,9 +21,6 @@ const {getHostPattern} = require('../../../../js/lib/urlutil')
 const {getBaseUrl} = require('../../../../js/lib/appUrlUtil')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
-// Style
-const commonStyles = require('../styles/commonStyles')
-
 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')
 const noFundUnverifiedPublisherImage = require('../../../extensions/brave/img/urlbar/browser_URL_fund_no.svg')
@@ -69,61 +66,43 @@ class PublisherToggle extends React.Component {
   }
 
   render () {
-    return <span className={css(
-      commonStyles.rectangleContainer,
-      commonStyles.rectangleContainer_outsideOfurlbarForm,
-      styles.publisherButtonContainer
-    )}>
-      <NormalizedButton custom={[
-        (!this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundVerified,
-        (this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundVerified,
-        (!this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundUnverified,
-        (this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundUnverified,
-        styles.publisherButtonContainer__button
-      ]}
-        l10nId={this.l10nString}
-        testId='publisherButton'
-        testAuthorized={this.props.isEnabledForPaymentsPublisher}
-        testVerified={this.props.isVerifiedPublisher}
-        onClick={this.onAuthorizePublisher}
-      />
-    </span>
+    return <NormalizedButton custom={[
+      (!this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherToggle_noFundVerified,
+      (this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherToggle_fundVerified,
+      (!this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherToggle_noFundUnverified,
+      (this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherToggle_fundUnverified,
+      styles.publisherToggle
+    ]}
+      l10nId={this.l10nString}
+      testId='publisherToggle'
+      testAuthorized={this.props.isEnabledForPaymentsPublisher}
+      testVerified={this.props.isVerifiedPublisher}
+      onClick={this.onAuthorizePublisher}
+    />
   }
 }
 
 const styles = StyleSheet.create({
-
-  // cf: navigationBar__buttonContainer_bookmarkButtonContainer on navigationBar.js
-  publisherButtonContainer: {
-    borderLeft: 'none',
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-
-    // TODO (Suguru): Refactor navigationBar.less to remove !important.
-    // See the wildcard style under '#navigationBar'.
-    animation: 'none !important'
-  },
-
-  publisherButtonContainer__button: {
+  publisherToggle: {
     backgroundSize: '18px 18px',
     width: '100%',
     height: '100%'
   },
 
-  publisherButtonContainer__button_noFundVerified: {
+  publisherToggle_noFundVerified: {
     // 1px added due to the check mark
     background: `url(${noFundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
 
-  publisherButtonContainer__button_fundVerified: {
+  publisherToggle_fundVerified: {
     background: `url(${fundVerifiedPublisherImage}) calc(50% + 1px) no-repeat`
   },
 
-  publisherButtonContainer__button_noFundUnverified: {
+  publisherToggle_noFundUnverified: {
     background: `url(${noFundUnverifiedPublisherImage}) 50% no-repeat`
   },
 
-  publisherButtonContainer__button_fundUnverified: {
+  publisherToggle_fundUnverified: {
     background: `url(${fundUnverifiedPublisherImage}) 50% no-repeat`
   }
 })
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index fbdd1fb9bf0..7a9d7ed4dbf 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.js
@@ -11,6 +11,7 @@ const ipc = require('electron').ipcRenderer
 const ReduxComponent = require('../reduxComponent')
 const UrlBarSuggestions = require('./urlBarSuggestions')
 const UrlBarIcon = require('./urlBarIcon')
+const NavigationBarButtonContainer = require('./buttons/navigationBarButtonContainer')
 
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
@@ -44,7 +45,6 @@ const {isWindows} = require('../../../common/lib/platformUtil')
 const iconNoScript = require('../../../../img/url-bar-no-script.svg')
 
 const globalStyles = require('../styles/global')
-const commonStyles = require('../styles/commonStyles')
 
 class UrlBar extends React.Component {
   constructor (props) {
@@ -394,40 +394,33 @@ 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}
-    />
+  get URLBarIcon () {
+    return <NavigationBarButtonContainer isSquare>
+      <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}
+      />
+    </NavigationBarButtonContainer>
   }
 
   // BEM Level: urlbarForm__titleBar
   get titleBar () {
-    return <div id='titleBar' className={css(styles.titleBar)}>
+    return <div id='titleBar' data-test-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'
@@ -452,23 +445,15 @@ class UrlBar extends React.Component {
     />
   }
 
-  // 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.rectangleContainer)}
-      onClick={this.onNoScript}>
+    return <NavigationBarButtonContainer isSquare>
       <span className={css(styles.noScript__button)}
+        onClick={this.onNoScript}
         data-l10n-id='noScriptButton'
-        data-test-id='noScriptButton' />
-    </span>
+        data-test-id='noScriptButton'
+      />
+    </NavigationBarButtonContainer>
   }
 
   onNoScript () {
@@ -565,26 +550,33 @@ 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.props.showNoScriptInfo && styles.urlbarForm_noScriptDisabled, this.props.publisherButtonVisible && styles.urlbarForm_isPublisherButtonEnabled)]: true
+        // currently publisherButtonVisible is the only element under urlbarForm_urlBarEnd
+        [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_urlBarEnd)]: true
       })}
       action='#'
       id='urlbar'>
-      <div className={css(commonStyles.rectangleContainer)}>
-        <UrlBarIcon titleMode={this.props.titleMode} />
-      </div>
+      {this.URLBarIcon}
       {
-        this.props.titleMode
-        ? this.titleBar
-        : this.input
+        !this.props.titleMode
+        ? this.input
+        : this.titleBar
       }
       {
-        this.props.titleMode
-        ? null
-        : this.legend
+        !this.props.titleMode
+        ? <legend className={css(
+          styles.urlbarForm__legend,
+          !!this.props.isFocused && styles.urlbarForm__legend_isFocused,
+          this.props.publisherButtonVisible && styles.urlbarForm__legend_urlBarEnd
+        )} />
+        : null
       }
       {
         this.props.showDisplayTime
-        ? this.loadTimer
+        ? <span className={css(
+          styles.urlbarForm__loadTime,
+          this.props.isActive && styles.urlbarForm__loadTime_onFocus
+        )}
+          data-test-id='loadTime'>{this.loadTime}</span>
         : null
       }
       {
@@ -646,12 +638,50 @@ const styles = StyleSheet.create({
     paddingRight: '10px'
   },
 
-  // ref: navigationBar__buttonContainer_addPublisherButtonContainer on publisherToggle.js
-  urlbarForm_isPublisherButtonEnabled: {
+  // ref: navigationBar__urlBarEnd on navigationBarButtonContainer.js
+  urlbarForm_urlBarEnd: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
   },
 
+  urlbarForm__legend: {
+    ':before': {
+      display: 'none',
+      content: '" "',
+      position: 'absolute',
+      borderRadius: '0 4px 4px 0',
+      color: '#333',
+      boxShadow: `inset 0 0 0 1px ${globalStyles.color.urlBarOutline}, inset 0 0 0 3px ${globalStyles.color.focusUrlbarOutline}`,
+      outline: 'none',
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0,
+      zIndex: globalStyles.zindex.zindexNavigationBar
+    }
+  },
+
+  urlbarForm__legend_isFocused: {
+    ':before': {
+      display: 'block'
+    }
+  },
+
+  urlbarForm__legend_urlBarEnd: {
+    ':before': {
+      borderRadius: 0
+    }
+  },
+
+  urlbarForm__loadTime: {
+    color: globalStyles.color.loadTimeColor,
+    fontSize: '12px'
+  },
+
+  urlbarForm__loadTime_onFocus: {
+    display: 'none'
+  },
+
   titleBar: {
     display: 'inline-block',
     color: globalStyles.color.chromeText,
@@ -695,44 +725,6 @@ const styles = StyleSheet.create({
     width: '100%'
   },
 
-  legend: {
-    ':before': {
-      display: 'none',
-      content: '" "',
-      position: 'absolute',
-      borderRadius: '0 4px 4px 0',
-      color: '#333',
-      boxShadow: `inset 0 0 0 1px ${globalStyles.color.urlBarOutline}, inset 0 0 0 3px ${globalStyles.color.focusUrlbarOutline}`,
-      outline: 'none',
-      top: 0,
-      bottom: 0,
-      right: 0,
-      left: 0,
-      zIndex: globalStyles.zindex.zindexNavigationBar
-    }
-  },
-
-  legend_isFocused: {
-    ':before': {
-      display: 'block'
-    }
-  },
-
-  legend_isPublisherButtonEnabled: {
-    ':before': {
-      borderRadius: 0
-    }
-  },
-
-  loadTime: {
-    color: globalStyles.color.loadTimeColor,
-    fontSize: '12px'
-  },
-
-  loadTime_onFocus: {
-    display: 'none'
-  },
-
   noScript__button: {
     background: `url(${iconNoScript}) center no-repeat`,
     width: '15px',
diff --git a/app/renderer/components/navigation/urlBarIcon.js b/app/renderer/components/navigation/urlBarIcon.js
index 6e2cae98d3a..d28fd9480e5 100644
--- a/app/renderer/components/navigation/urlBarIcon.js
+++ b/app/renderer/components/navigation/urlBarIcon.js
@@ -58,7 +58,7 @@ class UrlBarIcon extends React.Component {
 
   get iconCssClasses () {
     if (isPotentialPhishingUrl(this.props.location)) {
-      return [globalStyles.appIcons.exclamationTriangle, css(styles.urlbarIcon_large, styles.urlbarIcon_siteInsecureColor)]
+      return [globalStyles.appIcons.exclamationTriangle, css(styles.urlBarIcon_large, styles.urlBarIcon_siteInsecureColor)]
     } else if (this.isSearch) {
       return [globalStyles.appIcons.search]
     } else if (this.isAboutPage && !this.props.titleMode) {
@@ -66,11 +66,11 @@ class UrlBarIcon extends React.Component {
     } else if (this.props.isHTTPPage && !this.props.active) {
       // NOTE: EV style not approved yet; see discussion at https://github.com/brave/browser-laptop/issues/791
       if (this.props.isSecure === true) {
-        return [globalStyles.appIcons.lock, css(styles.urlbarIcon_large)]
+        return [globalStyles.appIcons.lock, css(styles.urlBarIcon_large)]
       } else if (this.props.isSecure === false || this.props.isSecure === 2) {
-        return [globalStyles.appIcons.unlock, css(styles.urlbarIcon_large, styles.urlbarIcon_siteInsecureColor, styles.urlbarIcon_insecure)]
+        return [globalStyles.appIcons.unlock, css(styles.urlBarIcon_large, styles.urlBarIcon_siteInsecureColor, styles.urlBarIcon_insecure)]
       } else if (this.props.isSecure === 1) {
-        return [globalStyles.appIcons.unlock, css(styles.urlbarIcon_large, styles.urlbarIcon_insecure)]
+        return [globalStyles.appIcons.unlock, css(styles.urlBarIcon_large, styles.urlBarIcon_insecure)]
       }
     }
     return []
@@ -82,11 +82,11 @@ class UrlBarIcon extends React.Component {
     }
 
     // Move fa-list (not fa-search) icon on about pages 1px down
-    // ref: urlbarIcon_relative
+    // ref: urlBarIcon_relative
     const relativeIcon = this.isAboutPage && !this.isSearch
 
     const iconClasses = {
-      [css(styles.urlbarIcon, this.props.titleMode && styles.urlbarIcon_titleMode, this.isSearch && styles.urlbarIcon_isSearch, relativeIcon && styles.urlbarIcon_relative)]: true
+      [css(styles.urlBarIcon, this.props.titleMode && styles.urlBarIcon_titleMode, this.isSearch && styles.urlBarIcon_isSearch, relativeIcon && styles.urlBarIcon_relative)]: true
     }
 
     this.iconCssClasses.forEach((iconClass) => {
@@ -165,7 +165,7 @@ class UrlBarIcon extends React.Component {
     }
 
     return <span
-      data-test-id='urlbarIcon'
+      data-test-id='urlBarIcon'
       {...props}
       className={this.iconClasses}
       style={this.iconStyles} />
@@ -175,7 +175,7 @@ class UrlBarIcon extends React.Component {
 const styles = StyleSheet.create({
 
   // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L893-L896
-  urlbarIcon: {
+  urlBarIcon: {
     color: globalStyles.color.siteSecureColor,
     fontSize: '12px',
     backgroundRepeat: 'no-repeat',
@@ -187,7 +187,7 @@ const styles = StyleSheet.create({
   },
 
   // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L801-L805
-  urlbarIcon_titleMode: {
+  urlBarIcon_titleMode: {
     display: 'inline-block',
     opacity: 0.5,
     minWidth: 0
@@ -195,33 +195,33 @@ const styles = StyleSheet.create({
 
   // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L809
   // Unlock icon has this value if the title mode is enabled or not.
-  urlbarIcon_insecure: {
+  urlBarIcon_insecure: {
     opacity: 1
   },
 
   // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L900-L906
   // about:newtab
-  urlbarIcon_isSearch: {
+  urlBarIcon_isSearch: {
 
     // 50% of #5a5a5a
     color: 'rgba(90, 90, 90, .5)'
   },
 
   // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L908-L913
-  urlbarIcon_large: {
+  urlBarIcon_large: {
 
     // Refactor iconClasses to remove !important
     fontSize: '16px !important'
   },
 
   // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L897-L898
-  urlbarIcon_relative: {
+  urlBarIcon_relative: {
     position: 'relative',
     bottom: '-1px'
   },
 
   // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L915-L917
-  urlbarIcon_siteInsecureColor: {
+  urlBarIcon_siteInsecureColor: {
     color: globalStyles.color.siteInsecureColor
   }
 })
diff --git a/test/app/renderer/components/messageBoxTest.js b/test/app/renderer/components/messageBoxTest.js
index 8f150b120b8..d5ff8c69d6c 100644
--- a/test/app/renderer/components/messageBoxTest.js
+++ b/test/app/renderer/components/messageBoxTest.js
@@ -2,7 +2,7 @@
 
 const Brave = require('../../../lib/brave')
 const {
-  urlInput, backButton, forwardButton,
+  urlInput, backButton, forwardButton, forwardButtonDisabled,
   msgBoxSuppress, msgBoxSuppressTrue, msgBoxMessage, msgBoxTitle
 } = require('../../../lib/selectors')
 const assert = require('assert')
@@ -220,7 +220,7 @@ describe('MessageBox component tests', function () {
         yield this.app.client
           .windowByUrl(Brave.browserWindowUrl)
           .leftClick(backButton)
-          .waitForElementCount(forwardButton + '[disabled]', 0)
+          .waitForElementCount(forwardButtonDisabled, 0)
 
         // click forward button
         yield this.app.client
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 7f798c945fd..bb0e56b6319 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -16,9 +16,9 @@ module.exports = {
   tabPage1: '[data-tab-page="0"]',
   tabPage2: '[data-tab-page="1"]',
   closeTab: '[data-test-id="closeTabIcon"]',
-  urlbarIcon: '[data-test-id="urlbarIcon"]',
+  urlBarIcon: '[data-test-id="urlBarIcon"]',
   urlBarSuggestions: '.urlBarSuggestions',
-  titleBar: '#titleBar',
+  titleBar: '[data-test-id="titleBar"]',
   navigatorBookmarked: '[data-test-id="bookmarked"]',
   navigatorNotBookmarked: '[data-test-id="notBookmarked"]',
   bookmarksToolbar: '[data-test-id="bookmarksToolbar"]',
@@ -62,8 +62,10 @@ module.exports = {
   noScriptAllowTempButton: '[data-l10n-id="allowScriptsTemp"]',
   noScriptAllowOnceButton: '[data-l10n-id="allowScriptsOnce"]',
   noScriptAllowButton: '[data-l10n-id="allowScripts"]',
-  backButton: '.topLevelStartButtons .backButton',
-  forwardButton: '.topLevelStartButtons .forwardButton',
+  backButton: '[data-test-id="backButton"]',
+  backButtonDisabled: '[data-test-id="backButtonDisabled"]',
+  forwardButton: '[data-test-id="forwardButton"]',
+  forwardButtonDisabled: '[data-test-id="forwardButtonDisabled"]',
   reloadButton: '[data-test-id="reloadButton"]',
   homeButton: '[data-test-id="homeButton"]',
   clearBrowsingDataButton: '[data-test-id="clearBrowsingDataButton"]',
diff --git a/test/navbar-components/navigationBarTest.js b/test/navbar-components/navigationBarTest.js
index 2df9d6c497b..1acaf4af13e 100644
--- a/test/navbar-components/navigationBarTest.js
+++ b/test/navbar-components/navigationBarTest.js
@@ -3,7 +3,7 @@
 const Brave = require('../lib/brave')
 const config = require('../../js/constants/config')
 const {urlInput, activeWebview, activeTabFavicon, activeTab, navigatorLoadTime,
-  titleBar, urlbarIcon, bookmarksToolbar, navigatorNotBookmarked, navigatorBookmarked,
+  titleBar, urlBarIcon, bookmarksToolbar, navigatorNotBookmarked, navigatorBookmarked,
   doneButton, allowRunInsecureContentButton, dismissAllowRunInsecureContentButton,
   denyRunInsecureContentButton, dismissDenyRunInsecureContentButton, activeTabTitle,
   homeButton} = require('../lib/selectors')
@@ -377,12 +377,12 @@ describe('navigationBar tests', function () {
         .waitUntil(() =>
           this.app.client
             .activateURLMode()
-            .waitForExist(urlbarIcon)
-            .getAttribute(urlbarIcon, 'class').then((classes) =>
+            .waitForExist(urlBarIcon)
+            .getAttribute(urlBarIcon, 'class').then((classes) =>
               classes.includes('fa-unlock') && classes.includes('insecure-color')
         ))
         .windowByUrl(Brave.browserWindowUrl)
-        .click(urlbarIcon)
+        .click(urlBarIcon)
         .waitForVisible('[data-test-id="insecureConnection"]')
         .keys(Brave.keys.ESCAPE)
     })
@@ -396,8 +396,8 @@ describe('navigationBar tests', function () {
         .waitUntil(() =>
           this.app.client
             .activateURLMode()
-            .waitForExist(urlbarIcon)
-            .getAttribute(urlbarIcon, 'class').then((classes) =>
+            .waitForExist(urlBarIcon)
+            .getAttribute(urlBarIcon, 'class').then((classes) =>
               classes.includes('fa-exclamation-triangle') && classes.includes('insecure-color')
         ))
         .windowByUrl(Brave.browserWindowUrl)
@@ -415,8 +415,8 @@ describe('navigationBar tests', function () {
         .activateTitleMode()
         .click(activeWebview)
         .waitForExist(titleBar)
-        .waitForVisible(urlbarIcon, 1)
-        .getAttribute(urlbarIcon, 'class').then((classes) =>
+        .waitForVisible(urlBarIcon, 1)
+        .getAttribute(urlBarIcon, 'class').then((classes) =>
           classes.includes('fa-unlock') && classes.includes('insecure-color')
         )
     })
@@ -425,13 +425,13 @@ describe('navigationBar tests', function () {
       yield this.app.client.tabByUrl(Brave.newTabUrl).url(page1Url).waitForUrl(page1Url).windowParentByUrl(page1Url)
       yield this.app.client
         .activateURLMode()
-        .waitForExist(urlbarIcon)
+        .waitForExist(urlBarIcon)
         .waitUntil(() =>
-          this.app.client.getAttribute(urlbarIcon, 'class').then((classes) =>
+          this.app.client.getAttribute(urlBarIcon, 'class').then((classes) =>
             classes.includes('fa-lock')
           ))
         .windowByUrl(Brave.browserWindowUrl)
-        .click(urlbarIcon)
+        .click(urlBarIcon)
         .waitForVisible('[data-test-id="secureConnection"]')
         .keys(Brave.keys.ESCAPE)
     })
@@ -446,8 +446,8 @@ describe('navigationBar tests', function () {
         .activateTitleMode()
         .click(activeWebview)
         .waitForExist(titleBar)
-        .waitForVisible(urlbarIcon, 1)
-        .getAttribute(urlbarIcon, 'class').then((classes) =>
+        .waitForVisible(urlBarIcon, 1)
+        .getAttribute(urlBarIcon, 'class').then((classes) =>
           classes.includes('fa-lock')
         )
     })
@@ -456,8 +456,8 @@ describe('navigationBar tests', function () {
       yield this.app.client.tabByUrl(Brave.newTabUrl).url(page1Url).waitForUrl(page1Url).windowParentByUrl(page1Url)
       yield this.app.client
         .activateURLMode()
-        .waitForExist(urlbarIcon)
-        .getAttribute(urlbarIcon, 'class').then((classes) =>
+        .waitForExist(urlBarIcon)
+        .getAttribute(urlBarIcon, 'class').then((classes) =>
           assert(!classes.includes('fa-lock'))
         )
     })
@@ -466,13 +466,13 @@ describe('navigationBar tests', function () {
       yield this.app.client.tabByUrl(Brave.newTabUrl).url(page1Url).waitForUrl(page1Url).windowParentByUrl(page1Url)
       yield this.app.client
         .activateURLMode()
-        .waitForExist(urlbarIcon)
+        .waitForExist(urlBarIcon)
         .waitUntil(() =>
-          this.app.client.getAttribute(urlbarIcon, 'class').then((classes) =>
+          this.app.client.getAttribute(urlBarIcon, 'class').then((classes) =>
             classes.includes('fa-unlock') && !classes.includes('insecure-color')
           )
         )
-        .click(urlbarIcon)
+        .click(urlBarIcon)
         .waitForVisible('[data-test-id="partiallySecureConnection"]')
     })
     it('shows insecure icon on a site with a sha-1 cert', function * () {
@@ -480,9 +480,9 @@ describe('navigationBar tests', function () {
       yield this.app.client.tabByUrl(Brave.newTabUrl).url(page1Url).waitForUrl(page1Url).windowParentByUrl(page1Url)
       yield this.app.client
         .activateURLMode()
-        .waitForExist(urlbarIcon)
+        .waitForExist(urlBarIcon)
         .waitUntil(() =>
-          this.app.client.getAttribute(urlbarIcon, 'class').then((classes) =>
+          this.app.client.getAttribute(urlBarIcon, 'class').then((classes) =>
             classes.includes('fa-unlock') && classes.includes('insecure-color')
           )
         )
@@ -500,9 +500,9 @@ describe('navigationBar tests', function () {
       yield this.app.client
         .activateURLMode()
         .waitForInputText(urlInput, page1Url)
-        .waitForExist(urlbarIcon)
+        .waitForExist(urlBarIcon)
         .waitUntil(() =>
-          this.app.client.getAttribute(urlbarIcon, 'class').then((classes) =>
+          this.app.client.getAttribute(urlBarIcon, 'class').then((classes) =>
             classes.includes('fa-unlock') && classes.includes('insecure-color')
           )
         )
@@ -520,9 +520,9 @@ describe('navigationBar tests', function () {
       yield this.app.client
         .activateURLMode()
         .waitForInputText(urlInput, page1Url)
-        .waitForExist(urlbarIcon)
+        .waitForExist(urlBarIcon)
         .waitUntil(() =>
-          this.app.client.getAttribute(urlbarIcon, 'class').then((classes) =>
+          this.app.client.getAttribute(urlBarIcon, 'class').then((classes) =>
             classes.includes('fa-lock')
           )
         )
@@ -538,8 +538,8 @@ describe('navigationBar tests', function () {
           )
         })
         .windowByUrl(Brave.browserWindowUrl)
-        .waitForExist(urlbarIcon + '.fa-lock')
-        .click(urlbarIcon)
+        .waitForExist(urlBarIcon + '.fa-lock')
+        .click(urlBarIcon)
         .waitForVisible('[data-test-id="runInsecureContentWarning"]')
         .waitForVisible(dismissAllowRunInsecureContentButton)
         .waitForVisible(allowRunInsecureContentButton)
@@ -553,8 +553,8 @@ describe('navigationBar tests', function () {
           )
         })
         .windowByUrl(Brave.browserWindowUrl)
-        .click(urlbarIcon)
-        .waitForExist(urlbarIcon + '.fa-lock')
+        .click(urlBarIcon)
+        .waitForExist(urlBarIcon + '.fa-lock')
     })
     it('Temporarily allow/deny running insecure content', function * () {
       const page1Url = 'https://mixed-script.badssl.com/'
@@ -567,8 +567,8 @@ describe('navigationBar tests', function () {
           )
         })
         .windowByUrl(Brave.browserWindowUrl)
-        .waitForExist(urlbarIcon + '.fa-lock')
-        .click(urlbarIcon)
+        .waitForExist(urlBarIcon + '.fa-lock')
+        .click(urlBarIcon)
         .waitForVisible('[data-test-id="secureConnection"]')
         .waitForVisible('[data-test-id="runInsecureContentWarning"]')
         .waitForVisible(dismissAllowRunInsecureContentButton)
@@ -581,8 +581,8 @@ describe('navigationBar tests', function () {
           )
         })
         .windowByUrl(Brave.browserWindowUrl)
-        .waitForExist(urlbarIcon)
-        .click(urlbarIcon)
+        .waitForExist(urlBarIcon)
+        .click(urlBarIcon)
         .waitForVisible('[data-test-id="insecureConnection"]')
         .waitForVisible('[data-test-id="denyRunInsecureContentWarning"]')
         .waitForVisible(dismissDenyRunInsecureContentButton)
@@ -595,8 +595,8 @@ describe('navigationBar tests', function () {
           )
         })
         .windowByUrl(Brave.browserWindowUrl)
-        .click(urlbarIcon)
-        .waitForExist(urlbarIcon + '.fa-lock')
+        .click(urlBarIcon)
+        .waitForExist(urlBarIcon + '.fa-lock')
     })
     it('Limit effect of running insecure content in frame', function * () {
       const page1Url = 'https://mixed-script.badssl.com/'
@@ -609,8 +609,8 @@ describe('navigationBar tests', function () {
           )
         })
         .windowByUrl(Brave.browserWindowUrl)
-        .waitForExist(urlbarIcon + '.fa-lock')
-        .click(urlbarIcon)
+        .waitForExist(urlBarIcon + '.fa-lock')
+        .click(urlBarIcon)
         .waitForVisible('[data-test-id="secureConnection"]')
         .waitForVisible('[data-test-id="runInsecureContentWarning"]')
         .waitForVisible(dismissAllowRunInsecureContentButton)
@@ -683,8 +683,8 @@ describe('navigationBar tests', function () {
           )
         })
         .windowByUrl(Brave.browserWindowUrl)
-        .waitForExist(urlbarIcon + '.fa-lock')
-        .click(urlbarIcon)
+        .waitForExist(urlBarIcon + '.fa-lock')
+        .click(urlBarIcon)
         .waitForVisible('[data-test-id="secureConnection"]')
         .waitForVisible('[data-test-id="runInsecureContentWarning"]')
         .waitForVisible(dismissAllowRunInsecureContentButton)
@@ -923,15 +923,15 @@ describe('navigationBar tests', function () {
         // test that url is shown with proper icon
         // before getting cleared
         yield this.app.client
-          .waitForExist(urlbarIcon)
-          .getAttribute(urlbarIcon, 'class').then(classes => classes.includes('fa-unlock'))
+          .waitForExist(urlBarIcon)
+          .getAttribute(urlBarIcon, 'class').then(classes => classes.includes('fa-unlock'))
 
         // ensure that once cleaned, search icon
         // is shown instead of protocol icon
         yield this.app.client
           .setValue(urlInput, '')
-          .waitForExist(urlbarIcon)
-          .getAttribute(urlbarIcon, 'class').then(classes => classes.includes('fa-search'))
+          .waitForExist(urlBarIcon)
+          .getAttribute(urlBarIcon, 'class').then(classes => classes.includes('fa-search'))
       })
     })
 
@@ -993,7 +993,7 @@ describe('navigationBar tests', function () {
         yield this.app.client
           .tabByUrl(this.newTabUrl)
           .windowByUrl(Brave.browserWindowUrl)
-          .waitForExist('.urlbarIcon.fa-search')
+          .waitForExist('[data-test-id="urlBarIcon"].fa-search')
       })
       it('shows the list icon in URL bar for other about pages', function * () {
         yield this.app.client
@@ -1003,7 +1003,7 @@ describe('navigationBar tests', function () {
           .tabByUrl('about:about')
           .windowByUrl(Brave.browserWindowUrl)
           .waitForInputText(urlInput, 'about:about')
-          .waitForExist('.urlbarIcon.fa-list')
+          .waitForExist('[data-test-id="urlBarIcon"].fa-list')
       })
     })
 
diff --git a/test/navbar-components/urlBarTest.js b/test/navbar-components/urlBarTest.js
index e4d470639f2..0b96a37e9f0 100644
--- a/test/navbar-components/urlBarTest.js
+++ b/test/navbar-components/urlBarTest.js
@@ -2,7 +2,7 @@
 
 const assert = require('assert')
 const Brave = require('../lib/brave')
-const {urlInput, urlBarSuggestions, urlbarIcon, reloadButton} = require('../lib/selectors')
+const {urlInput, urlBarSuggestions, urlBarIcon, reloadButton} = require('../lib/selectors')
 const searchProviders = require('../../js/data/searchProviders')
 const config = require('../../js/constants/config')
 
@@ -431,7 +431,7 @@ describe('urlBar tests', function () {
       })
 
       it('has the search icon', function * () {
-        yield this.app.client.waitForExist('.urlbarIcon.fa-search')
+        yield this.app.client.waitForExist('[data-test-id="urlBarIcon"].fa-search')
       })
     })
 
@@ -560,13 +560,13 @@ describe('urlBar tests', function () {
         it('has the icon', function * () {
           yield this.app.client
             .keys(entry.shortcut + ' ')
-            .waitForExist(urlbarIcon)
+            .waitForExist(urlBarIcon)
             .waitUntil(function () {
               return this
-                .getCssProperty(urlbarIcon, 'background-image')
+                .getCssProperty(urlBarIcon, 'background-image')
                 .then((backgroundImage) => backgroundImage.value === `url("${entry.image}")`)
             })
-            .waitForElementCount('.urlbarIcon.fa-search', 0)
+            .waitForElementCount('[data-test-id="urlBarIcon"].fa-search', 0)
         })
       })
     })
@@ -591,7 +591,7 @@ describe('urlBar tests', function () {
         .keys(`${entry.shortcut} hi`)
         .waitUntil(function () {
           return this
-            .getCssProperty(urlbarIcon, 'background-image')
+            .getCssProperty(urlBarIcon, 'background-image')
             .then((backgroundImage) => backgroundImage.value === `url("${entry.image}")`)
         })
     })
@@ -599,19 +599,19 @@ describe('urlBar tests', function () {
     it('clears last search engine when removed', function * () {
       yield this.app.client
         .setInputText(urlInput, '.')
-        .waitForElementCount(urlbarIcon + '.fa-search', 1)
+        .waitForElementCount(urlBarIcon + '.fa-search', 1)
     })
     it('clears last search engine when searching', function * () {
       yield this.app.client
         .keys(Brave.keys.ENTER)
-        .waitForElementCount(urlbarIcon + '.fa-lock', 1)
+        .waitForElementCount(urlBarIcon + '.fa-lock', 1)
     })
     it('clears last search engine when loading arbitrary page', function * () {
       yield this.app.client
         .tabByIndex(0)
         .loadUrl(Brave.server.url('page1.html'))
         .windowByUrl(Brave.browserWindowUrl)
-        .waitForElementCount(urlbarIcon + '.fa-unlock', 1)
+        .waitForElementCount(urlBarIcon + '.fa-unlock', 1)
     })
   })
 
diff --git a/test/tab-components/frameTest.js b/test/tab-components/frameTest.js
index e5cdaed8c63..53e1a094598 100644
--- a/test/tab-components/frameTest.js
+++ b/test/tab-components/frameTest.js
@@ -1,7 +1,7 @@
 /* global describe, it, before */
 
 const Brave = require('../lib/brave')
-const {urlInput, backButton, forwardButton, pinnedTabsTabs} = require('../lib/selectors')
+const {urlInput, backButton, backButtonDisabled, forwardButton, forwardButtonDisabled, pinnedTabsTabs} = require('../lib/selectors')
 const messages = require('../../js/constants/messages')
 
 describe('frame tests', function () {
@@ -106,8 +106,8 @@ describe('frame tests', function () {
           .tabByIndex(1)
           .waitForUrl(this.url2)
           .windowByUrl(Brave.browserWindowUrl)
-          .waitForExist(backButton + ':not([disabled])')
-          .waitForExist(forwardButton + '[disabled]')
+          .waitForExist(backButton)
+          .waitForExist(forwardButtonDisabled)
           .click(backButton)
           .tabByIndex(1)
           .waitForUrl(this.url1)
@@ -121,7 +121,7 @@ describe('frame tests', function () {
         this.url1 = Brave.server.url('page1.html')
         yield setup(this.app.client)
         yield this.app.client
-          .waitForExist('.navigationButtonContainer.disabled .backButton')
+          .waitForExist(backButtonDisabled)
           .tabByIndex(0)
           // add some history
           .loadUrl(this.url1)
@@ -130,13 +130,13 @@ describe('frame tests', function () {
 
       it('enables back button on first nav', function * () {
         yield this.app.client
-          .waitForExist('.navigationButtonContainer:not(.disabled) .backButton')
+          .waitForExist(backButton)
       })
 
       it('enables forward button after pressing back', function * () {
         yield this.app.client
           .click(backButton)
-          .waitForExist('.navigationButtonContainer:not(.disabled) .forwardButton')
+          .waitForExist(forwardButton)
       })
     })
 
@@ -165,14 +165,14 @@ describe('frame tests', function () {
           .tabByIndex(1)
           .waitForUrl(this.url1)
           .windowByUrl(Brave.browserWindowUrl)
-          .waitForExist(backButton + ':not([disabled])')
-          .waitForExist(forwardButton + ':not([disabled])')
+          .waitForExist(backButton)
+          .waitForExist(forwardButton)
           .click(forwardButton)
           .tabByIndex(1)
           .waitForUrl(this.url2)
           .windowByUrl(Brave.browserWindowUrl)
-          .waitForExist(backButton + ':not([disabled])')
-          .waitForExist(forwardButton + '[disabled]')
+          .waitForExist(backButton)
+          .waitForExist(forwardButtonDisabled)
       })
     })
   })
diff --git a/test/tab-components/tabTest.js b/test/tab-components/tabTest.js
index 4664f13aad6..a972d65703e 100644
--- a/test/tab-components/tabTest.js
+++ b/test/tab-components/tabTest.js
@@ -60,7 +60,7 @@ describe('tab tests', function () {
         .waitForUrl(this.page1)
         .windowByUrl(Brave.browserWindowUrl)
         .waitForTextValue(activeTabTitle, 'Page 1')
-        .waitForExist('.forwardButton')
+        .waitForExist(forwardButton)
         .rightClick(forwardButton)
         .waitForExist(contextMenu)
         .middleClick(`${contextMenu} [data-index="0"]`)
diff --git a/test/unit/app/renderer/components/navigation/navigationBarTest.js b/test/unit/app/renderer/components/navigation/navigationBarTest.js
index 54a9d525f9a..fa43d30bea5 100644
--- a/test/unit/app/renderer/components/navigation/navigationBarTest.js
+++ b/test/unit/app/renderer/components/navigation/navigationBarTest.js
@@ -98,6 +98,17 @@ describe('NavigationBar component', function () {
     mockery.registerMock('../../../extensions/brave/img/urlbar/browser_URL_fund_no.svg')
     mockery.registerMock('../../../extensions/brave/img/urlbar/browser_URL_fund_yes.svg')
     mockery.registerMock('../../../extensions/brave/img/caret_down_grey.svg')
+    mockery.registerMock('../../../../../img/toolbar/stoploading_btn.svg')
+    mockery.registerMock('../../../../../img/toolbar/reload_btn.svg')
+    mockery.registerMock('../../../../../img/toolbar/home_btn.svg')
+    mockery.registerMock('../../../../../img/toolbar/bookmark_btn.svg')
+    mockery.registerMock('../../../../../img/toolbar/bookmark_marked.svg')
+    mockery.registerMock('../../../../app/extensions/brave/img/braveBtn.png')
+    mockery.registerMock('../../../../app/extensions/brave/img/braveBtn2x.png')
+    mockery.registerMock('../../../../app/extensions/brave/img/braveBtn3x.png')
+    mockery.registerMock('../../../../app/extensions/brave/img/braveBtn_hover.png')
+    mockery.registerMock('../../../../app/extensions/brave/img/braveBtn2x_hover.png')
+    mockery.registerMock('../../../../app/extensions/brave/img/braveBtn3x_hover.png')
     mockery.registerMock('./urlBar', urlBarFake)
     windowStore = require('../../../../../../js/stores/windowStore')
     appStore = require('../../../../../../js/stores/appStoreRenderer')
diff --git a/test/unit/app/renderer/components/navigation/navigatorTest.js b/test/unit/app/renderer/components/navigation/navigatorTest.js
index 063dd2f36f9..c3516fe9140 100644
--- a/test/unit/app/renderer/components/navigation/navigatorTest.js
+++ b/test/unit/app/renderer/components/navigation/navigatorTest.js
@@ -72,6 +72,8 @@ describe('Navigator component unit tests', function () {
     mockery.registerMock('../../extensions/brave/img/tabs/new_session.svg')
     mockery.registerMock('../../../extensions/brave/img/caret_down_grey.svg')
     mockery.registerMock('../../../../img/url-bar-no-script.svg', {})
+    mockery.registerMock('../../../../img/toolbar/back_btn.svg', {})
+    mockery.registerMock('../../../../img/toolbar/forward_btn.svg', {})
     mockery.registerMock('electron', require('../../../../lib/fakeElectron'))
     mockery.registerMock('../../../common/state/windowState', fakeWindowState)
     mockery.registerMock('../../currentWindow', fakeCurrentWindow)
@@ -156,7 +158,7 @@ describe('Navigator component unit tests', function () {
     })
 
     it('disables the lion icon', function () {
-      const node = wrapper.find('[data-test-id="braveShieldButton"]').getDOMNode()
+      const node = wrapper.find('[data-test-id="braveMenu"]').getDOMNode()
       assert.equal(node.disabled, true)
     })
   })
@@ -169,7 +171,7 @@ describe('Navigator component unit tests', function () {
 
     it('lion icon is shown by default', function () {
       const wrapper = mount(<Navigator />)
-      const node = wrapper.find('[data-test-id="braveShieldButton"]').getDOMNode()
+      const node = wrapper.find('[data-test-id="braveMenu"]').getDOMNode()
       assert.equal(node.disabled, false)
     })
 
diff --git a/test/unit/app/renderer/components/navigation/publisherToggleTest.js b/test/unit/app/renderer/components/navigation/publisherToggleTest.js
index 23379ccc270..410a8de7f77 100644
--- a/test/unit/app/renderer/components/navigation/publisherToggleTest.js
+++ b/test/unit/app/renderer/components/navigation/publisherToggleTest.js
@@ -92,7 +92,7 @@ describe('PublisherToggle component', function () {
       appStore.state = fakeAppState.setIn(['locationInfo', 'https://brave.com', 'exclude'], true)
 
       const wrapper = mount(<PublisherToggle />)
-      assert.equal(wrapper.find('[data-test-id="publisherButton"]').length, 1)
+      assert.equal(wrapper.find('[data-test-id="publisherToggle"]').length, 1)
       assert.equal(wrapper.find('button').props()['data-test-authorized'], false)
     })
 
@@ -100,7 +100,7 @@ describe('PublisherToggle component', function () {
       windowStore.state = defaultWindowStore
       appStore.state = fakeAppState
       const wrapper = mount(<PublisherToggle />)
-      assert.equal(wrapper.find('[data-test-id="publisherButton"]').length, 1)
+      assert.equal(wrapper.find('[data-test-id="publisherToggle"]').length, 1)
       assert.equal(wrapper.find('button').props()['data-test-verified'], true)
     })
   })
@@ -111,7 +111,7 @@ describe('PublisherToggle component', function () {
       appStore.state = fakeAppState.setIn(['siteSettings', 'https?://brave.com', 'ledgerPayments'], true)
 
       const wrapper = mount(<PublisherToggle />)
-      assert.equal(wrapper.find('[data-test-id="publisherButton"]').length, 1)
+      assert.equal(wrapper.find('[data-test-id="publisherToggle"]').length, 1)
       assert.equal(wrapper.find('button').props()['data-test-authorized'], true)
     })