Commit a790e866 authored by Alexei Filippov's avatar Alexei Filippov Committed by Commit Bot

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: default avatarPavel Feldman <pfeldman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#605938}
parent 91ac7d12
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
// 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();
})();
...@@ -103,13 +103,11 @@ ...@@ -103,13 +103,11 @@
function dumpUserTimings() { function dumpUserTimings() {
var model = PerformanceTestRunner.timelineModel(); var model = PerformanceTestRunner.timelineModel();
var asyncEvents;
for (const track of model.tracks()) { for (const track of model.tracks()) {
if (track.type === TimelineModel.TimelineModel.TrackType.Timings) { if (track.type !== TimelineModel.TimelineModel.TrackType.Timings) continue;
for (const event of track.asyncEvents) { for (const event of track.asyncEvents) {
if (event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming)) if (event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming))
TestRunner.addResult(event.name); TestRunner.addResult(event.name);
}
} }
} }
} }
......
...@@ -116,7 +116,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object { ...@@ -116,7 +116,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
return event.name + ':' + event.args['step']; return event.name + ':' + event.args['step'];
if (event._blackboxRoot) if (event._blackboxRoot)
return Common.UIString('Blackboxed'); return Common.UIString('Blackboxed');
if (TimelineModel.TimelineModel.isMarkerEvent(event)) if (this._performanceModel.timelineModel().isMarkerEvent(event))
return Timeline.TimelineUIUtils.markerShortTitle(event); return Timeline.TimelineUIUtils.markerShortTitle(event);
const name = Timeline.TimelineUIUtils.eventStyle(event).title; const name = Timeline.TimelineUIUtils.eventStyle(event).title;
const detailsText = const detailsText =
...@@ -409,7 +409,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object { ...@@ -409,7 +409,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
const markerEventsFilter = Timeline.TimelineUIUtils.paintEventsFilter(); const markerEventsFilter = Timeline.TimelineUIUtils.paintEventsFilter();
for (let i = 0; i < events.length; ++i) { for (let i = 0; i < events.length; ++i) {
const e = events[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( this._markers.push(new Timeline.TimelineFlameChartMarker(
e.startTime, e.startTime - this._model.minimumRecordTime(), e.startTime, e.startTime - this._model.minimumRecordTime(),
Timeline.TimelineUIUtils.markerStyleForEvent(e))); Timeline.TimelineUIUtils.markerStyleForEvent(e)));
...@@ -443,7 +443,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object { ...@@ -443,7 +443,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
const index = this._appendEvent(e, level); const index = this._appendEvent(e, level);
if (openEvents.length) if (openEvents.length)
this._entryParent[index] = openEvents.peekLast(); 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; this._timelineData.entryTotalTimes[this._entryData.length] = undefined;
maxStackDepth = Math.max(maxStackDepth, openEvents.length + 1); maxStackDepth = Math.max(maxStackDepth, openEvents.length + 1);
...@@ -537,7 +537,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object { ...@@ -537,7 +537,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
const metricEvents = []; const metricEvents = [];
for (const track of this._model.tracks()) { for (const track of this._model.tracks()) {
for (const event of track.events) { for (const event of track.events) {
if (!TimelineModel.TimelineModel.isMarkerEvent(event) || !metricsEventFilter.accept(event)) if (!this._performanceModel.timelineModel().isMarkerEvent(event) || !metricsEventFilter.accept(event))
continue; continue;
metricEvents.push(event); metricEvents.push(event);
} }
...@@ -616,7 +616,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object { ...@@ -616,7 +616,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
'%s (self %s)', Number.millisToString(totalTime, true), Number.millisToString(selfTime, true)) : '%s (self %s)', Number.millisToString(totalTime, true), Number.millisToString(selfTime, true)) :
Number.millisToString(totalTime, true); Number.millisToString(totalTime, true);
} }
if (TimelineModel.TimelineModel.isMarkerEvent(event)) if (this._performanceModel.timelineModel().isMarkerEvent(event))
title = Timeline.TimelineUIUtils.eventTitle(event); title = Timeline.TimelineUIUtils.eventTitle(event);
else else
title = this.entryTitle(entryIndex); title = this.entryTitle(entryIndex);
...@@ -668,7 +668,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object { ...@@ -668,7 +668,7 @@ Timeline.TimelineFlameChartDataProvider = class extends Common.Object {
const event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]); const event = /** @type {!SDK.TracingModel.Event} */ (this._entryData[entryIndex]);
if (this._model.isGenericTrace()) if (this._model.isGenericTrace())
return this._genericTraceEventColor(event); return this._genericTraceEventColor(event);
if (TimelineModel.TimelineModel.isMarkerEvent(event)) if (this._performanceModel.timelineModel().isMarkerEvent(event))
return Timeline.TimelineUIUtils.markerStyleForEvent(event).color; return Timeline.TimelineUIUtils.markerStyleForEvent(event).color;
if (!SDK.TracingModel.isAsyncPhase(event.phase)) if (!SDK.TracingModel.isAsyncPhase(event.phase))
return this._colorForEvent(event); return this._colorForEvent(event);
......
...@@ -88,14 +88,15 @@ TimelineModel.TimelineModel = class { ...@@ -88,14 +88,15 @@ TimelineModel.TimelineModel = class {
* @param {!SDK.TracingModel.Event} event * @param {!SDK.TracingModel.Event} event
* @return {boolean} * @return {boolean}
*/ */
static isMarkerEvent(event) { isMarkerEvent(event) {
const recordTypes = TimelineModel.TimelineModel.RecordType; const recordTypes = TimelineModel.TimelineModel.RecordType;
switch (event.name) { switch (event.name) {
case recordTypes.TimeStamp: case recordTypes.TimeStamp:
return true;
case recordTypes.MarkFirstPaint: case recordTypes.MarkFirstPaint:
case recordTypes.MarkFCP: case recordTypes.MarkFCP:
case recordTypes.MarkFMP: case recordTypes.MarkFMP:
return true; return event.args.frame === this._mainFrame.frameId;
case recordTypes.MarkDOMContent: case recordTypes.MarkDOMContent:
case recordTypes.MarkLoad: case recordTypes.MarkLoad:
return !!event.args['data']['isMainFrame']; return !!event.args['data']['isMainFrame'];
...@@ -539,7 +540,7 @@ TimelineModel.TimelineModel = class { ...@@ -539,7 +540,7 @@ TimelineModel.TimelineModel = class {
track.tasks.push(event); track.tasks.push(event);
eventStack.push(event); eventStack.push(event);
} }
if (TimelineModel.TimelineModel.isMarkerEvent(event)) if (this.isMarkerEvent(event))
this._timeMarkerEvents.push(event); this._timeMarkerEvents.push(event);
track.events.push(event); track.events.push(event);
...@@ -684,7 +685,7 @@ TimelineModel.TimelineModel = class { ...@@ -684,7 +685,7 @@ TimelineModel.TimelineModel = class {
timelineData.frameId = pageFrameId || (this._mainFrame && this._mainFrame.frameId) || ''; timelineData.frameId = pageFrameId || (this._mainFrame && this._mainFrame.frameId) || '';
this._asyncEventTracker.processEvent(event); this._asyncEventTracker.processEvent(event);
if (TimelineModel.TimelineModel.isMarkerEvent(event)) if (this.isMarkerEvent(event))
this._ensureNamedTrack(TimelineModel.TimelineModel.TrackType.Timings); this._ensureNamedTrack(TimelineModel.TimelineModel.TrackType.Timings);
switch (event.name) { switch (event.name) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment