From af3e9305440bba5f0fbe732f5626793859e99453 Mon Sep 17 00:00:00 2001 From: Bauke Date: Wed, 23 Feb 2022 23:28:33 +0100 Subject: [PATCH] Consolidate the MutationObserver-dependent features to use a single observer. --- source/content-scripts.ts | 56 +++++++++++++++++++++------ source/scripts/anonymize-usernames.ts | 15 ------- source/scripts/hide-votes.ts | 15 ------- source/scripts/markdown-toolbar.ts | 18 --------- 4 files changed, 45 insertions(+), 59 deletions(-) diff --git a/source/content-scripts.ts b/source/content-scripts.ts index 7b402a9..a4c8b62 100644 --- a/source/content-scripts.ts +++ b/source/content-scripts.ts @@ -34,13 +34,50 @@ async function initialize() { } } - // Object to hold the active components we are going to render. - const components: Record = {}; + const observerFeatures: Array<() => any> = []; + const observer = new window.MutationObserver(() => { + log('Page mutation detected, rerunning features.'); + observer.disconnect(); + for (const feature of observerFeatures) { + feature(); + } + + startObserver(); + }); + + function startObserver() { + observer.observe(document.body, { + childList: true, + subtree: true, + }); + } if (settings.features.anonymizeUsernames) { - runAnonymizeUsernamesFeature(); + observerFeatures.push(() => { + runAnonymizeUsernamesFeature(); + }); } + if (settings.features.hideVotes) { + observerFeatures.push(() => { + runHideVotesFeature(settings); + }); + } + + if (settings.features.markdownToolbar) { + observerFeatures.push(() => { + runMarkdownToolbarFeature(); + }); + } + + // Initialize all the observer-dependent features first. + for (const feature of observerFeatures) { + feature(); + } + + // Object to hold the active components we are going to render. + const components: Record = {}; + if (settings.features.autocomplete) { components.autocomplete = html` <${AutocompleteFeature} settings=${settings} /> @@ -51,18 +88,10 @@ async function initialize() { components.backToTop = html`<${BackToTopFeature} />`; } - if (settings.features.hideVotes) { - runHideVotesFeature(settings); - } - if (settings.features.jumpToNewComment) { components.jumpToNewComment = html`<${JumpToNewCommentFeature} />`; } - if (settings.features.markdownToolbar) { - runMarkdownToolbarFeature(); - } - if (settings.features.userLabels) { components.userLabels = html` <${UserLabelsFeature} settings=${settings} /> @@ -88,6 +117,11 @@ async function initialize() { replacement, ); + // Start the mutation observer only when some features depend on it are enabled. + if (observerFeatures.length > 0) { + startObserver(); + } + const initializedIn = window.performance.now() - start; log(`Initialized in approximately ${initializedIn} milliseconds.`); } diff --git a/source/scripts/anonymize-usernames.ts b/source/scripts/anonymize-usernames.ts index 25b2f43..93e0ad1 100644 --- a/source/scripts/anonymize-usernames.ts +++ b/source/scripts/anonymize-usernames.ts @@ -1,22 +1,7 @@ import {log, querySelectorAll} from '../utilities/exports.js'; export function runAnonymizeUsernamesFeature() { - const observer = new window.MutationObserver(() => { - observer.disconnect(); - anonymizeUsernames(); - startObserver(); - }); - - function startObserver() { - observer.observe(document, { - childList: true, - subtree: true, - }); - } - const count = anonymizeUsernames(); - startObserver(); - log(`Anonymize Usernames: Initialized for ${count} user links.`); } diff --git a/source/scripts/hide-votes.ts b/source/scripts/hide-votes.ts index 9561b06..867f230 100644 --- a/source/scripts/hide-votes.ts +++ b/source/scripts/hide-votes.ts @@ -2,22 +2,7 @@ import Settings from '../settings.js'; import {log, querySelectorAll} from '../utilities/exports.js'; export function runHideVotesFeature(settings: Settings) { - const observer = new window.MutationObserver(() => { - observer.disconnect(); - hideVotes(settings); - startObserver(); - }); - - function startObserver() { - observer.observe(document, { - childList: true, - subtree: true, - }); - } - hideVotes(settings); - startObserver(); - log('Hide Votes: Initialized.'); } diff --git a/source/scripts/markdown-toolbar.ts b/source/scripts/markdown-toolbar.ts index c68e39c..420c7a1 100644 --- a/source/scripts/markdown-toolbar.ts +++ b/source/scripts/markdown-toolbar.ts @@ -75,25 +75,7 @@ const snippets: MarkdownSnippet[] = [ })); export function runMarkdownToolbarFeature() { - // Create an observer that will add toolbars whenever - // a new Markdown form is created (like when clicking Reply). - const observer = new window.MutationObserver(() => { - observer.disconnect(); - addToolbarsToTextareas(); - startObserver(); - }); - - function startObserver() { - observer.observe(document, { - childList: true, - subtree: true, - }); - } - - // Run once when the page loads. addToolbarsToTextareas(); - startObserver(); - log('Markdown Toolbar: Initialized.'); }