1980210 - Chrome-Only `CSSStyleRule#querySelectorAll` doesn't support `@scope`

Status: RESOLVED FIXED

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

Description

[David Shin[:dshin]]

Used here. Uses element.querySelectorAll() behind the scenes.

Similar to CSSScopeRule#selectorMatchesElement, tracked in bug 1934914.
Use of querySelectorAll doesn't make sense if there's a scope rule along the parent chain (querySelectorAll dodges this issue because the selectors are supplied as string, which cannot be encased in a scope rule).

Comment 1

[David Shin[:dshin]]

Attachment: Minimum Reproducible Case

This affects the little square button inside inspector's "This Element" panel where it highlights all matching elements.

STR:

1. Load attached testcase
2. Inspect the green box
3. Note that it is green because it matches the scope rule, whereas the red one doesn't.
4. Click on the square beside the scoped rule ("Highlight all elements matching this selector")

Expected: Only the green box is highlighted
Actual: Both green and red boxes are highlighted

Comment 2

[David Shin[:dshin]]

Attachment: Bug 1980210: Support @scope in ChromeOnly CSSStyleRule.querySelectorAll. r=#style,#devtools-reviewers

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ddb7b52487f1
https://hg.mozilla.org/integration/autoland/rev/099f2e619500
Support @scope in ChromeOnly CSSStyleRule.querySelectorAll. r=firefox-style-system-reviewers,devtools-reviewers,layout-reviewers,emilio,nchevobbe

Comment 4

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/099f2e619500