diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js index 418173994cb..ede552c409a 100644 --- a/app/renderer/components/styles/global.js +++ b/app/renderer/components/styles/global.js @@ -6,6 +6,7 @@ const globalStyles = { breakpointSmallWin32: '650px', breakpointTinyWin32: '500px', tab: { + large: '120px', largeMedium: '83px', medium: '66px', mediumSmall: '53px', diff --git a/app/renderer/components/styles/tab.js b/app/renderer/components/styles/tab.js index c77068dfca5..6622d1ecbe0 100644 --- a/app/renderer/components/styles/tab.js +++ b/app/renderer/components/styles/tab.js @@ -43,11 +43,7 @@ const styles = StyleSheet.create({ narrowViewPlayIndicator: { borderWidth: '2px 1px 0', borderStyle: 'solid', - borderColor: 'lightskyblue transparent transparent' - }, - - activeTabNarrowViewPlayIndicator: { - borderColor: `lightskyblue ${globalStyles.color.chromeControlsBackground} ${globalStyles.color.chromeControlsBackground}` + borderColor: `lightskyblue ${globalStyles.color.chromeControlsBackground} transparent transparent` }, tabNarrowestView: { diff --git a/app/renderer/components/tabContent.js b/app/renderer/components/tabContent.js index 9874f78aced..a3eac1c0b29 100644 --- a/app/renderer/components/tabContent.js +++ b/app/renderer/components/tabContent.js @@ -92,6 +92,11 @@ class AudioTabIcon extends ImmutableComponent { return this.props.tabProps.get('audioPlaybackActive') || this.props.tabProps.get('audioMuted') } + get mediumView () { + const sizes = ['large', 'largeMedium'] + return sizes.includes(this.props.tabProps.get('breakpoint')) + } + get narrowView () { const sizes = ['medium', 'mediumSmall', 'small', 'extraSmall', 'smallest'] return sizes.includes(this.props.tabProps.get('breakpoint')) @@ -116,7 +121,7 @@ class AudioTabIcon extends ImmutableComponent { } render () { - return this.pageCanPlayAudio && !this.narrowView + return this.pageCanPlayAudio && !this.mediumView && !this.narrowView ? : null } @@ -186,18 +191,13 @@ class TabTitle extends ImmutableComponent { return !!this.props.tabProps.get('pinnedLocation') } - get pageCanPlayAudio () { - return this.props.tabProps.get('audioPlaybackActive') || this.props.tabProps.get('audioMuted') - } - get hoveredOnNarrowView () { const sizes = ['mediumSmall', 'small', 'extraSmall', 'smallest'] return this.props.tabProps.get('hoverState') && sizes.includes(this.props.tabProps.get('breakpoint')) } get shouldHideTitle () { - return (this.props.tabProps.get('breakpoint') === 'largeMedium' && this.pageCanPlayAudio && this.locationHasSecondaryIcon) || - (this.props.tabProps.get('breakpoint') === 'mediumSmall' && this.locationHasSecondaryIcon) || + return (this.props.tabProps.get('breakpoint') === 'mediumSmall' && this.locationHasSecondaryIcon) || this.props.tabProps.get('breakpoint') === 'extraSmall' || this.props.tabProps.get('breakpoint') === 'smallest' || this.hoveredOnNarrowView } diff --git a/app/renderer/lib/tabUtil.js b/app/renderer/lib/tabUtil.js index 52a80f25ce1..5de587a5eab 100644 --- a/app/renderer/lib/tabUtil.js +++ b/app/renderer/lib/tabUtil.js @@ -10,7 +10,7 @@ const styles = require('../components/styles/global') * @returns {String} The matching breakpoint. */ module.exports.getTabBreakpoint = (tabWidth) => { - const sizes = ['largeMedium', 'medium', 'mediumSmall', 'small', 'extraSmall', 'smallest'] + const sizes = ['large', 'largeMedium', 'medium', 'mediumSmall', 'small', 'extraSmall', 'smallest'] let currentSize sizes.map(size => { diff --git a/js/components/tab.js b/js/components/tab.js index 21443b25519..2cf1fd5139b 100644 --- a/js/components/tab.js +++ b/js/components/tab.js @@ -177,6 +177,11 @@ class Tab extends ImmutableComponent { return tab && !this.isPinned ? tab.getBoundingClientRect().width : null } + get mediumView () { + const sizes = ['large', 'largeMedium'] + return sizes.includes(this.props.tab.get('breakpoint')) + } + get narrowView () { const sizes = ['medium', 'mediumSmall', 'small', 'extraSmall', 'smallest'] return sizes.includes(this.props.tab.get('breakpoint')) @@ -224,6 +229,7 @@ class Tab extends ImmutableComponent { } render () { + const playIndicatorBreakpoint = this.mediumView || this.narrowView const perPageStyles = StyleSheet.create({ themeColor: { color: this.themeColor ? getTextColorForBackground(this.themeColor) : 'inherit', @@ -254,8 +260,7 @@ class Tab extends ImmutableComponent { this.props.isActive && styles.active, this.props.tab.get('isPrivate') && styles.private, this.props.isActive && this.props.tab.get('isPrivate') && styles.activePrivateTab, - this.narrowView && this.canPlayAudio && styles.narrowViewPlayIndicator, - this.props.isActive && this.narrowView && this.canPlayAudio && styles.activeTabNarrowViewPlayIndicator, + playIndicatorBreakpoint && this.canPlayAudio && styles.narrowViewPlayIndicator, this.props.isActive && this.themeColor && perPageStyles.themeColor, !this.isPinned && this.narrowView && styles.tabNarrowView, !this.isPinned && this.narrowestView && styles.tabNarrowestView, diff --git a/test/unit/app/renderer/tabContentTest.js b/test/unit/app/renderer/tabContentTest.js index 7cb188af0ac..95888370f51 100644 --- a/test/unit/app/renderer/tabContentTest.js +++ b/test/unit/app/renderer/tabContentTest.js @@ -305,22 +305,6 @@ describe('tabContent components', function () { ) assert.notEqual(wrapper.text(), pageTitle1) }) - it('should not show text if size is largeMedium and location has audio and a secondary icon', function () { - const wrapper = shallow( - - ) - assert.notEqual(wrapper.text(), pageTitle1) - }) it('should not show text if size is mediumSmall and location has a secondary icon', function () { const wrapper = shallow(