third_party/WebKit/LayoutTests/inspector/console/console-custom-formatters.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../../http/tests/inspector/console-test.js"></script>
   5 <script>
   6
   7 var a = {name: "a"};
   8 var b = {name: "b"};
   9 var c = {name: "c"};
  10
  11 a.formattableBy1 = true;
  12 b.formattableBy2 = true;
  13 c.formattableBy1 = true;
  14 c.formattableBy2 = true;
  15
  16 var formatter1 = {
  17     header: function(x)
  18     {
  19         if (!x.formattableBy1)
  20             return null;
  21
  22         return ["span", {}, "Header formatted by 1 ", x.name];
  23     },
  24
  25     hasBody: function(x)
  26     {
  27         return true;
  28     },
  29
  30     body: function(x)
  31     {
  32         return ["span", {}, "Body formatted by 1 ", x.name]
  33     }
  34 };
  35
  36 var formatter2 = {
  37     header: function(x)
  38     {
  39         if (!x.formattableBy2)
  40             return null;
  41
  42         return ["span", {}, "Header formatted by 2 ", x.name];
  43     },
  44
  45     hasBody: function(x)
  46     {
  47         return true;
  48     },
  49
  50     body: function(x)
  51     {
  52         return ["span", {}, "Body formatted by 2 ", x.name]
  53     }
  54 };
  55
  56 var configTest = {};
  57 var formatterWithConfig1 = {
  58     header: function(x, config)
  59     {
  60         if (x !== configTest || config)
  61             return null;
  62
  63         return ["span", {}, "Formatter with config ", ["object", {"object": x, "config": {"info": "additional info"}}]];
  64     },
  65
  66     hasBody: function(x)
  67     {
  68         return false;
  69     },
  70
  71     body: function(x)
  72     {
  73         throw "Unreachable"
  74     }
  75 }
  76
  77 var formatterWithConfig2 = {
  78     header: function(x, config)
  79     {
  80         if (x !== configTest || !config)
  81             return null;
  82
  83         return ["span", {}, "Header ", "info: ", config.info];
  84     },
  85
  86     hasBody: function(x, config)
  87     {
  88         return config && config.info;
  89     },
  90
  91     body: function(x, config)
  92     {
  93         return ["span", {}, "body", "info: ", config.info]
  94     }
  95 }
  96
  97 var selfReferenceTest = {};
  98 var selfReferencingFormatter = {
  99     header: function(x)
 100     {
 101         if (x !== selfReferenceTest)
 102             return null;
 103
 104         return ["span", {}, "Formatter with config ", ["object", {"object": x}]];
 105     },
 106
 107     hasBody: function(x)
 108     {
 109         return false;
 110     },
 111
 112     body: function(x)
 113     {
 114         throw "Unreachable"
 115     }
 116
 117 }
 118
 119 window.devtoolsFormatters = [formatter1, formatter2, formatterWithConfig1, formatterWithConfig2, selfReferencingFormatter];
 120
 121 function logVars()
 122 {
 123     console.log(a);
 124     console.log(b);
 125     console.log(c);
 126     console.log(configTest);
 127     console.log(selfReferenceTest);
 128     //swap first formatters: test that header+body should be generated by the same formatter
 129     window.devtoolsFormatters = [formatter2, formatter1, formatterWithConfig1, formatterWithConfig2, selfReferencingFormatter];
 130 }
 131
 132 function test()
 133 {
 134     InspectorTest.mainTarget.runtimeAgent().setCustomObjectFormatterEnabled(true);
 135     InspectorTest.evaluateInPage("logVars()", expandVariablesInConsole);
 136
 137     function expandVariablesInConsole()
 138     {
 139         var consoleView = WebInspector.ConsolePanel._view();
 140         if (consoleView._needsFullUpdate)
 141             consoleView._updateMessageList();
 142         var viewMessages = consoleView._visibleViewMessages;
 143         for (var i = 0; i < viewMessages.length; ++i) {
 144             var uiMessage = viewMessages[i];
 145             var customElement = uiMessage.contentElement().querySelector("span /deep/ .custom-expandable-section-header");
 146             if (customElement)
 147                 customElement.click();
 148         }
 149
 150         InspectorTest.runAfterPendingDispatches(dumpExpanded);
 151     }
 152
 153     function dumpExpanded()
 154     {
 155         InspectorTest.dumpConsoleMessages();
 156         InspectorTest.completeTest();
 157     }
 158 }
 159 </script>
 160 </head>
 161
 162 <body onload="runTest()">
 163 <p>Tests that console logging dumps properly when there are multiple custom formatters on the page</p>
 164 </body>
 165 </html>