commit 7f4f986b9d3e98b5a52d7eab0e1b5836b01af39f
parent d5e1aac51c7e6c56958a028b8e312695df2be159
Author: Mark Striemer <mstriemer@mozilla.com>
Date: Fri, 12 Dec 2025 21:20:51 +0000
Bug 1972360 - Convert Color contrast section to config-based prefs r=fluent-reviewers,bolsson,hjones,desktop-theme-reviewers
Differential Revision: https://phabricator.services.mozilla.com/D256548
Diffstat:
7 files changed, 78 insertions(+), 81 deletions(-)
diff --git a/accessible/tests/browser/telemetry/browser_HCM_telemetry.js b/accessible/tests/browser/telemetry/browser_HCM_telemetry.js
@@ -101,7 +101,7 @@ add_task(async function testInit() {
if (AppConstants.platform == "win") {
is(
contrastControlRadios.value,
- "0",
+ 0,
"HCM menulist should be set to only with HCM theme on startup for windows"
);
@@ -115,7 +115,7 @@ add_task(async function testInit() {
} else {
is(
contrastControlRadios.value,
- "1",
+ 1,
"HCM menulist should be set to never on startup for non-windows platforms"
);
@@ -170,7 +170,7 @@ add_task(async function testSetAlways() {
);
newOption.click();
- is(contrastControlRadios.value, "2", "HCM menulist should be set to always");
+ is(contrastControlRadios.value, 2, "HCM menulist should be set to always");
await refresh();
@@ -207,7 +207,7 @@ add_task(async function testSetDefault() {
);
newOption.click();
- is(contrastControlRadios.value, "0", "HCM menulist should be set to default");
+ is(contrastControlRadios.value, 0, "HCM menulist should be set to default");
await refresh();
@@ -260,7 +260,7 @@ add_task(async function testSetNever() {
);
newOption.click();
- is(contrastControlRadios.value, "1", "HCM menulist should be set to never");
+ is(contrastControlRadios.value, 1, "HCM menulist should be set to never");
await refresh();
diff --git a/browser/components/preferences/main.inc.xhtml b/browser/components/preferences/main.inc.xhtml
@@ -77,37 +77,7 @@
</groupbox>
<!-- Colors -->
-<groupbox id="contrastControlGroup" data-category="paneGeneral" hidden="true">
- <label><html:h2 data-l10n-id="preferences-contrast-control-header"/></label>
- <description class="description-deemphasized" data-l10n-id="preferences-contrast-control-description"/>
-
- <radiogroup id="contrastControlSettings" preference="browser.display.document_color_use">
- <radio id="contrastSettingsAuto"
- value="0"
- data-l10n-id="preferences-contrast-control-use-platform-settings"/>
- <radio id="contrastSettingsOff"
- value="1"
- data-l10n-id="preferences-contrast-control-off"/>
- <vbox align="start">
- <radio id="contrastSettingsOn"
- value="2"
- flex="1"
- data-l10n-id="preferences-contrast-control-custom"/>
- <button id="colors"
- is="highlightable-button"
- class="accessory-button indent"
- data-l10n-id="preferences-colors-manage-button"
- search-l10n-ids="
- colors-text-and-background,
- colors-text,
- colors-text-background,
- colors-links-header,
- colors-links-unvisited,
- colors-links-visited
- "/>
- </vbox>
- </radiogroup>
-</groupbox>
+<html:setting-group id="contrastControlGroup" groupid="contrast" data-category="paneGeneral" hidden="true" />
<!-- Fonts -->
<groupbox id="fontsGroup" data-category="paneGeneral" hidden="true">
diff --git a/browser/components/preferences/main.js b/browser/components/preferences/main.js
@@ -1771,6 +1771,19 @@ Preferences.addSetting({
deps: ["zoomText"],
visible: ({ zoomText }) => Boolean(zoomText.value),
});
+Preferences.addSetting({
+ id: "contrastControlSettings",
+ pref: "browser.display.document_color_use",
+});
+Preferences.addSetting({
+ id: "colors",
+ onUserClick() {
+ gSubDialog.open(
+ "chrome://browser/content/preferences/dialogs/colors.xhtml",
+ { features: "resizable=no" }
+ );
+ },
+});
SettingGroupManager.registerGroups({
containers: {
@@ -2196,6 +2209,45 @@ SettingGroupManager.registerGroups({
},
],
},
+ contrast: {
+ l10nId: "preferences-contrast-control-group",
+ headingLevel: 2,
+ items: [
+ {
+ id: "contrastControlSettings",
+ control: "moz-radio-group",
+ l10nId: "preferences-contrast-control-radio-group",
+ options: [
+ {
+ id: "contrastSettingsAuto",
+ value: 0,
+ l10nId: "preferences-contrast-control-use-platform-settings",
+ },
+ {
+ id: "contrastSettingsOff",
+ value: 1,
+ l10nId: "preferences-contrast-control-off",
+ },
+ {
+ id: "contrastSettingsOn",
+ value: 2,
+ l10nId: "preferences-contrast-control-custom",
+ items: [
+ {
+ id: "colors",
+ l10nId: "preferences-colors-manage-button",
+ control: "moz-box-button",
+ controlAttrs: {
+ "search-l10n-ids":
+ "colors-text-and-background, colors-text.label, colors-text-background.label, colors-links-header, colors-links-unvisited.label, colors-links-visited.label",
+ },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
browsing: {
l10nId: "browsing-group-label",
items: [
@@ -3446,6 +3498,7 @@ var gMainPane = {
initSettingGroup("appearance");
initSettingGroup("downloads");
initSettingGroup("drm");
+ initSettingGroup("contrast");
initSettingGroup("browsing");
initSettingGroup("zoom");
initSettingGroup("support");
@@ -3494,12 +3547,6 @@ var gMainPane = {
gMainPane._rebuildFonts.bind(gMainPane)
);
setEventListener("advancedFonts", "command", gMainPane.configureFonts);
- setEventListener("colors", "command", gMainPane.configureColors);
- Preferences.get("browser.display.document_color_use").on(
- "change",
- gMainPane.updateColorsButton.bind(gMainPane)
- );
- gMainPane.updateColorsButton();
document
.getElementById("browserLayoutShowSidebar")
@@ -3810,11 +3857,6 @@ var gMainPane = {
return undefined;
},
- updateColorsButton() {
- document.getElementById("colors").disabled =
- Preferences.get("browser.display.document_color_use").value != 2;
- },
-
/**
* Initialize the translations view.
*/
@@ -4629,17 +4671,6 @@ var gMainPane = {
);
},
- /**
- * Displays the colors dialog, where default web page/link/etc. colors can be
- * configured.
- */
- configureColors() {
- gSubDialog.open(
- "chrome://browser/content/preferences/dialogs/colors.xhtml",
- { features: "resizable=no" }
- );
- },
-
// NETWORK
/**
* Displays a dialog in which proxy settings may be changed.
diff --git a/browser/components/preferences/tests/browser_colors_dialog.js b/browser/components/preferences/tests/browser_colors_dialog.js
@@ -38,32 +38,26 @@ add_task(async function testColorPicker() {
const button = gBrowser.contentDocument.getElementById("colors");
- const radiogroup = content.document.getElementById("contrastControlSettings");
const radioOff = content.document.getElementById("contrastSettingsOff");
const radioCustom = content.document.getElementById("contrastSettingsOn");
- // Focus "Off" Contrast radio button:
- radiogroup.focus();
+ radioOff.focus();
Assert.equal(
- radiogroup,
+ radioOff,
gBrowser.contentDocument.activeElement,
"Radio group for Custom Colors is focused"
);
- Assert.equal(
- radioOff,
- radiogroup.querySelector("radio[focused='true']"),
- "Radio group with option 'Off' is focused"
- );
- Assert.ok(button.disabled, "Manage Colors button is disabled");
+ Assert.ok(button.buttonEl.disabled, "Manage Colors button is disabled");
// Focus "Custom" Contrast radio button:
EventUtils.synthesizeKey("KEY_ArrowDown");
Assert.equal(
radioCustom,
- radiogroup.querySelector("radio[focused='true']"),
+ gBrowser.contentDocument.activeElement,
"Radio group with option 'Custom' is focused"
);
- Assert.ok(!button.disabled, "Manage Colors button is now enabled");
+ await new Promise(r => requestAnimationFrame(r));
+ Assert.ok(!button.buttonEl.disabled, "Manage Colors button is now enabled");
// Focus "Manage Colors" button:
EventUtils.synthesizeKey("KEY_Tab");
diff --git a/browser/locales/en-US/browser/preferences/preferences.ftl b/browser/locales/en-US/browser/preferences/preferences.ftl
@@ -347,9 +347,11 @@ preferences-web-appearance-override-warning3 =
preferences-web-appearance-link =
.label = Manage { -brand-short-name } themes in Extensions & Themes
-preferences-contrast-control-header = Contrast Control
-
-preferences-contrast-control-description = Websites have a variety of foreground and background colors. Configure { -brand-short-name } to use the same colors across websites for improved readability.
+preferences-contrast-control-group =
+ .label = Website contrast
+ .description = Websites use a variety of foreground and background colors. For consistent contrast, you can use the same colors across websites.
+preferences-contrast-control-radio-group =
+ .label = Override colors
preferences-contrast-control-use-platform-settings =
.label = Automatic (use system settings)
diff --git a/toolkit/content/widgets/moz-fieldset/moz-fieldset.css b/toolkit/content/widgets/moz-fieldset/moz-fieldset.css
@@ -19,7 +19,7 @@ legend {
gap: var(--space-small);
align-items: baseline;
- &:has(+ #description) {
+ &:has(+ .description) {
display: flex;
}
@@ -48,9 +48,9 @@ h6 {
margin: 0;
}
-#description {
+.description {
margin: 0;
- margin-block-start: var(--space-xxsmall);
+ margin-block-start: var(--space-xsmall);
color: var(--text-color-deemphasized);
}
@@ -66,7 +66,7 @@ h6 {
column-gap: var(--space-medium);
}
- :is(legend, #description) ~ & {
+ :is(legend, .description) ~ & {
margin-top: var(--space-small);
:host([hasheading]) & {
diff --git a/toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs b/toolkit/content/widgets/moz-fieldset/moz-fieldset.mjs
@@ -106,10 +106,10 @@ export default class MozFieldset extends MozLitElement {
descriptionTemplate() {
if (this.description) {
- return html`<span id="description" class="description">
- ${this.description}
- </span>
- ${this.supportPageTemplate()}`;
+ return html`<div class="description">
+ <span id="description">${this.description}</span>
+ ${this.supportPageTemplate()}
+ </div>`;
}
return "";
}
