Refactor navigationBar (part 2)

Addresses #9283 Full changelog: 561ffbd d82d8bc 3990ecb c1b8416 2d7d7fa 7d71108 e7e96c8 fcb7989
brave · Aug 8, 2017 · 00cd549 · 00cd549
1 parent d245af4
commit 00cd549
Show file tree

Hide file tree

Showing 23 changed files with 427 additions and 413 deletions.
diff --git a/app/renderer/components/common/browserButton.js b/app/renderer/components/common/browserButton.js
@@ -89,7 +89,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}
@@ -203,13 +210,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: {
@@ -286,6 +292,15 @@ const styles = StyleSheet.create({
     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
   }
 })
 

diff --git 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/browserAction.js b/app/renderer/components/navigation/browserAction.js
@@ -5,11 +5,12 @@
 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 NavigationBarButtonContainer = require('./buttons/navigationBarButtonContainer')
 const {BrowserButton} = require('../common/browserButton')
 const BrowserActionBadge = require('./browserActionBadge')
 
@@ -79,7 +80,9 @@ 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
         extensionButton
         extensionItem
@@ -100,7 +103,7 @@ class BrowserAction extends React.Component {
         ? <BrowserActionBadge text={this.props.text} color={this.props.color} />
         : null
       }
-    </div>
+    </NavigationBarButtonContainer>
   }
 }
 

diff --git a/app/renderer/components/navigation/browserActionBadge.js b/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
diff --git a/app/renderer/components/navigation/buttons/bookmarkButton.js b/app/renderer/components/navigation/buttons/bookmarkButton.js
@@ -8,29 +8,24 @@ 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')
 const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
-// Store
-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')
@@ -41,14 +36,6 @@ class BookmarkButton extends React.Component {
     this.onToggleBookmark = this.onToggleBookmark.bind(this)
   }
 
-  get bookmarked () {
-    return this.props.activeFrameKey !== undefined && this.props.bookmarked
-  }
-
-  get activeFrame () {
-    return windowStore.getFrame(this.props.activeFrameKey)
-  }
-
   onToggleBookmark () {
     const editing = this.bookmarked
     // show the AddEditBookmarkHanger control; saving/deleting takes place there
@@ -78,14 +65,11 @@ class BookmarkButton extends React.Component {
   mergeProps (state, dispatchProps, ownProps) {
     const currentWindow = state.get('currentWindow')
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
-    const activeFrameKey = activeFrame.get('key')
     const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
     const activeTab = tabState.getByTabId(state, activeTabId)
 
     const props = {}
-    props.activeFrameKey = activeFrameKey
     props.bookmarked = activeTab && activeTab.get('bookmarked')
-    props.sites = state.get('sites')
 
     return props
   }
@@ -97,33 +81,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`
   }
 })

diff --git a/app/renderer/components/navigation/buttons/homeButton.js b/app/renderer/components/navigation/buttons/homeButton.js
@@ -4,9 +4,11 @@
 
 const React = require('react')
 const Immutable = require('immutable')
+const {StyleSheet} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../../reduxComponent')
+const {NormalizedButton} = require('../../common/browserButton')
 
 // Actions
 const appActions = require('../../../../../js/actions/appActions')
@@ -19,13 +21,9 @@ 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 {getSetting} = require('../../../../../js/settings')
 
-const {StyleSheet, css} = require('aphrodite/no-important')
-const globalStyles = require('../../styles/global')
-
 const homeButtonIcon = require('../../../../../img/toolbar/home_btn.svg')
 
 class HomeButton extends React.Component {
@@ -60,33 +58,20 @@ class HomeButton extends React.Component {
     return props
   }
 
+  // BEM Level: navigationBar__buttonContainer
   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,
-        [css(styles.navigationButton, styles.navigationButton_home)]: true
-      })}
-        data-test-id='homeButton'
-        data-l10n-id='homeButton'
-        onClick={this.onHome}
-      />
-    )
+    return <NormalizedButton
+      navigationButton
+      custom={styles.homeButton}
+      testId='homeButton'
+      l10nId='homeButton'
+      onClick={this.onHome}
+    />
   }
 }
 
 const styles = StyleSheet.create({
-  navigationButton: {
-    backgroundColor: globalStyles.color.buttonColor,
-    display: 'inline-block',
-    width: '100%',
-    height: '100%',
-    margin: 0,
-    padding: 0
-  },
-
-  navigationButton_home: {
+  homeButton: {
     background: `url(${homeButtonIcon}) center no-repeat`,
     backgroundSize: '16px 16px'
   }