1824652 - incorrect property is displayed as active with @layers + !important

Status: VERIFIED FIXED

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

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Navigate to data:text/html,<meta charset=utf8><style>@layer A, B;body {color: red !important;}@layer A {body {color: green !important;}}@layer B {body {color: blue !important;}}</style>Hello
2. Open the inspector, select the body

Expected results

In the rule view, the color: green !important is the one that is tagged as active (as we can see the text on the page is green)

Actual results

In the rule view, the color: red !important is the one that is tagged as active

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

This is where we handle the "overridden" flag for properties in the rule view https://searchfox.org/mozilla-central/rev/c244b16815d1fc827d141472b9faac5610f250e7/devtools/client/inspector/rules/models/element-style.js#311-367

The issue is that we seem to loop through the rules in the order they're displayed in the rule view and then we try to compute the proper order (but here fail because layers change how properties are considered)
We should rather try to re-use what we do in the computed property when we expand a property (where we do, or at least should, show the correct order of the properties/rules)

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1824652 - [devtools] Check rules layers for setting properties as overridden in the rules view. r=#devtools-reviewers.

important properties in rules inside layers take precedence over rules
which are not in layers, so we need to account for that.

A test is added to ensure we cover various cases.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b545926f1ae2
[devtools] Check rules layers for setting properties as overridden in the rules view. r=devtools-reviewers,jdescottes.

Comment 5

[Noemi Erli[:noemi_erli]]

https://hg.mozilla.org/mozilla-central/rev/b545926f1ae2

Comment 6

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2023-07-18 Nightly build on macOS 12.
Verified as fixed on Firefox 117.0b2(build ID: 20230801180159) and Nightly 118.0a1(build ID: 20230802220030) on macOS 12, Windows 10, Ubuntu 22.