From afbe9ebe01cd7b75da95a9d6abdef09413b05441 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@gmail.com>
Date: Mon, 3 Jul 2017 22:29:41 +0900
Subject: [PATCH] Refactor LongPressButton (reloadButton, backButton,
 forwardButton)

---
 .../components/common/longPressButton.js      | 34 +++++++++++++++++--
 .../navigation/buttons/reloadButton.js        | 34 +++++--------------
 .../components/navigation/navigator.js        | 26 +++++++-------
 3 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/app/renderer/components/common/longPressButton.js b/app/renderer/components/common/longPressButton.js
index 3b3d3df1a2f..710244b6ab3 100644
--- a/app/renderer/components/common/longPressButton.js
+++ b/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
diff --git a/app/renderer/components/navigation/buttons/reloadButton.js b/app/renderer/components/navigation/buttons/reloadButton.js
index b9a99515438..cdd3810ba69 100644
--- a/app/renderer/components/navigation/buttons/reloadButton.js
+++ b/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'
diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
index 65d7e0ebe38..778d50ca586 100644
--- a/app/renderer/components/navigation/navigator.js
+++ b/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}