From 96deb48c33226cddfbef162e9eae45472f530463 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Sun, 11 Jun 2017 12:29:06 -0700 Subject: [PATCH] Refactors TabPage and TabPages into redux Resolves #9339 Auditors: @bsclifton @bridiver Test Plan: - try to open enaugh tabs to trigger tab page (default is 20) - see if audio indicator is displayed if you have video playing in tab page - check if you can close tab page --- app/renderer/components/main/main.js | 5 +- app/renderer/components/tabs/tabPage.js | 66 +++++++++++++++++++----- app/renderer/components/tabs/tabPages.js | 44 +++++++++------- 3 files changed, 77 insertions(+), 38 deletions(-) diff --git a/app/renderer/components/main/main.js b/app/renderer/components/main/main.js index 350c4accb90..1c5aa837e74 100644 --- a/app/renderer/components/main/main.js +++ b/app/renderer/components/main/main.js @@ -849,10 +849,7 @@ class Main extends ImmutableComponent { onContextMenu={this.onTabContextMenu}> { nonPinnedFrames.size > tabsPerPage - ? + ? : null } diff --git a/app/renderer/components/tabs/tabPage.js b/app/renderer/components/tabs/tabPage.js index 3ead0076179..6a222d3eeeb 100644 --- a/app/renderer/components/tabs/tabPage.js +++ b/app/renderer/components/tabs/tabPage.js @@ -3,9 +3,10 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ const React = require('react') +const Immutable = require('immutable') // Components -const ImmutableComponent = require('../immutableComponent') +const ReduxComponent = require('../reduxComponent') // Actions const appActions = require('../../../../js/actions/appActions') @@ -13,28 +14,33 @@ const windowActions = require('../../../../js/actions/windowActions') // Constants const dragTypes = require('../../../../js/constants/dragTypes') +const settings = require('../../../../js/constants/settings') // Utils +const {getSetting} = require('../../../../js/settings') const cx = require('../../../../js/lib/classSet') const {onTabPageContextMenu} = require('../../../../js/contextMenus') const {getCurrentWindowId} = require('../../currentWindow') const dndData = require('../../../../js/dndData') +const frameStateUtil = require('../../../../js/state/frameStateUtil') +const dnd = require('../../../../js/dnd') -class TabPage extends ImmutableComponent { - constructor () { - super() +class TabPage extends React.Component { + constructor (props) { + super(props) this.onMouseEnter = this.onMouseEnter.bind(this) this.onMouseLeave = this.onMouseLeave.bind(this) } + onMouseLeave () { window.clearTimeout(this.hoverTimeout) windowActions.setPreviewTabPageIndex() } onMouseEnter (e) { - // relatedTarget inside mouseenter checks which element before this event was the pointer on + // relatedTarget inside mouse enter checks which element before this event was the pointer on // if this element has a tab-like class, then it's likely that the user was previewing - // a sequency of tabs. Called here as previewMode. + // a sequence of tabs. Called here as previewMode. const previewMode = /tab(?!pages)/i.test(e.relatedTarget.classList) // If user isn't in previewMode, we add a bit of delay to avoid tab from flashing out @@ -44,13 +50,12 @@ class TabPage extends ImmutableComponent { } onDrop (e) { - if (this.props.tabPageFrames.size === 0) { + if (this.props.isPageEmpty) { return } appActions.dataDropped(getCurrentWindowId()) - const moveToFrame = this.props.tabPageFrames.get(0) const sourceDragData = dndData.getDragData(e.dataTransfer, dragTypes.TAB) const sourceDragFromPageIndex = this.props.sourceDragFromPageIndex // This must be executed async because the state change that this causes @@ -58,7 +63,7 @@ class TabPage extends ImmutableComponent { setTimeout(() => { // If we're moving to a right page, then we're already shifting everything to the left by one, so we want // to drop it on the right. - windowActions.moveTab(sourceDragData.get('key'), moveToFrame.get('key'), + windowActions.moveTab(sourceDragData.get('key'), this.props.moveToFrameKey, // Has -1 value for pinned tabs sourceDragFromPageIndex === -1 || sourceDragFromPageIndex >= this.props.index) @@ -73,17 +78,50 @@ class TabPage extends ImmutableComponent { e.preventDefault() } + mergeProps (state, ownProps) { + const currentWindow = state.get('currentWindow') + const frames = frameStateUtil.getNonPinnedFrames(currentWindow) || Immutable.List() + const tabsPerPage = Number(getSetting(settings.TABS_PER_PAGE)) + const tabPageFrames = frames.slice(ownProps.index * tabsPerPage, (ownProps.index * tabsPerPage) + tabsPerPage) + const isAudioPlaybackActive = tabPageFrames.find((frame) => + frame.get('audioPlaybackActive') && !frame.get('audioMuted')) + + let sourceDragFromPageIndex + const sourceDragData = dnd.getInterBraveDragData() + if (sourceDragData) { + sourceDragFromPageIndex = frames.findIndex((frame) => frame.get('key') === sourceDragData.get('key')) + + if (sourceDragFromPageIndex !== -1) { + sourceDragFromPageIndex /= tabsPerPage + } + } + + const props = {} + // used in renderer + props.index = ownProps.index + props.tabPageFrames = tabPageFrames // TODO (nejc) only primitives + props.isAudioPlaybackActive = isAudioPlaybackActive + props.previewTabPage = getSetting(settings.SHOW_TAB_PREVIEWS) + props.active = currentWindow.getIn(['ui', 'tabs', 'tabPageIndex']) === props.index + + // used in other functions + props.sourceDragFromPageIndex = sourceDragFromPageIndex + props.isPageEmpty = tabPageFrames.size === 0 + props.moveToFrameKey = tabPageFrames.getIn([0, 'key']) + + return props + } + render () { - const audioPlaybackActive = this.props.tabPageFrames.find((frame) => - frame.get('audioPlaybackActive') && !frame.get('audioMuted')) - return frame.get('key') === sourceDragData.get('key')) - if (sourceDragFromPageIndex !== -1) { - sourceDragFromPageIndex /= this.props.tabsPerTabPage - } - } return
{ - tabPageCount > 1 && - Array.from(new Array(tabPageCount)).map((x, i) => + this.props.tabPageCount > 1 && + Array.from(new Array(this.props.tabPageCount)).map((x, i) => ) + index={i} /> + ) }
} } -module.exports = TabPages +module.exports = ReduxComponent.connect(TabPages)