1800085 - [META] Experiment with a "computation explainer" tooltip in the rule view

Status: NEW

(DevTools :: Inspector: Rules, enhancement)

Description

[Nicolas Chevobbe [:nchevobbe]]

It might be useful for users to know the computation that happens when using relative units in property values. Here's a few example

• % size would indicate the parent size that is used
• em size would indicate the font-size of the parent element
• rem size would indicate the font-size of the root
• vmin/vmax would show the viewport inline and block size and indicate which one was picked
• container queries relative units would indicate the query container and its size (see Bug 1799657)

This could go into the "Layout" panel, but might be more discoverable directly in the rule view, next to the unit.

We could show the computation for a given size, even if it's not the final computed size used in the element (e.g. in margin: calc(50vw - 10%) , we could have explainer for both the 50vw and 10%)

It could also play well if we ever do something similar to show computation result of calc

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

I came across this post about % and what it refers to in different contexts: https://wattenberger.com/blog/css-percents
Having those information directly in the rule view would be really nice for users