1501636 - Show deeper information in CSS variable tooltip

Status: RESOLVED DUPLICATE of bug 1423701

(DevTools :: Inspector, enhancement)

Description

[Florens Verschelde :fvsch]

When a CSS variable --a is set to another variable --b, its tooltip shows:

--a = var(--b)

As a user, this feels like hitting a wall. To get to the value of --b, the user would then have to use the filter input, type --b, and look at the filtered results. Having done it quite a bit, it's a frustrating experience.

It would be great to show more detailed information, for example:

--a = var(--b)
--b = #cc0088

Or as a oneliner:

--a = var(--b) ← #cc0088

But the multi-line version can be useful when we have more than one variable:

--a = calc(var(--b) - var(--c) + 10px)
--b = 80vh
--c = 120px

It seems this in bug 1431949 we decided not to pursue something like that: https://bugzilla.mozilla.org/show_bug.cgi?id=1431949#c6

As CSS variable usage grows, it would be useful to find a way to show users what value gets applied, without requiring them to switch to Rules filtering or to the Computed view.

I can provide a couple use cases if that's helpful.

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

I think this is the same as what we have done in Bug 1423701.