simplify and speed up init in manage/edit

edit/edit.js

@@ -1,4 +1,4 @@
-/* global $$ $ $create messageBoxProxy waitForSheet */// dom.js
+/* global $$ $ $create messageBoxProxy */// dom.js
 /* global API msg */// msg.js
 /* global CodeMirror */
 /* global SectionsEditor */
@@ -17,11 +17,9 @@
 
 document.body.appendChild(t.template.body);
 
-baseInit.ready.then(async () => {
-  [editor.template] = await Promise.all([editor.template, waitForSheet()]);
-  (editor.isUsercss ? SourceEditor : SectionsEditor)();
-  await editor.ready;
-  editor.ready = true;
+EditorMethods();
+editor.livePreview = LivePreview();
+(editor.isUsercss ? SourceEditor : SectionsEditor)().then(() => {
   editor.dirty.onChange(editor.updateDirty);
   prefs.subscribe('editor.linter', () => linterMan.run());
 
@@ -55,7 +53,7 @@ baseInit.ready.then(async () => {
     '/edit/drafts',
     '/edit/global-search',
   ]);
-}).then(() => {
+
   // Set up mini-header on scroll
   const {isUsercss} = editor;
   const el = $create({
@@ -183,7 +181,7 @@ window.on('beforeunload', e => {
 //#endregion
 //#region editor methods
 
-(() => {
+function EditorMethods() {
   const toc = [];
   const {dirty} = editor;
   let {style} = editor;
@@ -312,12 +310,12 @@ window.on('beforeunload', e => {
       editor.updateMeta();
     },
   });
-})();
+}
 
 //#endregion
 //#region editor livePreview
 
-editor.livePreview = (() => {
+function LivePreview() {
   let data;
   let port;
   let preprocess;
@@ -383,7 +381,7 @@ editor.livePreview = (() => {
       };
     }
   }
-})();
+}
 
 //#endregion
 //#region colorpickerHelper

edit/sections-editor-section.js

@@ -23,7 +23,7 @@ function createSection(originalSection, genId, si) {
   const elLabel = $('.code-label', el);
   const cm = cmFactory.create(wrapper => {
     // making it tall during initial load so IntersectionObserver sees only one adjacent CM
-    if (editor.ready !== true) {
+    if (editor.loading) {
       wrapper.style.height = si ? si.height : '100vh';
     }
     elLabel.after(wrapper);

edit/sections-editor.js

@@ -123,7 +123,7 @@ function SectionsEditor() {
     },
   });
 
-  editor.ready = initSections(style.sections);
+  return initSections(style.sections);
 
   /** @param {EditorSection} section */
   function fitToContent(section) {
@@ -473,7 +473,7 @@ function SectionsEditor() {
     keepDirty = false,
     si = editor.scrollInfo,
   } = {}) {
-    editor.ready = false;
+    Object.assign(editor, /** @namespace Editor */ {loading: true});
     if (replace) {
       sections.forEach(s => s.remove(true));
       sections.length = 0;
@@ -511,7 +511,7 @@ function SectionsEditor() {
     }
     container.style.removeProperty('height');
     setGlobalProgress();
-    editor.ready = true;
+    editor.loading = false;
   }
 
   /** @param {EditorSection} section */

edit/source-editor.js

@@ -14,7 +14,7 @@
 'use strict';
 
 /* exported SourceEditor */
-function SourceEditor() {
+async function SourceEditor() {
   const {style, /** @type DirtyReporter */dirty} = editor;
   const DEFAULT_TEMPLATE = `
     /* ==UserStyle==
@@ -38,7 +38,7 @@ function SourceEditor() {
   const sectionFinder = MozSectionFinder(cm);
   const sectionWidget = MozSectionWidget(cm, sectionFinder);
   editor.livePreview.init(preprocess);
-  if (!style.id) setupNewStyle();
+  if (!style.id) setupNewStyle(await editor.template);
   createMetaCompiler(meta => {
     style.usercssData = meta;
     style.name = meta.name;
@@ -168,7 +168,7 @@ function SourceEditor() {
     return name;
   }
 
-  function setupNewStyle() {
+  function setupNewStyle(tpl) {
     const comment = `/* ${t('usercssReplaceTemplateSectionBody')} */`;
     const sec0 = style.sections[0];
     sec0.code = ' '.repeat(prefs.get('editor.tabSize')) + comment;
@@ -176,7 +176,7 @@ function SourceEditor() {
       sec0.domains = ['example.com'];
     }
     style.name = [style.name, new Date().toLocaleString()].filter(Boolean).join(' - ');
-    style.sourceCode = (editor.template || DEFAULT_TEMPLATE)
+    style.sourceCode = (tpl || DEFAULT_TEMPLATE)
       .replace(/(@name)(?:([\t\x20]+).*|\n)/, (_, k, space) => `${k}${space || ' '}${style.name}`)
       .replace(/\s*@-moz-document[^{]*{([^}]*)}\s*$/g, // stripping dummy sections
         (s, body) => body.trim() === comment ? '\n\n' : s)

js/dom.js

@@ -16,7 +16,6 @@
   setupLivePrefs
   showSpinner
   toggleDataset
-  waitForSheet
 */
 
 Object.assign(EventTarget.prototype, {
@@ -405,20 +404,6 @@ 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
 

manage/filters.js

@@ -142,9 +142,7 @@ function filterOnChange({target: el, forceRefilter, alreadySearched}) {
     hide: buildFilter(true),
     unhide: buildFilter(false),
   });
-  if (installed) {
-    reapplyFilter(installed, alreadySearched).then(sorter.updateStripes);
-  }
+  reapplyFilter(installed, alreadySearched).then(sorter.updateStripes);
 }
 
 /* exported filterAndAppend */

manage/manage.js

@@ -6,21 +6,12 @@
 /* global router */
 /* global sorter */
 /* global t */// localization.js
-/* global
-  $
-  $$
-  $create
-  animateElement
-  setupLivePrefs
-  waitForSelector
-  waitForSheet
-*/// dom.js
+/* global $ $$ $create animateElement setupLivePrefs */// dom.js
 'use strict';
 
 document.body.appendChild(t.template.body);
 
-/** @type {HTMLElement} */
-let installed;
+const installed = $('#installed');
 
 const changeQueue = [];
 changeQueue.THROTTLE = 100; // ms
@@ -50,14 +41,12 @@ newUI.renderClass();
 
 (async function init() {
   const query = router.getSearch('search');
-  const [styles, ids, el] = await Promise.all([
+  const [styles, ids] = await Promise.all([
     API.styles.getAll(),
     query && API.styles.searchDB({query, mode: router.getSearch('searchMode')}),
     // needed to avoid flicker due to an extra frame and layout shift
-    waitForSelector('#installed'),
     prefs.ready,
   ]);
-  installed = el;
   installed.on('click', Events.entryClicked);
   installed.on('mouseover', Events.lazyAddEntryTitle, {passive: true});
   installed.on('mouseout', Events.lazyAddEntryTitle, {passive: true});
@@ -82,9 +71,7 @@ newUI.renderClass();
     }}`);
 
   if (!UA.vivaldi) {
-    waitForSheet().then(() => {
-      fitSelectBoxesIn($('#filters'));
-    });
+    fitSelectBoxesIn($('#filters'));
   }
   if (CHROME >= 80 && CHROME <= 88) {
     // Wrong checkboxes are randomly checked after going back in history, https://crbug.com/1138598