[Webkit-unassigned] [Bug 225972] New: Web Inspector: Styles panel slow to render when inspecting node with many inherited CSS variables
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Wed May 19 10:03:20 PDT 2021
https://bugs.webkit.org/show_bug.cgi?id=225972
Bug ID: 225972
Summary: Web Inspector: Styles panel slow to render when
inspecting node with many inherited CSS variables
Product: WebKit
Version: WebKit Nightly Build
Hardware: All
OS: All
Status: NEW
Severity: Normal
Priority: P2
Component: Web Inspector
Assignee: webkit-unassigned at lists.webkit.org
Reporter: rcaliman at apple.com
CC: inspector-bugzilla-changes at group.apple.com
Steps to reproduce:
- Go to https://www.youtube.com
- Open Web Inspector > Elements Tab
- Inspect any node
Observe the substantial delay between selecting the node and the Styles details sidebar updating.
Scroll the list of matched styles and notice a large number of CSS variables inherited from ancestors, most of which are not used on the selected node.
Sites like these whose design system places most CSS variables on the root node causes all nodes on the page to inherit them. Inspecting any node forces Web Inspector to do a lot of work to render declarations of inherited CSS variables which do not participate in the styles of the selected node. This adds visual noise and impacts performance by doing a lot of unnecessary work, like trying to annotate variable values with color swatches.
Unused inherited variables should not be shown in the Styles details sidebar to reduce visual clutter and focus the user's attention when debugging styles.
The list of all matching CSS variables can always be found in the Computed details sidebar, in the Variables section.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210519/32d6848b/attachment.htm>
More information about the webkit-unassigned
mailing list