Refactor navigationBar with Aphrodite - master

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,

app/renderer/components/bookmarks/addEditBookmarkHanger.js

@@ -159,6 +159,20 @@ class AddEditBookmarkHanger extends React.Component {
   }
 }
 
+const navigationButtonContainerWidth = globalStyles.navigationBar.navigationButtonContainer.width
+const navigationButtonContainerMarginRight = globalStyles.navigationBar.navigationButtonContainer.marginRight
+const bookmarkButtonContainerWidth = globalStyles.navigationBar.urlbarForm.height
+
+// Add navigationButtonContainerMarginRight (6px)
+const navigationButtonWidth = `calc(${navigationButtonContainerWidth} + ${navigationButtonContainerMarginRight})`
+
+// Count the reload and stop button, adding the half width of the bookmark button container
+// 12px == arrowUp width
+const bookmarkHangerPosition = `calc(12px + ${navigationButtonWidth} + (${bookmarkButtonContainerWidth} / 2))`
+
+// Add another container width
+const bookmarkHangerPositionWithHomeButton = `calc(${bookmarkHangerPosition} + ${navigationButtonWidth})`
+
 const styles = StyleSheet.create({
   // Copied from commonForm.js
   commonFormSection: {
@@ -185,7 +199,7 @@ const styles = StyleSheet.create({
   },
   bookmarkHanger__arrowUp: {
     position: 'relative',
-    left: '54px',
+    left: bookmarkHangerPosition,
 
     '::after': {
       content: '""',
@@ -199,7 +213,7 @@ const styles = StyleSheet.create({
     }
   },
   bookmarkHanger__withHomeButton: {
-    left: '83px'
+    left: bookmarkHangerPositionWithHomeButton
   },
   bookmark__bottomWrapper: {
     display: 'flex',

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

app/renderer/components/common/browserButton.js

@@ -78,6 +78,37 @@ 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,
+
+        // For homeButton, stopButton, and bookmarkButton
+        this.props.navigationButton && styles.normalizedButton_navigationButton,
+
+        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({
@@ -178,13 +209,12 @@ const styles = StyleSheet.create({
     }
   },
 
+  // This should be included in navigationBarButtonContainer
   browserButton_extensionItem: {
-    WebkitAppRegion: 'no-drag',
     backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
     height: '17px',
-    margin: '4px 0 0 0',
-    opacity: '0.85',
-    backgroundRepeat: 'no-repeat'
+    opacity: '0.85'
   },
 
   browserButton_groupedItem: {
@@ -251,7 +281,29 @@ 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'
+  },
+
+  normalizedButton_navigationButton: {
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+
+    // cf: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L585
+    padding: 0
   }
 })
 
-module.exports = BrowserButton
+module.exports = {
+  BrowserButton,
+  NormalizedButton
+}

app/renderer/components/common/commonForm.js

@@ -164,7 +164,7 @@ const styles = StyleSheet.create({
     maxWidth: globalStyles.spacing.bookmarkHangerMaxWidth,
     height: 'initial', // #8634
 
-    // Cancel the inherited value from .navbarMenubarFlexContainer, which is 'nowrap'.
+    // Cancel the inherited value from navigator__menuBarAndNavigationBar on navigator.js, which is 'nowrap'.
     whiteSpace: 'normal'
   },
 

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/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

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

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')
 

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,

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

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')

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')

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')

app/renderer/components/navigation/browserAction.js

@@ -5,12 +5,13 @@
 const React = require('react')
 const electron = require('electron')
 const ipc = electron.ipcRenderer
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet} = require('aphrodite/no-important')
 const Immutable = require('immutable')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
-const BrowserButton = require('../common/browserButton')
+const NavigationBarButtonContainer = require('./buttons/navigationBarButtonContainer')
+const {BrowserButton} = require('../common/browserButton')
 const BrowserActionBadge = require('./browserActionBadge')
 
 // State
@@ -81,7 +82,10 @@ class BrowserAction extends React.Component {
 
   render () {
     // TODO(bridiver) should have some visual notification of hover/press
-    return <div className={css(styles.browserActionButton)}>
+    return <NavigationBarButtonContainer
+      isSquare
+      containerFor={styles.browserActionButton}
+    >
       <BrowserButton
         extensionItem
         l10nId='browserActionButton'
@@ -101,7 +105,7 @@ class BrowserAction extends React.Component {
         ? <BrowserActionBadge text={this.props.text} color={this.props.color} />
         : null
       }
-    </div>
+    </NavigationBarButtonContainer>
   }
 }
 

app/renderer/components/navigation/browserActionBadge.js

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite')
+const {StyleSheet, css} = require('aphrodite/no-important')
 const ImmutableComponent = require('../immutableComponent')
 const globalStyles = require('../styles/global')
 
@@ -30,11 +30,11 @@ class BrowserActionBadge extends ImmutableComponent {
       ref='badge'
       className={css(
         styles.browserActionBadge,
-        this.centered && styles.centered,
+        this.centered && styles.browserActionBadge_centered,
         // delay badge show-up.
         // this is also set for braveryPanel badge
         // in a way that both can appear at the same time.
-        styles.subtleShowUp
+        styles.browserActionBadge_subtleShowUp
       )}
       style={{backgroundColor: this.props.color || globalStyles.color.braveMediumOrange}}
       >{this.props.text}</div>
@@ -56,14 +56,16 @@ const styles = StyleSheet.create({
     minWidth: '10px',
     userSelect: 'none'
   },
-  centered: {
+
+  browserActionBadge_centered: {
     left: '50%',
     transform: 'translateX(-50%)',
     maxWidth: 'calc(100% - 5px)',
     overflow: 'hidden',
     textOverflow: 'ellipsis'
   },
-  subtleShowUp: globalStyles.animations.subtleShowUp
+
+  browserActionBadge_subtleShowUp: globalStyles.animations.subtleShowUp
 })
 
 module.exports = BrowserActionBadge