2015413 - Show tooltip for variables in container style query (style())

Status: NEW

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

Description

[Nicolas Chevobbe [:nchevobbe]]

CSS variables / custom properties can be referenced in the style() property of a @container query (see https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries#container_style_queries)
We can probably show the same tooltip that we have in property values
Note that we should make sure that the value we show is the one for the element the parent selector applies to, not the currently selected element.
For example, in :

<meta charset="utf8" />
<style>
  :root {
    --theme: red;
  }

  h1 {
    --theme: blue;
  }

  @container style(--theme: red) {
    h1 {
      color: var(--theme);  
    }
  }
</style>
<h1>Hello</h1>

in @container style(--theme: red) the tooltip should (obviously) indicate red, which is the value on the parent of h1 (and actually the root element), whereas in the color: var(--theme), the tooltip will say blue

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

FWIW Chrome doesn't have a tooltip for this, but I think it would be nice to have to reduce confusion, especially when the condition has multiple parts