1 files changed, 205 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/browser_webconsole_custom_formatters.js b/devtools/client/webconsole/test/browser/browser_webconsole_custom_formatters.js
new file mode 100644
index 0000000000..7fd026fe80
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/browser_webconsole_custom_formatters.js
@@ -0,0 +1,205 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check display of custom formatters.
+const TEST_URI =
+  "https://example.com/browser/devtools/client/webconsole/" +
+  "test/browser/test-console-custom-formatters.html";
+
+add_task(async function () {
+  await pushPref("devtools.custom-formatters.enabled", true);
+
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  // Reload the browser to ensure the custom formatters are picked up
+  await reloadBrowser();
+
+  await testString(hud);
+  await testNumber(hud);
+  await testObjectWithoutFormatting(hud);
+  await testObjectWithFormattedHeader(hud);
+  await testObjectWithFormattedHeaderAndBody(hud);
+  await testCustomFormatterWithObjectTag(hud);
+  await testProxyObject(hud);
+});
+
+async function testString(hud) {
+  info("Test for string not being custom formatted");
+  await testCustomFormatting(hud, {
+    hasCustomFormatter: false,
+    messageText: "string",
+  });
+}
+
+async function testNumber(hud) {
+  info("Test for number not being custom formatted");
+  await testCustomFormatting(hud, {
+    hasCustomFormatter: false,
+    messageText: 1337,
+  });
+}
+
+async function testObjectWithoutFormatting(hud) {
+  info("Test for object not being custom formatted");
+  await testCustomFormatting(hud, {
+    hasCustomFormatter: false,
+    messageText: "Object { noFormat: true }",
+  });
+}
+
+async function testObjectWithFormattedHeader(hud) {
+  info("Simple test for custom formatted header");
+  await testCustomFormatting(hud, {
+    hasCustomFormatter: true,
+    messageText: "custom formatted header",
+    headerStyles: "font-size: 3rem;",
+  });
+}
+
+async function testObjectWithFormattedHeaderAndBody(hud) {
+  info("Simple test for custom formatted header with body");
+  await testCustomFormatting(hud, {
+    hasCustomFormatter: true,
+    messageText: "custom formatted body",
+    headerStyles: "font-style: italic;",
+    bodyText: "body",
+    bodyStyles: "font-size: 2rem; font-family: serif;",
+  });
+}
+
+async function testCustomFormatterWithObjectTag(hud) {
+  info(`Test for custom formatted object with "object" tag in the jsonMl`);
+  const node = await waitFor(() => {
+    return findConsoleAPIMessage(hud, "object tag");
+  });
+
+  const headerJsonMlNode = node.querySelector(".objectBox-jsonml");
+  is(
+    headerJsonMlNode.getAttribute("style"),
+    "color: purple;",
+    "The custom formatting of the header is correct"
+  );
+  const [buttonEl, child1, child2, child3, child4] =
+    headerJsonMlNode.childNodes;
+  is(child1.textContent, "object tag", "Got expected first item");
+  is(
+    child2.textContent,
+    `~[1,"a"]~`,
+    "Got expected second item, the replaced object, custom formatted"
+  );
+  ok(
+    child3.classList.contains("objectBox-null"),
+    "Got expected third item, an actual NullRep"
+  );
+  is(child3.textContent, `null`, "third item has expected content");
+
+  is(
+    child4.textContent,
+    ` | serialized: 42n undefined null Infinity [object Object]`,
+    "Got expected fourth item, serialized values"
+  );
+
+  buttonEl.click();
+  const bodyLevel1 = await waitFor(() =>
+    node.querySelector(".objectBox-jsonml-body-wrapper .objectBox-jsonml")
+  );
+  const [bodyChild1, bodyChild2] = bodyLevel1.childNodes;
+  is(bodyChild1.textContent, "body");
+
+  const bodyCustomFormattedChild = await waitFor(() =>
+    bodyChild2.querySelector(".objectBox-jsonml")
+  );
+  const [subButtonEl, subChild1, subChild2, subChild3] =
+    bodyCustomFormattedChild.childNodes;
+  ok(!!subButtonEl, "The body child can also be expanded");
+  is(subChild1.textContent, "object tag", "Got expected first item");
+  is(
+    subChild2.textContent,
+    `~[2,"b"]~`,
+    "Got expected body second item, the replaced object, custom formatted"
+  );
+  ok(
+    subChild3.classList.contains("object-inspector"),
+    "Got expected body third item, an actual ObjectInspector"
+  );
+  is(
+    subChild3.textContent,
+    `Array [ 2, "b" ]`,
+    "body third item has expected content"
+  );
+}
+
+async function testProxyObject(hud) {
+  info("Test that Proxy objects can be handled by custom formatter");
+  await testCustomFormatting(hud, {
+    hasCustomFormatter: true,
+    messageText: "Formatted Proxy",
+    headerStyles: "font-weight: bold;",
+  });
+}
+
+async function testCustomFormatting(
+  hud,
+  { hasCustomFormatter, messageText, headerStyles, bodyText, bodyStyles }
+) {
+  const node = await waitFor(() => {
+    return findMessageVirtualizedByType({
+      hud,
+      text: messageText,
+      typeSelector: ".console-api",
+    });
+  });
+
+  const headerJsonMlNode = node.querySelector(".objectBox-jsonml");
+  if (hasCustomFormatter) {
+    ok(headerJsonMlNode, "The message is custom formatted");
+
+    if (!headerJsonMlNode) {
+      return;
+    }
+
+    is(
+      headerJsonMlNode.getAttribute("style"),
+      headerStyles,
+      "The custom formatting of the header is correct"
+    );
+
+    if (bodyText) {
+      const arrow = node.querySelector(".collapse-button");
+
+      ok(arrow, "There must be a toggle arrow for the header");
+
+      info("Expanding the Object");
+      const onBodyRendered = waitFor(
+        () =>
+          !!node.querySelector(
+            ".objectBox-jsonml-body-wrapper .objectBox-jsonml"
+          )
+      );
+
+      arrow.click();
+      await onBodyRendered;
+
+      ok(
+        node.querySelector(".collapse-button").classList.contains("expanded"),
+        "The arrow of the node has the expected class after clicking on it"
+      );
+
+      const bodyJsonMlNode = node.querySelector(
+        ".objectBox-jsonml-body-wrapper > .objectBox-jsonml"
+      );
+      ok(bodyJsonMlNode, "The body is custom formatted");
+
+      is(bodyJsonMlNode?.textContent, bodyText, "The body text is correct");
+      is(
+        bodyJsonMlNode.getAttribute("style"),
+        bodyStyles,
+        "The custom formatting of the body is correct"
+      );
+    }
+  } else {
+    ok(!headerJsonMlNode, "The message is not custom formatted");
+  }
+}