Use placeholders to minimize vertical shifting at page load time

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/2361
This commit is contained in:
Raymond Hill 2022-11-15 09:44:19 -05:00
parent e68537513f
commit 2cc6835de0
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
2 changed files with 14 additions and 10 deletions

View File

@ -17,24 +17,24 @@
</div> </div>
<div> <div>
<p data-i18n="docblockedPrompt1"></p> <p data-i18n="docblockedPrompt1">_</p>
<div id="theURL" class="collapsed"> <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> <ul id="parsed"></ul>
</div> </div>
</div> </div>
<div> <div>
<p data-i18n="docblockedPrompt2"></p> <p data-i18n="docblockedPrompt2">_</p>
<p id="why" class="code"></p> <p id="why" class="code">&nbsp;</p>
<div id="whyex" style="display: none;"> <div id="whyex" style="visibility: hidden;">
<span data-i18n="docblockedFoundIn"></span> <span data-i18n="docblockedFoundIn">_</span>
<ul></ul> <ul><li class="filterList">&nbsp;</ul>
</div> </div>
</div> </div>
<div class="li"> <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>
<div id="actionContainer"> <div id="actionContainer">

View File

@ -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'); const parent = qs$('#whyex > ul');
parent.firstElementChild.remove(); // remove placeholder element
for ( const list of lists ) { for ( const list of lists ) {
const listElem = dom.clone('#templates .filterList'); const listElem = dom.clone('#templates .filterList');
const sourceElem = qs$(listElem, '.filterListSource'); const sourceElem = qs$(listElem, '.filterListSource');
@ -68,7 +72,7 @@ let details = {};
} }
parent.appendChild(listElem); parent.appendChild(listElem);
} }
qs$('#whyex').style.removeProperty('display'); qs$('#whyex').style.removeProperty('visibility');
})(); })();
/******************************************************************************/ /******************************************************************************/