From 0b96039dca32017cbe87e931afadc6c525937c8a Mon Sep 17 00:00:00 2001 From: wanhose Date: Tue, 13 Jun 2023 17:32:50 +0200 Subject: [PATCH] fix(browser-extension): some performance issues and regressions --- .../browser-extension/src/scripts/content.js | 62 +++++++++---------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/packages/browser-extension/src/scripts/content.js b/packages/browser-extension/src/scripts/content.js index ccc4f23..477871d 100644 --- a/packages/browser-extension/src/scripts/content.js +++ b/packages/browser-extension/src/scripts/content.js @@ -56,33 +56,17 @@ function clean(elements, skipMatch) { } } -/** - * @description Flat child nodes for a given element - * @param {HTMLElement} element - * @returns {number[]} - */ - -function flatElement(element) { - return [...element.childNodes].flatMap((childNode) => - childNode.nodeType === Node.TEXT_NODE - ? [childNode.nodeType] - : [...[...childNode.childNodes].map((x) => x.nodeType)] - ); -} - /** * @description Forces a DOM clean in the specific element * @param {HTMLElement} element */ function forceClean(element) { - if (data?.elements.length && state.enabled && !preview) { - const elements = [...element.querySelectorAll(data.elements)]; + const elements = [...element.querySelectorAll(data.elements)]; - if (elements.length) { - fix(); - clean(elements, true); - } + if (elements.length) { + fix(); + clean(elements, true); } } @@ -132,10 +116,6 @@ function match(element, skipMatch) { return false; } - if (element.childNodes.length && flatElement(element).every((x) => x === Node.TEXT_NODE)) { - return false; - } - if (element.hasAttributes()) { return ( // 2023-06-10: twitch.tv temporary fix @@ -233,14 +213,12 @@ const observer = new MutationObserver((mutations) => { }); /** - * @description Fixes already existing element when page load issues - * @listens window#DOMContentLoaded + * @description Fixes still existing elements when page fully load + * @listens window#load */ -window.addEventListener('DOMContentLoaded', () => { - if (readingTime() < 4) { - forceClean(document.body); - } +window.addEventListener('load', () => { + window.dispatchEvent(new Event('run')); }); /** @@ -250,7 +228,23 @@ window.addEventListener('DOMContentLoaded', () => { window.addEventListener('pageshow', (event) => { if (event.persisted) { - forceClean(document.body); + window.dispatchEvent(new Event('run')); + } +}); + +/** + * @description Forces a clean when this event is fired + * @listens window#run + */ + +window.addEventListener('run', () => { + if (data?.elements.length && state.enabled && !preview) { + if (readingTime() < 4) { + forceClean(document.body); + } else { + // 2023-06-13: look into the first level of the document body, there are dialogs there very often + clean([...document.body.children]); + } } }); @@ -265,6 +259,12 @@ window.addEventListener('pageshow', (event) => { if (state.enabled) { data = await dispatch({ hostname, type: 'GET_DATA' }); + + // 2023-06-13: hack to force clean when data request takes too long and there are no changes later + if (document.readyState === 'complete') { + window.dispatchEvent(new Event('run')); + } + dispatch({ type: 'ENABLE_ICON' }); observer.observe(document.body ?? document.documentElement, options); }