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  * @implements {WebInspector.TimelineFlameChart.SelectionProvider}
  35  * @param {!WebInspector.TimelineModelImpl} model
  36  * @param {!WebInspector.TimelineFrameModelBase} frameModel
  37  */
  38 WebInspector.TimelineFlameChartDataProvider = function(model, frameModel)
  39 {
  40     WebInspector.FlameChartDataProvider.call(this);
  41     this._model = model;
  42     this._frameModel = frameModel;
  43     this._font = "12px " + WebInspector.fontFamily();
  44     this._linkifier = new WebInspector.Linkifier();
  45 }
  46
  47 WebInspector.TimelineFlameChartDataProvider.prototype = {
  48     /**
  49      * @return {number}
  50      */
  51     barHeight: function()
  52     {
  53         return 20;
  54     },
  55
  56     /**
  57      * @return {number}
  58      */
  59     textBaseline: function()
  60     {
  61         return 6;
  62     },
  63
  64     /**
  65      * @return {number}
  66      */
  67     textPadding: function()
  68     {
  69         return 5;
  70     },
  71
  72     /**
  73      * @param {number} entryIndex
  74      * @return {string}
  75      */
  76     entryFont: function(entryIndex)
  77     {
  78         return this._font;
  79     },
  80
  81     /**
  82      * @param {number} entryIndex
  83      * @return {?string}
  84      */
  85     entryTitle: function(entryIndex)
  86     {
  87         var record = this._records[entryIndex];
  88         if (record === this._cpuThreadRecord)
  89             return WebInspector.UIString("CPU");
  90         else if (record === this._gpuThreadRecord)
  91             return WebInspector.UIString("GPU");
  92         var details = WebInspector.TimelineUIUtilsImpl.buildDetailsNode(record, this._linkifier, this._model.loadedFromFile());
  93         var title = WebInspector.TimelineUIUtilsImpl.recordTitle(record);
  94         return details ? WebInspector.UIString("%s (%s)", title, details.textContent) : title;
  95     },
  96
  97     /**
  98      * @param {number} startTime
  99      * @param {number} endTime
 100      * @return {?Array.<number>}
 101      */
 102     dividerOffsets: function(startTime, endTime)
 103     {
 104         // While we have tracing and timeline flame chart on screen at a time,
 105         // we don't want to render frame-based grid.
 106         return null;
 107     },
 108
 109     reset: function()
 110     {
 111         this._timelineData = null;
 112     },
 113
 114     /**
 115      * @return {!WebInspector.FlameChart.TimelineData}
 116      */
 117     timelineData: function()
 118     {
 119         if (this._timelineData)
 120             return this._timelineData;
 121
 122         this._linkifier.reset();
 123
 124         /**
 125          * @type {?WebInspector.FlameChart.TimelineData}
 126          */
 127         this._timelineData = {
 128             entryLevels: [],
 129             entryTotalTimes: [],
 130             entryStartTimes: []
 131         };
 132
 133         this._records = [];
 134         this._entryThreadDepths = {};
 135         this._minimumBoundary = this._model.minimumRecordTime();
 136
 137         var cpuThreadRecordPayload = { type: WebInspector.TimelineModel.RecordType.Program };
 138         this._cpuThreadRecord = new WebInspector.TimelineModel.RecordImpl(this._model, /** @type {!TimelineAgent.TimelineEvent} */ (cpuThreadRecordPayload), null);
 139         this._pushRecord(this._cpuThreadRecord, 0, this.minimumBoundary(), Math.max(this._model.maximumRecordTime(), this.totalTime() + this.minimumBoundary()));
 140
 141         this._gpuThreadRecord = null;
 142
 143         var records = this._model.records();
 144         for (var i = 0; i < records.length; ++i) {
 145             var record = records[i];
 146             var thread = record.thread();
 147             if (thread === "gpu")
 148                 continue;
 149             if (!thread) {
 150                 for (var j = 0; j < record.children().length; ++j)
 151                     this._appendRecord(record.children()[j], 1);
 152             } else {
 153                 var visible = this._appendRecord(records[i], 1);
 154                 if (visible && !this._gpuThreadRecord) {
 155                     var gpuThreadRecordPayload = { type: WebInspector.TimelineModel.RecordType.Program };
 156                     this._gpuThreadRecord = new WebInspector.TimelineModel.RecordImpl(this._model, /** @type {!TimelineAgent.TimelineEvent} */ (gpuThreadRecordPayload), null);
 157                     this._pushRecord(this._gpuThreadRecord, 0, this.minimumBoundary(), Math.max(this._model.maximumRecordTime(), this.totalTime() + this.minimumBoundary()));
 158                 }
 159             }
 160         }
 161
 162         var cpuStackDepth = Math.max(4, this._entryThreadDepths[undefined]);
 163         delete this._entryThreadDepths[undefined];
 164         this._maxStackDepth = cpuStackDepth;
 165
 166         if (this._gpuThreadRecord) {
 167             // We have multiple threads, update levels.
 168             var threadBaselines = {};
 169             var threadBaseline = cpuStackDepth + 2;
 170
 171             for (var thread in this._entryThreadDepths) {
 172                 threadBaselines[thread] = threadBaseline;
 173                 threadBaseline += this._entryThreadDepths[thread];
 174             }
 175             this._maxStackDepth = threadBaseline;
 176
 177             for (var i = 0; i < this._records.length; ++i) {
 178                 var record = this._records[i];
 179                 var level = this._timelineData.entryLevels[i];
 180                 if (record === this._cpuThreadRecord)
 181                     level = 0;
 182                 else if (record === this._gpuThreadRecord)
 183                     level = cpuStackDepth + 2;
 184                 else if (record.thread())
 185                     level += threadBaselines[record.thread()];
 186                 this._timelineData.entryLevels[i] = level;
 187             }
 188         }
 189
 190         return this._timelineData;
 191     },
 192
 193     /**
 194      * @return {number}
 195      */
 196     minimumBoundary: function()
 197     {
 198         return this._minimumBoundary;
 199     },
 200
 201     /**
 202      * @return {number}
 203      */
 204     totalTime: function()
 205     {
 206         return Math.max(1000, this._model.maximumRecordTime() - this._model.minimumRecordTime());
 207     },
 208
 209     /**
 210      * @return {number}
 211      */
 212     maxStackDepth: function()
 213     {
 214         return this._maxStackDepth;
 215     },
 216
 217     /**
 218      * @param {!WebInspector.TimelineModel.Record} record
 219      * @param {number} level
 220      * @return {boolean}
 221      */
 222     _appendRecord: function(record, level)
 223     {
 224         var result = false;
 225         if (!this._model.isVisible(record)) {
 226             for (var i = 0; i < record.children().length; ++i)
 227                 result = this._appendRecord(record.children()[i], level) || result;
 228             return result;
 229         }
 230
 231         this._pushRecord(record, level, record.startTime(), record.endTime());
 232         for (var i = 0; i < record.children().length; ++i)
 233             this._appendRecord(record.children()[i], level + 1);
 234         return true;
 235     },
 236
 237     /**
 238      * @param {!WebInspector.TimelineModel.Record} record
 239      * @param {number} level
 240      * @param {number} startTime
 241      * @param {number} endTime
 242      * @return {number}
 243      */
 244     _pushRecord: function(record, level, startTime, endTime)
 245     {
 246         var index = this._records.length;
 247         this._records.push(record);
 248         this._timelineData.entryStartTimes[index] = startTime;
 249         this._timelineData.entryLevels[index] = level;
 250         this._timelineData.entryTotalTimes[index] = endTime - startTime;
 251         this._entryThreadDepths[record.thread()] = Math.max(level, this._entryThreadDepths[record.thread()] || 0);
 252         return index;
 253     },
 254
 255     /**
 256      * @param {number} entryIndex
 257      * @return {?Array.<!{title: string, text: string}>}
 258      */
 259     prepareHighlightedEntryInfo: function(entryIndex)
 260     {
 261         return null;
 262     },
 263
 264     /**
 265      * @param {number} entryIndex
 266      * @return {boolean}
 267      */
 268     canJumpToEntry: function(entryIndex)
 269     {
 270         return false;
 271     },
 272
 273     /**
 274      * @param {number} entryIndex
 275      * @return {string}
 276      */
 277     entryColor: function(entryIndex)
 278     {
 279         var record = this._records[entryIndex];
 280         if (record === this._cpuThreadRecord || record === this._gpuThreadRecord)
 281             return "#555";
 282
 283         if (record.type() === WebInspector.TimelineModel.RecordType.JSFrame)
 284             return WebInspector.TimelineFlameChartDataProvider.jsFrameColorGenerator().colorForID(record.data()["functionName"]);
 285
 286         return record.category().fillColorStop1;
 287     },
 288
 289
 290     /**
 291      * @param {number} entryIndex
 292      * @param {!CanvasRenderingContext2D} context
 293      * @param {?string} text
 294      * @param {number} barX
 295      * @param {number} barY
 296      * @param {number} barWidth
 297      * @param {number} barHeight
 298      * @param {function(number):number} offsetToPosition
 299      * @return {boolean}
 300      */
 301     decorateEntry: function(entryIndex, context, text, barX, barY, barWidth, barHeight, offsetToPosition)
 302     {
 303         if (barWidth < 5)
 304             return false;
 305
 306         var record = this._records[entryIndex];
 307         var timelineData = this._timelineData;
 308
 309         var category = record.category();
 310         // Paint text using white color on dark background.
 311         if (text) {
 312             context.save();
 313             context.fillStyle = "white";
 314             context.shadowColor = "rgba(0, 0, 0, 0.1)";
 315             context.shadowOffsetX = 1;
 316             context.shadowOffsetY = 1;
 317             context.font = this._font;
 318             context.fillText(text, barX + this.textPadding(), barY + barHeight - this.textBaseline());
 319             context.restore();
 320         }
 321
 322         if (record.children().length) {
 323             var entryStartTime = timelineData.entryStartTimes[entryIndex];
 324             var barSelf = offsetToPosition(entryStartTime + record.selfTime())
 325
 326             context.beginPath();
 327             context.fillStyle = category.backgroundColor;
 328             context.rect(barSelf, barY, barX + barWidth - barSelf, barHeight);
 329             context.fill();
 330
 331             // Paint text using dark color on light background.
 332             if (text) {
 333                 context.save();
 334                 context.clip();
 335                 context.fillStyle = category.borderColor;
 336                 context.shadowColor = "rgba(0, 0, 0, 0.1)";
 337                 context.shadowOffsetX = 1;
 338                 context.shadowOffsetY = 1;
 339                 context.fillText(text, barX + this.textPadding(), barY + barHeight - this.textBaseline());
 340                 context.restore();
 341             }
 342         }
 343
 344         if (record.warnings()) {
 345             context.save();
 346
 347             context.rect(barX, barY, barWidth, this.barHeight());
 348             context.clip();
 349
 350             context.beginPath();
 351             context.fillStyle = record.warnings() ? "red" : "rgba(255, 0, 0, 0.5)";
 352             context.moveTo(barX + barWidth - 15, barY + 1);
 353             context.lineTo(barX + barWidth - 1, barY + 1);
 354             context.lineTo(barX + barWidth - 1, barY + 15);
 355             context.fill();
 356
 357             context.restore();
 358         }
 359
 360         return true;
 361     },
 362
 363     /**
 364      * @param {number} entryIndex
 365      * @return {boolean}
 366      */
 367     forceDecoration: function(entryIndex)
 368     {
 369         var record = this._records[entryIndex];
 370         return !!record.warnings();
 371     },
 372
 373     /**
 374      * @param {number} entryIndex
 375      * @return {?{startTime: number, endTime: number}}
 376      */
 377     highlightTimeRange: function(entryIndex)
 378     {
 379         var record = this._records[entryIndex];
 380         if (record === this._cpuThreadRecord || record === this._gpuThreadRecord)
 381             return null;
 382         return {
 383             startTime: record.startTime(),
 384             endTime: record.endTime()
 385         };
 386     },
 387
 388     /**
 389      * @return {number}
 390      */
 391     paddingLeft: function()
 392     {
 393         return 0;
 394     },
 395
 396     /**
 397      * @param {number} entryIndex
 398      * @return {string}
 399      */
 400     textColor: function(entryIndex)
 401     {
 402         return "white";
 403     },
 404
 405     /**
 406      * @param {number} entryIndex
 407      * @return {?WebInspector.TimelineSelection}
 408      */
 409     createSelection: function(entryIndex)
 410     {
 411         var record = this._records[entryIndex];
 412         if (record instanceof WebInspector.TimelineModel.RecordImpl) {
 413             this._lastSelection = new WebInspector.TimelineFlameChart.Selection(WebInspector.TimelineSelection.fromRecord(record), entryIndex);
 414             return this._lastSelection.timelineSelection;
 415         }
 416         return null;
 417     },
 418
 419     /**
 420      * @param {?WebInspector.TimelineSelection} selection
 421      * @return {number}
 422      */
 423     entryIndexForSelection: function(selection)
 424     {
 425         if (!selection || selection.type() !== WebInspector.TimelineSelection.Type.Record)
 426             return -1;
 427         var record = /** @type{!WebInspector.TimelineModel.Record} */ (selection.object());
 428         if (this._lastSelection && this._lastSelection.timelineSelection.object() === record)
 429             return this._lastSelection.entryIndex;
 430         var entryRecords = this._records;
 431         for (var entryIndex = 0; entryIndex < entryRecords.length; ++entryIndex) {
 432             if (entryRecords[entryIndex] === record) {
 433                 this._lastSelection = new WebInspector.TimelineFlameChart.Selection(WebInspector.TimelineSelection.fromRecord(record), entryIndex);
 434                 return entryIndex;
 435             }
 436         }
 437         return -1;
 438     }
 439 }
 440
 441 /**
 442  * @constructor
 443  * @implements {WebInspector.FlameChartDataProvider}
 444  * @implements {WebInspector.TimelineFlameChart.SelectionProvider}
 445  * @param {!WebInspector.TracingTimelineModel} model
 446  * @param {!WebInspector.TimelineFrameModelBase} frameModel
 447  * @param {!WebInspector.Target} target
 448  */
 449 WebInspector.TracingBasedTimelineFlameChartDataProvider = function(model, frameModel, target)
 450 {
 451     WebInspector.FlameChartDataProvider.call(this);
 452     this._model = model;
 453     this._frameModel = frameModel;
 454     this._target = target;
 455     this._font = "12px " + WebInspector.fontFamily();
 456     this._linkifier = new WebInspector.Linkifier();
 457     this._palette = new WebInspector.TraceViewPalette();
 458     this._entryIndexToTitle = {};
 459 }
 460
 461 WebInspector.TracingBasedTimelineFlameChartDataProvider.prototype = {
 462     /**
 463      * @return {number}
 464      */
 465     barHeight: function()
 466     {
 467         return 20;
 468     },
 469
 470     /**
 471      * @return {number}
 472      */
 473     textBaseline: function()
 474     {
 475         return 6;
 476     },
 477
 478     /**
 479      * @return {number}
 480      */
 481     textPadding: function()
 482     {
 483         return 5;
 484     },
 485
 486     /**
 487      * @param {number} entryIndex
 488      * @return {string}
 489      */
 490     entryFont: function(entryIndex)
 491     {
 492         return this._font;
 493     },
 494
 495     /**
 496      * @param {number} entryIndex
 497      * @return {?string}
 498      */
 499     entryTitle: function(entryIndex)
 500     {
 501         var event = this._entryEvents[entryIndex];
 502         if (event) {
 503             var name = WebInspector.TracingTimelineUIUtils.styleForTraceEvent(event.name).title;
 504             // TODO(yurys): support event dividers
 505             var details = WebInspector.TracingTimelineUIUtils.buildDetailsNodeForTraceEvent(event, this._linkifier, false, this._target);
 506             return details ? WebInspector.UIString("%s (%s)", name, details.textContent) : name;
 507         }
 508         var title = this._entryIndexToTitle[entryIndex];
 509         if (!title) {
 510             title = WebInspector.UIString("Unexpected entryIndex %d", entryIndex);
 511             console.error(title);
 512         }
 513         return title;
 514     },
 515
 516     /**
 517      * @param {number} startTime
 518      * @param {number} endTime
 519      * @return {?Array.<number>}
 520      */
 521     dividerOffsets: function(startTime, endTime)
 522     {
 523         return null;
 524     },
 525
 526     reset: function()
 527     {
 528         this._timelineData = null;
 529         /** @type {!Array.<!WebInspector.TracingModel.Event>} */
 530         this._entryEvents = [];
 531         this._entryIndexToTitle = {};
 532     },
 533
 534     /**
 535      * @return {!WebInspector.FlameChart.TimelineData}
 536      */
 537     timelineData: function()
 538     {
 539         if (this._timelineData)
 540             return this._timelineData;
 541
 542         /**
 543          * @type {?WebInspector.FlameChart.TimelineData}
 544          */
 545         this._timelineData = {
 546             entryLevels: [],
 547             entryTotalTimes: [],
 548             entryStartTimes: []
 549         };
 550
 551         this._currentLevel = 0;
 552         this._minimumBoundary = this._model.minimumRecordTime();
 553         this._timeSpan = Math.max(this._model.maximumRecordTime() - this._minimumBoundary, 1000);
 554         this._appendHeaderRecord("CPU");
 555         var events = this._model.mainThreadEvents();
 556         var maxStackDepth = 0;
 557         for (var eventIndex = 0; eventIndex < events.length; ++eventIndex) {
 558             var event = events[eventIndex];
 559             var category = event.category;
 560             if (category !== "disabled-by-default-devtools.timeline" && category !== "devtools")
 561                 continue;
 562             if (event.duration || event.phase === WebInspector.TracingModel.Phase.Instant) {
 563                 this._appendEvent(event);
 564                 if (maxStackDepth < event.level)
 565                     maxStackDepth = event.level;
 566             }
 567         }
 568         this._currentLevel += maxStackDepth + 1;
 569
 570         this._appendHeaderRecord("GPU");
 571         return this._timelineData;
 572     },
 573
 574     /**
 575      * @return {number}
 576      */
 577     minimumBoundary: function()
 578     {
 579         return this._minimumBoundary;
 580     },
 581
 582     /**
 583      * @return {number}
 584      */
 585     totalTime: function()
 586     {
 587         return this._timeSpan;
 588     },
 589
 590     /**
 591      * @return {number}
 592      */
 593     maxStackDepth: function()
 594     {
 595         return this._currentLevel;
 596     },
 597
 598     /**
 599      * @param {number} entryIndex
 600      * @return {?Array.<!{title: string, text: string}>}
 601      */
 602     prepareHighlightedEntryInfo: function(entryIndex)
 603     {
 604         return null;
 605     },
 606
 607     /**
 608      * @param {number} entryIndex
 609      * @return {boolean}
 610      */
 611     canJumpToEntry: function(entryIndex)
 612     {
 613         return false;
 614     },
 615
 616     /**
 617      * @param {number} entryIndex
 618      * @return {string}
 619      */
 620     entryColor: function(entryIndex)
 621     {
 622         var event = this._entryEvents[entryIndex];
 623         if (!event)
 624             return "#555";
 625         var style = WebInspector.TracingTimelineUIUtils.styleForTraceEvent(event.name);
 626         return style.category.fillColorStop1;
 627     },
 628
 629     /**
 630      * @param {number} entryIndex
 631      * @param {!CanvasRenderingContext2D} context
 632      * @param {?string} text
 633      * @param {number} barX
 634      * @param {number} barY
 635      * @param {number} barWidth
 636      * @param {number} barHeight
 637      * @param {function(number):number} offsetToPosition
 638      * @return {boolean}
 639      */
 640     decorateEntry: function(entryIndex, context, text, barX, barY, barWidth, barHeight, offsetToPosition)
 641     {
 642         if (barWidth < 5)
 643             return false;
 644
 645         var timelineData = this._timelineData;
 646
 647         // Paint text using white color on dark background.
 648         if (text) {
 649             context.save();
 650             context.fillStyle = "white";
 651             context.shadowColor = "rgba(0, 0, 0, 0.1)";
 652             context.shadowOffsetX = 1;
 653             context.shadowOffsetY = 1;
 654             context.font = this._font;
 655             context.fillText(text, barX + this.textPadding(), barY + barHeight - this.textBaseline());
 656             context.restore();
 657         }
 658
 659         var event = this._entryEvents[entryIndex];
 660         if (event && event.warning) {
 661             context.save();
 662
 663             context.rect(barX, barY, barWidth, this.barHeight());
 664             context.clip();
 665
 666             context.beginPath();
 667             context.fillStyle = "red";
 668             context.moveTo(barX + barWidth - 15, barY + 1);
 669             context.lineTo(barX + barWidth - 1, barY + 1);
 670             context.lineTo(barX + barWidth - 1, barY + 15);
 671             context.fill();
 672
 673             context.restore();
 674         }
 675
 676         return true;
 677     },
 678
 679     /**
 680      * @param {number} entryIndex
 681      * @return {boolean}
 682      */
 683     forceDecoration: function(entryIndex)
 684     {
 685         var event = this._entryEvents[entryIndex];
 686         if (!event)
 687             return false;
 688         return !!event.warning;
 689     },
 690
 691    /**
 692      * @param {number} entryIndex
 693      * @return {?{startTime: number, endTime: number}}
 694      */
 695     highlightTimeRange: function(entryIndex)
 696     {
 697         var event = this._entryEvents[entryIndex];
 698         if (!event)
 699             return null;
 700         return {
 701             startTime: event.startTime,
 702             endTime: event.endTime
 703         }
 704     },
 705
 706     /**
 707      * @return {number}
 708      */
 709     paddingLeft: function()
 710     {
 711         return 0;
 712     },
 713
 714     /**
 715      * @param {number} entryIndex
 716      * @return {string}
 717      */
 718     textColor: function(entryIndex)
 719     {
 720         return "white";
 721     },
 722
 723     /**
 724      * @param {string} title
 725      */
 726     _appendHeaderRecord: function(title)
 727     {
 728         var index = this._entryEvents.length;
 729         this._entryIndexToTitle[index] = title;
 730         this._entryEvents.push(null);
 731         this._timelineData.entryLevels[index] = this._currentLevel++;
 732         this._timelineData.entryTotalTimes[index] = this._timeSpan;
 733         this._timelineData.entryStartTimes[index] = this._minimumBoundary;
 734     },
 735
 736     /**
 737      * @param {!WebInspector.TracingModel.Event} event
 738      */
 739     _appendEvent: function(event)
 740     {
 741         var index = this._entryEvents.length;
 742         this._entryEvents.push(event);
 743         this._timelineData.entryLevels[index] = this._currentLevel + event.level;
 744         this._timelineData.entryTotalTimes[index] = event.duration || 1;
 745         this._timelineData.entryStartTimes[index] = event.startTime;
 746     },
 747
 748     /**
 749      * @param {number} entryIndex
 750      * @return {?WebInspector.TimelineSelection}
 751      */
 752     createSelection: function(entryIndex)
 753     {
 754         var event = this._entryEvents[entryIndex];
 755         if (!event)
 756             return null;
 757         this._lastSelection = new WebInspector.TimelineFlameChart.Selection(WebInspector.TimelineSelection.fromTraceEvent(event), entryIndex);
 758         return this._lastSelection.timelineSelection;
 759     },
 760
 761     /**
 762      * @param {?WebInspector.TimelineSelection} selection
 763      * @return {number}
 764      */
 765     entryIndexForSelection: function(selection)
 766     {
 767         if (!selection || selection.type() !== WebInspector.TimelineSelection.Type.TraceEvent)
 768             return -1;
 769         var event = /** @type{!WebInspector.TracingModel.Event} */ (selection.object());
 770         if (this._lastSelection && this._lastSelection.timelineSelection.object() === event)
 771             return this._lastSelection.entryIndex;
 772         var entryEvents = this._entryEvents;
 773         for (var entryIndex = 0; entryIndex < entryEvents.length; ++entryIndex) {
 774             if (entryEvents[entryIndex] === event) {
 775                 this._lastSelection = new WebInspector.TimelineFlameChart.Selection(WebInspector.TimelineSelection.fromTraceEvent(event), entryIndex);
 776                 return entryIndex;
 777             }
 778         }
 779         return -1;
 780     }
 781 }
 782
 783 /**
 784  * @return {!WebInspector.FlameChart.ColorGenerator}
 785  */
 786 WebInspector.TimelineFlameChartDataProvider.jsFrameColorGenerator = function()
 787 {
 788     if (!WebInspector.TimelineFlameChartDataProvider._jsFrameColorGenerator) {
 789         var hueSpace = { min: 30, max: 55, count: 5 };
 790         var satSpace = { min: 70, max: 100, count: 6 };
 791         var colorGenerator = new WebInspector.FlameChart.ColorGenerator(hueSpace, satSpace, 50);
 792         colorGenerator.setColorForID("(idle)", "hsl(0, 0%, 60%)");
 793         colorGenerator.setColorForID("(program)", "hsl(0, 0%, 60%)");
 794         colorGenerator.setColorForID("(garbage collector)", "hsl(0, 0%, 60%)");
 795         WebInspector.TimelineFlameChartDataProvider._jsFrameColorGenerator = colorGenerator;
 796     }
 797     return WebInspector.TimelineFlameChartDataProvider._jsFrameColorGenerator;
 798 }
 799
 800 /**
 801  * @constructor
 802  * @extends {WebInspector.VBox}
 803  * @implements {WebInspector.TimelineModeView}
 804  * @implements {WebInspector.FlameChartDelegate}
 805  * @param {!WebInspector.TimelineModeViewDelegate} delegate
 806  * @param {!WebInspector.TimelineModel} model
 807  * @param {?WebInspector.TracingTimelineModel} tracingModel
 808  * @param {!WebInspector.TimelineFrameModelBase} frameModel
 809  */
 810 WebInspector.TimelineFlameChart = function(delegate, model, tracingModel, frameModel)
 811 {
 812     WebInspector.VBox.call(this);
 813     this.element.classList.add("timeline-flamechart");
 814     this.registerRequiredCSS("flameChart.css");
 815     this._delegate = delegate;
 816     this._model = model;
 817     this._dataProvider = tracingModel
 818         ? new WebInspector.TracingBasedTimelineFlameChartDataProvider(tracingModel, frameModel, model.target())
 819         : new WebInspector.TimelineFlameChartDataProvider(/** @type {!WebInspector.TimelineModelImpl} */(model), frameModel);
 820     this._mainView = new WebInspector.FlameChart(this._dataProvider, this, true);
 821     this._mainView.show(this.element);
 822     this._model.addEventListener(WebInspector.TimelineModel.Events.RecordingStarted, this._onRecordingStarted, this);
 823     this._mainView.addEventListener(WebInspector.FlameChart.Events.EntrySelected, this._onEntrySelected, this);
 824 }
 825
 826 WebInspector.TimelineFlameChart.prototype = {
 827     dispose: function()
 828     {
 829         this._model.removeEventListener(WebInspector.TimelineModel.Events.RecordingStarted, this._onRecordingStarted, this);
 830         this._mainView.removeEventListener(WebInspector.FlameChart.Events.EntrySelected, this._onEntrySelected, this);
 831     },
 832
 833     /**
 834      * @param {number} windowStartTime
 835      * @param {number} windowEndTime
 836      */
 837     requestWindowTimes: function(windowStartTime, windowEndTime)
 838     {
 839         this._delegate.requestWindowTimes(windowStartTime, windowEndTime);
 840     },
 841
 842     /**
 843      * @param {?RegExp} textFilter
 844      */
 845     refreshRecords: function(textFilter)
 846     {
 847         this._dataProvider.reset();
 848         this._mainView._scheduleUpdate();
 849     },
 850
 851     wasShown: function()
 852     {
 853         this._mainView._scheduleUpdate();
 854     },
 855
 856
 857     /**
 858      * @return {!WebInspector.View}
 859      */
 860     view: function()
 861     {
 862         return this;
 863     },
 864
 865     reset: function()
 866     {
 867         this._automaticallySizeWindow = true;
 868         this._dataProvider.reset();
 869         this._mainView.reset();
 870         this._mainView.setWindowTimes(0, Infinity);
 871     },
 872
 873     _onRecordingStarted: function()
 874     {
 875         this._automaticallySizeWindow = true;
 876         this._mainView.reset();
 877     },
 878
 879     /**
 880      * @param {!WebInspector.TimelineModel.Record} record
 881      */
 882     addRecord: function(record)
 883     {
 884         this._dataProvider.reset();
 885         if (this._automaticallySizeWindow) {
 886             var minimumRecordTime = this._model.minimumRecordTime();
 887             if (record.startTime() > (minimumRecordTime + 1000)) {
 888                 this._automaticallySizeWindow = false;
 889                 this._delegate.requestWindowTimes(minimumRecordTime, minimumRecordTime + 1000);
 890             }
 891             this._mainView._scheduleUpdate();
 892         } else {
 893             if (!this._pendingUpdateTimer)
 894                 this._pendingUpdateTimer = window.setTimeout(this._updateOnAddRecord.bind(this), 300);
 895         }
 896     },
 897
 898     _updateOnAddRecord: function()
 899     {
 900         delete this._pendingUpdateTimer;
 901         this._mainView._scheduleUpdate();
 902     },
 903
 904     /**
 905      * @param {number} startTime
 906      * @param {number} endTime
 907      */
 908     setWindowTimes: function(startTime, endTime)
 909     {
 910         this._mainView.setWindowTimes(startTime, endTime);
 911         this._delegate.select(null);
 912     },
 913
 914     /**
 915      * @param {number} width
 916      */
 917     setSidebarSize: function(width)
 918     {
 919     },
 920
 921     /**
 922      * @param {?WebInspector.TimelineModel.Record} record
 923      * @param {string=} regex
 924      * @param {boolean=} selectRecord
 925      */
 926     highlightSearchResult: function(record, regex, selectRecord)
 927     {
 928     },
 929
 930     /**
 931      * @param {?WebInspector.TimelineSelection} selection
 932      */
 933     setSelection: function(selection)
 934     {
 935         var index = this._dataProvider.entryIndexForSelection(selection);
 936         this._mainView.setSelectedEntry(index);
 937     },
 938
 939     /**
 940      * @param {!WebInspector.Event} event
 941      */
 942     _onEntrySelected: function(event)
 943     {
 944         var entryIndex = /** @type{number} */ (event.data);
 945         var timelineSelection = this._dataProvider.createSelection(entryIndex);
 946         if (timelineSelection)
 947             this._delegate.select(timelineSelection);
 948     },
 949
 950     __proto__: WebInspector.VBox.prototype
 951 }
 952
 953 /**
 954   * @constructor
 955   * @param {!WebInspector.TimelineSelection} selection
 956   * @param {number} entryIndex
 957   */
 958 WebInspector.TimelineFlameChart.Selection = function(selection, entryIndex)
 959 {
 960     this.timelineSelection = selection;
 961     this.entryIndex = entryIndex;
 962 }
 963
 964 /**
 965   * @interface
 966   */
 967 WebInspector.TimelineFlameChart.SelectionProvider = function() { }
 968
 969 WebInspector.TimelineFlameChart.SelectionProvider.prototype = {
 970     /**
 971      * @param {number} entryIndex
 972      * @return {?WebInspector.TimelineSelection}
 973      */
 974     createSelection: function(entryIndex) { },
 975     /**
 976      * @param {?WebInspector.TimelineSelection} selection
 977      * @return {number}
 978      */
 979     entryIndexForSelection: function(selection) { }
 980 }