2040678 - "Heads up!" Some sites may not work as expected" card image is incorrect

Status: RESOLVED FIXED

(Firefox :: Settings UI, defect)

Description

[Stuart Colville [:muffinresearch]]

Filed via slack

STR:

• Go to about:settings#etp and set to custom.
• Notice the card image display
• There's also no learn more link.

What should happen:

• Based on figma there the image in the card should fill that side of the card.
• There should be a learn more link.

What happens:

• The card looks like screenshot (see attachment to follow)
• The learn more link is missing.

Notes from mstriemer on slack:

• The default style changed to imagedisplay="padded" from imagedisplay="cover"
• Updating the config to set that and imagewidth="large" seems like a fix, we probably missed this promo as we were updating the defaults since it was on a subpane.
• I don't see a support link in the config https://searchfox.org/firefox-main/rev/8b3456fa29ad35f58da4cc0a1d182e039124ba5d/browser/components/preferences/config/privacy.mjs#1210-1218
• This diff seemed to change the config, it didn't have a support link then either though https://phabricator.services.mozilla.com/D292198

Comment 1

[Stuart Colville [:muffinresearch]]

Attachment: Screenshot of card with incorrect image placement

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

:bvandersloot, since you are the author of the regressor, bug 1968112, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 3

[Benjamin VanderSloot [:bvandersloot]]

Passing to Emma since the error was carried through the pane migration. Should be an easy fix to set imagewidth="large" and imagedisplay="cover". Unless mstriemer wanted to do it.

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1968112

Comment 5

[Emma Zühlcke [:emz]]

I don't think Bug 1968112 is the regressor and I also don't think that I regressed this. I can still take a look when I have time.

Comment 6

[Donal Meehan [:dmeehan]]

fwiw from a Claude investigation Bug 2011984 — "UI polish pass for Settings Redesign" (commit: 55a8f442befa) is the possible regressor

In toolkit/content/widgets/moz-promo/moz-promo.mjs, that commit:

1. Introduced the imageDisplay property (didn't exist before) with constructor default this.imageDisplay = "padded";
2. Introduced imageWidth with default this.imageWidth = "small";
3. Changed how images render — replaced the CSS-background mechanism (which paints --promo-image-url across the image
   container, effectively "cover") with an <img src=…> element whose layout is driven by the new imageDisplay/imageWidth
   attributes.

Before this commit, there was no "cover vs padded" choice — moz-promo painted the image as a CSS background and that's what
every consumer got. After this commit, any consumer that doesn't explicitly set .imageDisplay = "cover" and .imageWidth =
"large" renders padded-small instead of the old cover-large look.

Comment 7

[Emma Zühlcke [:emz]]

Attachment: Bug 2040678 - Set imagewidth=large and imagedisplay=cover on the ETP custom "Heads up!" promo. r=bvandersloot!

The moz-promo defaults changed to imagewidth=small/imagedisplay=padded, which
left the etpLevelWarning card on about:settings#etp showing a small padded
image instead of the cover layout the Figma design calls for.

Comment 8

[Emma Zühlcke [:emz]]

Thanks! Let's take Bug 2011984 as the regressor.

Comment 9

[Emma Zühlcke [:emz]]

Preferences redesign is only enabled in Nightly. (please bot do not revert my changes)

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/13566be504f7
https://hg.mozilla.org/integration/autoland/rev/fb5ae54066e1
Set imagewidth=large and imagedisplay=cover on the ETP custom "Heads up!" promo. r=bvandersloot,Gijs

Comment 11

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/fb5ae54066e1