1800085 - (dt-css-explainers) [META] Experiment with a "computation explainer" tooltip in the rule view (aka CSS explainers)

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

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 https://2019.wattenberger.com/blog/css-percents
Having those information directly in the rule view would be really nice for users

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

This could be useful for relative color syntax too: Bug 1898261

Comment 3

[Bramus]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

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

That link no longer works. The updated URL is https://2019.wattenberger.com/blog/css-percents

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Bramus from comment #3)

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #1)

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

That link no longer works. The updated URL is https://2019.wattenberger.com/blog/css-percents

thanks bramus for spotting this, I updated my comment 👍

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Chrome's version of this feature

Chrome added some version of this lately