From c42f23c131d82a0b231a01f58ed037ab92d16033 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Fri, 8 May 2020 09:16:20 -0400
Subject: [PATCH] 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.
---
 src/js/popup-fenix.js | 30 +++++++++++-------------------
 1 file changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js
index 6d97384d8..7007b6bcc 100644
--- a/src/js/popup-fenix.js
+++ b/src/js/popup-fenix.js
@@ -1151,15 +1151,11 @@ const getPopupData = async function(tabId) {
         tabId = parseInt(matches[1], 10) || 0;
     }
 
-    const nextFrame = ( ) => {
-        return new Promise(resolve => {
-            self.requestAnimationFrame(( ) => { resolve(); });
-        });
-    };
-
     const nextFrames = async n => {
         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
     // when testing against viewport width.
     const checkViewport = async function() {
-        void document.body.offsetWidth;
-
-        await nextFrames(4);
-
         const root = document.querySelector(':root');
         if ( root.classList.contains('desktop') ) {
             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 minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1;
             if ( window.innerWidth < minWidth ) {
+                stickyParent.prepend(sticky);
                 root.classList.remove('desktop');
-            } else {
-                const sticky = document.getElementById('sticky');
-                if ( sticky.parentElement !== main ) {
-                    main.prepend(sticky);
-                }
             }
         }
-
-        await nextFrame();
-
+        await nextFrames(1);
         document.body.classList.remove('loading');
     };