NormalizedButton for home, stop, and bookmark button

- Remove withHomeButton

app/renderer/components/common/browserButton.js

@@ -88,7 +88,14 @@ class NormalizedButton extends ImmutableComponent {
       data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
       data-button-value={this.props.dataButtonValue}
       onClick={this.props.onClick}
-      className={css(styles.normalizedButton, this.props.custom)}
+      className={css(
+        styles.normalizedButton,
+
+        // For homeButton, stopButton, and bookmarkButton
+        this.props.navigationButton && styles.normalizedButton_navigationButton,
+
+        this.props.custom
+      )}
 
       // for publisherToggle.js
       data-test-authorized={this.props.testAuthorized}
@@ -284,6 +291,15 @@ const styles = StyleSheet.create({
     border: 'none',
     margin: 0,
     whiteSpace: 'nowrap'
+  },
+
+  normalizedButton_navigationButton: {
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L585
+    padding: 0
   }
 })
 

app/renderer/components/navigation/buttons/bookmarkButton.js

@@ -8,14 +8,14 @@ const ipc = require('electron').ipcRenderer
 
 // Components
 const ReduxComponent = require('../../reduxComponent')
+const {NormalizedButton} = require('../../common/browserButton')
 
 // 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')
@@ -25,12 +25,10 @@ const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 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 {StyleSheet} = require('aphrodite/no-important')
 
 const bookmarkButtonIcon = require('../../../../../img/toolbar/bookmark_btn.svg')
 const bookmarkedButtonIcon = require('../../../../../img/toolbar/bookmark_marked.svg')
@@ -97,33 +95,26 @@ class BookmarkButton 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,
-          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'}
+      <NormalizedButton navigationButton
+        custom={[
+          styles.bookmarkButton,
+          this.bookmarked && styles.bookmarkButton_bookmarked
+        ]}
+        l10nId={this.bookmarked ? 'removeBookmarkButton' : 'addBookmarkButton'}
+        testId={this.bookmarked ? 'bookmarked' : 'notBookmarked'}
         onClick={this.onToggleBookmark}
       />
     )
   }
 }
 
 const styles = StyleSheet.create({
-  bookmark__button: {
+  bookmarkButton: {
     background: `url(${bookmarkButtonIcon}) center no-repeat`,
-    backgroundSize: '14px 14px',
-    width: '100%',
-    height: '100%'
+    backgroundSize: '14px 14px'
   },
 
-  bookmark__button_remove: {
+  bookmarkButton_bookmarked: {
     background: `url(${bookmarkedButtonIcon}) center no-repeat`
   }
 })

app/renderer/components/navigation/buttons/homeButton.js

@@ -60,10 +60,9 @@ class HomeButton extends React.Component {
 
   // BEM Level: navigationBar__buttonContainer
   render () {
-    return <NormalizedButton custom={[
-      styles.navigationButton,
-      styles.navigationButton_home
-    ]}
+    return <NormalizedButton
+      navigationButton
+      custom={styles.homeButton}
       testId='homeButton'
       l10nId='homeButton'
       onClick={this.onHome}
@@ -72,17 +71,7 @@ class HomeButton extends React.Component {
 }
 
 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: {
+  homeButton: {
     background: `url(${homeButtonIcon}) center no-repeat`,
     backgroundSize: '16px 16px'
   }

app/renderer/components/navigation/buttons/stopButton.js

@@ -11,10 +11,9 @@ const stopLoadingButtonIcon = require('../../../../../img/toolbar/stoploading_bt
 class StopButton extends React.Component {
   // BEM Level: navigationBar__buttonContainer
   render () {
-    return <NormalizedButton custom={[
-      styles.navigationButton,
-      styles.navigationButton_stop
-    ]}
+    return <NormalizedButton
+      navigationButton
+      custom={styles.stopButton}
       l10nid='stopButton'
       onClick={
         /*
@@ -31,17 +30,7 @@ class StopButton extends React.Component {
 }
 
 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_stop: {
+  stopButton: {
     background: `url(${stopLoadingButtonIcon}) center no-repeat`,
     backgroundSize: '11px 11px'
   }