Do not re-create stylesheet rules every time tabs are rendered

Helps with performance, instead use css variables to pass js variables to css. Fix brave#11465
petemill · Oct 12, 2017 · 2b39bc9 · 2b39bc9
1 parent 74688c9
commit 2b39bc9
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 50 deletions.
diff --git a/app/renderer/components/tabs/content/favIcon.js b/app/renderer/components/tabs/content/favIcon.js
@@ -52,45 +52,40 @@ class Favicon extends React.Component {
       return null
     }
 
-    const iconStyles = StyleSheet.create({
-      icon__loading_color: {
-        filter: this.props.tabIconColor === 'white'
-          ? filter.makeWhite
-          : 'none'
-      },
-      icon__favicon: {
-        backgroundImage: `url(${this.props.favicon})`,
-        filter: this.props.tabIconColor === 'white'
-          ? filter.whiteShadow
-          : 'none'
-      },
-      icon__default_sizeAndColor: {
-        WebkitMaskSize: this.props.showIconAtReducedSize ? '10px' : '12px',
-        backgroundColor: this.props.tabIconColor === 'white'
-          ? color.white100
-          : color.mediumGray
-      }
-    })
+    const themeLight = this.props.tabIconColor === 'white'
+    const instanceStyles = { }
+    if (this.props.favicon) {
+      instanceStyles['--faviconsrc'] = `url(${this.props.favicon})`
+    }
 
     return <TabIcon
       data-test-favicon={this.props.favicon}
       data-test-id={this.testingIcon}
       className={css(
         styles.icon,
-        this.props.favicon && iconStyles.icon__favicon,
+        this.props.favicon && styles.icon_favicon,
+        this.props.favicon && themeLight && styles.icon_faviconLight,
         !this.props.isPinned && this.props.showIconWithLessMargin && styles.icon_lessMargin,
         !this.props.isPinned && this.props.showIconAtReducedSize && styles.icon_reducedSize
       )}
+      style={instanceStyles}
       symbol={
         this.props.tabLoading
           ? (
             // no loading icon if there's no room for the icon
             !this.props.showIconAtReducedSize &&
-            css(styles.icon__loading, iconStyles.icon__loading_color)
+            css(
+              styles.icon__loading,
+              themeLight && styles.icon__loading_colorLight
+            )
           )
           : (
             !this.props.favicon &&
-            css(styles.icon__default, iconStyles.icon__default_sizeAndColor)
+            css(
+              styles.icon__defaultIcon,
+              this.props.showIconAtReducedSize && styles.icon__defaultIcon_reducedSize,
+              themeLight && styles.icon__defaultIcon_colorLight
+            )
           )
       } />
   }
