1784439 - [Colorway Closet] "Update available" badge lacks visibility with "Balanced" intensity and some colorways

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P3)

Description

[Hani Yacoub, Desktop QA]

Attachment: 2022-08-12_11h02_37.png

Found in

• Firefox 105.0a1

Affected versions

• Firefox 105.0a1

Affected platforms

• Windows 10 x64
• Windows 11 x64
• macOS 11.6
• Ubuntu 20.04 x64

Preconditions
In about:config set:
"browser.theme.colorway-closet" to true
"browser.tabs.firefox-view" to true

Steps to reproduce

1. Make sure not to have the latest Firefox Nightly build -> Update available - restart now should be displayed in the hamburger menu
2. Open "Colorways closet" from Fxview or from about:addons
3. Select "Balanced" intensity with any of the following colorways "playmaker, visionary, activist, dreamer"
4. Open hamburger menu and observe "update available" badge

Expected result
"Update available" badge shouldn't lack visibility.

Actual result
"Update available" badge lacks visibility with "Balanced" intensity and some colorways.

Regression range
Not a regression.

Comment 1

[:Gijs (he/him)]

This is because we're using --panel-banner-item-update-supported-bgcolor both for the in-toolbar badge (where the background is dark-ish to the point that we use a white text colour, and where the colour looks fine) and for the in-menu badge (where the background is bright, and the colour looks bad).

A short-term solution could be to apply some processing logic to the variable and switch to the default colour green for the badge if the background colour of the panel is dark while the background colour of the toolbar is "dark". I'm unsure if there is a better solution available without adding more properties to the per-colourway list.

Comment 2

[Dão Gottwald [:dao]]

(In reply to :Gijs (he/him) from comment #1)

This is because we're using --panel-banner-item-update-supported-bgcolor both for the in-toolbar badge (where the background is dark-ish to the point that we use a white text colour, and where the colour looks fine) and for the in-menu badge (where the background is bright, and the colour looks bad).

A short-term solution could be to apply some processing logic to the variable and switch to the default colour green for the badge if the background colour of the panel is dark while the background colour of the toolbar is "dark".

That's an option. A simpler one would be to stop setting appmenu_update_icon_color in affected colorways. That property is implemented as a custom experiment, i.e. it isn't generally as part of the webext theme API, and the default color should provide sufficient contrast in most cases.

Comment 3

[Dão Gottwald [:dao]]

(In reply to Dão Gottwald [::dao] from comment #2)

(In reply to :Gijs (he/him) from comment #1)

A short-term solution could be to apply some processing logic to the variable and switch to the default colour green for the badge if the background colour of the panel is dark while the background colour of the toolbar is "dark".

That's an option. A simpler one would be to stop setting appmenu_update_icon_color in affected colorways. That property is implemented as a custom experiment, i.e. it isn't generally as part of the webext theme API, and the default color should provide sufficient contrast in most cases.

In fact I think the latter would be the preferred option, because I think the original idea was that the notification dot's color and the color used in the panel should match in order to visually connect the two.

Comment 4

[Dão Gottwald [:dao]]

Attachment: Bug 1784439 - Stop setting appmenu_update_icon_color in Activist/Dreamer/Playmaker Balanced, adopt Visionary Soft color in Visionary Balanced. r=gijs

Comment 5

[Dão Gottwald [:dao]]

FYI, you can test this by running PanelUI._showBadge({id : "update-available"}); PanelUI._showBannerItem({id : "update-available"}); in the browser console.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/93caeb584fdd
Stop setting appmenu_update_icon_color in Activist/Dreamer/Playmaker Balanced, adopt Visionary Soft color in Visionary Balanced. r=Gijs

Comment 7

[Atila Butkovits]

https://hg.mozilla.org/mozilla-central/rev/93caeb584fdd

Comment 8

[Hani Yacoub, Desktop QA]

Verified as fixed on Windows 10/11 x64, Ubuntu 20.04 x64 and on macOS 11.6.