The native focusring is not powered by :focus. I'm not sure a regular user knows the difference.

NEW
Unassigned

Status

()

Firefox
Developer Tools: Inspector
P2
normal
2 years ago
2 years ago

People

(Reporter: helenvholmes, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [btpp-fix-later])

Use case:

1. Visit http://nativeformelements.com/
2. Select an <input>
3. Right-click in the markup view; add a :focus
4. Expect to see a focus ring on the <input> in the page; none appears.

Because :active and :hover forced states from the markup view will apply the styling of that state, I strange that we're not applying the native styling here (and regardless of the technical reason we are/are not, I think any average web dev certainly would be).
(Reporter)

Updated

2 years ago
See Also: → bug 1205371
Good catch Helen, we do apply the focus pseudo-class, so any custom CSS styling that might have been defined for it does appear then, but the native one does not (light blue outline on mac).
This seems to work fine on google chrome however, so for consistency reasons we should do the same. But also, as Helen said, users probably expect it to work this way.

Pseudo class locks are added by the WalkerActor here:
https://dxr.mozilla.org/mozilla-central/source/devtools/server/actors/inspector.js#2389

This uses a platform API inDOMUtils:
https://dxr.mozilla.org/mozilla-central/source/layout/inspector/inDOMUtils.cpp#1228

CCing Tom who might be able to investigate how to change this.
Priority: -- → P2
Whiteboard: [btpp-fix-later]
You need to log in before you can comment on or make changes to this bug.