@@ -119,6 +114,14 @@ const styles = StyleSheet.create({
     alignSelf: 'center'
   },
 
+  icon_favicon: {
+    backgroundImage: 'var(--faviconsrc)'
+  },
+
+  icon_faviconLight: {
+    filter: filter.whiteShadow
+  },
+
   icon_lessMargin: {
     margin: 0
   },
@@ -143,9 +146,22 @@ const styles = StyleSheet.create({
     animationIterationCount: 'infinite'
   },
 
-  icon__default: {
+  icon__loading_colorLight: {
+    filter: filter.makeWhite
+  },
+
+  icon__defaultIcon: {
     WebkitMaskRepeat: 'no-repeat',
     WebkitMaskPosition: 'center',
-    WebkitMaskImage: `url(${defaultIconSvg})`
+    WebkitMaskImage: `url(${defaultIconSvg})`,
+    WebkitMaskSize: '12px',
+    backgroundColor: color.mediumGray
+  },
+
+  icon__defaultIcon_reducedSize: {
+    WebkitMaskSize: '10px'
+  },
+  icon__defaultIcon_colorLight: {
+    backgroundColor: color.white100
   }
 })
diff --git a/app/renderer/components/tabs/content/tabIcon.js b/app/renderer/components/tabs/content/tabIcon.js
@@ -16,19 +16,6 @@ const globalStyles = require('../../styles/global')
 
 class TabIcon extends ImmutableComponent {
   render () {
-    const styles = StyleSheet.create({
-      tabIcon: {
-        fontSize: this.props.symbolContent ? '8px' : 'inherit',
-        display: 'flex',
-        width: globalStyles.spacing.iconSize,
-        height: globalStyles.spacing.iconSize,
-        alignItems: 'center',
-        justifyContent: this.props.symbolContent ? 'flex-end' : 'center',
-        fontWeight: this.props.symbolContent ? 'bold' : 'normal',
-        color: this.props.symbolContent ? globalStyles.color.black100 : 'inherit'
-      }
-    })
-
     let altProps
     if (!this.props.symbol) {
       altProps = {
@@ -43,14 +30,15 @@ class TabIcon extends ImmutableComponent {
       onDragStart={this.props.onDragStart}
       draggable={this.props.draggable}
       onClick={this.props.onClick}
+      style={this.props.style}
       {...altProps}
     >
       {
         this.props.symbol
           ? <span
             className={cx({
               [this.props.symbol]: true,
-              [css(styles.tabIcon)]: true
+              [css(styles.tabIcon, this.props.symbolContent && styles.tabIcon_hasSymbol)]: true
             })}
             data-test-id={this.props['data-test-id']}
             data-test2-id={this.props['data-test2-id']}
@@ -63,4 +51,24 @@ class TabIcon extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  tabIcon: {
+    fontSize: 'inherit',
+    display: 'flex',
+    width: globalStyles.spacing.iconSize,
+    height: globalStyles.spacing.iconSize,
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: 'normal',
+    color: 'inherit'
+  },
+
+  tabIcon_hasSymbol: {
+    fontSize: '8px',
+    justifyContent: 'flex-end',
+    fontWeight: 'bold',
+    color: globalStyles.color.black100
+  }
+})
+
 module.exports = TabIcon
diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js
@@ -281,16 +281,12 @@ class Tab extends React.Component {
 
   render () {
     // we don't want themeColor if tab is private
-    const perPageStyles = !this.props.isPrivateTab && StyleSheet.create({
-      tab_themeColor: {
-        color: this.props.themeColor ? getTextColorForBackground(this.props.themeColor) : 'inherit',
-        background: this.props.themeColor ? this.props.themeColor : 'inherit',
-        ':hover': {
-          color: this.props.themeColor ? getTextColorForBackground(this.props.themeColor) : 'inherit',
-          background: this.props.themeColor ? this.props.themeColor : 'inherit'
-        }
-      }
-    })
+    const isThemed = !this.props.isPrivateTab && this.props.isActive && this.props.themeColor
+    const instanceStyles = { }
+    if (isThemed) {
+      instanceStyles['--theme-color-fg'] = getTextColorForBackground(this.props.themeColor)
+      instanceStyles['--theme-color-bg'] = this.props.themeColor
+    }
     return <div
       data-tab-area
       className={cx({
@@ -321,13 +317,14 @@ class Tab extends React.Component {
           isWindows && styles.tab_forWindows,
           this.props.isPinnedTab && styles.tab_pinned,
           this.props.isActive && styles.tab_active,
-          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,
-          this.props.centralizeTabIcons && styles.tab__content_centered
+          this.props.centralizeTabIcons && styles.tab__content_centered,
+          isThemed && styles.tab_themed
         )}
+        style={instanceStyles}
         data-test-id='tab'
         data-test-active-tab={this.props.isActive}
         data-test-pinned-tab={this.props.isPinnedTab}
@@ -382,6 +379,15 @@ const styles = StyleSheet.create({
     }
   },
 
+  tab_themed: {
+    color: `var(--theme-color-fg, inherit)`,
+    background: `var(--theme-color-bg, inherit)`,
+    ':hover': {
+      color: `var(--theme-color-fg, inherit)`,
+      background: `var(--theme-color-bg, inherit)`,
+    }
+  },
+
   // Windows specific style
   tab_forWindows: {
     color: theme.tab.forWindows.color