1892192 - Display @starting-style rules in the Rules view

Status: RESOLVED FIXED

(DevTools :: Inspector, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

We should display those rules in the Rules view

examples:

h1 {
  transition: background-color 1.5s;
  background-color: green;
}
@starting-style {
  h1 {
    background-color: transparent;
  }
}

/* Conditional rules can be used with CSS Nesting: */

h1 {
  transition: background-color 1.5s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

from the spec:

Global, name-defining at-rules such as @keyframes, @font-face, and @layer are allowed inside @starting-style, and when present behave as if they were outside of @starting-style.

I guess in such case the parentRule of those rules won't be the @starting-style one, but we should make sure it doesn't cause trouble in the rules view.
We may also want to display a selector warning or something to indicate that although the rule is inside a @starting-style, it's treated as if it was outside

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1892192 - [devtools] Display @starting-style rules in Rules view. r=#devtools-reviewers.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

While working on a test page, I realized that properties in @starting-style rules can be overridden by properties not inside them:

div {
  border-color: gold;
  transition: all 1s linear;
}

@starting-style {
  div {
    border-color: cyan;
    background-color: blue; /* this won't be applied … */
  }
}

div {
  background-color: transparent; /* … because this overrides it */
}

so starting-style rules are not treated differently, and we should mark those as overridden.
The Rules view would display something like:

div {
  background-color: transparent;
}

@starting-style {
  div {
    border-color: cyan;
    ~~background-color: blue;~~
  }
}

div {
  ~~border-color: gold;~~
  transition: all 1s linear;
}

With the current logic, we'll mark the border-color: gold as overridden too, which is not entirely accurate, as it is applied in the end.
So we need to differentiate between starting-style properties being actually overridden, with properties that will be applied, but will be transitioned from a starting-style property.

div {
  background-color: transparent;
}

@starting-style {
  div {
    border-color: cyan;
    ~~background-color: blue;~~
  }
}

div {
  border-color: gold; ⏱ /* adding an icon or some badge / specific style */
  transition: all 1s linear;
}

If we're adding a button of some sort, we could also make it jump to the property that specifies the starting-style

---

Note that !important will also override starting-style properties, so :

div {
  border-color: gold !important;
  transition: all 1s linear;
}

@starting-style {
  div {
    border-color: cyan; /* this is overridden by the !important in the regular rule */
  }
}

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Note that the overridden logic would also need to be adapted in the computed panel so we ignore starting-style properties

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1892192 - [devtools] Handle @starting-style rules in updateDeclarations. r=#devtools-reviewers.

Properties inside @starting-style rules can be overridden by higher priority
properties in other starting-style rules, but also by higher priority properties
inside regular rules.
The other way around is not true, a property in a starting style rule can't override
a property from a regular rule, it only sets its starting style.
updateDeclarations needs to reflect this so we properly mark overridden props,
and avoid marking valid props as overridden.

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1892192 - [devtools] Don't put CSS variable from @starting-style rule in global variable map. r=#devtools-reviewers.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b045155b8af1
[devtools] Display @starting-style rules in Rules view. r=devtools-reviewers,bomsy.
https://hg.mozilla.org/integration/autoland/rev/9035da951f49
[devtools] Handle @starting-style rules in updateDeclarations. r=devtools-reviewers,bomsy.
https://hg.mozilla.org/integration/autoland/rev/8a7a126bcb68
[devtools] Don't put CSS variable from @starting-style rule in global variable map. r=devtools-reviewers,bomsy.

Comment 8

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/b045155b8af1
https://hg.mozilla.org/mozilla-central/rev/9035da951f49
https://hg.mozilla.org/mozilla-central/rev/8a7a126bcb68