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

VERIFIED FIXED in Firefox 56

Status

()

Firefox
Theme
P1
normal
VERIFIED FIXED
2 months ago
13 days ago

People

(Reporter: darkspirit, Assigned: dao)

Tracking

({nightly-community})

56 Branch
Firefox 56
nightly-community
Points:
---

Firefox Tracking Flags

(firefox56 fixed, firefox57 verified)

Details

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

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(2 attachments)

(Reporter)

Description

2 months ago
Created attachment 8882924 [details]
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 months ago
Blocks: 1363502
Keywords: nightly-community

Updated

2 months ago
Whiteboard: [photon-visual] [triage]
FYI color issue is in bug #1377786

Comment 2

2 months 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 months 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 months 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 months 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 months 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 months ago
OS: Linux → All
Hardware: x86_64 → All
Comment hidden (mozreview-request)
(Assignee)

Updated

2 months ago
Assignee: nobody → dao+bmo
Status: NEW → ASSIGNED

Updated

2 months ago
Flags: qe-verify?
Priority: -- → P2
(Assignee)

Updated

2 months ago
Flags: qe-verify? → qe-verify+

Updated

2 months ago
Iteration: --- → 56.2 - Jul 10
Priority: P2 → P1

Updated

2 months ago
QA Contact: brindusa.tot

Comment 7

2 months 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 months 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 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/7b66765a2816
Status: ASSIGNED → RESOLVED
Last Resolved: 2 months ago
status-firefox56: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 56
(Reporter)

Comment 10

2 months ago
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.
(Reporter)

Comment 11

2 months ago
Partially fixed, see comment 10.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(Assignee)

Comment 12

2 months 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 months ago2 months ago
Resolution: --- → FIXED
Screenshots:

https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=20f32734df750bddada9d1edca665c2ea53946f0&newProject=mozilla-central&newRev=78ff4c023b6aea67ac8e6aa3085d73319bba11d9&filter=controlCenter
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
status-firefox57: --- → verified
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.