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

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

Test Plan: available on https://github.com/brave/browser-laptop/pull/9299#issue-234116287
---
 .../components/navigation/homeButton.js       |  31 ++-
 .../components/navigation/navigationBar.js    | 138 +++++++++---
 .../components/navigation/navigator.js        | 124 +++++++----
 .../components/navigation/publisherToggle.js  |  33 ++-
 app/renderer/components/navigation/urlBar.js  |  82 ++++++-
 .../components/styles/commonStyles.js         |  15 ++
 app/renderer/components/styles/global.js      |   9 +-
 less/navigationBar.less                       | 202 +-----------------
 test/lib/selectors.js                         |  10 +-
 9 files changed, 347 insertions(+), 297 deletions(-)

diff --git a/app/renderer/components/navigation/homeButton.js b/app/renderer/components/navigation/homeButton.js
index a0bbb9d9afa..5a34dc175ef 100644
--- a/app/renderer/components/navigation/homeButton.js
+++ b/app/renderer/components/navigation/homeButton.js
@@ -14,9 +14,15 @@ const appActions = require('../../../../js/actions/appActions')
 const settings = require('../../../../js/constants/settings')
 
 // Utils
+const cx = require('../../../../js/lib/classSet')
 const {getSetting} = require('../../../../js/settings')
 const eventUtil = require('../../../../js/lib/eventUtil')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
