Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 6e6554f10c46eaa882c721c1c22cbdbfb1c72d17
https://github.com/WebKit/WebKit/commit/6e6554f10c46eaa882c721c1c22cbdbfb1c72d17
Author: Simon Fraser <[email protected]>
Date: 2025-10-28 (Tue, 28 Oct 2025)
Changed paths:
M Source/JavaScriptCore/inspector/protocol/Timeline.json
M Source/WebCore/inspector/InspectorInstrumentation.cpp
M Source/WebCore/inspector/InspectorInstrumentation.h
M Source/WebCore/inspector/TimelineRecordFactory.cpp
M Source/WebCore/inspector/TimelineRecordFactory.h
M Source/WebCore/inspector/agents/InspectorTimelineAgent.cpp
M Source/WebCore/inspector/agents/InspectorTimelineAgent.h
M Source/WebCore/page/Performance.cpp
M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
M Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js
M Source/WebInspectorUI/UserInterface/Images/TypeIcons.svg
M Source/WebInspectorUI/UserInterface/Models/LayoutTimelineRecord.js
M Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js
M Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.js
M Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js
M Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css
M Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css
M Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js
M Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js
Log Message:
-----------
Show Largest Contentful Paints in the timeline and event list
https://bugs.webkit.org/show_bug.cgi?id=301450
rdar://160480088
Reviewed by Devin Rousso.
Add support for displaying "First Contentful Paint" and "Largest Contentful
Paint" in the
web inspector timeline.
Add `InspectorInstrumentation::didEnqueue...()` which is called when we enqueue
one of
these paint entries. The LCP entry passes the element and an area, so inspector
can show
these.
`InspectorTimelineAgent::didEnqueue...()` then creates timeline entries with
the right
type, adding the metadata as a appropriate.
To `inspector/protocol/Timeline.json` we add two new event types. When
`TimelineManager`
encounters one of these, it creates a `WI.LayoutTimelineRecord` for FCP or LCP.
The latter
takes the extra metadata.
`LayoutTimelineRecord` gains the ability to store a `domNode` and `area`. Area
cannot be
derived from a quad here, because the LCP area results in math on a scalar
value[1], so we
have to store area separately.
Enhance `LayoutTimelineDataGridNode` to be able to create a "go to arrow" which
provides a
button to jump to the element when hovered.
I chose a teal color with a `P` for the performance entry icons, and used teal
as the
timeline pip color.
[1] https://w3c.github.io/largest-contentful-paint/#sec-effective-visual-size
* Source/JavaScriptCore/inspector/protocol/Timeline.json:
* Source/WebCore/inspector/InspectorInstrumentation.cpp:
(WebCore::InspectorInstrumentation::didEnqueueFirstContentfulPaintImpl):
(WebCore::InspectorInstrumentation::didEnqueueLargestContentfulPaintImpl):
* Source/WebCore/inspector/InspectorInstrumentation.h:
(WebCore::InspectorInstrumentation::didEnqueueFirstContentfulPaint):
(WebCore::InspectorInstrumentation::didEnqueueLargestContentfulPaint):
* Source/WebCore/inspector/TimelineRecordFactory.cpp:
(WebCore::TimelineRecordFactory::createLargestContentfulPaintData):
* Source/WebCore/inspector/TimelineRecordFactory.h:
* Source/WebCore/inspector/agents/InspectorTimelineAgent.cpp:
(WebCore::InspectorTimelineAgent::didEnqueueFirstContentfulPaint):
(WebCore::InspectorTimelineAgent::didEnqueueLargestContentfulPaint):
(WebCore::toProtocol):
* Source/WebCore/inspector/agents/InspectorTimelineAgent.h:
* Source/WebCore/page/Performance.cpp:
(WebCore::Performance::reportFirstContentfulPaint):
(WebCore::Performance::enqueueLargestContentfulPaint):
* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
* Source/WebInspectorUI/UserInterface/Controllers/TimelineManager.js:
(WI.TimelineManager.prototype._processRecord):
* Source/WebInspectorUI/UserInterface/Images/TypeIcons.svg:
* Source/WebInspectorUI/UserInterface/Models/LayoutTimelineRecord.js:
(WI.LayoutTimelineRecord.displayNameForEventType):
(WI.LayoutTimelineRecord.async fromJSON):
(WI.LayoutTimelineRecord.prototype.get area):
(WI.LayoutTimelineRecord.prototype.get domNode):
* Source/WebInspectorUI/UserInterface/Views/CPUTimelineView.js:
(WI.CPUTimelineView.prototype._attemptSelectIndicatatorTimelineRecord):
* Source/WebInspectorUI/UserInterface/Views/LayoutTimelineDataGridNode.js:
(WI.LayoutTimelineDataGridNode.prototype.get data):
(WI.LayoutTimelineDataGridNode.prototype.createCellContent):
(WI.LayoutTimelineDataGridNode):
* Source/WebInspectorUI/UserInterface/Views/LayoutTimelineView.js:
(WI.LayoutTimelineView.prototype._showHighlightForRecord):
* Source/WebInspectorUI/UserInterface/Views/TimelineIcons.css:
(.performance-entry .icon):
(@media (prefers-color-scheme: dark) .performance-entry .icon):
* Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css:
(.timeline-record-bar.timeline-record-type-layout:is(.first-contentful-paint,
.largest-contentful-paint) > .segment):
* Source/WebInspectorUI/UserInterface/Views/TimelineRecordTreeElement.js:
* Source/WebInspectorUI/UserInterface/Views/TimelineTabContentView.js:
(WI.TimelineTabContentView.iconClassNameForRecord):
Canonical link: https://commits.webkit.org/302248@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
