Commit 8aa9d3c3 authored by Patrick Hulce's avatar Patrick Hulce Committed by Commit Bot

DevTools: Add FCP to timeline markers

* Adds FirstContentfulPaint to timeline markers
* Adjusts colors of paint markers to different shades of green

BUG=749814

Change-Id: I4ccbcae4c6906d9fbacc8a81eb55b6059f55f472
Reviewed-on: https://chromium-review.googlesource.com/619500Reviewed-by: default avatarAndrey Kosyakov <caseq@chromium.org>
Reviewed-by: default avatarAlexei Filippov <alph@chromium.org>
Commit-Queue: Patrick Hulce <phulce@chromium.org>
Cr-Commit-Position: refs/heads/master@{#534802}
parent 4ac210b2
...@@ -115,10 +115,12 @@ Timeline.TimelineUIUtils = class { ...@@ -115,10 +115,12 @@ Timeline.TimelineUIUtils = class {
new Timeline.TimelineRecordStyle(Common.UIString('DOMContentLoaded event'), categories['scripting'], true); new Timeline.TimelineRecordStyle(Common.UIString('DOMContentLoaded event'), categories['scripting'], true);
eventStyles[recordTypes.MarkFirstPaint] = eventStyles[recordTypes.MarkFirstPaint] =
new Timeline.TimelineRecordStyle(Common.UIString('First paint'), categories['painting'], true); new Timeline.TimelineRecordStyle(Common.UIString('First paint'), categories['painting'], true);
eventStyles[recordTypes.MarkFCP] =
new Timeline.TimelineRecordStyle(Common.UIString('First contentful paint'), categories['rendering'], true);
eventStyles[recordTypes.MarkFMP] = eventStyles[recordTypes.MarkFMP] =
new Timeline.TimelineRecordStyle(Common.UIString('FMP'), categories['rendering'], true); new Timeline.TimelineRecordStyle(Common.UIString('First meaningful paint'), categories['rendering'], true);
eventStyles[recordTypes.MarkFMPCandidate] = eventStyles[recordTypes.MarkFMPCandidate] =
new Timeline.TimelineRecordStyle(Common.UIString('FMP candidate'), categories['rendering'], true); new Timeline.TimelineRecordStyle(Common.UIString('Meaningful paint candidate'), categories['rendering'], true);
eventStyles[recordTypes.TimeStamp] = eventStyles[recordTypes.TimeStamp] =
new Timeline.TimelineRecordStyle(Common.UIString('Timestamp'), categories['scripting']); new Timeline.TimelineRecordStyle(Common.UIString('Timestamp'), categories['scripting']);
eventStyles[recordTypes.ConsoleTime] = eventStyles[recordTypes.ConsoleTime] =
...@@ -1530,7 +1532,7 @@ Timeline.TimelineUIUtils = class { ...@@ -1530,7 +1532,7 @@ Timeline.TimelineUIUtils = class {
var recordTypes = TimelineModel.TimelineModel.RecordType; var recordTypes = TimelineModel.TimelineModel.RecordType;
return new TimelineModel.TimelineInvisibleEventsFilter( return new TimelineModel.TimelineInvisibleEventsFilter(
!Runtime.experiments.isEnabled('timelinePaintTimingMarkers') ? !Runtime.experiments.isEnabled('timelinePaintTimingMarkers') ?
[recordTypes.MarkFMP, recordTypes.MarkFMPCandidate] : [recordTypes.MarkFCP, recordTypes.MarkFMP, recordTypes.MarkFMPCandidate] :
[]); []);
} }
...@@ -1786,15 +1788,19 @@ Timeline.TimelineUIUtils = class { ...@@ -1786,15 +1788,19 @@ Timeline.TimelineUIUtils = class {
tall = true; tall = true;
break; break;
case recordTypes.MarkFirstPaint: case recordTypes.MarkFirstPaint:
color = 'green'; color = 'hsl(180, 45%, 79%)';
tall = true; tall = true;
break; break;
case recordTypes.MarkFMP: case recordTypes.MarkFCP:
color = 'orange'; color = 'hsl(160, 43%, 58%)';
tall = true; tall = true;
break; break;
case recordTypes.MarkFMPCandidate: case recordTypes.MarkFMPCandidate:
color = 'orange'; color = 'hsl(146, 57%, 40%)';
tall = true;
break;
case recordTypes.MarkFMP:
color = 'hsl(144, 100%, 21%)';
tall = true; tall = true;
break; break;
case recordTypes.TimeStamp: case recordTypes.TimeStamp:
......
...@@ -106,6 +106,7 @@ TimelineModel.TimelineModel = class { ...@@ -106,6 +106,7 @@ TimelineModel.TimelineModel = class {
switch (event.name) { switch (event.name) {
case recordTypes.TimeStamp: case recordTypes.TimeStamp:
case recordTypes.MarkFirstPaint: case recordTypes.MarkFirstPaint:
case recordTypes.MarkFCP:
case recordTypes.MarkFMP: case recordTypes.MarkFMP:
case recordTypes.MarkFMPCandidate: case recordTypes.MarkFMPCandidate:
return true; return true;
...@@ -1102,6 +1103,7 @@ TimelineModel.TimelineModel.RecordType = { ...@@ -1102,6 +1103,7 @@ TimelineModel.TimelineModel.RecordType = {
MarkLoad: 'MarkLoad', MarkLoad: 'MarkLoad',
MarkDOMContent: 'MarkDOMContent', MarkDOMContent: 'MarkDOMContent',
MarkFirstPaint: 'MarkFirstPaint', MarkFirstPaint: 'MarkFirstPaint',
MarkFCP: 'firstContentfulPaint',
MarkFMP: 'firstMeaningfulPaint', MarkFMP: 'firstMeaningfulPaint',
MarkFMPCandidate: 'firstMeaningfulPaintCandidate', MarkFMPCandidate: 'firstMeaningfulPaintCandidate',
......
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