DevTools: add extension API to contribute trace events to timeline

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

 /*
  * Copyright (C) 2014 Google 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.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 29 matching lines @@
   constructor(model, frameModel, irModel, filters) {
     super();
     this._model = model;
     this._filters = filters;
     /** @type {?UI.FlameChart.TimelineData} */
     this._timelineData = null;
     this._frameModel = frameModel;
     this._irModel = irModel;
     this._consoleColorGenerator =
         new UI.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7);
+    this._extensionColorGenerator =
+        new UI.FlameChart.ColorGenerator({min: 210, max: 300}, {min: 70, max: 100, count: 6}, 70, 0.7);
     const font = this.font();
 
     this._headerLevel1 = {
       padding: 4,
       height: 17,
       collapsible: true,
       color: UI.themeSupport.patchColor('#222', UI.ThemeSupport.ColorUsage.Foreground),
       font: font,
       backgroundColor: UI.themeSupport.patchColor('white', UI.ThemeSupport.ColorUsage.Background),
       nestingLevel: 0
@@ skipping 35 matching lines @@
   }
 
   /**
    * @override
    * @param {number} entryIndex
    * @return {?string}
    */
   entryTitle(entryIndex) {
     var entryType = this._entryType(entryIndex);
     if (entryType === Timeline.TimelineFlameChartEntryType.Event) {
-      var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
+      const event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
       if (event.phase === SDK.TracingModel.Phase.AsyncStepInto || event.phase === SDK.TracingModel.Phase.AsyncStepPast)
         return event.name + ':' + event.args['step'];
       if (event._blackboxRoot)
         return Common.UIString('Blackboxed');
       var name = Timeline.TimelineUIUtils.eventStyle(event).title;
       // TODO(yurys): support event dividers
       var detailsText = Timeline.TimelineUIUtils.buildDetailsTextForTraceEvent(event, this._model.targetByEvent(event));
       if (event.name === TimelineModel.TimelineModel.RecordType.JSFrame && detailsText)
         return detailsText;
       return detailsText ? Common.UIString('%s (%s)', name, detailsText) : name;
     }
+    if (entryType === Timeline.TimelineFlameChartEntryType.ExtensionEvent) {
+      const event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
+      return event.name;
+    }
     var title = this._entryIndexToTitle[entryIndex];
     if (!title) {
       title = Common.UIString('Unexpected entryIndex %d', entryIndex);
       console.error(title);
     }
     return title;
   }
 
   /**
    * @override
@@ skipping 19 matching lines @@
     /** @type {!Array<!Timeline.TimelineFlameChartEntryType>} */
     this._entryTypeByLevel = [];
     /** @type {!Array<string>} */
     this._entryIndexToTitle = [];
     /** @type {!Array<!Timeline.TimelineFlameChartMarker>} */
     this._markers = [];
     /** @type {!Map<!Timeline.TimelineCategory, string>} */
     this._asyncColorByCategory = new Map();
     /** @type {!Map<!TimelineModel.TimelineIRModel.Phases, string>} */
     this._asyncColorByInteractionPhase = new Map();
+    /** @type {!Array<!{title: string, model: !SDK.TracingModel}>} */
+    this._extensionInfo = [];
   }
 
   /**
    * @override
    * @return {!UI.FlameChart.TimelineData}
    */
   timelineData() {
     if (this._timelineData)
       return this._timelineData;
 
     this._timelineData = new UI.FlameChart.TimelineData([], [], [], []);
 
     this._minimumBoundary = this._model.minimumRecordTime();
     this._timeSpan = this._model.isEmpty() ? 1000 : this._model.maximumRecordTime() - this._minimumBoundary;
     this._currentLevel = 0;
     this._appendFrameBars(this._frameModel.frames());
 
     this._appendHeader(Common.UIString('Interactions'), this._interactionsHeaderLevel1);
     this._appendInteractionRecords();
 
+    var eventEntryType = Timeline.TimelineFlameChartEntryType.Event;
+
     var asyncEventGroups = TimelineModel.TimelineModel.AsyncEventGroup;
     var inputLatencies = this._model.mainThreadAsyncEvents().get(asyncEventGroups.input);
     if (inputLatencies && inputLatencies.length) {
       var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.input);
-      this._appendAsyncEventsGroup(title, inputLatencies, this._interactionsHeaderLevel2);
+      this._appendAsyncEventsGroup(title, inputLatencies, this._interactionsHeaderLevel2, eventEntryType);
     }
     var animations = this._model.mainThreadAsyncEvents().get(asyncEventGroups.animation);
     if (animations && animations.length) {
       var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.animation);
