1946442 - Adding declaration in Rules view adds it after any nested declaration

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>body { color: red; &:where(*) { color: blue; } }</style>Hello
2. Open the inspector
3. In the Rules view, add a color: gold declaration in the body rule, below color: red

Expected results

The text on the page stays blue as there's another (nested) rule declared later

Actual results

The text on the page turns gold.
If we look at the styleeditor, we can see that the declaration is added after the nested declaration

body {
  color: red;
  &:where(*) {
    color: blue;
  }
  color: gold;
}

This is not what's expected, we should get

body {
  color: red;
  color: gold;
  &:where(*) {
    color: blue;
  }
}

as a result, this creates another rule, so when the rule is refreshed you'll see the new declaration in two different rules:

body {
  {
    color: gold;
  }
}
body {
  &:where(*) {
    color: blue;
  }
}
body {
  color: red;
  color: gold;
}

note that this could have a similar cause than Bug 1946439, and both bugs might be fixed with a single patch

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1946442 - [devtools] Turn RuleRewriter into a proper ES6 class. r=#devtools.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1946442 - [devtools] Fix RuleRewriter when dealing with rules containing nested rules. r=#devtools.

Create a dummy rule with the content of the rule being modified so we can
check if it has a nested rule. In such case, we can then get the location
of the nested rule so we can insert the added text in the correct position.

A few unit test cases are added to make sure the RuleRewriter does handle
nested rules properly.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e43f18d07ffa
[devtools] Turn RuleRewriter into a proper ES6 class. r=devtools-reviewers,bomsy.
https://hg.mozilla.org/integration/autoland/rev/850b58556292
[devtools] Fix RuleRewriter when dealing with rules containing nested rules. r=devtools-reviewers,jdescottes.

Comment 4

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/e43f18d07ffa
https://hg.mozilla.org/mozilla-central/rev/850b58556292

Comment 5

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

Issue is reproducible on a 2025-02-06 Firefox Nightly build on Windows 10.
Verified as fixed on Firefox Nightly 138.0a1 and Firefox 137.0b2 on Windows 10, Ubuntu 22, macOS 14.