Timeline: add experiment to show events from subframes in the frames of their own

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

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
index 65ffa4c5d5a0c27b15baacc9057991f8e1ca682d..171ff87f25deb91cffc71451d12e73c3672915c4 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineFlameChart.js
@@ -387,8 +387,17 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
       this._appendAsyncEventsGroup(title, animations, this._interactionsHeaderLevel2);
     }
     var threads = this._model.virtualThreads();
-    this._appendThreadTimelineData(
-        WebInspector.UIString('Main'), this._model.mainThreadEvents(), this._model.mainThreadAsyncEvents(), true);
+    if (!Runtime.experiments.isEnabled('timelinePerFrameTrack')) {
+      this._appendThreadTimelineData(
+          WebInspector.UIString('Main'), this._model.mainThreadEvents(), this._model.mainThreadAsyncEvents(), true);
+    } else {
+      this._appendThreadTimelineData(
+          WebInspector.UIString('Page'), this._model.eventsForFrame(WebInspector.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) {
@@ -418,6 +427,19 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
   }
 
   /**
+   * @param {number} level
+   * @param {!WebInspector.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, WebInspector.TimelineUIUtils.displayNameForFrame(frame),
+                           /** @type {!WebInspector.FlameChart.GroupStyle} */ (clonedHeader));
+    frame.children.forEach(this._appendFrameEvents.bind(this, level + 1));
+  }
+
+  /**
    * @param {string} threadTitle
    * @param {!Array<!WebInspector.TracingModel.Event>} syncEvents
    * @param {!Map<!WebInspector.TimelineModel.AsyncEventGroup, !Array<!WebInspector.TracingModel.AsyncEvent>>} asyncEvents