Closed Bug 1892192 Opened 3 months ago Closed 1 month ago

Display @starting-style rules in the Rules view

Categories

(DevTools :: Inspector, task)

task

Tracking

(firefox129 fixed)

RESOLVED FIXED
129 Branch
Tracking Status
firefox129 --- fixed

People

(Reporter: nchevobbe, Assigned: nchevobbe)

References

(Blocks 1 open bug, Regressed 1 open bug, )

Details

Attachments

(3 files)

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;
  }
}
Depends on: 1893409

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 */
  }
}

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

Assignee: nobody → nchevobbe
Attachment #9399925 - Attachment description: WIP: Bug 1892192 - [devtools] Display @starting-style rules in Rules view. → Bug 1892192 - [devtools] Display @starting-style rules in Rules view. r=#devtools-reviewers.
Status: NEW → ASSIGNED

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.

Blocks: 1897931
Attachment #9402891 - Attachment description: WIP: Bug 1892192 - [devtools] Handle @starting-style rules in updateDeclarations. r=#devtools-reviewers. → Bug 1892192 - [devtools] Handle @starting-style rules in updateDeclarations. r=#devtools-reviewers.
Pushed by nchevobbe@mozilla.com:
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.
Regressions: 1901478
Status: ASSIGNED → RESOLVED
Closed: 1 month ago
Resolution: --- → FIXED
Target Milestone: --- → 129 Branch
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: