Rework previous changes, use shadowRoot instead

Author: josbeir

webroot/js/inject-iframe.js

@@ -7,45 +7,43 @@ if (elem) {
 
 ((win, doc) => {
   let iframe;
-  let bodyOverflow;
+  let shadowHost;
+  let shadowRoot;
 
   const onMessage = (event) => {
+    if (!iframe) return;
     if (event.data === 'collapse') {
       iframe.height = 40;
       iframe.width = 40;
-      doc.body.style.overflow = bodyOverflow;
       return;
     }
     if (event.data === 'toolbar') {
       iframe.height = 40;
       iframe.width = '100%';
-      doc.body.style.overflow = bodyOverflow;
       return;
     }
     if (event.data === 'expand') {
       iframe.width = '100%';
       iframe.height = '100%';
-      doc.body.style.overflow = 'hidden';
     }
     if (event.data === 'error') {
       iframe.width = '40%';
       iframe.height = '40%';
-      doc.body.style.overflow = bodyOverflow;
     }
   };
 
-  let observer;
-
   function injectDebugKitIframe() {
     if (!win.debugKitId) {
       return;
     }
-
-    const { body } = doc;
-
-    // Remove the old iframe if it exists (in case of ajax swaps).
-    if (iframe && iframe.parentNode) {
-      iframe.parentNode.removeChild(iframe);
+    if (!shadowHost) {
+      shadowHost = doc.getElementById('debugkit-shadow-host');
+      if (!shadowHost) {
+        shadowHost = doc.createElement('div');
+        shadowHost.id = 'debugkit-shadow-host';
+        doc.documentElement.appendChild(shadowHost);
+      }
+      shadowRoot = shadowHost.shadowRoot || shadowHost.attachShadow({ mode: 'open' });
     }
 
     iframe = doc.createElement('iframe');
@@ -59,33 +57,17 @@ if (elem) {
     iframe.height = 40;
     iframe.width = 40;
     iframe.src = `${window.debugKitBaseUrl}debug-kit/toolbar/${window.debugKitId}`;
-
-    body.appendChild(iframe);
-    bodyOverflow = body.style.overflow;
-
+    shadowRoot.appendChild(iframe);
     if (!win.debugKitMessageListenerApplied) {
       window.addEventListener('message', onMessage, false);
       win.debugKitMessageListenerApplied = true;
     }
   }
 
-  const onReady = () => {
-    injectDebugKitIframe();
-    if (!observer) {
-      observer = new MutationObserver(() => {
-        if (!doc.body.querySelector('iframe[src*="debug-kit/toolbar/"]')) {
-          injectDebugKitIframe();
-        }
-      });
-      if (doc.body) {
-        observer.observe(doc.body, { childList: true });
-      }
-    }
-  };
-
   const logAjaxRequest = (original) => function ajaxRequest() {
     if (this.readyState === 4 && this.getResponseHeader('X-DEBUGKIT-ID')) {
       const newId = this.getResponseHeader('X-DEBUGKIT-ID');
+
       window.debugKitId = newId;
       const params = {
         requestId: newId,
@@ -98,8 +80,9 @@ if (elem) {
 
       if (iframe && iframe.contentWindow) {
         iframe.contentWindow.postMessage(`ajax-completed$$${JSON.stringify(params)}`, window.location.origin);
-      } else {
-        console.warn('DebugKit: Unable to send ajax completion message - iframe not available');
+      }
+      else {
+        console.warn('DebugKit iframe not found.');
       }
     }
     if (original) {
@@ -109,51 +92,41 @@ if (elem) {
   };
 
   const proxyAjaxOpen = () => {
-    if (window.XMLHttpRequest.prototype._debugKitOpenProxied) {
-      return;
-    }
     const proxied = window.XMLHttpRequest.prototype.open;
     window.XMLHttpRequest.prototype.open = function ajaxCall(...args) {
       this._arguments = args;
       return proxied.apply(this, [].slice.call(args));
     };
-    window.XMLHttpRequest.prototype._debugKitOpenProxied = true;
   };
 
   const proxyAjaxSend = () => {
-    if (window.XMLHttpRequest.prototype._debugKitSendProxied) {
-      return;
-    }
     const proxied = window.XMLHttpRequest.prototype.send;
     window.XMLHttpRequest.prototype.send = function ajaxCall(...args) {
       this.onreadystatechange = logAjaxRequest(this.onreadystatechange);
       return proxied.apply(this, [].slice.call(args));
     };
-    window.XMLHttpRequest.prototype._debugKitSendProxied = true;
   };
 
-  // Bind on ready callbacks to DOMContentLoaded (native js)
-  // Since the body is already loaded (DOMContentLoaded), the event is not triggered.
-  if (doc.addEventListener) {
-    // This ensures that all event listeners get applied only once.
-    if (!win.debugKitListenersApplied) {
-      if (!win.debugKitAjaxProxied) {
-        doc.addEventListener('DOMContentLoaded', proxyAjaxOpen, false);
-        doc.addEventListener('DOMContentLoaded', proxyAjaxSend, false);
-        if (doc.readyState === 'interactive' || doc.readyState === 'complete') {
-          proxyAjaxOpen();
-          proxyAjaxSend();
-        }
-        win.debugKitAjaxProxied = true;
-      }
-      doc.addEventListener('DOMContentLoaded', onReady, false);
-      if (doc.readyState === 'interactive' || doc.readyState === 'complete') {
-        onReady();
-      }
-      win.debugKitListenersApplied = true;
+  // Improved: Setup listeners and proxies only once, using closure variables
+  let listenersSetup = false;
+  function setupDebugKitListeners() {
+    if (listenersSetup) return;
+    // Set up AJAX proxying
+    proxyAjaxOpen();
+    proxyAjaxSend();
+    // Set up ready handler
+    if (doc.readyState === 'loading') {
+      doc.addEventListener('DOMContentLoaded', injectDebugKitIframe, false);
+    } else {
+      injectDebugKitIframe();
     }
+    listenersSetup = true;
+  }
+
+  if (doc.addEventListener) {
+    setupDebugKitListeners();
   } else {
     throw new Error('Unable to add event listener for DebugKit. Please use a browser'
-            + ' that supports addEventListener().');
+      + ' that supports addEventListener().');
   }
 })(window, document);