Refactor navigationBar (part 3)

Create components etc  -- navigator.js, navigationBar.js, urlBar.js etc

- navigator.js
  - topLevelEndButtons
  - navigationWrapper
  - counterBraveMenu
- navigationBar.js
  - bookmarkButtonContainer
  - publisherToggleContainer
- urlBar.js
  - titleBar
  - loadTimer
  - input
  - legend
  - noScriptInfo

Also:
- Refactor lionBadge
- Refactor publisherToggle
- replace topLevelEndButtons__braveMenuButton with braveMenuButton, adding the correct BEM level comment.
- Move extensionButtons before braveMenuButton
- Replace navigator__endButtons with commonStyles.navigator__buttonContainer (apply the same styles as bookmarkButtonContainer on navigationBar.js)
- Change the width and height of bookmarkButton and publisherToggle to '100%' (make the whole area inside the publisher toggle container clickable)

- Replace span + BrowserButton with a normal button on publisherToggle.js temporarily
- Move module.exports to the bottom

Test Plan: available on #9299 (comment)

app/renderer/components/navigation/navigationBar.js

@@ -161,6 +161,41 @@ class NavigationBar extends React.Component {
     />
   }
 
+  // BEM Level: navigator
+  get bookmarkButtonContainer () {
+    return <span className={css(
+      commonStyles.navigator__buttonContainer,
+      commonStyles.navigator__buttonContainer_outsideOfURLbar,
+      styles.navigator__buttonContainer_bookmarkButtonContainer
+    )}>
+      <button className={cx({
+        normalizeButton: true,
+        withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
+        [css(styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton, this.bookmarked && styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton)]: true
+      })}
+        data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+        data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
+        onClick={this.onToggleBookmark}
+      />
+    </span>
+  }
+
+  // BEM Level: navigator
+  get publisherToggleContainer () {
+    return <span className={css(
+      commonStyles.navigator__buttonContainer,
+      commonStyles.navigator__buttonContainer_outsideOfURLbar,
+      styles.navigator__buttonContainer_publisherToggleContainer
+    )}>
+      <PublisherToggle
+        location={this.props.location}
+        locationInfo={this.props.locationInfo}
+        siteSettings={this.props.siteSettings}
+        synopsis={this.props.synopsis}
+      />
+    </span>
+  }
+
   componentDidMount () {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
@@ -247,9 +282,8 @@ class NavigationBar extends React.Component {
         : null
       }
       {
-        this.props.titleMode
-        ? null
-        : <span className={css(
+        !this.props.titleMode
+        ? <span className={css(
             commonStyles.navigationButtonContainer,
             styles.navigator__navigationButtonContainer,
           )}>
@@ -259,6 +293,7 @@ class NavigationBar extends React.Component {
             : this.reloadButton
           }
         </span>
+        : null
       }
       {
         !this.props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
@@ -272,43 +307,18 @@ class NavigationBar extends React.Component {
       }
       {
         !this.props.titleMode
-        ? <span className={cx({
-          bookmarkButtonContainer: true,
-          [css(commonStyles.navigator__buttonContainer, commonStyles.navigator__buttonContainer_outsideOfURLbar, styles.navigator__buttonContainer_bookmarkButtonContainer)]: true
-        })}>
-          <button className={cx({
-            normalizeButton: true,
-            withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-            [css(styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton, this.bookmarked && styles.navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton)]: true
-          })}
-            data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-            data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
-            onClick={this.onToggleBookmark}
-          />
-        </span>
+        ? this.bookmarkButtonContainer
         : null
       }
       <UrlBar
         titleMode={this.props.titleMode}
         onStop={this.onStop}
         menubarVisible={this.props.menubarVisible}
-        />
+      />
       {
-        isSourceAboutUrl(this.props.location)
-        ? null
-        : <div className={css(
-          this.props.titleMode && styles.navigator__endButtons_titleMode,
-          !this.props.titleMode && styles.navigator__endButtons_notTitleMode
-        )}>
-          {
-            <PublisherToggle
-              location={this.props.location}
-              locationInfo={this.props.locationInfo}
-              siteSettings={this.props.siteSettings}
-              synopsis={this.props.synopsis}
-            />
-          }
-        </div>
+        !this.props.titleMode && !isSourceAboutUrl(this.props.location)
+        ? this.publisherToggleContainer
+        : null
       }
     </div>
   }
@@ -390,20 +400,18 @@ const styles = StyleSheet.create({
   navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton: {
     background: `url(${bookmarkButton}) center no-repeat`,
     backgroundSize: '14px 14px',
-    width: globalStyles.navigationBar.urlbarForm.height, // #6704
-    height: globalStyles.navigationBar.urlbarForm.height // #6704
+    width: '100%',
+    height: '100%'
   },
 
   navigator__buttonContainer_bookmarkButtonContainer__bookmarkButton_removeBookmarkButton: {
     background: `url(${bookmarkedButton}) center no-repeat`
   },
 
-  navigator__endButtons_titleMode: {
-    display: 'none'
-  },
-
-  navigator__endButtons_notTitleMode: {
-    display: 'flex'
+  navigator__buttonContainer_publisherToggleContainer: {
+    borderLeft: 'none',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
   }
 })