Reduces number of renders

brave · May 1, 2017 · 2c95da4 · 2c95da4
1 parent 41df664
commit 2c95da4
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 131 deletions.
diff --git a/app/renderer/components/tabs/content/audioTabIcon.js b/app/renderer/components/tabs/content/audioTabIcon.js
@@ -48,23 +48,20 @@ class AudioTabIcon extends React.Component {
 
     const props = {}
     // used in renderer
-    props.shouldShowAudioIcon = tab.get('breakpoint') === 'default'
-    props.pageCanPlayAudio = !!tab.get('audioPlaybackActive')
 
     // used in other functions
+    props.pageCanPlayAudio = !!tab.get('audioPlaybackActive')
     props.tabId = frame ? frame.get('tabId') : tabState.TAB_ID_NONE
     props.audioMuted = tab.get('audioMuted')
 
     return Object.assign({}, ownProps, props)
   }
 
   render () {
-    return this.props.pageCanPlayAudio && this.props.shouldShowAudioIcon
-      ? <TabIcon
-        className={css(tabStyles.icon, styles.audioIcon)}
-        symbol={this.audioIcon}
-        onClick={this.toggleMute} />
-      : null
+    return <TabIcon
+      className={css(tabStyles.icon, styles.audioIcon)}
+      symbol={this.audioIcon}
+      onClick={this.toggleMute} />
   }
 }
 

diff --git a/app/renderer/components/tabs/content/closeTabIcon.js b/app/renderer/components/tabs/content/closeTabIcon.js
@@ -9,9 +9,6 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 const ReduxComponent = require('../../reduxComponent')
 const TabIcon = require('./tabIcon')
 
-// State
-const tabState = require('../../../../common/state/tabState.js')
-
 // Store
 const windowStore = require('../../../../../js/stores/windowStore.js')
 
@@ -44,29 +41,16 @@ class CloseTabIcon extends React.Component {
   }
 
   mergeProps (state, dispatchProps, ownProps) {
-    const currentWindow = state.get('currentWindow')
-
-    const props = {}
-    // used in renderer
-    props.isPinned = tabState.isPinned(currentWindow, ownProps.frameKey)
-    props.hasRelativeCloseIcon = tabState.hasRelativeCloseIcon(currentWindow, ownProps.frameKey)
-    props.hasFixedCloseIcon = tabState.hasFixedCloseIcon(currentWindow, ownProps.frameKey)
-
-    // used in other functions
-
-    return Object.assign({}, ownProps, props)
+    return ownProps
   }
 
   render () {
-    return !this.props.isPinned &&
-    (this.props.hasRelativeCloseIcon || this.props.hasFixedCloseIcon)
-      ? <TabIcon
-        data-test-id='closeTabIcon'
-        className={css(styles.closeTab)}
-        l10nId='closeTabButton'
-        onClick={this.onClick}
-      />
-      : null
+    return <TabIcon
+      data-test-id='closeTabIcon'
+      className={css(styles.closeTab)}
+      l10nId='closeTabButton'
+      onClick={this.onClick}
+    />
   }
 }
 

diff --git a/app/renderer/components/tabs/content/favIcon.js b/app/renderer/components/tabs/content/favIcon.js
@@ -12,10 +12,6 @@ const TabIcon = require('./tabIcon')
 // State
 const tabState = require('../../../../common/state/tabState.js')
 
-// Utils
-const {hasBreakpoint} = require('../../../lib/tabUtil')
-const frameStateUtil = require('../../../../../js/state/frameStateUtil.js')
-
 // Styles
 const globalStyles = require('../../styles/global')
 const tabStyles = require('../../styles/tab')
@@ -28,13 +24,6 @@ class Favicon extends React.Component {
       ? globalStyles.appIcons.defaultIcon
       : null
   }
