1110009 - Show a warning icon in the legacy-Sync-to-FxA migration menu panel items

Status: RESOLVED FIXED

(Firefox :: Sync, defect)

Description

[Mark Hammond [:markh] [:mhammond]]

Attachment: email-too-long.png

This is probably an edge-case, but the email address I'm using for testing is quite long.  As a result, when we are in a "need verification" state, the hamburger menu only has room to show the email address and not the key message, which is "needs verification".  See attachment.

A reasonable solution might be to ensure a tooltip is displayed with the complete message.  Or we work out how to overflow the left rather than the right.  Or we ignore it :)

Ryan, thoughts?

Comment 1

[Ryan Feeley [:rfeeley]]

The truncation is well done, and you’re right, this is pretty likely to happen, at least for the message.

The icon should be a ! in a triangle which will help. Is it available in the assets?

https://www.dropbox.com/s/0l8aj6sjgjz0xbw/Sync%20Preverified.pdf?dl=0

Comment 2

[Mark Hammond [:markh] [:mhammond]]

Drew, can you look at finding and displaying such an icon?

Comment 3

[Drew Willcoxon :adw]

Ryan, we have a ton of such icons already, but none of them are suitable.  They're all colored yellow except for one we have for OS X, and even that one is low-DPI only.  So we'll need a new image that matches your mockup.  Specifically we'll need two PNGs, one for each low- and high-DPI.

Are you able to supply those, or should we ask someone on desktop UX?

Comment 4

[Ryan Feeley [:rfeeley]]

Attachment: [e-mail]

I exported a PNG at 2x size.

Comment 5

[Drew Willcoxon :adw]

Attachment: Add warning icon to menu panel item

Thanks Ryan.

This copies the following two files to browser/themes/shared/warning16.png and [e-mail]:

http://mxr.mozilla.org/mozilla-central/source/browser/themes/osx/identity-icons-https-mixed-display.png
http://mxr.mozilla.org/mozilla-central/source/browser/themes/osx/[e-mail]

Mark, there were a couple of decisions I made that you might disagree with and I'm open to changing.  (1) Although each of these image files actually has two images in it and we only need one here, I left in both images -- I copied the files bit-for-bit.  (The CSS selects the darker of the two images.)  Because why not, and tying in to the second point: (2) I named these new files generically so we can use them in other places if we want without it being weird.

For comparison, the Sync icon shown in the menu item is here: http://mxr.mozilla.org/mozilla-central/find?text=&string=syncProgress-horizontalbar.png

And the various other icons in the menu panel are here: http://mxr.mozilla.org/mozilla-central/find?string=menuPanel-

Mark, I'm on PTO next week, so if you want to land this, making any changes that you'd like, that'd be OK with me.

Comment 6

[Drew Willcoxon :adw]

Seems like we've rescoped this bug to be about adding a warning icon, so resummarizing to reflect that.  But IMO comment 0 is still worth addressing somehow.

Comment 7

[Mark Hammond [:markh] [:mhammond]]

Comment on attachment 8539565 [details] [diff] [review]
Add warning icon to menu panel item

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

LGTM

Comment 8

[Mark Hammond [:markh] [:mhammond]]

https://hg.mozilla.org/integration/fx-team/rev/f0c081ab5858

Comment 9

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/f0c081ab5858

Comment 10

[Marco Mucci [:MarcoM]]

Hi Drew, can you provide a point value.