sideload/update visual fixes

VERIFIED FIXED in Firefox 54

Status

()

Toolkit
Add-ons Manager
P1
normal
VERIFIED FIXED
a year ago
a year ago

People

(Reporter: aswan, Assigned: aswan)

Tracking

51 Branch
mozilla54
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox54 verified)

Details

(Whiteboard: triaged)

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(8 attachments, 3 obsolete attachments)

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?
Flags: needinfo?(emanuela)
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.

Comment 2

a year ago
Created attachment 8831180 [details]
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

------
Flags: needinfo?(emanuela)
Created attachment 8831276 [details]
revised badge

This looks a lot better to me.
Attachment #8831024 - Attachment is obsolete: true
Created attachment 8831280 [details]
revised menu entry
Attachment #8831276 - Flags: ui-review?(emanuela)
Attachment #8831280 - Flags: ui-review?(emanuela)
Comment hidden (mozreview-request)
Created attachment 8832051 [details]
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.
Priority: -- → P1
Whiteboard: triaged
Created attachment 8832252 [details]
revised badge
Attachment #8831276 - Attachment is obsolete: true
Attachment #8831276 - Flags: ui-review?(emanuela)
Attachment #8832252 - Flags: ui-review?(mjaritz)
Created attachment 8832254 [details]
revised menu entry
Attachment #8831280 - Attachment is obsolete: true
Attachment #8831280 - Flags: ui-review?(emanuela)
Attachment #8832254 - Flags: ui-review?(mjaritz)
Comment on attachment 8832252 [details]
revised badge

looks good. Thanks.
Attachment #8832252 - Flags: ui-review?(mjaritz) → ui-review+
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.)
Created attachment 8832871 [details]
Firefox-Menu-Addon-Notification-Message.PNG

Using a light version of the badge color for the background will make the text better readable.
Created attachment 8832874 [details]
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 hidden (mozreview-request)
Attachment #8831305 - Flags: review?(florian)

Comment 14

a year ago
mozreview-review
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.
Attachment #8831305 - Flags: review?(florian) → review+
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.)
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.
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

a year ago
Pushed by aswan@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/9898cfdf2139
Revise badge and menu item for extension updates r=florian

Comment 19

a year ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/9898cfdf2139
Status: NEW → RESOLVED
Last Resolved: a year ago
status-firefox54: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla54
Created attachment 8834888 [details]
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.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Blocks: 1337951
Filed bug 1337951 for the separator follow-up
Status: REOPENED → RESOLVED
Last Resolved: a year agoa year ago
Resolution: --- → FIXED
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
Status: RESOLVED → VERIFIED
status-firefox54: fixed → verified
Comment on attachment 8832254 [details]
revised menu entry

removing the ui-r as I am probably way too late.
Attachment #8832254 - Flags: ui-review?(mjaritz)
You need to log in before you can comment on or make changes to this bug.