From e4057591d0a9cff01af5cb17ca422f80b56627f2 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Wed, 13 Sep 2017 17:58:00 -0300 Subject: [PATCH] clean-up: remove legacy/deprecated methods Auditors: @bsclifton Test plan: `npm run unittest` --- .../state/tabContentState/closeState.js | 34 ------ .../state/tabContentState/faviconState.js | 21 ---- app/common/state/tabUIState.js | 58 ---------- app/renderer/components/styles/global.js | 13 +-- app/renderer/components/tabs/tab.js | 109 +----------------- app/renderer/lib/tabUtil.js | 35 ------ js/actions/windowActions.js | 14 --- js/constants/windowConstants.js | 1 - js/stores/windowStore.js | 11 -- test/unit/js/stores/windowStoreTest.js | 1 - test/unit/lib/tabUtilTest.js | 49 -------- 11 files changed, 4 insertions(+), 342 deletions(-) delete mode 100644 test/unit/lib/tabUtilTest.js diff --git a/app/common/state/tabContentState/closeState.js b/app/common/state/tabContentState/closeState.js index 39d299a801f..b52625f578e 100644 --- a/app/common/state/tabContentState/closeState.js +++ b/app/common/state/tabContentState/closeState.js @@ -7,44 +7,10 @@ const frameStateUtil = require('../../../../js/state/frameStateUtil') // Utils const {isEntryIntersected} = require('../../../../app/renderer/lib/observerUtil') -const {hasBreakpoint} = require('../../../renderer/lib/tabUtil') // Styles const {intersection} = require('../../../renderer/components/styles/global') - /** - * Check whether or not closeTab icon is always visible (fixed) in tab - */ -module.exports.deprecatedHasFixedCloseIcon = (state, frameKey) => { - const frame = frameStateUtil.getFrameByKey(state, frameKey) - const isActive = frameStateUtil.isFrameKeyActive(state, frameKey) - - if (frame == null) { - return false - } - - return ( - isActive && - // Larger sizes still have a relative closeIcon - // We don't resize closeIcon as we do with favicon so don't show it (smallest) - !hasBreakpoint(frame.get('breakpoint'), ['dynamic', 'default', 'large', 'smallest']) - ) -} - -/** - * Check whether or not closeTab icon is relative to hover state - */ -module.exports.deprecatedHasRelativeCloseIcon = (state, frameKey) => { - const frame = frameStateUtil.getFrameByKey(state, frameKey) - - if (frame == null) { - return false - } - - return frameStateUtil.getTabHoverState(state, frameKey) && - hasBreakpoint(frame.get('breakpoint'), ['dynamic', 'default', 'large']) -} - module.exports.hasFixedCloseIcon = (state, frameKey) => { const frame = frameStateUtil.getFrameByKey(state, frameKey) diff --git a/app/common/state/tabContentState/faviconState.js b/app/common/state/tabContentState/faviconState.js index ec55cd6e8c2..382bb3fd0c9 100644 --- a/app/common/state/tabContentState/faviconState.js +++ b/app/common/state/tabContentState/faviconState.js @@ -7,30 +7,9 @@ const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil') const frameStateUtil = require('../../../../js/state/frameStateUtil') const {isEntryIntersected} = require('../../../../app/renderer/lib/observerUtil') -// TODO deprecate -const {braveExtensionId} = require('../../../../js/constants/config') - // Styles const {intersection} = require('../../../renderer/components/styles/global') -// TODO deprecate -module.exports.deprecatedIsTabLoading = (state, frameKey) => { - const frame = frameStateUtil.getFrameByKey(state, frameKey) - - if (frame == null) { - return false - } - - return ( - frame.get('loading') || - frame.get('location') === 'about:blank' - ) && - ( - !frame.get('provisionalLocation') || - !frame.get('provisionalLocation').startsWith(`chrome-extension://${braveExtensionId}/`) - ) -} - module.exports.showFavicon = (state, frameKey) => { const frame = frameStateUtil.getFrameByKey(state, frameKey) diff --git a/app/common/state/tabUIState.js b/app/common/state/tabUIState.js index 40b61ee73af..b656b41bfac 100644 --- a/app/common/state/tabUIState.js +++ b/app/common/state/tabUIState.js @@ -12,70 +12,12 @@ const frameStateUtil = require('../../../js/state/frameStateUtil') // Utils const {isEntryIntersected} = require('../../../app/renderer/lib/observerUtil') const {getTextColorForBackground} = require('../../../js/lib/color') -const {hasBreakpoint} = require('../../renderer/lib/tabUtil') // TODO deprecate // Settings const {getSetting} = require('../../../js/settings') // Styles const {intersection} = require('../../renderer/components/styles/global') -// const {theme} = require('../../renderer/components/styles/theme') - -// /////////////////////////////////////////// -// methods to deprecate after the observer -// /////////////////////////////////////////// - -module.exports.hasTabInFullScreen = (state) => { - return state.get('frames') - .map((frame) => frame.get('isFullScreen')) - .some(fullScreenMode => fullScreenMode === true) -} - -module.exports.isMediumView = (state, frameKey) => { - const frame = frameStateUtil.getFrameByKey(state, frameKey) - return frame - ? ['large', 'largeMedium'].includes(frame.get('breakpoint')) - : false -} - -module.exports.isNarrowView = (state, frameKey) => { - const frame = frameStateUtil.getFrameByKey(state, frameKey) - return frame - ? ['medium', 'mediumSmall', 'small', 'extraSmall', 'smallest'].includes(frame.get('breakpoint')) - : false -} - -module.exports.isNarrowestView = (state, frameKey) => { - const frame = frameStateUtil.getFrameByKey(state, frameKey) - return frame - ? ['extraSmall', 'smallest'].includes(frame.get('breakpoint')) - : false -} - -/** - * Check whether or not private or newSession icon should be visible - */ -module.exports.hasVisibleSecondaryIcon = (state, frameKey) => { - const frame = frameStateUtil.getFrameByKey(state, frameKey) - - if (frame == null) { - return false - } - - return ( - // Hide icon on hover - !closeState.deprecatedHasRelativeCloseIcon(state, frameKey) && - // If closeIcon is fixed then there's no room for another icon - !closeState.deprecatedHasFixedCloseIcon(state, frameKey) && - // completely hide it for small sizes - !hasBreakpoint(frame.get('breakpoint'), - ['medium', 'mediumSmall', 'small', 'extraSmall', 'smallest']) - ) -} - -// /////////////////////////////////////////// -// end of methods to deprecate -// /////////////////////////////////////////// module.exports.getThemeColor = (state, frameKey) => { const frame = frameStateUtil.getFrameByKey(state, frameKey) diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index fd740f3645a..886752485f4 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -25,18 +25,7 @@ const globalStyles = { breakpointExtensionButtonPadding: '720px', breakpointSmallWin32: '650px', breakpointTinyWin32: '500px', - breakpointNewPrivateTab: '890px', - tab: { - dynamic: '99999px', // add a large number as new spec will set tab width based on window size - default: '184px', // match tabArea max-width - large: '120px', - largeMedium: '83px', - medium: '66px', - mediumSmall: '53px', - small: '46px', - extraSmall: '40px', - smallest: '19px' - } + breakpointNewPrivateTab: '890px' }, intersection: { // whereas 1 === 100% diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js index 1fa497944ba..f4069e5883e 100644 --- a/app/renderer/components/tabs/tab.js +++ b/app/renderer/components/tabs/tab.js @@ -40,13 +40,8 @@ const {getTextColorForBackground} = require('../../../../js/lib/color') const {isIntermediateAboutPage} = require('../../../../js/lib/appUrlUtil') const contextMenus = require('../../../../js/contextMenus') const dnd = require('../../../../js/dnd') -const throttle = require('../../../../js/lib/throttle') const frameStateUtil = require('../../../../js/state/frameStateUtil') -const { - getTabBreakpoint, - tabUpdateFrameRate, - hasTabAsRelatedTarget -} = require('../../lib/tabUtil') +const {hasTabAsRelatedTarget} = require('../../lib/tabUtil') const isWindows = require('../../../common/lib/platformUtil').isWindows() const {getCurrentWindowId} = require('../../currentWindow') const {setObserver} = require('../../lib/observerUtil') @@ -58,7 +53,6 @@ class Tab extends React.Component { this.onMouseMove = this.onMouseMove.bind(this) this.onMouseEnter = this.onMouseEnter.bind(this) this.onMouseLeave = this.onMouseLeave.bind(this) - this.onUpdateTabSize = this.onUpdateTabSize.bind(this) this.onDragStart = this.onDragStart.bind(this) this.onDragEnd = this.onDragEnd.bind(this) this.onDragOver = this.onDragOver.bind(this) @@ -191,22 +185,6 @@ class Tab extends React.Component { } } - get tabSize () { - const tab = this.tabNode - // Avoid TypeError keeping it null until component is mounted - return tab && !this.props.isPinnedTab ? tab.getBoundingClientRect().width : null - } - - onUpdateTabSize () { - const currentSize = getTabBreakpoint(this.tabSize) - // Avoid updating breakpoint when user enters fullscreen (see #7301) - // Also there can be a race condition for pinned tabs if we update when not needed - // since a new tab component with the same key gets created which is not pinned. - if (this.props.breakpoint !== currentSize && !this.props.hasTabInFullScreen) { - windowActions.setTabBreakpoint(this.props.frameKey, currentSize) - } - } - componentDidMount () { // do not observe pinned tabs if (this.props.isPinned) { @@ -219,9 +197,7 @@ class Tab extends React.Component { this.observer = setObserver(this.tabSentinel, threshold, margin, this.onObserve) this.observer.observe(this.tabSentinel) - this.onUpdateTabSize() // TODO: this will be depreacated this.tabNode.addEventListener('auxclick', this.onAuxClick.bind(this)) - window.addEventListener('resize', throttle(this.onUpdateTabSize, tabUpdateFrameRate), { passive: true }) } componentDidUpdate () { @@ -230,12 +206,10 @@ class Tab extends React.Component { if (this.props.isPinnedTab) { this.observer.unobserve(this.tabSentinel) } - this.onUpdateTabSize() // TODO: deprecate } componentWillUnmount () { this.observer.unobserve(this.tabSentinel) - window.removeEventListener('resize', this.onUpdateTabSize) } onObserve (entries) { @@ -270,23 +244,18 @@ class Tab extends React.Component { // used in renderer props.frameKey = ownProps.frameKey props.isPrivateTab = frame.get('isPrivate') - props.breakpoint = frame.get('breakpoint') props.notificationBarActive = notificationBarActive props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, props.frameKey) props.tabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth']) props.isPinnedTab = tabState.isTabPinned(state, tabId) props.canPlayAudio = audioState.canPlayAudio(currentWindow, props.frameKey) props.themeColor = tabUIState.getThemeColor(currentWindow, props.frameKey) - props.isNarrowView = tabUIState.isNarrowView(currentWindow, props.frameKey) - props.isNarrowestView = tabUIState.isNarrowestView(currentWindow, props.frameKey) - props.isPlayIndicatorBreakpoint = tabUIState.isMediumView(currentWindow, props.frameKey) || props.isNarrowView props.title = frame.get('title') props.partOfFullPageSet = ownProps.partOfFullPageSet // used in other functions props.totalTabs = state.get('tabs').size props.dragData = state.getIn(['dragData', 'type']) === dragTypes.TAB && state.get('dragData') - props.hasTabInFullScreen = tabUIState.hasTabInFullScreen(currentWindow) props.tabId = tabId props.previewMode = currentWindow.getIn(['ui', 'tabs', 'previewMode']) @@ -335,19 +304,12 @@ class Tab extends React.Component { isWindows && styles.tabForWindows, this.props.isPinnedTab && styles.isPinned, this.props.isActive && styles.active, - this.props.isPlayIndicatorBreakpoint && this.props.canPlayAudio && styles.narrowViewPlayIndicator, this.props.isActive && this.props.themeColor && perPageStyles.themeColor, // Private color should override themeColor this.props.isPrivateTab && styles.private, - this.props.isActive && this.props.isPrivateTab && styles.activePrivateTab, - !this.props.isPinnedTab && this.props.isNarrowView && styles.tabNarrowView, - !this.props.isPinnedTab && this.props.isNarrowestView && styles.tabNarrowestView, - !this.props.isPinnedTab && this.props.breakpoint === 'smallest' && styles.tabMinAllowedSize + this.props.isActive && this.props.isPrivateTab && styles.activePrivateTab )} data-test-id='tab' - data-test-active-tab={this.props.isActive} - data-test-pinned-tab={this.props.isPinnedTab} - data-test-private-tab={this.props.isPrivateTab} data-frame-key={this.props.frameKey} draggable title={this.props.title} @@ -361,11 +323,7 @@ class Tab extends React.Component { ref={(node) => { this.tabSentinel = node }} className={css(styles.tab__sentinel)} /> -
+
@@ -422,44 +380,6 @@ const styles = StyleSheet.create({ width: globalStyles.spacing.sentinelSize }, - // Custom classes based on tab's width and behaviour - tabNarrowView: { - padding: '0 2px' - }, - - narrowViewPlayIndicator: { - '::before': { - content: `''`, - display: 'block', - position: 'absolute', - top: 0, - left: 0, - right: 0, - height: '2px', - background: 'lightskyblue' - } - }, - - tabNarrowestView: { - justifyContent: 'center' - }, - - tabMinAllowedSize: { - padding: 0 - }, - - tabIdNarrowView: { - flex: 'inherit' - }, - - tabIdMinAllowedSize: { - overflow: 'hidden' - }, - - alternativePlayIndicator: { - borderTop: '2px solid lightskyblue' - }, - tabId: { justifyContent: 'center', alignItems: 'center', @@ -514,29 +434,6 @@ const styles = StyleSheet.create({ opacity: '0' } } - }, - - icon: { - width: globalStyles.spacing.iconSize, - minWidth: globalStyles.spacing.iconSize, - height: globalStyles.spacing.iconSize, - backgroundSize: globalStyles.spacing.iconSize, - fontSize: globalStyles.fontSize.tabIcon, - backgroundPosition: 'center', - backgroundRepeat: 'no-repeat', - paddingLeft: globalStyles.spacing.defaultIconPadding, - paddingRight: globalStyles.spacing.defaultIconPadding - }, - - icon_audio: { - color: globalStyles.color.highlightBlue, - - // 16px - fontSize: `calc(${globalStyles.fontSize.tabIcon} + 2px)`, - - // equal spacing around audio icon (favicon and tabTitle) - padding: globalStyles.spacing.defaultTabPadding, - paddingRight: '0 !important' } }) diff --git a/app/renderer/lib/tabUtil.js b/app/renderer/lib/tabUtil.js index e4cb11a1bed..3ee963e5fc4 100644 --- a/app/renderer/lib/tabUtil.js +++ b/app/renderer/lib/tabUtil.js @@ -2,41 +2,6 @@ * 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 tabBreakpoint = require('../components/styles/global').breakpoint.tab - -/** - * Get tab's breakpoint name for current tab size. - * @param {Number} tabWidth current tab size - * @returns {String} The matching breakpoint. - */ -module.exports.getTabBreakpoint = (tabWidth) => { - const sizes = Object.keys(tabBreakpoint) - let currentSize - - sizes.map(size => { - if (tabWidth <= Number.parseInt(tabBreakpoint[size], 10)) { - currentSize = size - return false - } - return true - }) - return currentSize -} - -// Execute resize handler at a rate of 15fps -module.exports.tabUpdateFrameRate = 66 - -/** - * Check whether or not current breakpoint match defined criteria - * @param {Object} breakpoint - Break point value - * @param {Array} arr - Array of Strings including breakpoint names to check against - * @returns {Boolean} Whether or not the sizing criteria was match - */ -module.exports.hasBreakpoint = (breakpoint, arr) => { - arr = Array.isArray(arr) ? arr : [arr] - return arr.includes(breakpoint) -} - /** * Check whether or not the related target is a tab * by checking the parentNode dataset diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js index 05de28c2ff7..12efd70375e 100644 --- a/js/actions/windowActions.js +++ b/js/actions/windowActions.js @@ -249,20 +249,6 @@ const windowActions = { }) }, - /** - * Dispatches a message to the store to set the tab breakpoint. - * - * @param {Object} frameKey - the frame key for the webview in question. - * @param {string} breakpoint - the tab breakpoint to change to - */ - setTabBreakpoint: function (frameKey, breakpoint) { - dispatch({ - actionType: windowConstants.WINDOW_SET_TAB_BREAKPOINT, - frameKey, - breakpoint - }) - }, - setTabIntersectionState: function (frameKey, ratio) { dispatch({ actionType: windowConstants.WINDOW_SET_TAB_CONTENT_INTERSECTION_STATE, diff --git a/js/constants/windowConstants.js b/js/constants/windowConstants.js index 13a5548af00..34241d7861d 100644 --- a/js/constants/windowConstants.js +++ b/js/constants/windowConstants.js @@ -12,7 +12,6 @@ const windowConstants = { WINDOW_SET_FOCUSED_FRAME: _, WINDOW_SET_PREVIEW_TAB_PAGE_INDEX: _, WINDOW_SET_TAB_PAGE_INDEX: _, - WINDOW_SET_TAB_BREAKPOINT: _, WINDOW_SET_TAB_HOVER_STATE: _, WINDOW_SET_TAB_PAGE_HOVER_STATE: _, WINDOW_SET_TAB_CONTENT_INTERSECTION_STATE: _, diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js index d2a8e567bc7..3ca70e585ab 100644 --- a/js/stores/windowStore.js +++ b/js/stores/windowStore.js @@ -358,17 +358,6 @@ const doAction = (action) => { windowState = frameStateUtil.updateTabPageIndex(windowState, action.frameProps.get('tabId')) } break - case windowConstants.WINDOW_SET_TAB_BREAKPOINT: - { - if (!action.frameKey) { - break - } - const frameIndex = frameStateUtil.getFrameIndex(windowState, action.frameKey) - if (frameIndex !== -1) { - windowState = windowState.setIn(['frames', frameIndex, 'breakpoint'], action.breakpoint) - } - break - } case windowConstants.WINDOW_TAB_MOUSE_MOVE: { // previewMode is only triggered if mouse is idle over a tab diff --git a/test/unit/js/stores/windowStoreTest.js b/test/unit/js/stores/windowStoreTest.js index f3b258e0ee7..1b52a6ef1ea 100644 --- a/test/unit/js/stores/windowStoreTest.js +++ b/test/unit/js/stores/windowStoreTest.js @@ -166,7 +166,6 @@ describe('Window store unit tests', function () { }, tabId: 8, zoomLevel: 0, - breakpoint: 'default', index: 1, partitionNumber: 0, history: [], diff --git a/test/unit/lib/tabUtilTest.js b/test/unit/lib/tabUtilTest.js deleted file mode 100644 index ce8d6ed267b..00000000000 --- a/test/unit/lib/tabUtilTest.js +++ /dev/null @@ -1,49 +0,0 @@ -/* global describe, it */ -const tabUtil = require('../../../app/renderer/lib/tabUtil') -const tabBreakpoint = require('../../../app/renderer/components/styles/global').breakpoint.tab -const assert = require('assert') - -require('../braveUnit') - -describe('tabUtil', function () { - describe('getTabBreakpoint', function () { - let size - - it('returns `dynamic` if `dynamic` size matches', function () { - size = Number.parseInt(tabBreakpoint.dynamic, 10) - assert.equal(tabUtil.getTabBreakpoint(size), 'dynamic') - }) - it('returns `default` if `default` size matches', function () { - size = Number.parseInt(tabBreakpoint.default, 10) - assert.equal(tabUtil.getTabBreakpoint(size), 'default') - }) - it('returns `large` if `large` size matches', function () { - size = Number.parseInt(tabBreakpoint.large, 10) - assert.equal(tabUtil.getTabBreakpoint(size), 'large') - }) - it('returns `largeMedium` if `largeMedium` size matches', function () { - size = Number.parseInt(tabBreakpoint.largeMedium, 10) - assert.equal(tabUtil.getTabBreakpoint(size), 'largeMedium') - }) - it('returns `medium` if `medium` size matches', function () { - size = Number.parseInt(tabBreakpoint.medium, 10) - assert.equal(tabUtil.getTabBreakpoint(size), 'medium') - }) - it('returns `mediumSmall` if `mediumSmall` size matches', function () { - size = Number.parseInt(tabBreakpoint.mediumSmall, 10) - assert.equal(tabUtil.getTabBreakpoint(size), 'mediumSmall') - }) - it('returns `small` if `small` size matches', function () { - size = Number.parseInt(tabBreakpoint.small, 10) - assert.equal(tabUtil.getTabBreakpoint(size), 'small') - }) - it('returns `extraSmall` if `extraSmall` size matches', function () { - size = Number.parseInt(tabBreakpoint.extraSmall, 10) - assert.equal(tabUtil.getTabBreakpoint(size), 'extraSmall') - }) - it('returns `smallest` if `smallest` size matches', function () { - size = Number.parseInt(tabBreakpoint.smallest, 10) - assert.equal(tabUtil.getTabBreakpoint(size), 'smallest') - }) - }) -})