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

third_party/WebKit/Source/devtools/front_end/timeline_model/TimelineModel.js

 /*
  * Copyright (C) 2012 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 544 matching lines @@
   /**
    * @param {!WebInspector.TracingModel} tracingModel
    * @param {number} startTime
    * @param {number} endTime
    * @param {!WebInspector.TracingModel.Thread} thread
    * @param {boolean} isMainThread
    */
   _processThreadEvents(tracingModel, startTime, endTime, thread, isMainThread) {
     var events = this._injectJSFrameEvents(tracingModel, thread);
     var asyncEvents = thread.asyncEvents();
+    var groupByFrame = isMainThread && Runtime.experiments.isEnabled('timelinePerFrameTrack');
 
     var threadEvents;
     var threadAsyncEventsByGroup;
     if (isMainThread) {
       threadEvents = this._mainThreadEvents;
       threadAsyncEventsByGroup = this._mainThreadAsyncEventsByGroup;
     } else {
       var virtualThread = new WebInspector.TimelineModel.VirtualThread(thread.name());
       this._virtualThreads.push(virtualThread);
       threadEvents = virtualThread.events;
       threadAsyncEventsByGroup = virtualThread.asyncEventsByGroup;
     }
 
     this._eventStack = [];
     var i = events.lowerBound(startTime, (time, event) => time - event.startTime);
     var length = events.length;
     for (; i < length; i++) {
       var event = events[i];
       if (endTime && event.startTime >= endTime)
         break;
       if (!this._processEvent(event))
         continue;
+      if (groupByFrame) {
+        var frameId = WebInspector.TimelineData.forEvent(event).frameId;
+        var pageFrame = frameId && this._pageFrames.get(frameId);
+        var isMainFrame = !frameId || !pageFrame || !pageFrame.parent;
+        if (isMainFrame)
+          frameId = WebInspector.TimelineModel.PageFrame.mainFrameId;
+        var frameEvents = this._eventsByFrame.get(frameId);
+        if (!frameEvents) {
+          frameEvents = [];
+          this._eventsByFrame.set(frameId, frameEvents);
+        }
+        frameEvents.push(event);
+      }
       threadEvents.push(event);
       this._inspectedTargetEvents.push(event);
     }
     this._processAsyncEvents(threadAsyncEventsByGroup, asyncEvents, startTime, endTime);
     // Pretend the compositor's async events are on the main thread.
     if (thread.name() === 'Compositor') {
       this._mergeAsyncEvents(this._mainThreadAsyncEventsByGroup, threadAsyncEventsByGroup);
       threadAsyncEventsByGroup.clear();
     }
   }
@@ skipping 46 matching lines @@
       // TraceEvents come with 1-based line & column numbers. The frontend code
       // requires 0-based ones. Adjust the values.
       for (var i = 0; i < timelineData.stackTrace.length; ++i) {
         --timelineData.stackTrace[i].lineNumber;
         --timelineData.stackTrace[i].columnNumber;
       }
     }
     var pageFrameId = WebInspector.TimelineModel.eventFrameId(event);
     if (!pageFrameId && eventStack.length)
       pageFrameId = WebInspector.TimelineData.forEvent(eventStack.peekLast()).frameId;
