1855200 - Harmonize focus indicator across the toolbox

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

At the moment, we have a few different way to indicate something has the focus.

1. By default, we have a subtle 1px dotted dark outline
2. On some text input, we add a 1px blue solid outline/border
3. In the accessibility panel, we add a solid 2px outline + some box-shadow

We should unify all those so we have a consistent way of indicating focus.
We can take inspiration in other Firefox areas, for example the settings panel has a nice 2px blue solid outline (no box-shadow), which does work really nicely.

We also deliberately don't add a focus outline on various buttons (and instead only play with background color); we should probably revise this as it makes it easier to have a distinct property to indicate focus with other existing states (disabled/active/…)

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1855200 - [devtools] Fix and harmonize focus indicator across the toolbox. r=#devtools-reviewers.

The new focus indicator is bigger and has a better contrast, making it more accessible
than the thin dotted line we had previously.
It also includes a white box-shadow so even on our blue "active/selected" backgrounds,
the indicator is still visible (e.g. in the markup view, for a selected node, with
focus on badges / text inputs).

Finally, I tried to go over the elements of the shared components and most used
panels to adjust the outline offset when it was not visible/clipped, or when
it could be conflated with the focused element border/background.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d5797f4f8581
[devtools] Fix and harmonize focus indicator across the toolbox. r=devtools-reviewers,ochameau.

Comment 3

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/d5797f4f8581

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1855200 - [devtools] Focus indicator tweaks. r=#devtools-reviewers.

This fixes the focus indicator on the debugger
editor footer toolbar items.
This also handle focus indicator for searchbox
when another item than the input is focused.

Comment 8

[Phabricator Automation]

Comment on attachment 9361983 [details]
Bug 1855200 - [devtools] Focus indicator tweaks. r=#devtools-reviewers.

Revision D192769 was moved to bug 1863495. Setting attachment 9361983 [details] to obsolete.