From 38ddf5d79dcc70f293be898f7df61bce9bd71985 Mon Sep 17 00:00:00 2001 From: tophf Date: Sun, 20 Feb 2022 19:11:21 +0300 Subject: [PATCH] simplify and speed up init in manage/edit --- edit/edit.js | 20 +++++++++----------- edit/sections-editor-section.js | 2 +- edit/sections-editor.js | 6 +++--- edit/source-editor.js | 8 ++++---- js/dom.js | 15 --------------- manage/filters.js | 4 +--- manage/manage.js | 21 ++++----------------- 7 files changed, 22 insertions(+), 54 deletions(-) diff --git a/edit/edit.js b/edit/edit.js index 20905727..08d74431 100644 --- a/edit/edit.js +++ b/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 diff --git a/edit/sections-editor-section.js b/edit/sections-editor-section.js index d8aa10b9..9909e087 100644 --- a/edit/sections-editor-section.js +++ b/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); diff --git a/edit/sections-editor.js b/edit/sections-editor.js index 4154b02a..51f55769 100644 --- a/edit/sections-editor.js +++ b/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 */ diff --git a/edit/source-editor.js b/edit/source-editor.js index f74e905c..d0e9927c 100644 --- a/edit/source-editor.js +++ b/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) diff --git a/js/dom.js b/js/dom.js index 05703223..f34a32ac 100644 --- a/js/dom.js +++ b/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 diff --git a/manage/filters.js b/manage/filters.js index f5fe5f77..0484fa04 100644 --- a/manage/filters.js +++ b/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 */ diff --git a/manage/manage.js b/manage/manage.js index 25661259..8dca7f9c 100644 --- a/manage/manage.js +++ b/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