Branch: refs/heads/main
Home: https://github.com/WebKit/WebKit
Commit: 4f88ca91386d7fc52b79472a0f22fd6823ba41fe
https://github.com/WebKit/WebKit/commit/4f88ca91386d7fc52b79472a0f22fd6823ba41fe
Author: Devin Rousso <[email protected]>
Date: 2025-03-31 (Mon, 31 Mar 2025)
Changed paths:
A LayoutTests/inspector/css/nodeLayoutFlagsChanged-SlotFilled-expected.txt
A LayoutTests/inspector/css/nodeLayoutFlagsChanged-SlotFilled.html
A LayoutTests/inspector/dom/requestAssignedNodes-expected.txt
A LayoutTests/inspector/dom/requestAssignedNodes.html
M Source/JavaScriptCore/inspector/protocol/CSS.json
M Source/JavaScriptCore/inspector/protocol/DOM.json
M Source/WebCore/html/HTMLSlotElement.cpp
M Source/WebCore/inspector/InspectorInstrumentation.cpp
M Source/WebCore/inspector/InspectorInstrumentation.h
M Source/WebCore/inspector/agents/InspectorCSSAgent.cpp
M Source/WebCore/inspector/agents/InspectorCSSAgent.h
M Source/WebCore/inspector/agents/InspectorDOMAgent.cpp
M Source/WebCore/inspector/agents/InspectorDOMAgent.h
M Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
M Source/WebInspectorUI/UserInterface/Models/DOMNode.js
M Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js
M Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css
M Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
Log Message:
-----------
Web Inspector: Elements: show a badge for `<slot>` to quickly jump to the
assigned node
https://bugs.webkit.org/show_bug.cgi?id=290679
Reviewed by BJ Burg.
It's not always obvious where the assigned node is for a `<slot>` (assuming
it's even nearby in the DOM).
Having a way to quickly see (and jump to) any assigned DOM nodes will help
developers more easily understand the content they're debugging.
* Source/JavaScriptCore/inspector/protocol/CSS.json:
* Source/WebCore/inspector/agents/InspectorCSSAgent.h:
* Source/WebCore/inspector/agents/InspectorCSSAgent.cpp:
(WebCore::isSlotElementWithAssignedNodes): Added.
(WebCore::InspectorCSSAgent::layoutFlagsForNode):
(WebCore::toProtocol):
(WebCore::InspectorCSSAgent::didChangeAssignedNodes): Added.
* Source/WebCore/inspector/InspectorInstrumentation.h:
(WebCore::InspectorInstrumentation::didChangeAssignedNodes): Added.
* Source/WebCore/inspector/InspectorInstrumentation.cpp:
(WebCore::InspectorInstrumentation::didChangeAssignedNodesImpl): Added.
* Source/WebCore/html/HTMLSlotElement.cpp:
(WebCore::HTMLSlotElement::enqueueSlotChangeEvent):
Introduce a new `LayoutFlag.SlotFilled` in order to (re)use the existing DOM
node badging system.
This has the added benefit of debouncing changes, which is ideal since the
frontend doesn't actually need the list of assigned nodes until the developer
clicks on the "Assigned" badge.
* Source/JavaScriptCore/inspector/protocol/DOM.json:
* Source/WebCore/inspector/agents/InspectorDOMAgent.h:
* Source/WebCore/inspector/agents/InspectorDOMAgent.cpp:
(WebCore::InspectorDOMAgent::requestAssignedNodes): Added.
* Source/WebInspectorUI/UserInterface/Models/DOMNode.js:
(WI.DOMNode.prototype.async requestAssignedNodes): Added.
Add a way for the frontend to request the list of assigned nodes for a given
`<slot>`
* Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.js:
(WI.DOMTreeContentView.prototype._populateConfigureDOMTreeBadgesNavigationItemContextMenu):
* Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js:
(WI.DOMTreeElement.prototype._createBadge):
(WI.DOMTreeElement.prototype._createBadges):
(WI.DOMTreeElement.prototype.async _handleSlotFilledBadgeClicked): Added.
(WI.DOMTreeElement.prototype.didDismissPopover):
* Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.css:
(.event-badge-popover-content, .slot-filled-badge-popover-content): Renamed
from `.event-badge-popover-content`.
(.slot-filled-badge-popover-content > table): Added.
(.slot-filled-badge-popover-content > table > tr + tr > td): Added.
(.slot-filled-badge-popover-content > table > tr > td:first-child): Added.
Show an "Assigned" badge for `<slot>` that have assigned nodes.
Clicking it will either select the (single) assigned DOM node or show a
`WI.Popover` containing a list of all assigned DOM nodes (if there's more than
one).
* Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js:
* LayoutTests/inspector/css/nodeLayoutFlagsChanged-SlotFilled.html: Added.
* LayoutTests/inspector/css/nodeLayoutFlagsChanged-SlotFilled-expected.txt:
Added.
* LayoutTests/inspector/dom/requestAssignedNodes.html: Added.
* LayoutTests/inspector/dom/requestAssignedNodes-expected.txt: Added.
Canonical link: https://commits.webkit.org/292996@main
To unsubscribe from these emails, change your notification settings at
https://github.com/WebKit/WebKit/settings/notifications
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
