From 2d649990b7185cadb6f76db06202a3ab58d51b5e Mon Sep 17 00:00:00 2001
From: Cezar Augusto <cezaraugusto@outlook.it>
Date: Thu, 20 Jul 2017 00:51:46 +0900
Subject: [PATCH] Add navigationBarButtonContainer etc

Closes #9846
Addresses #9283

Full changelog:
https://github.com/brave/browser-laptop/commit/0d5d4fd84a8456ddf5029da433b929e90abfaca1
https://github.com/brave/browser-laptop/commit/ab59b147810ad98a13744bc11817d83e5310ac5b
---
 .../navigation/buttons/bookmarkButton.js      | 131 ++++++++++++
 .../navigation/buttons/homeButton.js          |  95 +++++++++
 .../buttons/navigationBarButtonContainer.js   |  70 +++++++
 .../navigation/buttons/reloadButton.js        |  98 +++++++++
 .../navigation/buttons/stopButton.js          |  56 +++++
 .../components/navigation/homeButton.js       |  82 --------
 .../components/navigation/navigationBar.js    | 191 +++++-------------
 .../components/styles/commonStyles.js         |  35 ----
 8 files changed, 495 insertions(+), 263 deletions(-)
 create mode 100644 app/renderer/components/navigation/buttons/bookmarkButton.js
 create mode 100644 app/renderer/components/navigation/buttons/homeButton.js
 create mode 100644 app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
 create mode 100644 app/renderer/components/navigation/buttons/reloadButton.js
 create mode 100644 app/renderer/components/navigation/buttons/stopButton.js
 delete mode 100644 app/renderer/components/navigation/homeButton.js

