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(