src/third_party/WebKit/LayoutTests/inspector/profiler/canvas2d/canvas-replay-log-grid.html

   1 <html>
   2 <head>
   3     <script src="../../../http/tests/inspector/inspector-test.js"></script>
   4     <script src="../canvas-profiler-test.js"></script>
   5 <script>
   6
   7 var canvas;
   8 var context;
   9 var round = 0;
  10 var colors = ["red", "green", "blue", "yellow", "black"];
  11
  12 function createCanvasContext()
  13 {
  14     canvas = document.getElementById("canvas");
  15     context = canvas.getContext("2d");
  16     console.assert(context, "Failed to create a canvas context");
  17 }
  18
  19 function doSomeCanvasCalls(repeats)
  20 {
  21     if (!context)
  22         createCanvasContext();
  23     repeats = repeats || 1;
  24     while (repeats-- > 0) {
  25         var offset = 5 * round;
  26         context.save();
  27         context.beginPath();
  28         context.rect(offset, offset, 100 - offset, 100 - offset);
  29         context.fillStyle = colors[round % colors.length];
  30         context.fill();
  31         context.restore();
  32         ++round;
  33     }
  34 }
  35
  36 function test()
  37 {
  38     // FIXME: Remove once taken out of experiments. Also a hack below should be removed.
  39     Runtime.experiments.enableForTest("canvasInspection");
  40
  41     WebInspector.inspectorView.showPanel("profiles");
  42     var profilesPanel = WebInspector.panels.profiles;
  43     var typeRegistry = WebInspector.ProfileTypeRegistry.instance;
  44     var profileType = typeRegistry.canvasProfileType;
  45
  46     // FIXME: This hack is added because ProfilesPanel might have been already created before experiment was enabled.
  47     // This could be removed once canvas inspection is out of experiments.
  48     if (!profileType) {
  49         profileType = new WebInspector.CanvasProfileType();
  50         typeRegistry.canvasProfileType = profileType;
  51         typeRegistry._addProfileType(profileType);
  52         profilesPanel._registerProfileType(profileType);
  53     }
  54
  55     profilesPanel._onProfileTypeSelected({data: profileType});
  56
  57     InspectorTest.override(profileType, "_isSingleFrameMode", function() { return false; }, true /*sticky*/);
  58     InspectorTest.addSniffer(profileType, "_didStartCapturingFrame", didStartCapturingFrame);
  59
  60     profileType._onProfilerEnableButtonClick(true);
  61     InspectorTest.addSniffer(profileType, "_updateDecorationElement", profilesPanel.toggleRecordButton.bind(profilesPanel));
  62
  63     var profileHeader;
  64     var profileView;
  65     var dataGrid;
  66
  67     function didStartCapturingFrame(frameId, error, traceLogId)
  68     {
  69         profileHeader = profileType.getProfiles()[0]
  70         profilesPanel.showProfile(profileHeader);
  71         InspectorTest.addSniffer(profileHeader, "_updateCapturingStatus", didReceiveFirstFrame);
  72         InspectorTest.evaluateInConsole("doSomeCanvasCalls(2)");
  73     }
  74     function didReceiveFirstFrame(traceLog)
  75     {
  76         if (!traceLog || traceLog.calls.length < 2) {
  77             InspectorTest.addSniffer(profileHeader, "_updateCapturingStatus", didReceiveFirstFrame);
  78             return;
  79         }
  80         InspectorTest.evaluateInConsole("doSomeCanvasCalls(3)", didSecondFrameCalls);
  81     }
  82     function didSecondFrameCalls()
  83     {
  84         profileView = profilesPanel.visibleView;
  85         dataGrid = profileView._logGrid;
  86         InspectorTest.addSniffer(CanvasAgent, "replayTraceLog", onReplayTraceLog);
  87         profilesPanel.toggleRecordButton();
  88     }
  89     function onReplayTraceLog(traceLogId, index)
  90     {
  91         testControlButtons();
  92
  93         InspectorTest.addResult("");
  94         dumpTableData(dataGrid.element);
  95         InspectorTest.completeTest();
  96     }
  97
  98
  99     function testControlButtons()
 100     {
 101         var rootNode = dataGrid.rootNode();
 102         var frameNodes = [];
 103         var drawCallGroups = [];
 104         var nodes = [];
 105         var allNodesFlat = [];
 106
 107         frameNodes = frameNodes.concat(rootNode.children);
 108         frameNodes.forEach(function(frameNode) {
 109             drawCallGroups = drawCallGroups.concat(frameNode.children);
 110         });
 111         drawCallGroups.forEach(function(drawCallGroup) {
 112             nodes = nodes.concat(drawCallGroup.children);
 113         });
 114         for (var node = rootNode; node; node = node.traverseNextNode(false)) {
 115             if (node !== rootNode)
 116                 allNodesFlat.push(node);
 117         }
 118         allNodesFlat.forEach(function(node) {
 119             node.toString = function()
 120             {
 121                 return "Node{" + this.element.textContent + "}";
 122             }
 123         });
 124
 125         InspectorTest.addResult("");
 126         InspectorTest.addResult("Total frames: " + frameNodes.length);
 127         InspectorTest.addResult("Total draw call groups: " + drawCallGroups.length);
 128         InspectorTest.addResult("Total calls: " + nodes.length);
 129         InspectorTest.addResult("Total grid nodes: " + allNodesFlat.length);
 130         InspectorTest.addResult("");
 131
 132         InspectorTest.assertEquals(frameNodes.peekLast(), dataGrid.selectedNode, "Expected last frame node before testing control buttons");
 133
 134         InspectorTest.addResult("Testing ReplayFirstStepClick");
 135         profileView._onReplayFirstStepClick();
 136         InspectorTest.assertEquals(frameNodes[0], dataGrid.selectedNode);
 137
 138         InspectorTest.addResult("Testing ReplayNextStepClick");
 139         for (var i = 0; i < nodes.length + 5; ++i) {
 140             profileView._onReplayStepClick(true);
 141             InspectorTest.assertEquals(nodes[i] || nodes.peekLast(), dataGrid.selectedNode, "error on index " + i);
 142         }
 143
 144         InspectorTest.addResult("Testing ReplayPreviousStepClick");
 145         for (var i = nodes.length - 2; i >= -5; --i) {
 146             profileView._onReplayStepClick(false);
 147             InspectorTest.assertEquals(nodes[i] || nodes[0], dataGrid.selectedNode, "error on index " + i);
 148         }
 149
 150         allNodesFlat[0].revealAndSelect();
 151         InspectorTest.assertEquals(allNodesFlat[0], dataGrid.selectedNode, "Expected to select the first node before testing ReplayNextDrawingCallClick");
 152
 153         InspectorTest.addResult("Testing ReplayNextDrawingCallClick starting on a frame node");
 154         for (var i = 1; i < frameNodes.length + 5; ++i) {
 155             profileView._onReplayDrawingCallClick(true);
 156             InspectorTest.assertEquals(frameNodes[i] || allNodesFlat.peekLast(), dataGrid.selectedNode, "error on index " + i);
 157         }
 158
 159         frameNodes.peekLast().revealAndSelect();
 160         InspectorTest.assertEquals(frameNodes.peekLast(), dataGrid.selectedNode, "Expected to select last frame node");
 161
 162         InspectorTest.addResult("Testing ReplayPreviousDrawingCallClick starting on a frame node");
 163         for (var i = frameNodes.length - 2; i >= -5; --i) {
 164             profileView._onReplayDrawingCallClick(false);
 165             InspectorTest.assertEquals(frameNodes[i] || frameNodes[0], dataGrid.selectedNode, "error on index " + i);
 166         }
 167
 168         drawCallGroups[0].revealAndSelect();
 169         InspectorTest.assertEquals(drawCallGroups[0], dataGrid.selectedNode, "Expected to move to the first draw call group");
 170
 171         InspectorTest.addResult("Testing ReplayNextDrawingCallClick starting on a draw call group");
 172         var expected = [drawCallGroups[1], frameNodes[1], allNodesFlat.peekLast()];
 173         for (var i = 0; i < expected.length + 5; ++i) {
 174             profileView._onReplayDrawingCallClick(true);
 175             InspectorTest.assertEquals(expected[i] || expected.peekLast(), dataGrid.selectedNode, "error on index " + i);
 176         }
 177
 178         profileView._onReplayLastStepClick();
 179         InspectorTest.assertEquals(allNodesFlat.peekLast(), dataGrid.selectedNode, "Expected to move to the last call");
 180
 181         InspectorTest.addResult("Testing ReplayPreviousDrawingCallClick starting on a call node");
 182         var expected = [frameNodes[0], frameNodes[1], drawCallGroups[2], drawCallGroups[3], drawCallGroups[4], nodes[28]];
 183         for (var i = expected.length - 1; i >= -5; --i) {
 184             profileView._onReplayDrawingCallClick(false);
 185             InspectorTest.assertEquals(expected[i] || expected[0], dataGrid.selectedNode, "error on index " + i);
 186         }
 187
 188         nodes[15].revealAndSelect();
 189         InspectorTest.assertEquals(nodes[15], dataGrid.selectedNode, "Expected to select node #20");
 190
 191         InspectorTest.addResult("Testing ReplayNextDrawingCallClick starting on a call node");
 192         var expected = [nodes[16], drawCallGroups[3], drawCallGroups[4], allNodesFlat.peekLast()];
 193         for (var i = 0; i < expected.length + 5; ++i) {
 194             profileView._onReplayDrawingCallClick(true);
 195             InspectorTest.assertEquals(expected[i] || expected.peekLast(), dataGrid.selectedNode, "error on index " + i);
 196         }
 197     }
 198
 199     function dumpTableData(tableElement)
 200     {
 201         var textRows = [];
 202         var textWidths = [];
 203         var rows = tableElement.getElementsByTagName("tr");
 204         for (var i = 0, row; row = rows[i]; ++i) {
 205             if (!row.offsetHeight || !row.textContent)
 206                 continue;
 207             var textCols = [];
 208             var cols = row.getElementsByTagName("td");
 209             for (var j = 0, col; col = cols[j]; ++j) {
 210                 if (!col.offsetHeight)
 211                     continue;
 212                 var index = textCols.length;
 213                 var text = col.textContent;
 214                 textWidths[index] = Math.max(textWidths[index] || 0, text.length);
 215                 textCols[index] = text;
 216             }
 217             if (textCols.length)
 218                 textRows.push(textCols);
 219         }
 220
 221         function alignText(text, width)
 222         {
 223             var result = "";
 224             var spaces = width - text.length;
 225             while (spaces-- > 0)
 226                 result += " ";
 227             result += text;
 228             return result;
 229         }
 230
 231         for (var i = 0; i < textRows.length; ++i) {
 232             var line = "";
 233             for (var j = 0; j < textRows[i].length; ++j) {
 234                 if (j)
 235                     line += " | ";
 236                 line += alignText(textRows[i][j], textWidths[j]);
 237             }
 238             line += "|";
 239             InspectorTest.addResult(line);
 240         }
 241     }
 242 }
 243
 244 </script>
 245 </head>
 246 <body onload="runTest()">
 247 <p>
 248 Tests replay log grid.
 249 </p>
 250 <a href="https://bugs.webkit.org/show_bug.cgi?id=109592">Bug 109592</a>
 251 <canvas id="canvas"></canvas>
 252 </body>
 253 </html>