third_party/WebKit/LayoutTests/inspector/tracing/timeline-js-callstacks.html

   1 <html>
   2 <head>
   3 <script src="../../http/tests/inspector/inspector-test.js"></script>
   4 <script src="../tracing-test.js"></script>
   5 <script>
   6 function test()
   7 {
   8     var sessionId = "6.23";
   9     var rawTraceEvents = [
  10     {
  11         "args": {
  12           "name": "Renderer"
  13         },
  14         "cat": "__metadata",
  15         "name": "process_name",
  16         "ph": "M",
  17         "pid": 17851,
  18         "tid": 23,
  19         "ts": 0
  20     },
  21     {
  22         "args": {
  23             "name": "CrRendererMain"
  24         },
  25         "cat": "__metadata",
  26         "name": "thread_name",
  27         "ph": "M",
  28         "pid": 17851,
  29         "tid": 23,
  30         "ts": 0
  31     },
  32     {
  33         "args": {
  34             "sessionId": sessionId
  35         },
  36         "cat": "disabled-by-default-devtools.timeline",
  37         "name": "TracingStartedInPage",
  38         "ph": "I",
  39         "pid": 17851,
  40         "tid": 23,
  41         "ts": 100000,
  42         "tts": 606543
  43     },
  44     {
  45         "args": {},
  46         "cat": "disabled-by-default-devtools.timeline",
  47         "name": "Program",
  48         "ph": "B",
  49         "pid": 17851,
  50         "tid": 23,
  51         "ts": 200000,
  52         "tts": 5612442
  53     },
  54     {
  55         "args": {
  56             "data": {
  57                 "stackTrace": [
  58                     { "functionName": "c", "callUID": "c", "scriptId": 1 },
  59                     { "functionName": "b", "callUID": "b", "scriptId": 1 },
  60                     { "functionName": "a", "callUID": "a", "scriptId": 1 }
  61                 ]
  62             }
  63         },
  64         "cat": "disabled-by-default-devtools.timeline",
  65         "name": "JSSample",
  66         "ph": "I",
  67         "pid": 17851,
  68         "tid": 23,
  69         "ts": 208000,
  70         "tts": 1758056
  71     },
  72     {
  73         "args": {},
  74         "cat": "disabled-by-default-devtools.timeline",
  75         "name": "FunctionCall",
  76         "ph": "X",
  77         "pid": 17851,
  78         "tid": 23,
  79         "ts": 210000,
  80         "dur": 30000,
  81         "tts": 5612442
  82     },
  83     {
  84         "args": {
  85             "data": {
  86                 "stackTrace": [
  87                     { "functionName": "c", "callUID": "c", "scriptId": 1 },
  88                     { "functionName": "b", "callUID": "b", "scriptId": 1 },
  89                     { "functionName": "a", "callUID": "a", "scriptId": 1 }
  90                 ]
  91             }
  92         },
  93         "cat": "disabled-by-default-devtools.timeline",
  94         "name": "JSSample",
  95         "ph": "I",
  96         "pid": 17851,
  97         "tid": 23,
  98         "ts": 211000,
  99         "tts": 1758056
 100     },
 101     {
 102         "args": {
 103             "data": {
 104                 "stackTrace": []
 105             }
 106         },
 107         "cat": "disabled-by-default-devtools.timeline",
 108         "name": "JSSample",
 109         "ph": "I",
 110         "pid": 17851,
 111         "tid": 23,
 112         "ts": 212000,
 113         "tts": 1758056
 114     },
 115     {
 116         "args": {
 117             "data": {
 118                 "stackTrace": [
 119                     { "functionName": "c", "callUID": "c", "scriptId": 1 },
 120                     { "functionName": "b", "callUID": "b", "scriptId": 1 },
 121                     { "functionName": "a", "callUID": "a", "scriptId": 1 }
 122                 ]
 123             }
 124         },
 125         "cat": "disabled-by-default-devtools.timeline",
 126         "name": "JSSample",
 127         "ph": "I",
 128         "pid": 17851,
 129         "tid": 23,
 130         "ts": 219875,
 131         "tts": 1758056
 132     },
 133     {
 134         "args": {
 135             "frame": "0x2f7b63884000",
 136             "data": {
 137                 "stackTrace": [
 138                     { "functionName": "b", "callUID": "b", "scriptId": 1 },
 139                     { "functionName": "a", "callUID": "a", "scriptId": 1 }
 140                 ]
 141             }
 142         },
 143         "cat": "disabled-by-default-devtools.timeline",
 144         "name": "InvalidateLayout",
 145         "ph": "X",
 146         "pid": 17851,
 147         "tid": 23,
 148         "ts": 220000,
 149         "dur": 7000,
 150         "tts": 1758056
 151     },
 152     {
 153         "args": {
 154             "data": {
 155                 "stackTrace": [
 156                     { "functionName": "c", "callUID": "c", "scriptId": 1 },
 157                     { "functionName": "b", "callUID": "b", "scriptId": 1 },
 158                     { "functionName": "a", "callUID": "a", "scriptId": 1 }
 159                 ]
 160             }
 161         },
 162         "cat": "disabled-by-default-devtools.timeline",
 163         "name": "JSSample",
 164         "ph": "I",
 165         "pid": 17851,
 166         "tid": 23,
 167         "ts": 220125,
 168         "tts": 1758056
 169     },
 170     {
 171         "args": {
 172             "frame": "0x2f7b63884000",
 173             "data": {
 174                 "stackTrace": [
 175                     { "functionName": "b", "callUID": "b", "scriptId": 1 },
 176                     { "functionName": "a", "callUID": "a", "scriptId": 1 }
 177                 ]
 178             }
 179         },
 180         "cat": "disabled-by-default-devtools.timeline",
 181         "name": "InvalidateLayout",
 182         "ph": "X",
 183         "pid": 17851,
 184         "tid": 23,
 185         "ts": 221000,
 186         "dur": 3000,
 187         "tts": 1758056
 188     },
 189     {
 190         "args": {
 191             "data": {
 192                 "stackTrace": [
 193                     { "functionName": "g", "scriptId": 1 },
 194                     { "functionName": "f", "scriptId": 1 },
 195                     { "functionName": "b", "scriptId": 1 },
 196                     { "functionName": "a", "scriptId": 1 }
 197                 ]
 198             }
 199         },
 200         "cat": "disabled-by-default-devtools.timeline",
 201         "name": "JSSample",
 202         "ph": "I",
 203         "pid": 17851,
 204         "tid": 23,
 205         "ts": 222000,
 206         "tts": 1758056
 207     },
 208     {
 209         "args": {
 210             "data": {
 211                 "stackTrace": [
 212                     { "functionName": "g", "scriptId": 1 },
 213                     { "functionName": "e", "scriptId": 1 },
 214                     { "functionName": "b", "scriptId": 1 },
 215                     { "functionName": "a", "scriptId": 1 }
 216                 ]
 217             }
 218         },
 219         "cat": "disabled-by-default-devtools.timeline",
 220         "name": "JSSample",
 221         "ph": "I",
 222         "pid": 17851,
 223         "tid": 23,
 224         "ts": 227125,
 225         "tts": 1758056
 226     },
 227     {
 228         "args": {
 229             "data": {
 230                 "stackTrace": [
 231                     { "functionName": "g", "scriptId": 1 },
 232                     { "functionName": "e", "scriptId": 1 },
 233                     { "functionName": "b", "scriptId": 1 },
 234                     { "functionName": "a", "scriptId": 1 }
 235                 ]
 236             }
 237         },
 238         "cat": "disabled-by-default-devtools.timeline",
 239         "name": "JSSample",
 240         "ph": "I",
 241         "pid": 17851,
 242         "tid": 23,
 243         "ts": 227250,
 244         "tts": 1758056
 245     },
 246     {
 247         "args": {
 248             "data": {
 249                 "stackTrace": [
 250                     { "functionName": "a", "callUID": "a", "scriptId": 1 },
 251                     { "functionName": "l", "callUID": "l", "scriptId": 1 },
 252                     { "functionName": "f", "callUID": "f", "scriptId": 1 }
 253                 ]
 254             }
 255         },
 256         "cat": "disabled-by-default-devtools.timeline",
 257         "name": "JSSample",
 258         "ph": "I",
 259         "pid": 17851,
 260         "tid": 23,
 261         "ts": 230000,
 262         "tts": 1758056
 263     },
 264     {
 265         "args": {
 266             "beginData": {
 267                 "stackTrace": [
 268                     { "functionName": "a", "callUID": "a", "scriptId": 1 },
 269                     { "functionName": "l", "callUID": "l", "scriptId": 1 },
 270                     { "functionName": "f", "callUID": "f", "scriptId": 1 },
 271                     { "functionName": "sin", "callUID": "sin", "scriptId": 2, "url": "native math.js" }
 272                 ]
 273             }
 274         },
 275         "cat": "disabled-by-default-devtools.timeline",
 276         "name": "Layout",
 277         "ph": "X",
 278         "dur": 100,
 279         "pid": 17851,
 280         "tid": 23,
 281         "ts": 230010,
 282         "tts": 1758056
 283     },
 284     {
 285         "args": {
 286             "data": {
 287                 "stackTrace": [
 288                     { "functionName": "a", "callUID": "a", "scriptId": 1 },
 289                     { "functionName": "l", "callUID": "l", "scriptId": 1 },
 290                     { "functionName": "f", "callUID": "f", "scriptId": 1 },
 291                     { "functionName": "sin", "callUID": "sin", "scriptId": 2, "url": "native math.js" }
 292                 ]
 293             }
 294         },
 295         "cat": "disabled-by-default-devtools.timeline",
 296         "name": "JSSample",
 297         "ph": "I",
 298         "pid": 17851,
 299         "tid": 23,
 300         "ts": 230125,
 301         "tts": 1758056
 302     },
 303     {
 304         "args": {},
 305         "cat": "disabled-by-default-devtools.timeline",
 306         "name": "FunctionCall",
 307         "ph": "X",
 308         "pid": 17851,
 309         "tid": 23,
 310         "ts": 250000,
 311         "dur": 10000
 312     },
 313     {
 314         "args": {
 315             "data": {
 316                 "stackTrace": [
 317                     { "functionName": "y", "callUID": "y", "scriptId": 1 },
 318                     { "functionName": "x", "callUID": "x", "scriptId": 1 }
 319                 ]
 320             }
 321         },
 322         "cat": "disabled-by-default-devtools.timeline",
 323         "name": "FunctionCall",
 324         "ph": "X",
 325         "pid": 17851,
 326         "tid": 23,
 327         "ts": 251000,
 328         "dur": 1000
 329     },
 330     {
 331         "args": {
 332             "data": {
 333                 "stackTrace": [
 334                     { "functionName": "w", "callUID": "w", "scriptId": 1 },
 335                     { "functionName": "z", "callUID": "z", "scriptId": 1 },
 336                     { "functionName": "y", "callUID": "y", "scriptId": 1 },
 337                     { "functionName": "x", "callUID": "x", "scriptId": 1 }
 338                 ]
 339             }
 340         },
 341         "cat": "disabled-by-default-devtools.timeline",
 342         "name": "JSSample",
 343         "ph": "I",
 344         "pid": 17851,
 345         "tid": 23,
 346         "ts": 251000,
 347     },
 348     {
 349         "args": {
 350             "data": {
 351                 "stackTrace": [
 352                     { "functionName": "w", "callUID": "w", "scriptId": 1 },
 353                     { "functionName": "z", "callUID": "z", "scriptId": 1 },
 354                     { "functionName": "y", "callUID": "y", "scriptId": 1 },
 355                     { "functionName": "x", "callUID": "x", "scriptId": 1 }
 356                 ]
 357             }
 358         },
 359         "cat": "disabled-by-default-devtools.timeline",
 360         "name": "JSSample",
 361         "ph": "I",
 362         "pid": 17851,
 363         "tid": 23,
 364         "ts": 251100,
 365     },
 366     {
 367         "args": {
 368             "data": {
 369                 "stackTrace": [
 370                     { "functionName": "w", "scriptId": 1 },
 371                     { "functionName": "y", "callUID": "y", "scriptId": 1 },
 372                     { "functionName": "x", "callUID": "x", "scriptId": 1 }
 373                 ]
 374             }
 375         },
 376         "cat": "disabled-by-default-devtools.timeline",
 377         "name": "JSSample",
 378         "ph": "I",
 379         "pid": 17851,
 380         "tid": 23,
 381         "ts": 251200,
 382     },
 383     {
 384         "args": {
 385             "data": {
 386                 "stackTrace": [
 387                     { "functionName": "w", "scriptId": 1 },
 388                     { "functionName": "y", "callUID": "y", "scriptId": 1 },
 389                     { "functionName": "x", "callUID": "x", "scriptId": 1 }
 390                 ]
 391             }
 392         },
 393         "cat": "disabled-by-default-devtools.timeline",
 394         "name": "JSSample",
 395         "ph": "I",
 396         "pid": 17851,
 397         "tid": 23,
 398         "ts": 251300,
 399     },
 400     {
 401         "args": {
 402             "data": {
 403                 "stackTrace": [
 404                     { "functionName": "y", "callUID": "y", "scriptId": 1 },
 405                     { "functionName": "x", "callUID": "x", "scriptId": 1 }
 406                 ]
 407             }
 408         },
 409         "cat": "disabled-by-default-devtools.timeline",
 410         "name": "JSSample",
 411         "ph": "I",
 412         "pid": 17851,
 413         "tid": 23,
 414         "ts": 251400,
 415     },
 416     {
 417         "args": {
 418             "data": {
 419                 "stackTrace": [
 420                     { "functionName": "recursive_b", "scriptId": 1 },
 421                     { "functionName": "recursive_a", "scriptId": 1 },
 422                     { "functionName": "recursive_b", "scriptId": 1 },
 423                     { "functionName": "recursive_a", "scriptId": 1 }
 424                 ]
 425             }
 426         },
 427         "cat": "disabled-by-default-devtools.timeline",
 428         "name": "JSSample",
 429         "ph": "I",
 430         "pid": 17851,
 431         "tid": 23,
 432         "ts": 253000,
 433     },
 434     {
 435         "args": {
 436             "data": {
 437                 "stackTrace": [
 438                     { "functionName": "recursive_a", "scriptId": 1 },
 439                     { "functionName": "recursive_b", "scriptId": 1 },
 440                     { "functionName": "recursive_a", "scriptId": 1 }
 441                 ]
 442             }
 443         },
 444         "cat": "disabled-by-default-devtools.timeline",
 445         "name": "JSSample",
 446         "ph": "I",
 447         "pid": 17851,
 448         "tid": 23,
 449         "ts": 253008,
 450     },
 451     {
 452         "args": {
 453             "data": {
 454                 "stackTrace": [
 455                     { "functionName": "recursive_b", "scriptId": 1 },
 456                     { "functionName": "recursive_a", "scriptId": 1 }
 457                 ]
 458             }
 459         },
 460         "cat": "disabled-by-default-devtools.timeline",
 461         "name": "JSSample",
 462         "ph": "I",
 463         "pid": 17851,
 464         "tid": 23,
 465         "ts": 253012,
 466     },
 467     {
 468         "args": {
 469             "data": {
 470                 "stackTrace": [
 471                     { "functionName": "recursive_a", "scriptId": 1 }
 472                 ]
 473             }
 474         },
 475         "cat": "disabled-by-default-devtools.timeline",
 476         "name": "JSSample",
 477         "ph": "I",
 478         "pid": 17851,
 479         "tid": 23,
 480         "ts": 253014,
 481     },
 482     {
 483         "args": {
 484             "data": {
 485                 "stackTrace": [
 486                 ]
 487             }
 488         },
 489         "cat": "disabled-by-default-devtools.timeline",
 490         "name": "JSSample",
 491         "ph": "I",
 492         "pid": 17851,
 493         "tid": 23,
 494         "ts": 253015,
 495     },
 496     {
 497         "args": {
 498             "data": {
 499                 "stackTrace": [
 500                     { "functionName": "recursive_b", "scriptId": 1 },
 501                     { "functionName": "recursive_a", "scriptId": 1 }
 502                 ]
 503             }
 504         },
 505         "cat": "disabled-by-default-devtools.timeline",
 506         "name": "JSSample",
 507         "ph": "I",
 508         "pid": 17851,
 509         "tid": 23,
 510         "ts": 253100,
 511     },
 512     {
 513         "args": {
 514             "data": {
 515                 "stackTrace": [
 516                     { "functionName": "recursive_a", "scriptId": 1 }
 517                 ]
 518             }
 519         },
 520         "cat": "disabled-by-default-devtools.timeline",
 521         "name": "JSSample",
 522         "ph": "I",
 523         "pid": 17851,
 524         "tid": 23,
 525         "ts": 253200,
 526     },
 527     {
 528         "args": {
 529             "data": {
 530                 "stackTrace": [
 531                 ]
 532             }
 533         },
 534         "cat": "disabled-by-default-devtools.timeline",
 535         "name": "JSSample",
 536         "ph": "I",
 537         "pid": 17851,
 538         "tid": 23,
 539         "ts": 253300,
 540     },
 541     {
 542         "args": {},
 543         "cat": "disabled-by-default-devtools.timeline",
 544         "name": "Program",
 545         "ph": "E",
 546         "pid": 17851,
 547         "tid": 23,
 548         "ts": 500000,
 549         "tts": 5612506
 550     }
 551     ];
 552
 553     var tracingTimelineModel = InspectorTest.tracingTimelineModel();
 554     tracingTimelineModel.setEventsForTest(rawTraceEvents);
 555     var events = WebInspector.TimelineJSProfileProcessor.generateJSFrameEvents(tracingTimelineModel.mainThreadEvents());
 556     events = events.mergeOrdered(tracingTimelineModel.mainThreadEvents(), WebInspector.TracingModel.Event.orderedCompareStartTime);
 557     events.filter(function(e) { return e.duration; }).forEach(function(e) {
 558         InspectorTest.addResult(e.name + ": " + e.startTime.toFixed(3) + " / " + (e.duration.toFixed(3) || 0) + " " + (e.args.data && e.args.data.functionName || ""));
 559     });
 560
 561     InspectorTest.addResult("");
 562     tracingTimelineModel._setMainThreadEvents(events);
 563     var filters = [
 564         WebInspector.TimelineUIUtils.visibleEventsFilter(),
 565         new WebInspector.ExcludeTopLevelFilter()
 566     ];
 567     var treeTopDown = WebInspector.TimelineModel.buildTopDownTree(events, 0, Infinity, filters, WebInspector.TimelineTreeView.eventId);
 568     printProfileTree(0, treeTopDown);
 569     var treeBottomUp = WebInspector.TimelineModel.buildBottomUpTree(treeTopDown);
 570     printProfileTree(0, treeBottomUp);
 571
 572     function printProfileTree(padding, node)
 573     {
 574         var name = node.name || (node.event.name === WebInspector.TimelineModel.RecordType.JSFrame
 575             ? WebInspector.beautifyFunctionName(node.event.args["data"]["functionName"])
 576             : WebInspector.TimelineUIUtils.eventTitle(node.event));
 577         InspectorTest.addResult("  ".repeat(padding) + name + ": " + [node.selfTime, node.totalTime].map(function (t) { return t.toFixed(3); }).join("  "));
 578         (node.children || new Map()).forEach(printProfileTree.bind(null, padding + 1));
 579     }
 580
 581     InspectorTest.completeTest();
 582 }
 583
 584 </script>
 585 </head>
 586 <body onload="runTest()">
 587 </body>
 588 </html>