Add navigationBarButtonContainer etc

Closes #9846
Addresses #9283

Full changelog:
0d5d4fd
ab59b14

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

@@ -0,0 +1,131 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+const ipc = require('electron').ipcRenderer
+
+// Components
+const ReduxComponent = require('../../reduxComponent')
+
+// 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 bookmarkButtonIcon = require('../../../../../img/toolbar/bookmark_btn.svg')
+const bookmarkedButtonIcon = require('../../../../../img/toolbar/bookmark_marked.svg')
+
+class BookmarkButton extends React.Component {
+  constructor (props) {
+    super(props)
+    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
+    let siteDetail = siteUtil.getDetailFromFrame(
+      this.activeFrame,
+      siteTags.BOOKMARK
+    )
+    const key = siteUtil.getSiteKey(siteDetail)
+
+    if (key !== null) {
+      siteDetail = siteDetail.set(
+        'parentFolderId',
+        this.props.sites.getIn([key, 'parentFolderId'])
+      )
+      siteDetail = siteDetail.set(
+        'customTitle',
+        this.props.sites.getIn([key, 'customTitle'])
+      )
+    }
+    siteDetail = siteDetail.set(
+      'location',
+      UrlUtil.getLocationIfPDF(siteDetail.get('location'))
+    )
+    windowActions.setBookmarkDetail(siteDetail, siteDetail, null, editing, true)
+  }
+
+  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
+  }
+
+  componentDidMount () {
+    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
+    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
+  }
+
+  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'}
+        onClick={this.onToggleBookmark}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  bookmark__button: {
+    background: `url(${bookmarkButtonIcon}) center no-repeat`,
+    backgroundSize: '14px 14px',
+    width: '100%',
+    height: '100%'
+  },
+
+  bookmark__button_remove: {
+    background: `url(${bookmarkedButtonIcon}) center no-repeat`
+  }
+})
+
+module.exports = ReduxComponent.connect(BookmarkButton)

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

@@ -0,0 +1,95 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+
+// Components
+const ReduxComponent = require('../../reduxComponent')
+
+// Actions
+const appActions = require('../../../../../js/actions/appActions')
+
+// Constants
+const settings = require('../../../../../js/constants/settings')
+
+// State
+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 {
+  constructor (props) {
+    super(props)
+    this.onHome = this.onHome.bind(this)
+  }
+
+  onHome (e) {
+    getSetting(settings.HOMEPAGE).split('|')
+      .forEach((homepage, i) => {
+        if (i === 0 && !eventUtil.isForSecondaryAction(e)) {
+          appActions.loadURLRequested(this.props.activeTabId, homepage)
+        } else {
+          appActions.createTabRequested({
+            url: homepage,
+            active: false
+          })
+        }
+      })
+  }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
+
+    const props = {}
+
+    props.activeTabId = activeTabId
+
+    return props
+  }
+
+  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}
+      />
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  navigationButton: {
+    backgroundColor: globalStyles.color.buttonColor,
+    display: 'inline-block',
+    width: '100%',
+    height: '100%',
+    margin: 0,
+    padding: 0
+  },
+
+  navigationButton_home: {
+    background: `url(${homeButtonIcon}) center no-repeat`,
+    backgroundSize: '16px 16px'
+  }
+})
+
+module.exports = ReduxComponent.connect(HomeButton)

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

@@ -0,0 +1,70 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../../styles/global')
+
+// TODO: Check if stateless components can benefit from reduxComponent
+// by setting ownProps to stateless props.
+class NavigationBarButtonContainer extends React.Component {
+  render () {
+    return (
+      <div className={css(
+        this.props.isBoxed && styles.boxed,
+        this.props.isNested && styles.nestedContainer,
+        this.props.isStandalone && styles.standaloneContainer,
+        this.props.onNavigationBarChrome && styles.chromeContainer,
+
+        // BEM style class name unique for each component
+        this.props.containerFor
+      )}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  // #9283
+  // Create 25x25 squares and place the buttons at the center of each container
+  // Used for bookmarkButtonContainer, PublisherToggle, noScriptInfo, and UrlBarIcon.
+  boxed: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: globalStyles.navigationBar.urlbarForm.height,
+    width: globalStyles.navigationBar.urlbarForm.height,
+    minHeight: globalStyles.navigationBar.urlbarForm.height,
+    minWidth: globalStyles.navigationBar.urlbarForm.height,
+    WebkitAppRegion: 'no-drag'
+  },
+
+  // Add border to the bookmark button and publisher button only
+  nestedContainer: {
+    border: `1px solid ${globalStyles.color.urlBarOutline}`,
+    borderRadius: globalStyles.radius.borderRadiusURL
+  },
+
+  // Used for stopButton, reloadButton, and homeButton on navigationBar.js
+  // and backButton and forwardButton on navigator.js
+  standaloneContainer: {
+    display: 'inline-block',
+    borderRadius: globalStyles.radius.borderRadiusNavigationButton,
+    height: globalStyles.navigationBar.urlbarForm.height,
+    marginRight: globalStyles.navigationBar.navigationButtonContainer.marginRight,
+
+    ':hover': {
+      background: '#fff',
+      boxShadow: '0px 1px 5px 0px rgba(0, 0, 0, 0.15)'
+    }
+  },
+
+  chromeContainer: {
+    width: globalStyles.navigationBar.navigationButtonContainer.width
+  }
+})
+
+module.exports = NavigationBarButtonContainer

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

@@ -0,0 +1,98 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const Immutable = require('immutable')
+const ipc = require('electron').ipcRenderer
+
+// Components
+const ReduxComponent = require('../../reduxComponent')
+const LongPressButton = require('../../common/longPressButton')
+
+// Actions
+const appActions = require('../../../../../js/actions/appActions')
+
+// Constants
+const messages = require('../../../../../js/constants/messages')
+
+// State
+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 reloadButtonIcon = require('../../../../../img/toolbar/reload_btn.svg')
+
+class ReloadButton extends React.Component {
+  constructor (props) {
+    super(props)
+    this.onReload = this.onReload.bind(this)
+    this.onReloadLongPress = this.onReloadLongPress.bind(this)
+  }
+
+  onReload (e) {
+    if (eventUtil.isForSecondaryAction(e)) {
+      appActions.tabCloned(this.props.activeTabId, {active: !!e.shiftKey})
+    } else {
+      ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_RELOAD)
+    }
+  }
+
+  onReloadLongPress (target) {
+    contextMenus.onReloadContextMenu(target)
+  }
+
+  mergeProps (state, dispatchProps, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
+
+    const props = {}
+
+    props.activeTabId = activeTabId
+
+    return props
+  }
+
+  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}
+      />
+    )
+  }
+}
+
+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'
+  }
+})
+
+module.exports = ReduxComponent.connect(ReloadButton)