-      this._appendAsyncEventsGroup(title, animations, this._interactionsHeaderLevel2);
+      this._appendAsyncEventsGroup(title, animations, this._interactionsHeaderLevel2, eventEntryType);
     }
     var threads = this._model.virtualThreads();
     if (!Runtime.experiments.isEnabled('timelinePerFrameTrack')) {
       this._appendThreadTimelineData(
           Common.UIString('Main'), this._model.mainThreadEvents(), this._model.mainThreadAsyncEvents(), true);
     } else {
       this._appendThreadTimelineData(
           Common.UIString('Page'), this._model.eventsForFrame(TimelineModel.TimelineModel.PageFrame.mainFrameId),
           this._model.mainThreadAsyncEvents(), true);
       for (var frame of this._model.rootFrames()) {
         // Ignore top frame itself, since it should be part of page events.
         frame.children.forEach(this._appendFrameEvents.bind(this, 0));
       }
     }
     var compositorThreads = threads.filter(thread => thread.name.startsWith('CompositorTileWorker'));
     var otherThreads = threads.filter(thread => !thread.name.startsWith('CompositorTileWorker'));
     if (compositorThreads.length) {
       this._appendHeader(Common.UIString('Raster'), this._headerLevel1);
       for (var i = 0; i < compositorThreads.length; ++i) {
         this._appendSyncEvents(
-            compositorThreads[i].events, Common.UIString('Rasterizer Thread %d', i), this._headerLevel2);
+            compositorThreads[i].events, Common.UIString('Rasterizer Thread %d', i), this._headerLevel2,
+            eventEntryType);
       }
     }
     this._appendGPUEvents();
 
     otherThreads.forEach(
-        thread => this._appendThreadTimelineData(thread.name, thread.events, thread.asyncEventsByGroup));
+        thread => this._appendThreadTimelineData(
+            thread.name || Common.UIString('Thread %d', thread.id), thread.events, thread.asyncEventsByGroup));
+
+    for (let extensionIndex = 0; extensionIndex < this._extensionInfo.length; extensionIndex++)
+      this._innerAppendExtensionEvents(extensionIndex);
 
     /**
      * @param {!Timeline.TimelineFlameChartMarker} a
      * @param {!Timeline.TimelineFlameChartMarker} b
      */
     function compareStartTime(a, b) {
       return a.startTime() - b.startTime();
     }
 
     this._markers.sort(compareStartTime);
     this._timelineData.markers = this._markers;
 
     return this._timelineData;
   }
 
   /**
    * @param {number} level
    * @param {!TimelineModel.TimelineModel.PageFrame} frame
    */
   _appendFrameEvents(level, frame) {
     var events = this._model.eventsForFrame(frame.id);
     var clonedHeader = Object.assign({}, this._headerLevel1);
     clonedHeader.nestingLevel = level;
     this._appendSyncEvents(
         events, Timeline.TimelineUIUtils.displayNameForFrame(frame),
-        /** @type {!UI.FlameChart.GroupStyle} */ (clonedHeader));
+        /** @type {!UI.FlameChart.GroupStyle} */ (clonedHeader), Timeline.TimelineFlameChartEntryType.Event);
     frame.children.forEach(this._appendFrameEvents.bind(this, level + 1));
   }
 
   /**
    * @param {string} threadTitle
    * @param {!Array<!SDK.TracingModel.Event>} syncEvents
    * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.TracingModel.AsyncEvent>>} asyncEvents
    * @param {boolean=} forceExpanded
    */
   _appendThreadTimelineData(threadTitle, syncEvents, asyncEvents, forceExpanded) {
+    var entryType = Timeline.TimelineFlameChartEntryType.Event;
     this._appendAsyncEvents(asyncEvents);
-    this._appendSyncEvents(syncEvents, threadTitle, this._headerLevel1, forceExpanded);
+    this._appendSyncEvents(syncEvents, threadTitle, this._headerLevel1, entryType, forceExpanded);
   }
 
   /**
    * @param {!Array<!SDK.TracingModel.Event>} events
    * @param {string} title
    * @param {!UI.FlameChart.GroupStyle} style
+   * @param {!Timeline.TimelineFlameChartEntryType} entryType
    * @param {boolean=} forceExpanded
    */
