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

Status: NEW

(DevTools :: Inspector, defect, P2)

Description

[Helen V. Holmes (:helenvholmes) (:✨)]

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).

Comment 1

[Patrick Brosset <:pbro>]

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.