From b92ae47e005ba42affd7d6c60d493ff9ecc00c71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Tue, 1 Dec 2020 00:32:29 +0100
Subject: [PATCH] Tweak colors and timing of the highlight on posted comments

* Use a slightly different color
* Use 'mix-blend-mode: multiply' when available to avoid fading
  the text color
* Add fade-in animation and make fade-out animation slower

Bug: T268994
Change-Id: I210ed4fd55c3dc184d13daf915fa93bee3699ad5
---
 modules/controller.js | 37 +++++++++++++++++++++++++++----------
 modules/dt.init.less  | 30 ++++++++++++++++++++++++------
 2 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/modules/controller.js b/modules/controller.js
index 44aeb6a02..b8931a06c 100644
--- a/modules/controller.js
+++ b/modules/controller.js
@@ -2,6 +2,7 @@
 
 var
 	$pageContainer,
+	$overlay,
 	Parser = require( './Parser.js' ),
 	ThreadItem = require( './ThreadItem.js' ),
 	logger = require( './logger.js' ),
@@ -20,26 +21,42 @@ function getApi() {
 
 function highlight( comment ) {
 	var padding = 5,
-		// $container must be position:relative/absolute
-		$container = OO.ui.getDefaultOverlay(),
-		containerRect = $container[ 0 ].getBoundingClientRect(),
-		rect = RangeFix.getBoundingClientRect( comment.getNativeRange() ),
+		overlayRect, rect,
 		$highlight = $( '<div>' ).addClass( 'dt-init-highlight' );
 
+	if ( !$overlay ) {
+		// $overlay must be position:relative/absolute
+		$overlay = $( '<div>' ).addClass( 'oo-ui-defaultOverlay' ).appendTo( 'body' );
+	}
+
+	overlayRect = $overlay[ 0 ].getBoundingClientRect();
+	rect = RangeFix.getBoundingClientRect( comment.getNativeRange() );
 	$highlight.css( {
-		top: rect.top - containerRect.top - padding,
-		left: rect.left - containerRect.left - padding,
+		top: rect.top - overlayRect.top - padding,
+		left: rect.left - overlayRect.left - padding,
 		width: rect.width + ( padding * 2 ),
 		height: rect.height + ( padding * 2 )
 	} );
-	$container.prepend( $highlight );
+	$overlay.prepend( $highlight );
 
+	// Pause for 500ms
+	// Fade in for 100ms
+	// Show for 1000ms
+	// Fade out for 500ms
+	// (animation durations are defined in CSS)
 	OO.ui.Element.static.scrollIntoView( $highlight[ 0 ], { padding: { top: 10, bottom: 10 } } ).then( function () {
 		setTimeout( function () {
-			$highlight.addClass( 'dt-init-highlight-fade' );
+			// Toggle the 'dt-init-highlight-overlay' class only when needed, because using mix-blend-mode
+			// affects the text rendering of the whole page, disabling subpixel antialiasing on Windows
+			$overlay.addClass( 'dt-init-highlight-overlay' );
+			$highlight.addClass( 'dt-init-highlight-fadein' );
 			setTimeout( function () {
-				$highlight.remove();
-			}, 500 );
+				$highlight.addClass( 'dt-init-highlight-fadeout' );
+				setTimeout( function () {
+					$highlight.remove();
+					$overlay.removeClass( 'dt-init-highlight-overlay' );
+				}, 500 );
+			}, 1000 + 100 );
 		}, 500 );
 	} );
 }
diff --git a/modules/dt.init.less b/modules/dt.init.less
index 81c5ed9dc..d17ad1f4d 100644
--- a/modules/dt.init.less
+++ b/modules/dt.init.less
@@ -44,13 +44,31 @@
 }
 
 .dt-init-highlight {
-	background: rgba( 255, 204, 51, 0.5 );
+	// Support: IE11
+	// On supporting browsers, we instead use non-transparent color with mix-blend-mode.
+	// Identical to #ffe29e on white background.
+	background-color: rgba( 255, 198, 60, 0.5 );
 	position: absolute;
 	pointer-events: none;
-	opacity: 1;
-	transition: opacity 500ms;
-}
-
-.dt-init-highlight-fade {
 	opacity: 0;
 }
+
+@supports ( mix-blend-mode: multiply ) {
+	.dt-init-highlight-overlay {
+		mix-blend-mode: multiply;
+	}
+
+	.dt-init-highlight {
+		background-color: #ffe29e;
+	}
+}
+
+.dt-init-highlight-fadein {
+	opacity: 1;
+	transition: opacity 100ms;
+}
+
+.dt-init-highlight-fadeout {
+	opacity: 0;
+	transition: opacity 500ms ease-out;
+}