Rerrange popup panel layout initializing code

Specifically, the sticky controls box is re-parented
pre-emptively instead of waiting for the decision as
to whether the panel must be toggled into a vertical
layout mode.
This commit is contained in:
Raymond Hill 2020-05-08 09:16:20 -04:00
parent d8bf72a435
commit c42f23c131
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
1 changed files with 11 additions and 19 deletions

View File

@ -1151,15 +1151,11 @@ const getPopupData = async function(tabId) {
tabId = parseInt(matches[1], 10) || 0; tabId = parseInt(matches[1], 10) || 0;
} }
const nextFrame = ( ) => {
return new Promise(resolve => {
self.requestAnimationFrame(( ) => { resolve(); });
});
};
const nextFrames = async n => { const nextFrames = async n => {
for ( let i = 0; i < n; i++ ) { for ( let i = 0; i < n; i++ ) {
await nextFrame(); await new Promise(resolve => {
self.requestAnimationFrame(( ) => { resolve(); });
});
} }
}; };
@ -1175,27 +1171,23 @@ const getPopupData = async function(tabId) {
// Use a tolerance proportional to the sum of the width of the panes // Use a tolerance proportional to the sum of the width of the panes
// when testing against viewport width. // when testing against viewport width.
const checkViewport = async function() { const checkViewport = async function() {
void document.body.offsetWidth;
await nextFrames(4);
const root = document.querySelector(':root'); const root = document.querySelector(':root');
if ( root.classList.contains('desktop') ) { if ( root.classList.contains('desktop') ) {
const main = document.getElementById('main'); const main = document.getElementById('main');
const sticky = document.getElementById('sticky');
const stickyParent = sticky.parentElement;
if ( stickyParent !== main ) {
main.prepend(sticky);
}
await nextFrames(4);
const firewall = document.getElementById('firewall'); const firewall = document.getElementById('firewall');
const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1; const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1;
if ( window.innerWidth < minWidth ) { if ( window.innerWidth < minWidth ) {
stickyParent.prepend(sticky);
root.classList.remove('desktop'); root.classList.remove('desktop');
} else {
const sticky = document.getElementById('sticky');
if ( sticky.parentElement !== main ) {
main.prepend(sticky);
} }
} }
} await nextFrames(1);
await nextFrame();
document.body.classList.remove('loading'); document.body.classList.remove('loading');
}; };