Bug 1898096 - Replace color settings with "contrast control". r=emilio,fluent-reviewers,settings-reviewers,accessibility-frontend-reviewers,morgan,bolsson,masayuki,mossop,pdfjs-reviewers,calixte

This patch changes the backing prefs by relying on the tristate offered
by browser.display.document_color_use instead of
browser.display.use_system_colors. This simplifies the color
decision tree, and offers a simplified UI.

The tristate preference offered to the user is as follows:
 1. "Use platform's contrast settings" (document_color_use=0)
 2. "Off" - never use HCM, regardless of platform setting (document_color_use=1)
 3. "On" - always use HCM, regardless of platform setting (document_color_use=2)

Option 3 also reveals a colors UI for the user to choose the palette the
browser HCM will use (bg/text/link/visited).

There are three color palettes to choose from in light of the preference
above they are:
 1. WIDGET_COLORS: The OS's configured colors used by its theme.
 2. HARDCODED_COLORS: Colors deemed as standard and are hard coded into
    Firefox (eg. white on black text, blue and purple links).
 3. PREFERENCE_COLORS: Colors that are stored in preferences and are
    configurable from the colors UI (eg. browser.visited_color and
    browser.display.background_color)

The decision over which palette to use is as follows:
 * If we are styling browser UI -> WIDGET_COLORS
 * else, if resist fingerprinting is enabled -> HARDCODED_COLORS
 * else, if document_color_use==0 AND OS HCM is on -> WIDGET_COLORS
 * else, if document_color_use==2 -> PREFERENCE_COLORS
 * else -> HARDCODED_COLORS

Differential Revision: https://phabricator.services.mozilla.com/D211115
This commit is contained in:
Eitan Isaacson
2025-03-05 00:27:44 +00:00
parent 8f72e3027a
commit e55fdd6ce8
19 changed files with 196 additions and 401 deletions

View File

@@ -30,7 +30,6 @@ const PREF_CONTAINERS_EXTENSION = "privacy.userContext.extension";
// Strings to identify ExtensionSettingsStore overrides
const CONTAINERS_KEY = "privacy.containers";
const PREF_USE_SYSTEM_COLORS = "browser.display.use_system_colors";
const PREF_CONTENT_APPEARANCE =
"layout.css.prefers-color-scheme.content-override";
const FORCED_COLORS_QUERY = matchMedia("(forced-colors)");
@@ -105,6 +104,9 @@ Preferences.addAll([
type: "bool",
},
// High Contrast
{ id: "browser.display.document_color_use", type: "int" },
// Fonts
{ id: "font.language.group", type: "wstring" },
@@ -492,6 +494,11 @@ var 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();
Preferences.get("layers.acceleration.disabled").on(
"change",
gMainPane.updateHardwareAcceleration.bind(gMainPane)
@@ -1043,6 +1050,11 @@ var gMainPane = {
document.getElementById("zoomBox").hidden = false;
},
updateColorsButton() {
document.getElementById("colors").disabled =
Preferences.get("browser.display.document_color_use").value != 2;
},
/**
* Initialize the translations view.
*/
@@ -4272,7 +4284,6 @@ const AppearanceChooser = {
this.warning = document.getElementById("web-appearance-override-warning");
FORCED_COLORS_QUERY.addEventListener("change", this);
Services.prefs.addObserver(PREF_USE_SYSTEM_COLORS, this);
Services.obs.addObserver(this, "look-and-feel-changed");
this._update();
},
@@ -4308,7 +4319,6 @@ const AppearanceChooser = {
},
destroy() {
Services.prefs.removeObserver(PREF_USE_SYSTEM_COLORS, this);
Services.obs.removeObserver(this, "look-and-feel-changed");
FORCED_COLORS_QUERY.removeEventListener("change", this);
},
@@ -4343,10 +4353,6 @@ const AppearanceChooser = {
},
_updateWarning() {
let forcingColorsAndNoColorSchemeSupport =
FORCED_COLORS_QUERY.matches &&
(AppConstants.platform == "win" ||
!Services.prefs.getBoolPref(PREF_USE_SYSTEM_COLORS));
this.warning.hidden = !forcingColorsAndNoColorSchemeSupport;
this.warning.hidden = !FORCED_COLORS_QUERY.matches;
},
};