Display the computed value of custom properties on hover, where they are defined
Categories
(DevTools :: Inspector: Rules, enhancement, P3)
Tracking
(firefox131 fixed)
| Tracking | Status | |
|---|---|---|
| firefox131 | --- | fixed |
People
(Reporter: pbro, Assigned: nchevobbe)
References
(Blocks 1 open bug)
Details
(Keywords: parity-chrome)
Attachments
(1 file)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36
Steps to reproduce:
- Go to
data:text/html,<style>body {--foo: 40%;--bar: hsl(50, 70%, var(--foo));} div {color: var(--bar);}</style><div>Hello World - Open the inspector
- Select the
<body>element
Actual results:
- In the Rules panel, the
--barcustom property is defined, but there is no way right there to know what it computes to. - You have to find an element where this property applies, and then open the Computed view to see it.
Expected results:
See https://twitter.com/jpzwarte/status/1244670644089958400
It would be nice if, as you hover over the --bar property name, you could have a tooltip that shows you what the computed value is, without having to look for places where it is used.
This is also a Chrome gap, as DevTools in Chrome has this
|
Reporter | |
Updated•5 years ago
|
|
||
Comment 1•5 years ago
|
||
Note: I tested quickly the patches from Bug 1594402, with the test case here, and no color swatch is showing up. This is because output-parser.js' _parseVariable is not recursive and doesn't support nested variables.
|
||
Comment 2•5 years ago
|
||
This is a great idea. It's more of a feature request about pointing to resolved values of Custom Properties.
|
||
Updated•2 years ago
|
|
Assignee | |
Comment 3•5 months ago
|
||
Note that we now show custom properties in the computed panel, but people are still interested in having the computed value directly in the tooltip
|
|
Assignee | |
Comment 5•4 months ago
|
||
|
||
Updated•4 months ago
|
Description
•