Show reduced form of unitless CSS variables' computed values

[kentslaney]

Calc won't divide by values with units, so I've ended up doing a bit of unitless CSS with JS-overridden property values. Since they don't change with reflow, could the devtool's CSS variable tooltip show the reduced form as well please? It'd help me track down where the result is unexpected.

As you can see in the screenshot, I've been setting the opacity to the variable to preview intermediate results in the computed tab.

[Jon]

Thanks for submitting an idea to the Mozilla Connect community! Your idea is now open to votes (aka kudos) and comments.

[kentslaney]

You can see what I've used it for here (source) on desktop: the sidebar size depends on the splash screen logo size, which changes based on where the left edge of the sidebar ends up.

[nchevobbe]

Hello kentslaney, 

Just to make sure, you'd want to get the result of the computation right? Here, the computed value is just doing variable string replacement. If you declare `tmp3` as a number, e.g. :

```

@property --tmp3 {
syntax: '<number>';
inherits: true;
initial-value: 0;
}

```

then the computed value will be a number.

Now, I agree that it would be nice to show both the "calculated" value when the variable is not declared. That's something we want to experiment with in https://bugzilla.mozilla.org/show_bug.cgi?id=1800085

Let me know if I got anything wrong

[kentslaney]

Oh, that's good to know and would have solved my problem, thanks! I appreciate the link to the bugzilla thread too.