<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Webconsole erroneous custom formatters test page</title>
  </head>
  <body>
    <p>Erroneous custom formatters test page</p>
    <script>
      "use strict";

      window.devtoolsFormatters = [
        {
          // this header is invalid because it is not a function
          header: 1,
        },
        {
          // this header is invalid because it doesn't return JsonML
          header: () => 1,
        },
        {
          // this header is invalid because the returned array misses an element type
          header: () => [],
        },
        {
          // this header is invalid because it throws an exception
          header: () => { throw new Error("ERROR"); },
        },
        {
          header: (obj) => {
            return obj.hasOwnProperty("hasBodyNotAFunction") ?
              ["div", "hasBody not a function"] :
              null;
          },
          // this hasBody is invalid because it is not a function
          hasBody: 1,
        },
        {
          header: (obj) => {
            return obj.hasOwnProperty("hasBodyThrows") ?
              ["div", "hasBody throws"] :
              null;
          },
          // this hasBody throws an exception
          hasBody: () => { throw new Error("ERROR"); },
        },
        {
          header: (obj) => {
            return obj.hasOwnProperty("bodyNotAFunction") ?
              ["div", "body not a function"] :
              null;
          },
          hasBody: () => true,
          // this body is invalid because it is not a function
          body: 1,
        },
        {
          header: (obj) => {
            return obj.hasOwnProperty("bodyReturnsNull") ?
              ["div", "body returns null"] :
              null;
          },
          hasBody: () => true,
          // this body is invalid because it doesn't return JsonML
          body: () => null,
        },
        {
          header: (obj) => {
            return obj.hasOwnProperty("bodyNoJsonMl") ?
              ["div", "body doesn't return JsonML"] :
              null;
          },
          hasBody: () => true,
          // this body is invalid because it doesn't return JsonML
          body: () => 1,
        },
        {
          header: (obj) => {
            return obj.hasOwnProperty("bodyNoElementType") ?
              ["div", "body array misses element type"] :
              null;
          },
          hasBody: () => true,
          // this body is invalid because the returned array misses an element type
          body: () => [],
        },
        {
          header: (obj) => {
            return obj.hasOwnProperty("bodyThrows") ?
              ["div", "body throws"] :
              null;
          },
          hasBody: () => true,
          // this body is invalid because it throws an exception
          body: () => { throw new Error("ERROR"); },
        },
        {
          header: (obj) => {
            if (obj?.hasOwnProperty("objectTagWithNoAttribute")) {
              // This is invalid because "object" tag should have attributes
              return ["object"];
            }
            return null;
          },
        },
        {
          header: (obj) => {
            if (obj?.hasOwnProperty("objectTagWithoutObjectAttribute")) {
              // This is invalid because "object" tag should have an "object" attribute
              return [
                  "object",
                  { config: "something" }
                ];
            }
            return null;
          },
        },
        {
          header: (obj) => {
            if (obj?.hasOwnProperty("infiniteObjectTag")) {
              // This is invalid because this triggers an infinite loop (object is being
              // replaced by itself, which will keep triggering the custom formatter hook)
              return [ "object", { object: obj }];
            }
            return null;
          },
        },
        {
          // the returned value is invalid because the tagName isn't a string
          header: (obj) => {
            if (obj?.hasOwnProperty("invalidTag")) {
              return [ 42 ];
            }
            return null;
          },
        },
        {
          header: (obj) => {
            if (obj.hasOwnProperty("customFormatHeader")) {
              return ["span", {"style": "font-size: 3rem;"}, "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) => {
            if (obj.hasOwnProperty("privileged")) {
              // This should throw as the hooks should not have privileged access
              window.windowUtils.garbageCollect();
              return ["span", {}, "privileged"];
            }
            return null;
          },
        },
      ];

      [
        {},
        {hasBodyNotAFunction: true},
        {hasBodyThrows: true},
        {bodyNotAFunction: true},
        {bodyReturnsNull: true},
        {bodyNoJsonMl: true},
        {bodyNoElementType: true},
        {bodyThrows: true},
        {objectTagWithNoAttribute: true},
        {objectTagWithoutObjectAttribute: true},
        {infiniteObjectTag: true},
        {invalidTag: true},
        {privileged: true},
      ].forEach(variable => console.log(variable));
    </script>
  </body>
</html>
