From ca9e4f8284c3357dc4f060c0863e4f19162ea7e6 Mon Sep 17 00:00:00 2001
From: Cezar Augusto <cezaraugusto@outlook.it>
Date: Fri, 29 Jul 2016 03:00:34 -0300
Subject: [PATCH] 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 | 15 ++++++++-------
 less/window.less     | 18 ++++++++++++++----
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/js/components/tab.js b/js/components/tab.js
index 8f388ff78ac..0c03b4f1f1e 100644
--- a/js/components/tab.js
+++ b/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)
   }
diff --git a/less/window.less b/less/window.less
index c96a9e5fca1..45892ede269 100644
--- a/less/window.less
+++ b/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