diff --git a/app/renderer/components/navigation/buttons/bookmarkButton.js b/app/renderer/components/navigation/buttons/bookmarkButton.js
new file mode 100644
index 00000000000..93ab551c29b
--- /dev/null
+++ b/app/renderer/components/navigation/buttons/bookmarkButton.js
@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+const ipc = require('electron').ipcRenderer
+
+// Components
+const ReduxComponent = require('../../reduxComponent')
+
+// Actions
+const windowActions = require('../../../../../js/actions/windowActions')
+
+// Constants
+const siteTags = require('../../../../../js/constants/siteTags')
+const messages = require('../../../../../js/constants/messages')
+const settings = require('../../../../../js/constants/settings')
+
+// State
+const tabState = require('../../../../common/state/tabState')
+const frameStateUtil = require('../../../../../js/state/frameStateUtil')
+
+// Store
+const windowStore = require('../../../../../js/stores/windowStore')
+
+// Utils
+const cx = require('../../../../../js/lib/classSet')
+const siteUtil = require('../../../../../js/state/siteUtil')
+const UrlUtil = require('../../../../../js/lib/urlutil')
+const {getSetting} = require('../../../../../js/settings')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+
+const bookmarkButtonIcon = require('../../../../../img/toolbar/bookmark_btn.svg')
+const bookmarkedButtonIcon = require('../../../../../img/toolbar/bookmark_marked.svg')
+
+class BookmarkButton extends React.Component {
+  constructor (props) {
+    super(props)
+    this.onToggleBookmark = this.onToggleBookmark.bind(this)
+  }
+
+  get bookmarked () {
+    return this.props.activeFrameKey !== undefined && this.props.bookmarked
+  }
+
+  get activeFrame () {
+    return windowStore.getFrame(this.props.activeFrameKey)
+  }
+
+  onToggleBookmark () {
+    const editing = this.bookmarked
+    // show the AddEditBookmarkHanger control; saving/deleting takes place there
+    let siteDetail = siteUtil.getDetailFromFrame(
+      this.activeFrame,
+      siteTags.BOOKMARK
+    )
+    const key = siteUtil.getSiteKey(siteDetail)
+
+    if (key !== null) {
+      siteDetail = siteDetail.set(
+        'parentFolderId',
+        this.props.sites.getIn([key, 'parentFolderId'])
+      )
+      siteDetail = siteDetail.set(
+        'customTitle',
+        this.props.sites.getIn([key, 'customTitle'])
+      )
+    }
+    siteDetail = siteDetail.set(
+      'location',
+      UrlUtil.getLocationIfPDF(siteDetail.get('location'))
+    )
+    windowActions.setBookmarkDetail(siteDetail, siteDetail, null, editing, true)
+  }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+    const activeFrameKey = activeFrame.get('key')
+    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
+    const activeTab = tabState.getByTabId(state, activeTabId)
+
+    const props = {}
+    props.activeFrameKey = activeFrameKey
+    props.bookmarked = activeTab && activeTab.get('bookmarked')
+    props.sites = state.get('sites')
+
+    return props
+  }
+
+  componentDidMount () {
+    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
+    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
+  }
+
+  render () {
+    return (
+      <button
+        className={cx({
+          // TODO: check if iconOnly solves this and if not
+          // find a way to remove cx cos cx is evooool :P
+          normalizeButton: true,
+          withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
+          [css(styles.bookmark__button, this.bookmarked && styles.bookmark__button_remove)]: true
+        })}
+        data-l10n-id={
+          this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'
+        }
+        data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
+        onClick={this.onToggleBookmark}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  bookmark__button: {
+    background: `url(${bookmarkButtonIcon}) center no-repeat`,
+    backgroundSize: '14px 14px',
+    width: '100%',
+    height: '100%'
+  },
+
+  bookmark__button_remove: {
+    background: `url(${bookmarkedButtonIcon}) center no-repeat`
+  }
+})
+
+module.exports = ReduxComponent.connect(BookmarkButton)
diff --git a/app/renderer/components/navigation/buttons/homeButton.js b/app/renderer/components/navigation/buttons/homeButton.js
new file mode 100644
index 00000000000..b4267b65827
--- /dev/null
+++ b/app/renderer/components/navigation/buttons/homeButton.js
@@ -0,0 +1,95 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+
+// Components
+const ReduxComponent = require('../../reduxComponent')
+
+// Actions
+const appActions = require('../../../../../js/actions/appActions')
+
+// Constants
+const settings = require('../../../../../js/constants/settings')
+
+// State
+const tabState = require('../../../../common/state/tabState')
+const frameStateUtil = require('../../../../../js/state/frameStateUtil')
+
+// Utils
+const cx = require('../../../../../js/lib/classSet')
+const eventUtil = require('../../../../../js/lib/eventUtil')
+const {getSetting} = require('../../../../../js/settings')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../styles/global')
+
+const homeButtonIcon = require('../../../../../img/toolbar/home_btn.svg')
+
+class HomeButton extends React.Component {
+  constructor (props) {
+    super(props)
+    this.onHome = this.onHome.bind(this)
+  }
+
+  onHome (e) {
+    getSetting(settings.HOMEPAGE).split('|')
+      .forEach((homepage, i) => {
+        if (i === 0 && !eventUtil.isForSecondaryAction(e)) {
+          appActions.loadURLRequested(this.props.activeTabId, homepage)
+        } else {
+          appActions.createTabRequested({
+            url: homepage,
+            active: false
+          })
+        }
+      })
+  }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
+
+    const props = {}
+
+    props.activeTabId = activeTabId
+
+    return props
+  }
+
+  render () {
+    return (
+      <button className={cx({
+        // TODO: check if iconOnly solves this and if not
+        // find a way to remove cx cos cx is evooool :P
+        normalizeButton: true,
+        [css(styles.navigationButton, styles.navigationButton_home)]: true
+      })}
+        data-test-id='homeButton'
+        data-l10n-id='homeButton'
+        onClick={this.onHome}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  navigationButton: {
+    backgroundColor: globalStyles.color.buttonColor,
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+    margin: 0,
+    padding: 0
+  },
+
+  navigationButton_home: {
+    background: `url(${homeButtonIcon}) center no-repeat`,
+    backgroundSize: '16px 16px'
+  }
+})
+
+module.exports = ReduxComponent.connect(HomeButton)
diff --git a/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js b/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
new file mode 100644
index 00000000000..b885fcdf390
--- /dev/null
+++ b/app/renderer/components/navigation/buttons/navigationBarButtonContainer.js
@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../styles/global')
+
+// TODO: Check if stateless components can benefit from reduxComponent
+// by setting ownProps to stateless props.
+class NavigationBarButtonContainer extends React.Component {
+  render () {
+    return (
+      <div className={css(
+        this.props.isBoxed && styles.boxed,
+        this.props.isNested && styles.nestedContainer,
+        this.props.isStandalone && styles.standaloneContainer,
+        this.props.onNavigationBarChrome && styles.chromeContainer,
+
+        // BEM style class name unique for each component
+        this.props.containerFor
+      )}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  // #9283
+  // Create 25x25 squares and place the buttons at the center of each container
+  // Used for bookmarkButtonContainer, PublisherToggle, noScriptInfo, and UrlBarIcon.
+  boxed: {
+    boxSizing: 'border-box',
+    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,
+    WebkitAppRegion: 'no-drag'
+  },
+
+  // Add border to the bookmark button and publisher button only
+  nestedContainer: {
+    border: `1px solid ${globalStyles.color.urlBarOutline}`,
+    borderRadius: globalStyles.radius.borderRadiusURL
+  },
+
+  // Used for stopButton, reloadButton, and homeButton on navigationBar.js
+  // and backButton and forwardButton on navigator.js
+  standaloneContainer: {
+    display: 'inline-block',
+    borderRadius: globalStyles.radius.borderRadiusNavigationButton,
+    height: globalStyles.navigationBar.urlbarForm.height,
+    marginRight: globalStyles.navigationBar.navigationButtonContainer.marginRight,
+
+    ':hover': {
+      background: '#fff',
+      boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.15)'
+    }
+  },
+
+  chromeContainer: {
+    width: globalStyles.navigationBar.navigationButtonContainer.width
+  }
+})
+
+module.exports = NavigationBarButtonContainer
diff --git a/app/renderer/components/navigation/buttons/reloadButton.js b/app/renderer/components/navigation/buttons/reloadButton.js
new file mode 100644
index 00000000000..b9a99515438
--- /dev/null
+++ b/app/renderer/components/navigation/buttons/reloadButton.js
@@ -0,0 +1,98 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+const ipc = require('electron').ipcRenderer
+
+// Components
+const ReduxComponent = require('../../reduxComponent')
+const LongPressButton = require('../../common/longPressButton')
+
+// Actions
+const appActions = require('../../../../../js/actions/appActions')
+
+// Constants
+const messages = require('../../../../../js/constants/messages')
+
+// State
+const tabState = require('../../../../common/state/tabState')
+const frameStateUtil = require('../../../../../js/state/frameStateUtil')
+
+// Utils
+const cx = require('../../../../../js/lib/classSet')
+const eventUtil = require('../../../../../js/lib/eventUtil')
+const contextMenus = require('../../../../../js/contextMenus')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+
+const reloadButtonIcon = require('../../../../../img/toolbar/reload_btn.svg')
+
+class ReloadButton extends React.Component {
+  constructor (props) {
+    super(props)
+    this.onReload = this.onReload.bind(this)
+    this.onReloadLongPress = this.onReloadLongPress.bind(this)
+  }
+
+  onReload (e) {
+    if (eventUtil.isForSecondaryAction(e)) {
+      appActions.tabCloned(this.props.activeTabId, {active: !!e.shiftKey})
+    } else {
+      ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_RELOAD)
+    }
+  }
+
+  onReloadLongPress (target) {
+    contextMenus.onReloadContextMenu(target)
+  }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
+
+    const props = {}
+
+    props.activeTabId = activeTabId
+
+    return props
+  }
+
+  render () {
+    // BEM Level: navigationBar__buttonContainer
+    return (
+      // TODO: check if iconOnly solves this and if not
+      // find a way to remove cx cos cx is evooool :P
+      <LongPressButton className={cx({
+        normalizeButton: true,
+        [css(styles.navigationButton, styles.navigationButton_reload)]: true
+      })}
+        l10nId='reloadButton'
+        testId='reloadButton'
+        onClick={this.onReload}
+        onLongPress={this.onReloadLongPress}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  navigationButton: {
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L584-L585
+    margin: 0,
+    padding: 0
+  },
+
+  navigationButton_reload: {
+    background: `url(${reloadButtonIcon}) center no-repeat`,
+    backgroundSize: '13px 13px'
+  }
+})
+
+module.exports = ReduxComponent.connect(ReloadButton)
diff --git a/app/renderer/components/navigation/buttons/stopButton.js b/app/renderer/components/navigation/buttons/stopButton.js
new file mode 100644
index 00000000000..1868bf15513
--- /dev/null
+++ b/app/renderer/components/navigation/buttons/stopButton.js
@@ -0,0 +1,56 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+
+// Utils
+const cx = require('../../../../../js/lib/classSet')
+
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../styles/global')
+
+const stopLoadingButtonIcon = require('../../../../../img/toolbar/stoploading_btn.svg')
+
+class StopButton extends React.Component {
+  render () {
+    return (
+      <button className={cx({
+        // TODO: check if iconOnly solves this and if not
+        // find a way to remove cx cos cx is evooool :P
+        normalizeButton: true,
+        [css(styles.navigationButton, styles.navigationButton_stop)]: true
+      })}
+        data-l10n-id='stopButton'
+        onClick={
+          /*
+          TODO: check if this is ok to ship as-is.
+          This is likely not the best way given it is
+          expecting the property from parent component but this
+          was a quick workaround to avoid dupping code in both navigationbar
+          and this component.
+          */
+          this.props.onStop
+        }
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  navigationButton: {
+    backgroundColor: globalStyles.color.buttonColor,
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+    margin: 0,
+    padding: 0
+  },
+
+  navigationButton_stop: {
+    background: `url(${stopLoadingButtonIcon}) center no-repeat`,
+    backgroundSize: '11px 11px'
+  }
+})
+
+module.exports = StopButton
diff --git a/app/renderer/components/navigation/homeButton.js b/app/renderer/components/navigation/homeButton.js
deleted file mode 100644
index 852a76e14a4..00000000000
--- a/app/renderer/components/navigation/homeButton.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-const React = require('react')
-
-// Components
-const ImmutableComponent = require('../immutableComponent')
-const {NormalizedButton} = require('../common/browserButton')
-
-// Actions
-const appActions = require('../../../../js/actions/appActions')
-
-// Constants
-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)
-    this.onHome = this.onHome.bind(this)
-  }
-
-  onHome (e) {
-    if (e.button === 2) {
-      return
-    }
-
-    getSetting(settings.HOMEPAGE).split('|')
-      .forEach((homepage, i) => {
-        if (i === 0 && !eventUtil.isForSecondaryAction(e)) {
-          appActions.loadURLRequested(this.props.activeTabId, homepage)
-        } else {
-          appActions.createTabRequested({
-            url: homepage,
-            active: false
-          })
-        }
-      })
-  }
-
-  // BEM Level: navigationBar__buttonContainer
-  render () {
-    return <NormalizedButton custom={[
-      styles.navigationButton,
-      styles.navigationButton_home
-    ]}
-      data-test-id='homeButton'
-      data-l10n-id='homeButton'
-      ref={(node) => { this.homeButton = node }}
-      onClick={this.onHome}
-    />
-  }
-}
-
-const styles = StyleSheet.create({
-  navigationButton: {
-    display: 'inline-block',
-    width: '100%',
-    height: '100%',
-
-    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L584-L585
-    margin: 0,
-    padding: 0
-  },
-
-  navigationButton_home: {
-    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 dda1f352d84..dc338536c47 100644
--- a/app/renderer/components/navigation/navigationBar.js
+++ b/app/renderer/components/navigation/navigationBar.js
@@ -10,14 +10,17 @@ const ipc = require('electron').ipcRenderer
 const ReduxComponent = require('../reduxComponent')
 const UrlBar = require('./urlBar')
 const AddEditBookmarkHanger = require('../bookmarks/addEditBookmarkHanger')
+const NavigationBarButtonContainer = require('./buttons/navigationBarButtonContainer')
+
+// Components -> buttons
+const StopButton = require('./buttons/stopButton')
+const ReloadButton = require('./buttons/reloadButton')
+const HomeButton = require('./buttons/homeButton')
+const BookmarkButton = require('./buttons/bookmarkButton')
 const PublisherToggle = require('./publisherToggle')
-const LongPressButton = require('../common/longPressButton')
-const HomeButton = require('./homeButton')
-const {NormalizedButton} = require('../common/browserButton')
 
 // Actions
 const windowActions = require('../../../../js/actions/windowActions')
-const appActions = require('../../../../js/actions/appActions')
 
 // Constants
 const messages = require('../../../../js/constants/messages')
@@ -25,6 +28,7 @@ const settings = require('../../../../js/constants/settings')
 
 // State
 const tabState = require('../../../common/state/tabState')
+const menuBarState = require('../../../common/state/menuBarState')
 const publisherState = require('../../../common/lib/publisherUtil')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
@@ -32,50 +36,17 @@ const frameStateUtil = require('../../../../js/state/frameStateUtil')
 const cx = require('../../../../js/lib/classSet')
 const {getBaseUrl} = require('../../../../js/lib/appUrlUtil')
 const siteUtil = require('../../../../js/state/siteUtil')
-const eventUtil = require('../../../../js/lib/eventUtil')
 const {getSetting} = require('../../../../js/settings')
-const contextMenus = require('../../../../js/contextMenus')
 const {isDarwin} = require('../../../common/lib/platformUtil')
 const {isFullScreen} = require('../../currentWindow')
 
 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) {
     super(props)
-    this.onToggleBookmark = this.onToggleBookmark.bind(this)
     this.onStop = this.onStop.bind(this)
-    this.onReload = this.onReload.bind(this)
-    this.onReloadLongPress = this.onReloadLongPress.bind(this)
-  }
-
-  onToggleBookmark () {
-    const editing = this.props.isBookmarked
-
-    if (editing) {
-      windowActions.editBookmark(true, this.props.bookmarkKey)
-    } else {
-      windowActions.onBookmarkAdded(true, this.props.bookmarkKey)
-    }
-  }
-
-  onReload (e) {
-    if (eventUtil.isForSecondaryAction(e)) {
-      appActions.tabCloned(this.props.activeTabId, {active: !!e.shiftKey})
-    } else {
-      ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_RELOAD)
-    }
-  }
-
-  onReloadLongPress (target) {
-    contextMenus.onReloadContextMenu(target)
   }
 
   onStop () {
@@ -84,54 +55,6 @@ class NavigationBar extends React.Component {
     windowActions.onStop(this.props.isFocused, this.props.shouldRenderSuggestions)
   }
 
-  get bookmarked () {
-    return this.props.activeFrameKey !== undefined &&
-      this.props.bookmarked
-  }
-
-  // BEM Level: navigationBar__buttonContainer
-  get reloadButton () {
-    return <LongPressButton className={cx({
-      normalizeButton: true,
-      [css(styles.navigationButton, styles.navigationButton_reload)]: true
-    })}
-      l10nId='reloadButton'
-      testId='reloadButton'
-      onClick={this.onReload}
-      onLongPress={this.onReloadLongPress}
-    />
-  }
-
-  // BEM Level: navigationBar__buttonContainer
-  get stopButton () {
-    return <NormalizedButton custom={[
-      styles.navigationButton,
-      styles.navigationButton_stop
-    ]}
-      l10nid='stopButton'
-      onClick={this.onStop}
-    />
-  }
-
-  // BEM Level: navigationBar
-  get bookmarkButtonContainer () {
-    return <span className={css(
-      commonStyles.rectangleContainer,
-      commonStyles.rectangleContainer_outsideOfurlbarForm,
-      styles.navigationBar__buttonContainer_bookmark
-    )}>
-      <button className={cx({
-        normalizeButton: true,
-        withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
-        [css(styles.navigationBar__buttonContainer_bookmark__button, this.bookmarked && styles.navigationBar__buttonContainer_bookmark__button_remove)]: true
-      })}
-        data-l10n-id={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
-        data-test-id={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
-        onClick={this.onToggleBookmark}
-      />
-    </span>
-  }
-
   componentDidMount () {
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
     ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
@@ -173,7 +96,7 @@ class NavigationBar extends React.Component {
     props.titleMode = titleMode
     props.isBookmarked = activeFrameKey !== undefined &&
       activeTab && activeTab.get('bookmarked')
-    props.isWideUrlBarEnabled = getSetting(settings.WIDE_URL_BAR)
+    props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR)
     props.showBookmarkHanger = bookmarkDetail.get('isBookmarkHanger')
     props.isLoading = loading
     props.showPublisherToggle = publisherState.shouldShowAddPublisherButton(state, location, publisherId)
@@ -186,6 +109,15 @@ class NavigationBar extends React.Component {
     props.bookmarkKey = siteUtil.getSiteKey(activeFrame)
     props.showHomeButton = !props.titleMode && getSetting(settings.SHOW_HOME_BUTTON)
 
+    props.location = location
+    props.isDarwin = isDarwin()
+    props.isFullScreen = isFullScreen()
+    props.bookmarkDetail = bookmarkDetail
+    props.menubarVisible = menuBarState.isMenuBarVisible(currentWindow)
+    props.siteSettings = state.get('siteSettings')
+    props.synopsis = state.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map()
+    props.locationInfo = state.get('locationInfo')
+
     return props
   }
 
@@ -199,7 +131,7 @@ class NavigationBar extends React.Component {
       data-frame-key={this.props.activeFrameKey}
       className={cx({
         titleMode: this.props.titleMode,
-        [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
+        [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
@@ -207,32 +139,36 @@ class NavigationBar extends React.Component {
         : null
       }
       {
-        this.props.titleMode
-        ? null
-        : <span className={css(
-            commonStyles.navbarButtonContainer,
-            styles.navigationBar__buttonContainer,
-          )}>
-          {
-            this.props.isLoading
-            ? this.stopButton
-            : this.reloadButton
-          }
-        </span>
+        !this.props.titleMode
+        ? (
+          <NavigationBarButtonContainer isStandalone onNavigationBarChrome>
+            {
+              this.props.isLoading
+              ? <StopButton onStop={this.onStop} />
+              : <ReloadButton />
+            }
+          </NavigationBarButtonContainer>
+        )
+        : null
       }
       {
         this.props.showHomeButton
-        ? <span className={css(
-            commonStyles.navbarButtonContainer,
-            styles.navigationBar__buttonContainer,
-          )}>
-          <HomeButton activeTabId={this.props.activeTabId} />
-        </span>
+        ? (
+          <NavigationBarButtonContainer isStandalone onNavigationBarChrome>
+            <HomeButton />
+          </NavigationBarButtonContainer>
+        )
         : null
       }
       {
         !this.props.titleMode
-        ? this.bookmarkButtonContainer
+        ? (
+          <NavigationBarButtonContainer isSquare isNested
+            containerFor={styles.navigationBar__urlBarStart}
+          >
+            <BookmarkButton />
+          </NavigationBarButtonContainer>
+          )
         : null
       }
       <UrlBar titleMode={this.props.titleMode} />
@@ -245,10 +181,7 @@ class NavigationBar extends React.Component {
   }
 }
 
-const rightMargin = `calc(${globalStyles.spacing.navbarLeftMarginDarwin} / 2)`
-
 const styles = StyleSheet.create({
-
   navigationBar: {
     boxSizing: 'border-box',
     display: 'flex',
@@ -258,7 +191,7 @@ const styles = StyleSheet.create({
     fontSize: '20px',
     minWidth: '0%', // allow the navigationBar to shrink
     maxWidth: '900px',
-    marginRight: rightMargin,
+    marginRight: `calc(${globalStyles.spacing.navbarLeftMarginDarwin} / 2)`,
     padding: 0,
     position: 'relative',
     userSelect: 'none',
@@ -279,45 +212,11 @@ const styles = StyleSheet.create({
     justifyContent: 'initial'
   },
 
-  navigationBar__buttonContainer: {
-    width: globalStyles.navigationBar.navigationButtonContainer.width
-  },
-
-  navigationButton: {
-    display: 'inline-block',
-    width: '100%',
-    height: '100%',
-
-    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L584-L585
-    margin: 0,
-    padding: 0
-  },
-
-  navigationButton_stop: {
-    background: `url(${stopLoadingButton}) center no-repeat`,
-    backgroundSize: '11px 11px'
-  },
-
-  navigationButton_reload: {
-    background: `url(${reloadButton}) center no-repeat`,
-    backgroundSize: '13px 13px'
-  },
-
-  navigationBar__buttonContainer_bookmark: {
+  // Applies for the first urlBar nested button
+  navigationBar__urlBarStart: {
     borderRight: 'none',
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0
-  },
-
-  navigationBar__buttonContainer_bookmark__button: {
-    background: `url(${bookmarkButton}) center no-repeat`,
-    backgroundSize: '14px 14px',
-    width: '100%',
-    height: '100%'
-  },
-
-  navigationBar__buttonContainer_bookmark__button_remove: {
-    background: `url(${bookmarkedButton}) center no-repeat`
   }
 })
 
diff --git a/app/renderer/components/styles/commonStyles.js b/app/renderer/components/styles/commonStyles.js
index 896000a0494..0ffa4b810fa 100644
--- a/app/renderer/components/styles/commonStyles.js
+++ b/app/renderer/components/styles/commonStyles.js
@@ -198,41 +198,6 @@ 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
-  // Used for bookmarkButtonContainer, PublisherToggle, noScriptInfo, and UrlBarIcon.
-  rectangleContainer: {
-    boxSizing: 'border-box',
-    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,
-    WebkitAppRegion: 'no-drag'
-  },
-
-  // Add border to the bookmark button and publisher button only
-  rectangleContainer_outsideOfurlbarForm: {
-    border: `1px solid ${globalStyles.color.urlBarOutline}`,
-    borderRadius: globalStyles.radius.borderRadiusURL
-  },
-
-  navbarButtonContainer: {
-  // Used for stopButton, reloadButton, and homeButton on navigationBar.js
-  // and backButton and forwardButton on navigator.js
-    display: 'inline-block',
-    borderRadius: globalStyles.radius.borderRadiusNavigationButton,
-    height: globalStyles.navigationBar.urlbarForm.height,
-    marginRight: globalStyles.navigationBar.navigationButtonContainer.marginRight,
-
-    ':hover': {
-      background: '#fff',
-      boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.15)'
-    }
   }
 })