summaryrefslogtreecommitdiffstats
path: root/devtools/client/webconsole/test/browser/test-console-custom-formatters.html
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/webconsole/test/browser/test-console-custom-formatters.html')
-rw-r--r--devtools/client/webconsole/test/browser/test-console-custom-formatters.html112
1 files changed, 112 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..edf3f50887
--- /dev/null
+++ b/devtools/client/webconsole/test/browser/test-console-custom-formatters.html
@@ -0,0 +1,112 @@
+<!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 variables = [
+ "string",
+ 1337,
+ { noFormat: true },
+ { customFormatHeader: "header" },
+ { customFormatHeaderAndBody: "body" },
+ { customFormatObjectAndConfig: true }
+ ];
+
+ 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)
+ ]
+ }
+ ]
+ ]}
+ }
+ ];
+
+ variables.forEach(variable => console.log(variable));
+ </script>
+ </body>
+</html>