1840116 - Can't modify nested selector of constructed stylesheet in the rule view

Status: RESOLVED FIXED

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

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Navigate to data:text/html,<meta charset=utf8><h1>Hello</h1><script>const s = new CSSStyleSheet();s.replaceSync("body {h1 { color: red }}");document.adoptedStyleSheets.push(s);</script>
2. Inspect the Hello element
3. There should be a h1 selector above the rule, modify it to h2

Expected results

The selector updates to h2

Actual results

The selector does not update and stays h1

---

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1840116 - [devtools] Fix modifying selector of child rule via CSSOM. r=#devtools-reviewers.

When updating a selector in a constructed stylesheet,
we looked through the stylesheet cssRules to properly
insert the new rule at the right position.
But for nested rules, we'd never find them, and the
modification of the selector wouldn't happen.

Depends on D181676

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b332adf20b98
[devtools] Fix modifying selector of child rule via CSSOM. r=devtools-reviewers,ochameau.

Comment 3

[Cristina Horotan [:chorotan]]

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