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

VERIFIED FIXED in Firefox 56

Status

()

VERIFIED FIXED
4 years ago
9 months ago

People

(Reporter: magicp.jp, Assigned: emilyrcreager)

Tracking

42 Branch
Firefox 56
Points:
---

Firefox Tracking Flags

(firefox56 fixed, firefox58 verified, firefox59 verified)

Details

Attachments

(1 attachment, 5 obsolete attachments)

(Reporter)

Description

4 years ago
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

4 years ago
Component: Untriaged → Preferences
(Reporter)

Updated

4 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

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

Updated

3 years ago
status-firefox45: --- → affected
(Assignee)

Comment 1

2 years ago
This attachment is the suggested fix for this bug (blur has been added to the shadow around the account profile photo).
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 years ago
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+
(Assignee)

Comment 8

2 years ago
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+
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 years 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 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/4f2374156926
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
status-firefox56: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 56

Comment 14

2 years 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]

Comment 15

a year ago
The border is now good, around the profile picture. The fix is verified on: 

---------- Windows 7 (32bit) ----------
Version           58.0b12
Build ID          20171218174357
Update channel    aurora
User Agent        Mozilla/5.0 (Windows NT 6.1; rv:58.0) Gecko/20100101 Firefox/58.0 

---------- Windows 7 (32bit) ----------
Version 	59.0a1
Build ID 	20171222220251
Update Channel 	nightly
User Agent 	Mozilla/5.0 (Windows NT 6.1; rv:59.0) Gecko/20100101 Firefox/59.0

Marking as verified

[testday-20171222]

Updated

a year ago
status-firefox58: --- → verified
status-firefox59: --- → verified
status-firefox41: affected → ---
status-firefox42: affected → ---
status-firefox43: affected → ---
status-firefox44: affected → ---
status-firefox45: affected → ---
You need to log in before you can comment on or make changes to this bug.