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 <body> 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).
Charcoal-SE · Aug 15, 2024 · 16a35a9 · 16a35a9
1 parent 5b6651e
commit 16a35a9
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -162,20 +162,35 @@ 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');
         metasmoke.storage['post-render-mode'] = mode;
         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
@@ -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);