From 16a35a99880d0727cc46d9040434bf7234d2b70f Mon Sep 17 00:00:00 2001 From: Makyen Date: Thu, 15 Aug 2024 08:15:40 -0700 Subject: [PATCH] Remove use of DOMNodeInserted Chrome removed DOMNodeInserted. We currently explicitly use that event only to show the appropriate tab for post bodies. We already have code that executes when post bodies are added to the DOM in order to render the post preview. The code to detect when a post body is added to the DOM is effectively duplicated here to select the correct tab. NOTE: This is not as generically effective as a MutationObserver watching for all DOM node insertions in the would be, but is substantially more efficient. The main drawback is that if a new way to add a post body is added to the code base, it may be necessary to add additional way(s) to detect that the post body has been added to the DOM (such as the special case used for the review pages). --- app/javascript/packs/application.js | 29 ++++++++++++++++++++++------- app/javascript/post_preview.js | 2 ++ 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 78452668..f0a26da9 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -162,6 +162,13 @@ const metasmoke = window.metasmoke = { } }, + showRenderedTab: () => { + const renderMode = metasmoke.storage['post-render-mode']; + if (renderMode) { + $(`.post-render-mode[data-render-mode="${renderMode}"]`).tab('show'); + } + }, + setPostRenderModes: () => { $(document.body).on('click', '.post-render-mode', ev => { const mode = $(ev.target).data('render-mode'); @@ -169,13 +176,21 @@ const metasmoke = window.metasmoke = { metasmoke.debug(`default render mode updated to ${mode}`); }); - if (metasmoke.storage['post-render-mode']) { - $(`.post-render-mode[data-render-mode="${metasmoke.storage['post-render-mode']}"]`).tab('show'); - } - - $(document.body).on('DOMNodeInserted', '.post-body, .review-item-container', () => { - $(`.post-render-mode[data-render-mode="${metasmoke.storage['post-render-mode']}"]`).tab('show'); - }); + metasmoke.init.showRenderedTab(); + /* The following set of operations replaces a DOMNodeInserted listener. + * It won't catch every possible new code addition of a .post-render-mode node, but it will catch all currently + * existing cases where we add such a node into the DOM, and is much more computationally effecient than + * using a MutationObserver looking at all node insertions in the entire body. + * The drawback is that it may be necessary to add special cases, such as is used for displaying reviews and + * the custom MS-review-loaded event. + * Note that this code is similar to the triggers used for rendering the preview. Thus, if a change is needed + * here, it's likely needed there too. + */ + onLoad(metasmoke.init.showRenderedTab); + // Delaying 11 ms is one ms after the 10 ms delay for rendering the preview. + $(document).ajaxComplete(() => setTimeout(metasmoke.init.showRenderedTab, 11)); + // This is delayed in order to be done after the preview is rendered. + $(window).on('MS-review-loaded', () => setTimeout(metasmoke.init.showRenderedTab, 1)); }, setDocumentTitle: () => { diff --git a/app/javascript/post_preview.js b/app/javascript/post_preview.js index 5e365746..abdd58b9 100644 --- a/app/javascript/post_preview.js +++ b/app/javascript/post_preview.js @@ -47,6 +47,8 @@ import { onLoad, route, addLocalSettingsPanel } from './util'; }); } + // The following is similar to what's used to select the post tab in application.js. If a change is needed here, + // then one is very likely to be needed there too. onLoad(addPostPreviews); $(document).ajaxComplete(() => setTimeout(addPostPreviews, 10)); $(window).on('MS-review-loaded', addPostPreviews);