commit 9ea64c60a894af58cd8ec143876a2b5f9c4dc8c4
parent 92af680d0f87865773ccf73813976a05f671eff4
Author: Drew Willcoxon <adw@mozilla.com>
Date: Fri, 7 Nov 2025 21:58:15 +0000
Bug 1998845 - Add generic fallback icons for sports suggestions. r=daisuke,desktop-theme-reviewers,dao
With this change, for sports suggestions that don't have icons and that aren't
in the future, we'll show a generic fallback sport icon. For suggestions that
don't have icons and that are in the future, we'll continue to show a date
chiclet as before. That's the behavior called for in the spec.
In either case, we set `is-fallback` on the row, and the row's image container
will contain the date chiclet day and month spans. When we need to show a
generic icon, the CSS hides the spans and sets a background image.
Sports suggestions that do have icons will have an `img` element inside the
image container instead of date chiclet spans (as before). I could use the `img`
for the generic fallback icon too, but listing each supported sport along with
its fallback icon is better done in the CSS rather than the JS IMO and
consistent with other suggestion types like weather, market, flights, etc.
Depends on D270807
Differential Revision: https://phabricator.services.mozilla.com/D271715
Diffstat:
7 files changed, 666 insertions(+), 80 deletions(-)
diff --git a/browser/components/urlbar/private/SportsSuggestions.sys.mjs b/browser/components/urlbar/private/SportsSuggestions.sys.mjs
@@ -119,6 +119,12 @@ export class SportsSuggestions extends RealtimeSuggestProvider {
return {
...topUpdate,
...this.#viewUpdateImageAndBottom(item, index),
+ [`item_${index}`]: {
+ attributes: {
+ sport: item.sport,
+ status: item.status_type,
+ },
+ },
};
}
@@ -168,8 +174,8 @@ export class SportsSuggestions extends RealtimeSuggestProvider {
imageUpdate = {
[`image_container_${i}`]: {
attributes: {
- // Remove the date-chiclet attribute by setting it to null.
- "is-date-chiclet": null,
+ // Remove the fallback attribute by setting it to null.
+ "is-fallback": null,
},
},
[`image_${i}`]: {
@@ -193,7 +199,7 @@ export class SportsSuggestions extends RealtimeSuggestProvider {
imageUpdate = {
[`image_container_${i}`]: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
[`scheduled-date-chiclet-day-${i}`]: {
diff --git a/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_sports.js b/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_sports.js
@@ -114,6 +114,42 @@ const SUGGESTION_VALUE_SCHEDULED_ICONS_IN_TEAMS = {
},
};
+// NBA game (basketball), live
+const SUGGESTION_VALUE_NBA_LIVE = {
+ ...SUGGESTION_VALUE_LIVE,
+ sport: "NBA",
+};
+
+// NBA game (basketball), scheduled
+const SUGGESTION_VALUE_NBA_SCHEDULED = {
+ ...SUGGESTION_VALUE_SCHEDULED,
+ sport: "NBA",
+};
+
+// NFL game (American football), live
+const SUGGESTION_VALUE_NFL_LIVE = {
+ ...SUGGESTION_VALUE_LIVE,
+ sport: "NFL",
+};
+
+// NFL game (American football), scheduled
+const SUGGESTION_VALUE_NFL_SCHEDULED = {
+ ...SUGGESTION_VALUE_SCHEDULED,
+ sport: "NFL",
+};
+
+// NHL game (hockey), live
+const SUGGESTION_VALUE_NHL_LIVE = {
+ ...SUGGESTION_VALUE_LIVE,
+ sport: "NHL",
+};
+
+// NHL game (hockey), scheduled
+const SUGGESTION_VALUE_NHL_SCHEDULED = {
+ ...SUGGESTION_VALUE_SCHEDULED,
+ sport: "NHL",
+};
+
add_setup(async function () {
await SearchTestUtils.installSearchExtension({}, { setAsDefault: true });
registerCleanupFunction(async () => {
@@ -138,16 +174,32 @@ add_task(async function manyItems() {
await doTest({
now: "2025-10-31T14:00:00-04:00[-04:00]",
suggestions: merinoSuggestions([
+ // games with unknown sports -- should use date chiclet
SUGGESTION_VALUE_PAST,
SUGGESTION_VALUE_LIVE,
SUGGESTION_VALUE_SCHEDULED,
+ // live games with known sports -- should use generic sports icons
+ SUGGESTION_VALUE_NBA_LIVE,
+ SUGGESTION_VALUE_NFL_LIVE,
+ SUGGESTION_VALUE_NHL_LIVE,
+ // scheduled games with known sports -- should use date chiclet
+ SUGGESTION_VALUE_NBA_SCHEDULED,
+ SUGGESTION_VALUE_NFL_SCHEDULED,
+ SUGGESTION_VALUE_NHL_SCHEDULED,
]),
expectedItems: [
+ // games with unknown sports -- should use date chiclet
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "30",
@@ -161,10 +213,16 @@ add_task(async function manyItems() {
status: "",
},
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "31",
@@ -182,10 +240,16 @@ add_task(async function manyItems() {
},
},
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "1",
@@ -211,6 +275,217 @@ add_task(async function manyItems() {
},
status: "",
},
+
+ // live games with known sports -- should use generic sports icons
+ {
+ item: {
+ attributes: {
+ sport: "NBA",
+ status: "live",
+ },
+ },
+ image: null,
+ image_container: {
+ attributes: {
+ "is-fallback": "",
+ },
+ backgroundImage:
+ 'url("chrome://browser/skin/urlbar/sports-basketball.svg")',
+ },
+ "scheduled-date-chiclet-day": {
+ isHidden: true,
+ },
+ "scheduled-date-chiclet-month": {
+ isHidden: true,
+ },
+ "sport-name": "NBA",
+ "home-team-name": "Team 2 Home",
+ "home-team-score": "1",
+ "away-team-name": "Team 2 Away",
+ "away-team-score": "0",
+ date: "Today",
+ status: {
+ l10n: {
+ id: "urlbar-result-sports-status-live",
+ },
+ },
+ },
+ {
+ item: {
+ attributes: {
+ sport: "NFL",
+ status: "live",
+ },
+ },
+ image: null,
+ image_container: {
+ attributes: {
+ "is-fallback": "",
+ },
+ backgroundImage:
+ 'url("chrome://browser/skin/urlbar/sports-american-football.svg")',
+ },
+ "scheduled-date-chiclet-day": {
+ isHidden: true,
+ },
+ "scheduled-date-chiclet-month": {
+ isHidden: true,
+ },
+ "sport-name": "NFL",
+ "home-team-name": "Team 2 Home",
+ "home-team-score": "1",
+ "away-team-name": "Team 2 Away",
+ "away-team-score": "0",
+ date: "Today",
+ status: {
+ l10n: {
+ id: "urlbar-result-sports-status-live",
+ },
+ },
+ },
+ {
+ item: {
+ attributes: {
+ sport: "NHL",
+ status: "live",
+ },
+ },
+ image: null,
+ image_container: {
+ attributes: {
+ "is-fallback": "",
+ },
+ backgroundImage:
+ 'url("chrome://browser/skin/urlbar/sports-hockey.svg")',
+ },
+ "scheduled-date-chiclet-day": {
+ isHidden: true,
+ },
+ "scheduled-date-chiclet-month": {
+ isHidden: true,
+ },
+ "sport-name": "NHL",
+ "home-team-name": "Team 2 Home",
+ "home-team-score": "1",
+ "away-team-name": "Team 2 Away",
+ "away-team-score": "0",
+ date: "Today",
+ status: {
+ l10n: {
+ id: "urlbar-result-sports-status-live",
+ },
+ },
+ },
+
+ // scheduled games with known sports -- should use date chiclet
+ {
+ item: {
+ attributes: {
+ sport: "NBA",
+ status: "scheduled",
+ },
+ },
+ image: null,
+ image_container: {
+ attributes: {
+ "is-fallback": "",
+ },
+ },
+ "scheduled-date-chiclet-day": "1",
+ "scheduled-date-chiclet-month": "Nov",
+ "sport-name": "NBA",
+ "team-names": {
+ l10n: {
+ id: "urlbar-result-sports-team-names",
+ args: {
+ homeTeam: "Team 3 Home",
+ awayTeam: "Team 3 Away",
+ },
+ },
+ },
+ date: {
+ l10n: {
+ id: "urlbar-result-sports-game-date-with-time",
+ args: {
+ date: "Tomorrow",
+ time: "1:00 PM GMT-4",
+ },
+ },
+ },
+ status: "",
+ },
+ {
+ item: {
+ attributes: {
+ sport: "NFL",
+ status: "scheduled",
+ },
+ },
+ image: null,
+ image_container: {
+ attributes: {
+ "is-fallback": "",
+ },
+ },
+ "scheduled-date-chiclet-day": "1",
+ "scheduled-date-chiclet-month": "Nov",
+ "sport-name": "NFL",
+ "team-names": {
+ l10n: {
+ id: "urlbar-result-sports-team-names",
+ args: {
+ homeTeam: "Team 3 Home",
+ awayTeam: "Team 3 Away",
+ },
+ },
+ },
+ date: {
+ l10n: {
+ id: "urlbar-result-sports-game-date-with-time",
+ args: {
+ date: "Tomorrow",
+ time: "1:00 PM GMT-4",
+ },
+ },
+ },
+ status: "",
+ },
+ {
+ item: {
+ attributes: {
+ sport: "NHL",
+ status: "scheduled",
+ },
+ },
+ image: null,
+ image_container: {
+ attributes: {
+ "is-fallback": "",
+ },
+ },
+ "scheduled-date-chiclet-day": "1",
+ "scheduled-date-chiclet-month": "Nov",
+ "sport-name": "NHL",
+ "team-names": {
+ l10n: {
+ id: "urlbar-result-sports-team-names",
+ args: {
+ homeTeam: "Team 3 Home",
+ awayTeam: "Team 3 Away",
+ },
+ },
+ },
+ date: {
+ l10n: {
+ id: "urlbar-result-sports-game-date-with-time",
+ args: {
+ date: "Tomorrow",
+ time: "1:00 PM GMT-4",
+ },
+ },
+ },
+ status: "",
+ },
],
});
});
@@ -221,10 +496,16 @@ add_task(async function past_noScores() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST_NO_SCORES]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "30",
@@ -253,10 +534,16 @@ add_task(async function live_noScores() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE_NO_SCORES]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "31",
@@ -289,9 +576,15 @@ add_task(async function scheduled_iconsInTeams() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED_ICONS_IN_TEAMS]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -337,10 +630,16 @@ add_task(async function past_lastYear_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "30",
@@ -363,9 +662,15 @@ add_task(async function past_lastYear_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -393,10 +698,16 @@ add_task(async function past_beforeYesterday_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "30",
@@ -419,9 +730,15 @@ add_task(async function past_beforeYesterday_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -449,10 +766,16 @@ add_task(async function past_yesterday_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "30",
@@ -475,9 +798,15 @@ add_task(async function past_yesterday_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -505,10 +834,16 @@ add_task(async function past_todayPast_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "30",
@@ -535,9 +870,15 @@ add_task(async function past_todayPast_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -570,10 +911,16 @@ add_task(async function past_todayFuture_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "30",
@@ -601,9 +948,15 @@ add_task(async function past_todayFuture_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_PAST_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 1",
+ status: "past",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -641,10 +994,16 @@ add_task(async function live_lastYear_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "31",
@@ -673,9 +1032,15 @@ add_task(async function live_lastYear_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -708,10 +1073,16 @@ add_task(async function live_beforeYesterday_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "31",
@@ -739,9 +1110,15 @@ add_task(async function live_beforeYesterday_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -775,10 +1152,16 @@ add_task(async function live_yesterday_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "31",
@@ -807,9 +1190,15 @@ add_task(async function live_yesterday_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -841,10 +1230,16 @@ add_task(async function live_todayPast_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "31",
@@ -871,9 +1266,15 @@ add_task(async function live_todayPast_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -906,10 +1307,16 @@ add_task(async function live_todayFuture_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "31",
@@ -937,9 +1344,15 @@ add_task(async function live_todayFuture_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -972,10 +1385,16 @@ add_task(async function live_tomorrow_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "31",
@@ -1003,9 +1422,15 @@ add_task(async function live_tomorrow_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_LIVE_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 2",
+ status: "live",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -1042,10 +1467,16 @@ add_task(async function scheduled_lastYear_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "1",
@@ -1074,9 +1505,15 @@ add_task(async function scheduled_lastYear_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -1110,10 +1547,16 @@ add_task(async function scheduled_beforeYesterday_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "1",
@@ -1142,9 +1585,15 @@ add_task(async function scheduled_beforeYesterday_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -1178,10 +1627,16 @@ add_task(async function scheduled_yesterday_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "1",
@@ -1210,9 +1665,15 @@ add_task(async function scheduled_yesterday_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -1246,10 +1707,16 @@ add_task(async function scheduled_todayPast_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "1",
@@ -1286,9 +1753,15 @@ add_task(async function scheduled_todayPast_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -1329,10 +1802,16 @@ add_task(async function scheduled_todayFuture_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "1",
@@ -1368,9 +1847,15 @@ add_task(async function scheduled_todayFuture_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -1411,10 +1896,16 @@ add_task(async function scheduled_tomorrow_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "1",
@@ -1450,9 +1941,15 @@ add_task(async function scheduled_tomorrow_icon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -1498,10 +1995,16 @@ add_task(async function scheduled_afterTomorrow_noIcon() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image: null,
image_container: {
attributes: {
- "is-date-chiclet": "",
+ "is-fallback": "",
},
},
"scheduled-date-chiclet-day": "1",
@@ -1530,9 +2033,15 @@ add_task(async function scheduled_afterTomorrow_icon_thisYear() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -1567,9 +2076,15 @@ add_task(async function scheduled_afterTomorrow_icon_nextYear() {
suggestions: merinoSuggestions([SUGGESTION_VALUE_SCHEDULED_ICON]),
expectedItems: [
{
+ item: {
+ attributes: {
+ sport: "Sport 3",
+ status: "scheduled",
+ },
+ },
image_container: {
attributes: {
- "is-date-chiclet": null,
+ "is-fallback": null,
},
},
"scheduled-date-chiclet-day": null,
@@ -1638,7 +2153,7 @@ async function doOneTest({ expectedItems }) {
// Check each expected child element in the item.
for (let [childNamePrefix, expectedValue] of Object.entries(expectedItem)) {
- let sep = ["image", "image_container"].includes(childNamePrefix)
+ let sep = ["item", "image", "image_container"].includes(childNamePrefix)
? "_"
: "-";
let childName = `${childNamePrefix}${sep}${i}`;
@@ -1651,18 +2166,60 @@ async function doOneTest({ expectedItems }) {
Assert.ok(child, "Expected child element should exist: " + childName);
- // textContent
+ let backgroundImage = "none";
+ let isHidden = false;
+ let attributes = {};
+ if (typeof expectedValue == "object") {
+ backgroundImage = expectedValue.backgroundImage || backgroundImage;
+ isHidden = !!expectedValue.isHidden || isHidden;
+ attributes = expectedValue.attributes || attributes;
+ }
+
+ // background image
+ Assert.equal(
+ window.getComputedStyle(child).backgroundImage,
+ backgroundImage,
+ "Child element should have expected background-image: " + childName
+ );
+
+ // is hidden
+ Assert.equal(
+ BrowserTestUtils.isVisible(child),
+ !isHidden,
+ "Child element should be visible as expected: " + childName
+ );
+
+ // attributes
+ for (let [attr, value] of Object.entries(attributes)) {
+ if (value === null) {
+ Assert.ok(
+ !child.hasAttribute(attr),
+ "Child element should not have attribute: " +
+ JSON.stringify({ childName, attr })
+ );
+ } else {
+ Assert.ok(
+ child.hasAttribute(attr),
+ "Child element should have expected attribute: " +
+ JSON.stringify({ childName, attr })
+ );
+ Assert.equal(
+ child.getAttribute(attr),
+ value,
+ "Child element attribute should have expected value: " +
+ JSON.stringify({ childName, attr })
+ );
+ }
+ }
+
+ // textContent or l10n
if (typeof expectedValue == "string") {
Assert.equal(
child.textContent,
expectedValue,
"Child element should have expected textContent: " + childName
);
- continue;
- }
-
- // l10n
- if (expectedValue.l10n) {
+ } else if (expectedValue.l10n) {
Assert.equal(
child.dataset.l10nId,
expectedValue.l10n.id,
@@ -1681,31 +2238,6 @@ async function doOneTest({ expectedItems }) {
);
}
}
-
- // attributes
- if (expectedValue.attributes) {
- for (let [attr, value] of Object.entries(expectedValue.attributes)) {
- if (value === null) {
- Assert.ok(
- !child.hasAttribute(attr),
- "Child element should not have attribute: " +
- JSON.stringify({ childName, attr })
- );
- } else {
- Assert.ok(
- child.hasAttribute(attr),
- "Child element should have expected attribute: " +
- JSON.stringify({ childName, attr })
- );
- Assert.equal(
- child.getAttribute(attr),
- value,
- "Child element attribute should have expected value: " +
- JSON.stringify({ childName, attr })
- );
- }
- }
- }
}
}
diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn
@@ -37,6 +37,9 @@
skin/classic/browser/urlbar/market-down.svg (../shared/urlbar/market-down.svg)
skin/classic/browser/urlbar/market-unchanged.svg (../shared/urlbar/market-unchanged.svg)
skin/classic/browser/urlbar/market-up.svg (../shared/urlbar/market-up.svg)
+ skin/classic/browser/urlbar/sports-american-football.svg (../shared/urlbar/sports-american-football.svg)
+ skin/classic/browser/urlbar/sports-basketball.svg (../shared/urlbar/sports-basketball.svg)
+ skin/classic/browser/urlbar/sports-hockey.svg (../shared/urlbar/sports-hockey.svg)
skin/classic/browser/urlbar-dynamic-results.css (../shared/urlbar-dynamic-results.css)
skin/classic/browser/urlbar-searchbar.css (../shared/urlbar-searchbar.css)
skin/classic/browser/urlbarView.css (../shared/urlbarView.css)
diff --git a/browser/themes/shared/urlbar/sports-american-football.svg b/browser/themes/shared/urlbar/sports-american-football.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
+<svg width="29" height="29" viewBox="0 0 29 29" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7408 6.8045C18.037 7.03761 18.3175 7.29817 18.575 7.59011C18.5766 7.59192 18.5778 7.59472 18.5793 7.59658C17.9254 7.95986 17.2827 8.35462 16.6531 8.78039C16.9759 9.15442 17.2416 9.55741 17.4527 9.9847C17.2328 10.2986 16.9627 10.6051 16.6444 10.8858L16.639 10.889C16.4833 10.4822 16.2793 10.1017 16.0207 9.75485L15.7854 9.46456C15.773 9.45049 15.7591 9.43745 15.7466 9.42355C15.3206 9.73899 14.9009 10.0686 14.4894 10.4142L14.0049 10.8307C13.8304 10.9846 13.6583 11.1406 13.489 11.298C13.825 11.6814 14.0993 12.0967 14.3167 12.5368C14.0969 12.8507 13.8267 13.1573 13.5085 13.4379L13.5031 13.4412C13.3474 13.0342 13.1444 12.6529 12.8858 12.3059L12.6937 12.0707C11.9851 12.7877 11.3264 13.5361 10.7189 14.312C10.7238 14.3175 10.7291 14.3227 10.734 14.3282C11.0751 14.7151 11.3538 15.135 11.5736 15.58C11.3537 15.8939 11.0835 16.2004 10.7653 16.4811C10.7634 16.4827 10.7607 16.4837 10.7588 16.4854C10.6031 16.0782 10.4003 15.6962 10.1416 15.3491L10.038 15.2228C9.56101 15.891 9.12003 16.5769 8.71497 17.2775C8.53195 17.1134 8.35571 16.9372 8.18943 16.7487C8.09845 16.6455 8.01134 16.5399 7.92828 16.4325C8.33207 15.754 8.7694 15.0896 9.23834 14.4415C8.81321 14.1195 8.33223 13.8698 7.80634 13.6904C7.89264 13.603 7.98249 13.516 8.0772 13.4325C8.31033 13.227 8.55469 13.0497 8.8013 12.8984C9.19146 13.0787 9.56022 13.2991 9.90417 13.5599C10.514 12.7864 11.172 12.0392 11.8779 11.3228C11.4787 11.0376 11.0339 10.8122 10.5506 10.6473C10.6366 10.5602 10.726 10.4737 10.8203 10.3905C11.0535 10.1848 11.2978 10.0066 11.5444 9.8552C11.9471 10.0413 12.3273 10.2699 12.6808 10.5415C12.8753 10.3596 13.0732 10.1793 13.2743 10.002C13.8001 9.53832 14.3383 9.0982 14.8887 8.68327C14.5225 8.43883 14.1198 8.24289 13.6865 8.09514C13.7726 8.00794 13.863 7.92158 13.9574 7.83831C14.1906 7.63269 14.4348 7.45447 14.6815 7.30306C15.0911 7.49243 15.4767 7.72638 15.8351 8.0045C16.4583 7.57538 17.0938 7.17488 17.7408 6.8045Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.2063 0.516407C19.913 -0.337388 23.7696 -0.134256 27.2868 1.13906C28.4908 4.46427 28.7367 8.09247 28.039 11.611C28.0066 11.7754 27.9732 11.9402 27.9364 12.1041C27.1063 15.8075 25.2229 19.3671 22.2958 22.2943L21.7422 22.8285C19.3218 25.0824 16.51 26.6566 13.5635 27.5497L13.5646 27.5508C13.5586 27.5526 13.5522 27.5533 13.5462 27.5551C9.67067 28.7262 5.56195 28.7177 1.79882 27.5109L1.13947 27.2864C-1.31294 20.5131 0.20221 12.4795 5.59844 6.68472L6.13261 6.13112C8.49852 3.76528 11.2769 2.07937 14.211 1.08187C14.4302 1.00734 14.6494 0.936894 14.8703 0.870361C14.8951 0.862872 14.92 0.856172 14.9448 0.848779C15.1202 0.796683 15.2961 0.74712 15.4725 0.699859C15.5322 0.683742 15.5918 0.666859 15.6516 0.651298C15.6689 0.646843 15.6862 0.642759 15.7034 0.638348L16.2063 0.516407ZM1.60997 17.1847C1.02435 20.2424 1.19949 23.3795 2.13982 26.285C5.17509 27.2678 8.46269 27.4151 11.6491 26.7328C10.5746 24.9472 9.27324 23.2681 7.74267 21.7375C5.89097 19.8858 3.8221 18.3692 1.60997 17.1847ZM16.0779 1.85453C12.7946 2.688 9.64797 4.41367 7.03152 7.03004C4.462 9.59971 2.75257 12.6809 1.90241 15.9005C4.33584 17.1643 6.61147 18.8085 8.64158 20.8386L9.15633 21.3685C10.6332 22.9261 11.888 24.6206 12.9311 26.4101C16.0035 25.5267 18.9354 23.8568 21.3969 21.3954C24.4649 18.3273 26.3043 14.5292 26.9199 10.6376C26.1091 9.54161 25.2108 8.49249 24.221 7.5027C21.805 5.08673 19.0431 3.20567 16.0779 1.85453ZM26.2854 2.13942C23.6815 1.29677 20.892 1.06704 18.1401 1.44985C20.6576 2.78052 23.013 4.49693 25.1199 6.60378C25.8311 7.31498 26.4964 8.05556 27.1185 8.82032C27.2546 6.55048 26.9791 4.28217 26.2854 2.13942Z"/>
+</svg>
diff --git a/browser/themes/shared/urlbar/sports-basketball.svg b/browser/themes/shared/urlbar/sports-basketball.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
+<svg width="30" height="30" viewBox="0 0 30 30" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.41552 1.98779C10.9183 -0.0344106 14.903 -0.46357 18.5325 0.473481C18.553 0.478781 18.5738 0.483202 18.5943 0.488589C22.2873 1.45885 25.6071 3.84612 27.6671 7.41419C31.7609 14.5049 29.3312 23.5718 22.2407 27.6658C18.7365 29.6889 14.7496 30.1179 11.1189 29.1795C11.0988 29.1743 11.0785 29.17 11.0585 29.1648C10.8868 29.1196 10.7161 29.0709 10.5462 29.0196C10.5391 29.0175 10.5319 29.016 10.5248 29.0139C7.04833 27.9601 3.94797 25.6341 1.98828 22.2399C0.0285105 18.8454 -0.435757 14.9978 0.390074 11.46C0.392065 11.4515 0.393526 11.4428 0.395532 11.4343C0.430543 11.2855 0.467969 11.1372 0.507534 10.9896L0.531126 10.9016C0.539712 10.8703 0.549535 10.8393 0.558327 10.808C1.56958 7.2165 3.92899 4.00078 7.41552 1.98779ZM10.6261 17.9237C12.3481 21.1909 12.728 24.8319 11.9426 28.1942C14.9704 28.8489 18.2277 28.4817 21.161 26.9461L14.6205 15.6176L10.6261 17.9237ZM15.6159 15.0429L22.1565 26.3714C24.9525 24.5992 26.8989 21.9624 27.8462 19.0134C24.5417 18.0122 21.5788 15.8616 19.6103 12.7367L15.6159 15.0429ZM3.28692 22.1611C5.09663 25.0134 7.8068 26.9808 10.8293 27.9045C11.5418 24.8244 11.1955 21.4932 9.62988 18.4989L3.28692 22.1611ZM20.6083 12.1606C22.4181 15.0131 25.128 16.9804 28.1506 17.904C28.8626 14.8241 28.516 11.4929 26.9504 8.49894L20.6083 12.1606ZM1.50394 11.7506C0.791379 14.8336 1.14163 18.1684 2.71172 21.1648L9.05553 17.5022C7.24534 14.644 4.53087 12.6746 1.50394 11.7506ZM7.49893 3.28265C4.70292 5.05486 2.75643 7.69199 1.80921 10.6406C5.11722 11.6429 8.08251 13.7973 10.0509 16.9275L14.0453 14.6213L7.49893 3.28265ZM15.0407 14.0466L19.0351 11.7405C17.3086 8.47088 16.9249 4.82577 17.7106 1.45998C14.6835 0.806382 11.4268 1.17275 8.49436 2.70795L15.0407 14.0466ZM18.824 1.74973C18.1113 4.83288 18.462 8.16818 20.0322 11.1648L26.3752 7.50267C24.5649 4.64421 21.851 2.67382 18.824 1.74973Z"/>
+</svg>
diff --git a/browser/themes/shared/urlbar/sports-hockey.svg b/browser/themes/shared/urlbar/sports-hockey.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at https://mozilla.org/MPL/2.0/. -->
+<svg width="32" height="32" viewBox="0 0 32 32" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.4384 0.117086C3.6931 -0.0738465 4.05591 -0.0276801 4.25383 0.229391L12.0829 10.4452C12.525 11.0212 13.2272 11.3689 13.9599 11.369H29.9091L29.9071 11.3915C30.5916 11.4945 31.123 12.0844 31.123 12.7958V18.6288C31.1229 19.2386 30.9549 19.8342 30.6445 20.3563L30.6425 20.3603C30.6421 20.361 30.641 20.3624 30.6396 20.3651C30.6368 20.3703 30.6308 20.3819 30.623 20.3944L30.622 20.3935C30.1324 21.1856 29.3309 21.7452 28.4218 21.9364H28.4189C28.188 21.9823 27.9561 22.0067 27.7236 22.0067C27.6281 22.0067 27.5377 22.0019 27.4452 21.994L24.8779 21.789V26.6483C24.8778 27.9604 23.8777 29.0834 22.3505 29.8661C20.8147 30.6531 18.6953 31.1268 16.3329 31.1269C13.9706 31.1268 11.8512 30.6518 10.3154 29.8642C8.78837 29.0809 7.78909 27.9581 7.78898 26.6483V21.6952C7.7891 20.3235 8.88555 19.1632 10.5409 18.3739C10.4116 18.2162 10.2855 18.0533 10.1669 17.8798L10.1659 17.8788L0.100508 3.0331L0.0995318 3.03213C-0.0792704 2.76507 -0.0117837 2.40171 0.258711 2.2206C0.525449 2.04212 0.887976 2.10812 1.06926 2.37783L6.03801 9.70205L8.87102 8.17177L3.32609 0.936422L3.32512 0.934469C3.13412 0.679785 3.17939 0.31699 3.43645 0.119039L3.4384 0.117086ZM23.7196 23.9862C23.0415 24.5977 22.0999 25.1072 20.9814 25.4784C19.6537 25.919 18.0646 26.1708 16.3427 26.1708C13.1801 26.1708 10.4435 25.3172 8.96574 23.9862V26.6464C8.96586 27.058 9.1527 27.4693 9.51848 27.8622C9.8851 28.2559 10.4235 28.6219 11.0986 28.9345C12.4485 29.5595 14.3134 29.956 16.3427 29.956C18.3719 29.9559 20.2369 29.5581 21.5868 28.9325C22.2619 28.6196 22.8003 28.2538 23.1669 27.8603C23.5327 27.4675 23.7195 27.0567 23.7196 26.6464V23.9862ZM8.80559 26.9999C8.81255 27.0305 8.82322 27.0603 8.83195 27.0907C8.82221 27.0568 8.81117 27.0234 8.80363 26.9892L8.80559 26.9999ZM15.1064 25.9257C15.3054 25.9403 15.507 25.9524 15.7109 25.9599C15.9191 25.9675 16.1299 25.9716 16.3427 25.9716C15.9216 25.9716 15.5088 25.9552 15.1064 25.9257ZM16.3427 18.3817C14.3134 18.3817 12.4485 18.7782 11.0986 19.4032C10.4234 19.7158 9.88511 20.0817 9.51848 20.4755C9.15266 20.8684 8.96579 21.2797 8.96574 21.6913C8.9658 22.103 9.1529 22.5142 9.51848 22.9071C9.88486 23.3008 10.4227 23.6668 11.0976 23.9794C12.4471 24.6044 14.3119 25.0019 16.3427 25.0019C18.372 25.0018 20.2369 24.6044 21.5868 23.9794C22.2619 23.6668 22.8003 23.3008 23.1669 22.9071C23.5326 22.5143 23.7196 22.1029 23.7196 21.6913C23.7196 21.2797 23.5326 20.8684 23.1669 20.4755C22.8003 20.0818 22.2619 19.7158 21.5868 19.4032C20.2369 18.7782 18.372 18.3818 16.3427 18.3817ZM16.7138 25.1972H16.7255C16.8154 25.195 16.9049 25.1911 16.9941 25.1874C16.901 25.1913 16.8076 25.1949 16.7138 25.1972ZM23.8554 22.1259C23.863 22.0987 23.8726 22.0722 23.8788 22.0448L23.8798 22.039C23.8733 22.0683 23.8636 22.0968 23.8554 22.1259ZM6.70109 10.6776L11.1396 17.2274L11.1405 17.2294C11.3077 17.4806 11.4963 17.7074 11.6933 17.9179C13.0259 17.4752 14.6193 17.2206 16.3427 17.2206C18.3976 17.2206 20.2671 17.5799 21.7284 18.1903C23.129 18.7754 24.1815 19.6045 24.6366 20.5976L27.5497 20.831C27.7636 20.8488 27.9784 20.8346 28.1913 20.7919L28.4071 20.7353C28.8321 20.6 29.2121 20.3375 29.4911 19.9853L29.622 19.8017C29.6254 19.7955 29.627 19.7893 29.6298 19.7851C29.6317 19.7821 29.6331 19.7785 29.6347 19.7763C29.8457 19.4289 29.9593 19.032 29.9599 18.6298V12.7958C29.9597 12.6559 29.8495 12.543 29.6991 12.5429H13.9657C12.9389 12.5427 11.9526 12.089 11.289 11.3173L11.1611 11.1591L9.59758 9.11611L6.70109 10.6776ZM17.0956 17.4374C17.1603 17.4402 17.2248 17.4436 17.289 17.4472C17.1018 17.4368 16.9127 17.4289 16.7216 17.4247L17.0956 17.4374ZM13.7724 12.3368L13.9657 12.3427C13.8366 12.3427 13.7081 12.3351 13.581 12.3202C13.6445 12.3277 13.7083 12.333 13.7724 12.3368ZM12.6611 12.0761C12.7196 12.1009 12.7789 12.1239 12.8388 12.1454C12.7195 12.1025 12.6027 12.0529 12.4892 11.997L12.6611 12.0761Z"/>
+</svg>
diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css
@@ -1649,16 +1649,42 @@
/* Realtime sports suggestions */
.urlbarView-row[dynamicType="realtime-sports"] > .urlbarView-realtime-root > .urlbarView-realtime-item {
- > .urlbarView-realtime-image-container[is-date-chiclet] {
+ > .urlbarView-realtime-image-container[is-fallback] {
flex-direction: column;
background-color: var(--violet-bg-color);
- color: var(--violet-fg-color);
+ background-position: center;
+ background-repeat: no-repeat;
border-color: color-mix(in srgb, currentColor 10%, transparent);
+ color: var(--violet-fg-color);
+ fill: var(--violet-fg-color);
+ -moz-context-properties: fill;
> .urlbarView-sports-scheduled-date-chiclet-day {
font-size: 1.25em;
}
+
+ /* Fallback icons per sport but only for games not in the future */
+ .urlbarView-realtime-item:not([status="scheduled"]) > & {
+ .urlbarView-realtime-item[sport="NBA"] > &,
+ .urlbarView-realtime-item[sport="NHL"] > &,
+ .urlbarView-realtime-item[sport="NFL"] > & {
+ /* stylelint-disable-next-line max-nesting-depth */
+ > .urlbarView-sports-scheduled-date-chiclet-day,
+ > .urlbarView-sports-scheduled-date-chiclet-month {
+ display: none;
+ }
+ }
+ .urlbarView-realtime-item[sport="NBA"] > & {
+ background-image: url("chrome://browser/skin/urlbar/sports-basketball.svg");
+ }
+ .urlbarView-realtime-item[sport="NHL"] > & {
+ background-image: url("chrome://browser/skin/urlbar/sports-hockey.svg");
+ }
+ .urlbarView-realtime-item[sport="NFL"] > & {
+ background-image: url("chrome://browser/skin/urlbar/sports-american-football.svg");
+ }
+ }
}
> .urlbarView-realtime-description {
