Avoid having undefined props on tab audioIndicator

- Auditors: @bsclifton, @bbondy - Closes #8249, #8270 - Test Plan: npm run test -- --grep="AudioTabIcon"
brave · Apr 13, 2017 · e3d821f · e3d821f
1 parent 1f0f404
commit e3d821f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 23 deletions.
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -7,6 +7,7 @@ const globalStyles = {
     breakpointTinyWin32: '500px',
     breakpointNewPrivateTab: '890px',
     tab: {
+      default: '184px', // match tabArea max-width
       large: '120px',
       largeMedium: '83px',
       medium: '66px',

diff --git a/app/renderer/components/tabContent.js b/app/renderer/components/tabContent.js
@@ -101,25 +101,16 @@ class Favicon extends ImmutableComponent {
 
 class AudioTabIcon extends ImmutableComponent {
   get pageCanPlayAudio () {
-    return this.props.tab.get('audioPlaybackActive') || this.props.tab.get('audioMuted')
+    return !!this.props.tab.get('audioPlaybackActive')
   }
 
-  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'))
-  }
-
-  get locationHasSecondaryIcon () {
-    return !!this.props.tab.get('isPrivate') || !!this.props.tab.get('partitionNumber')
+  get shouldShowAudioIcon () {
+    // We switch to blue top bar for all breakpoints but default
+    return this.props.tab.get('breakpoint') === 'default'
   }
 
   get mutedState () {
-    return this.pageCanPlayAudio && this.props.tab.get('audioMuted')
+    return this.pageCanPlayAudio && !!this.props.tab.get('audioMuted')
   }
 
   get audioIcon () {
@@ -129,8 +120,10 @@ class AudioTabIcon extends ImmutableComponent {
   }
 
   render () {
-    return this.pageCanPlayAudio && !this.mediumView && !this.narrowView
-      ? <TabIcon className={css(styles.icon, styles.audioIcon)} symbol={this.audioIcon} onClick={this.props.onClick} />
+    return this.pageCanPlayAudio && this.shouldShowAudioIcon
+      ? <TabIcon
+        className={css(styles.icon, styles.audioIcon)}
+        symbol={this.audioIcon} onClick={this.props.onClick} />
       : null
   }
 }

diff --git a/app/renderer/lib/tabUtil.js b/app/renderer/lib/tabUtil.js
@@ -14,7 +14,7 @@ const {getTextColorForBackground} = require('../../../js/lib/color')
  * @returns {String} The matching breakpoint.
  */
 module.exports.getTabBreakpoint = (tabWidth) => {
-  const sizes = ['large', 'largeMedium', 'medium', 'mediumSmall', 'small', 'extraSmall', 'smallest']
+  const sizes = ['default', 'large', 'largeMedium', 'medium', 'mediumSmall', 'small', 'extraSmall', 'smallest']
   let currentSize
 
   sizes.map(size => {

diff --git a/test/unit/app/renderer/tabContentTest.js b/test/unit/app/renderer/tabContentTest.js
@@ -101,7 +101,8 @@ describe('tabContent components', function () {
         <AudioTabIcon
           tab={
             Immutable.Map({
-              audioPlaybackActive: false
+              audioPlaybackActive: false,
+              breakpoint: 'default'
             })}
         />
       )
@@ -113,18 +114,20 @@ describe('tabContent components', function () {
         <AudioTabIcon
           tab={
             Immutable.Map({
-              audioPlaybackActive: true
+              audioPlaybackActive: true,
+              breakpoint: 'default'
             })}
         />
       )
       assert.equal(wrapper.props().symbol, globalStyles.appIcons.volumeOn)
     })
-    it('should not show play audio icon if tab size is too narrow', function () {
+    it('should not show play audio icon if tab size is different than default', function () {
       const wrapper = shallow(
         <AudioTabIcon
           tab={
             Immutable.Map({
               audioPlaybackActive: true,
+              audioMuted: false,
               breakpoint: 'small'
             })}
         />
@@ -137,13 +140,14 @@ describe('tabContent components', function () {
           tab={
             Immutable.Map({
               audioPlaybackActive: true,
-              audioMuted: true
+              audioMuted: true,
+              breakpoint: 'default'
             })}
         />
       )
       assert.equal(wrapper.props().symbol, globalStyles.appIcons.volumeOff)
     })
-    it('should not show mute icon if tab size is too narrow', function () {
+    it('should not show mute icon if tab size is different than default', function () {
       const wrapper = shallow(
         <AudioTabIcon
           tab={
@@ -152,7 +156,6 @@ describe('tabContent components', function () {
               audioMuted: true,
               breakpoint: 'small'
             })}
-
         />
       )
       assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.volumeOff)