-  _appendSyncEvents(events, title, style, forceExpanded) {
+  _appendSyncEvents(events, title, style, entryType, forceExpanded) {
+    var isExtension = entryType === Timeline.TimelineFlameChartEntryType.ExtensionEvent;
     var openEvents = [];
-    var blackboxingEnabled = Runtime.experiments.isEnabled('blackboxJSFramesOnTimeline');
+    var blackboxingEnabled = !isExtension && Runtime.experiments.isEnabled('blackboxJSFramesOnTimeline');
     var maxStackDepth = 0;
     for (var i = 0; i < events.length; ++i) {
       var e = events[i];
-      if (TimelineModel.TimelineModel.isMarkerEvent(e)) {
+      if (!isExtension && TimelineModel.TimelineModel.isMarkerEvent(e)) {
         this._markers.push(new Timeline.TimelineFlameChartMarker(
             e.startTime, e.startTime - this._model.minimumRecordTime(),
             Timeline.TimelineUIUtils.markerStyleForEvent(e)));
       }
       if (!SDK.TracingModel.isFlowPhase(e.phase)) {
         if (!e.endTime && e.phase !== SDK.TracingModel.Phase.Instant)
           continue;
         if (SDK.TracingModel.isAsyncPhase(e.phase))
           continue;
-        if (!this._isVisible(e))
+        if (!isExtension && !this._isVisible(e))
           continue;
       }
       while (openEvents.length && openEvents.peekLast().endTime <= e.startTime)
         openEvents.pop();
       e._blackboxRoot = false;
       if (blackboxingEnabled && this._isBlackboxedEvent(e)) {
         var parent = openEvents.peekLast();
         if (parent && parent._blackboxRoot)
           continue;
         e._blackboxRoot = true;
       }
       if (title) {
         this._appendHeader(title, style, forceExpanded);
         title = '';
       }
 
       var level = this._currentLevel + openEvents.length;
       this._appendEvent(e, level);
+      if (!isExtension && TimelineModel.TimelineModel.isMarkerEvent(e))
+        this._timelineData.entryTotalTimes[this._entryData.length] = undefined;
+
       maxStackDepth = Math.max(maxStackDepth, openEvents.length + 1);
       if (e.endTime)
         openEvents.push(e);
     }
     this._entryTypeByLevel.length = this._currentLevel + maxStackDepth;
-    this._entryTypeByLevel.fill(Timeline.TimelineFlameChartEntryType.Event, this._currentLevel);
+    this._entryTypeByLevel.fill(entryType, this._currentLevel);
     this._currentLevel += maxStackDepth;
   }
 
   /**
    * @param {!SDK.TracingModel.Event} event
    * @return {boolean}
    */
   _isBlackboxedEvent(event) {
     if (event.name !== TimelineModel.TimelineModel.RecordType.JSFrame)
       return false;
     var url = event.args['data']['url'];
     return url && this._isBlackboxedURL(url);
   }
 
   /**
    * @param {string} url
    * @return {boolean}
    */
   _isBlackboxedURL(url) {
     return Bindings.blackboxManager.isBlackboxedURL(url);
   }
 
   /**
    * @param {!Map<!TimelineModel.TimelineModel.AsyncEventGroup, !Array<!SDK.TracingModel.AsyncEvent>>} asyncEvents
    */
   _appendAsyncEvents(asyncEvents) {
+    var entryType = Timeline.TimelineFlameChartEntryType.Event;
     var groups = TimelineModel.TimelineModel.AsyncEventGroup;
     var groupArray = Object.keys(groups).map(key => groups[key]);
 
     groupArray.remove(groups.animation);
     groupArray.remove(groups.input);
 
     for (var groupIndex = 0; groupIndex < groupArray.length; ++groupIndex) {
       var group = groupArray[groupIndex];
       var events = asyncEvents.get(group);
       if (!events)
         continue;
       var title = Timeline.TimelineUIUtils.titleForAsyncEventGroup(group);
-      this._appendAsyncEventsGroup(title, events, this._headerLevel1);
+      this._appendAsyncEventsGroup(title, events, this._headerLevel1, entryType);
     }
   }
 
   /**
    * @param {string} header
    * @param {!Array<!SDK.TracingModel.AsyncEvent>} events
    * @param {!UI.FlameChart.GroupStyle} style
+   * @param {!Timeline.TimelineFlameChartEntryType} entryType
    */
-  _appendAsyncEventsGroup(header, events, style) {
+  _appendAsyncEventsGroup(header, events, style, entryType) {
     var lastUsedTimeByLevel = [];
     var groupHeaderAppended = false;
     for (var i = 0; i < events.length; ++i) {
       var asyncEvent = events[i];
       if (!this._isVisible(asyncEvent))
         continue;
       if (!groupHeaderAppended) {
         this._appendHeader(header, style);
         groupHeaderAppended = true;
       }
       var startTime = asyncEvent.startTime;
       var level;
       for (level = 0; level < lastUsedTimeByLevel.length && lastUsedTimeByLevel[level] > startTime; ++level) {
       }
       this._appendAsyncEvent(asyncEvent, this._currentLevel + level);
       lastUsedTimeByLevel[level] = asyncEvent.endTime;
     }
     this._entryTypeByLevel.length = this._currentLevel + lastUsedTimeByLevel.length;
-    this._entryTypeByLevel.fill(Timeline.TimelineFlameChartEntryType.Event, this._currentLevel);
+    this._entryTypeByLevel.fill(entryType, this._currentLevel);
     this._currentLevel += lastUsedTimeByLevel.length;
   }
 
   _appendGPUEvents() {
-    if (this._appendSyncEvents(this._model.gpuEvents(), Common.UIString('GPU'), this._headerLevel1, false))
+    const eventType = Timeline.TimelineFlameChartEntryType.Event
+    const gpuEvents = this._model.gpuEvents();
+    if (this._appendSyncEvents(gpuEvents, Common.UIString('GPU'), this._headerLevel1, eventType, false))
       ++this._currentLevel;
   }
 
   _appendInteractionRecords() {
     this._irModel.interactionRecords().forEach(this._appendSegment, this);
     this._entryTypeByLevel[this._currentLevel++] = Timeline.TimelineFlameChartEntryType.InteractionRecord;
   }
 
   /**
    * @param {!Array.<!TimelineModel.TimelineFrame>} frames
@@ skipping 95 matching lines @@
         return patchColorAndCache(
             this._asyncColorByInteractionPhase, phase, Timeline.TimelineUIUtils.interactionPhaseColor);
       }
       var category = Timeline.TimelineUIUtils.eventStyle(event).category;
       return patchColorAndCache(this._asyncColorByCategory, category, () => category.color);
     }
     if (type === Timeline.TimelineFlameChartEntryType.Frame)
       return 'white';
     if (type === Timeline.TimelineFlameChartEntryType.InteractionRecord)
       return 'transparent';
+    if (type === Timeline.TimelineFlameChartEntryType.ExtensionEvent) {
+      var event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
+      return this._extensionColorGenerator.colorForID(event.name);
+    }
     return '';
   }
 
   /**
    * @override
    * @param {number} entryIndex
    * @param {!CanvasRenderingContext2D} context
    * @param {?string} text
    * @param {number} barX
    * @param {number} barY
@@ skipping 78 matching lines @@
    */
   forceDecoration(entryIndex) {
     var type = this._entryType(entryIndex);
     return type === Timeline.TimelineFlameChartEntryType.Frame ||
         type === Timeline.TimelineFlameChartEntryType.Event &&
         !!TimelineModel.TimelineData.forEvent(/** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]))
               .warning;
   }
 
   /**
+   * @param {!{title: string, model: !SDK.TracingModel}} entry
+   */
+  appendExtensionEvents(entry) {
+    this._extensionInfo.push(entry);
+    if (this._timelineData)
+      this._innerAppendExtensionEvents(this._extensionInfo.length - 1);
+  }
+
+  /**
+   * @param {number} index
+   */
+  _innerAppendExtensionEvents(index) {
+    var entry = this._extensionInfo[index];
+    var entryType = Timeline.TimelineFlameChartEntryType.ExtensionEvent;
+    var allThreads = [].concat(...entry.model.sortedProcesses().map(process => process.sortedThreads()));
+    if (!allThreads.length)
+      return;
+
+    this._appendHeader(entry.title, this._headerLevel1);
+    for (let thread of allThreads) {
+      this._appendAsyncEventsGroup(thread.name(), thread.asyncEvents(), this._headerLevel2, entryType);
+      this._appendSyncEvents(thread.events(), thread.name(), this._headerLevel2, entryType, false);
+    }
+  }
+
+  /**
    * @param {string} title
    * @param {!UI.FlameChart.GroupStyle} style
    * @param {boolean=} expanded
    */
   _appendHeader(title, style, expanded) {
     this._timelineData.groups.push({startLevel: this._currentLevel, name: title, expanded: expanded, style: style});
   }
 
   /**
    * @param {!SDK.TracingModel.Event} event
    * @param {number} level
    */
   _appendEvent(event, level) {
     var index = this._entryData.length;
     this._entryData.push(event);
     this._timelineData.entryLevels[index] = level;
-    var duration;
-    if (TimelineModel.TimelineModel.isMarkerEvent(event))
-      duration = undefined;
-    else
-      duration = event.duration || Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs;
-    this._timelineData.entryTotalTimes[index] = duration;
+    this._timelineData.entryTotalTimes[index] =
+        event.duration || Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs;
     this._timelineData.entryStartTimes[index] = event.startTime;
   }
 
   /**
    * @param {!SDK.TracingModel.AsyncEvent} asyncEvent
    * @param {number} level
    */
   _appendAsyncEvent(asyncEvent, level) {
     if (SDK.TracingModel.isNestableAsyncPhase(asyncEvent.phase)) {
       // FIXME: also add steps once we support event nesting in the FlameChart.
@@ skipping 89 matching lines @@
    * @return {boolean}
    */
   _isVisible(event) {
     return this._filters.every(function(filter) {
       return filter.accept(event);
     });
   }
 };
 
 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;