DevTools: add extension API to contribute trace events to timeline

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

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
index 3b0192f32b416a2e735a247cc1eb73efa1a16742..d01142631a3add1fd0f9508e64f616b9a98b99f0 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -67,10 +67,11 @@ Timeline.TimelinePanel = class extends UI.Panel {
         new TimelineModel.TimelineFrameModel(event => Timeline.TimelineUIUtils.eventStyle(event).category.name);
     this._filmStripModel = new Components.FilmStripModel(this._tracingModel);
     this._irModel = new TimelineModel.TimelineIRModel();
-
+    /** @type {!Array<!{title: string, model: !SDK.TracingModel}>} */
+    this._extensionTracingModels = [];
     this._cpuThrottlingManager = new Timeline.CPUThrottlingManager();
 
-    /** @type {!Array.<!Timeline.TimelineModeView>} */
+    /** @type {!Array<!Timeline.TimelineModeView>} */
     this._currentViews = [];
 
     this._captureNetworkSetting = Common.settings.createSetting('timelineCaptureNetwork', false);
@@ -118,6 +119,9 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._onModeChanged();
     this._recreateToolbarItems();
 
+    Extensions.extensionServer.addEventListener(
+        Extensions.ExtensionServer.Events.TraceProviderAdded, this._recreateToolbarItems, this);
+
     this._captureNetworkSetting.addChangeListener(this._onNetworkChanged, this);
     this._captureMemorySetting.addChangeListener(this._onModeChanged, this);
     this._captureFilmStripSetting.addChangeListener(this._onModeChanged, this);
@@ -131,6 +135,10 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._selectedSearchResult;
     /** @type {!Array<!SDK.TracingModel.Event>}|undefined */
     this._searchResults;
+    /** @type {?symbol} */
+    this._sessionGeneration = null;
+    /** @type {number} */
+    this._recordingStartTime = 0;
   }
 
   /**
@@ -383,6 +391,15 @@ Timeline.TimelinePanel = class extends UI.Panel {
           Common.UIString('CSS coverage'), this._markUnusedCSS, Common.UIString('Mark unused CSS in souces.')));
     }
 
+    const traceProviders = Extensions.extensionServer.traceProviders();
+    if (traceProviders.length) {
+      this._panelToolbar.appendSeparator();
+      for (let provider of traceProviders) {
+        const setting = Timeline.TimelinePanel._settingForTraceProvider(provider);
+        const checkbox = this._createSettingCheckbox(provider.shortDisplayName(), setting, provider.longDisplayName());
+        this._panelToolbar.appendToolbarItem(checkbox);
+      }
+    }
     this._panelToolbar.appendSeparator();
     this._cpuThrottlingCombobox = new UI.ToolbarComboBox(this._onCPUThrottlingChanged.bind(this));
     this._panelToolbar.appendToolbarItem(this._createNetworkConditionsSelect());
@@ -391,6 +408,15 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._updateTimelineControls();
   }
 
+  static _settingForTraceProvider(traceProvider) {

[alph, 2016/12/13 20:16:49]

annotate

+    var setting = traceProvider[Timeline.TimelinePanel._traceProviderSettingSymbol];
+    if (!setting) {
+      var providerId = traceProvider.persistentIdentifier();
+      setting = Common.settings.createSetting(providerId, false);
+      traceProvider[Timeline.TimelinePanel._traceProviderSettingSymbol] = setting;
+    }
+    return setting;
+  }
   /**

[alph, 2016/12/13 20:16:49]

add line

    * @return {!UI.ToolbarComboBox}
    */