-  get shouldHideFavicon () {
-    return (
-        hasBreakpoint(this.props.breakpoint, 'extraSmall') &&
-        this.props.isActive
-      ) ||
-      this.props.location === 'about:newtab'
-  }
 
   mergeProps (state, dispatchProps, ownProps) {
     const currentWindow = state.get('currentWindow')
@@ -50,11 +39,6 @@ class Favicon extends React.Component {
     props.tabIconColor = tabState.getTabIconColor(currentWindow, ownProps.frameKey)
     props.isNarrowestView = tabState.isNarrowestView(currentWindow, ownProps.frameKey)
 
-    // used in other functions
-    props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, ownProps.frameKey)
-    props.breakpoint = tab.get('breakpoint')
-    props.location = tab.get('location')
-
     return Object.assign({}, ownProps, props)
   }
 
@@ -70,20 +54,18 @@ class Favicon extends React.Component {
       }
     })
 
-    return !this.shouldHideFavicon
-      ? <TabIcon
-        data-test-favicon={this.props.favicon}
-        data-test-id={this.props.isTabLoading ? 'loading' : 'defaultIcon'}
-        className={css(
-          tabStyles.icon,
-          this.props.favicon && iconStyles.favicon,
-          !this.props.isPinnedTab && this.props.isNarrowestView && styles.faviconNarrowView
-        )}
-        symbol={
-          (this.props.isTabLoading && css(styles.loadingIcon, iconStyles.loadingIconColor)) ||
-          this.defaultIcon
-        } />
-      : null
+    return <TabIcon
+      data-test-favicon={this.props.favicon}
+      data-test-id={this.props.isTabLoading ? 'loading' : 'defaultIcon'}
+      className={css(
+        tabStyles.icon,
+        this.props.favicon && iconStyles.favicon,
+        !this.props.isPinnedTab && this.props.isNarrowestView && styles.faviconNarrowView
+      )}
+      symbol={
+        (this.props.isTabLoading && css(styles.loadingIcon, iconStyles.loadingIconColor)) ||
+        this.defaultIcon
+      } />
   }
 }
 

diff --git a/app/renderer/components/tabs/content/newSessionIcon.js b/app/renderer/components/tabs/content/newSessionIcon.js
@@ -32,7 +32,6 @@ class NewSessionIcon extends React.Component {
     // used in renderer
     props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, ownProps.frameKey)
     props.iconColor = tabState.getTabIconColor(currentWindow, ownProps.frameKey)
-    props.hasVisibleSecondaryIcon = tabState.hasVisibleSecondaryIcon(currentWindow, ownProps.frameKey)
     props.partitionNumber = typeof partition === 'string'
       ? partition.replace(/^partition-/i, '')
       : partition
@@ -52,15 +51,13 @@ class NewSessionIcon extends React.Component {
       }
     })
 
-    return this.props.partitionNumber && this.props.hasVisibleSecondaryIcon
-      ? <TabIcon symbol
-        data-test-id='newSessionIcon'
-        className={css(tabStyles.icon, styles.newSession, newSession.indicator)}
-        symbolContent={this.props.partitionIndicator}
-        l10nArgs={this.props.partition}
-        l10nId='sessionInfoTab'
-      />
-      : null
+    return <TabIcon symbol
+      data-test-id='newSessionIcon'
+      className={css(tabStyles.icon, styles.newSession, newSession.indicator)}
+      symbolContent={this.props.partitionIndicator}
+      l10nArgs={this.props.partitionNumber}
+      l10nId='sessionInfoTab'
+    />
   }
 }
 

diff --git a/app/renderer/components/tabs/content/privateIcon.js b/app/renderer/components/tabs/content/privateIcon.js
@@ -9,9 +9,6 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 const ReduxComponent = require('../../reduxComponent')
 const TabIcon = require('./tabIcon')
 
-// State
-const tabState = require('../../../../common/state/tabState.js')
-
 // Utils
 const frameStateUtil = require('../../../../../js/state/frameStateUtil.js')
 
