DevTools: Show top level event initiator when a child is selected.

third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChartDataProvider.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 126 matching lines @@
    */
   entryFont(index) {
     return this._font;
   }
 
   reset() {
     this._currentLevel = 0;
     this._timelineData = null;
     /** @type {!Array<!SDK.TracingModel.Event|!TimelineModel.TimelineFrame|!TimelineModel.TimelineIRModel.Phases>} */
     this._entryData = [];
+    /** @type {!Array<!SDK.TracingModel.Event>} */

[caseq, 2017/03/30 22:44:51]

nit: should this keep an index instead?

[alph, 2017/03/30 23:32:17]

I tried that, but there seems to be a bit more code.

+    this._entryParent = [];
     /** @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();
@@ skipping 173 matching lines @@
         e._blackboxRoot = true;
       }
       if (title) {
         this._appendHeader(title, style, forceExpanded);
         title = '';
       }
 
       var level = this._currentLevel + openEvents.length;
       if (flowEventsEnabled)
         this._appendFlowEvent(e, level);
-      if (e.phase !== SDK.TracingModel.Phase.FlowEnd)
-        this._appendEvent(e, level);
+      var index = this._appendEvent(e, level);
+      if (openEvents.length)
+        this._entryParent[index] = openEvents.peekLast();
       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(entryType, this._currentLevel);
     this._currentLevel += maxStackDepth;
@@ skipping 323 matching lines @@
    * @param {!PerfUI.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
+   * @return {number}
    */
   _appendEvent(event, level) {
     var index = this._entryData.length;
     this._entryData.push(event);
     this._timelineData.entryLevels[index] = level;
     this._timelineData.entryTotalTimes[index] =
         event.duration || Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs;
     this._timelineData.entryStartTimes[index] = event.startTime;
     event[Timeline.TimelineFlameChartDataProvider._indexSymbol] = index;
+    return index;
   }
 
   /**
    * @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.
       this._appendEvent(asyncEvent, level);
@@ skipping 154 matching lines @@
 
   /**
    * @param {number} entryIndex
    * @return {boolean}
    */
   buildFlowForInitiator(entryIndex) {
     if (this._lastInitiatorEntry === entryIndex)
       return false;
     this._lastInitiatorEntry = entryIndex;
     var event = this.eventByIndex(entryIndex);
-    var initiator = event && TimelineModel.TimelineData.forEvent(event).initiator();
-    if (initiator && !this._isVisible(initiator))
-      initiator = null;
     var td = this._timelineData;
-    if (td.flowStartTimes.length || initiator) {
-      td.flowStartTimes = [];
-      td.flowStartLevels = [];
-      td.flowEndTimes = [];
-      td.flowEndLevels = [];
+    td.flowStartTimes = [];
+    td.flowStartLevels = [];
+    td.flowEndTimes = [];
+    td.flowEndLevels = [];
+    // Find the closest ancestor with an initiator.
+    var initiator;
+    for (; event; event = this._eventParent(event)) {
+      if (!this._isVisible(event))
+        continue;
+      initiator = TimelineModel.TimelineData.forEvent(event).initiator();
+      if (initiator)
+        break;
     }
-    if (!initiator)
+    if (!initiator || !this._isVisible(initiator))
       return true;
+    var eventIndex = event[Timeline.TimelineFlameChartDataProvider._indexSymbol];
     var initiatorIndex = initiator[Timeline.TimelineFlameChartDataProvider._indexSymbol];
-    var eventIndex = event[Timeline.TimelineFlameChartDataProvider._indexSymbol];
     td.flowStartTimes.push(initiator.endTime || initiator.startTime);
     td.flowStartLevels.push(td.entryLevels[initiatorIndex]);
     td.flowEndTimes.push(event.startTime);
     td.flowEndLevels.push(td.entryLevels[eventIndex]);
     return true;
   }
 
   /**
+   * @param {!SDK.TracingModel.Event} event
+   * @return {?SDK.TracingModel.Event}
+   */
+  _eventParent(event) {
+    return this._entryParent[event[Timeline.TimelineFlameChartDataProvider._indexSymbol]] || null;
+  }
+
+  /**
    * @param {number} entryIndex
    * @return {?SDK.TracingModel.Event}
    */
   eventByIndex(entryIndex) {
     return this._entryType(entryIndex) === Timeline.TimelineFlameChartEntryType.Event ?
         /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]) :
         null;
   }
 };
 
 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;
 Timeline.TimelineFlameChartDataProvider._indexSymbol = Symbol('index');