From 2cc6835de0e408ea7a9d87274ede3a8030531c1b Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Tue, 15 Nov 2022 09:44:19 -0500
Subject: [PATCH] Use placeholders to minimize vertical shifting at page load
 time

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/2361
---
 src/document-blocked.html  | 16 ++++++++--------
 src/js/document-blocked.js |  8 ++++++--
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/document-blocked.html b/src/document-blocked.html
index ebc38ddf9..36c26444d 100644
--- a/src/document-blocked.html
+++ b/src/document-blocked.html
@@ -17,24 +17,24 @@
     </div>
 
     <div>
-        <p data-i18n="docblockedPrompt1"></p>
+        <p data-i18n="docblockedPrompt1">_</p>
         <div id="theURL" class="collapsed">
-            <p class="code"><span></span><span id="toggleParse" class="hidden"><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
+            <p class="code"><span>&nbsp;</span><span id="toggleParse" class="hidden"><span class="fa-icon">zoom-in</span><span class="fa-icon">zoom-out</span></span></p>
             <ul id="parsed"></ul>
         </div>
     </div>
 
     <div>
-        <p data-i18n="docblockedPrompt2"></p>
-        <p id="why" class="code"></p>
-        <div id="whyex" style="display: none;">
-            <span data-i18n="docblockedFoundIn"></span>
-            <ul></ul>
+        <p data-i18n="docblockedPrompt2">_</p>
+        <p id="why" class="code">&nbsp;</p>
+        <div id="whyex" style="visibility: hidden;">
+            <span data-i18n="docblockedFoundIn">_</span>
+            <ul><li class="filterList">&nbsp;</ul>
         </div>
     </div>
 
     <div class="li">
-        <label><span class="input checkbox"><input type="checkbox" id="disableWarning"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="docblockedDontWarn"></span></label>
+        <label><span class="input checkbox"><input type="checkbox" id="disableWarning"><svg viewBox="0 0 24 24"><path d="M1.73,12.91 8.1,19.28 22.79,4.59"/></svg></span><span data-i18n="docblockedDontWarn">_</span></label>
     </div>
 
     <div id="actionContainer">
diff --git a/src/js/document-blocked.js b/src/js/document-blocked.js
index 7e91bdfa8..9e4f15cb7 100644
--- a/src/js/document-blocked.js
+++ b/src/js/document-blocked.js
@@ -53,9 +53,13 @@ let details = {};
         }
     }
 
-    if ( Array.isArray(lists) === false || lists.length === 0 ) { return; }
+    if ( Array.isArray(lists) === false || lists.length === 0 ) {
+        qs$('#whyex').style.setProperty('visibility', 'collapse');
+        return;
+    }
 
     const parent = qs$('#whyex > ul');
+    parent.firstElementChild.remove(); // remove placeholder element
     for ( const list of lists ) {
         const listElem = dom.clone('#templates .filterList');
         const sourceElem = qs$(listElem, '.filterListSource');
@@ -68,7 +72,7 @@ let details = {};
         }
         parent.appendChild(listElem);
     }
-    qs$('#whyex').style.removeProperty('display');
+    qs$('#whyex').style.removeProperty('visibility');
 })();
 
 /******************************************************************************/