@@ -531,8 +557,8 @@ Timeline.TimelinePanel = class extends UI.Panel {
 
     // Set up the main view.
     this._removeAllModeViews();
-    this._flameChart =
-        new Timeline.TimelineFlameChartView(this, this._model, this._frameModel, this._irModel, this._filters);
+    this._flameChart = new Timeline.TimelineFlameChartView(
+        this, this._model, this._frameModel, this._irModel, this._extensionTracingModels, this._filters);
     this._flameChart.enableNetworkPane(this._captureNetworkSetting.get());
     this._addModeView(this._flameChart);
 
@@ -584,12 +610,22 @@ Timeline.TimelinePanel = class extends UI.Panel {
     if (Runtime.experiments.isEnabled('timelineRuleUsageRecording') && this._markUnusedCSS.get())
       SDK.CSSModel.fromTarget(mainTarget).startRuleUsageTracking();
 
+    this._sessionGeneration = Symbol('timelineSessionGeneration');
     this._autoRecordGeneration = userInitiated ? null : Symbol('Generation');
+    var enabledTraceProviders = Extensions.extensionServer.traceProviders().filter(
+        provider => Timeline.TimelinePanel._settingForTraceProvider(provider).get());
+
+    var captureOptions = {
+      captureCauses: true,
+      enableJSSampling: this._captureJSProfileSetting.get(),
+      captureMemory: this._captureMemorySetting.get(),
+      capturePictures: this._captureLayersAndPicturesSetting.get(),
+      captureFilmStrip: this._captureFilmStripSetting.get()
+    };
+
     this._controller = new Timeline.TimelineController(mainTarget, this, this._tracingModel);
-    this._controller.startRecording(
-        true, this._captureJSProfileSetting.get(), this._captureMemorySetting.get(),
-        this._captureLayersAndPicturesSetting.get(),
-        this._captureFilmStripSetting && this._captureFilmStripSetting.get());
+    this._controller.startRecording(captureOptions, enabledTraceProviders);
+    this._recordingStartTime = Date.now();
 
     for (var i = 0; i < this._overviewControls.length; ++i)
       this._overviewControls[i].timelineStarted();
@@ -633,12 +669,22 @@ Timeline.TimelinePanel = class extends UI.Panel {
   }
 
   _clear() {
+    this._sessionGeneration = null;
+    this._recordingStartTime = 0;
+    this._reset();
+  }
+
+  _reset() {
     if (Runtime.experiments.isEnabled('timelineRuleUsageRecording') && this._markUnusedCSS.get())
       Components.CoverageProfile.instance().reset();
 
     Components.LineLevelProfile.instance().reset();
     this._tracingModel.reset();
     this._model.reset();
+    for (let extensionEntry of this._extensionTracingModels)
+      extensionEntry.model.reset();
+    this._extensionTracingModels.splice(0);
+
     this._showRecordingHelpMessage();
 
     this.requestWindowTimes(0, Infinity);
@@ -658,7 +704,7 @@ Timeline.TimelinePanel = class extends UI.Panel {
    * @override
    */
   recordingStarted() {
-    this._clear();
+    this._reset();
     this._setState(Timeline.TimelinePanel.State.Recording);
     this._showRecordingStarted();
     this._statusPane.updateStatus(Common.UIString('Recording\u2026'));
@@ -675,6 +721,29 @@ Timeline.TimelinePanel = class extends UI.Panel {
     this._statusPane.updateProgressBar(Common.UIString('Buffer usage'), usage * 100);
   }
 
+  /**
+   * @override
+   * @param {string} title
+   * @param {!SDK.TracingModel} tracingModel
+   * @param {number} timeOffset
+   */
+  addExtensionEvents(title, tracingModel, timeOffset) {
+    this._extensionTracingModels.push({title: title, model: tracingModel, timeOffset: timeOffset});
+    if (this._state !== Timeline.TimelinePanel.State.Idle)
+      return;
+    tracingModel.adjustTime(this._model.minimumRecordTime() + (timeOffset / 1000) - this._recordingStartTime);

[alph, 2016/12/13 20:16:49]

this looks wrong. _minimumRecordTime is basically taken from the first event
(modulo some filtering) we find  in the main trace. It may not correlate to the
actual start time.

+    for (let view of this._currentViews)
+      view.extensionDataAdded();
+  }
+
+  /**
+   * @override
+   * @return {?symbol}
+   */
+  sessionGeneration() {
+    return this._sessionGeneration;
+  }
+
   _showRecordingHelpMessage() {
     /**
      * @param {string} tagName
@@ -771,6 +840,10 @@ Timeline.TimelinePanel = class extends UI.Panel {
     if (this._statusPane)
       this._statusPane.hide();
     delete this._statusPane;
+
+    for (let entry of this._extensionTracingModels)
+      entry.model.adjustTime(this._model.minimumRecordTime() + (entry.timeOffset / 1000) - this._recordingStartTime);
+
     this._flameChart.resizeToPreferredHeights();
     this._overviewPane.reset();
     this._overviewPane.setBounds(this._model.minimumRecordTime(), this._model.maximumRecordTime());
@@ -1273,6 +1346,26 @@ Timeline.TimelinePanel.headerHeight = 20;
 /**
  * @interface
  */
+Timeline.LoaderClient = function() {}
+
+Timeline.LoaderClient.prototype = {
+  loadingStarted() {},
+
+  /**
+   * @param {number=} progress
+   */
+  loadingProgress(progress) {},
+
+  /**
+   * @param {boolean} success
+   */
+  loadingComplete(success) {},
+}
+
+/**
+ * @interface
+ * @extends {Timeline.LoaderClient}
+ */
 Timeline.TimelineLifecycleDelegate = function() {};
 
 Timeline.TimelineLifecycleDelegate.prototype = {
@@ -1283,17 +1376,15 @@ Timeline.TimelineLifecycleDelegate.prototype = {
    */
   recordingProgress(usage) {},
 
-  loadingStarted() {},
-
   /**
-   * @param {number=} progress
+   * @param {string} title
+   * @param {!SDK.TracingModel} tracingModel
+   * @param {number} timeOffset
    */
-  loadingProgress(progress) {},
+  addExtensionEvents(title, tracingModel, timeOffset) {},
 
-  /**
-   * @param {boolean} success
-   */
-  loadingComplete(success) {},
+  /** @return {?symbol} */
+  sessionGeneration() {}
 };
 
 /**
@@ -1507,6 +1598,8 @@ Timeline.TimelineModeView.prototype = {
 
   refreshRecords() {},
 
+  extensionDataAdded() {},
+
   /**
    * @param {?SDK.TracingModel.Event} event
    * @param {string=} regex
@@ -1896,6 +1989,8 @@ Timeline.TimelineFilters = class extends Common.Object {
   }
 };
 
+Timeline.TimelinePanel._traceProviderSettingSymbol = Symbol('traceProviderSetting');
+
 /** @enum {symbol} */
 Timeline.TimelineFilters.Events = {
   FilterChanged: Symbol('FilterChanged')