Merge pull request #1011 from makyen/Mak-remove-DOMNodeInserted

Remove use of DOMNodeInserted in our code

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: () => {

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);