1826263 - Can't see style of ::backdrop pseudo-element

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: ::backdrop pseudo-element in Chrome DevTools

Steps to reproduce

1. Navigate to data:text/html,<meta charset=utf8><style>dialog::backdrop { background: tomato } </style><dialog>Hello</dialog><script>document.querySelector("dialog").showModal()</script>
2. Open the inspector

Expected results

There's a ::backdrop item inside/next to the <dialog> element that I can select to see the rule with the tomato background

Actual results

I can't access the ::backdrop in the rule view

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1826263 - [devtools] Display `::backdrop` rules for `:modal` elements (e.g. <dialog>). r=#devtools-reviewers.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2252bdfaa446
[devtools] Display `::backdrop` rules for `:modal` elements (e.g. <dialog>). r=devtools-reviewers,jdescottes.

Comment 3

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/2252bdfaa446

Comment 4

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

Reproducible on a 2023-04-03 Nightly build on macOS 12.
Verified as fixed on Firefox 113.0(build ID: 20230501151611) and Nightly 114.0a1(build ID: 20230502160708) on macOS 12, Windows 10, Ubuntu 22.