1897931 - Indicate @starting-style CSS custom properties value in var() tooltip

Status: RESOLVED FIXED

(DevTools :: Inspector, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

On data:text/html,<meta charset=utf8><style>h1 { --x: 1; opacity: var(--x); transition: all 1s; @starting-style { --x: 0; margin: var(--x) } }</style><h1>Hello, opening the Rules view, and selecting the <h1> node we get the following rules:

h1 {
  @starting-style {
    & {
      --x: 0;
      margin: var(--x);
    }
  }
}

h1 {
  --x: 1;
  opacity: var(--x);
  transition: all 1s;
}

If you hover var(--x) in the @starting-style rule, the tooltip says --x: 1.
Ideally here, we would compute the value of the variable as used for the starting style, and the tooltip should say --x: 0

Or we could even think of a way that hovering var(--x) anywhere, will indicate both it's starting style (0) and the "computed" value (1)

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1897931 - [devtools] Include starting-style value in var() tooltip. r=#devtools-reviewers.

This patch adds a new Map that holds CSS variable value for @starting-style rules,
so we can display the proper value when hovering a variable in a @starting-style rule.

As regular properties, CSS variables can be overridden by declaration in regular
rule, so we ensure this is reflected in the content of the tooltip.

We also add a new @starting-style section in the tooltip, that we show when
it's displayed for a regular rule.

Many test cases are added to cover the different situations we can have.
The checkVariableTooltipForProperty was moved out of browser_rules_registered-custom-properties.js,
and refactored to accomodate for the new starting-style section.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/54edb92e6c00
[devtools] Include starting-style value in var() tooltip. r=devtools-reviewers,bomsy.

Comment 3

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/54edb92e6c00