1827138 - Hide CSS variables

Status: RESOLVED DUPLICATE of bug 1719461

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Maciej Jaros]

Attachment: mozilla--var.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0

Steps to reproduce:

Open some recently made/updated website (with CSS variables) e.g. https://www.mozilla.org/

Open DevTools.

Choose (inspect) and element.

Try to browse through rules.

Actual results:

Browsing through rules is hard as you have to scroll through variables. Sometimes a lot of variables.

Expected results:

A filter for CSS variables would be useful. This option should hide variable definitions and then hide empty rules as needed (red on the attached image).

Comment 1

[Julian Descottes [:jdescottes]]

Thanks for the suggestion! It could be interesting to have a way to collapse the variables by default. It could even improve the performance for the rule view on websites which have a lot of them.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Safari DevTools

From https://bugzilla.mozilla.org/show_bug.cgi?id=1719461#c0

Safari recently implemented a change where unused CSS variable are not displayed, but can be by clicking on a button (see screenshot in https://twitter.com/razvancaliman/status/1412733122291154947)
This is something quite interesting as it would reduce clutter in the inspector and might also avoid performance issues we're seeing in some pages which are heavily using CSS properties.

see attached screenshot

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Let's close in favor of Bug 1719461