Add NormalizedButton to browserButton.js

Addresses #9283 - Replace stopButton, homeButton, publisherButton, and braveMenuButton
brave · Jul 19, 2017 · a37b77a · a37b77a
1 parent 9318cd5
commit a37b77a
Show file tree

Hide file tree

Showing 30 changed files with 105 additions and 81 deletions.
diff --git a/app/renderer/components/bookmarks/addEditBookmarkForm.js b/app/renderer/components/bookmarks/addEditBookmarkForm.js
@@ -7,7 +7,7 @@ const Immutable = require('immutable')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 const {
   CommonFormSection,
   CommonFormDropdown,

diff --git a/app/renderer/components/bookmarks/bookmarksToolbar.js b/app/renderer/components/bookmarks/bookmarksToolbar.js
@@ -9,7 +9,7 @@ const Immutable = require('immutable')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 const BookmarkToolbarButton = require('./bookmarkToolbarButton')
 
 // Actions

diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
@@ -78,6 +78,30 @@ class BrowserButton extends ImmutableComponent {
   }
 }
 
+class NormalizedButton extends ImmutableComponent {
+  render () {
+    return <button
+      disabled={this.props.disabled}
+      data-l10n-id={this.props.l10nId}
+      data-test-id={this.props.testId}
+      data-test2-id={this.props.test2Id}
+      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)}
+
+      // for publisherToggle.js
+      data-test-authorized={this.props.testAuthorized}
+      data-test-verified={this.props.testVerified}>
+      {
+        this.props.iconClass || this.props.label
+        ? <span className={this.props.iconClass}>{this.props.label}</span>
+        : null
+      }
+    </button>
+  }
+}
+
 const buttonSize = '25px'
 
 const styles = StyleSheet.create({
@@ -251,7 +275,20 @@ const styles = StyleSheet.create({
     pointerEvents: 'none',
     animation: 'none',
     opacity: 0.25
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/548e11b1c889332fadb379237555625ad2a3c845/less/button.less#L12-L18
+  normalizedButton: {
+    background: 'none',
+    outline: 'none',
+    border: 'none',
+    margin: 0,
+    userSelect: 'none',
+    whiteSpace: 'nowrap'
   }
 })
 
-module.exports = BrowserButton
+module.exports = {
+  BrowserButton,
+  NormalizedButton
+}
diff --git a/app/renderer/components/common/messageBox.js b/app/renderer/components/common/messageBox.js
@@ -9,7 +9,7 @@ const {StyleSheet, css} = require('aphrodite')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('./dialog')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 const SwitchControl = require('./switchControl')
 
 // Actions

diff --git a/app/renderer/components/download/downloadsBar.js b/app/renderer/components/download/downloadsBar.js
@@ -9,7 +9,7 @@ const Immutable = require('immutable')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Button = require('../common/button')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 const DownloadItem = require('./downloadItem')
 
 // Actions

diff --git a/app/renderer/components/main/braveryPanel.js b/app/renderer/components/main/braveryPanel.js
@@ -9,7 +9,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 const {BraveryPanelDropdown} = require('../common/dropdown')
 

diff --git a/app/renderer/components/main/checkDefaultBrowserDialog.js b/app/renderer/components/main/checkDefaultBrowserDialog.js
@@ -8,7 +8,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 const {
   CommonFormMedium,

diff --git a/app/renderer/components/main/findbar.js b/app/renderer/components/main/findbar.js
@@ -7,7 +7,7 @@ const Immutable = require('immutable')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
 
 // Constants

diff --git a/app/renderer/components/main/noScriptInfo.js b/app/renderer/components/main/noScriptInfo.js
@@ -10,7 +10,7 @@ const urlParse = require('../../../common/urlParse')
 const ReduxComponent = require('../reduxComponent')
 const ImmutableComponent = require('../immutableComponent')
 const Dialog = require('../common/dialog')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')

diff --git a/app/renderer/components/main/notificationItem.js b/app/renderer/components/main/notificationItem.js
@@ -9,7 +9,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 
 // Constants
 const messages = require('../../../../js/constants/messages')

diff --git a/app/renderer/components/main/updateBar.js b/app/renderer/components/main/updateBar.js
@@ -8,7 +8,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 // Components
 const ImmutableComponent = require('../immutableComponent')
 const ReduxComponent = require('../reduxComponent')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')

diff --git a/app/renderer/components/navigation/browserAction.js b/app/renderer/components/navigation/browserAction.js
@@ -10,7 +10,7 @@ const Immutable = require('immutable')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const BrowserButton = require('../common/browserButton')
+const {BrowserButton} = require('../common/browserButton')
 const BrowserActionBadge = require('./browserActionBadge')
 
 // State

diff --git a/app/renderer/components/navigation/homeButton.js b/app/renderer/components/navigation/homeButton.js
@@ -6,6 +6,7 @@ const React = require('react')
 
 // Components
 const ImmutableComponent = require('../immutableComponent')
+const {NormalizedButton} = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
@@ -29,14 +30,6 @@ class HomeButton extends ImmutableComponent {
     this.onHome = this.onHome.bind(this)
   }
 
-  componentDidMount () {
-    this.homeButton.addEventListener('auxclick', this.onHome)
-  }
-
-  componentWillUnmount () {
-    this.homeButton.removeEventListener('auxclick', this.onHome)
-  }
-
   onHome (e) {
     if (e.button === 2) {
       return
@@ -57,10 +50,10 @@ class HomeButton extends ImmutableComponent {
 
   // BEM Level: navigationBar__buttonContainer
   render () {
-    return <button className={cx({
-      normalizeButton: true,
-      [css(styles.navigationButton, styles.navigationButton_home)]: true
-    })}
+    return <NormalizedButton custom={[
+      styles.navigationButton,
+      styles.navigationButton_home
+    ]}
       data-test-id='homeButton'
       data-l10n-id='homeButton'
       ref={(node) => { this.homeButton = node }}
@@ -71,8 +64,6 @@ class HomeButton extends ImmutableComponent {
 
 const styles = StyleSheet.create({
   navigationButton: {
-    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L550-L553
-    backgroundColor: globalStyles.color.buttonColor,
     display: 'inline-block',
     width: '100%',
     height: '100%',

diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js
@@ -13,6 +13,7 @@ const AddEditBookmarkHanger = require('../bookmarks/addEditBookmarkHanger')
 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')
@@ -88,17 +89,6 @@ class NavigationBar extends React.Component {
       this.props.bookmarked
   }
 
-  // BEM Level: navigationBar__buttonContainer
-  get stopButton () {
-    return <button className={cx({
-      normalizeButton: true,
-      [css(styles.navigationButton, styles.navigationButton_stop)]: true
-    })}
-      data-l10n-id='stopButton'
-      onClick={this.onStop}
-    />
-  }
-
   // BEM Level: navigationBar__buttonContainer
   get reloadButton () {
     return <LongPressButton className={cx({
@@ -112,6 +102,17 @@ class NavigationBar extends React.Component {
     />
   }
 
+  // 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(
@@ -283,8 +284,6 @@ const styles = StyleSheet.create({
   },
 
   navigationButton: {
-    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L550-L553
-    backgroundColor: globalStyles.color.buttonColor,
     display: 'inline-block',
     width: '100%',
     height: '100%',

diff --git a/app/renderer/components/navigation/navigator.js b/app/renderer/components/navigation/navigator.js
@@ -17,7 +17,7 @@ const NavigationBar = require('./navigationBar')
 const LongPressButton = require('../common/longPressButton')
 const MenuBar = require('./menuBar')
 const WindowCaptionButtons = require('./windowCaptionButtons')
-const BrowserButton = require('../common/button')
+const {NormalizedButton} = require('../common/browserButton')
 const BrowserAction = require('./browserAction')
 
 // State
@@ -286,12 +286,12 @@ class Navigator extends React.Component {
 
   // BEM Level: navigator__menuBarAndNavigationBar__navigationBarWrapper__topLevelEndButtons__braveMenuButton
   get braveMenuButton () {
-    return <BrowserButton className={css(
+    return <NormalizedButton custom={[
       styles.braveMenuButton,
       !this.props.shieldsEnabled && styles.braveMenuButton_shieldsDisabled,
       this.props.shieldsDown && styles.braveMenuButton_shieldsDown,
       this.props.isCaptionButton && styles.braveMenuButton_leftOfCaptionButton
-    )}
+    ]}
       l10nId='braveMenu'
       testId={!this.props.shieldsEnabled ? 'braveMenuDisabled' : 'braveMenu'}
       test2Id={`shield-down-${this.props.shieldsDown}`}
@@ -506,17 +506,14 @@ const styles = StyleSheet.create({
   },
 
   braveMenuButton: {
-    backgroundImage: `-webkit-image-set(url(${braveButton1x}) 1x, url(${braveButton2x}) 2x, url(${braveButton3x}) 3x)`,
-    backgroundRepeat: 'no-repeat',
+    background: `-webkit-image-set(url(${braveButton1x}) 1x, url(${braveButton2x}) 2x, url(${braveButton3x}) 3x) no-repeat`,
     height: globalStyles.navigationBar.urlbarForm.height,
     width: globalStyles.spacing.navbarBraveButtonWidth,
     marginRight: globalStyles.spacing.navbarButtonSpacing,
-    userSelect: 'none',
-    position: 'relative',
     WebkitAppRegion: 'no-drag',
 
     ':hover': {
-      backgroundImage: `-webkit-image-set(url(${braveButtonHover1x}) 1x, url(${braveButtonHover2x}) 2x, url(${braveButtonHover3x}) 3x)`
+      background: `-webkit-image-set(url(${braveButtonHover1x}) 1x, url(${braveButtonHover2x}) 2x, url(${braveButtonHover3x}) 3x) no-repeat`
     }
   },
 

diff --git a/app/renderer/components/navigation/publisherToggle.js b/app/renderer/components/navigation/publisherToggle.js
@@ -8,6 +8,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
+const {NormalizedButton} = require('../common/browserButton')
 
 // Actions
 const appActions = require('../../../../js/actions/appActions')
@@ -16,7 +17,6 @@ const appActions = require('../../../../js/actions/appActions')
 const publisherState = require('../../../common/lib/publisherUtil')
 
 // Utils
-const cx = require('../../../../js/lib/classSet')
 const {getHostPattern} = require('../../../../js/lib/urlutil')
 const {getBaseUrl} = require('../../../../js/lib/appUrlUtil')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
@@ -68,23 +68,23 @@ class PublisherToggle extends React.Component {
     return props
   }
 
-  // TODO (Suguru): NormalizeButton
-  // ref: navigationBar__buttonContainer_bookmarkButtonContainer on navigationBar.js
   render () {
-    return <span
-      data-test-id='publisherButton'
-      data-test-authorized={this.props.isEnabledForPaymentsPublisher}
-      data-test-verified={this.props.isVerifiedPublisher}
-      className={css(
-        commonStyles.rectangleContainer,
-        commonStyles.rectangleContainer_outsideOfurlbarForm,
-        styles.publisherButtonContainer
-      )}>
-      <button className={cx({
-        normalizeButton: true,
-        [css((!this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundVerified, (this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundVerified, (!this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundUnverified, (this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundUnverified, styles.publisherButtonContainer__button)]: true
-      })}
-        data-l10n-id={this.l10nString}
+    return <span className={css(
+      commonStyles.rectangleContainer,
+      commonStyles.rectangleContainer_outsideOfurlbarForm,
+      styles.publisherButtonContainer
+    )}>
+      <NormalizedButton custom={[
+        (!this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundVerified,
+        (this.props.isEnabledForPaymentsPublisher && this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundVerified,
+        (!this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_noFundUnverified,
+        (this.props.isEnabledForPaymentsPublisher && !this.props.isVerifiedPublisher) && styles.publisherButtonContainer__button_fundUnverified,
+        styles.publisherButtonContainer__button
+      ]}
+        l10nId={this.l10nString}
+        testId='publisherButton'
+        testAuthorized={this.props.isEnabledForPaymentsPublisher}
+        testVerified={this.props.isVerifiedPublisher}
         onClick={this.onAuthorizePublisher}
       />
     </span>

diff --git a/app/renderer/components/preferences/payment/advancedSettings.js b/app/renderer/components/preferences/payment/advancedSettings.js
@@ -10,7 +10,7 @@ const {changeSetting} = require('../../../lib/settingsUtil')
 const appConfig = require('../../../../../js/constants/appConfig')
 
 // components
-const BrowserButton = require('../../common/browserButton')
+const {BrowserButton} = require('../../common/browserButton')
 const {SettingsList, SettingItem, SettingCheckbox} = require('../../common/settings')
 const {SettingDropdown} = require('../../common/dropdown')
 const ImmutableComponent = require('../../immutableComponent')

diff --git a/app/renderer/components/preferences/payment/bitcoinDashboard.js b/app/renderer/components/preferences/payment/bitcoinDashboard.js
@@ -6,7 +6,7 @@ const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
 
 // components
-const BrowserButton = require('../../common/browserButton')
+const {BrowserButton} = require('../../common/browserButton')
 const cx = require('../../../../../js/lib/classSet')
 const ModalOverlay = require('../../common/modalOverlay')
 const ImmutableComponent = require('../../immutableComponent')

diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
@@ -13,7 +13,7 @@ const {changeSetting} = require('../../../lib/settingsUtil')
 
 // components
 const ImmutableComponent = require('../../immutableComponent')
-const BrowserButton = require('../../common/browserButton')
+const {BrowserButton} = require('../../common/browserButton')
 const {FormTextbox} = require('../../common/textbox')
 const {FormDropdown} = require('../../common/dropdown')
 const {SettingsList, SettingItem} = require('../../common/settings')

diff --git a/app/renderer/components/preferences/payment/history.js b/app/renderer/components/preferences/payment/history.js
@@ -12,7 +12,7 @@ const {formattedTimeFromNow, formattedDateFromTimestamp} = require('../../../../
 const appUrlUtil = require('../../../../../js/lib/appUrlUtil')
 
 // components
-const BrowserButton = require('../../common/browserButton')
+const {BrowserButton} = require('../../common/browserButton')
 const ImmutableComponent = require('../../immutableComponent')
 
 // style

diff --git a/app/renderer/components/preferences/payment/ledgerBackup.js b/app/renderer/components/preferences/payment/ledgerBackup.js
@@ -7,7 +7,7 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 
 // components
 const ImmutableComponent = require('../../immutableComponent')
-const BrowserButton = require('../../common/browserButton')
+const {BrowserButton} = require('../../common/browserButton')
 
 // style
 const globalStyles = require('../../styles/global')