DevTools: move flow events tracking to TracingModel, support cross-threads case

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 57 matching lines @@
         (Object.assign({}, defaultGroupStyle, {shareHeaderLine: false}));
     this._headerLevel2 = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1, collapsible: false}));
     this._staticHeader = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({}, defaultGroupStyle, {collapsible: false}));
     this._interactionsHeaderLevel1 = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({useFirstLineForOverview: true}, defaultGroupStyle));
     this._interactionsHeaderLevel2 = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1}));
 
-    /** @type {!Map<string, number>} */
-    this._flowEventIndexById = new Map();
+    /** @type {!Map<!SDK.TracingModel.Event, number>} */
+    this._flowEventIndexByEvent = new Map();
   }
 
   /**
    * @param {?Timeline.PerformanceModel} performanceModel
    */
   setModel(performanceModel) {
     this.reset();
     this._performanceModel = performanceModel;
     this._model = performanceModel && performanceModel.timelineModel();
   }
@@ skipping 81 matching lines @@
    * @return {!PerfUI.FlameChart.TimelineData}
    */
   timelineData() {
     if (this._timelineData)
       return this._timelineData;
 
     this._timelineData = new PerfUI.FlameChart.TimelineData([], [], [], []);
     if (!this._model)
       return this._timelineData;
 
-    this._flowEventIndexById.clear();
+    this._flowEventIndexByEvent.clear();
 
     this._minimumBoundary = this._model.minimumRecordTime();
     this._timeSpan = this._model.isEmpty() ? 1000 : this._model.maximumRecordTime() - this._minimumBoundary;
     this._currentLevel = 0;
 
     this._appendHeader(Common.UIString('Frames'), this._staticHeader);
     this._appendFrameBars(this._performanceModel.frames());
 
     this._appendHeader(Common.UIString('Interactions'), this._interactionsHeaderLevel1);
     this._appendInteractionRecords();
@@ skipping 33 matching lines @@
             compositorThreads[i].events, Common.UIString('Rasterizer Thread %d', i), this._headerLevel2,
             eventEntryType);
       }
     }
     this._appendGPUEvents();
 
     otherThreads.forEach(
         thread => this._appendThreadTimelineData(
             thread.name || Common.UIString('Thread %d', thread.id), thread.events, thread.asyncEventsByGroup));
 
+    this._appendFlowData();
+    this._flowEventIndexByEvent.clear();
+
     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;
-    this._flowEventIndexById.clear();
 
     return this._timelineData;
   }
 
   /**
    * @override
    * @return {number}
    */
   minimumBoundary() {
     return this._minimumBoundary;
@@ skipping 68 matching lines @@
         var parent = openEvents.peekLast();
         if (parent && parent._blackboxRoot)
           continue;
         e._blackboxRoot = true;
       }
       if (title) {
         this._appendHeader(title, style, forceExpanded);
         title = '';
       }
 
+      if (flowEventsEnabled && (e.nextFlow || e.previousFlow))
+        this._flowEventIndexByEvent.set(e, this._entryData.length);
       var level = this._currentLevel + openEvents.length;
-      if (flowEventsEnabled)
-        this._appendFlowEvent(e, level);
-      if (e.phase !== SDK.TracingModel.Phase.FlowEnd)
-        this._appendEvent(e, level);
+      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(entryType, this._currentLevel);
     this._currentLevel += maxStackDepth;
@@ skipping 87 matching lines @@
     var style = Timeline.TimelineUIUtils.markerStyleForFrame();
     this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartEntryType.Frame;
     for (var i = 0; i < frames.length; ++i) {
       this._markers.push(new Timeline.TimelineFlameChartMarker(
           frames[i].startTime, frames[i].startTime - this._model.minimumRecordTime(), style));
       this._appendFrame(frames[i]);
     }
     ++this._currentLevel;
   }
 
