2039753 - Sports suggestion UI tweaks for World Cup

Status: VERIFIED FIXED

(Firefox :: Address Bar, task, P1)

Description

[Drew Willcoxon :adw]

Sports suggestion UI tweaks for World Cup to match the latest Figma -- although the Figma is now inconsistent and outdated in some places, so who knows.

1. Move the second team's score (the away team) before the team name so that the two scores are adjacent
2. Increase spacing within the text. We may have implemented too small spacing initially
3. Make WC images (national flags) 44px wide, up from the current 36px

I'm taking 1 and 2 to apply to all sports suggestions.

I'd like to apply 3 to all sports suggestions too because it looks better, especially since the background color situation for team logos doesn't seem close to being resolved. I've asked Paul about it but haven't heard back yet.

The Figma also shows long team names wrapping at the scores, and the first team's score moving to the front when that happens, but I don't think we should do that. I mentioned that to Paul to but didn't get a reply.

Comment 1

[Drew Willcoxon :adw]

Attachment: Bug 2039753 - Tweak urlbar sports suggestions UI for World Cup.

• Show the away team score before the team name so that the scores are next to
  each other

• Add a sport attribute to sports items in the view so that the CSS can detect
  World Cup items so it can increase their image size. I'd like to do this for
  all sports images, especially since the background color situation for sports
  images doesn't seem close to being resolved. I've asked Paul about it but
  haven't heard back yet. So for now it's WC images only. I'll update this patch
  if I hear back in time.

• Update the dot separator and its margins in view-proton.css. I think we
  should have done that when we updated the Nova style. The Proton style still
  uses the em dash as its main separator, but for consistency I copied over the
  CSS variable names from view-nova.css as they are, and I think that's OK.

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/f7ceea5a7edd
https://hg.mozilla.org/integration/autoland/rev/b24c41535778
Tweak urlbar sports suggestions UI for World Cup. r=daisuke,desktop-theme-reviewers,urlbar-reviewers,sfoster

Comment 3

[Drew Willcoxon :adw]

Notes for QA

This made some minor updates to the sports suggestions UI, including but not limited to World Cup suggestions. Please note:

• The revision summary documents the changes that were actually implemented
• The implementation doesn't match the Figma exactly (linked in comment 0)
• Some minor changes apply to all carrots/realtime suggestions, not only sports suggestions: the separator dot and its margins when Nova is not enabled; RTL fix; baseline-aligned text
• There are real screenshots in the phabricator

Could you test the following please?

• With and without Nova enabled
• Both LTR and RTL modes (you can set intl.l10n.pseudo = bidi to simulate RTL)
• All carrots suggestions: sports, market, and flights

We want to make sure there are no regressions and the UIs aren't too far off from the Figma.

Comment 4

[amarc]

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

Comment 5

[Cosmin Muntean [:cmuntean], Ecosystem QA]

I have verified this issue on the latest Nightly 152.0a1 (Build ID: 20260517203605) on Windows 10, macOS 26.2 and Ubuntu 24.04.

• Verified that the countries' flags for the World Cup results are correctly displayed.
• Verified that the World Cup results are displayed correctly.
• Verified that the other Sports (NBA, MLB, NFL and UCL) results are correctly displayed.
  • Verified that the Sports result score is updated and the away team score is displayed before the team name.
• Verified that the Flights results are correctly displayed.
• Verified that the Market results are correctly displayed.
• Verify that the carrots' results are correctly displayed in RTL.

However, during testing, I have observed the following:

1. With Nova enabled for the Flights Status result with the "in flight" status, there is a small artifact in the icon. I think something is written very small, probably "TM"? This is not reproducible on Firefox 151 RC build. (see screenshot)
2. For the NHL and MLB sports logos, there is a small "TM" in the right part of the logo. This seems a server-side change because I can reproduce it also on Firefox RC 151, with Nova enabled and disabled. (see screenshot).
3. In RTL, the team's logo or name is reversed. Not sure if I understand correctly how the sports results should be displayed on RTL, but the name and logo order don't match. This is also reproducible with Firefox 151, and since the results are only available in the US, maybe this is not a problem. (see screenshot).

@Drew, let me know if I should log an issue for any of these.

Comment 6

[Drew Willcoxon :adw]

Thanks Cosmin!

(In reply to Cosmin Muntean [:cmuntean], Ecosystem QA from comment #5)

1. With Nova enabled for the Flights Status result with the "in flight" status, there is a small artifact in the icon. I think something is written very small, probably "TM"? This is not reproducible on Firefox 151 RC build. (see screenshot)

I filed bug 2040532.

2. For the NHL and MLB sports logos, there is a small "TM" in the right part of the logo. This seems a server-side change because I can reproduce it also on Firefox RC 151, with Nova enabled and disabled. (see screenshot).

Right, it's part of the logo images served by Merino and afaik it's expected. It makes sense that these logos have TM's.

3. In RTL, the team's logo or name is reversed. Not sure if I understand correctly how the sports results should be displayed on RTL, but the name and logo order don't match. This is also reproducible with Firefox 151, and since the results are only available in the US, maybe this is not a problem. (see screenshot).

Good question. If the text were actually in an RTL language, I believe it would be rendered RTL and the order would match. The bidi trick with the pref makes the UI RTL but it doesn't affect strings themselves. They'll still use whichever locale/language they're defined in, and in this case these strings are en-US only. Since they are en-US only and aren't even localized, it's not possible to test that aspect right now.