Adjustment to the request debug view functionality

tests/support/characterization.cjs

@@ -61,6 +61,7 @@ function loadBackground({ family = "chrome", fetch = unexpectedFetch, storage =
   const time = clock();
   const listeners = [];
   const progress = [];
+  const requestDebug = [];
   const tabs = [];
   const removedTabs = [];
   const cookieQueries = [];
@@ -69,7 +70,10 @@ function loadBackground({ family = "chrome", fetch = unexpectedFetch, storage =
   const getStored = key => ({ [key]: storage[key] === undefined ? undefined : plain(storage[key]) });
   const store = value => Object.assign(storage, plain(value));
   const openTab = details => { tabs.push(plain(details)); return { id: 91 }; };
-  const send = (tabId, message, options) => progress.push({ tabId, message: plain(message), options: plain(options || {}) });
+  const send = (tabId, message, options) => {
+    const events = message.type === "opportunitiesExtension.opptyProductsRequestDebug" ? requestDebug : progress;
+    events.push({ tabId, message: plain(message), options: plain(options || {}) });
+  };
   if (family === "firefox") {
     api.runtime.getBrowserInfo = async () => ({ name: "Firefox" });
     api.storage = { local: {
@@ -128,7 +132,7 @@ function loadBackground({ family = "chrome", fetch = unexpectedFetch, storage =
       if (pending !== true) { clearTimeout(timer); reject(new Error("Expected asynchronous response contract")); }
     });
   }
-  return { dispatch, listener: listeners[0], progress, tabs, removedTabs, cookieQueries, storage, advance: time.advance };
+  return { dispatch, listener: listeners[0], progress, requestDebug, tabs, removedTabs, cookieQueries, storage, advance: time.advance };
 }
 
 module.exports = { root, plain, response, loadContent, loadBackground };

tests/support/debug-dom.cjs

@@ -0,0 +1,25 @@
+function createDebugDom() {
+  const descendants = node => [node, ...node.children.flatMap(descendants)];
+  const document = { activeElement: null };
+  function element(tag) {
+    return {
+      tag, children: [], attributes: {}, listeners: {}, scrollTop: 0, hidden: false, text: "",
+      set textContent(value) { this.text = value; this.children = []; },
+      get textContent() { return this.text; },
+      append(...nodes) { this.children.push(...nodes); },
+      setAttribute(key, value) { this.attributes[key] = value; },
+      getAttribute(key) { return this.attributes[key]; },
+      addEventListener(name, listener) { this.listeners[name] = listener; },
+      focus() { document.activeElement = this; },
+      querySelectorAll(selector) {
+        return descendants(this).filter(node => node.tag === "details"
+          && node.getAttribute("data-request-id") && (!selector.includes("[open]") || node.open));
+      }
+    };
+  }
+  const panel = element("aside");
+  Object.assign(document, { getElementById: () => panel, createElement: element, createElementNS: (_, tag) => element(tag) });
+  return { document, panel, descendants };
+}
+
+module.exports = { createDebugDom };