tor-browser

browser_webconsole_custom_formatters.js (5950B)

---

/* 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");
 }
}