DevTools: add extension API to contribute trace events to timeline

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

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 49 matching lines @@
     }
 
     // Create models.
     this._tracingModelBackingStorage = new Bindings.TempFileBackingStorage('tracing');
     this._tracingModel = new SDK.TracingModel(this._tracingModelBackingStorage);
     this._model = new TimelineModel.TimelineModel(Timeline.TimelineUIUtils.visibleEventsFilter());
     this._frameModel =
         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);
     this._captureJSProfileSetting = Common.settings.createSetting('timelineEnableJSSampling', true);
     this._captureMemorySetting = Common.settings.createSetting('timelineCaptureMemory', false);
     this._captureLayersAndPicturesSetting = Common.settings.createSetting('timelineCaptureLayersAndPictures', false);
     this._captureFilmStripSetting = Common.settings.createSetting('timelineCaptureFilmStrip', false);
 
     this._markUnusedCSS = Common.settings.createSetting('timelineMarkUnusedCSS', false);
 
@@ skipping 27 matching lines @@
     this._searchableView.element.classList.add('searchable-view');
     this._detailsSplitWidget.setMainWidget(this._searchableView);
 
     this._stackView = new UI.StackView(false);
     this._stackView.element.classList.add('timeline-view-stack');
 
     this._stackView.show(this._searchableView.element);
     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);
 
     this._detailsSplitWidget.show(this._timelinePane.element);
     this._detailsSplitWidget.hideSidebar();
     SDK.targetManager.addEventListener(SDK.TargetManager.Events.SuspendStateChanged, this._onSuspendStateChanged, this);
     this._showRecordingHelpMessage();
 
     /** @type {!SDK.TracingModel.Event}|undefined */
     this._selectedSearchResult;
     /** @type {!Array<!SDK.TracingModel.Event>}|undefined */
     this._searchResults;
+    /** @type {?symbol} */
+    this._sessionGeneration = null;
+    /** @type {number} */
+    this._recordingStartTime = 0;
   }
 
   /**
    * @return {!Timeline.TimelinePanel}
    */
   static instance() {
     return /** @type {!Timeline.TimelinePanel} */ (self.runtime.sharedInstance(Timeline.TimelinePanel));
   }
 
   /**
@@ skipping 232 matching lines @@
               'Capture graphics layer positions and rasterization draw calls. (Has large performance overhead)')));
     } else {
       this._panelToolbar.appendToolbarItem(screenshotCheckbox);
     }
 
     if (Runtime.experiments.isEnabled('timelineRuleUsageRecording')) {
       this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
           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());
     this._panelToolbar.appendToolbarItem(this._cpuThrottlingCombobox);
     this._populateCPUThrottingCombobox();
     this._updateTimelineControls();
   }
 
   /**
+   * @param {!Extensions.ExtensionTraceProvider} traceProvider
+   * @return {!Common.Setting<boolean>}
+   */
+  static _settingForTraceProvider(traceProvider) {
+    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;
+  }
+
+  /**
    * @return {!UI.ToolbarComboBox}
    */
   _createNetworkConditionsSelect() {
     var toolbarItem = new UI.ToolbarComboBox(null);
     toolbarItem.setMaxWidth(140);
     Components.NetworkConditionsSelector.decorateSelect(toolbarItem.selectElement());
     return toolbarItem;
   }
 
   _populateCPUThrottingCombobox() {
@@ skipping 115 matching lines @@
     this._overviewControls.push(new Timeline.TimelineEventOverviewCPUActivity(this._model));
     this._overviewControls.push(new Timeline.TimelineEventOverviewNetwork(this._model));
     if (this._captureFilmStripSetting.get())
       this._overviewControls.push(new Timeline.TimelineFilmStripOverview(this._model, this._filmStripModel));
     if (this._captureMemorySetting.get())
       this._overviewControls.push(new Timeline.TimelineEventOverviewMemory(this._model));
     this._overviewPane.setOverviewControls(this._overviewControls);
 
     // 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);
 
     if (this._captureMemorySetting.get()) {
       this._addModeView(
           new Timeline.MemoryCountersGraph(this, this._model, [Timeline.TimelineUIUtils.visibleEventsFilter()]));
     }
 
     this.doResize();
     this.select(null);
@@ skipping 31 matching lines @@
     console.assert(!this._statusPane, 'Status pane is already opened.');
     var mainTarget = SDK.targetManager.mainTarget();
     if (!mainTarget)
       return;
     this._setState(Timeline.TimelinePanel.State.StartPending);
     this._showRecordingStarted();
 
     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();
 
     if (userInitiated)
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.TimelineStarted);
     this._setUIControlsEnabled(false);
     this._hideRecordingHelpMessage();
   }
 
