From a54718862c9e9a4c5cfe3b6c2e6539a1c562f477 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sun, 3 May 2020 09:18:53 -0400
Subject: [PATCH] Maybe fix rare spurious viewport width test in popup panel

In rare instances -- though it definitely happens
eventually -- the popup panel viewport width is seen as
insufficiently wide enough and as a result the popup panel
is toggled into vertical-layout mode.

The added code uses animation frames to delay the
code testing the viewport width. Hopefully this will
work.
---
 src/js/popup-fenix.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js
index d4b1f27c4..85b56cab1 100644
--- a/src/js/popup-fenix.js
+++ b/src/js/popup-fenix.js
@@ -1150,10 +1150,21 @@ const getPopupData = async function(tabId) {
         tabId = parseInt(matches[1], 10) || 0;
     }
 
+    const nextFrame = ( ) => {
+        return new Promise(resolve => {
+            self.requestAnimationFrame(( ) => { resolve(); });
+        });
+    };
+
     // The purpose of the following code is to reset to a vertical layout
-    // should the viewport be not enough wide to accomodate the horizontal
+    // should the viewport not be enough wide to accomodate the horizontal
     // layout.
-    const checkViewport = function() {
+    // To avoid querying a spurious viewport width -- it happens sometimes,
+    // somehow -- we delay layout-changing operations to the next paint
+    // frames.
+    const checkViewport = async function() {
+        await nextFrame();
+    
         const root = document.querySelector(':root');
         if ( root.classList.contains('desktop') ) {
             const main = document.getElementById('main');
@@ -1168,14 +1179,15 @@ const getPopupData = async function(tabId) {
                 }
             }
         }
-        self.requestAnimationFrame(( ) => {
-            document.body.classList.remove('loading');
-        });
+    
+        await nextFrame();
+    
+        document.body.classList.remove('loading');
     };
 
     getPopupData(tabId).then(( ) => {
         if ( document.readyState !== 'complete' ) {
-            self.addEventListener('load', checkViewport, { once: true });
+            self.addEventListener('load', ( ) => { checkViewport(); }, { once: true });
         } else {
             checkViewport();
         }