1763486 - Improve heart animation image asset for dark mode

Status: VERIFIED FIXED

(Firefox :: Messaging System, defect, P1)

Description

[Ed Lee :Mardak]

Attachment: example artifacts with dark

[Tracking Requested - why for this release]: Firefox 100 upgrade spotlight image doesn't look good on dark

The asset that landed in bug 1762270 is a 115x94 gif with light theme background mostly replaced with transparent and rendered as 90x73, so there's some artifacts that show up for dark theme. It was originally used in a remote ECO message and resized to 70x57 in bug 1759680.

We could optimize the image with video codecs like vp9 to get both quality and file size, but that would require changing from setting the image as a background-image: url().

For an asset-only change, we can use a different animated image format that supports actual color transparency.

Comment 1

[Ed Lee :Mardak]

Attachment: Heart-Ribbon.zip with individual png frames

Here's an example with webp adjusting quality and resolution to hit some target file size:

$ ffmpeg -framerate 32.84 -i Heart-Ribbon_%05d.png -c:v libwebp_anim -loop 0 -quality 84 -vf scale=-1:110 -y heart-q84-x110.webp

Comment 2

[Ed Lee :Mardak]

Attachment: heart-q84-x110.webp

Comment 3

[Ed Lee :Mardak]

Attachment: heart-ll-x73.webp

Comment 4

[Ed Lee :Mardak]

Attachment: heart-q45-x146.webp

Comment 5

[Ed Lee :Mardak]

Attachment: heart-q49-x110.webp

Going with this 100KB webp that has good enough 49% quality and high enough 136x110 resolution to look good when resized to 90x73.

Comment 6

[Ed Lee :Mardak]

Attachment: Bug 1763486 - Improve heart animation image asset for dark mode r?dmose

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/66edc75c637b
Improve heart animation image asset for dark mode r=mviar

Comment 8

[Ed Lee :Mardak]

Some would say the gif quality is really bad

Comment 9

[Ed Lee :Mardak]

Comment on attachment 9271183 [details]
Bug 1763486 - Improve heart animation image asset for dark mode r?dmose

Beta/Release Uplift Approval Request

• User impact if declined: Poor quality heart animated gif shown to users upgrading to 100 especially with dark theme, e.g., attachment 9271151 [details]
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce:

0. activate dark theme
1. configure to show upgrade spotlight (browser.startup.homepage_override.mstone set to "99", browser.startup.upgradeDialog.version set to 94)
2. restart Firefox

• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Image asset change from .gif to .webp
• String changes made/needed: none

Comment 10

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/66edc75c637b

Comment 11

[Simona Rosu [:srosu], Ecosystem QA]

I‘ve verified this issue using the latest Firefox Nightly 101.0a1 (Build ID: 20220408094506) on Windows 10 x64, macOS 11.6, and Ubuntu 20.04.

• The heart logo is correctly visible when Dark theme is enabled and the “brand-logo” class has the “chrome://activity-stream/content/data/content/assets/heart.webp” URL.

Comment 12

[Dianna Smith [:diannaS]]

Comment on attachment 9271183 [details]
Bug 1763486 - Improve heart animation image asset for dark mode r?dmose

Approved for 100.0b4

Comment 13

[Dianna Smith [:diannaS]]

https://hg.mozilla.org/releases/mozilla-beta/rev/1c76249d4de7

Comment 14

[Simona Rosu [:srosu], Ecosystem QA]

I‘ve verified this issue using Firefox Beta 100.0b6 (Build ID: 20220414190112) on Windows 10 x64, macOS 11.6, and Ubuntu 20.04.

• The heart logo is correctly visible when Dark theme is enabled and the “brand-logo” class has the “chrome://activity-stream/content/data/content/assets/heart.webp” URL.