Refactor navigationBar (part 1)

- Add styles.navigator
- Add reloadButton testId to .reloadButton
- Convert .navigatorWrapper
- Convert .navbarMenubarFlexContainer
- Convert .urlbarForm
- Convert .urlbarIconContainer
- Convert #titleBar
- Convert bookmarkButton and removeBookmarkButton with Aphrodite
- Convert 'navigationButton stopButton'
- Convert 'navigationButton reloadButton'
- Convert 'navigationButton homeButton'
- Convert .bookmarkButtonContainer
- Convert .topLevelEndButtons
- Convert .endButtons
- Rename .backforward to .topLevelStartButtons (as we have already had 'topLevelEndButtons' on the same level)
- Convert braveMenu

Also:
- Add a const 'globalStyles.navigationBar.urlbarForm.height'
- Add comments to navigation components about the buttons
- Remove 'margin: 0 7px 0 0' as no elements tagged with navigationButton need the margin-right
- Remove !important from navigator_wide
- Remove startButtons className
- Remove margin-left:2px and left:2px since the fa-unlock icon is always displayed at the center of the container
- Merge styles.addPublisherButtonContainer with commonStyles.navigator__buttonContainer
  - "commonStyles.navigator__buttonContainer" applies the same properties to both "styles.navigator__buttonContainer_addPublisherButtonContainer" and "navigator__buttonContainer_bookmarkButtonContainer" in the same way as coded on navigationBar.less
- Move urlbarForm_wide
- Remove .navigationButton and its style (as buttons have the inline-block property by default)
- Remove unnecessary div wrapping bookmarkButtonContainer
- Replace .urlbarForm.noBorderRadius with urlbarForm_isPublisherButtonEnabled
  - Since border-top-left-radius and border-bottom-right-radius have been set to '#navigator:not(.titleMode) .urlbarForm', setting the other 2 border-radius should make the code clear.
- Remove margin-left from navigatorWrapper__topLevelEndButtons (as margin is speficied with #nagivator)
- Remove a redundant wrapper, braveMenuContainer
- Replace Button with BrowserButton
- Update test ids

TODO: the classNames are too long and will be renamed later

Test Plan: available on #9299 (comment)

app/renderer/components/navigation/navigationBar.js

@@ -40,6 +40,14 @@ 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 homeButton = require('../../../../img/toolbar/home_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) {
@@ -185,7 +193,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.bookmarkDetail && this.props.bookmarkDetail.get('isBookmarkHanger')
@@ -203,46 +211,58 @@ class NavigationBar extends React.Component {
         ? null
         : this.props.loading
           ? <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>
       }
       {
         !this.props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
         ? <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'
-            onClick={this.onHome} />
+            onClick={this.onHome}
+          />
+        </span>
+        : null
+      }
+      {
+        !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
       }
-      <div className='startButtons'>
-        {
-          !this.props.titleMode
-          ? <span className='bookmarkButtonContainer'>
-            <button data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-              className={cx({
-                navigationButton: true,
-                bookmarkButton: true,
-                removeBookmarkButton: this.bookmarked,
-                withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-                normalizeButton: true
-              })}
-              onClick={this.onToggleBookmark} />
-          </span>
-          : null
-        }
-      </div>
       <UrlBar
         titleMode={this.props.titleMode}
         onStop={this.onStop}
@@ -251,7 +271,10 @@ class NavigationBar extends React.Component {
       {
         isSourceAboutUrl(this.props.location)
         ? null
-        : <div className='endButtons'>
+        : <div className={css(
+          this.props.titleMode && styles.navigator__endButtons_titleMode,
+          !this.props.titleMode && styles.navigator__endButtons_notTitleMode
+        )}>
           {
             <PublisherToggle
               location={this.props.location}
@@ -266,13 +289,83 @@ 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'
+  },
+
+  navigator__navigationButtonContainer__navigationButton_homeButton: {
+    background: `url(${homeButton}) center no-repeat`,
+    backgroundSize: `16px 16px`
+  },
+
+  // 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'
   }
 })
 

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 {
@@ -199,7 +199,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'>
@@ -208,13 +208,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={
@@ -259,7 +262,7 @@ class Navigator extends React.Component {
           <NavigationBar />
           <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,
@@ -271,35 +274,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' />
@@ -339,16 +341,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'
   }
 })