@@ skipping 25 matching lines @@
   _toggleRecording() {
     if (this._state === Timeline.TimelinePanel.State.Idle)
       this._startRecording(true);
     else if (this._state === Timeline.TimelinePanel.State.Recording)
       this._stopRecording();
   }
 
   _clear() {
     this._showRecordingHelpMessage();
     this._detailsSplitWidget.hideSidebar();
+    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.requestWindowTimes(0, Infinity);
     delete this._selection;
     this._frameModel.reset();
     this._filmStripModel.reset(this._tracingModel);
     this._overviewPane.reset();
     this._currentViews.forEach(view => view.reset());
     this._overviewControls.forEach(overview => overview.reset());
     this.select(null);
   }
@@ skipping 12 matching lines @@
   }
 
   /**
    * @override
    * @param {number} usage
    */
   recordingProgress(usage) {
     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);
+    for (let view of this._currentViews)
+      view.extensionDataAdded();
+  }
+
+  /**
+   * @override
+   * @return {?symbol}
+   */
+  sessionGeneration() {
+    return this._sessionGeneration;
+  }
+
   _showRecordingHelpMessage() {
     if (Runtime.experiments.isEnabled('timelineLandingPage')) {
       this._showLandingPage();
       return;
     }
 
     /**
      * @param {string} tagName
      * @param {string} contents
      * @return {!Element}
@@ skipping 101 matching lines @@
     this._frameModel.addTraceEvents(
         SDK.targetManager.mainTarget(), this._model.inspectedTargetEvents(), this._model.sessionId() || '');
     this._filmStripModel.reset(this._tracingModel);
     var groups = TimelineModel.TimelineModel.AsyncEventGroup;
     var asyncEventsByGroup = this._model.mainThreadAsyncEvents();
     this._irModel.populate(asyncEventsByGroup.get(groups.input), asyncEventsByGroup.get(groups.animation));
     this._model.cpuProfiles().forEach(profile => Components.LineLevelProfile.instance().appendCPUProfile(profile));
     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());
     this._setAutoWindowTimes();
     this._refreshViews();
     for (var i = 0; i < this._overviewControls.length; ++i)
       this._overviewControls[i].timelineStopped();
     this._setMarkers();
     this._overviewPane.scheduleUpdate();
     this._updateSearchHighlight(false, true);
@@ skipping 482 matching lines @@
   Loading: Symbol('Loading')
 };
 
 // Define row and header height, should be in sync with styles for timeline graphs.
 Timeline.TimelinePanel.rowHeight = 18;
 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 = {
   recordingStarted() {},
 
   /**
    * @param {number} usage
    */
   recordingProgress(usage) {},
 
-  loadingStarted() {},
+  /**
+   * @param {string} title
+   * @param {!SDK.TracingModel} tracingModel
+   * @param {number} timeOffset
+   */
+  addExtensionEvents(title, tracingModel, timeOffset) {},
 
-  /**
-   * @param {number=} progress
-   */
-  loadingProgress(progress) {},
-
-  /**
-   * @param {boolean} success
-   */
-  loadingComplete(success) {},
+  /** @return {?symbol} */
+  sessionGeneration() {}
 };
 
 /**
  * @unrestricted
  */
 Timeline.TimelineDetailsView = class extends UI.TabbedPane {
   /**
    * @param {!TimelineModel.TimelineModel} timelineModel
    * @param {!Array<!TimelineModel.TimelineModel.Filter>} filters
    * @param {!Timeline.TimelineModeViewDelegate} delegate
@@ skipping 193 matching lines @@
 
   /**
    * @return {?Element}
    */
   resizerElement() {},
 
   reset() {},
 
   refreshRecords() {},
 
+  extensionDataAdded() {},
+
   /**
    * @param {?SDK.TracingModel.Event} event
    * @param {string=} regex
    * @param {boolean=} select
    */
   highlightSearchResult(event, regex, select) {},
 
   /**
    * @param {number} startTime
    * @param {number} endTime
@@ skipping 369 matching lines @@
       categories[name].hidden = !categoryFiltersUI[name].checked();
       this._notifyFiltersChanged();
     }
   }
 
   _notifyFiltersChanged() {
     this.dispatchEventToListeners(Timeline.TimelineFilters.Events.FilterChanged);
   }
 };
 
+Timeline.TimelinePanel._traceProviderSettingSymbol = Symbol('traceProviderSetting');
+
 /** @enum {symbol} */
 Timeline.TimelineFilters.Events = {
   FilterChanged: Symbol('FilterChanged')
 };
 
 Timeline.TimelineFilters._durationFilterPresetsMs = [0, 1, 15];
 
 /**
  * @implements {SDK.TargetManager.Observer}
  * @unrestricted
@@ skipping 35 matching lines @@
   }
 
   /**
    * @override
    * @param {!SDK.Target} target
    */
   targetRemoved(target) {
     this._targets.remove(target, true);
   }
 };