Refactor LongPressButton (reloadButton, backButton, forwardButton)

app/renderer/components/common/longPressButton.js

@@ -4,6 +4,8 @@
 
 const React = require('react')
 const ImmutableComponent = require('../immutableComponent')
+const cx = require('../../../../js/lib/classSet')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 class LongPressButton extends ImmutableComponent {
   constructor () {
@@ -78,16 +80,42 @@ class LongPressButton extends ImmutableComponent {
   }
 
   render () {
-    return <button data-l10n-id={this.props.l10nId}
+    return <button
+      // Add 'navigationButton' for the buttons on navigationBarWrapper
+      // eg. reloadButton, backButton and forwardButton
+      // TODO (Suguru): Refactor newFrameButton on tabs.js
+      className={cx({
+        [this.props.className]: this.props.className,
+        [css(styles.normalizedButton, this.props.navigationButton && styles.normalizedButton_navigationButton, this.props.custom)]: true
+      })}
+      data-l10n-id={this.props.l10nId}
       data-test-id={this.props.testId}
-      className={this.props.className}
       disabled={this.props.disabled}
       onClick={this.onClick}
       ref={(node) => { this.buttonNode = node }}
       onMouseDown={this.onMouseDown}
       onMouseUp={this.onMouseUp}
-      onMouseLeave={this.onMouseLeave} />
+      onMouseLeave={this.onMouseLeave}
+    />
   }
 }
 
+const styles = StyleSheet.create({
+  // See browserButton.js for the same properties
+  normalizedButton: {
+    background: 'none',
+    outline: 'none',
+    border: 'none',
+    margin: 0,
+    whiteSpace: 'nowrap'
+  },
+
+  normalizedButton_navigationButton: {
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+    padding: 0
+  }
+})
+
 module.exports = LongPressButton

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

@@ -21,11 +21,10 @@ 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 {StyleSheet} = require('aphrodite/no-important')
 
 const reloadButtonIcon = require('../../../../../img/toolbar/reload_btn.svg')
 
@@ -62,33 +61,18 @@ class ReloadButton extends React.Component {
 
   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}
-      />
-    )
+    return <LongPressButton
+      navigationButton
+      custom={styles.navigationButton_reload}
+      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'

app/renderer/components/navigation/navigator.js

@@ -198,12 +198,13 @@ class Navigator extends React.Component {
         ? 'navigationBackButtonDisabled'
         : 'navigationBackButton'
       }>
-      <LongPressButton className={cx({
-        normalizeButton: true,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_backButton)]: true,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_disabled)]: !this.props.canGoBack,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_enabled)]: this.props.canGoBack
-      })}
+      <LongPressButton
+        navigationButton
+        custom={[
+          styles.topLevelStartButtonContainer__topLevelStartButton_backButton,
+          !this.props.canGoBack && styles.topLevelStartButtonContainer__topLevelStartButton_disabled,
+          this.props.canGoBack && styles.topLevelStartButtonContainer__topLevelStartButton_enabled
+        ]}
         l10nId='backButton'
         testId={!this.props.canGoBack ? 'backButtonDisabled' : 'backButton'}
         disabled={!this.props.canGoBack}
@@ -231,12 +232,13 @@ class Navigator extends React.Component {
         ? 'navigationForwardButtonDisabled'
         : 'navigationForwardButton'
       }>
-      <LongPressButton className={cx({
-        normalizeButton: true,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_forwardButton)]: true,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_disabled)]: !this.props.canGoForward,
-        [css(styles.topLevelStartButtonContainer__topLevelStartButton_enabled)]: this.props.canGoForward
-      })}
+      <LongPressButton
+        navigationButton
+        custom={[
+          styles.topLevelStartButtonContainer__topLevelStartButton_forwardButton,
+          !this.props.canGoForward && styles.topLevelStartButtonContainer__topLevelStartButton_disabled,
+          this.props.canGoForward && styles.topLevelStartButtonContainer__topLevelStartButton_enabled
+        ]}
         l10nId='forwardButton'
         testId={!this.props.canGoForward ? 'forwardButtonDisabled' : 'forwardButton'}
         disabled={!this.props.canGoForward}