1852697 - Low contrast on the Updates available triangle icon when using dark theme

Status: RESOLVED DUPLICATE of bug 1851612

(Firefox :: Shopping, defect)

Description

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Attachment: image.png

Filled on request per 1849697#c11

Found in

• 119.0a1 (2023-09-11)

Affected versions

• 119.0a1 (2023-09-11)

Tested platforms

• Affected platforms:macOS 12, Windows 10x64, Ubuntu 20

• Unaffected platforms: none

Preconditions

• dark theme enabled
• browser.shopping.experience2023.enabled: true
• browser.shopping.experience2023.optedIn: 1

Steps to reproduce

1. Open an amazon product that needs to be reanalyzed.
2. Observe the yellow-triangle icon.

Expected result

• The icon is visible.

Actual result

• The icon is not so visible.

Regression range

• Not a regression.

Additional notes

• Attached a screenshot.

Comment 1

[Daniel Holbert [:dholbert]]

See https://bugzilla.mozilla.org/attachment.cgi?id=9351661 for a screenshot comparing the light color-scheme to the dark color-scheme, for this UI. This UI looks nearly identical (ignoring the "re-analyzer reviews" link which was fixed in bug 1849697), but the icon is clearly a different color.

Viewing that screenshot in my image editor, the eyedropper tool tells me:

• In the light color-scheme, the triangle icon color is rgb(255,164,54)
• In the dark color-scheme, the triangle icon color is rgb(255,189,79)

These are quite different, as can be seen in this data URI with these colors as color-swatches:

data:text/html,<div style="height:100px; background:rgb(255,164,54)"></div><div style="height:100px; background:rgb(255,189,79)"></div>

There's probably no reason for us to be using a color-scheme-specific icon here, since the rest of this UI (the yellow box) is not color-scheme-specific (and since the icon we're using for the dark scheme has an unfortunate similarity to the yellow-box background color, making it kinda hard to see).

Comment 2

[Daniel Holbert [:dholbert]]

Aha, so it looks like this UI is defined as being inside of a <message-bar type="warning"> element here:
https://searchfox.org/mozilla-central/rev/64eef6b342bca86930caf3ba403c0f8ce621b474/browser/components/shopping/content/shopping-message-bar.mjs#62-63

getStaleWarningTemplate() {
  return html` <message-bar type="warning">

And at least for the dark color-scheme, the icon color probably comes from here:
https://searchfox.org/mozilla-central/rev/64eef6b342bca86930caf3ba403c0f8ce621b474/toolkit/content/widgets/message-bar.css#207,218-219

@media (prefers-color-scheme: dark) {
...
  :host([type=warning]) .icon {
    color: rgb(255,189,79);

(That's the exact RGB value that I measured with my eyedropper in the previous comment.)

Anyway: I'll stop digging now. Hopefully those are some breadcrumbs for folks who work in this area to jump off from.

Comment 3

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

The yellow background is going away as part of bug 1851612. Duping this bug to that issue.

Comment 4

[Daniel Holbert [:dholbert]]

Great, thanks!