commit baa6a8acea8d013d48d0f4027583d46b171738b0
parent a9bdd0b61d05e339b0e26644d7e9e23ef1c259f7
Author: Drew Willcoxon <adw@mozilla.com>
Date: Sat, 1 Nov 2025 19:24:45 +0000
Bug 1997691 - Make flight suggestions break down remaining flight time into hours and minutes. r=daisuke,fluent-reviewers,flod
Depends on D270937
Differential Revision: https://phabricator.services.mozilla.com/D270939
Diffstat:
4 files changed, 38 insertions(+), 30 deletions(-)
diff --git a/browser/components/urlbar/content/enUS-searchFeatures.ftl b/browser/components/urlbar/content/enUS-searchFeatures.ftl
@@ -317,15 +317,11 @@ urlbar-result-flight-status-status-cancelled = Cancelled
urlbar-result-flight-status-status-delayed =
Delayed until { $departureEstimatedTime }
-# This string is shown as the time left minutes.
+# This string is shown as the time remaining in an in-progress flight.
# e.g. 30 min left
# Variables:
-# $timeLeftMinutes (number) - The time left minutes.
-urlbar-result-flight-status-time-left-minutes =
- { $timeLeftMinutes ->
- [one] { $timeLeftMinutes } min left
- *[other] { $timeLeftMinutes } mins left
- }
+# $timeLeft (string) - Localized duration string, e.g., "1 hr, 30 min"
+urlbar-result-flight-status-time-left = { $timeLeft } left
# This string is shown as the airport.
# e.g. Los Angeles (LAX) to New York (JFK)
diff --git a/browser/components/urlbar/private/FlightStatusSuggestions.sys.mjs b/browser/components/urlbar/private/FlightStatusSuggestions.sys.mjs
@@ -83,9 +83,9 @@ export class FlightStatusSuggestions extends RealtimeSuggestProvider {
classList: ["urlbarView-realtime-description-separator-dot"],
},
{
- name: `time_left_minutes_${index}`,
+ name: `time_left_${index}`,
tag: "span",
- classList: ["urlbarView-flightStatus-time-left-minutes"],
+ classList: ["urlbarView-flightStatus-time-left"],
},
];
}
@@ -172,6 +172,21 @@ export class FlightStatusSuggestions extends RealtimeSuggestProvider {
};
}
+ let timeLeft;
+ if (typeof v.time_left_minutes == "number") {
+ let hours = Math.floor(v.time_left_minutes / 60);
+ let minutes = v.time_left_minutes % 60;
+ // TODO Bug 1997547: TypeScript support for `Intl.DurationFormat`
+ // @ts-ignore
+ timeLeft = new Intl.DurationFormat(undefined, {
+ style: "short",
+ }).format({
+ // If hours is zero, pass `undefined` to not show it at all.
+ hours: hours || undefined,
+ minutes,
+ });
+ }
+
return {
[`item_${i}`]: {
attributes: {
@@ -247,19 +262,18 @@ export class FlightStatusSuggestions extends RealtimeSuggestProvider {
excludeArgsFromCacheKey: !!statusL10nArgs,
},
},
- [`time_left_minutes_${i}`]:
- v.time_left_minutes != undefined
- ? {
- l10n: {
- id: "urlbar-result-flight-status-time-left-minutes",
- args: {
- timeLeftMinutes: v.time_left_minutes,
- },
- cacheable: true,
- excludeArgsFromCacheKey: !!statusL10nArgs,
+ [`time_left_${i}`]: timeLeft
+ ? {
+ l10n: {
+ id: "urlbar-result-flight-status-time-left",
+ args: {
+ timeLeft,
},
- }
- : null,
+ cacheable: true,
+ excludeArgsFromCacheKey: !!statusL10nArgs,
+ },
+ }
+ : null,
};
}
}
diff --git a/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_realtime_flight_status.js b/browser/components/urlbar/tests/quicksuggest/browser/browser_quicksuggest_realtime_flight_status.js
@@ -194,7 +194,7 @@ add_task(async function ui_basic() {
origin_airport: "Origin 2 (O2)",
destination_airport: "Destination 2 (D2)",
status: "In flight",
- time_left_minutes: "1 min left",
+ time_left: "1 min left",
url: "https://example.com/A2",
},
{
@@ -206,7 +206,6 @@ add_task(async function ui_basic() {
origin_airport: "Origin 3 (O3)",
destination_airport: "Destination 3 (D3)",
status: "Arrived",
- time_left_minutes: "0 mins left",
url: "https://example.com/A3",
},
{
@@ -296,7 +295,7 @@ add_task(async function ui_delayed() {
},
status: "En Route",
progress_percent: 18,
- time_left_minutes: 10,
+ time_left_minutes: 583,
delayed: true,
url: "https://example.com/D2",
},
@@ -355,7 +354,7 @@ add_task(async function ui_delayed() {
origin_airport: "Origin D2 (OD2)",
destination_airport: "Destination D2 (DD2)",
status: "In flight",
- time_left_minutes: "10 mins left",
+ time_left: "9 hr, 43 min left",
url: "https://example.com/D2",
},
{
@@ -367,7 +366,6 @@ add_task(async function ui_delayed() {
origin_airport: "Origin D3 (OD3)",
destination_airport: "Destination D3 (DD3)",
status: "Arrived",
- time_left_minutes: "0 mins left",
url: "https://example.com/D3",
},
];
@@ -956,9 +954,9 @@ async function assertUI({ row, expectedList }) {
expected.flight_number
);
- let timeLeftMinutes = item.querySelector(`[name=time_left_minutes_${i}]`);
- if (typeof expected.time_left_minutes != "undefined") {
- Assert.equal(timeLeftMinutes.textContent, expected.time_left_minutes);
+ let timeLeftMinutes = item.querySelector(`[name=time_left_${i}]`);
+ if (typeof expected.time_left != "undefined") {
+ Assert.equal(timeLeftMinutes.textContent, expected.time_left);
} else {
Assert.equal(timeLeftMinutes.textContent, "");
let previousSeparator = timeLeftMinutes.previousElementSibling;
diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css
@@ -1612,7 +1612,7 @@
color: var(--red-status-color);
}
- > .urlbarView-realtime-description-separator-dot:has(+ .urlbarView-flightStatus-time-left-minutes:empty) {
+ > .urlbarView-realtime-description-separator-dot:has(+ .urlbarView-flightStatus-time-left:empty) {
display: none;
}
}
