2014442 - Add UI for :open state

Status: RESOLVED FIXED

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

Description

[Sebastian Zartner [:sebo]]

There's a bunch of elements that support the :open pseudo-class like <dialog>, <details>, <input>, and <select>.

To allow debugging their styles when they are in open state, a toggle for that should be added to the :hov panel.

Sebastian

Comment 1

[Sebastian Zartner [:sebo]]

Attachment: Bug 2014442 - [devtools] Added element-specific :open to pseudo-class locks. r=#devtools-reviewers,#fluent-reviewers,nchevobbe

Not only does the :open pseudo-class get added, but it is also localed in a new 'Element-specific pseudo-classes` section. That section shows specific pseudo-classes that only apply to specific elements.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/411dca3abd83
https://hg.mozilla.org/integration/autoland/rev/4244750ab096
[devtools] Added element-specific :open to pseudo-class locks. r=flod,nchevobbe,devtools-reviewers,fluent-reviewers

Comment 3

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/4244750ab096

Comment 4

[Sebastian Zartner [:sebo]]

I believe it's worth mentioning this in the release notes together with the change in bug 2017985. The wording is probably a little long. Feel free to shorten it.

[Why is this notable]: New DevTools feature
[Affects Firefox for Android]: no
[Suggested wording]: A new element-specific section has been added to the pseudo-class toggle pane including a toggle for the :open pseudo-class, which is only available for elements that have an open state like <dialog> elements. The existing toggle for the :visited pseudo-class was also moved there, as it only applies to <a> and <area> elements.
[Links (documentation, blog post, etc)]:
https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#viewing-common-pseudo-classes

Comment 5

[Ruth John]

Tracking issue for MDN release note update https://github.com/mdn/content/issues/43561

Comment 6

[Dianna Smith [:diannaS]]

Added to Fx150 release notes, currently in beta.

Comment 7

[Vadim Makeev]

Added to release notes on MDN https://github.com/mdn/content/pull/43841