fixed race condition for popup commands

Robbendebiene · Feb 9, 2021 · 07c9d1a · 07c9d1a
1 parent 142cef8
commit 07c9d1a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/src/core/views/popup-command-view/iframe-popup-command-view.js b/src/core/views/popup-command-view/iframe-popup-command-view.js
@@ -12,7 +12,7 @@ browser.runtime.onConnect.addListener(handleConnection);
 /**
  * Builds all popup html contents
  **/
-async function initialize (dataset) {
+function initialize (dataset) {
   // add event listeners
   window.addEventListener("contextmenu", handleContextmenu, true);
   window.addEventListener("keydown", handleKeyDown, true);
@@ -42,32 +42,36 @@ async function initialize (dataset) {
   // append list
   document.body.appendChild(list);
 
-  // the width and height the list occupies
-  const requiredDimensions = {
-    width: list.scrollWidth,
-    height: list.scrollHeight
-  }
-  // initiate popup display
-  // also get the available width and height
-  const availableDimensions =  await browser.runtime.sendMessage({
-    subject: "popupInitiation",
-    data: requiredDimensions
-  });
-
-  // focus popup frame
-  window.focus();
-  window.onblur = handleBlur;
-
-  // add scroll buttons if list is scrollable
-  if (availableDimensions.height < requiredDimensions.height) {
-    const buttonUp = document.createElement("div");
-          buttonUp.classList.add("button", "up");
-          buttonUp.onmouseover = handleScrollButtonMouseover;
-    const buttonDown = document.createElement("div");
-          buttonDown.classList.add("button", "down");
-          buttonDown.onmouseover = handleScrollButtonMouseover;
-    document.body.append(buttonUp, buttonDown);
-  }
+  // append the code to the end of the event queue/wait untill the brwoser finished the reflow/repaint
+  // otherwise sometimes the dimensions of the list element are 0 due to a race condition
+  setTimeout(async () => {
+    // the width and height the list occupies
+    const requiredDimensions = {
+      width: list.scrollWidth,
+      height: list.scrollHeight
+    }
+    // initiate popup display
+    // also get the available width and height
+    const availableDimensions =  await browser.runtime.sendMessage({
+      subject: "popupInitiation",
+      data: requiredDimensions
+    });
+
+    // focus popup frame
+    window.focus();
+    window.onblur = handleBlur;
+
+    // add scroll buttons if list is scrollable
+    if (availableDimensions.height < requiredDimensions.height) {
+      const buttonUp = document.createElement("div");
+            buttonUp.classList.add("button", "up");
+            buttonUp.onmouseover = handleScrollButtonMouseover;
+      const buttonDown = document.createElement("div");
+            buttonDown.classList.add("button", "down");
+            buttonDown.onmouseover = handleScrollButtonMouseover;
+      document.body.append(buttonUp, buttonDown);
+    }
+  }, 0);
 }
 
 

diff --git a/src/core/views/popup-command-view/popup-command-view.css b/src/core/views/popup-command-view/popup-command-view.css
@@ -13,7 +13,7 @@ html {
 }
 
 #list {
-  display: inline-block;
+  display: block;
   max-width: 300px;
   padding: 1rem 0;
   cursor: default;