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

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 369 matching lines @@
     if (inputLatencies && inputLatencies.length) {
       var title = WebInspector.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.input);
       this._appendAsyncEventsGroup(title, inputLatencies, this._interactionsHeaderLevel2);
     }
     var animations = this._model.mainThreadAsyncEvents().get(asyncEventGroups.animation);
     if (animations && animations.length) {
       var title = WebInspector.TimelineUIUtils.titleForAsyncEventGroup(asyncEventGroups.animation);
       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) {
       this._appendHeader(WebInspector.UIString('Raster'), this._headerLevel1);
       for (var i = 0; i < compositorThreads.length; ++i)
         this._appendSyncEvents(
             compositorThreads[i].events, WebInspector.UIString('Rasterizer Thread %d', i), this._headerLevel2);
     }
     this._appendGPUEvents();
 
     otherThreads.forEach(
         thread => this._appendThreadTimelineData(thread.name, thread.events, thread.asyncEventsByGroup));
 
     /**
      * @param {!WebInspector.TimelineFlameChartMarker} a
      * @param {!WebInspector.TimelineFlameChartMarker} b
      */
     function compareStartTime(a, b) {
       return a.startTime() - b.startTime();
     }
 
     this._markers.sort(compareStartTime);
     this._timelineData.markers = this._markers;
 
     this._flowEventIndexById = {};
     return this._timelineData;
   }
 
   /**
+   * @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
    * @param {boolean=} forceExpanded
    */
   _appendThreadTimelineData(threadTitle, syncEvents, asyncEvents, forceExpanded) {
     this._appendAsyncEvents(asyncEvents);
     this._appendSyncEvents(syncEvents, threadTitle, this._headerLevel1, forceExpanded);
   }
 
@@ skipping 1052 matching lines @@
 WebInspector.TimelineFlameChartView.Selection = class {
   /**
    * @param {!WebInspector.TimelineSelection} selection
    * @param {number} entryIndex
    */
   constructor(selection, entryIndex) {
     this.timelineSelection = selection;
     this.entryIndex = entryIndex;
   }
 };