reduce tab artifacts whilst transitioning by adding some styles to em…

…pty and dragging tabs

app/renderer/components/tabs/tab.js

@@ -104,11 +104,11 @@ class Tab extends React.Component {
       // In case there's a tab preview happening, cancel the preview
       // when mouse is over a tab
       windowActions.setTabPageHoverState(this.props.tabPageIndex, false)
-    // cache offset position for hover radial grandient
-    if (this.tabNode) {
-      const tabBounds = this.tabNode.getBoundingClientRect()
-      this.tabOffsetLeft = tabBounds.left
-    }
+      // cache offset position for hover radial grandient
+      if (this.tabNode) {
+        const tabBounds = this.tabNode.getBoundingClientRect()
+        this.tabOffsetLeft = tabBounds.left
+      }
     }
   }
 
@@ -361,7 +361,9 @@ class Tab extends React.Component {
       className={css(
         styles.tabArea,
         this.props.isDragging && styles.tabArea_isDragging,
+        this.props.anyTabIsDragging && styles.tabArea_anyTabIsDragging,
         this.props.isPinnedTab && styles.tabArea_isPinned,
+        this.props.isEmpty && styles.tabArea_empty,
         (this.props.partOfFullPageSet || !!this.props.tabWidth) && styles.tabArea_partOfFullPageSet,
         this.props.isPreview && styles.tabArea_isPreview,
         !this.props.isPreview && this.props.anyTabIsPreview && styles.tabArea_siblingIsPreview,
@@ -397,8 +399,7 @@ class Tab extends React.Component {
           // tab icon only (on pinned tab / small tab)
           this.props.isPinnedTab && styles.tabArea__tab_pinned,
           this.props.centralizeTabIcons && styles.tabArea__tab_centered,
-          this.props.showAudioTopBorder && styles.tabArea__tab_audioTopBorder,
-          this.props.isEmpty && styles.tabArea__tab_empty
+          this.props.showAudioTopBorder && styles.tabArea__tab_audioTopBorder
         )}
         data-test-id='tab'
         data-test-active-tab={this.props.isActive}
@@ -443,8 +444,6 @@ class Tab extends React.Component {
 
 const styles = StyleSheet.create({
   tabArea: {
-    // TODO: add will-change when any tab is being dragged, making it ready for animate, but dont do it always
-    willChange: 'transform',
     boxSizing: 'border-box',
     position: 'relative',
     overflow: 'hidden',
@@ -505,11 +504,19 @@ const styles = StyleSheet.create({
   },
 
   tabArea_isDragging: {
-    transform: 'translateX(var(--dragging-delta-x))',
     '--tab-transit-duration': '0 !important',
+    '--tab-background': `var(--tab-background-hover)`,
+    '--tab-color': `var(--tab-color-hover, ${theme.tab.color})`,
+    '--tab-default-icon-color': `var(--tab-default-icon-color-hover, ${theme.tab.defaultFaviconColor})`,
+    '--tab-border-color': `var(--tab-border-color-hover, ${theme.tab.borderColor})`,
+    transform: 'translateX(var(--dragging-delta-x))',
     zIndex: 200
   },
 
+  tabArea_anyTabIsDragging: {
+    willChange: 'transform'
+  },
+
   tabArea_isPinned: {
     flex: 'initial',
     width: 'auto'
@@ -519,6 +526,11 @@ const styles = StyleSheet.create({
     maxWidth: 'initial'
   },
 
+  tabArea_empty: {
+    '--tab-background': 'white',
+    '--tab-background-hover': 'white'
+  },
+
   tabArea_isActive: {
     '--tab-color': theme.tab.active.colorDark,
     '--tab-background': theme.tab.active.background,
@@ -635,10 +647,6 @@ const styles = StyleSheet.create({
     }
   },
 
-  tabArea__tab_isDragging: {
-
-  },
-
   tabArea__tab_pinned: {
     padding: 0,
     width: '28px',
@@ -652,10 +660,6 @@ const styles = StyleSheet.create({
     margin: 0
   },
 
-  tabArea__tab_empty: {
-    background: 'white'
-  },
-
   // The sentinel is responsible to respond to tabs
   // intersection state. This is an empty hidden element
   // which `width` value shouldn't be changed unless the intersection

app/renderer/components/tabs/tabs.js

@@ -426,7 +426,7 @@ const styles = StyleSheet.create({
     paddingLeft: '2px'
   },
   tabs__postTabButtons: {
-    background: '#ddd',
+    background: theme.tabsToolbar.backgroundColor,
     zIndex: 50, // underneath normal tab, on top of dragged tab
     opacity: 1,
     transition: 'opacity 120ms ease-in-out'