From 75af9ec9b545bfe1c7f8f80bc8771d7af5f6e9b4 Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Wed, 11 Sep 2019 20:27:53 +0100 Subject: [PATCH] Decrease onresize debounce from 100ms to 10ms The debounce is trailing, not leading/throttled. This means the value doesn't decide how often it runs while the user is resizing. It decides how long after they stop resizing will it first run. Given the calculation isn't super expensive, a much lower value should suffice. The main thing we want is that while the user is actively resizing and 100s of events are queued up (faster than JS can process), that we wait until the end of the chain before computing it (once). If the user actually stops moving, even for a little bit, that little bit however small should be more than long enough for a repaint to take place. Test Plan: * Open two tabs, one after checking out master, and one after checking out this patch. Make sure you are logged-in on MW as an administrator user (to get more tabs). * Verify that `mw.loader.getVersion('skins.vector.js')` returns different values from the console for each. * Resize the window from wide to very narrow and back. Before, the tab bar updates relatively late it feels sluggish. After, the tab bar appears to update as/while you let go. Change-Id: If02338559abc71668d0655e8b3be1a5f73e646a9 --- collapsibleTabs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/collapsibleTabs.js b/collapsibleTabs.js index a569887..9800856 100644 --- a/collapsibleTabs.js +++ b/collapsibleTabs.js @@ -50,7 +50,7 @@ // if we haven't already bound our resize handler, bind it now if ( !boundEvent ) { boundEvent = true; - $( window ).on( 'resize', mw.util.debounce( 100, function () { + $( window ).on( 'resize', mw.util.debounce( 10, function () { rAF( $.collapsibleTabs.handleResize ); } ) ); }