Skip to content

GitLab

T
tangled
Commit 1436fe47 authored by caseq@chromium.org's avatar caseq@chromium.org
Browse files
Options

Timeline: bring back FirstPaint marker and remove brown ticks near frame markers 

- implement synthetic FirstPaint markers on front-end (they used to be generated
    on the back-end with old Timeline instrumentation which is an ex-parrot)
- remove brown marks near the frame markers (regressed at r177959)

BUG=

Review URL: https://codereview.chromium.org/732683002

git-svn-id: svn://svn.chromium.org/blink/trunk@185392 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 8c58c6c8
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 3 deletions
third_party/WebKit/LayoutTests/inspector/tracing/timeline-load-event-expected.txt
View file @ 1436fe47
...@@ -27,4 +27,13 @@ MarkLoad Properties: ...@@ -27,4 +27,13 @@ MarkLoad Properties:
thread : <string> thread : <string>
type : "MarkLoad" type : "MarkLoad"
} }
MarkFirstPaint Properties:
{
data : {
}
endTime : <number>
startTime : <number>
thread : <string>
type : "MarkFirstPaint"
}
third_party/WebKit/LayoutTests/inspector/tracing/timeline-load-event.html
View file @ 1436fe47
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
<script src="../../http/tests/inspector/inspector-test.js"></script> <script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/timeline-test.js"></script> <script src="../../http/tests/inspector/timeline-test.js"></script>
<script> <script>
function display(callback)
{
requestAnimationFrame(testRunner.displayAsyncThen.bind(testRunner, callback));
}
function test() function test()
{ {
...@@ -10,7 +14,9 @@ function test() ...@@ -10,7 +14,9 @@ function test()
function pageReloaded() function pageReloaded()
{ {
InspectorTest.stopTimeline(finish); InspectorTest.invokePageFunctionAsync("display", function() {
InspectorTest.stopTimeline(finish);
});
} }
function finish() function finish()
...@@ -18,9 +24,11 @@ function test() ...@@ -18,9 +24,11 @@ function test()
InspectorTest.addResult("Model records:"); InspectorTest.addResult("Model records:");
InspectorTest.printTimelineRecords("MarkDOMContent"); InspectorTest.printTimelineRecords("MarkDOMContent");
InspectorTest.printTimelineRecords("MarkLoad"); InspectorTest.printTimelineRecords("MarkLoad");
InspectorTest.printTimelineRecords("MarkFirstPaint");
InspectorTest.addResult("Timestamp records:"); InspectorTest.addResult("Timestamp records:");
InspectorTest.printTimestampRecords("MarkDOMContent"); InspectorTest.printTimestampRecords("MarkDOMContent");
InspectorTest.printTimestampRecords("MarkLoad"); InspectorTest.printTimestampRecords("MarkLoad");
InspectorTest.printTimestampRecords("MarkFirstPaint");
InspectorTest.completeTest(); InspectorTest.completeTest();
} }
} }
...@@ -28,7 +36,7 @@ function test() ...@@ -28,7 +36,7 @@ function test()
</script> </script>
</head> </head>
<body onload="runTest()"> <body onload="runTestAfterDisplay()">
<p> <p>
Tests the load event. Tests the load event.
</p> </p>
......
third_party/WebKit/Source/devtools/front_end/timeline/TimelineModel.js
View file @ 1436fe47
...@@ -755,6 +755,8 @@ WebInspector.TimelineModel.prototype = { ...@@ -755,6 +755,8 @@ WebInspector.TimelineModel.prototype = {
this._lastRecalculateStylesEvent = null; this._lastRecalculateStylesEvent = null;
this._currentScriptEvent = null; this._currentScriptEvent = null;
this._eventStack = []; this._eventStack = [];
this._layerTreeActivatedAfterLoad = false;
this._expectFirstPaint = false;
}, },
/** /**
...@@ -765,6 +767,7 @@ WebInspector.TimelineModel.prototype = { ...@@ -765,6 +767,7 @@ WebInspector.TimelineModel.prototype = {
*/ */
_processThreadEvents: function(startTime, endTime, mainThread, thread) _processThreadEvents: function(startTime, endTime, mainThread, thread)
{ {
var recordTypes = WebInspector.TimelineModel.RecordType;
var events = thread.events(); var events = thread.events();
var length = events.length; var length = events.length;
var i = events.lowerBound(startTime, function (time, event) { return time - event.startTime }); var i = events.lowerBound(startTime, function (time, event) { return time - event.startTime });
...@@ -787,6 +790,10 @@ WebInspector.TimelineModel.prototype = { ...@@ -787,6 +790,10 @@ WebInspector.TimelineModel.prototype = {
if (endTime && event.startTime >= endTime) if (endTime && event.startTime >= endTime)
break; break;
this._processEvent(event); this._processEvent(event);
if (this._expectFirstPaint && event.name === recordTypes.DrawFrame && this._layerTreeActivatedAfterLoad) {
threadEvents.push(new WebInspector.TracingModel.Event(event.category, recordTypes.MarkFirstPaint, WebInspector.TracingModel.Phase.Instant, event.startTime, event.thread));
this._expectFirstPaint = false;
}
threadEvents.push(event); threadEvents.push(event);
this._inspectedTargetEvents.push(event); this._inspectedTargetEvents.push(event);
} }
...@@ -813,7 +820,6 @@ WebInspector.TimelineModel.prototype = { ...@@ -813,7 +820,6 @@ WebInspector.TimelineModel.prototype = {
_processEvent: function(event) _processEvent: function(event)
{ {
var recordTypes = WebInspector.TimelineModel.RecordType; var recordTypes = WebInspector.TimelineModel.RecordType;
var eventStack = this._eventStack; var eventStack = this._eventStack;
while (eventStack.length && eventStack.peekLast().endTime < event.startTime) while (eventStack.length && eventStack.peekLast().endTime < event.startTime)
eventStack.pop(); eventStack.pop();
...@@ -983,6 +989,17 @@ WebInspector.TimelineModel.prototype = { ...@@ -983,6 +989,17 @@ WebInspector.TimelineModel.prototype = {
event.backendNodeId = paintImageEvent.backendNodeId; event.backendNodeId = paintImageEvent.backendNodeId;
event.imageURL = paintImageEvent.imageURL; event.imageURL = paintImageEvent.imageURL;
break; break;
case recordTypes.MarkDOMContent:
if (!event.args["data"]["isMainFrame"])
break;
this._expectFirstPaint = true;
this._layerTreeActivatedAfterLoad = false;
break;
case recordTypes.ActivateLayerTree:
this._layerTreeActivatedAfterLoad = true;
break;
} }
}, },
......
third_party/WebKit/Source/devtools/front_end/timeline/timelinePanel.css
View file @ 1436fe47
...@@ -473,6 +473,10 @@ ...@@ -473,6 +473,10 @@
margin: 0 1px; margin: 0 1px;
} }
.timeline .resources-event-divider.timeline-frame-divider::before {
display: none;
}
.timeline .resources-event-divider.resources-red-divider::before { .timeline .resources-event-divider.resources-red-divider::before {
background-color: rgb(255, 0, 0); background-color: rgb(255, 0, 0);
} }
......
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