1334010 - sideload/update visual fixes

Status: VERIFIED FIXED

(Toolkit :: Add-ons Manager, defect, P1)

Description

[Andrew Swan [:aswan]]

We apparently had some miscommunication about the badge for addon updates, its meant to be a red square with the addon symbol in white as opposed to the addon symbol with a red border.

I realized we're also missing any separate hover color for the hamburger menu items which is disconcerting.  These are both so small, I'll just cover them in this one bug.  Emanuela, can you tell me what color we should use when the mouse is over the menu item?

Comment 1

[Andrew Swan [:aswan]]

Attachment: revised badge

The attached image is what I got when making the proposed change.  This looks pretty terrible to me but I'm not sure exactly what to do.
Emanuela, add this to the open needinfo.

Comment 2

[emanuela [ux]]

Attachment: exclamation mark icon

(In reply to Andrew Swan [:aswan] from comment #1)
> Created attachment 8831024 [details]
> revised badge
> 
> The attached image is what I got when making the proposed change.  This
> looks pretty terrible to me but I'm not sure exactly what to do.
> Emanuela, add this to the open needinfo.

Ok, got it. Let's roll back to the style we have in Figma. Sorry Aswan for the double work, my bad.

Icon: exclamation mark icon (attached)
Badge colour: #bb3817


------

Menu item 

Background:#80D8FF
Hover: #5fccfe
Pressed: #3cc1ff

------

Comment 3

[Andrew Swan [:aswan]]

Attachment: revised badge

This looks a lot better to me.

Comment 4

[Andrew Swan [:aswan]]

Attachment: revised menu entry

Comment 5

[Andrew Swan [:aswan]]

Attachment: bug 1334010 Revise badge and menu item for extension updates

Review commit: https://reviewboard.mozilla.org/r/107860/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/107860/

Comment 6

[Markus Jaritz [:designakt] (UX)]

Attachment: Firefox-Menu-Addon-Notification.PNG

Looking at the other badges we use on the menu, I'd like to stay consistent in color and form. Can we use the existing icon (from failed update) with the color we use for warnings (fxa authentication needed and update download warning)

like this:
#PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
  height: 13px;
  background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
}

With that we keep the same color we use for warnings, which better suits this purpose than using the red we use for alarms and failures.

Comment 7

[Andrew Swan [:aswan]]

Attachment: revised badge

Comment 8

[Andrew Swan [:aswan]]

Attachment: revised menu entry

Comment 9

[Markus Jaritz [:designakt] (UX)]

Comment on attachment 8832252 [details]
revised badge

looks good. Thanks.

Comment 10

[Markus Jaritz [:designakt] (UX)]

Comment on attachment 8832254 [details]
revised menu entry

Seeing that screenshots I noticed that the blue we defined makes the text rather difficult to read. I assume that is also why you added the white shadow to the text.
I would like to change the color to a light version of the badge color. (Sorry for the late modification.)

Comment 11

[Markus Jaritz [:designakt] (UX)]

Attachment: Firefox-Menu-Addon-Notification-Message.PNG

Using a light version of the badge color for the background will make the text better readable.

Comment 12

[Markus Jaritz [:designakt] (UX)]

Attachment: Extension-Sideload-Update-Notification-Background-Color.PNG

I am not sure how you specify those colors, and if you layer them or change them on hover, therefor I share multiple ways how to reach them:
Default #FFEFBF   (#FFBF00 25%)
Hover   #FFE8A2   (#FFBF00 36%   or   Default + #FFBF00 15%)
Press   #FFE38F   (#FFBF00 43%   or   Default + #FFBF00 25%)

Comment 13

[Andrew Swan [:aswan]]

Comment on attachment 8831305 [details]
bug 1334010 Revise badge and menu item for extension updates

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/107860/diff/1-2/

Comment 14

[Florian Quèze [:florian]]

Comment on attachment 8831305 [details]
bug 1334010 Revise badge and menu item for extension updates

https://reviewboard.mozilla.org/r/107860/#review110570

Looks OK. I wonder if there would be a way to make this CSS clearer using a CSS variable for the main #FFBF00 color, and varying opacity for the other cases, to have the logic explained by Markus in comment 12 (thanks by the way!) actually reflected in the code. Having various hex colors is harder to reverse engineer. Probably more effort than this bug is worth though.

Comment 15

[Markus Jaritz [:designakt] (UX)]

Good point Florian, thanks. Would be great if we can use more color vars for primary colors. (It would make it definitely easier to update colors once Photon starts to be implemented.)

Comment 16

[Florian Quèze [:florian]]

Maybe using the hsl notation, so that only the last value changes? I'm reluctant to suggest rgba here, as whatever's under this element could already have a background color.

Comment 17

[Markus Jaritz [:designakt] (UX)]

The default gray button there uses rgba and assumes the panel is white to start from. That is where I got the idea from.
And I noticed that Firefox Accounts also has an implementation for a yellow button already. Not sure though how they do it, or if it could be re-used...

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9898cfdf2139
Revise badge and menu item for extension updates r=florian

Comment 19

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/9898cfdf2139

Comment 20

[Markus Jaritz [:designakt] (UX)]

Attachment: Firefox-Menu-Addon-Notification-Message_no-seperator.PNG

I noticed that the current implementation of the notification misses the separator line on top that other notifications in that area have.

Comment 21

[Andrew Swan [:aswan]]

Filed bug 1337951 for the separator follow-up

Comment 22

[Vasilica Tamas, QA [:vtamas]]

Verified as fixed on Firefox 54.0a1 (2017-02-16/17) under Windows 10 64-bit, Ubuntu 16.04 32-bit and Mac OS X 10.12.1. Sideloading and Update flows respect the figma style: https://www.screencast.com/t/rFquh7DM

Comment 23

[Markus Jaritz [:designakt] (UX)]

Comment on attachment 8832254 [details]
revised menu entry

removing the ui-r as I am probably way too late.