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

VERIFIED FIXED in Firefox 56

Status

()

defect
P1
normal
VERIFIED FIXED
2 years ago
2 years ago

People

(Reporter: darkspirit, Assigned: dao)

Tracking

({nightly-community})

56 Branch
Firefox 56
Points:
---

Firefox Tracking Flags

(firefox56 fixed, firefox57 verified)

Details

(Whiteboard: [photon-visual][p2])

Attachments

(2 attachments)

Posted image 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.
(Reporter)

Updated

2 years ago
Blocks: 1363502
Whiteboard: [photon-visual] [triage]

Comment 2

2 years ago
Pretty sure the focus outline is by design on Linux...
Summary: identity block has wrong colors and still a dotted border (against the mockup) → identity block has wrong colors and still shows a focus outline (dotted border) when clicked (against the mockup)
(Reporter)

Comment 3

2 years ago
(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

2 years ago
(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.
Flags: needinfo?(bugzilla)
(Reporter)

Comment 5

2 years ago
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.
Flags: needinfo?(bugzilla)
(Assignee)

Updated

2 years ago
Summary: identity block has wrong colors and still shows a focus outline (dotted border) when clicked (against the mockup) → identity block lacks active and open state styling and shouldn't show the focus outline when clicked
Whiteboard: [photon-visual] [triage] → [photon-visual][p2]
(Assignee)

Updated

2 years ago
OS: Linux → All
Hardware: x86_64 → All
(Assignee)

Updated

2 years ago
Assignee: nobody → dao+bmo
Status: NEW → ASSIGNED
Flags: qe-verify?
Priority: -- → P2
(Assignee)

Updated

2 years ago
Flags: qe-verify? → qe-verify+
Iteration: --- → 56.2 - Jul 10
Priority: P2 → P1
QA Contact: brindusa.tot

Comment 7

2 years ago
mozreview-review
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
Attachment #8883856 - Flags: review?(dharvey) → review+

Comment 8

2 years ago
Pushed by dgottwald@mozilla.com:
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

2 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/7b66765a2816
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 56
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.
Partially fixed, see comment 10.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(Assignee)

Comment 12

2 years ago
(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.
Status: REOPENED → RESOLVED
Last Resolved: 2 years ago2 years ago
Resolution: --- → FIXED
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.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.