DevTools: Show page timing events for main frame only.

BUG=901165

Change-Id: Ib29619563845f9f4002d8a01269f74b56ec478c2
Reviewed-on: https://chromium-review.googlesource.com/c/1315993
Commit-Queue: Alexei Filippov <alph@chromium.org>
Reviewed-by: Pavel Feldman <pfeldman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#605938}

third_party/WebKit/LayoutTests/http/tests/devtools/tracing/timeline-misc/timeline-page-metrics-expected.txt

+Test timeline page metrics.
+
+Entries:
+101.2 NaN FCP
+101.3 NaN FMP
+
+Markers:
+101.2 1.2000000000000028 First Contentful Paint
+101.3 1.2999999999999972 First Meaningful Paint
+

third_party/WebKit/LayoutTests/http/tests/devtools/tracing/timeline-misc/timeline-page-metrics.js

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult(`Test timeline page metrics.\n`);
+  Runtime.experiments.enableForTest('timelinePaintTimingMarkers');
+  await TestRunner.loadModule('performance_test_runner');
+  await TestRunner.showPanel('timeline');
+
+  const rawTraceEvents = [
+    {
+      'args': {'name': 'CrBrowserMain'},
+      'cat': '__metadata',
+      'name': 'process_name',
+      'ph': 'M',
+      'pid': 17800,
+      'tid': 123,
+      'ts': 0
+    },
+    {'args':{'name':'Renderer'},'cat':'__metadata','name':'process_name','ph':'M','pid':17850,'tid':230,'ts':0},
+    {'args':{'name':'Renderer'},'cat':'__metadata','name':'process_name','ph':'M','pid':17851,'tid':231,'ts':0},
+    {'args':{'name':'Renderer'},'cat':'__metadata','name':'process_name','ph':'M','pid':17852,'tid':232,'ts':0},
+    {'args':{'name':'CrRendererMain'},'cat':'__metadata','name':'thread_name','ph':'M','pid':17850,'tid':230,'ts':0},
+    {'args':{'name':'CrRendererMain'},'cat':'__metadata','name':'thread_name','ph':'M','pid':17851,'tid':231,'ts':0},
+    {'args':{'name':'CrRendererMain'},'cat':'__metadata','name':'thread_name','ph':'M','pid':17852,'tid':232,'ts':0},
+    {
+      'args': {
+        "data": {
+          "frameTreeNodeId":550,
+          "persistentIds":true,
+          "frames": [
+            { "frame":"853DD8D6CA3B85CA78375EF189B779F6", "url":"https://www.example.com/", "name":"main",
+              "processId":17850 },
+            { "frame":"9B72B5F1A83B2DE0F8843B3D22878B81", "url":"https://www.example1.com/frame1.html", "name":"frame1",
+              "processId":17851, "parent":"853DD8D6CA3B85CA78375EF189B779F6"},
+            { "frame":"5D83B01045AD652BE04EA9A444221149", "url":"https://www.example2.com/frame2.html", "name":"frame2",
+              "processId":17852, "parent":"853DD8D6CA3B85CA78375EF189B779F6"}
+          ]
+        }
+      },
+      'cat': 'disabled-by-default-devtools.timeline',
+      'name': 'TracingStartedInBrowser',
+      'ph': 'I',
+      'pid': 17800,
+      'tid': 123,
+      'ts': 100000,
+      'tts': 606543
+    },
+
+    {"pid":17850,"tid":775,"ts":100500,"ph":"I","cat":"devtools.timeline","name":"FrameStartedLoading","args":{"frame":"853DD8D6CA3B85CA78375EF189B779F6"},"tts":606660},
+    {"pid":17850,"tid":775,"ts":101000,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstPaint","args":{"frame":"853DD8D6CA3B85CA78375EF189B779F6","data":{}},"tts":606700},
+    {"pid":17850,"tid":775,"ts":101200,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstContentfulPaint","args":{"frame":"853DD8D6CA3B85CA78375EF189B779F6","data":{}},"tts":606750},
+    {"pid":17850,"tid":775,"ts":101300,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstMeaningfulPaintCandidate","args":{"frame":"853DD8D6CA3B85CA78375EF189B779F6","data":{}},"tts":606800},
+    {"pid":17850,"tid":775,"ts":101300,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstMeaningfulPaint","args":{"frame":"853DD8D6CA3B85CA78375EF189B779F6","data":{}},"tts":606800},
+
+    {"pid":17851,"tid":775,"ts":100990,"ph":"I","cat":"devtools.timeline","name":"FrameStartedLoading","args":{"frame":"9B72B5F1A83B2DE0F8843B3D22878B81"},"tts":606660},
+    {"pid":17851,"tid":775,"ts":101100,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstPaint","args":{"frame":"9B72B5F1A83B2DE0F8843B3D22878B81","data":{}},"tts":606700},
+    {"pid":17851,"tid":775,"ts":101210,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstContentfulPaint","args":{"frame":"9B72B5F1A83B2DE0F8843B3D22878B81","data":{}},"tts":606750},
+    {"pid":17851,"tid":775,"ts":101300,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstMeaningfulPaintCandidate","args":{"frame":"9B72B5F1A83B2DE0F8843B3D22878B81","data":{}},"tts":606800},
+    {"pid":17851,"tid":775,"ts":101310,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstMeaningfulPaint","args":{"frame":"9B72B5F1A83B2DE0F8843B3D22878B81","data":{}},"tts":606800},
+
+    {"pid":17852,"tid":775,"ts":100880,"ph":"I","cat":"devtools.timeline","name":"FrameStartedLoading","args":{"frame":"5D83B01045AD652BE04EA9A444221149"},"tts":606660},
+    {"pid":17852,"tid":775,"ts":101200,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstPaint","args":{"frame":"5D83B01045AD652BE04EA9A444221149","data":{}},"tts":606700},
+    {"pid":17852,"tid":775,"ts":101300,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstContentfulPaint","args":{"frame":"5D83B01045AD652BE04EA9A444221149","data":{}},"tts":606750},
+    {"pid":17852,"tid":775,"ts":101400,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstMeaningfulPaintCandidate","args":{"frame":"5D83B01045AD652BE04EA9A444221149","data":{}},"tts":606800},
+    {"pid":17852,"tid":775,"ts":101500,"ph":"R","cat":"loading,rail,devtools.timeline","name":"firstMeaningfulPaint","args":{"frame":"5D83B01045AD652BE04EA9A444221149","data":{}},"tts":606800}
+  ];
+
+  const timeline = UI.panels.timeline;
+  timeline._setModel(PerformanceTestRunner.createPerformanceModelWithEvents(rawTraceEvents));
+  const flamechart = timeline._flameChart._mainFlameChart;
+
+  TestRunner.addResult(`Entries:`);
+  const data = flamechart._timelineData();
+  for (let i = 0; i < data.entryStartTimes.length; ++i) {
+    TestRunner.addResult(
+        `${data.entryStartTimes[i]} ${data.entryTotalTimes[i]} ${flamechart._dataProvider.entryTitle(i)}`);
+  }
+
+  TestRunner.addResult(`\nMarkers:`);
+  for (const marker of data.markers)
+    TestRunner.addResult(`${marker._startTime} ${marker._startOffset} ${marker._style.title}`);
+
+  TestRunner.completeTest();
+
+})();

third_party/WebKit/LayoutTests/http/tests/devtools/tracing/timeline-time/timeline-usertiming.js

@@ -103,13 +103,11 @@
 
   function dumpUserTimings() {
     var model = PerformanceTestRunner.timelineModel();
-    var asyncEvents;
     for (const track of model.tracks()) {
-      if (track.type === TimelineModel.TimelineModel.TrackType.Timings) {
-        for (const event of track.asyncEvents) {
-          if (event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming))
-            TestRunner.addResult(event.name);
-        }
+      if (track.type !== TimelineModel.TimelineModel.TrackType.Timings) continue;
+      for (const event of track.asyncEvents) {
+        if (event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming))
+          TestRunner.addResult(event.name);
       }
     }
   }

third_party/blink/renderer/devtools/front_end/timeline/TimelineFlameChartDataProvider.js

@@ -116,7 +116,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
         return event.name + ':' + event.args['step'];
       if (event._blackboxRoot)
         return Common.UIString('Blackboxed');
-      if (TimelineModel.TimelineModel.isMarkerEvent(event))
+      if (this._performanceModel.timelineModel().isMarkerEvent(event))
         return Timeline.TimelineUIUtils.markerShortTitle(event);
       const name = Timeline.TimelineUIUtils.eventStyle(event).title;
       const detailsText =
@@ -409,7 +409,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
     const markerEventsFilter = Timeline.TimelineUIUtils.paintEventsFilter();
     for (let i = 0; i < events.length; ++i) {
       const e = events[i];
-      if (!isExtension && TimelineModel.TimelineModel.isMarkerEvent(e) && markerEventsFilter.accept(e)) {
+      if (!isExtension && this._performanceModel.timelineModel().isMarkerEvent(e) && markerEventsFilter.accept(e)) {
         this._markers.push(new Timeline.TimelineFlameChartMarker(
             e.startTime, e.startTime - this._model.minimumRecordTime(),
             Timeline.TimelineUIUtils.markerStyleForEvent(e)));
@@ -443,7 +443,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
       const index = this._appendEvent(e, level);
       if (openEvents.length)
         this._entryParent[index] = openEvents.peekLast();
-      if (!isExtension && TimelineModel.TimelineModel.isMarkerEvent(e))
+      if (!isExtension && this._performanceModel.timelineModel().isMarkerEvent(e))
         this._timelineData.entryTotalTimes[this._entryData.length] = undefined;
 
       maxStackDepth = Math.max(maxStackDepth, openEvents.length + 1);
@@ -537,7 +537,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
     const metricEvents = [];
     for (const track of this._model.tracks()) {
       for (const event of track.events) {
-        if (!TimelineModel.TimelineModel.isMarkerEvent(event) || !metricsEventFilter.accept(event))
+        if (!this._performanceModel.timelineModel().isMarkerEvent(event) || !metricsEventFilter.accept(event))
           continue;
         metricEvents.push(event);
       }
@@ -616,7 +616,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
                 '%s (self %s)', Number.millisToString(totalTime, true), Number.millisToString(selfTime, true)) :
             Number.millisToString(totalTime, true);
       }
-      if (TimelineModel.TimelineModel.isMarkerEvent(event))
+      if (this._performanceModel.timelineModel().isMarkerEvent(event))
         title = Timeline.TimelineUIUtils.eventTitle(event);
       else
         title = this.entryTitle(entryIndex);
@@ -668,7 +668,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
       const event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
       if (this._model.isGenericTrace())
         return this._genericTraceEventColor(event);
-      if (TimelineModel.TimelineModel.isMarkerEvent(event))
+      if (this._performanceModel.timelineModel().isMarkerEvent(event))
         return Timeline.TimelineUIUtils.markerStyleForEvent(event).color;
       if (!SDK.TracingModel.isAsyncPhase(event.phase))
         return this._colorForEvent(event);

third_party/blink/renderer/devtools/front_end/timeline_model/TimelineModel.js

@@ -88,14 +88,15 @@ TimelineModel.TimelineModel = class {
    * @param {!SDK.TracingModel.Event} event
    * @return {boolean}
    */
-  static isMarkerEvent(event) {
+  isMarkerEvent(event) {
     const recordTypes = TimelineModel.TimelineModel.RecordType;
     switch (event.name) {
       case recordTypes.TimeStamp:
+        return true;
       case recordTypes.MarkFirstPaint:
       case recordTypes.MarkFCP:
       case recordTypes.MarkFMP:
-        return true;
+        return event.args.frame === this._mainFrame.frameId;
       case recordTypes.MarkDOMContent:
       case recordTypes.MarkLoad:
         return !!event.args['data']['isMainFrame'];
@@ -539,7 +540,7 @@ TimelineModel.TimelineModel = class {
             track.tasks.push(event);
           eventStack.push(event);
         }
-        if (TimelineModel.TimelineModel.isMarkerEvent(event))
+        if (this.isMarkerEvent(event))
           this._timeMarkerEvents.push(event);
 
         track.events.push(event);
@@ -684,7 +685,7 @@ TimelineModel.TimelineModel = class {
     timelineData.frameId = pageFrameId || (this._mainFrame && this._mainFrame.frameId) || '';
     this._asyncEventTracker.processEvent(event);
 
-    if (TimelineModel.TimelineModel.isMarkerEvent(event))
+    if (this.isMarkerEvent(event))
       this._ensureNamedTrack(TimelineModel.TimelineModel.TrackType.Timings);
 
     switch (event.name) {