Tweak preview tabs timeout & transition. Fixes #142

Tweak preview tabs timeout & transition. Fix #142

Tweak preview tabs timeout & transition. Fixes #142

js/components/tab.js

@@ -100,16 +100,17 @@ class Tab extends ImmutableComponent {
 
   onMouseLeave () {
     window.clearTimeout(this.hoverTimeout)
-    this.lastPreviewClearTime = new Date().getTime()
     windowActions.setPreviewFrame(null)
   }
 
-  onMouseEnter () {
-    // If a user has recently seen a preview they likely are scrolling through
-    // previews.  If we're not in preview mode we add a bit of hover time
-    // before doing a preview
-    const previewMode = new Date().getTime() - this.lastPreviewClearTime < 1500
-    window.clearTimeout(this.hoverClearTimeout)
+  onMouseEnter (e) {
+    // relatedTarget inside mouseenter checks which element before this event was the pointer on
+    // if this element has a tab-like class, then it's likely that the user was previewing
+    // a sequency of tabs. Called here as previewMode.
+    const previewMode = /tab/i.test(e.relatedTarget.classList)
+
+    // If user isn't in previewMode, we add a bit of delay to avoid tab from flashing out
+    // as reported here: https://github.com/brave/browser-laptop/issues/1434
     this.hoverTimeout =
       window.setTimeout(windowActions.setPreviewFrame.bind(null, this.props.frameProps), previewMode ? 0 : 400)
   }

less/window.less

@@ -3,7 +3,17 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import "variables.less";
-
+@keyframes tabFadeIn {
+  0% {
+    opacity: 0.5
+  }
+  50% {
+    opacity: 0.6
+  }
+  100% {
+    opacity: 0.5
+  }
+}
 :root {
   --default-font-family: "Arial";
 }
@@ -92,17 +102,17 @@ html,
     width: 100%;
     &.isPreview {
       opacity: 0.5;
+      animation: tabFadeIn 0.75s ease-in-out;
+      animation-fill-mode: forwards;
     }
   }
 
   &:not(.isActive) {
     z-index: @zindexWindowNotActive;
-    opacity: 0;
+
     &.isPreview {
       background: gray;
       z-index: @zindexWindowIsPreview;
-      opacity: 1;
-      transition: opacity @transitionDuration ease-in-out;
     }
 
     // Webviews can cause flickers w/ Chrome  v49 if left visible