[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