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

Status: VERIFIED FIXED

(Firefox :: Settings UI, defect)

Description

[magicp]

Attachment: 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.

Comment 1

[emilyrcreager]

Attachment: 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).

Comment 2

[emilyrcreager]

Attachment: Suggested patch - Added a blur to the border of the sync account image shadow

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

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?

Comment 4

[Ryan Feeley [: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?

Comment 5

[Jared Wein [:jaws] (please needinfo? me)]

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= )

Comment 6

[emilyrcreager]

Attachment: 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.

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

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.

Comment 8

[emilyrcreager]

Attachment: Suggested patch: Changed box-shadow to border for fxaprofileimage without blank spaces

Removed blank spaces

Comment 9

[Jared Wein [:jaws] (please needinfo? me)]

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!

Comment 10

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch for check-in

Folded Emily's patches for her and updated the commit message.

Comment 11

[Jared Wein [:jaws] (please needinfo? me)]

Thank you for fixing this! Once this gets checked in it will show up in Firefox Nightly within 2 days at the most.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
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

Comment 13

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/4f2374156926

Comment 14

[[:Towkir] Ahmed]

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

Comment 15

[Mohammed Adam]

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]