In latest @FirefoxNightly, the variable tooltip in... | Nicolas Chevobbe

Nicolas's posts Post Back to profile

Nicolas Chevobbe

In latest @FirefoxNightly, the variable tooltip in @FirefoxDevTools now shows the computed value of the variable!

I'm super excited about this, it should make working with custom properties much easier. Combined with the registered property info and @starting-style value, this feels like super power 🦹

We're also planning other changes that would make the tooltip even better :)

cc @kizu @anatudor @shadeed9

Firefox DevTools Inspector showing a CSS value using a CSS variable.
A popup is displayed, pointing to the variable name. In the popup, we can see the variable declaration (`--button-border-radius = var(--border-radius-small)`), as well as a "computed value" section, under which we can see the value: "4px"

Firefox DevTools Inspector showing a CSS declaration value using a CSS variable.
The tooltip displays the variable declaration value, the computed value, the @startin-style value, and the @property information

Like 9 August at 9:11 | Open on mozilla.social

11 comments

Manuel Matuzović

@nicolaschevobbe @FirefoxNightly @kizu @anatudor @shadeed9 @FirefoxDevTools love it!

9 August at 9:18 | Open on front-end.social

njan

@nicolaschevobbe @FirefoxNightly Aaaaaa, finally! 💜💜💜 This will make my life a lot easier.

9 August at 9:27 | Open on chaos.social

nicofrand

@nicolaschevobbe @FirefoxNightly @kizu @anatudor @shadeed9 @FirefoxDevTools Niceeee

9 August at 10:42 | Open on mastodon.social

Christopher Kirk-Nielsen

@nicolaschevobbe @FirefoxNightly @FirefoxDevTools Killer feature! Great work.

9 August at 14:02 | Open on front-end.social

@nicolaschevobbe this is really great, thanks! 🤩

9 August at 19:11 | Open on mamot.fr

Bobbing for Apples Annie 👻

@nhoizey @nicolaschevobbe so good!

9 August at 19:18 | Open on social.lol

@nicolaschevobbe @FirefoxNightly @kizu @anatudor @FirefoxDevTools This is really useful! Thank you 🤩

10 August at 4:08 | Open on front-end.social

Alexander Lehner

@nicolaschevobbe @FirefoxNightly @kizu @anatudor @shadeed9 @FirefoxDevTools Great feature! Will this be part of the next Firefox Dev version?

10 August at 7:46 | Open on tech.lgbt

Nicolas Chevobbe

@alex86 yes, it will be in Firefox 131

10 August at 7:52 | Open on mozilla.social

Olivia

@nicolaschevobbe @FirefoxNightly @FirefoxDevTools @shadeed9 will you remove in IA in Firefox? Like, not add it?

10 August at 12:36 | Open on peculiar.florist

@nicolaschevobbe @FirefoxNightly This feature is just super helpful 🤩 Thanks a lot!

12 August at 8:53 | Open on claes.social