From 6e0691d411ca5df2b632d18c8e72a9879900487e Mon Sep 17 00:00:00 2001 From: Tony Conway Date: Thu, 17 Jul 2025 11:53:38 +0100 Subject: [PATCH 1/4] Adds useful information to Baseline banner --- components/baseline-indicator/server.js | 51 ++++++++++++++++++------- l10n/en-US.ftl | 2 + 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index 86518258c..146b0fdf0 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -180,28 +180,51 @@ export class BaselineIndicator extends ServerComponent {
${level === "high" && low_date ? html`

- ${context.l10n.raw({ - id: "baseline-high-extra", - args: { - date: low_date.toLocaleDateString(context.locale, { - year: "numeric", - month: "long", - }), - }, - })} -

` - : level === "low" && low_date - ? html`

${context.l10n.raw({ - id: "baseline-low-extra", + id: "baseline-high-extra", args: { - date: low_date.toLocaleDateString(DEFAULT_LOCALE, { + date: low_date.toLocaleDateString(context.locale, { year: "numeric", month: "long", }), }, })} +

+

+ ${context.l10n.raw({ + id: "baseline-high-extra-year", + args: { + year: low_date.toLocaleDateString(context.locale, { + year: "numeric", + }), + }, + })}

` + : level === "low" && low_date + ? html`

+ ${context.l10n.raw({ + id: "baseline-low-extra", + args: { + date: low_date.toLocaleDateString(DEFAULT_LOCALE, { + year: "numeric", + month: "long", + }), + }, + })} +

+

+ ${context.l10n.raw({ + id: "baseline-low-extra-widely", + args: { + date: new Date( + low_date.setMonth(low_date.getMonth() + 30), + ).toLocaleDateString(DEFAULT_LOCALE, { + year: "numeric", + month: "long", + }), + }, + })} +

` : html`

${context.l10n("baseline-not-extra")}

`} ${status.asterisk ? html`

diff --git a/l10n/en-US.ftl b/l10n/en-US.ftl index 2ec821307..22829201b 100644 --- a/l10n/en-US.ftl +++ b/l10n/en-US.ftl @@ -6,7 +6,9 @@ article-footer-source-title = Folder: { $folder } (Opens in a new tab) baseline-asterisk = { $asterisk } Some parts of this feature may have varying levels of support. baseline-high-extra = This feature is well established and works across many devices and browser versions. It’s been available across browsers since { $date }. +baseline-high-extra-year = It's part of the Baseline { $year } feature set. baseline-low-extra = Since { $date }, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. +baseline-low-extra-widely = This feature will become Widely available in { $date }. baseline-not-extra = This feature is not Baseline because it does not work in some of the most widely-used browsers. baseline-supported-in = Supported in { $browsers } baseline-unsupported-in = Not widely supported in { $browsers } From 4d55d1fdaead757172edbfb672b0b07b5e910760 Mon Sep 17 00:00:00 2001 From: Tony Conway Date: Thu, 17 Jul 2025 14:26:32 +0100 Subject: [PATCH 2/4] Reformat the location of the Baseline year --- components/baseline-indicator/server.css | 1 + components/baseline-indicator/server.js | 41 +++++++++++------------- l10n/en-US.ftl | 3 +- 3 files changed, 20 insertions(+), 25 deletions(-) diff --git a/components/baseline-indicator/server.css b/components/baseline-indicator/server.css index fe46a1d9a..f8690039a 100644 --- a/components/baseline-indicator/server.css +++ b/components/baseline-indicator/server.css @@ -23,6 +23,7 @@ --baseline-engine-bg: light-dark(#ceead6, #031b05); --baseline-img: url("./icons/status/high.svg"); --baseline-check: #099949; + --baseline-pill-bg: #0fb158; @media (prefers-color-scheme: dark) { --baseline-img: url("./icons/status/high-dark.svg"); diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index 146b0fdf0..ff56ef33c 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -145,13 +145,18 @@ export class BaselineIndicator extends ServerComponent { ${level === "high" ? context.l10n`Widely available` - : low_date?.getFullYear()} + : context.l10n`Newly available`} ${status.asterisk && " *"} `}

- ${level === "low" - ? html`
${context.l10n`Newly available`}
` + ${low_date + ? html`
+ Baseline + ${low_date.toLocaleDateString(context.locale, { + year: "numeric", + })} +
` : nothing}
${ENGINES.map( @@ -180,26 +185,16 @@ export class BaselineIndicator extends ServerComponent {
${level === "high" && low_date ? html`

- ${context.l10n.raw({ - id: "baseline-high-extra", - args: { - date: low_date.toLocaleDateString(context.locale, { - year: "numeric", - month: "long", - }), - }, - })} -

-

- ${context.l10n.raw({ - id: "baseline-high-extra-year", - args: { - year: low_date.toLocaleDateString(context.locale, { - year: "numeric", - }), - }, - })} -

` + ${context.l10n.raw({ + id: "baseline-high-extra", + args: { + date: low_date.toLocaleDateString(context.locale, { + year: "numeric", + month: "long", + }), + }, + })} +

` : level === "low" && low_date ? html`

${context.l10n.raw({ diff --git a/l10n/en-US.ftl b/l10n/en-US.ftl index 6f60d5006..b88e7cd7f 100644 --- a/l10n/en-US.ftl +++ b/l10n/en-US.ftl @@ -6,9 +6,8 @@ article-footer-source-title = Folder: { $folder } (Opens in a new tab) baseline-asterisk = { $asterisk } Some parts of this feature may have varying levels of support. baseline-high-extra = This feature is well established and works across many devices and browser versions. It’s been available across browsers since { $date }. -baseline-high-extra-year = It's part of the Baseline { $year } feature set. baseline-low-extra = Since { $date }, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers. -baseline-low-extra-widely = This feature will become Widely available in { $date }. +baseline-low-extra-widely = This feature will become Widely available in { $date }. baseline-not-extra = This feature is not Baseline because it does not work in some of the most widely-used browsers. baseline-supported-in = Supported in { $browsers } baseline-unsupported-in = Not widely supported in { $browsers } From 773eb7331714ac9c45b2aa2c852b44b40bcbc189 Mon Sep 17 00:00:00 2001 From: Tony Conway Date: Thu, 17 Jul 2025 15:52:19 +0100 Subject: [PATCH 3/4] Reformat place of Baseline year and status --- components/baseline-indicator/server.css | 2 +- components/baseline-indicator/server.js | 27 +++++++++++------------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/components/baseline-indicator/server.css b/components/baseline-indicator/server.css index f8690039a..6039c528f 100644 --- a/components/baseline-indicator/server.css +++ b/components/baseline-indicator/server.css @@ -23,7 +23,7 @@ --baseline-engine-bg: light-dark(#ceead6, #031b05); --baseline-img: url("./icons/status/high.svg"); --baseline-check: #099949; - --baseline-pill-bg: #0fb158; + --baseline-pill-bg: #23a446; @media (prefers-color-scheme: dark) { --baseline-img: url("./icons/status/high-dark.svg"); diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index ff56ef33c..90033e496 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -136,26 +136,23 @@ export class BaselineIndicator extends ServerComponent { : context.l10n`Baseline Check`} >

- ${level === "not" - ? html`${context.l10n`Limited availability`}` - : html` - ${context.l10n`Baseline`} + ${low_date + ? html`${context.l10n`Baseline`} - ${level === "high" - ? context.l10n`Widely available` - : context.l10n`Newly available`} + ${low_date.toLocaleDateString(context.locale, { + year: "numeric", + })} - ${status.asterisk && " *"} - `} + ${status.asterisk && " *"} ` + : html` + ${context.l10n`Limited availability`}`}
${low_date ? html`
- Baseline - ${low_date.toLocaleDateString(context.locale, { - year: "numeric", - })} + ${level === "high" + ? context.l10n`Widely available` + : context.l10n`Newly available`}
` : nothing}
From d400c2ee346ed584326c44ecb64fec7b2821e1aa Mon Sep 17 00:00:00 2001 From: Tony Conway Date: Mon, 21 Jul 2025 14:49:42 +0100 Subject: [PATCH 4/4] Fixed broken formatting for Baseline asterisk --- components/baseline-indicator/server.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index 298675442..a776bf420 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -219,7 +219,7 @@ export class BaselineIndicator extends ServerComponent {

` : html`

${context.l10n("baseline-not-extra")}

`} ${status.asterisk - ? html`

{"* "}${context.l10n("baseline-asterisk")}

` + ? html`

* ${context.l10n("baseline-asterisk")}

` : nothing}