From 0a4e13859de74e5f90e916a8feb6c27153e2ed06 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Sun, 18 Jun 2017 17:25:03 +0900
Subject: [PATCH] Misc change

- Convert 'buttonSeparator'

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

Test Plan: available on https://github.com/brave/browser-laptop/pull/9299#issue-234116287
---
 .../bookmarks/addEditBookmarkHanger.js        | 18 +++-
 app/renderer/components/common/commonForm.js  |  2 +-
 .../components/navigation/navigationBar.js    | 53 +++++-----
 .../components/navigation/navigator.js        | 56 ++++++-----
 .../components/navigation/publisherToggle.js  | 15 ++-
 app/renderer/components/navigation/urlBar.js  | 98 +++++++++----------
 .../components/navigation/urlBarIcon.js       | 10 +-
 .../navigation/windowCaptionButtons.js        |  2 +-
 .../components/styles/commonStyles.js         | 12 +--
 app/renderer/components/styles/global.js      |  9 +-
 less/button.less                              |  6 --
 less/forms.less                               |  2 +-
 less/navigationBar.less                       | 12 +--
 less/variables.less                           |  1 -
 test/lib/selectors.js                         |  2 +-
 15 files changed, 156 insertions(+), 142 deletions(-)

diff --git a/app/renderer/components/bookmarks/addEditBookmarkHanger.js b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
index 6a5c0f5ba63..a307e07ca9e 100644
--- a/app/renderer/components/bookmarks/addEditBookmarkHanger.js
+++ b/app/renderer/components/bookmarks/addEditBookmarkHanger.js
@@ -309,6 +309,20 @@ class AddEditBookmarkHanger extends React.Component {
   }
 }
 
