From 767b2017e02b37bcf020de7f202a6c584b74b447 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 5 Jan 2021 19:54:49 +0300
Subject: [PATCH] wait for main stylesheet to load before forcing layout

---
 edit/edit.js     |  4 ++--
 js/dom.js        | 17 ++++++++++++++++-
 manage/manage.js |  5 ++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/edit/edit.js b/edit/edit.js
index fe51b0b3..1c99f45a 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -1,4 +1,4 @@
-/* global $ $create messageBoxProxy */// dom.js
+/* global $ $create messageBoxProxy waitForSheet */// dom.js
 /* global API msg */// msg.js
 /* global CodeMirror */
 /* global SectionsEditor */
@@ -16,7 +16,7 @@
 //#region init
 
 baseInit.ready.then(async () => {
-  await new Promise(requestAnimationFrame);
+  await waitForSheet();
   (editor.isUsercss ? SourceEditor : SectionsEditor)();
   await editor.ready;
   editor.ready = true;
diff --git a/js/dom.js b/js/dom.js
index 93d73278..8c642244 100644
--- a/js/dom.js
+++ b/js/dom.js
@@ -1,4 +1,4 @@
-/* global debounce */// toolbox.js
+/* global FIREFOX debounce */// toolbox.js
 /* global prefs */
 'use strict';
 
@@ -12,6 +12,7 @@
   moveFocus
   scrollElementIntoView
   setupLivePrefs
+  waitForSheet
 */
 
 Object.assign(EventTarget.prototype, {
@@ -356,6 +357,20 @@ function waitForSelector(selector, {recur, stopOnDomReady = true} = {}) {
   }
 }
 
+/**
+ * Forcing layout while the main stylesheet is still loading breaks page appearance
+ * so we'll wait until it loads (0-1 frames in Chrome, Firefox occasionally needs 2-3).
+ */
+async function waitForSheet({
+  href = location.pathname.replace('.html', '.css'),
+  maxFrames = FIREFOX ? 10 : 1,
+} = {}) {
+  const el = $(`link[href$="${href}"]`);
+  for (let i = 0; i < maxFrames && !el.sheet; i++) {
+    await new Promise(requestAnimationFrame);
+  }
+}
+
 //#endregion
 //#region Internals
 
diff --git a/manage/manage.js b/manage/manage.js
index 70ea15a3..04b3638a 100644
--- a/manage/manage.js
+++ b/manage/manage.js
@@ -13,6 +13,7 @@
   animateElement
   setupLivePrefs
   waitForSelector
+  waitForSheet
 */// dom.js
 'use strict';
 
@@ -94,7 +95,9 @@ newUI.renderClass();
     }}`);
 
   if (!VIVALDI) {
-    fitSelectBoxesIn($('#filters'));
+    waitForSheet().then(() => {
+      fitSelectBoxesIn($('#filters'));
+    });
   }
   if (CHROME >= 80 && CHROME <= 88) {
     // Wrong checkboxes are randomly checked after going back in history, https://crbug.com/1138598