commit e262a8e00f42a0bee94ebe60d1f351ea6531a73b
parent 3eee10668308157f827e775b4cc5cc6a254857fd
Author: Jared Hirsch <ohai@6a68.net>
Date: Fri, 31 Oct 2025 16:11:11 +0000
Bug 1988637 - Add forced-colors notice to about:addons r=fluent-reviewers,bolsson,extension-reviewers,rpl
Differential Revision: https://phabricator.services.mozilla.com/D269915
Diffstat:
5 files changed, 116 insertions(+), 3 deletions(-)
diff --git a/toolkit/locales/en-US/toolkit/about/aboutAddons.ftl b/toolkit/locales/en-US/toolkit/about/aboutAddons.ftl
@@ -344,6 +344,11 @@ colorway-removal-notice-message =
colorway-removal-notice-learn-more = Learn more
colorway-removal-notice-button = Get updated colorways themes
+# Notice to make user aware that themes are not applied in forced colors mode.
+# This notice is only visible on Windows.
+forced-colors-theme-notice =
+ .message = Your Windows contrast settings are overriding { -brand-short-name } themes. Turn off these settings to use themes in { -brand-short-name }.
+
privacy-policy = Privacy Policy
# Refers to the author of an add-on, shown below the name of the add-on.
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.html b/toolkit/mozapps/extensions/content/aboutaddons.html
@@ -718,6 +718,14 @@
</moz-message-bar>
</template>
+ <template name="forced-colors-notice">
+ <moz-message-bar
+ data-l10n-id="forced-colors-theme-notice"
+ data-l10n-attrs="message"
+ >
+ </moz-message-bar>
+ </template>
+
<template name="taar-notice">
<moz-message-bar
class="discopane-notice"
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.js b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -4155,6 +4155,33 @@ class ColorwayRemovalNotice extends HTMLElement {
}
customElements.define("colorway-removal-notice", ColorwayRemovalNotice);
+class ForcedColorsNotice extends HTMLElement {
+ connectedCallback() {
+ this.forcedColorsMediaQuery = window.matchMedia("(forced-colors)");
+ this.forcedColorsMediaQuery.addListener(this);
+ this.render();
+ }
+
+ render() {
+ this.hidden = !this.forcedColorsMediaQuery.matches;
+ if (!this.hidden && this.childElementCount == 0) {
+ this.appendChild(importTemplate("forced-colors-notice"));
+ }
+ }
+
+ handleEvent(e) {
+ if (e.type == "change") {
+ this.render();
+ }
+ }
+
+ disconnectedCallback() {
+ this.forcedColorsMediaQuery?.removeListener(this);
+ this.forcedColorsMediaQuery = null;
+ }
+}
+customElements.define("forced-colors-notice", ForcedColorsNotice);
+
class TaarMessageBar extends HTMLElement {
connectedCallback() {
this.hidden =
@@ -4322,10 +4349,13 @@ gViewController.defineView("list", async type => {
filterFn: disabledAddonsFilterFn,
});
- // Show the colorway warning only in themes list view
+ // Show the colorway and forced-colors notice only in themes list view.
if (type === "theme") {
- const warning = document.createElement("colorway-removal-notice");
- frag.appendChild(warning);
+ const colorwayNotice = document.createElement("colorway-removal-notice");
+ frag.appendChild(colorwayNotice);
+
+ const forcedColorsNotice = document.createElement("forced-colors-notice");
+ frag.appendChild(forcedColorsNotice);
}
list.setSections(sections);
diff --git a/toolkit/mozapps/extensions/test/browser/browser.toml b/toolkit/mozapps/extensions/test/browser/browser.toml
@@ -90,6 +90,9 @@ skip-if = ["os == 'linux' && os_version == '24.04' && arch == 'x86_64' && opt &&
["browser_html_discover_view_prefs.js"]
+["browser_html_forced_colors_notice.js"]
+skip-if = ["os != 'win'"] # Forced-colors is only supported on Windows
+
["browser_html_list_view.js"]
skip-if = ["os == 'linux' && os_version == '24.04' && processor == 'x86_64' && display == 'x11' && opt && a11y_checks && swgl"] # Bug 1781893
diff --git a/toolkit/mozapps/extensions/test/browser/browser_html_forced_colors_notice.js b/toolkit/mozapps/extensions/test/browser/browser_html_forced_colors_notice.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ https://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Verifies that the about:addons theme pane shows a notice in forced-colors
+// mode, alerting users that themes are overridden.
+add_task(async function test_aboutaddons_forced_colors_notice() {
+ const assertForcedColorsNotice = async (addonsWin, { expectVisible }) => {
+ const forcedColorsNotice = addonsWin.document.querySelector(
+ "forced-colors-notice"
+ );
+ Assert.equal(
+ BrowserTestUtils.isVisible(forcedColorsNotice),
+ expectVisible,
+ `Expect forced-colors notice to be ${expectVisible ? "shown" : "hidden"}`
+ );
+ if (expectVisible) {
+ const messageBar = forcedColorsNotice.querySelector("moz-message-bar");
+ Assert.ok(
+ messageBar,
+ "Expect a moz-message-bar to be found in the forced-colors notice"
+ );
+ Assert.equal(
+ messageBar.type,
+ "info",
+ "Got the expected moz-message-bar type"
+ );
+ Assert.equal(
+ messageBar.dataset.l10nId,
+ "forced-colors-theme-notice",
+ "Got the expected fluent ID set on the moz-message-bar"
+ );
+ Assert.equal(
+ messageBar.dismissable,
+ false,
+ "moz-message-bar should not be dismissable"
+ );
+ }
+ };
+
+ info("Open about:addons with forced-colors mode disabled");
+ await SpecialPowers.pushPrefEnv({
+ set: [["ui.useAccessibilityTheme", 0]],
+ });
+ let win = await loadInitialView("theme");
+ await assertForcedColorsNotice(win, { expectVisible: false });
+
+ info("Switch forced-colors mode on");
+ await SpecialPowers.pushPrefEnv({
+ set: [["ui.useAccessibilityTheme", 1]],
+ });
+ await assertForcedColorsNotice(win, { expectVisible: true });
+
+ info("Close and reopen about:addons tab with forced-colors enabled");
+ await closeView(win);
+ win = await loadInitialView("theme");
+ await assertForcedColorsNotice(win, { expectVisible: true });
+
+ info("Switch forced-colors mode off");
+ await SpecialPowers.pushPrefEnv({
+ set: [["ui.useAccessibilityTheme", 0]],
+ });
+ await assertForcedColorsNotice(win, { expectVisible: false });
+
+ await closeView(win);
+});
