1980858 - Support `::before::marker` and `::after::marker` in devtools inspector

Status: VERIFIED FIXED

(DevTools :: Inspector, enhancement)

Description

[Oriol Brufau [:Oriol]]

Attachment: Chrome screenshot

Bug 1980215 added support for ::before::marker and ::after::marker.

I think these should be exposed in devtools, just like Chrome.

Testcase: https://wpt.live/css/css-lists/nested-marker-styling.html

Comment 1

[Oriol Brufau [:Oriol]]

Attachment: Firefox screenshot

Comment 2

[Sebastian Zartner [:sebo]]

Thanks for filing this, Oriol!

Support for this is actually consists of two parts:

1. The Rules View should show those rules.
2. The Node View within the Inspector itself should show the ::marker pseudo-elements as children of the ::before and :after rules. Selecting them, should only show the the rules in the Rules View that apply to the ::marker pseudo-elements.

I think, the first point is a must-have to be able to see and manipulate those rules while the second point is a should-have.

Sebastian

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1980858 - [devtools] Show (::before|::after)::marker child. r=#devtools.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1980858 - [devtools] Rename browser_markup_pseudo_on_reload.js into browser_markup_pseudo.js. r=#devtools.

The test does additional check than when it was first added, so change its name to make it more broad.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1980858 - [devtools] Display (::before|::after)::marker rules. r=#devtools.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/8476a2083fc2
https://hg.mozilla.org/integration/autoland/rev/770fc1a97e1b
[devtools] Show (::before|::after)::marker child. r=devtools-reviewers,jdescottes.
https://github.com/mozilla-firefox/firefox/commit/4b03f3a12d3d
https://hg.mozilla.org/integration/autoland/rev/39f2c5a52d50
[devtools] Rename browser_markup_pseudo_on_reload.js into browser_markup_pseudo.js. r=devtools-reviewers,jdescottes.
https://github.com/mozilla-firefox/firefox/commit/83692d2c07e9
https://hg.mozilla.org/integration/autoland/rev/3cd4db7d272b
[devtools] Display (::before|::after)::marker rules. r=devtools-reviewers,jdescottes.

Comment 7

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/770fc1a97e1b
https://hg.mozilla.org/mozilla-central/rev/39f2c5a52d50
https://hg.mozilla.org/mozilla-central/rev/3cd4db7d272b

Comment 8

[Sebastian Zartner [:sebo]]

Verified that that it's working as expected in Nightly 143.0a1 (2025-08-08).

Sebastian

Comment 9

[Sebastian Zartner [:sebo]]

Thank you, for the quick fix, Nicolas!

Marking this as dev-doc-needed, as it should be mentioned in the release notes for 143 on MDN. It might also be added to the general release notes, though it's an edge case.

Sebastian