summaryrefslogtreecommitdiffstats
path: root/devtools/client/webconsole/test/browser/test-console-custom-formatters.html
blob: edf3f508870711f82c8790dfa6983cc6b75eec0f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
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>