-    timelineData.frameId = pageFrameId || WebInspector.TimelineData.mainFrameId;
+    timelineData.frameId = pageFrameId || WebInspector.TimelineModel.PageFrame.mainFrameId;
     this._asyncEventTracker.processEvent(event);
     switch (event.name) {
       case recordTypes.ResourceSendRequest:
       case recordTypes.WebSocketCreate:
         timelineData.setInitiator(eventStack.peekLast() || null);
         timelineData.url = eventData['url'];
         break;
 
       case recordTypes.ScheduleStyleRecalculation:
         this._lastScheduleStyleRecalculation[eventData['frame']] = event;
@@ skipping 110 matching lines @@
         timelineData.backendNodeId = paintImageData.backendNodeId;
         timelineData.url = paintImageData.url;
         break;
 
       case recordTypes.DrawLazyPixelRef:
         var paintImageEvent = this._findAncestorEvent(recordTypes.PaintImage);
         if (!paintImageEvent)
           break;
         this._paintImageEventByPixelRefId[event.args['LazyPixelRef']] = paintImageEvent;
         var paintImageData = WebInspector.TimelineData.forEvent(paintImageEvent);
-        event.backendNodeId = paintImageData.backendNodeId;
-        event.url = paintImageData.url;
+        timelineData.backendNodeId = paintImageData.backendNodeId;
+        timelineData.url = paintImageData.url;
         break;
 
       case recordTypes.MarkDOMContent:
       case recordTypes.MarkLoad:
         var page = eventData['page'];
         if (page && page !== this._currentPage)
           return false;
         break;
 
       case recordTypes.CommitLoad:
         var frameId = WebInspector.TimelineModel.eventFrameId(event);
         var pageFrame = this._pageFrames.get(frameId);
-        if (pageFrame) {
-          pageFrame.url = eventData.url || '';
-          pageFrame.name = eventData.name || '';
-        } else {
+        if (pageFrame)
+          pageFrame.update(eventData.name || '', eventData.url || '');
+        else
           this._addPageFrame(event, eventData);
-        }
         var page = eventData['page'];
         if (page && page !== this._currentPage)
           return false;
         if (!eventData['isMainFrame'])
           break;
         this._hadCommitLoad = true;
         this._firstCompositeLayers = null;
         break;
 
       case recordTypes.CompositeLayers:
@@ skipping 133 matching lines @@
     /** @type {?string} */
     this._sessionId = null;
     /** @type {?number} */
     this._mainFrameNodeId = null;
     /** @type {!Array<!WebInspector.CPUProfileDataModel>} */
     this._cpuProfiles = [];
     /** @type {!WeakMap<!WebInspector.TracingModel.Thread, string>} */
     this._workerIdByThread = new WeakMap();
     /** @type {!Map<string, !WebInspector.TimelineModel.PageFrame>} */
     this._pageFrames = new Map();
+    /** @type {!Map<string, !Array<!WebInspector.TracingModel.Event>>} */
+    this._eventsByFrame = new Map();
 
     this._minimumRecordTime = 0;
     this._maximumRecordTime = 0;
   }
 
   /**
    * @return {number}
    */
   minimumRecordTime() {
     return this._minimumRecordTime;
@@ skipping 63 matching lines @@
   }
 
   /**
    * @return {!Array.<!WebInspector.TimelineModel.Record>}
    */
   eventDividerRecords() {
     return this._eventDividerRecords;
   }
 
   /**
+   * @return {!Array<!WebInspector.TimelineModel.PageFrame>}
+   */
+  rootFrames() {
+    return Array.from(this._pageFrames.values()).filter(frame => !frame.parent);
+  }
+
+  /**
    * @param {string} frameId
    * @return {?WebInspector.TimelineModel.PageFrame}
    */
   pageFrameById(frameId) {
     return frameId ? this._pageFrames.get(frameId) || null : null;
   }
 
   /**
+   * @param {string} frameId
+   * @return {!Array<!WebInspector.TracingModel.Event>}
+   */
+  eventsForFrame(frameId) {
+    return this._eventsByFrame.get(frameId) || [];
+  }
+
+  /**
    * @return {!Array<!WebInspector.TimelineModel.NetworkRequest>}
    */
   networkRequests() {
     /** @type {!Map<string,!WebInspector.TimelineModel.NetworkRequest>} */
     var requests = new Map();
     /** @type {!Array<!WebInspector.TimelineModel.NetworkRequest>} */
     var requestsList = [];
     /** @type {!Array<!WebInspector.TimelineModel.NetworkRequest>} */
     var zeroStartRequestsList = [];
     var types = WebInspector.TimelineModel.RecordType;
@@ skipping 300 matching lines @@
 
 
 WebInspector.TimelineModel.PageFrame = class {
   /**
    * @param {?WebInspector.Target} target
    * @param {number} pid
    * @param {!Object} payload
    */
   constructor(target, pid, payload) {
     this.frameId = payload['frame'];
-    this.url = payload['url'];
+    this.url = payload['url'] || '';
     this.name = payload['name'];
     this.processId = pid;
     this.children = [];
     /** @type {?WebInspector.TimelineModel.PageFrame} */
     this.parent = null;
     this.id = `${this.processId}.${this.frameId}`;
     this.ownerNode = target && payload['nodeId'] ? new WebInspector.DeferredDOMNode(target, payload['nodeId']) : null;
   }
 
   /**
+   * @param {string} name
+   * @param {string} url
+   */
+  update(name, url) {
+    this.name = name;
+    this.url = url;
+  }
+
+  /**
    * @param {!WebInspector.TimelineModel.PageFrame} child
    */
   addChild(child) {
     this.children.push(child);
     child.parent = this;
   }
 };
 
+WebInspector.TimelineModel.PageFrame.mainFrameId = '';
+
+
 /**
  * @unrestricted
  */
 WebInspector.TimelineModel.NetworkRequest = class {
   /**
    * @param {!WebInspector.TracingModel.Event} event
    */
   constructor(event) {
     this.startTime = event.name === WebInspector.TimelineModel.RecordType.ResourceSendRequest ? event.startTime : 0;
     this.endTime = Infinity;
@@ skipping 548 matching lines @@
   static forEvent(event) {
     var data = event[WebInspector.TimelineData._symbol];
     if (!data) {
       data = new WebInspector.TimelineData();
       event[WebInspector.TimelineData._symbol] = data;
     }
     return data;
   }
 };
 
-WebInspector.TimelineData.mainFrameId = '';
 WebInspector.TimelineData._symbol = Symbol('timelineData');