@@ -23,13 +20,10 @@ const privateSvg = require('../../../../extensions/brave/img/tabs/private.svg')
 class PrivateIcon extends React.Component {
   mergeProps (state, dispatchProps, ownProps) {
     const currentWindow = state.get('currentWindow')
-    const tab = tabState.getTabWindowProps(currentWindow, ownProps.frameKey)
 
     const props = {}
     // used in renderer
     props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, ownProps.frameKey)
-    props.isPrivate = tab.get('isPrivate')
-    props.hasVisibleSecondaryIcon = tabState.hasVisibleSecondaryIcon(currentWindow, ownProps.frameKey)
 
     return Object.assign({}, ownProps, props)
   }
@@ -41,12 +35,10 @@ class PrivateIcon extends React.Component {
       }
     })
 
-    return this.props.isPrivate && this.props.hasVisibleSecondaryIcon
-      ? <TabIcon
-        data-test-id='privateIcon'
-        className={css(tabStyles.icon, styles.secondaryIcon, privateStyles.icon)}
-      />
-      : null
+    return <TabIcon
+      data-test-id='privateIcon'
+      className={css(tabStyles.icon, styles.secondaryIcon, privateStyles.icon)}
+    />
   }
 }
 

diff --git a/app/renderer/components/tabs/content/tabTitle.js b/app/renderer/components/tabs/content/tabTitle.js
@@ -12,38 +12,22 @@ const ReduxComponent = require('../../reduxComponent')
 const tabState = require('../../../../common/state/tabState')
 
 // Utils
-const {hasBreakpoint} = require('../../../lib/tabUtil')
 const {isWindows, isDarwin} = require('../../../../common/lib/platformUtil')
-const frameStateUtil = require('../../../../../js/state/frameStateUtil.js')
 
 // Styles
 const globalStyles = require('../../styles/global')
 
 class TabTitle extends React.Component {
-  get shouldHideTitle () {
-    return (
-        hasBreakpoint(this.props.breakpoint, 'small') &&
-        this.props.isActive
-      ) ||
-      hasBreakpoint(this.props.breakpoint, ['extraSmall', 'smallest'])
-  }
-
   mergeProps (state, dispatchProps, ownProps) {
     const currentWindow = state.get('currentWindow')
-    const tab = tabState.getTabWindowProps(currentWindow, ownProps.frameKey)
     const tabIconColor = tabState.getTabIconColor(currentWindow, ownProps.frameKey)
 
     const props = {}
     // used in renderer
-    props.isPinned = tab.get('pinnedLocation')
     props.enforceFontVisibilty = isDarwin() && tabIconColor === 'white'
     props.tabIconColor = tabIconColor
     props.displayTitle = tabState.getDisplayTitle(currentWindow, ownProps.frameKey)
 
-    // used in other functions
-    props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, ownProps.frameKey)
-    props.breakpoint = tab.get('breakpoint')
-
     return Object.assign({}, ownProps, props)
   }
 
@@ -55,18 +39,16 @@ class TabTitle extends React.Component {
       }
     })
 
-    return !this.props.isPinned && !this.shouldHideTitle
-      ? <div data-test-id='tabTitle'
-        className={css(
-          styles.tabTitle,
-          titleStyles.gradientText,
-          this.props.enforceFontVisibilty && styles.enforceFontVisibilty,
-          // Windows specific style
-          isWindows() && styles.tabTitleForWindows
-        )}>
-        {this.props.displayTitle}
-      </div>
-      : null
+    return <div data-test-id='tabTitle'
+      className={css(
+        styles.tabTitle,
+        titleStyles.gradientText,
+        this.props.enforceFontVisibilty && styles.enforceFontVisibilty,
+        // Windows specific style
+        isWindows() && styles.tabTitleForWindows
+      )}>
+      {this.props.displayTitle}
+    </div>
   }
 }
 

diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js
@@ -44,6 +44,7 @@ const {isWindows} = require('../../../common/lib/platformUtil')
 const {getCurrentWindowId} = require('../../currentWindow')
 const getSetting = require('../../../../js/settings').getSetting
 const UrlUtil = require('../../../../js/lib/urlutil')