+  _appendFlowData() {
+    var flowPairs = [];
+    for (var flowEvent of this._performanceModel.tracingModel().flowHeads()) {
+      var times = [];
+      var levels = [];
+      for (; flowEvent; flowEvent = flowEvent.nextFlow) {

[alph, 2017/03/15 19:31:48]

I bet merging these two loops together will make it simpler.

+        var index = this._flowEventIndexByEvent.get(flowEvent);
+        if (typeof index !== 'number')
+          continue;
+        times.push(flowEvent.startTime);
+        levels.push(this._timelineData.entryLevels[index]);
+      }
+      for (var step = 1; step < times.length; ++step) {
+        flowPairs.push(
+            {startTime: times[step - 1], startLevel: levels[step - 1], endTime: times[step], endLevel: levels[step]});
+      }
+    }
+    flowPairs.sort((a, b) => a.startTime - b.startTime);
+    var td = this._timelineData;
+    for (var fp of flowPairs) {
+      td.flowStartTimes.push(fp.startTime);
+      td.flowStartLevels.push(fp.startLevel);
+      td.flowEndTimes.push(fp.endTime);
+      td.flowEndLevels.push(fp.endLevel);
+    }
+  }
   /**
    * @param {number} entryIndex
    * @return {!Timeline.TimelineFlameChartEntryType}
    */
   _entryType(entryIndex) {
     return this._entryTypeByLevel[this._timelineData.entryLevels[entryIndex]];
   }
 
   /**
    * @override
@@ skipping 269 matching lines @@
       var index = this._entryData.length;
       this._entryData.push(steps[i + eventOffset]);
       var startTime = steps[i].startTime;
       this._timelineData.entryLevels[index] = level;
       this._timelineData.entryTotalTimes[index] = steps[i + 1].startTime - startTime;
       this._timelineData.entryStartTimes[index] = startTime;
     }
   }
 
   /**
-   * @param {!SDK.TracingModel.Event} event
-   * @param {number} level
-   */
-  _appendFlowEvent(event, level) {
-    var timelineData = this._timelineData;
-    /**
-     * @param {!SDK.TracingModel.Event} event
-     * @return {number}
-     */
-    function pushStartFlow(event) {
-      var flowIndex = timelineData.flowStartTimes.length;
-      timelineData.flowStartTimes.push(event.startTime);
-      timelineData.flowStartLevels.push(level);
-      return flowIndex;
-    }
-
-    /**
-     * @param {!SDK.TracingModel.Event} event
-     * @param {number} flowIndex
-     */
-    function pushEndFlow(event, flowIndex) {
-      timelineData.flowEndTimes[flowIndex] = event.startTime;
-      timelineData.flowEndLevels[flowIndex] = level;
-    }
-
-    switch (event.phase) {
-      case SDK.TracingModel.Phase.FlowBegin:
-        this._flowEventIndexById.set(event.id, pushStartFlow(event));
-        break;
-      case SDK.TracingModel.Phase.FlowStep:
-        pushEndFlow(event, this._flowEventIndexById.get(event.id));
-        this._flowEventIndexById.set(event.id, pushStartFlow(event));
-        break;
-      case SDK.TracingModel.Phase.FlowEnd:
-        pushEndFlow(event, this._flowEventIndexById.get(event.id));
-        this._flowEventIndexById.delete(event.id);
-        break;
-    }
-  }
-
-  /**
    * @param {!TimelineModel.TimelineFrame} frame
    */
   _appendFrame(frame) {
     var index = this._entryData.length;
     this._entryData.push(frame);
     this._entryIndexToTitle[index] = Number.millisToString(frame.duration, true);
     this._timelineData.entryLevels[index] = this._currentLevel;
     this._timelineData.entryTotalTimes[index] = frame.duration;
     this._timelineData.entryStartTimes[index] = frame.startTime;
   }
@@ skipping 80 matching lines @@
    * @return {boolean}
    */
   _isVisible(event) {
     return this._filters.every(function(filter) {
       return filter.accept(event);
     });
   }
 };
 
 Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs = 0.001;