1476296 - Focused filter buttons look like `active` (confusing)

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

[Jens]

Attachment: netmonitor-filter-buttons.gif

AR:
Pressing / deactivating an active filter button in Network tab makes them still look like being kind of active. I think this was introduced some days/weeks ago.

ER:
Make it behave and look like the filter buttons in the console. 

See attached screencast.

Comment 1

[Jens]

What I mean is the intermediate grey style when a disabled button is focussed. It is confusing what this means.

Same for the light blue when active state is foccussed.

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Attachment: filter-focus.jpg

I can see it. Yes, it's confusing.

We might use the same bk color for focused button as the Console panel (to be consistent). See the attached screenshot - the Requests button is focused.

Honza

Comment 3

[Mihir Karbelkar(:fauxwizard_)]

I would like to work on this as my second bug. Thanks

Comment 4

[Joan]

Hi,
    I'd like to work on this bug. Please let me know how to proceed.
Thanks,
Cheryl.

Comment 5

[Florens Verschelde :fvsch]

> Make it behave and look like the filter buttons in the console. 

It seems that the Console filter's way to manage this is to put the focus on the document body after users unselected a button. The code seems to detect keyboard navigation, because when the buttons are tabbed to and unselected with Space or Enter keys, they keep focus and focus styles (as they should!).

A simpler fix that doesn't require that much JS logic might be to change :focus styles to use :-moz-focusring instead.
Firefox has some heuristics that make :-moz-focusring active only when users have used keyboard navigation. These heuristics might not be perfect, but they could still be a good improvement here.

Documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring

The change could be changing this:

.devtools-button:not(:empty):not(.checked):not(:disabled):focus, .devtools-toolbarbutton:not(:-moz-any([checked="true"], [disabled]))[label]:focus {
    background-color: var(--toolbarbutton-focus-background);
    color: var(--toolbarbutton-focus-color);
}

to:

.devtools-button:not(:empty):not(.checked):not(:disabled):-moz-focusring,
.devtools-toolbarbutton:not(:-moz-any([checked="true"], [disabled]))[label]:-moz-focusring {
    background-color: var(--toolbarbutton-focus-background);
    color: var(--toolbarbutton-focus-color);
}

in resource://devtools/client/themes/common.css

Tried it briefly, and it seems to be working alright.

Comment 6

[Florens Verschelde :fvsch]

Small correction: the Console sends focus to the jsterm <textarea>. This allows mouse users to click a filter button, then resume typing immediately.

Comment 7

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Sorry for delayed response, just got back from my vacation.

I have to give a chance to the first person who expressed interest in fixing this bug. 

(In reply to Mihir Karbelkar(:fauxwizard_) from comment #3)
> I would like to work on this as my second bug. Thanks
Mihir, are you still interested in this?
Should I assign the bug to you?

Honza

Comment 8

[Mihir Karbelkar(:fauxwizard_)]

Yes I would like to work on this. is it fine if take 2-3 days because I am a little busy with some activities in my college. thanks.

Comment 9

[Renata]

Hi,
    I'd like to work on this bug. Please let me know how to proceed.
Thanks,
Renata.

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Assigned to you!

Please see comment #5, is it promising solution?
Honza

Comment 11

[Florens Verschelde :fvsch]

It seems that :-moz-focusring might not be working as I expected. It behaves identically to :focus in my tests these days. Not sure if that's a recent regression, or a platform-specific limitation maybe.

Comment 12

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to Florens Verschelde [:fvsch] from comment #11)
> It seems that :-moz-focusring might not be working as I expected. It behaves
> identically to :focus in my tests these days. Not sure if that's a recent
> regression, or a platform-specific limitation maybe.
Thanks for the analysis! Any workaround?
Should I assign you this this bug?

Honza

Comment 13

[Florens Verschelde :fvsch]

I'll take it. I need to check if the :-moz-focusring issues are affecting all platforms, if they are reported somewhere else, etc.

If we don't have a native CSS solution, we could investigate making use of a :focus-visible JS polyfill, and see what the perf cost might be.

Comment 14

[Helena Moreno (aka helenatxu)]

(In reply to Florens Verschelde :fvsch from comment #13)

I'll take it. I need to check if the :-moz-focusring issues are affecting
all platforms, if they are reported somewhere else, etc.

Hello @Florens! How was your investigation? I am looking to contribute as I am applying for this project for the Outreachy internship. Can I help with this?

Comment 15

[[:Towkir] Ahmed]

Is this still valid ? couldn't reproduce on latest nightly.

Comment 16

[Vitalii]

Attachment: Bug 1476296 - Remove confusing devtools toggle button focused state

I don't know how to see the toggle buttons behavior on different OS. This bug disapeared on Ubuntu

Comment 17

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2ef93285bdc1
Remove confusing devtools toggle button focused state r=Honza,fvsch

Comment 18

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/2ef93285bdc1