+const {hasBreakpoint} = require('../../lib/tabUtil')
 
 class Tab extends React.Component {
   constructor () {
@@ -218,12 +219,15 @@ class Tab extends React.Component {
   mergeProps (state, dispatchProps, ownProps) {
     const currentWindow = state.get('currentWindow')
     const tab = tabState.getTabWindowProps(currentWindow, ownProps.frameKey)
-
     const notifications = state.get('notifications')
     const notificationOrigins = notifications ? notifications.map(bar => bar.get('frameOrigin')) : false
-
     const notificationBarActive = tab.get('location') && notificationOrigins &&
       notificationOrigins.includes(UrlUtil.getUrlOrigin(tab.get('location')))
+    const hasSeconardImage = tabState.hasVisibleSecondaryIcon(currentWindow, ownProps.frameKey)
+    const breakpoint = tab.get('breakpoint')
+    const partition = typeof tab.get('partitionNumber') === 'string'
+      ? tab.get('partitionNumber').replace(/^partition-/i, '')
+      : tab.get('partitionNumber')
 
     const props = {}
     // used in renderer
@@ -242,6 +246,20 @@ class Tab extends React.Component {
     props.isPlayIndicatorBreakpoint = tabState.isMediumView(currentWindow, ownProps.frameKey) || props.isNarrowView
     props.title = tab.get('title')
     props.displayTitle = tabState.getDisplayTitle(currentWindow, ownProps.frameKey)
+    props.showSessionIcon = partition && hasSeconardImage
+    props.showPrivateIcon = props.isPrivateTab && hasSeconardImage
+    props.showFavIcon = !((hasBreakpoint(breakpoint, 'extraSmall') && props.isActive) || tab.get('location') === 'about:newtab')
+    props.showAudioIcon = breakpoint === 'default' && !!tab.get('audioPlaybackActive')
+    props.showTitle = !props.isPinnedTab &&
+      !(
+        (hasBreakpoint(breakpoint, 'small') && props.isActive) ||
+        hasBreakpoint(breakpoint, ['extraSmall', 'smallest'])
+      )
+    props.showCloseIcon = !props.isPinnedTab &&
+      (
+        tabState.hasRelativeCloseIcon(currentWindow, ownProps.frameKey) ||
+        tabState.hasFixedCloseIcon(currentWindow, ownProps.frameKey)
+      )
 
     // used in other functions
     props.totalTabs = state.get('tabs').size
@@ -316,25 +334,37 @@ class Tab extends React.Component {
           this.props.isNarrowView && styles.tabIdNarrowView,
           this.props.breakpoint === 'smallest' && styles.tabIdMinAllowedSize
           )}>
-          <Favicon
-            frameKey={this.props.frameKey}
-          />
-          <AudioTabIcon
-            frameKey={this.props.frameKey}
-          />
-          <TabTitle
-            frameKey={this.props.frameKey}
-          />
+          {
+            this.props.showFavIcon
+            ? <Favicon frameKey={this.props.frameKey} />
+            : null
+          }
+          {
+            this.props.showAudioIcon
+            ? <AudioTabIcon frameKey={this.props.frameKey} />
+            : null
+          }
+          {
+            this.props.showTitle
+            ? <TabTitle frameKey={this.props.frameKey} />
+            : null
+          }
         </div>
-        <PrivateIcon
-          frameKey={this.props.frameKey}
-         />
-        <NewSessionIcon
-          frameKey={this.props.frameKey}
-        />
-        <CloseTabIcon
-          frameKey={this.props.frameKey}
-        />
+        {
+          this.props.showPrivateIcon
+          ? <PrivateIcon frameKey={this.props.frameKey} />
+          : null
+        }
+        {
+          this.props.showSessionIcon
+          ? <NewSessionIcon frameKey={this.props.frameKey} />
+          : null
+        }
+        {
+          this.props.showCloseIcon
+          ? <CloseTabIcon frameKey={this.props.frameKey} />
+          : null
+        }
       </div>
     </div>
   }