DevTools: add extension API to contribute trace events to timeline

third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartView.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @implements {UI.FlameChartDataProvider}
  * @unrestricted
  */
 Timeline.TimelineFlameChartDataProviderBase = class {
   constructor() {
@@ skipping 174 matching lines @@
   }
 };
 
 /**
  * @enum {symbol}
  */
 Timeline.TimelineFlameChartEntryType = {
   Frame: Symbol('Frame'),
   Event: Symbol('Event'),
   InteractionRecord: Symbol('InteractionRecord'),
+  ExtensionEvent: Symbol('ExtensionEvent')
 };
 
 /**
  * @implements {UI.FlameChartMarker}
  * @unrestricted
  */
 Timeline.TimelineFlameChartMarker = class {
   /**
    * @param {number} startTime
    * @param {number} startOffset
@@ skipping 71 matching lines @@
  * @implements {Timeline.TimelineModeView}
  * @implements {UI.FlameChartDelegate}
  * @unrestricted
  */
 Timeline.TimelineFlameChartView = class extends UI.VBox {
   /**
    * @param {!Timeline.TimelineModeViewDelegate} delegate
    * @param {!TimelineModel.TimelineModel} timelineModel
    * @param {!TimelineModel.TimelineFrameModel} frameModel
    * @param {!TimelineModel.TimelineIRModel} irModel
+   * @param {!Array<!{title: string, model: !SDK.TracingModel}>} extensionModels
    * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters
    */
-  constructor(delegate, timelineModel, frameModel, irModel, filters) {
+  constructor(delegate, timelineModel, frameModel, irModel, extensionModels, filters) {
     super();
     this.element.classList.add('timeline-flamechart');
     this._delegate = delegate;
     this._model = timelineModel;
-
+    this._extensionModels = extensionModels;
     this._splitWidget = new UI.SplitWidget(false, false, 'timelineFlamechartMainView', 150);
 
     this._dataProvider = new Timeline.TimelineFlameChartDataProvider(this._model, frameModel, irModel, filters);
     var mainViewGroupExpansionSetting = Common.settings.createSetting('timelineFlamechartMainViewGroupExpansion', {});
     this._mainView = new UI.FlameChart(this._dataProvider, this, mainViewGroupExpansionSetting);
 
     var networkViewGroupExpansionSetting =
         Common.settings.createSetting('timelineFlamechartNetworkViewGroupExpansion', {});
     this._networkDataProvider = new Timeline.TimelineFlameChartNetworkDataProvider(this._model);
     this._networkView = new UI.FlameChart(this._networkDataProvider, this, networkViewGroupExpansionSetting);
     networkViewGroupExpansionSetting.addChangeListener(this.resizeToPreferredHeights.bind(this));
 
     this._splitWidget.setMainWidget(this._mainView);
     this._splitWidget.setSidebarWidget(this._networkView);
     this._splitWidget.show(this.element);
 
     this._onMainEntrySelected = this._onEntrySelected.bind(this, this._dataProvider);
     this._onNetworkEntrySelected = this._onEntrySelected.bind(this, this._networkDataProvider);
     this._mainView.addEventListener(UI.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
     this._networkView.addEventListener(UI.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
+    this._nextExtensionIndex = 0;
+
     Bindings.blackboxManager.addChangeListener(this.refreshRecords, this);
   }
 
   /**
    * @override
    */
   dispose() {
     this._mainView.removeEventListener(UI.FlameChart.Events.EntrySelected, this._onMainEntrySelected, this);
     this._networkView.removeEventListener(UI.FlameChart.Events.EntrySelected, this._onNetworkEntrySelected, this);
     Bindings.blackboxManager.removeChangeListener(this.refreshRecords, this);
@@ skipping 23 matching lines @@
    */
   updateRangeSelection(startTime, endTime) {
     this._delegate.select(Timeline.TimelineSelection.fromRange(startTime, endTime));
   }
 
   /**
    * @override
    */
   refreshRecords() {
     this._dataProvider.reset();
+    this._nextExtensionIndex = 0;
+    this.extensionDataAdded();
     this._mainView.scheduleUpdate();
+
     this._networkDataProvider.reset();
     this._networkView.scheduleUpdate();
   }
 
   /**
    * @override
+   */
+  extensionDataAdded() {
+    while (this._nextExtensionIndex < this._extensionModels.length)
+      this._dataProvider.appendExtensionEvents(this._extensionModels[this._nextExtensionIndex++]);
+    this._mainView.scheduleUpdate();
+  }
+
+  /**
+   * @override
    * @param {?SDK.TracingModel.Event} event
    */
   highlightEvent(event) {
     var entryIndex =
         event ? this._dataProvider.entryIndexForSelection(Timeline.TimelineSelection.fromTraceEvent(event)) : -1;
     if (entryIndex >= 0)
       this._mainView.highlightEntry(entryIndex);
     else
       this._mainView.hideHighlight();
   }
@@ skipping 95 matching lines @@
 Timeline.TimelineFlameChartView.Selection = class {
   /**
    * @param {!Timeline.TimelineSelection} selection
    * @param {number} entryIndex
    */
   constructor(selection, entryIndex) {
     this.timelineSelection = selection;
     this.entryIndex = entryIndex;
   }
 };