Moves buttons from navigator and navigationBar into separate components

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

@@ -0,0 +1,111 @@
+/* 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 NavigationButton = require('./navigationButton')
+
+// Actions
+const appActions = require('../../../../../js/actions/appActions')
+
+// State
+const tabState = require('../../../../common/state/tabState')
+
+// Constants
+const messages = require('../../../../../js/constants/messages')
+
+// Utils
+const eventUtil = require('../../../../../js/lib/eventUtil')
+const frameStateUtil = require('../../../../../js/state/frameStateUtil')
+const {isNavigatableAboutPage, getBaseUrl} = require('../../../../../js/lib/appUrlUtil')
+
+class BackButton extends React.Component {
+  constructor (props) {
+    super(props)
+    this.onBack = this.onBack.bind(this)
+    this.onBackLongPress = this.onBackLongPress.bind(this)
+  }
+
+  componentDidMount () {
+    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BACK, this.onBack)
+  }
+
+  componentWillUnmount () {
+    ipc.off(messages.SHORTCUT_ACTIVE_FRAME_BACK, this.onBack)
+  }
+
+  onBack (e) {
+    if (e && eventUtil.isForSecondaryAction(e) && this.props.isNavigable) {
+      if (this.props['canGoBack']) {
+        appActions.tabCloned(this.props.activeTabId, {
+          back: true,
+          active: !!e.shiftKey
+        })
+      }
+    } else {
+      appActions.onGoBack(this.props.activeTabId)
+    }
+  }
+
+  onBackLongPress (target) {
+    const rect = target.parentNode.getBoundingClientRect()
+    appActions.onGoBackLong(this.props.activeTabId, {
+      left: rect.left,
+      bottom: rect.bottom
+    })
+  }
+
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const swipeLeftPercent = state.get('swipeLeftPercent')
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
+    const activeTab = tabState.getByTabId(state, activeTabId) || Immutable.Map()
+    const activeTabShowingMessageBox = !!(!activeTab.isEmpty() && tabState.isShowingMessageBox(state, activeTabId))
+
+    const props = {}
+    // used in renderer
+    props.canGoBack = activeTab.get('canGoBack') && !activeTabShowingMessageBox
+    props.swipeLeftPercent = swipeLeftPercent ? (swipeLeftPercent + 1) * 1.2 : 1
+    props.swipeLeftOpacity = swipeLeftPercent ? 0.85 - (swipeLeftPercent > 0.65 ? 0.65 : swipeLeftPercent) : 0.85
+
+    if (swipeLeftPercent === 1) {
+      props.swipeLeftOpacity = 0.85
+    }
+
+    // used in other functions
+    props.isNavigable = activeFrame && isNavigatableAboutPage(getBaseUrl(activeFrame.get('location')))
+    props.activeTabId = activeTabId
+
+    return props
+  }
+
+  render () {
+    return <NavigationButton
+      testId={
+        !this.props.canGoBack
+          ? 'navigationBackButtonDisabled'
+          : 'navigationBackButton'
+      }
+      testId2={
+        !this.props.canGoBack
+          ? 'backButtonDisabled'
+          : 'backButton'
+      }
+      l10nId={'backButton'}
+      class={'backButton'}
+      disabled={!this.props.canGoBack}
+      swipePercent={this.props.swipeLeftPercent}
+      swipeOpacity={this.props.swipeLeftOpacity}
+      onClick={this.onBack}
+      onLongPress={this.onBackLongPress}
+    />
+  }
+}
+
+module.exports = ReduxComponent.connect(BackButton)

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

@@ -0,0 +1,63 @@
+/* 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 ipc = require('electron').ipcRenderer
+
+// Components
+const ImmutableComponent = require('../../immutableComponent')
+
+// Actions
+const windowActions = require('../../../../../js/actions/windowActions')
+
+// Constants
+const messages = require('../../../../../js/constants/messages')
+const settings = require('../../../../../js/constants/settings')
+
+// Utils
+const cx = require('../../../../../js/lib/classSet')
+const {getSetting} = require('../../../../../js/settings')
+
+class BookmarkButton extends ImmutableComponent {
+  constructor (props) {
+    super(props)
+    this.onToggleBookmark = this.onToggleBookmark.bind(this)
+  }
+
+  componentDidMount () {
+    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
+    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
+  }
+
+  onToggleBookmark () {
+    if (this.props.bookmarkKey) {
+      windowActions.editBookmark(this.props.bookmarkKey, true)
+    } else {
+      windowActions.onBookmarkAdded(true)
+    }
+  }
+
+  render () {
+    return <div className='startButtons'>
+      {
+        !this.props.titleMode
+          ? <span className='bookmarkButtonContainer'>
+            <button data-l10n-id={this.props.bookmarkKey ? 'removeBookmarkButton' : 'addBookmarkButton'}
+              className={cx({
+                navigationButton: true,
+                bookmarkButton: true,
+                removeBookmarkButton: !!this.props.bookmarkKey,
+                withHomeButton: getSetting(settings.SHOW_HOME_BUTTON),
+                normalizeButton: true
+              })}
+              onClick={this.onToggleBookmark}
+            />
+          </span>
+          : null
+      }
+    </div>
+  }
+}
+
+module.exports = BookmarkButton

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

@@ -0,0 +1,111 @@
+/* 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 NavigationButton = require('./navigationButton')
+
+// Actions
+const appActions = require('../../../../../js/actions/appActions')
+
+// State
+const tabState = require('../../../../common/state/tabState')
+
+// Constants
+const messages = require('../../../../../js/constants/messages')
+
+// Utils
+const eventUtil = require('../../../../../js/lib/eventUtil')
+const frameStateUtil = require('../../../../../js/state/frameStateUtil')
+const {isNavigatableAboutPage, getBaseUrl} = require('../../../../../js/lib/appUrlUtil')
+
+class ForwardButton extends React.Component {
+  constructor (props) {
+    super(props)
+    this.onForward = this.onForward.bind(this)
+    this.onForwardLongPress = this.onForwardLongPress.bind(this)
+  }
+
+  componentDidMount () {
+    ipc.on(messages.SHORTCUT_ACTIVE_FRAME_FORWARD, this.onForward)
+  }
+
+  componentWillUnmount () {
+    ipc.off(messages.SHORTCUT_ACTIVE_FRAME_FORWARD, this.onForward)
+  }
+
+  onForward (e) {
+    if (e && eventUtil.isForSecondaryAction(e) && this.props.isNavigable) {
+      if (this.props['canGoForward']) {
+        appActions.tabCloned(this.props.activeTabId, {
+          forward: true,
+          active: !!e.shiftKey
+        })
+      }
+    } else {
+      appActions.onGoForward(this.props.activeTabId)
+    }
+  }
+
+  onForwardLongPress (target) {
+    const rect = target.parentNode.getBoundingClientRect()
+    appActions.onGoForwardLong(this.props.activeTabId, {
+      left: rect.left,
+      bottom: rect.bottom
+    })
+  }
+
+  mergeProps (state, ownProps) {
+    const currentWindow = state.get('currentWindow')
+    const swipeRightPercent = state.get('swipeRightPercent')
+    const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
+    const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE)
+    const activeTab = tabState.getByTabId(state, activeTabId) || Immutable.Map()
+    const activeTabShowingMessageBox = !!(!activeTab.isEmpty() && tabState.isShowingMessageBox(state, activeTabId))
+
+    const props = {}
+    // used in renderer
+    props.canGoForward = activeTab.get('canGoForward') && !activeTabShowingMessageBox
+    props.swipeRightPercent = swipeRightPercent ? (swipeRightPercent + 1) * 1.2 : 1
+    props.swipeRightOpacity = swipeRightPercent ? 0.85 - (swipeRightPercent > 0.65 ? 0.65 : swipeRightPercent) : 0.85
+
+    if (swipeRightPercent === 1) {
+      props.swipeRightOpacity = 0.85
+    }
+
+    // used in other functions
+    props.isNavigable = activeFrame && isNavigatableAboutPage(getBaseUrl(activeFrame.get('location')))
+    props.activeTabId = activeTabId
+
+    return props
+  }
+
+  render () {
+    return <NavigationButton
+      testId={
+        !this.props.canGoForward
+          ? 'navigationForwardButtonDisabled'
+          : 'navigationForwardButton'
+      }
+      testId2={
+        !this.props.canGoForward
+          ? 'forwardButtonDisabled'
+          : 'forwardButton'
+      }
+      l10nId={'forwardButton'}
+      class={'forwardButton'}
+      disabled={!this.props.canGoForward}
+      swipePercent={this.props.swipeRightPercent}
+      swipeOpacity={this.props.swipeRightOpacity}
+      onClick={this.onForward}
+      onLongPress={this.onForwardLongPress}
+    />
+  }
+}
+
+module.exports = ReduxComponent.connect(ForwardButton)

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

@@ -5,17 +5,17 @@
 const React = require('react')
 
 // Components
-const ImmutableComponent = require('../immutableComponent')
+const ImmutableComponent = require('../../immutableComponent')
 
 // Actions
-const appActions = require('../../../../js/actions/appActions')
+const appActions = require('../../../../../js/actions/appActions')
 
 // Constants
-const settings = require('../../../../js/constants/settings')
+const settings = require('../../../../../js/constants/settings')
 
 // Utils
-const {getSetting} = require('../../../../js/settings')
-const eventUtil = require('../../../../js/lib/eventUtil')
+const {getSetting} = require('../../../../../js/settings')
+const eventUtil = require('../../../../../js/lib/eventUtil')
 
 class HomeButton extends ImmutableComponent {
   constructor (props) {

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

@@ -0,0 +1,40 @@
+/* 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')
+
+// Components
+const ImmutableComponent = require('../../immutableComponent')
+const LongPressButton = require('../../common/longPressButton')
+
+// Utils
+const cx = require('../../../../../js/lib/classSet')
+
+class NavigationButton extends ImmutableComponent {
+  render () {
+    return <div
+      data-test-id={this.props.testId}
+      className={cx({
+        navigationButtonContainer: true,
+        nav: true,
+        disabled: this.props.disabled
+      })}
+      style={{
+        transform: this.props.disabled ? `scale(1)` : `scale(${this.props.swipePercent})`,
+        opacity: `${this.props.swipeOpacity}`
+      }}
+    >
+      <LongPressButton
+        testId={this.props.testId2}
+        l10nId={this.props.l10nId}
+        className={`normalizeButton navigationButton ${this.props.class}`}
+        disabled={this.props.disabled}
+        onClick={this.props.onClick}
+        onLongPress={this.props.onLongPress}
+      />
+    </div>
+  }
+}
+
+module.exports = NavigationButton