+const homeButton = require('../../../../img/toolbar/home_btn.svg')
+
 class HomeButton extends ImmutableComponent {
   constructor (props) {
     super(props)
@@ -51,10 +57,12 @@ class HomeButton extends ImmutableComponent {
 
   render () {
     return <span className='navigationButtonContainer'>
-      <button
+      <button className={cx({
+        normalizeButton: true,
+        [css(styles.navigator__navigationButtonContainer__navigationButton, styles.navigator__navigationButtonContainer__navigationButton_homeButton)]: true
+      })}
         data-test-id='homeButton'
         data-l10n-id='homeButton'
-        className='normalizeButton navigationButton homeButton'
         ref={(node) => { this.homeButton = node }}
         onClick={this.onHome}
       />
@@ -62,4 +70,23 @@ class HomeButton extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  navigator__navigationButtonContainer__navigationButton: {
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L550-L553
+    backgroundColor: globalStyles.color.buttonColor,
+    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
+  },
+
+  navigator__navigationButtonContainer__navigationButton_homeButton: {
+    background: `url(${homeButton}) center no-repeat`,
+    backgroundSize: `16px 16px`
+  }
+})
+
 module.exports = HomeButton
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index 8b478ca01e9..5413ce271b6 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -36,6 +36,13 @@ const {getSetting} = require('../../../../js/settings')
 const contextMenus = require('../../../../js/contextMenus')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+const commonStyles = require('../styles/commonStyles')
+
+const stopLoadingButton = require('../../../../img/toolbar/stoploading_btn.svg')
+const reloadButton = require('../../../../img/toolbar/reload_btn.svg')
+const bookmarkButton = require('../../../../img/toolbar/bookmark_btn.svg')
+const bookmarkedButton = require('../../../../img/toolbar/bookmark_marked.svg')
 
 class NavigationBar extends React.Component {
   constructor (props) {
@@ -141,7 +148,7 @@ class NavigationBar extends React.Component {
       data-frame-key={this.props.activeFrameKey}
       className={cx({
         titleMode: this.props.titleMode,
-        [css(styles.navigator_wide)]: this.props.isWideUrlBarEnabled
+        [css(styles.navigator, this.props.isWideUrlBarEnabled && styles.navigator_wide)]: true
       })}>
       {
         this.props.showBookmarkHanger
@@ -153,14 +160,22 @@ class NavigationBar extends React.Component {
         ? null
         : this.props.isLoading
           ? <span className='navigationButtonContainer'>
-            <button data-l10n-id='stopButton'
-              className='normalizeButton navigationButton stopButton'
-              onClick={this.onStop} />
+            <button className={cx({
+              normalizeButton: true,
+              [css(styles.navigator__navigationButtonContainer__navigationButton, styles.navigator__navigationButtonContainer__navigationButton_stopButton)]: true
+            })}
+              data-l10n-id='stopButton'
+              onClick={this.onStop}
+            />
           </span>
           : <span className='navigationButtonContainer'>
             <LongPressButton
               l10nId='reloadButton'
-              className='normalizeButton navigationButton reloadButton'
+              testId='reloadButton'
+              className={cx({
+                normalizeButton: true,
+                [css(styles.navigator__navigationButtonContainer__navigationButton, styles.navigator__navigationButtonContainer__navigationButton_reloadButton)]: true
+              })}
               onClick={this.onReload}
               onLongPress={this.onReloadLongPress} />
           </span>
@@ -170,27 +185,31 @@ class NavigationBar extends React.Component {
         ? <HomeButton activeTabId={this.props.activeTabId} />
         : null
       }
-      <div className='startButtons'>
-        {
-          !this.props.titleMode
-          ? <span className='bookmarkButtonContainer'>
-            <button data-l10n-id={this.props.isBookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-              className={cx({
-                navigationButton: true,
-                bookmarkButton: true,
-                removeBookmarkButton: this.props.isBookmarked,
-                withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-                normalizeButton: true
-              })}
-              onClick={this.onToggleBookmark} />
-          </span>
-          : null
-        }
-      </div>
+      {
+        !this.props.titleMode
+        ? <span className={cx({
+          bookmarkButtonContainer: true,
+          [css(commonStyles.navigator__buttonContainer, 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>
+        : null
+      }
       <UrlBar titleMode={this.props.titleMode} />
       {
         this.props.showPublisherToggle
-        ? <div className='endButtons'>
+        ? <div className={css(
+          this.props.titleMode && styles.navigator__endButtons_titleMode,
+          !this.props.titleMode && styles.navigator__endButtons_notTitleMode
+        )}>
           <PublisherToggle />
         </div>
         : null
@@ -199,13 +218,78 @@ class NavigationBar extends React.Component {
   }
 }
 
+const rightMargin = `calc(${globalStyles.spacing.navbarLeftMarginDarwin} / 2)`
+
 const styles = StyleSheet.create({
+
+  navigator: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '20px',
+    minWidth: '0%', // allow the navigator to shrink
+    maxWidth: '900px',
+    marginRight: rightMargin,
+    padding: 0,
+    position: 'relative',
+    userSelect: 'none',
+    zIndex: globalStyles.zindex.zindexNavigationBar
+  },
+
   navigator_wide: {
+    maxWidth: '100%',
+    marginRight: '0',
+    justifyContent: 'initial'
+  },
+
+  navigator__navigationButtonContainer__navigationButton: {
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L550-L553
+    backgroundColor: globalStyles.color.buttonColor,
+    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
+  },
+
+  navigator__navigationButtonContainer__navigationButton_stopButton: {
+    background: `url(${stopLoadingButton}) center no-repeat`,
+    backgroundSize: '11px 11px'
+  },
+
+  navigator__navigationButtonContainer__navigationButton_reloadButton: {
+    background: `url(${reloadButton}) center no-repeat`,
+    backgroundSize: '13px 13px'
+  },
+
+  // cf: navigator__buttonContainer_addPublisherButtonContainer on publisherToggle.js
+  navigator__buttonContainer_bookmarkButtonContainer: {
+    borderRight: 'none',
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+
+  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
+  },
+
+  navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton: {
+    background: `url(${bookmarkedButton}) center no-repeat`
+  },
+
+  navigator__endButtons_titleMode: {
+    display: 'none'
+  },
 
-    // TODO: Refactor navigationBar.js to remove !important
-    maxWidth: '100% !important',
-    marginRight: '0 !important',
-    justifyContent: 'initial !important'
+  navigator__endButtons_notTitleMode: {
+    display: 'flex'
   }
 })
 
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
index e8d905d568e..4a927b4b26d 100644
--- a/app/renderer/components/navigation/navigator.js
+++ b/app/renderer/components/navigation/navigator.js
@@ -17,7 +17,7 @@ const NavigationBar = require('./navigationBar')
 const LongPressButton = require('../common/longPressButton')
 const MenuBar = require('./menuBar')
 const WindowCaptionButtons = require('./windowCaptionButtons')
-const Button = require('../common/button')
+const BrowserButton = require('../common/button')
 const BrowserAction = require('./browserAction')
 
 // State
@@ -44,7 +44,7 @@ const appConfig = require('../../../../js/constants/appConfig')
 const settings = require('../../../../js/constants/settings')
 
 // Styles
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../styles/global')
 
 class Navigator extends React.Component {
@@ -218,7 +218,7 @@ class Navigator extends React.Component {
       navbarCaptionButtonContainer: true,
       allowDragging: this.props.shouldAllowWindowDrag
     })}>
-      <div className='navbarMenubarFlexContainer'>
+      <div className={css(styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer)}>
         {
           this.props.menuBarVisible
             ? <div className='menubarContainer'>
@@ -227,13 +227,16 @@ class Navigator extends React.Component {
             </div>
             : null
         }
-        <div className='navigatorWrapper'
+        <div className={cx({
+          navigatorWrapper: true,
+          [css(styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper)]: true
+        })}
           onDoubleClick={this.onDoubleClick}
           onDragOver={this.onDragOver}
           onDrop={this.onDrop}
         >
           <div className={cx({
-            backforward: true,
+            topLevelStartButtons: true,
             fullscreen: isFullScreen()
           })}>
             <div data-test-id={
@@ -290,7 +293,7 @@ class Navigator extends React.Component {
           }
           <div className={cx({
             topLevelEndButtons: true,
-            [css(styles.navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled)]: this.props.isWideURLbarEnabled
+            [css(styles.navigatorWrapper__topLevelEndButtons, this.props.isWideURLbarEnabled && styles.navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled)]: true
           })}>
             <div className={cx({
               extraDragArea: !this.props.menuBarVisible,
@@ -302,35 +305,34 @@ class Navigator extends React.Component {
                 ? this.extensionButtons
                 : null
             }
-            <div className={css(styles.braveMenuContainer)}>
-              <Button iconClass='braveMenu'
-                l10nId='braveMenu'
-                testId='braveShieldButton'
-                test2Id={`shield-down-${this.props.shieldsDown}`}
-                className={cx({
-                  braveShieldsDisabled: !this.props.shieldEnabled,
-                  braveShieldsDown: this.props.shieldsDown,
-                  leftOfCaptionButton: this.props.isCaptionButton
-                })}
-                disabled={this.props.activeTabShowingMessageBox}
-                onClick={this.onBraveMenu}
-              />
-              {
-                this.props.isCounterEnabled
-                  ? <div className={css(
-                      styles.lionBadge,
-                      (this.props.menuBarVisible || !isWindows()) && styles.lionBadgeRight,
-                      // delay badge show-up.
-                      // this is also set for extension badge
-                      // in a way that both can appear at the same time.
-                      styles.subtleShowUp
-                    )}
-                    data-test-id='lionBadge'>
-                    {this.props.totalBlocks}
-                  </div>
-                  : null
-              }
-            </div>
+            <BrowserButton iconClass='braveMenu'
+              l10nId='braveMenu'
+              testId='braveShieldButton'
+              test2Id={`shield-down-${this.props.shieldsDown}`}
+              className={css(
+                styles.navigatorWrapper__topLevelEndButtons__braveMenu,
+                !this.props.shieldEnabled && styles.navigatorWrapper__topLevelEndButtons__braveMenu_braveShieldsDisabled,
+                this.props.shieldsDown && styles.navigatorWrapper__topLevelEndButtons__braveMenu_braveShieldsDown,
+                this.props.isCaptionButton && styles.navigatorWrapper__topLevelEndButtons__braveMenu_leftOfCaptionButton
+              )}
+              disabled={this.props.activeTabShowingMessageBox}
+              onClick={this.onBraveMenu}
+            />
+            {
+              this.props.isCounterEnabled
+                ? <div className={css(
+                    styles.lionBadge,
+                    (this.props.menuBarVisible || !isWindows()) && styles.lionBadgeRight,
+                    // delay badge show-up.
+                    // this is also set for extension badge
+                    // in a way that both can appear at the same time.
+                    styles.subtleShowUp
+                  )}
+                  data-test-id='lionBadge'>
+                  {this.props.totalBlocks}
+                </div>
+                : null
+            }
             {
               this.props.isCaptionButton
                 ? <span className='buttonSeparator' />
@@ -370,16 +372,62 @@ const styles = StyleSheet.create({
     left: 'auto',
     right: '2px'
   },
-  braveMenuContainer: {
+
+  subtleShowUp: globalStyles.animations.subtleShowUp,
+
+  navbarCaptionButtonContainer__navbarMenubarFlexContainer: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    boxSizing: 'border-box',
+    position: 'relative',
+    overflow: 'visible',
+    whiteSpace: 'nowrap'
+  },
+
+  // TODO: The first 2 containers will be updated/renamed
+  navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: globalStyles.spacing.navbarMenubarMargin
+  },
+
+  navigatorWrapper__topLevelEndButtons: {
+    display: 'flex',
+    flexDirection: 'row',
     position: 'relative'
   },
-  subtleShowUp: globalStyles.animations.subtleShowUp,
 
   // TODO: Refactor navigator.js with Aphrodite to remove !important
   navigatorWrapper__topLevelEndButtons_isWideURLbarEnabled: {
     marginLeft: '6px !important'
   },
+
+  // TODO: Refactor navigationBar.less to remove !important
   navigatorWrapper__topLevelEndButtons__extraDragArea_disabled: {
-    display: 'none'
+    display: 'none !important'
+  },
+
+  navigatorWrapper__topLevelEndButtons__braveMenu: {
+    width: globalStyles.spacing.navbarBraveButtonWidth,
+    marginRight: globalStyles.spacing.navbarButtonSpacing,
+    userSelect: 'none',
+    position: 'relative',
+    WebkitAppRegion: 'no-drag'
+  },
+
+  navigatorWrapper__topLevelEndButtons__braveMenu_braveShieldsDisabled: {
+    filter: 'grayscale(100%)',
+    opacity: 0.4
+  },
+
+  navigatorWrapper__topLevelEndButtons__braveMenu_braveShieldsDown: {
+    filter: 'grayscale(100%)'
+  },
+
+  navigatorWrapper__topLevelEndButtons__braveMenu_leftOfCaptionButton: {
+    marginRight: '3px'
   }
 })
diff --git a/app/renderer/components/navigation/publisherToggle.js b/app/renderer/components/navigation/publisherToggle.js
index 5a70cf20142..44719b8b5de 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')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
@@ -22,7 +22,8 @@ const {getBaseUrl} = require('../../../../js/lib/appUrlUtil')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
 // Style
-const globalStyles = require('../styles/global')
+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')
@@ -72,11 +73,14 @@ class PublisherToggle extends React.Component {
       data-test-id='publisherButton'
       data-test-authorized={this.props.isEnabledForPaymentsPublisher}
       data-test-verified={this.props.isVerifiedPublisher}
-      className={css(styles.addPublisherButtonContainer)}>
+      className={css(
+        commonStyles.navigator__buttonContainer,
+        styles.navigator__buttonContainer_addPublisherButtonContainer,
+      )}>
       <BrowserButton
         custom={[
           !this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher && styles.noFundVerified,
-          this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher && styles.fundVerified,
+          this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher && styles.noFundVerified,
           !this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher && styles.noFundUnverified,
           this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher && styles.fundUnverified
         ]}
@@ -90,40 +94,29 @@ class PublisherToggle extends React.Component {
 module.exports = ReduxComponent.connect(PublisherToggle)
 
 const styles = StyleSheet.create({
-  addPublisherButtonContainer: {
-    boxSizing: 'border-box',
-    display: 'flex',
-    alignItems: 'center',
-    height: globalStyles.spacing.buttonHeight,
-    width: globalStyles.spacing.buttonWidth,
-    minHeight: globalStyles.spacing.buttonHeight,
-    minWidth: globalStyles.spacing.buttonWidth,
-    WebkitAppRegion: 'no-drag',
-    borderWidth: '1px 1px 1px 0px',
-    borderStyle: 'solid',
-    borderColor: globalStyles.color.urlBarOutline,
-    borderRadius: '0 4px 4px 0',
+  // ref: navigator__buttonContainer_bookmarkButtonContainer on nagivationBar.js
+  // ref: urlbarForm_isPublisherButtonEnabled on urlBar.js
+  navigator__buttonContainer_addPublisherButtonContainer: {
+    borderLeft: 'none',
     borderTopLeftRadius: '0',
     borderBottomLeftRadius: '0'
   },
 
+  // TODO: Refactor to BEM style
   noFundVerified: {
     backgroundImage: `url(${noFundVerifiedPublisherImage})`,
     backgroundSize: '18px',
     marginLeft: '2px'
   },
-
   fundVerified: {
     backgroundImage: `url(${fundVerifiedPublisherImage})`,
     backgroundSize: '18px',
     marginLeft: '2px'
   },
-
   noFundUnverified: {
     backgroundImage: `url(${noFundUnverifiedPublisherImage})`,
     backgroundSize: '18px'
   },
-
   fundUnverified: {
     backgroundImage: `url(${fundUnverifiedPublisherImage})`,
     backgroundSize: '18px'
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index 4ba5f2a2d32..e76a1d2aec0 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.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 Immutable = require('immutable')
 const ipc = require('electron').ipcRenderer
 
@@ -42,6 +42,8 @@ const publisherUtil = require('../../../common/lib/publisherUtil')
 // Icons
 const iconNoScript = require('../../../../img/url-bar-no-script.svg')
 
+const globalStyles = require('../styles/global')
+
 class UrlBar extends React.Component {
   constructor (props) {
     super(props)
@@ -483,20 +485,22 @@ class UrlBar extends React.Component {
     return <form
       className={cx({
         urlbarForm: true,
-        [css(styles.urlbarForm_wide)]: this.props.isWideURLbarEnabled,
-        noBorderRadius: this.props.publisherButtonVisible
+        [css(styles.urlbarForm, this.props.isWideURLbarEnabled && styles.urlbarForm_wide, this.props.titleMode && styles.urlbarForm_titleMode, this.props.publisherButtonVisible && styles.urlbarForm_isPublisherButtonEnabled)]: true
       })}
       action='#'
       id='urlbar'>
-      <div className='urlbarIconContainer'>
+      <div className={cx({
+        urlbarIconContainer: true,
+        [css(styles.urlbarForm__urlbarIconContainer)]: true
+      })}>
         <UrlBarIcon
           titleMode={this.props.titleMode}
         />
       </div>
       {
         this.props.titleMode
-        ? <div id='titleBar'>
-          <span><strong>{this.props.hostValue}</strong></span>
+        ? <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>
@@ -549,23 +553,79 @@ class UrlBar extends React.Component {
 }
 
 const styles = StyleSheet.create({
+  urlbarForm: {
+    display: 'flex',
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: globalStyles.navigationBar.urlbarForm.height,
+    padding: '0 10px 0 3px',
+    background: '#fff',
+
+    // PR #6485
+    position: 'relative',
+
+    // Fixes #4298
+    width: 0,
+
+    // allow the navigator to shrink
+    minWidth: 0
+  },
+
+  urlbarForm_wide: {
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L682-L684
+    maxWidth: '100%'
+  },
+
+  urlbarForm_titleMode: {
+    background: 'none'
+  },
+
+  // ref: navigator__buttonContainer_addPublisherButtonContainer on publisherToggle.js
+  // TODO: Convert 'urlbarForm' to remove !important
+  urlbarForm_isPublisherButtonEnabled: {
+    borderTopRightRadius: '0 !important',
+    borderBottomRightRadius: '0 !important'
+  },
+
+  // Create 25x25 square and place .urlbarIcon at the center of it
+  urlbarForm__urlbarIconContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: globalStyles.navigationBar.urlbarForm.height,
+    width: globalStyles.navigationBar.urlbarForm.height,
+    minHeight: globalStyles.navigationBar.urlbarForm.height,
+    minWidth: globalStyles.navigationBar.urlbarForm.height
+  },
+
+  urlbarForm__titleBar: {
+    display: 'inline-block',
+    color: globalStyles.color.chromeText,
+    fontSize: globalStyles.spacing.defaultFontSize,
+    maxWidth: '100%',
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+
+  urlbarForm__titleBar__host: {
+    fontWeight: 600
+  },
+
   noScriptContainer: {
     display: 'flex',
     padding: '5px',
     marginRight: '-8px',
     WebkitAppRegion: 'drag'
   },
+
   noScriptButton: {
     WebkitAppRegion: 'no-drag',
     backgroundImage: `url(${iconNoScript})`,
     width: '14px',
     height: '14px',
     border: '0px'
-  },
-
-  urlbarForm_wide: {
-    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L682-L684
-    maxWidth: '100%'
   }
 })
 
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 0ffa4b810fa..7a9c3bdeb68 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -198,6 +198,21 @@ const styles = StyleSheet.create({
   isCommonForm: {
     fontSize: globalStyles.fontSize.flyoutDialog,
     width: '100%'
+  },
+
+  // #9283
+  // Create 25x25 squares and place the buttons at the center of each container
+  navigator__buttonContainer: {
+    border: `1px solid ${globalStyles.color.urlBarOutline}`,
+    borderRadius: globalStyles.radius.borderRadiusURL,
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    height: globalStyles.navigationBar.urlbarForm.height,
+    width: globalStyles.navigationBar.urlbarForm.height,
+    minHeight: globalStyles.navigationBar.urlbarForm.height,
+    minWidth: globalStyles.navigationBar.urlbarForm.height,
+    WebkitAppRegion: 'no-drag'
   }
 })
 
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index c2b3b241321..b9ea2325f16 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -134,8 +134,6 @@ const globalStyles = {
     switchNubTopMargin: '2px',
     switchNubLeftMargin: '2px',
     switchNubRightMargin: '2px',
-    buttonHeight: '25px',
-    buttonWidth: '25px',
     navbarHeight: '36px',
     downloadsBarHeight: '60px',
     tabsToolbarHeight: '26px',
@@ -314,6 +312,13 @@ const globalStyles = {
         background: '#ccc'
       }
     }
+  },
+
+  navigationBar: {
+
+    urlbarForm: {
+      height: '25px'
+    }
   }
 }
 
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 0f7078ad48e..f8185c84814 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -16,7 +16,7 @@
 
 // (macOS) We need to keep a padding left to avoid overlapping
 // with the window buttons to close/maximize/minimize the window.
-.platform--darwin .navigatorWrapper .backforward {
+.platform--darwin .navigatorWrapper .topLevelStartButtons {
   margin-left: @navbarLeftMarginDarwin;
 
   &.fullscreen {
@@ -36,7 +36,7 @@
     box-sizing: border-box;
   }
 
-  .backforward {
+  .topLevelStartButtons {
     padding-left: 5px;
   }
 
@@ -365,15 +365,6 @@
     -webkit-app-region: drag;
   }
 }
-.navbarMenubarFlexContainer {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  box-sizing: border-box;
-  position: relative;
-  overflow: visible;
-  white-space: nowrap;
-}
 
 // Window Caption Buttons (for use w/ slim titlebar)
 .windowCaptionButtons {
@@ -454,10 +445,8 @@
 
   @rightMargin: @navbarLeftMarginDarwin / 2;
 
-  display: flex;
-
   // Buttons on the left
-  .backforward {
+  .topLevelStartButtons {
     display: flex;
 
     .backButton,
@@ -480,14 +469,13 @@
 
   // Navigation bar at the center
   #navigator {
-    display: flex;
-    flex-grow: 1;
-    min-width: 0%; // allow the navigator to shrink
-    max-width: 900px;
-    margin-right: @rightMargin;
-
     &.titleMode {
       padding-right: @centerOffset;
+
+      @media (max-width: @breakpointNarrowViewport) {
+        transition: padding @transitionDuration ease-in-out;
+        padding-right: 0;
+      }
     }
 
     @media (max-width: @breakpointNarrowViewport) {
@@ -497,40 +485,10 @@
     @media (max-width: @breakpointNarrowViewport) {
       width: 100%;
     }
-
-    &.titleMode {
-      @media (max-width: @breakpointNarrowViewport) {
-        transition: padding @transitionDuration ease-in-out;
-        padding-right: 0;
-      }
-    }
   }
 
   // Buttons on the right
   .topLevelEndButtons {
-    display: flex;
-    flex-direction: row;
-    margin-left: 3px;
-    position: relative;
-
-    .braveMenu {
-      width: @navbarBraveButtonWidth;
-      margin-right: @navbarButtonSpacing;
-      -webkit-app-region: no-drag;
-      user-select: none;
-
-      &.braveShieldsDown {
-        -webkit-filter: grayscale(100%);
-      }
-
-      &.braveShieldsDisabled {
-        -webkit-filter: grayscale(100%);
-        opacity: 0.4;
-      }
-      &.leftOfCaptionButton {
-        margin-right: 3px;
-      }
-    }
 
     @media (max-width: @breakpointWideViewport) {
       .extraDragArea {
@@ -542,14 +500,6 @@
   }
 }
 
-.navigationButton {
-  background-color: @buttonColor;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
-  margin: 0 7px 0 0;
-}
-
 .navigationButtonContainer {
   border-radius: @borderRadius;
   height: 24px;
@@ -573,42 +523,12 @@
   }
 }
 
-#navigator {
-  .stopButton,
-  .reloadButton,
-  .homeButton {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .stopButton {
-    background: url('../img/toolbar/stoploading_btn.svg') center no-repeat;
-    background-size: 11px 11px;
-  }
-
-  .reloadButton {
-    background: url('../img/toolbar/reload_btn.svg') center no-repeat;
-    background-size: 13px 13px;
-  }
-
-  .homeButton {
-    background: url('../img/toolbar/home_btn.svg') center no-repeat;
-    background-size: 16px 16px;
-  }
-}
-
 .navigatorWrapper {
-  justify-content: space-between;
-  align-items: center;
-  margin-top: @navbarMenubarMargin;
-  box-sizing: border-box;
 
   /**
    * Left buttons
    */
-  .backforward {
+  .topLevelStartButtons {
     display: flex;
     z-index: @zindexNavigationBar;
     transition: margin @transitionDuration ease-in-out;
@@ -632,16 +552,6 @@
 @urlbarFormHeight: 25px;
 
 .urlbarForm {
-  position: relative; // PR #6485
-  width: 0; // Fixes #4298
-  align-items: center;
-  justify-content: center;
-  height: @urlbarFormHeight;
-  padding: 0 10px 0 3px;
-  display: flex;
-  flex-grow: 1;
-  min-width: 0%; // allow the navigator to shrink
-
   *:not(legend) {
     z-index: @zindexUrlbarNotLegend;
   }
@@ -683,14 +593,6 @@
 }
 
 #navigator {
-  font-size: 20px;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 0;
-  position: relative;
-  user-select: none;
-  z-index: @zindexNavigationBar;
 
   // #6253 #6680
   > * {
@@ -705,10 +607,6 @@
     }
   }
 
-  .endButtons {
-    display: flex;
-  }
-
   &:not(.titleMode) {
     > * {
       animation: fadeIn .6s;
@@ -716,50 +614,12 @@
     }
 
     .urlbarForm {
-      &.noBorderRadius {
-        border-radius: 0;
-
+      &.isPublisherButtonEnabled {
         legend:before {
           border-radius: 0;
         }
       }
     }
-
-    // Create 25x25 squares and place the buttons at the center of each container
-    .bookmarkButtonContainer,
-    .addPublisherButtonContainer {
-      border: 1px solid @urlBarOutline;
-      border-radius: @borderRadiusURL;
-      box-sizing: border-box;
-      display: flex;
-      align-items: center;
-      height: @urlbarFormHeight;
-      width: @urlbarFormHeight;
-      min-height: @urlbarFormHeight;
-      min-width: @urlbarFormHeight;
-      -webkit-app-region: no-drag;
-    }
-
-    .bookmarkButtonContainer {
-      border-right: none;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-
-      .bookmarkButton {
-        background: url('../img/toolbar/bookmark_btn.svg') center no-repeat;
-        -webkit-mask-repeat: no-repeat;
-        background-size: 14px 14px;
-        margin: 0;
-        height: 0;
-        width: @urlbarFormHeight; // #6704
-        height: @urlbarFormHeight; // #6704
-
-        &.removeBookmarkButton {
-          background: url('../img/toolbar/bookmark_marked.svg') center no-repeat;
-          background-size: 14px 14px;
-        }
-      }
-    }
   }
 
   &.titleMode {
@@ -769,37 +629,9 @@
     // border-radius: @borderRadiusURL;
     // box-shadow: inset 0 0 0 1px rgba(187, 187, 187, 1.0);
 
-    .urlbarForm {
-      background: none;
-    }
-
-    input {
-      display: none;
-    }
-    #titleBar {
-      display: inline-block;
-      color: @chromeText;
-      font-size: 13px;
-      max-width: 100%;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin-left: 2px;
-
-      strong {
-        font-weight: 600;
-      }
-    }
-
-    .endButtons {
-      display: none;
-    }
-
     .urlbarIcon {
       display: inline-block;
       opacity: 0.5;
-      position: relative;
-      left: 2px;
       min-width: 0;
 
       &.insecure-color {
@@ -815,11 +647,6 @@
     }
   }
 
-  #titleBar {
-    display: none;
-    text-overflow: ellipsis;
-  }
-
   .urlbarForm {
     .loadTime {
       color: @loadTimeColor;
@@ -864,16 +691,7 @@
       }
     }
 
-    // Create 25x25 square and place .urlbarIcon at the center of it
     .urlbarIconContainer {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: @urlbarFormHeight;
-      width: @urlbarFormHeight;
-      min-height: @urlbarFormHeight;
-      min-width: @urlbarFormHeight;
-
       .urlbarIcon {
         color: @siteSecureColor;
         font-size: 12px;
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 0b429493afa..b9c66778a14 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -19,8 +19,8 @@ module.exports = {
   urlbarIcon: '[data-test-id="urlBarIcon"]',
   urlBarSuggestions: '.urlBarSuggestions',
   titleBar: '#titleBar',
-  navigatorBookmarked: '#navigator .removeBookmarkButton',
-  navigatorNotBookmarked: '#navigator .bookmarkButton',
+  navigatorBookmarked: '[data-test-id="bookmarked"]',
+  navigatorNotBookmarked: '[data-test-id="notBookmarked"]',
   bookmarksToolbar: '[data-test-id="bookmarksToolbar"]',
   bookmarkNameInput: '[data-test-id="bookmarkNameInput"]',
   bookmarkLocationInput: '[data-test-id="bookmarkLocationInput"]',
@@ -62,9 +62,9 @@ module.exports = {
   noScriptAllowTempButton: '[data-l10n-id="allowScriptsTemp"]',
   noScriptAllowOnceButton: '[data-l10n-id="allowScriptsOnce"]',
   noScriptAllowButton: '[data-l10n-id="allowScripts"]',
-  backButton: '.backforward .backButton',
-  forwardButton: '.backforward .forwardButton',
-  reloadButton: '.reloadButton',
+  backButton: '.topLevelStartButtons .backButton',
+  forwardButton: '.topLevelStartButtons .forwardButton',
+  reloadButton: '[data-test-id="reloadButton"]',
   homeButton: '[data-test-id="homeButton"]',
   clearBrowsingDataButton: '[data-test-id="clearBrowsingDataButton"]',
   clearBrowsingDataPanel: '[data-test-id="clearBrowsingDataPanel"]',