1981770 - Multiple UI differences between the Figma and implemented market Opt In section

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P2)

Description

[Carmen Fat [:cfat] - Ecosystem QA]

Attachment: Opt In section UI differences.jpg

[Affected versions]:

• Firefox Nightly 143.0a1 (Build ID: 20250806210618)

[Affected Platforms]:

• Windows 11 x64
• Ubuntu 24.04 x64
• macOS 15.3

[Prerequisites]:

• Have Firefox Nightly 143 installed.
• Be connected to a “US” server using a VPN client.
• Set the following prefs with the next values:
  -> browser.search.region = US
  -> browser.newtabpage.activity-stream.asrouter.devtoolsEnabled = true
  -> browser.urlbar.quicksuggest.enabled = true
  -> browser.urlbar.suggest.realtimeOptIn = true
  -> browser.urlbar.quicksuggest.dynamicSuggestionTypes = realtime_opt_in
  -> browser.urlbar.quicksuggest.dataCollection.enabled = false
  -> browser.urlbar.merino.timeoutMs = 2000
• Using the RS addon, change the environment to Stage (preview) and restart the browser.

[Steps to reproduce]:

1. Open the browser with the profile from prerequisites.
2. Focus the Address Bar.
3. Type a market specific keyword (e.g.: stocks, shares, s and p, netflix stock, etc.).
4. Compare the Opt in section with the Figma mockups.

[Expected result]:

• The section background is light grey;
• The primary CTA button is blue;
• The title of the section is styled with bold characters;
• There are no section separators;

[Actual result]:

• The section background is white;
• The primary CTA button is light grey;
• The title of the section is not styled with bold characters;
• There are 2 section separators (one above and the other one at the bottom of the Opt In section);
• Additionally, the buttons seem smaller;
• And there is noticeable top and bottom padding.

[Notes]:

• Attached is a screenshot of the issue.

Comment 1

[Drew Willcoxon :adw]

The buttons are currently styled the way all urlbar view buttons are styled, and I don't think we should change that just for this feature. We may need to talk to UX since their designs w/r/t buttons keep diverging from what's actually implemented, but for now I think we should ignore that part.

Comment 2

[Drew Willcoxon :adw]

Attachment: Bug 1981770 - Make the Suggest realtime opt-in UI more in line with the spec.

Figma here

Depends on D262064

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/44ab97f9a7ce
https://hg.mozilla.org/integration/autoland/rev/df05ac578233
Make the Suggest realtime opt-in UI more in line with the spec. r=daisuke,desktop-theme-reviewers,dao

Comment 4

[amarc]

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

Comment 5

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:adw, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
  • See https://wiki.mozilla.org/Release_Management/Requesting_an_Uplift for documentation on how to request an uplift.
• If no, please set status-firefox143 to wontfix.

For more information, please visit BugBot documentation.

Comment 6

[Drew Willcoxon :adw]

Attachment: Bug 1981770 - Make the Suggest realtime opt-in UI more in line with the spec.

Figma here

Original Revision: https://phabricator.services.mozilla.com/D262227

Comment 7

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/8ff4090c2114
https://hg.mozilla.org/releases/mozilla-beta/rev/c839b184bff2

Comment 8

[Carmen Fat [:cfat] - Ecosystem QA]

I have verified this issue on the latest Firefox Nightly 144.0a1 (Build ID: 20250903093330) and Beta 143.0b7 (Build ID: 20250901090535) on Windows 11, macOS 15.3, and Ubuntu 24.04 x64.

• The section background is light grey.
• The primary CTA button is blue.
• The title of the section is styled with bold characters.
• There are no section separators.