1617608 - Allow devtools to toggle the focus-visible pseudo-class.

Status: RESOLVED FIXED

(DevTools :: Inspector, task, P3)

Description

[Emilio Cobos Álvarez (:emilio)]

In bug 1617600 I'm prototyping the :focus-visible pseudo-class. Developers should be able to toggle/emulate it just like :focus.

Comment 1

[Sebastian Zartner [:sebo]]

Once implemented, this should be added to https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Viewing_common_pseudo-classes.

Sebastian

Comment 2

[Razvan Caliman [:rcaliman]]

Attachment: pseduo-class toggles in Rules view

The number of pseudo-class toggles is growing in the Rules panel. The current behavior is for them to wrap to a new line. But as the number grows, it's worth considering whether this UI is still appropriate (it may be sufficient and we can leave it as-is). Pinging Victoria for a check.

Comment 3

[Victoria Wang [:victoria]]

Sorry for the long delay! Didn't mean to block this.

Yes, I think wrapping them to the new line is totally fine for landing this patch.

I'll file a separate bug about potentially lining it up in 3 columns like this

[] hover      [] focus       [] active
[] visited    [] focus-within

Comment 4

[Victoria Wang [:victoria]]

Filed separate polish bug

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1617608 - Allow toggling :focus-visible from inspector. r=rcaliman

For now use the prefixed pseudo-class. Once we ship the unprefixed
version (:focus-visible) we should rename this.

Note that these map to the same value, so using :-moz-focusring also
changes :focus-visible when enabled.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1103b268bc03
Allow toggling :focus-visible from inspector. r=rcaliman

Comment 7

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/1103b268bc03

Comment 8

[Hamish Willee]

Documentation for this feature (for the FF85 release) is provided in https://github.com/mdn/content/pull/759 (see also https://github.com/mdn/content/issues/296).

Essentially it just updates the existing section(s) and images on toggling pseudo classes to include the new class.