1377794 - identity block lacks active and open state styling and shouldn't show the focus outline when clicked

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[Darkspirit]

Attachment: dotted-borders.png

Nightly 56 x64 20170702100334 @ Debian Testing (Linux 4.9.0-3-amd64, Radeon RX480)

Please compare the attached image with:
https://people-mozilla.org/~shorlander/projects/photon/Mockups/linux.html

The (still) dotted borders ever were very annoying.

Comment 1

[Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.)]

FYI color issue is in bug #1377786

Comment 2

[:Gijs (he/him)]

Pretty sure the focus outline is by design on Linux...

Comment 3

[Darkspirit]

(In reply to :Gijs from comment #2)
> Pretty sure the focus outline is by design on Linux...

May be an antique remnant, but consistency to https://people-mozilla.org/~shorlander/projects/photon/Mockups/linux.html and other platforms would be great. Should be one line of CSS, or not?

Comment 4

[:Gijs (he/him)]

(In reply to Darkspirit from comment #3)
> (In reply to :Gijs from comment #2)
> > Pretty sure the focus outline is by design on Linux...
> 
> May be an antique remnant, but consistency to
> https://people-mozilla.org/~shorlander/projects/photon/Mockups/linux.html
> and other platforms would be great. Should be one line of CSS, or not?

Well, from comment #0 and the screenshot, it's not clear to me when exactly you're seeing this. Can you clarify?

In general, Windows and Linux focus buttons that you click. You can also focus the identity block via the keyboard, in which case the focus indicator is necessary so the user can see where focus is. I don't think we want to get rid of it in this case, and it's not clear to me if this is the case you filed the bug for or not.

I don't see a focus indicator on the identity block unless I focus it via the keyboard or during mousedown while the panel is opening, or if I try to drag the element with the mouse (ie mousedown on the box, mouseup outside of the box). We could look at making it not appear in those situations, though I'm not convinced changing that is all that important... From a very quick look,  maybe adding :not(:active) to the selector here https://dxr.mozilla.org/mozilla-central/rev/6f8f10f48ace5692256efd91f011bd23054ee2ec/browser/themes/linux/browser.css#459 would be enough for this, but I haven't checked in detail.

Comment 5

[Darkspirit]

I see this dotted borders in this situations:
* "onmousedown", so yes, when I click
* "onmousedown" and keep pressed
* click, panel opens, click: Those dotted borders stay until I click somewhere else.

This is the only UI element where I see those dotted borders when I press the mouse down on it.
Yes, it would be better if that "focus outlines" came only when pressing the tabulator key (but as I said I haven't seen them else so they might not be needed).
You hint that Windows 10 may also have such dotted Windows 98 like borders on mousedown? That could be negative perceived.

I was happy when I saw that https://people-mozilla.org/~shorlander/projects/photon/Mockups/linux.html
has a lightgrey background on mouseover and a darker background when I click or hold the mouse on it.
So now it was similar to Chrome Dev 61 and looked like a real and clean UI.

Comment 6

[Dão Gottwald [::dao]]

Attachment: Bug 1377794 - Make the identity block background darker when active/open and hide the focus outline when clicked.

Review commit: https://reviewboard.mozilla.org/r/154812/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/154812/

Comment 7

[Dale Harvey (:daleharvey)]

Comment on attachment 8883856 [details]
Bug 1377794 - Make the identity block background darker when active/open and hide the focus outline when clicked.

https://reviewboard.mozilla.org/r/154812/#review159966

Sorry I should have done the active style, I forgot about it since most of the active style was the animation which is gonna be done seperately, this is working / looks good, thanks

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7b66765a2816
Make the identity block background darker when active/open and hide the focus outline when clicked. r=daleharvey

Comment 9

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/7b66765a2816

Comment 10

[Darkspirit]

Nightly 56 x64 20170707100138 @ Debian Testing (Linux 4.9.0-3-amd64, Radeon RX480)

Thank you,
but it's not completely fixed.

Click on the EV bar on BMO once,
the panel is shown below,
click again,
the panel is hidden, but then those Windows 98 like dottes borders (which are nowhere else) are shown.

Comment 11

[Darkspirit]

Partially fixed, see comment 10.

Comment 12

[Dão Gottwald [::dao]]

(In reply to Darkspirit from comment #10)
> Nightly 56 x64 20170707100138 @ Debian Testing (Linux 4.9.0-3-amd64, Radeon
> RX480)
> 
> Thank you,
> but it's not completely fixed.
> 
> Click on the EV bar on BMO once,
> the panel is shown below,
> click again,
> the panel is hidden, but then those Windows 98 like dottes borders (which
> are nowhere else) are shown.

This is expected behavior. We can't hide the focus ring in all cases since it's needed for accessibility.

Comment 13

[Johann Hofmann [:johannh]]

Screenshots:

https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=20f32734df750bddada9d1edca665c2ea53946f0&newProject=mozilla-central&newRev=78ff4c023b6aea67ac8e6aa3085d73319bba11d9&filter=controlCenter

Comment 14

[ovidiu boca[:Ovidiu]]

I tested this issue on Mac Os X 10.10, Windows 10 x64, Windows 7 x64 with FF Nightly 57.0a1(2017-08-11) and I can't see any dotted border. On Ubuntu 16.04 the dotted border is present. Based on comment 12 this is the expected behavior, I will mark this as verified fixed.