1 files changed, 128 insertions, 0 deletions
diff --git a/devtools/client/webconsole/test/browser/test-console-custom-formatters.html b/devtools/client/webconsole/test/browser/test-console-custom-formatters.html
new file mode 100644
index 0000000000..68fcda8ad2
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/test-console-custom-formatters.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Webconsole custom formatters test page</title>
+  </head>
+  <body>
+    <p>Custom formatters test page</p>
+    <script>
+      "use strict";
+
+      const proxy = new Proxy({}, {foo: "bar"});
+
+      const variables = [
+        "string",
+        1337,
+        { noFormat: true },
+        { customFormatHeader: "header" },
+        { customFormatHeaderAndBody: "body" },
+        { customFormatObjectAndConfig: true },
+        proxy,
+      ];
+
+      window.devtoolsFormatters = [
+        {
+          header: (obj, config) => {
+            if (obj.hasOwnProperty("customFormatHeader")) {
+              return [
+                "span",
+                {"style": "font-size: 3rem;"},
+                config ? `~${JSON.stringify(config)}~` : "custom formatted header",
+              ];
+            }
+            return null;
+          },
+          hasBody: obj => false
+        },
+        {
+          header: obj => {
+            if (obj.hasOwnProperty("customFormatHeaderAndBody")) {
+              return ["span", {"style": "font-style: italic;"}, "custom formatted body"];
+            }
+            return null;
+          },
+          hasBody: obj => true,
+          body: obj => ["span", {"style": "font-family: serif; font-size: 2rem;"}, obj.customFormatHeaderAndBody]
+        },
+        {
+          header: (obj, config) => {
+            if (obj.hasOwnProperty("customFormatObjectAndConfig")) {
+              return [
+                "span",
+                {"style": "color: purple;"},
+                `object tag`,
+                [
+                  "object",
+                  {
+                    // This will trigger the "customFormatHeader" custom formatter
+                    object: {customFormatHeader: true},
+                    config: config || [1, "a"]
+                  }
+                ],
+                // This should print the `config` object, not formatted
+                [
+                  "object",
+                  {
+                    object: config || null,
+                  }
+                ],
+                [
+                  "span",
+                  " | serialized: ",
+                  42n,
+                  " ",
+                  undefined,
+                  " ",
+                  null,
+                  " ",
+                  Infinity,
+                  " ",
+                  {foo: "bar"}
+                ]
+              ];
+            }
+            return null;
+          },
+          hasBody: (obj, config) => obj.hasOwnProperty("customFormatObjectAndConfig") || !!config,
+          body: (obj, config) => {
+            if (!config) {
+              config = [1, "a"];
+            }
+            return [
+            "span",
+            {"style": "font-family: serif; font-size: 2rem;"},
+            "body",
+            [
+              "object",
+              {
+                object: {
+                  customFormatObjectAndConfig: true,
+                },
+                config: [
+                  config[0]  + 1,
+                  String.fromCharCode(config[1].charCodeAt(0) + 1)
+                ]
+              }
+            ]
+          ]}
+        },
+        {
+          header: (obj, config) => {
+            if (obj === proxy) {
+              return [
+                "span",
+                {"style": "font-weight: bold;"},
+                "Formatted Proxy",
+              ];
+            }
+            return null;
+          },
+          hasBody: obj => false
+        },
+      ];
+
+      variables.forEach(variable => console.log(variable));
+    </script>
+  </body>
+</html>