src/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js

   1 /*
   2  * Copyright (C) 2014 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @implements {WebInspector.FlameChartDataProvider}
  34  * @param {!WebInspector.TracingTimelineModel} model
  35  * @param {!WebInspector.TimelineFrameModelBase} frameModel
  36  */
  37 WebInspector.TimelineFlameChartDataProvider = function(model, frameModel)
  38 {
  39     WebInspector.FlameChartDataProvider.call(this);
  40     this.reset();
  41     this._model = model;
  42     this._frameModel = frameModel;
  43     this._font = "12px " + WebInspector.fontFamily();
  44     this._linkifier = new WebInspector.Linkifier();
  45     this._captureStacksSetting = WebInspector.settings.createSetting("timelineCaptureStacks", true);
  46     this._filters = [];
  47     this.addFilter(WebInspector.TracingTimelineUIUtils.hiddenEventsFilter());
  48     this.addFilter(new WebInspector.TracingTimelineModel.ExclusiveEventNameFilter([WebInspector.TracingTimelineModel.RecordType.Program]));
  49 }
  50
  51 WebInspector.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.01;
  52 WebInspector.TimelineFlameChartDataProvider.JSFrameCoalesceThresholdMs = 1.1;
  53
  54 /**
  55  * @return {!WebInspector.FlameChart.ColorGenerator}
  56  */
  57 WebInspector.TimelineFlameChartDataProvider.consoleEventsColorGenerator = function()
  58 {
  59     if (!WebInspector.TimelineFlameChartDataProvider.consoleEventsColorGenerator._consoleEventsColorGenerator) {
  60         var hueSpace = { min: 30, max: 55, count: 5 };
  61         var satSpace = { min: 70, max: 100, count: 6 };
  62         var colorGenerator = new WebInspector.FlameChart.ColorGenerator(hueSpace, satSpace, 50, 0.7);
  63         WebInspector.TimelineFlameChartDataProvider.consoleEventsColorGenerator._consoleEventsColorGenerator = colorGenerator;
  64     }
  65     return WebInspector.TimelineFlameChartDataProvider.consoleEventsColorGenerator._consoleEventsColorGenerator;
  66 }
  67
  68 WebInspector.TimelineFlameChartDataProvider.prototype = {
  69     /**
  70      * @return {number}
  71      */
  72     barHeight: function()
  73     {
  74         return 20;
  75     },
  76
  77     /**
  78      * @return {number}
  79      */
  80     textBaseline: function()
  81     {
  82         return 6;
  83     },
  84
  85     /**
  86      * @return {number}
  87      */
  88     textPadding: function()
  89     {
  90         return 5;
  91     },
  92
  93     /**
  94      * @param {number} entryIndex
  95      * @return {string}
  96      */
  97     entryFont: function(entryIndex)
  98     {
  99         return this._font;
 100     },
 101
 102     /**
 103      * @param {number} entryIndex
 104      * @return {?string}
 105      */
 106     entryTitle: function(entryIndex)
 107     {
 108         var event = this._entryEvents[entryIndex];
 109         if (event) {
 110             if (event.phase === WebInspector.TracingModel.Phase.AsyncStepInto || event.phase === WebInspector.TracingModel.Phase.AsyncStepPast)
 111                 return event.name + ":" + event.args["step"];
 112
 113             var name = WebInspector.TracingTimelineUIUtils.eventStyle(event).title;
 114             // TODO(yurys): support event dividers
 115             var details = WebInspector.TracingTimelineUIUtils.buildDetailsNodeForTraceEvent(event, this._linkifier);
 116             if (event.name === WebInspector.TracingTimelineModel.RecordType.JSFrame && details)
 117                 return details.textContent;
 118             return details ? WebInspector.UIString("%s (%s)", name, details.textContent) : name;
 119         }
 120         var title = this._entryIndexToTitle[entryIndex];
 121         if (!title) {
 122             title = WebInspector.UIString("Unexpected entryIndex %d", entryIndex);
 123             console.error(title);
 124         }
 125         return title;
 126     },
 127
 128     /**
 129      * @param {number} startTime
 130      * @param {number} endTime
 131      * @return {?Array.<number>}
 132      */
 133     dividerOffsets: function(startTime, endTime)
 134     {
 135         return null;
 136     },
 137
 138     /**
 139      * @override
 140      * @param {number} index
 141      * @return {string}
 142      */
 143     markerColor: function(index)
 144     {
 145         var event = this._markerEvents[index];
 146         return WebInspector.TracingTimelineUIUtils.markerEventColor(event);
 147     },
 148
 149     /**
 150      * @override
 151      * @param {number} index
 152      * @return {string}
 153      */
 154     markerTitle: function(index)
 155     {
 156         var event = this._markerEvents[index];
 157         return WebInspector.TracingTimelineUIUtils.eventTitle(event, this._model);
 158     },
 159
 160     reset: function()
 161     {
 162         this._timelineData = null;
 163         /** @type {!Array.<!WebInspector.TracingModel.Event>} */
 164         this._entryEvents = [];
 165         this._entryIndexToTitle = {};
 166         this._markerEvents = [];
 167         this._entryIndexToFrame = {};
 168         this._asyncColorByCategory = {};
 169     },
 170
 171     /**
 172      * @return {!WebInspector.FlameChart.TimelineData}
 173      */
 174     timelineData: function()
 175     {
 176         if (this._timelineData)
 177             return this._timelineData;
 178
 179         this._timelineData = new WebInspector.FlameChart.TimelineData([], [], []);
 180
 181         this._minimumBoundary = this._model.minimumRecordTime();
 182         this._timeSpan = this._model.isEmpty() ?  1000 : this._model.maximumRecordTime() - this._minimumBoundary;
 183         this._currentLevel = 0;
 184         this._appendFrameBars(this._frameModel.frames());
 185         this._appendThreadTimelineData(WebInspector.UIString("Main Thread"), this._model.mainThreadEvents(), this._model.mainThreadAsyncEvents());
 186         var threads = this._model.virtualThreads();
 187         for (var i = 0; i < threads.length; i++)
 188             this._appendThreadTimelineData(threads[i].name, threads[i].events, threads[i].asyncEvents);
 189         return this._timelineData;
 190     },
 191
 192     /**
 193      * @param {string} threadTitle
 194      * @param {!Array.<!WebInspector.TracingModel.Event>} syncEvents
 195      * @param {!Array.<!Array.<!WebInspector.TracingModel.Event>>} asyncEvents
 196      */
 197     _appendThreadTimelineData: function(threadTitle, syncEvents, asyncEvents)
 198     {
 199         var levelCount = this._appendAsyncEvents(threadTitle, asyncEvents);
 200         if (Runtime.experiments.isEnabled("timelineJSCPUProfile")) {
 201             if (this._captureStacksSetting.get()) {
 202                 var jsFrameEvents = this._generateJSFrameEvents(syncEvents);
 203                 syncEvents = jsFrameEvents.mergeOrdered(syncEvents, WebInspector.TracingModel.Event.orderedCompareStartTime);
 204             }
 205         }
 206         levelCount += this._appendSyncEvents(levelCount ? null : threadTitle, syncEvents);
 207         if (levelCount)
 208             ++this._currentLevel;
 209     },
 210
 211     /**
 212      * @param {?string} headerName
 213      * @param {!Array.<!WebInspector.TracingModel.Event>} events
 214      * @return {boolean}
 215      */
 216     _appendSyncEvents: function(headerName, events)
 217     {
 218         var openEvents = [];
 219         var headerAppended = false;
 220
 221         var maxStackDepth = 0;
 222         for (var i = 0; i < events.length; ++i) {
 223             var e = events[i];
 224             if (WebInspector.TracingTimelineUIUtils.isMarkerEvent(e)) {
 225                 this._markerEvents.push(e);
 226                 this._timelineData.markerTimestamps.push(e.startTime);
 227             }
 228             if (!e.endTime && e.phase !== WebInspector.TracingModel.Phase.Instant)
 229                 continue;
 230             if (!this._isVisible(e))
 231                 continue;
 232             while (openEvents.length && openEvents.peekLast().endTime <= e.startTime)
 233                 openEvents.pop();
 234             if (!headerAppended && headerName) {
 235                 this._appendHeaderRecord(headerName, this._currentLevel++);
 236                 headerAppended = true;
 237             }
 238             this._appendEvent(e, this._currentLevel + openEvents.length);
 239             maxStackDepth = Math.max(maxStackDepth, openEvents.length + 1);
 240             if (e.endTime)
 241                 openEvents.push(e);
 242         }
 243         this._currentLevel += maxStackDepth;
 244         return !!maxStackDepth;
 245     },
 246
 247     /**
 248      * @param {string} header
 249      * @param {!Array.<!Array.<!WebInspector.TracingModel.Event>>} eventSteps
 250      */
 251     _appendAsyncEvents: function(header, eventSteps)
 252     {
 253         var lastUsedTimeByLevel = [];
 254         var headerAppended = false;
 255
 256         var maxStackDepth = 0;
 257         for (var i = 0; i < eventSteps.length; ++i) {
 258             var e = eventSteps[i][0];
 259             if (!this._isVisible(e))
 260                 continue;
 261             if (!headerAppended && header) {
 262                 this._appendHeaderRecord(header, this._currentLevel++);
 263                 headerAppended = true;
 264             }
 265             var level;
 266             for (level = 0; level < lastUsedTimeByLevel.length && lastUsedTimeByLevel[level] > e.startTime; ++level) {}
 267             this._appendAsyncEventSteps(eventSteps[i], this._currentLevel + level);
 268             var lastStep = eventSteps[i].peekLast();
 269             lastUsedTimeByLevel[level] = lastStep.phase === WebInspector.TracingModel.Phase.AsyncEnd ? lastStep.startTime : Infinity;
 270         }
 271         this._currentLevel += lastUsedTimeByLevel.length;
 272         return lastUsedTimeByLevel.length;
 273     },
 274
 275     /**
 276      * @param {!Array.<!WebInspector.TimelineFrame>} frames
 277      */
 278     _appendFrameBars: function(frames)
 279     {
 280         this._frameBarsLevel = this._currentLevel++;
 281         for (var i = 0; i < frames.length; ++i)
 282             this._appendFrame(frames[i]);
 283     },
 284
 285     /**
 286      * @param {!Array.<!WebInspector.TracingModel.Event>} events
 287      * @return {!Array.<!WebInspector.TracingModel.Event>}
 288      */
 289     _generateJSFrameEvents: function(events)
 290     {
 291         function equalFrames(frame1, frame2)
 292         {
 293             return frame1.scriptId === frame2.scriptId && frame1.functionName === frame2.functionName;
 294         }
 295
 296         function eventEndTime(e)
 297         {
 298             return e.endTime || e.startTime;
 299         }
 300
 301         function isJSInvocationEvent(e)
 302         {
 303             switch (e.name) {
 304             case WebInspector.TracingTimelineModel.RecordType.FunctionCall:
 305             case WebInspector.TracingTimelineModel.RecordType.EvaluateScript:
 306                 return true;
 307             }
 308             return false;
 309         }
 310
 311         var jsFrameEvents = [];
 312         var jsFramesStack = [];
 313         var coalesceThresholdMs = WebInspector.TimelineFlameChartDataProvider.JSFrameCoalesceThresholdMs;
 314
 315         function onStartEvent(e)
 316         {
 317             extractStackTrace(e);
 318         }
 319
 320         function onInstantEvent(e, top)
 321         {
 322             if (e.name === WebInspector.TracingTimelineModel.RecordType.JSSample && top && !isJSInvocationEvent(top))
 323                 return;
 324             extractStackTrace(e);
 325         }
 326
 327         function onEndEvent(e)
 328         {
 329             if (isJSInvocationEvent(e))
 330                 jsFramesStack.length = 0;
 331         }
 332
 333         function extractStackTrace(e)
 334         {
 335             if (!e.stackTrace)
 336                 return;
 337             while (jsFramesStack.length && eventEndTime(jsFramesStack.peekLast()) + coalesceThresholdMs <= e.startTime)
 338                 jsFramesStack.pop();
 339             var endTime = eventEndTime(e);
 340             var numFrames = e.stackTrace.length;
 341             var minFrames = Math.min(numFrames, jsFramesStack.length);
 342             var j;
 343             for (j = 0; j < minFrames; ++j) {
 344                 var newFrame = e.stackTrace[numFrames - 1 - j];
 345                 var oldFrame = jsFramesStack[j].args["data"];
 346                 if (!equalFrames(newFrame, oldFrame))
 347                     break;
 348                 jsFramesStack[j].setEndTime(Math.max(jsFramesStack[j].endTime, endTime));
 349             }
 350             jsFramesStack.length = j;
 351             for (; j < numFrames; ++j) {
 352                 var frame = e.stackTrace[numFrames - 1 - j];
 353                 var jsFrameEvent = new WebInspector.TracingModel.Event(WebInspector.TracingModel.DevToolsMetadataEventCategory, WebInspector.TracingTimelineModel.RecordType.JSFrame,
 354                     WebInspector.TracingModel.Phase.Complete, e.startTime, e.thread);
 355                 jsFrameEvent.addArgs({ data: frame });
 356                 jsFrameEvent.setEndTime(endTime);
 357                 jsFramesStack.push(jsFrameEvent);
 358                 jsFrameEvents.push(jsFrameEvent);
 359             }
 360         }
 361
 362         var stack = [];
 363         for (var i = 0; i < events.length; ++i) {
 364             var e = events[i];
 365             var top = stack.peekLast();
 366             if (top && top.endTime <= e.startTime)
 367                 onEndEvent(stack.pop());
 368             if (e.duration) {
 369                 onStartEvent(e);
 370                 stack.push(e);
 371             } else {
 372                 onInstantEvent(e, stack.peekLast());
 373             }
 374         }
 375         while (stack.length)
 376             onEndEvent(stack.pop());
 377
 378         return jsFrameEvents;
 379     },
 380
 381     /**
 382      * @param {!WebInspector.TracingTimelineModel.Filter} filter
 383      */
 384     addFilter: function(filter)
 385     {
 386         this._filters.push(filter);
 387     },
 388
 389     /**
 390      * @param {!WebInspector.TracingModel.Event} event
 391      * @return {boolean}
 392      */
 393     _isVisible: function(event)
 394     {
 395         return this._filters.every(function (filter) { return filter.accept(event); });
 396     },
 397
 398     /**
 399      * @return {number}
 400      */
 401     minimumBoundary: function()
 402     {
 403         return this._minimumBoundary;
 404     },
 405
 406     /**
 407      * @return {number}
 408      */
 409     totalTime: function()
 410     {
 411         return this._timeSpan;
 412     },
 413
 414     /**
 415      * @return {number}
 416      */
 417     maxStackDepth: function()
 418     {
 419         return this._currentLevel;
 420     },
 421
 422     /**
 423      * @param {number} entryIndex
 424      * @return {?Array.<!{title: string, text: string}>}
 425      */
 426     prepareHighlightedEntryInfo: function(entryIndex)
 427     {
 428         return null;
 429     },
 430
 431     /**
 432      * @param {number} entryIndex
 433      * @return {boolean}
 434      */
 435     canJumpToEntry: function(entryIndex)
 436     {
 437         return false;
 438     },
 439
 440     /**
 441      * @param {number} entryIndex
 442      * @return {string}
 443      */
 444     entryColor: function(entryIndex)
 445     {
 446         var event = this._entryEvents[entryIndex];
 447         if (!event)
 448             return this._entryIndexToFrame[entryIndex] ? "white" : "#555";
 449         if (event.name === WebInspector.TracingTimelineModel.RecordType.JSFrame)
 450             return this._timelineData.entryLevels[entryIndex] % 2 ? "#efb320" : "#fcc02d";
 451         var category = WebInspector.TracingTimelineUIUtils.eventStyle(event).category;
 452         if (WebInspector.TracingModel.isAsyncPhase(event.phase)) {
 453             if (event.category === WebInspector.TracingModel.ConsoleEventCategory)
 454                 return WebInspector.TimelineFlameChartDataProvider.consoleEventsColorGenerator().colorForID(event.name);
 455             var color = this._asyncColorByCategory[category.name];
 456             if (color)
 457                 return color;
 458             var parsedColor = WebInspector.Color.parse(category.fillColorStop1);
 459             color = parsedColor.setAlpha(0.7).toString(WebInspector.Color.Format.RGBA) || "";
 460             this._asyncColorByCategory[category.name] = color;
 461             return color;
 462         }
 463         return category.fillColorStop1;
 464     },
 465
 466     /**
 467      * @param {number} entryIndex
 468      * @param {!CanvasRenderingContext2D} context
 469      * @param {?string} text
 470      * @param {number} barX
 471      * @param {number} barY
 472      * @param {number} barWidth
 473      * @param {number} barHeight
 474      * @param {function(number):number} offsetToPosition
 475      * @return {boolean}
 476      */
 477     decorateEntry: function(entryIndex, context, text, barX, barY, barWidth, barHeight, offsetToPosition)
 478     {
 479         var frame = this._entryIndexToFrame[entryIndex];
 480         if (frame) {
 481             context.save();
 482
 483             context.translate(0.5, 0.5);
 484
 485             context.beginPath();
 486             context.moveTo(barX, barY);
 487             context.lineTo(barX, context.canvas.height);
 488             context.strokeStyle = "rgba(100, 100, 100, 0.4)";
 489             context.setLineDash([5]);
 490             context.stroke();
 491             context.setLineDash([]);
 492
 493
 494             var padding = 4 * window.devicePixelRatio;
 495             barX += padding;
 496             barWidth -= 2 * padding;
 497             barY += padding;
 498             barHeight -= 2 * padding;
 499
 500             var cornerRadis = 3;
 501             var radiusY = cornerRadis;
 502             var radiusX = Math.min(cornerRadis, barWidth / 2);
 503
 504             context.beginPath();
 505             context.moveTo(barX + radiusX, barY);
 506             context.lineTo(barX + barWidth - radiusX, barY);
 507             context.quadraticCurveTo(barX + barWidth, barY, barX + barWidth, barY + radiusY);
 508             context.lineTo(barX + barWidth, barY + barHeight - radiusY);
 509             context.quadraticCurveTo(barX + barWidth, barY + barHeight, barX + barWidth - radiusX, barY + barHeight);
 510             context.lineTo(barX + radiusX, barY + barHeight);
 511             context.quadraticCurveTo(barX, barY + barHeight, barX, barY + barHeight - radiusY);
 512             context.lineTo(barX, barY + radiusY);
 513             context.quadraticCurveTo(barX, barY, barX + radiusX, barY);
 514             context.closePath();
 515
 516             context.fillStyle = "rgba(200, 200, 200, 0.8)";
 517             context.fill();
 518             context.strokeStyle = "rgba(150, 150, 150, 0.8)";
 519             context.stroke();
 520
 521             var frameDurationText = Number.millisToString(frame.duration, true);
 522             var textWidth = context.measureText(frameDurationText).width;
 523             if (barWidth > textWidth) {
 524                 context.fillStyle = "#555";
 525                 context.fillText(frameDurationText, barX + ((barWidth - textWidth) >> 1), barY + barHeight - 2);
 526             }
 527             context.restore();
 528             return true;
 529         }
 530         if (barWidth < 5)
 531             return false;
 532
 533         // Paint text using white color on dark background.
 534         if (text) {
 535             context.save();
 536             context.fillStyle = "white";
 537             context.shadowColor = "rgba(0, 0, 0, 0.1)";
 538             context.shadowOffsetX = 1;
 539             context.shadowOffsetY = 1;
 540             context.font = this._font;
 541             context.fillText(text, barX + this.textPadding(), barY + barHeight - this.textBaseline());
 542             context.restore();
 543         }
 544
 545         var event = this._entryEvents[entryIndex];
 546         if (event && event.warning) {
 547             context.save();
 548
 549             context.rect(barX, barY, barWidth, this.barHeight());
 550             context.clip();
 551
 552             context.beginPath();
 553             context.fillStyle = "red";
 554             context.moveTo(barX + barWidth - 15, barY + 1);
 555             context.lineTo(barX + barWidth - 1, barY + 1);
 556             context.lineTo(barX + barWidth - 1, barY + 15);
 557             context.fill();
 558
 559             context.restore();
 560         }
 561
 562         return true;
 563     },
 564
 565     /**
 566      * @param {number} entryIndex
 567      * @return {boolean}
 568      */
 569     forceDecoration: function(entryIndex)
 570     {
 571         var event = this._entryEvents[entryIndex];
 572         if (!event)
 573             return !!this._entryIndexToFrame[entryIndex];
 574         return !!event.warning;
 575     },
 576
 577    /**
 578      * @param {number} entryIndex
 579      * @return {?{startTime: number, endTime: number}}
 580      */
 581     highlightTimeRange: function(entryIndex)
 582     {
 583         var startTime = this._timelineData.entryStartTimes[entryIndex];
 584         if (!startTime)
 585             return null;
 586         return {
 587             startTime: startTime,
 588             endTime: startTime + this._timelineData.entryTotalTimes[entryIndex]
 589         }
 590     },
 591
 592     /**
 593      * @return {number}
 594      */
 595     paddingLeft: function()
 596     {
 597         return 0;
 598     },
 599
 600     /**
 601      * @param {number} entryIndex
 602      * @return {string}
 603      */
 604     textColor: function(entryIndex)
 605     {
 606         return "white";
 607     },
 608
 609     /**
 610      * @param {string} title
 611      * @param {number} level
 612      */
 613     _appendHeaderRecord: function(title, level)
 614     {
 615         var index = this._entryEvents.length;
 616         this._entryIndexToTitle[index] = title;
 617         this._entryEvents.push(null);
 618         this._timelineData.entryLevels[index] = level;
 619         this._timelineData.entryTotalTimes[index] = this._timeSpan;
 620         this._timelineData.entryStartTimes[index] = this._minimumBoundary;
 621     },
 622
 623     /**
 624      * @param {!WebInspector.TracingModel.Event} event
 625      * @param {number} level
 626      */
 627     _appendEvent: function(event, level)
 628     {
 629         var index = this._entryEvents.length;
 630         this._entryEvents.push(event);
 631         this._timelineData.entryLevels[index] = level;
 632         this._timelineData.entryTotalTimes[index] = event.duration || WebInspector.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs;
 633         this._timelineData.entryStartTimes[index] = event.startTime;
 634     },
 635
 636     /**
 637      * @param {!Array.<!WebInspector.TracingModel.Event>} steps
 638      * @param {number} level
 639      */
 640     _appendAsyncEventSteps: function(steps, level)
 641     {
 642         // If we have past steps, put the end event for each range rather than start one.
 643         var eventOffset = steps[1].phase === WebInspector.TracingModel.Phase.AsyncStepPast ? 1 : 0;
 644         for (var i = 0; i < steps.length - 1; ++i) {
 645             var index = this._entryEvents.length;
 646             this._entryEvents.push(steps[i + eventOffset]);
 647             var startTime = steps[i].startTime;
 648             this._timelineData.entryLevels[index] = level;
 649             this._timelineData.entryTotalTimes[index] = steps[i + 1].startTime - startTime;
 650             this._timelineData.entryStartTimes[index] = startTime;
 651         }
 652     },
 653
 654     /**
 655      * @param {!WebInspector.TimelineFrame} frame
 656      */
 657     _appendFrame: function(frame)
 658     {
 659         var index = this._entryEvents.length;
 660         this._entryEvents.push(null);
 661         this._entryIndexToFrame[index] = frame;
 662         this._entryIndexToTitle[index] = Number.millisToString(frame.duration, true);
 663         this._timelineData.entryLevels[index] = this._frameBarsLevel;
 664         this._timelineData.entryTotalTimes[index] = frame.duration;
 665         this._timelineData.entryStartTimes[index] = frame.startTime;
 666     },
 667
 668     /**
 669      * @param {number} entryIndex
 670      * @return {?WebInspector.TimelineSelection}
 671      */
 672     createSelection: function(entryIndex)
 673     {
 674         var event = this._entryEvents[entryIndex];
 675         if (event) {
 676             this._lastSelection = new WebInspector.TimelineFlameChart.Selection(WebInspector.TimelineSelection.fromTraceEvent(event), entryIndex);
 677             return this._lastSelection.timelineSelection;
 678         }
 679         var frame = this._entryIndexToFrame[entryIndex];
 680         if (frame) {
 681             this._lastSelection = new WebInspector.TimelineFlameChart.Selection(WebInspector.TimelineSelection.fromFrame(frame), entryIndex);
 682             return this._lastSelection.timelineSelection;
 683         }
 684         return null;
 685     },
 686
 687     /**
 688      * @param {?WebInspector.TimelineSelection} selection
 689      * @return {number}
 690      */
 691     entryIndexForSelection: function(selection)
 692     {
 693         if (!selection)
 694             return -1;
 695
 696         if (this._lastSelection && this._lastSelection.timelineSelection.object() === selection.object())
 697             return this._lastSelection.entryIndex;
 698         switch  (selection.type()) {
 699         case WebInspector.TimelineSelection.Type.TraceEvent:
 700             var event = /** @type{!WebInspector.TracingModel.Event} */ (selection.object());
 701             var entryEvents = this._entryEvents;
 702             for (var entryIndex = 0; entryIndex < entryEvents.length; ++entryIndex) {
 703                 if (entryEvents[entryIndex] === event) {
 704                     this._lastSelection = new WebInspector.TimelineFlameChart.Selection(WebInspector.TimelineSelection.fromTraceEvent(event), entryIndex);
 705                     return entryIndex;
 706                 }
 707             }
 708             break;
 709         case WebInspector.TimelineSelection.Type.Frame:
 710             var frame = /** @type {!WebInspector.TimelineFrame} */ (selection.object());
 711             for (var frameIndex in this._entryIndexToFrame) {
 712                 if (this._entryIndexToFrame[frameIndex] === frame) {
 713                     this._lastSelection = new WebInspector.TimelineFlameChart.Selection(WebInspector.TimelineSelection.fromFrame(frame), Number(frameIndex));
 714                     return Number(frameIndex);
 715                 }
 716             }
 717             break;
 718         }
 719         return -1;
 720     }
 721 }
 722
 723 /**
 724  * @constructor
 725  * @extends {WebInspector.VBox}
 726  * @implements {WebInspector.TimelineModeView}
 727  * @implements {WebInspector.FlameChartDelegate}
 728  * @param {!WebInspector.TimelineModeViewDelegate} delegate
 729  * @param {!WebInspector.TracingTimelineModel} tracingModel
 730  * @param {!WebInspector.TimelineFrameModelBase} frameModel
 731  */
 732 WebInspector.TimelineFlameChart = function(delegate, tracingModel, frameModel)
 733 {
 734     WebInspector.VBox.call(this);
 735     this.element.classList.add("timeline-flamechart");
 736     this.registerRequiredCSS("flameChart.css");
 737     this._delegate = delegate;
 738     this._model = tracingModel;
 739     this._dataProvider = new WebInspector.TimelineFlameChartDataProvider(tracingModel, frameModel)
 740     this._mainView = new WebInspector.FlameChart(this._dataProvider, this, true);
 741     this._mainView.show(this.element);
 742     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordingStarted, this._onRecordingStarted, this);
 743     this._mainView.addEventListener(WebInspector.FlameChart.Events.EntrySelected, this._onEntrySelected, this);
 744 }
 745
 746 WebInspector.TimelineFlameChart.prototype = {
 747     dispose: function()
 748     {
 749         this._model.removeEventListener(WebInspector.TimelineModel.Events.RecordingStarted, this._onRecordingStarted, this);
 750         this._mainView.removeEventListener(WebInspector.FlameChart.Events.EntrySelected, this._onEntrySelected, this);
 751     },
 752
 753     /**
 754      * @param {number} windowStartTime
 755      * @param {number} windowEndTime
 756      */
 757     requestWindowTimes: function(windowStartTime, windowEndTime)
 758     {
 759         this._delegate.requestWindowTimes(windowStartTime, windowEndTime);
 760     },
 761
 762     /**
 763      * @param {?RegExp} textFilter
 764      */
 765     refreshRecords: function(textFilter)
 766     {
 767         this._dataProvider.reset();
 768         this._mainView.scheduleUpdate();
 769     },
 770
 771     wasShown: function()
 772     {
 773         this._mainView.scheduleUpdate();
 774     },
 775
 776     /**
 777      * @return {!WebInspector.View}
 778      */
 779     view: function()
 780     {
 781         return this;
 782     },
 783
 784     reset: function()
 785     {
 786         this._automaticallySizeWindow = true;
 787         this._dataProvider.reset();
 788         this._mainView.reset();
 789         this._mainView.setWindowTimes(0, Infinity);
 790     },
 791
 792     _onRecordingStarted: function()
 793     {
 794         this._automaticallySizeWindow = true;
 795         this._mainView.reset();
 796     },
 797
 798     /**
 799      * @param {!WebInspector.TimelineModel.Record} record
 800      */
 801     addRecord: function(record)
 802     {
 803         this._dataProvider.reset();
 804         if (this._automaticallySizeWindow) {
 805             var minimumRecordTime = this._model.minimumRecordTime();
 806             if (record.startTime() > (minimumRecordTime + 1000)) {
 807                 this._automaticallySizeWindow = false;
 808                 this._delegate.requestWindowTimes(minimumRecordTime, minimumRecordTime + 1000);
 809             }
 810             this._mainView.scheduleUpdate();
 811         } else {
 812             if (!this._pendingUpdateTimer)
 813                 this._pendingUpdateTimer = window.setTimeout(this._updateOnAddRecord.bind(this), 300);
 814         }
 815     },
 816
 817     _updateOnAddRecord: function()
 818     {
 819         delete this._pendingUpdateTimer;
 820         this._mainView.scheduleUpdate();
 821     },
 822
 823     /**
 824      * @param {number} startTime
 825      * @param {number} endTime
 826      */
 827     setWindowTimes: function(startTime, endTime)
 828     {
 829         this._mainView.setWindowTimes(startTime, endTime);
 830         this._delegate.select(null);
 831     },
 832
 833     /**
 834      * @param {number} width
 835      */
 836     setSidebarSize: function(width)
 837     {
 838     },
 839
 840     /**
 841      * @param {?WebInspector.TimelineModel.Record} record
 842      * @param {string=} regex
 843      * @param {boolean=} selectRecord
 844      */
 845     highlightSearchResult: function(record, regex, selectRecord)
 846     {
 847     },
 848
 849     /**
 850      * @param {?WebInspector.TimelineSelection} selection
 851      */
 852     setSelection: function(selection)
 853     {
 854         var index = this._dataProvider.entryIndexForSelection(selection);
 855         this._mainView.setSelectedEntry(index);
 856     },
 857
 858     /**
 859      * @param {!WebInspector.Event} event
 860      */
 861     _onEntrySelected: function(event)
 862     {
 863         var entryIndex = /** @type{number} */ (event.data);
 864         var timelineSelection = this._dataProvider.createSelection(entryIndex);
 865         if (timelineSelection)
 866             this._delegate.select(timelineSelection);
 867     },
 868
 869     __proto__: WebInspector.VBox.prototype
 870 }
 871
 872 /**
 873   * @constructor
 874   * @param {!WebInspector.TimelineSelection} selection
 875   * @param {number} entryIndex
 876   */
 877 WebInspector.TimelineFlameChart.Selection = function(selection, entryIndex)
 878 {
 879     this.timelineSelection = selection;
 880     this.entryIndex = entryIndex;
 881 }