+const navigationButtonContainerWidth = globalStyles.navigationBar.navigationButtonContainer.width
+const navigationButtonContainerMarginRight = globalStyles.navigationBar.navigationButtonContainer.marginRight
+const bookmarkButtonContainerWidth = globalStyles.navigationBar.urlbarForm.height
+
+// Add navigationButtonContainerMarginRight (6px)
+const navigationButtonWidth = `calc(${navigationButtonContainerWidth} + ${navigationButtonContainerMarginRight})`
+
+// Count the reload and stop button, adding the half width of the bookmark button container
+// 12px == arrowUp width
+const bookmarkHangerPosition = `calc(12px + ${navigationButtonWidth} + (${bookmarkButtonContainerWidth} / 2))`
+
+// Add another container width
+const bookmarkHangerPositionWithHomeButton = `calc(${bookmarkHangerPosition} + ${navigationButtonWidth})`
+
 const styles = StyleSheet.create({
   // Copied from commonForm.js
   commonFormSection: {
@@ -335,7 +349,7 @@ const styles = StyleSheet.create({
   },
   bookmarkHanger__arrowUp: {
     position: 'relative',
-    left: '54px',
+    left: bookmarkHangerPosition,
 
     '::after': {
       content: '""',
@@ -349,7 +363,7 @@ const styles = StyleSheet.create({
     }
   },
   bookmarkHanger__withHomeButton: {
-    left: '83px'
+    left: bookmarkHangerPositionWithHomeButton
   },
   bookmarkHanger__label: {
     display: 'block',
diff --git a/app/renderer/components/common/commonForm.js b/app/renderer/components/common/commonForm.js
index 9ca3b49e217..6fd26a7c7bd 100644
--- a/app/renderer/components/common/commonForm.js
+++ b/app/renderer/components/common/commonForm.js
@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
     maxWidth: globalStyles.spacing.bookmarkHangerMaxWidth,
     height: 'initial', // #8634
 
-    // Cancel the inherited value from .navbarMenubarFlexContainer, which is 'nowrap'.
+    // Cancel the inherited value from navigator__menuBarAndNavigationBar on navigator.js, which is 'nowrap'.
     whiteSpace: 'normal'
   },
 
diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
index 3f4b06defa9..4cf7f270e14 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -110,7 +110,7 @@ class NavigationBar extends React.Component {
       this.props.bookmarked
   }
 
-  // BEM Level: navigator__navigationButtonContainer
+  // BEM Level: navigationBar__navigationButtonContainer
   get stopButton () {
     return <button className={cx({
       normalizeButton: true,
@@ -121,7 +121,7 @@ class NavigationBar extends React.Component {
     />
   }
 
-  // BEM Level: navigator__navigationButtonContainer
+  // BEM Level: navigationBar__navigationButtonContainer
   get reloadButton () {
     return <LongPressButton className={cx({
       normalizeButton: true,
@@ -134,17 +134,17 @@ class NavigationBar extends React.Component {
     />
   }
 
-  // BEM Level: navigator
+  // BEM Level: navigationBar
   get bookmarkButtonContainer () {
     return <span className={css(
-      commonStyles.navigator__buttonContainer,
-      commonStyles.navigator__buttonContainer_outsideOfURLbar,
-      styles.navigator__buttonContainer_bookmarkButtonContainer
+      commonStyles.navigationBar__buttonContainer,
+      commonStyles.navigationBar__buttonContainer_outsideOfURLbar,
+      styles.navigationBar__buttonContainer_bookmarkButtonContainer
     )}>
       <button className={cx({
         normalizeButton: true,
         withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-        [css(styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton, this.bookmarked && styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton)]: true
+        [css(styles.navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton, this.bookmarked && styles.navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton)]: true
       })}
         data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
         data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
@@ -214,12 +214,12 @@ class NavigationBar extends React.Component {
       return null
     }
 
-    return <div
-      id='navigator'
+    return <div id='navigationBar'
+      data-test-id='navigationBar'
       data-frame-key={this.props.activeFrameKey}
       className={cx({
         titleMode: this.props.titleMode,
-        [css(styles.navigator, (this.props.isDarwin && this.props.isFullScreen) && styles.navigator_isDarwin_isFullScreen, this.props.titleMode && styles.navigator_titleMode, this.props.isWideUrlBarEnabled && styles.navigator_wide)]: true
+        [css(styles.navigationBar, (this.props.isDarwin && this.props.isFullScreen) && styles.navigationBar_isDarwin_isFullScreen, this.props.titleMode && styles.navigationBar_titleMode, this.props.isWideUrlBarEnabled && styles.navigationBar_wide)]: true
       })}>
       {
         this.props.showBookmarkHanger
@@ -231,7 +231,7 @@ class NavigationBar extends React.Component {
         ? null
         : <span className={css(
             commonStyles.navigationButtonContainer,
-            styles.navigator__navigationButtonContainer,
+            styles.navigationBar__navigationButtonContainer,
           )}>
           {
             this.props.isLoading
@@ -244,7 +244,7 @@ class NavigationBar extends React.Component {
         this.props.showHomeButton
         ? <span className={css(
             commonStyles.navigationButtonContainer,
-            styles.navigator__navigationButtonContainer,
+            styles.navigationBar__navigationButtonContainer,
           )}>
           <HomeButton activeTabId={this.props.activeTabId} />
         </span>
@@ -261,12 +261,7 @@ class NavigationBar extends React.Component {
         />
       {
         this.props.showPublisherToggle
-        ? <div className={css(
-          this.props.titleMode && styles.navigator__endButtons_titleMode,
-          !this.props.titleMode && styles.navigator__endButtons_notTitleMode
-        )}>
-          <PublisherToggle />
-        </div>
+        ? <PublisherToggle />
         : null
       }
     </div>
@@ -277,14 +272,14 @@ const rightMargin = `calc(${globalStyles.spacing.navbarLeftMarginDarwin} / 2)`
 
 const styles = StyleSheet.create({
 
-  navigator: {
+  navigationBar: {
     boxSizing: 'border-box',
     display: 'flex',
     flexGrow: 1,
     alignItems: 'center',
     justifyContent: 'center',
     fontSize: '20px',
-    minWidth: '0%', // allow the navigator to shrink
+    minWidth: '0%', // allow the navigationBar to shrink
     maxWidth: '900px',
     marginRight: rightMargin,
     padding: 0,
@@ -293,24 +288,22 @@ const styles = StyleSheet.create({
     zIndex: globalStyles.zindex.zindexNavigationBar
   },
 
-  navigator_isDarwin_isFullScreen: {
+  navigationBar_isDarwin_isFullScreen: {
     marginRight: 0
   },
 
-  navigator_titleMode: {
+  navigationBar_titleMode: {
     animation: 'fadeIn 1.2s'
   },
 
-  navigator_wide: {
+  navigationBar_wide: {
     maxWidth: '100%',
     marginRight: '0',
     justifyContent: 'initial'
   },
 
-  // cf: topLevelStartButtonContainer on navigator.js
-  navigator__navigationButtonContainer: {
-    // globalStyles.navigationBar.urlbarForm.height + 2px
-    width: '27px'
+  navigationBar__navigationButtonContainer: {
+    width: globalStyles.navigationBar.navigationButtonContainer.width
   },
 
   navigationButton: {
@@ -336,20 +329,20 @@ const styles = StyleSheet.create({
   },
 
   // cf: navigator__buttonContainer_addPublisherButtonContainer on publisherToggle.js
-  navigator__buttonContainer_bookmarkButtonContainer: {
+  navigationBar__buttonContainer_bookmarkButtonContainer: {
     borderRight: 'none',
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
   },
 
-  navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton: {
+  navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton: {
     background: `url(${bookmarkButton}) center no-repeat`,
     backgroundSize: '14px 14px',
     width: '100%',
     height: '100%'
   },
 
-  navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton: {
+  navigationBar__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton: {
     background: `url(${bookmarkedButton}) center no-repeat`
   }
 })
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
index f788a4ba7e2..16447154fd5 100644
--- a/app/renderer/components/navigation/navigator.js
+++ b/app/renderer/components/navigation/navigator.js
@@ -136,7 +136,7 @@ class Navigator extends React.Component {
   }
 
   onDoubleClick (e) {
-    if (!e.target.className.includes('navigatorWrapper')) {
+    if (!e.target.className.includes('navigationBarWrapper')) {
       return
     }
     return !isMaximized() ? windowActions.shouldMaximize(getCurrentWindowId()) : windowActions.shouldMinimize(getCurrentWindowId())
@@ -152,11 +152,11 @@ class Navigator extends React.Component {
     ipc.off(messages.SHORTCUT_ACTIVE_FRAME_FORWARD, this.onForward)
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper
-  get navigatorWrapper () {
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper
+  get navigationBarWrapper () {
     return <div className={cx({
-      navigatorWrapper: true,
-      [css(styles.navigatorWrapper)]: true
+      navigationBarWrapper: true,
+      [css(styles.navigationBarWrapper)]: true
     })}
       onDoubleClick={this.onDoubleClick}
       onDragOver={this.onDragOver}
@@ -168,7 +168,7 @@ class Navigator extends React.Component {
     </div>
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelStartButtons
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons
   get topLevelStartButtons () {
     return <div className={cx({
       topLevelStartButtons: true,
@@ -180,7 +180,7 @@ class Navigator extends React.Component {
     </div>
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelStartButtons__topLevelStartButtonContainer
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons__topLevelStartButtonContainer
   get backButton () {
     return <span data-test-id={
       !this.props.canGoBack
@@ -213,7 +213,7 @@ class Navigator extends React.Component {
     </span>
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelStartButtons__topLevelStartButtonContainer
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelStartButtons__topLevelStartButtonContainer
   get forwardButton () {
     return <span data-test-id={
       !this.props.canGoForward
@@ -246,7 +246,7 @@ class Navigator extends React.Component {
     </span>
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons
   get topLevelEndButtons () {
     return <div className={cx({
       topLevelEndButtons: true,
@@ -270,7 +270,7 @@ class Navigator extends React.Component {
       }
       {
         this.props.isCaptionButton
-          ? <span className='buttonSeparator' />
+          ? <span className={css(styles.topLevelEndButtons__buttonSeparator)} />
           : null
       }
     </div>
@@ -279,12 +279,12 @@ class Navigator extends React.Component {
   get extensionButtons () {
     let buttons = this.props.extensionBrowserActions.map((id) => <BrowserAction extensionId={id} />).values()
     buttons = Array.from(buttons)
-    buttons.push(<span className='buttonSeparator' />)
+    buttons.push(<span className={css(styles.topLevelEndButtons__buttonSeparator)} />)
 
     return buttons
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__braveMenuButton
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons__braveMenuButton
   get braveMenuButton () {
     return <BrowserButton className={css(
       styles.braveMenuButton,
@@ -300,17 +300,17 @@ class Navigator extends React.Component {
     />
   }
 
-  // BEM Level: navbarCaptionButtonContainer__navbarMenubarFlexContainer__navigatorWrapper__topLevelEndButtons__counter_braveMenu
+  // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons__counter_braveMenu
   get counterBraveMenu () {
     return <div data-test-id='counterBraveMenu'
       className={css(
-        styles.braveMenu,
-        (this.props.menuBarVisible || !isWindows()) && styles.braveMenu_right,
+        styles.counterBraveMenu,
+        (this.props.menuBarVisible || !isWindows()) && styles.counterBraveMenu_right,
 
         // delay badge show-up.
         // this is also set for extension badge
         // in a way that both can appear at the same time.
-        styles.braveMenu_subtleShowUp
+        styles.counterBraveMenu_subtleShowUp
       )}>
       {this.props.totalBlocks}
     </div>
@@ -384,10 +384,10 @@ class Navigator extends React.Component {
 
   render () {
     return <div className={cx({
-      navbarCaptionButtonContainer: true,
+      navigator: true,
       allowDragging: this.props.shouldAllowWindowDrag
     })}>
-      <div className={css(styles.navbarCaptionButtonContainer__navbarMenubarFlexContainer)}>
+      <div className={css(styles.navigator__menuBarAndNavigationBar)}>
         {
           this.props.menuBarVisible
             ? <div className='menubarContainer'>
@@ -396,7 +396,7 @@ class Navigator extends React.Component {
             </div>
             : null
         }
-        {this.navigatorWrapper}
+        {this.navigationBarWrapper}
       </div>
       {
         this.props.isCaptionButton
@@ -408,7 +408,7 @@ class Navigator extends React.Component {
 }
 
 const styles = StyleSheet.create({
-  navbarCaptionButtonContainer__navbarMenubarFlexContainer: {
+  navigator__menuBarAndNavigationBar: {
     display: 'flex',
     flex: 1,
     flexDirection: 'column',
@@ -418,7 +418,7 @@ const styles = StyleSheet.create({
     whiteSpace: 'nowrap'
   },
 
-  navigatorWrapper: {
+  navigationBarWrapper: {
     boxSizing: 'border-box',
     display: 'flex',
     justifyContent: 'space-between',
@@ -443,7 +443,7 @@ const styles = StyleSheet.create({
     paddingLeft: '4px'
   },
 
-  // cf: navigator__navigationButtonContainer on navitionBar.js
+  // cf: navigationBar__navigationButtonContainer on navitionBar.js
   topLevelStartButtonContainer: {
     width: '34px'
   },
@@ -499,6 +499,12 @@ const styles = StyleSheet.create({
     display: 'none !important'
   },
 
+  topLevelEndButtons__buttonSeparator: {
+    width: '1px',
+    borderLeft: '1px solid #e2e2e2',
+    margin: '4px 3px 4px 3px'
+  },
+
   braveMenuButton: {
     backgroundImage: `-webkit-image-set(url(${braveButton1x}) 1x, url(${braveButton2x}) 2x, url(${braveButton3x}) 3x)`,
     backgroundRepeat: 'no-repeat',
@@ -527,7 +533,7 @@ const styles = StyleSheet.create({
     marginRight: '3px'
   },
 
-  braveMenu: {
+  counterBraveMenu: {
     position: 'absolute',
     left: 'calc(50% - 1px)',
     top: '14px',
@@ -543,12 +549,12 @@ const styles = StyleSheet.create({
     WebkitUserSelect: 'none'
   },
 
-  braveMenu_right: {
+  counterBraveMenu_right: {
     left: 'auto',
     right: '2px'
   },
 
-  braveMenu_subtleShowUp: globalStyles.animations.subtleShowUp
+  counterBraveMenu_subtleShowUp: globalStyles.animations.subtleShowUp
 })
 
 module.exports = ReduxComponent.connect(Navigator)
diff --git a/app/renderer/components/navigation/publisherToggle.js b/app/renderer/components/navigation/publisherToggle.js
index 00ffe303ab7..e70176b6ea9 100644
--- a/app/renderer/components/navigation/publisherToggle.js
+++ b/app/renderer/components/navigation/publisherToggle.js
@@ -68,15 +68,17 @@ class PublisherToggle extends React.Component {
     return props
   }
 
+  // TODO (Suguru): NormalizeButton
+  // ref: navigationBar__buttonContainer_bookmarkButtonContainer on navigationBar.js
   render () {
     return <span
       data-test-id='publisherButton'
       data-test-authorized={this.props.isEnabledForPaymentsPublisher}
       data-test-verified={this.props.isVerifiedPublisher}
       className={css(
-        commonStyles.navigator__buttonContainer,
-        commonStyles.navigator__buttonContainer_outsideOfURLbar,
-        styles.navigator__buttonContainer_publisherToggleContainer
+        commonStyles.navigationBar__buttonContainer,
+        commonStyles.navigationBar__buttonContainer_outsideOfURLbar,
+        styles.navigationBar__buttonContainer_publisherToggleContainer
       )}>
       <button className={cx({
         normalizeButton: true,
@@ -90,10 +92,13 @@ class PublisherToggle extends React.Component {
 }
 
 const styles = StyleSheet.create({
-  navigator__buttonContainer_publisherToggleContainer: {
+  navigationBar__buttonContainer_publisherToggleContainer: {
     borderLeft: 'none',
     borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
+    borderBottomLeftRadius: 0,
+
+    // TODO (Suguru): Refactor navigationBar.less to remove !important. See the wildcard style under '#navigationBar'.
+    animation: 'none !important'
   },
 
   publisherButton_noFundVerified: {
diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index 2f446e91c88..f2e03524223 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.js
@@ -229,16 +229,6 @@ class UrlBar extends React.Component {
     windowActions.urlBarOnBlur(getCurrentWindowId(), e.target.value, this.props.urlbarLocation, eventElHasAncestorWithClasses(e, ['urlBarSuggestions', 'urlbarForm']))
   }
 
-  get suggestionLocation () {
-    const selectedIndex = this.props.selectedIndex
-    if (typeof selectedIndex === 'number') {
-      const suggestion = this.props.suggestion
-      if (suggestion) {
-        return suggestion.location
-      }
-    }
-  }
-
   updateAutocomplete (newValue) {
     let suggestion = ''
     let suggestionNormalized = ''
@@ -315,6 +305,22 @@ class UrlBar extends React.Component {
     this.maybeUrlBarTextChanged(val)
   }
 
+  select () {
+    setImmediate(() => {
+      if (this.urlInput) {
+        this.urlInput.select()
+      }
+    })
+  }
+
+  focus () {
+    setImmediate(() => {
+      if (this.urlInput) {
+        this.urlInput.focus()
+      }
+    })
+  }
+
   onKeyUp (e) {
     switch (e.keyCode) {
       case KeyCodes.UP:
@@ -332,25 +338,17 @@ class UrlBar extends React.Component {
     this.maybeUrlBarTextChanged(this.lastVal)
   }
 
-  select () {
-    setImmediate(() => {
-      if (this.urlInput) {
-        this.urlInput.select()
-      }
-    })
+  onFocus (e) {
+    this.select()
+    windowActions.urlBarOnFocus(getCurrentWindowId())
   }
 
-  focus () {
-    setImmediate(() => {
-      if (this.urlInput) {
-        this.urlInput.focus()
-      }
-    })
+  onNoScript () {
+    windowActions.setNoScriptVisible()
   }
 
-  onFocus (e) {
-    this.select()
-    windowActions.urlBarOnFocus(getCurrentWindowId())
+  onContextMenu (e) {
+    contextMenus.onUrlBarContextMenu(e)
   }
 
   componentWillMount () {
@@ -404,6 +402,13 @@ class UrlBar extends React.Component {
     }
   }
 
+  get hostValue () {
+    const parsed = urlParse(this.props.location)
+    return parsed.host &&
+      parsed.protocol !== 'about:' &&
+      parsed.protocol !== 'chrome-extension:' ? parsed.host : ''
+  }
+
   get titleValue () {
     // For about:newtab we don't want the top of the browser saying New Tab
     // Instead just show "Brave"
@@ -428,20 +433,14 @@ class UrlBar extends React.Component {
     return this.props.enableNoScript && this.props.scriptsBlocked && this.props.scriptsBlocked.size
   }
 
-  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 suggestionLocation () {
+    const selectedIndex = this.props.selectedIndex
+    if (typeof selectedIndex === 'number') {
+      const suggestion = this.props.suggestion
+      if (suggestion) {
+        return suggestion.location
+      }
+    }
   }
 
   // BEM Level: urlbarForm__titleBar
@@ -479,7 +478,6 @@ class UrlBar extends React.Component {
       data-test-id='urlInput'
       className={cx({
         private: this.private,
-        testHookLoadDone: !this.props.loading,
         [css(styles.input, this.props.isWindows && styles.input_windows)]: true
       })}
       readOnly={this.props.titleMode}
@@ -498,22 +496,14 @@ class UrlBar extends React.Component {
 
   // BEM Level: urlbarForm__buttonContainer_showNoScript
   get noScriptInfo () {
-    return <span className={css(commonStyles.navigator__urlbarForm__buttonContainer_showNoScriptInfo)}
+    return <span className={css(commonStyles.urlbarForm__buttonContainer_noScript)}
       onClick={this.onNoScript}>
-      <span className={css(styles.showNoScript__noScriptButton)}
+      <span className={css(styles.noScript__button)}
         data-l10n-id='noScriptButton'
         data-test-id='noScriptButton' />
     </span>
   }
 
-  onNoScript () {
-    windowActions.setNoScriptVisible()
-  }
-
-  onContextMenu (e) {
-    contextMenus.onUrlBarContextMenu(e)
-  }
-
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
@@ -597,7 +587,7 @@ class UrlBar extends React.Component {
       })}
       action='#'
       id='urlbar'>
-      <div className={css(commonStyles.navigator__urlbarForm__urlbarIconContainer)}>
+      <div className={css(commonStyles.urlbarForm__urlbarIconContainer)}>
         <UrlBarIcon
           titleMode={this.props.titleMode}
         />
@@ -623,7 +613,7 @@ class UrlBar extends React.Component {
         : null
       }
       {
-          this.shouldRenderUrlBarSuggestions
+        this.shouldRenderUrlBarSuggestions
           ? <UrlBarSuggestions
             menubarVisible={this.props.menubarVisible}
           />
@@ -678,7 +668,7 @@ const styles = StyleSheet.create({
     paddingRight: '10px'
   },
 
-  // ref: navigator__buttonContainer_addPublisherButtonContainer on publisherToggle.js
+  // ref: navigationBar__buttonContainer_addPublisherButtonContainer on publisherToggle.js
   urlbarForm_isPublisherButtonEnabled: {
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
@@ -765,7 +755,7 @@ const styles = StyleSheet.create({
     display: 'none'
   },
 
-  showNoScript__noScriptButton: {
+  noScript__button: {
     background: `url(${iconNoScript}) center no-repeat`,
     width: '15px',
     height: '15px',
diff --git a/app/renderer/components/navigation/urlBarIcon.js b/app/renderer/components/navigation/urlBarIcon.js
index 378bb02cde2..9758d63da19 100644
--- a/app/renderer/components/navigation/urlBarIcon.js
+++ b/app/renderer/components/navigation/urlBarIcon.js
@@ -68,9 +68,9 @@ class UrlBarIcon extends React.Component {
       if (this.props.isSecure === true) {
         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)]
+        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)]
+        return [globalStyles.appIcons.unlock, css(styles.urlbarIcon_large, styles.urlbarIcon_insecure)]
       }
     }
     return []
@@ -191,6 +191,12 @@ const styles = StyleSheet.create({
     minWidth: 0
   },
 
+  // 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: {
+    opacity: 1
+  },
+
   // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L900-L906
   // about:newtab
   urlbarIcon_isSearch: {
diff --git a/app/renderer/components/navigation/windowCaptionButtons.js b/app/renderer/components/navigation/windowCaptionButtons.js
index 8ea4abbeffe..3f75112e042 100644
--- a/app/renderer/components/navigation/windowCaptionButtons.js
+++ b/app/renderer/components/navigation/windowCaptionButtons.js
@@ -50,7 +50,7 @@ class WindowCaptionButtons extends ImmutableComponent {
   }
 
   onDoubleClick (e) {
-    if (!e.target.className.includes('navigatorWrapper')) {
+    if (!e.target.className.includes('navigationBarWrapper')) {
       return
     }
     this.onMaximizeClick(e)
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index e12c396eec0..65ce560c9bb 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -214,14 +214,14 @@ const styles = StyleSheet.create({
     width: '100%'
   },
 
-  // See urlBar.js
+  // See navigationBar.js and urlBar.js
   // TODO: rename buttonContainer and urlbarIconContainer
-  navigator__buttonContainer: buttonContainer,
-  navigator__urlbarForm__buttonContainer_showNoScriptInfo: buttonContainer,
-  navigator__urlbarForm__urlbarIconContainer: buttonContainer,
+  navigationBar__buttonContainer: buttonContainer,
+  urlbarForm__buttonContainer_noScript: buttonContainer,
+  urlbarForm__urlbarIconContainer: buttonContainer,
 
   // Add border to the bookmark button and publisher button only
-  navigator__buttonContainer_outsideOfURLbar: {
+  navigationBar__buttonContainer_outsideOfURLbar: {
     border: `1px solid ${globalStyles.color.urlBarOutline}`,
     borderRadius: globalStyles.radius.borderRadiusURL
   },
@@ -230,7 +230,7 @@ const styles = StyleSheet.create({
     display: 'inline-block',
     borderRadius: globalStyles.radius.borderRadiusNavigationButton,
     height: globalStyles.navigationBar.urlbarForm.height,
-    marginRight: '6px',
+    marginRight: globalStyles.navigationBar.navigationButtonContainer.marginRight,
 
     ':hover': {
       background: '#fff',
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 2f00a70dcab..ef348b2d9ad 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -125,7 +125,6 @@ const globalStyles = {
     carotRadius: '8px'
   },
   spacing: {
-    navigatorHeight: '48px',
     defaultSpacing: '12px',
     defaultFontSize: '13px',
     contextMenuFontSize: '14px',
@@ -328,6 +327,14 @@ const globalStyles = {
 
     urlbarForm: {
       height: '25px'
+    },
+
+    navigationButtonContainer: {
+      marginRight: '6px',
+
+      // cf: topLevelStartButtonContainer on navigator.js
+      // globalStyles.navigationBar.urlbarForm.height + 2px
+      width: 'calc(25px + 2px)'
     }
   }
 }
diff --git a/less/button.less b/less/button.less
index 2a5c73dcde1..b0b07907e3a 100644
--- a/less/button.less
+++ b/less/button.less
@@ -17,12 +17,6 @@
   white-space: nowrap;
 }
 
-span.buttonSeparator {
-  width: 1px;
-  border-left: 1px solid #e2e2e2;
-  margin: 4px 3px 4px 3px;
-}
-
 .menuButton {
   background-color: @buttonColor;
   display: inline-block;
diff --git a/less/forms.less b/less/forms.less
index 67a3d158889..87abe8060e0 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -62,7 +62,7 @@ select {
   text-overflow: ellipsis;
 }
 
-#navigator {
+#navigationBar {
   .urlBarSuggestions {
     .flyoutDialog;
     color: @chromeText;
diff --git a/less/navigationBar.less b/less/navigationBar.less
index f4696c419ea..6fb85dec939 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -18,7 +18,7 @@
 // with the window buttons to close/maximize/minimize the window.
 .platform--darwin .navigatorWrapper .topLevelStartButtons {
 
-  // Since we want to keep the navigator centered, we need to calculate the
+  // Since we want to keep the navigationBar centered, we need to calculate the
   // difference between the width of the left box and the width of the right box.
   @centerOffset: @navbarLeftMarginDarwin + 2 * (@navbarButtonWidth + @navbarButtonSpacing) // width area on the left
                  - (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);
@@ -335,7 +335,7 @@
 }
 
 // Styles had to be reworked to properly position the new caption buttons for Windows
-.navbarCaptionButtonContainer {
+.navigator {
   display: flex;
   //border-bottom: 1px solid #bbb;
 
@@ -412,11 +412,11 @@
 }
 
 // Here I grouped the rules to keep the layout of the top bar consistent.
-// The tricky part is to keep the title in `#navigator` centered when the
+// The tricky part is to keep the title in `#navigationBar` centered when the
 // box on its left has different size than the one on the right.
 // This is achieved by the local variable `@centerOffset`.
 .navigatorWrapper {
-  // Since we want to keep the navigator centered, we need to calculate the
+  // Since we want to keep the navigationBar centered, we need to calculate the
   // difference between the width of the left box and the width of the right box.
   @centerOffset: 2 * (@navbarButtonWidth + @navbarButtonSpacing) // width area on the left
                  - (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);
@@ -424,7 +424,7 @@
   @rightMargin: @navbarLeftMarginDarwin / 2;
 
   // Navigation bar at the center
-  #navigator {
+  #navigationBar {
     &.titleMode {
       padding-right: @centerOffset;
 
@@ -466,7 +466,7 @@
   }
 }
 
-#navigator {
+#navigationBar {
 
   // #6253 #6680
   > * {
diff --git a/less/variables.less b/less/variables.less
index 1773061bc94..213c7f1bcda 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -35,7 +35,6 @@
 @menuSelectionColor: #2F7AFB;
 @errorTextColor: #999;
 
-@navigatorHeight: 48px;
 @defaultSpacing: 12px;
 @progressBarColor: #3498DB;
 @defaultFontSize: 13px;
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index 0eb47cc58c4..1698fba6ba9 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -9,7 +9,7 @@ module.exports = {
   activeTabFavicon: '[data-test-active-tab] [data-test-favicon]',
   pinnedTabsTabs: '.pinnedTabs [data-test-id="tab"]',
   tabsTabs: '.tabs [data-test-id="tab"]',
-  navigator: '#navigator',
+  navigator: '[data-test-id="navigationBar"]',
   navigatorLoadTime: '[data-test-id="loadTime"]',
   newFrameButton: '.tabs .newFrameButton',
   tabPage: '.tabPage',