diff --git a/app/common/state/tabUIState.js b/app/common/state/tabUIState.js index b656b41bfac..3fc85bc0688 100644 --- a/app/common/state/tabUIState.js +++ b/app/common/state/tabUIState.js @@ -6,6 +6,8 @@ const settings = require('../../../js/constants/settings') // State helpers +const partitionState = require('../../common/state/tabContentState/partitionState') +const privateState = require('../../common/state/tabContentState/privateState') const closeState = require('../../common/state/tabContentState/closeState') const frameStateUtil = require('../../../js/state/frameStateUtil') @@ -18,6 +20,7 @@ const {getSetting} = require('../../../js/settings') // Styles const {intersection} = require('../../renderer/components/styles/global') +const {theme} = require('../../renderer/components/styles/theme') module.exports.getThemeColor = (state, frameKey) => { const frame = frameStateUtil.getFrameByKey(state, frameKey) @@ -114,3 +117,44 @@ module.exports.centralizeTabIcons = (state, frameKey, isPinned) => { return isPinned || isEntryIntersected(state, 'tabs', intersection.at40) } + +module.exports.getTabEndIconBackgroundColor = (state, frameKey) => { + const frame = frameStateUtil.getFrameByKey(state, frameKey) + + if (frame == null) { + if (process.env.NODE_ENV !== 'test') { + console.error('Unable to find frame for getTabEndIconBackgroundColor method') + } + return false + } + + const themeColor = module.exports.getThemeColor(state, frameKey) + const isPrivate = privateState.isPrivateTab(state, frameKey) + const isPartition = partitionState.isPartitionTab(state, frameKey) + const isHover = frameStateUtil.getTabHoverState(state, frameKey) + const isActive = frameStateUtil.isFrameKeyActive(state, frameKey) + const hasCloseIcon = closeState.showCloseTabIcon(state, frameKey) + const isIntersecting = isEntryIntersected(state, 'tabs', intersection.at40) + + let backgroundColor = theme.tab.background + + if (isActive && themeColor) { + backgroundColor = themeColor + } + if (isActive && !themeColor) { + backgroundColor = theme.tab.active.background + } + if (isIntersecting) { + backgroundColor = 'transparent' + } + if (!isActive && isPrivate) { + backgroundColor = theme.tab.private.background + } + if ((isActive || isHover) && isPrivate) { + backgroundColor = theme.tab.active.private.background + } + + return isPartition || isPrivate || hasCloseIcon + ? `linear-gradient(to left, ${backgroundColor} 13%, transparent 30%)` + : `linear-gradient(to left, ${backgroundColor} 0%, transparent 20%)` +} diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index b87159a4002..c48539a9f84 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -1,18 +1,18 @@ /* 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/. */ +* 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 {opacityIncreaseKeyframes} = require('./animations') /** - * Use this file when the style you need - * is applied in more than one element, or depends on it - * Use theme.js file to include colors that can be customized - * - * TODO: - * remove unnecessary styles properties (as items get refactored) - * migrate customizable options to theme.js - */ +* Use this file when the style you need +* is applied in more than one element, or depends on it +* Use theme.js file to include colors that can be customized +* +* TODO: +* remove unnecessary styles properties (as items get refactored) +* migrate customizable options to theme.js +*/ const globalStyles = { defaultFontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI"` + @@ -214,7 +214,7 @@ const globalStyles = { zindexWindowIsPreview: '1100', zindexDownloadsBar: '1000', zindexTabs: '1000', - zindexTabsAudioTopBorder: '10001', + zindexTabsAudioTopBorder: '1001', zindexTabsThumbnail: '1100', zindexTabsDragIndicator: '1100', zindexNavigationBar: '2000', diff --git a/app/renderer/components/tabs/content/privateIcon.js b/app/renderer/components/tabs/content/privateIcon.js index afd68ea1180..e2fc9cd8e02 100644 --- a/app/renderer/components/tabs/content/privateIcon.js +++ b/app/renderer/components/tabs/content/privateIcon.js @@ -58,12 +58,14 @@ module.exports = ReduxComponent.connect(PrivateIcon) const styles = StyleSheet.create({ private__icon: { + zIndex: 99, boxSizing: 'border-box', WebkitMaskRepeat: 'no-repeat', WebkitMaskPosition: 'center', WebkitMaskImage: `url(${privateSvg})`, WebkitMaskSize: globalStyles.spacing.sessionIconSize, width: globalStyles.spacing.sessionIconSize, - height: globalStyles.spacing.sessionIconSize + height: globalStyles.spacing.sessionIconSize, + marginRight: globalStyles.spacing.defaultTabMargin } }) diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js index f0a2327785b..31706bd4ad2 100644 --- a/app/renderer/components/tabs/tab.js +++ b/app/renderer/components/tabs/tab.js @@ -253,6 +253,7 @@ class Tab extends React.Component { props.partOfFullPageSet = partOfFullPageSet props.showAudioTopBorder = audioState.showAudioTopBorder(currentWindow, frameKey, isPinned) props.centralizeTabIcons = tabUIState.centralizeTabIcons(currentWindow, frameKey, isPinned) + props.gradientColor = tabUIState.getTabEndIconBackgroundColor(currentWindow, frameKey) // used in other functions props.dragData = state.getIn(['dragData', 'type']) === dragTypes.TAB && state.get('dragData') @@ -274,6 +275,13 @@ class Tab extends React.Component { } } }) + const perPageGradient = StyleSheet.create({ + tab_gradient: { + '::before': { + background: this.props.gradientColor + } + } + }) return
{ this.tabNode = node }} className={css( styles.tab, + perPageGradient.tab_gradient, // Windows specific style isWindows && styles.tab_forWindows, this.props.isPinnedTab && styles.tab_pinned, this.props.isActive && styles.tab_active, - this.props.showAudioTopBorder && styles.tab_audioTopBorder, this.props.isActive && this.props.themeColor && perPageStyles.tab_themeColor, + this.props.showAudioTopBorder && styles.tab_audioTopBorder, // Private color should override themeColor this.props.isPrivateTab && styles.tab_private, this.props.isActive && this.props.isPrivateTab && styles.tab_active_private, @@ -362,6 +371,16 @@ const styles = StyleSheet.create({ ':hover': { background: theme.tab.hover.background + }, + + // this enable us to have gradient text + '::before': { + content: '""', + position: 'absolute', + top: 0, + left: 0, + width: '-webkit-fill-available', + height: '-webkit-fill-available' } }, @@ -370,6 +389,12 @@ const styles = StyleSheet.create({ color: theme.tab.forWindows.color }, + tab_pinned: { + padding: 0, + width: '28px', + justifyContent: 'center' + }, + tab_active: { background: theme.tab.active.background, @@ -378,18 +403,6 @@ const styles = StyleSheet.create({ } }, - // The sentinel is responsible to respond to tabs - // intersection state. This is an empty hidden element - // which `width` value shouldn't be changed unless the intersection - // point needs to be edited. - tab__sentinel: { - position: 'absolute', - left: 0, - height: '1px', - background: 'transparent', - width: globalStyles.spacing.sentinelSize - }, - tab_audioTopBorder: { '::before': { content: `''`, @@ -403,13 +416,26 @@ const styles = StyleSheet.create({ } }, + // The sentinel is responsible to respond to tabs + // intersection state. This is an empty hidden element + // which `width` value shouldn't be changed unless the intersection + // point needs to be edited. + tab__sentinel: { + position: 'absolute', + left: 0, + height: '1px', + background: 'transparent', + width: globalStyles.spacing.sentinelSize + }, + tab__identity: { justifyContent: 'flex-start', alignItems: 'center', + overflow: 'hidden', display: 'flex', flex: '1', minWidth: '0', // @see https://bugzilla.mozilla.org/show_bug.cgi?id=1108514#c5 - marginLeft: globalStyles.spacing.defaultTabMargin + margin: `0 ${globalStyles.spacing.defaultTabMargin}` }, tab__content_centered: { @@ -419,12 +445,6 @@ const styles = StyleSheet.create({ margin: 0 }, - tab_pinned: { - padding: 0, - width: '28px', - justifyContent: 'center' - }, - tab_active_private: { background: theme.tab.active.private.background, color: theme.tab.active.private.color,