Add DAMP test for Inspector Rules view with many CSS variables
Categories
(DevTools :: Inspector: Rules, enhancement)
Tracking
(firefox78 fixed)
| Tracking | Status | |
|---|---|---|
| firefox78 | --- | fixed |
People
(Reporter: rcaliman, Assigned: rcaliman)
References
(Blocks 1 open bug)
Details
Attachments
(1 file)
Monitor the rendering performance of the Rules view when selecting a node for which many CSS variables apply.
|
Assignee | |
Updated•5 years ago
|
|
|
Assignee | |
Comment 1•5 years ago
|
||
Inspecting a node with many CSS variables makes the Rules view render slowly. A patch to improve performance is in development in D73062.
This patch adds a new subtest, custom.inspector.manycssvariables.selectnode, to the existing custom Inspector DAMP test to measure the rendering time for a node with 300 CSS variables all of them used (600 declarations in total).
It might seem extreme. In May 2020 youtube.com has 1,375 CSS variables applicable to the <html> element. They all get inherited by all CSS rules for most nodes on the page. This slows down the action of inspecting CSS for any node. The largest CSS rule from youtube's stylesheets has 287 declarations of CSS variables. In the age of automatically-generated stylesheets for design systems this scenario becomes more common.
|
||
Comment 3•5 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
|
||
Comment 4•5 years ago
|
||
The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.
|
||
Comment 5•5 years ago
|
||
| bugherder | ||
Description
•