From 2c85104eb9e68d16edb35c5afded1005a6eb227f Mon Sep 17 00:00:00 2001
From: Timo Tijhof <krinklemail@gmail.com>
Date: Fri, 16 Dec 2016 21:47:28 -0800
Subject: [PATCH] mediawiki.special.watchlist: Fix render stampede after "Mark
 all pages visited"

Follow-up 9ea1142fad, f4d70ceedc, 73592aea1c.

The progress bar has a continuous animation that is rather CPU heavy.
While it is set to 'visibility hidden', this is merely a way to make the
contents of the element transparent. It is still interactable (e.g. if it
has hover or click handlers, they would trigger if hovering in that area)
and still rendered with full 60fps paint and layout.

Instead, detach and (re-)append the element as needed. Since the element
has an absolute position, it doesn't cause a content reflow when the element
is detached. This fact is already made use of considering the element is
inserted only after the submit button is clicked - without content reflow.

Change-Id: I06ef0d527044e5a6080febdb618eaffeb6ec85fa
---
 .../mediawiki.special/mediawiki.special.watchlist.js   | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/resources/src/mediawiki.special/mediawiki.special.watchlist.js b/resources/src/mediawiki.special/mediawiki.special.watchlist.js
index 9ca98c08ee..7cc9b9bb5a 100644
--- a/resources/src/mediawiki.special/mediawiki.special.watchlist.js
+++ b/resources/src/mediawiki.special/mediawiki.special.watchlist.js
@@ -16,17 +16,15 @@
 			// Disable reset button to prevent multiple concurrent requests
 			$button.prop( 'disabled', true );
 
-			// Show progress bar
-			if ( $progressBar ) {
-				$progressBar.css( 'visibility', 'visible' );
-			} else {
+			if ( !$progressBar ) {
 				$progressBar = new OO.ui.ProgressBarWidget( { progress: false } ).$element;
 				$progressBar.css( {
 					position: 'absolute',
 					width: '100%'
 				} );
-				$resetForm.append( $progressBar );
 			}
+			// Show progress bar
+			$resetForm.append( $progressBar );
 
 			// Use action=setnotificationtimestamp to mark all as visited,
 			// then set all watchlist lines accordingly
@@ -39,7 +37,7 @@
 				$button.prop( 'disabled', false );
 				// Hide the button because further clicks can not generate any visual changes
 				$button.css( 'visibility', 'hidden' );
-				$progressBar.css( 'visibility', 'hidden' );
+				$progressBar.detach();
 				$( '.mw-changeslist-line-watched' )
 					.removeClass( 'mw-changeslist-line-watched' )
 					.addClass( 'mw-changeslist-line-not-watched' );
-- 
2.20.1