1982026 - Multiple UI differences between the Figma and implemented Online market suggestions

Status: VERIFIED FIXED

(Firefox :: Address Bar, defect, P2)

Description

[Valentin Bandac [:vbandac], Ecosystem QA]

[Affected versions]:

• Firefox Nightly 143.0a1 (Build ID: 20250808040847)

[Affected Platforms]:

• Windows 11 x64
• Ubuntu 24.04 x64
• macOS 15.3

[Prerequisites]:

• Have a 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 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. Click the “Show suggestions” button.
5. Type a market specific keyword (e.g. AMZN, COIN, GOOGL etc).
6. Compare the market online suggestion with the Figma mockup.

[Expected result]:

• Only the company logo has a light grey background;
• The stock ticker symbol is displayed on the same line with the company name;
• The variation percentage and the stock price are displayed on the same line;
• A +/- symbol is displayed in front of the variation percentage.

[Actual result]:

• The whole market online suggestion has a light grey background;
• The stock ticker symbol is NOT displayed;
• The variation percentage and the stock price are displayed on different lines;
• The +/- symbol is NOT displayed in front of the variation percentage.

[Notes]:

• Attached a screenshot of the issue.

Comment 1

[Drew Willcoxon :adw]

Attachment: Bug 1982026 - Make the online market suggestions UI more in line with the spec.

Changes:

• Market row children ("items") aren't buttons anymore since buttons have styling that doesn't match the Figma
• When there's only one item in a row, selection/hover should apply to the whole row, not only the item. (When there are multiple items, selection/hover is applied to each one, as before)
• Items have two lines of text: ${name} · ${symbol} on top, ${change} · ${price} on bottom
• Icons are 36px inside a 52px box
• Icons have -moz-context-properties: fill, fill-opacity;
• On hover, don't change the red/green colors used for the percent-changed text since it doesn't look great and isn't necessary IMO, and I can't find that in the Figma (might be missing it!)
• On selection, use the usual highlight text color for the percent-changed text rather than red/green
• Tweak spacing so things line up a little better and are consistent with one item vs. multiple items

Existing problems this does not fix:

• Row overflow -- when there are multiple items in a row, the last one can still be cut off
• Icons for indexes/funds should be up/down arrows instead of a magnifying glass (bug 1984501)
• When the percent-changes is positive, it should have a + in front but doesn't. That should be fixed on Merino IMO

Depends on D261884

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/1a67e0b3bcec
https://hg.mozilla.org/integration/autoland/rev/934b990644a4
Make the online market suggestions UI more in line with the spec. r=daisuke,desktop-theme-reviewers,dao

Comment 3

[amarc]

https://hg.mozilla.org/mozilla-central/rev/934b990644a4

Comment 4

[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 5

[Drew Willcoxon :adw]

Attachment: Bug 1982026 - Make the online market suggestions UI more in line with the spec.

Changes:

• Market row children ("items") aren't buttons anymore since buttons have styling that doesn't match the Figma
• When there's only one item in a row, selection/hover should apply to the whole row, not only the item. (When there are multiple items, selection/hover is applied to each one, as before)
• Properly show the result menu button in the row when an item is selected
• Items have two lines of text: ${name} · ${symbol} on top, ${change} · ${price} on bottom. The Figma does call for three lines in narrow windows, but this leaves that for a follow-up.
• Icons are 36px wide inside a 52px box
• Some icons from Merino aren't square, so handle them properly
• Contrary to the Figma, on hover, don't change the red/green colors used for the percent-changed text since it doesn't look great IMO and adds complexity
• Contrary to the Figma, on selection, use the usual highlight text color for the percent-changed text rather than red/green to avoid problems like bug 1982535
• Tweak spacing so things line up a little better and are consistent with one item vs. multiple items
• Handle overflow (overflowable: true)

Existing problems this does not fix:

• Icons for indexes/funds should be up/down arrows instead of a magnifying glass (bug 1984501)

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

Comment 6

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/3a62eaef3a9d
https://hg.mozilla.org/releases/mozilla-beta/rev/58414d5f2f1b

Comment 7

[Drew Willcoxon :adw]

Paul pointed out to me that there's still some unintended difference between the implementation and the spec. "USD" should be smaller and the bottom text should be a lighter color. I filed bug 1986122 for that.

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.

• For single suggestions, the hover/focus applies to the entire row.
• For multiple suggestions, the hover/focus applies only to a single suggestion at a time.
• The ... menu is displayed when suggestions are hovered/focused.
• Suggestions have two lines of text: the name and ticker on top, the percentage, the price, and the exchange label on the bottom.
• The red/green colors used for the percent-changed text don't change on hover.
• The red/green colors used for the percent-changed text change their color on focus.