If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Firefox account picture has a no good hover style in about:preferences#sync

VERIFIED FIXED in Firefox 56

Status

()

Firefox
Preferences
VERIFIED FIXED
2 years ago
21 days ago

People

(Reporter: magicp, Assigned: emilyrcreager)

Tracking

42 Branch
Firefox 56
Points:
---

Firefox Tracking Flags

(firefox41 affected, firefox42 affected, firefox43 affected, firefox44 affected, firefox45 affected, firefox56 fixed)

Details

Attachments

(1 attachment, 5 obsolete attachments)

(Reporter)

Description

2 years ago
Created attachment 8640470 [details]
Firefox-account-profile-picture-hover.png

User Agent: Mozilla/5.0 (Windows NT 6.3; rv:42.0) Gecko/20100101 Firefox/42.0
Build ID: 20150728030209

Steps to reproduce:

1) Open about:preferences#sync
2) Mouse hover on Firefox account picture


Actual results:

Firefox account picture has a no good hover style. Because it is jaggy and doesn't cover around of border line clearly.


Expected results:

My recommendation is to apply blur effect.

Updated

2 years ago
Component: Untriaged → Preferences
(Reporter)

Updated

2 years ago
Status: UNCONFIRMED → NEW
status-firefox41: --- → unaffected
status-firefox42: --- → affected
status-firefox43: --- → affected
status-firefox44: --- → affected
Ever confirmed: true
OS: Unspecified → All
Hardware: Unspecified → All
(Reporter)

Updated

2 years ago
status-firefox41: unaffected → affected
(Reporter)

Updated

2 years ago
status-firefox45: --- → affected
Assignee: nobody → emilyrcreager
Status: NEW → ASSIGNED
(Assignee)

Comment 1

3 months ago
Created attachment 8885398 [details]
Firefox-account-profile-picture-hover-proposedfix.PNG

This attachment is the suggested fix for this bug (blur has been added to the shadow around the account profile photo).
(Assignee)

Comment 2

3 months ago
Created attachment 8885410 [details] [diff] [review]
Suggested patch - Added a blur to the border of the sync account image shadow
Thanks! The patch does as comment #0 requested. Ryan, what do you think about this change? What do you think about using a 2px border instead of blurring it?
Flags: needinfo?(rfeeley)
Great eye! I noticed that even on OS X it is off a little too, but differently.

Blur is conventionally used for indicating focus. Ideally we can match the same kind of border that our radio buttons use. Is this possible?
Flags: needinfo?(rfeeley)
Our radio buttons use `border: 1px solid #0a84ff` in their hover state.

Yes, we should change from using box-shadow to using border.

emily, can you make the following changes:
1. The image should always have `border: 1px solid transparent;`
2. On hover, the image should have `border-color: #0095dd;`

(I'm not sure why these use different shades of blue but I'd rather not tackle that in this bug, as I see #0095dd is pretty common in our codebase: http://searchfox.org/mozilla-central/search?q=0095dd&path= )
Flags: needinfo?(emilyrcreager)
(Assignee)

Comment 6

2 months ago
Created attachment 8886233 [details] [diff] [review]
Suggested patch: Changed box-shadow to border for fxaprofileimage

I uploaded an amended suggested patch for this bug. I made the updates suggested in the previous comment by jaws. I made one additional update to the active link for that image. Now when the link is active, the border changes color from blue to yellow.
Flags: needinfo?(emilyrcreager)
Comment on attachment 8886233 [details] [diff] [review]
Suggested patch: Changed box-shadow to border for fxaprofileimage

Review of attachment 8886233 [details] [diff] [review]:
-----------------------------------------------------------------

This looks good! Can you upload a new version that removes the blank space at the end of each line you added? Then I'll get this checked in for you.
Attachment #8886233 - Flags: review+
Attachment #8885410 - Attachment is obsolete: true
(Assignee)

Comment 8

2 months ago
Created attachment 8886237 [details] [diff] [review]
Suggested patch: Changed box-shadow to border for fxaprofileimage without blank spaces

Removed blank spaces
Attachment #8886233 - Attachment is obsolete: true
Comment on attachment 8886237 [details] [diff] [review]
Suggested patch: Changed box-shadow to border for fxaprofileimage without blank spaces

Review of attachment 8886237 [details] [diff] [review]:
-----------------------------------------------------------------

I'll fold all your patches together and get these checked-in. Thanks!
Attachment #8886237 - Flags: review+
Created attachment 8886242 [details] [diff] [review]
Patch for check-in

Folded Emily's patches for her and updated the commit message.
Attachment #8640470 - Attachment is obsolete: true
Attachment #8885398 - Attachment is obsolete: true
Attachment #8886237 - Attachment is obsolete: true
Attachment #8886242 - Flags: review+
Thank you for fixing this! Once this gets checked in it will show up in Firefox Nightly within 2 days at the most.
Keywords: checkin-needed

Comment 12

2 months ago
Pushed by ryanvm@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/4f2374156926
Change the hover style of the account picture in Sync preferences to have the correct border-width all around. r=jaws
Keywords: checkin-needed

Comment 13

2 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/4f2374156926
Status: ASSIGNED → RESOLVED
Last Resolved: 2 months ago
status-firefox56: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 56

Comment 14

2 months ago
The border is now nicely around the profile picture. The fix is verified on:

---------- Windows 7 (64bit) ----------
Version 	56.0a1
Build ID 	20170718030207
Update Channel 	nightly
User Agent 	Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:42.0) Gecko/20100101 Firefox/56.0

---------- Ubuntu 16.04 (64bit) ----------
Version 	56.0a1
Build ID 	20170718100239
Update Channel 	nightly
User Agent 	Mozilla/5.0 (X11; Linux x86_64; rv:56.0) Gecko/20100101 Firefox/56.0

Marking as verified
Status: RESOLVED → VERIFIED
QA Whiteboard: [bugday-20170719]
QA Whiteboard: [bugday-20170719] → [bugday-20170719][good first verify]
You need to log in before you can comment on or make changes to this bug.