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 41e992b654a52ae239d89e4818e4bf18e6ee5d49..45d16d04591fbf35353eedb313e079a6291834c7 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(child => this._appendFrameEvents(child, 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,18 @@ WebInspector.TimelineFlameChartDataProvider = class extends WebInspector.Timelin
   }
 
   /**
+   * @param {!WebInspector.TimelineModel.PageFrame} frame
+   * @param {number} level
+   */
+  _appendFrameEvents(frame, level) {
+    var events = this._model.eventsForFrame(frame.id);
+    var clonedHeader = Object.assign({}, this._headerLevel1);
+    clonedHeader.nestingLevel = level;
+    this._appendSyncEvents(events, `"${frame.name.trimMiddle(30)}" ${frame.url.trimEnd(80)}`, /** @type {!WebInspector.FlameChart.GroupStyle} */ (clonedHeader));
+    frame.children.forEach(child => this._appendFrameEvents(child, level + 1));

[alph, 2016/11/11 02:32:35]

nit:
if you move the frame argument to the end you'll be able to do:
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