Bug 1788822 - Simplify color-scheme content override pref to only be [dark, light, auto]. r=emilio,fluent-reviewers,extension-reviewers,robwu,flod

Differential Revision: https://phabricator.services.mozilla.com/D156710

browser/components/preferences/main.inc.xhtml

@@ -139,18 +139,11 @@
       </description>
     </html:div>
     <form xmlns="http://www.w3.org/1999/xhtml" id="web-appearance-chooser" autocomplete="off">
-      <label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-browser">
+      <label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-auto">
         <div class="web-appearance-choice-image-container"><img role="presentation" alt="" width="54" height="42" /></div>
         <div class="web-appearance-choice-footer">
-          <input type="radio" name="web-appearance" value="browser" data-l10n-id="preferences-web-appearance-choice-input-browser"
-          /><span data-l10n-id="preferences-web-appearance-choice-browser" />
-        </div>
-      </label>
-      <label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-system">
-        <div class="web-appearance-choice-image-container"><img role="presentation" alt="" width="54" height="42" /></div>
-        <div class="web-appearance-choice-footer">
-          <input type="radio" name="web-appearance" value="system" data-l10n-id="preferences-web-appearance-choice-input-system"
-          /><span data-l10n-id="preferences-web-appearance-choice-system" />
+          <input type="radio" name="web-appearance" value="auto" data-l10n-id="preferences-web-appearance-choice-input-auto"
+          /><span data-l10n-id="preferences-web-appearance-choice-auto" />
         </div>
       </label>
       <label class="web-appearance-choice" data-l10n-id="preferences-web-appearance-choice-tooltip-light">

browser/components/preferences/main.js

@@ -27,7 +27,6 @@ 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)");
-const SYSTEM_DARK_MODE_QUERY = matchMedia("(-moz-system-dark-theme)");
 
 const AUTO_UPDATE_CHANGED_TOPIC =
   UpdateUtils.PER_INSTALLATION_PREFS["app.update.auto"].observerTopic;
@@ -3672,7 +3671,7 @@ const AppearanceChooser = {
   // NOTE: This order must match the values of the
   // layout.css.prefers-color-scheme.content-override
   // preference.
-  choices: ["dark", "light", "system", "browser"],
+  choices: ["dark", "light", "auto"],
   chooser: null,
   radios: null,
   warning: null,
@@ -3713,7 +3712,6 @@ const AppearanceChooser = {
     this.warning = document.getElementById("web-appearance-override-warning");
 
     FORCED_COLORS_QUERY.addEventListener("change", this);
-    SYSTEM_DARK_MODE_QUERY.addEventListener("change", this);
     Services.prefs.addObserver(PREF_USE_SYSTEM_COLORS, this);
     Services.obs.addObserver(this, "look-and-feel-changed");
     this._update();
@@ -3736,7 +3734,6 @@ const AppearanceChooser = {
     Services.prefs.removeObserver(PREF_USE_SYSTEM_COLORS, this);
     Services.obs.removeObserver(this, "look-and-feel-changed");
     FORCED_COLORS_QUERY.removeEventListener("change", this);
-    SYSTEM_DARK_MODE_QUERY.removeEventListener("change", this);
   },
 
   _isValueDark(value) {
@@ -3745,10 +3742,8 @@ const AppearanceChooser = {
         return false;
       case "dark":
         return true;
-      case "browser":
+      case "auto":
         return Services.appinfo.contentThemeDerivedColorSchemeIsDark;
-      case "system":
-        return SYSTEM_DARK_MODE_QUERY.matches;
     }
     throw new Error("Unknown value");
   },

browser/locales/en-US/browser/preferences/preferences.ftl

@@ -229,25 +229,19 @@ preferences-web-appearance-header = Website appearance
 
 preferences-web-appearance-description = Some websites adapt their color scheme based on your preferences. Choose which color scheme you’d like to use for those sites.
 
-preferences-web-appearance-choice-browser = { -brand-short-name } theme
-preferences-web-appearance-choice-system = System theme
+preferences-web-appearance-choice-auto = Automatic
 preferences-web-appearance-choice-light = Light
 preferences-web-appearance-choice-dark = Dark
 
-preferences-web-appearance-choice-tooltip-browser =
-  .title = Match your { -brand-short-name } theme settings for website backgrounds and content.
-preferences-web-appearance-choice-tooltip-system =
-  .title = Match your system settings for website backgrounds and content.
+preferences-web-appearance-choice-tooltip-auto =
+  .title = Automatically change website backgrounds and content based on your system settings and { -brand-short-name } theme.
 preferences-web-appearance-choice-tooltip-light =
   .title = Use a light appearance for website backgrounds and content.
 preferences-web-appearance-choice-tooltip-dark =
   .title = Use a dark appearance for website backgrounds and content.
 
-preferences-web-appearance-choice-input-browser =
-  .aria-description = { preferences-web-appearance-choice-tooltip-browser.title }
-
-preferences-web-appearance-choice-input-system =
-  .aria-description = { preferences-web-appearance-choice-tooltip-system.title }
+preferences-web-appearance-choice-input-auto =
+  .aria-description = { preferences-web-appearance-choice-tooltip-auto.title }
 
 preferences-web-appearance-choice-input-light =
   .aria-description = { preferences-web-appearance-choice-tooltip-light.title }

layout/reftests/bugs/reftest.list

@@ -2133,4 +2133,3 @@ test-pref(widget.non-native-theme.use-theme-accent,false) == 1778834.html 177883
 pref(layout.css.prefers-color-scheme.content-override,0) == 1787127.html 1787127-ref.html
 pref(layout.css.prefers-color-scheme.content-override,1) == 1787127.html 1787127-ref.html
 pref(layout.css.prefers-color-scheme.content-override,2) == 1787127.html 1787127-ref.html
-pref(layout.css.prefers-color-scheme.content-override,3) == 1787127.html 1787127-ref.html

modules/libpref/init/StaticPrefList.yaml

@@ -8130,11 +8130,12 @@
   rust: true
 
 # An override for prefers-color-scheme for content documents.
-#
-# Dark (0), light (1), system (2) or browser (3).
+#   0: Dark
+#   1: Light
+#   2: Auto (system color scheme unless overridden by browser theme)
 - name: layout.css.prefers-color-scheme.content-override
   type: RelaxedAtomicInt32
-  value: 3
+  value: 2
   mirror: always
 
 # Dictates whether or not the forced-colors media query is enabled.

toolkit/components/extensions/ExtensionSettingsStore.jsm

@@ -66,7 +66,7 @@ const SETTING_USER_SET = null;
 const SETTING_PRECEDENCE_ORDER = undefined;
 
 const JSON_FILE_NAME = "extension-settings.json";
-const JSON_FILE_VERSION = 2;
+const JSON_FILE_VERSION = 3;
 const STORE_PATH = PathUtils.join(
   Services.dirsvc.get("ProfD", Ci.nsIFile).path,
   JSON_FILE_NAME
@@ -81,6 +81,9 @@ function dataPostProcessor(json) {
     for (let storeType in json) {
       for (let setting in json[storeType]) {
         for (let extData of json[storeType][setting].precedenceList) {
+          if (setting == "overrideContentColorScheme" && extData.value > 2) {
+            extData.value = 2;
+          }
           if (typeof extData.installDate != "number") {
             extData.installDate = new Date(extData.installDate).valueOf();
           }

toolkit/components/extensions/parent/ext-browserSettings.js

@@ -289,10 +289,8 @@ ExtensionPreferencesManager.addSetting("overrideContentColorScheme", {
         return "dark";
       case 1:
         return "light";
-      case 2:
-        return "system";
       default:
-        return "browser";
+        return "auto";
     }
   },
 });
@@ -517,12 +515,20 @@ this.browserSettings = class extends ExtensionAPI {
           makeSettingsAPI("overrideContentColorScheme"),
           {
             set: details => {
-              let prefValue = ["dark", "light", "system", "browser"].indexOf(
-                details.value
-              );
+              let value = details.value;
+              if (value == "system" || value == "browser") {
+                // Map previous values that used to be different but were
+                // unified under the "auto" setting. In practice this should
+                // almost always behave like the extension author expects.
+                extension.logger.warn(
+                  `The "${value}" value for overrideContentColorScheme has been deprecated. Use "auto" instead`
+                );
+                value = "auto";
+              }
+              let prefValue = ["dark", "light", "auto"].indexOf(value);
               if (prefValue === -1) {
                 throw new ExtensionError(
-                  `${details.value} is not a valid value for overrideContentColorScheme.`
+                  `${value} is not a valid value for overrideContentColorScheme.`
                 );
               }
               return ExtensionPreferencesManager.setSetting(

toolkit/components/extensions/test/browser/browser_ext_themes_ntp_colors.js

@@ -159,10 +159,10 @@ add_task(async function test_support_ntp_colors() {
       // BrowserTestUtils.withNewTab waits for about:newtab to load
       // so we disable preloading before running the test.
       ["browser.newtab.preload", false],
-      // Force prefers-color-scheme to "system", as otherwise it is derived
-      // from the newtab background colors, but we hard-code the light styles
-      // on this test.
-      ["layout.css.prefers-color-scheme.content-override", 2],
+      // Force prefers-color-scheme to "light", as otherwise it might be
+      // derived from the theme, but we hard-code the light styles on this
+      // test.
+      ["layout.css.prefers-color-scheme.content-override", 1],
       // Override the system color scheme to light so this test passes on
       // machines with dark system color scheme.
       ["ui.systemUsesDarkTheme", 0],

toolkit/components/extensions/test/xpcshell/test_ext_browserSettings.js

@@ -48,7 +48,7 @@ add_task(async function test_browser_settings() {
     "browser.tabs.insertRelatedAfterCurrent": true,
     "browser.tabs.insertAfterCurrent": false,
     "browser.display.document_color_use": 1,
-    "layout.css.prefers-color-scheme.content-override": 3,
+    "layout.css.prefers-color-scheme.content-override": 2,
     "browser.display.use_document_fonts": 1,
     "browser.zoom.full": true,
     "browser.zoom.siteSpecific": true,
@@ -278,12 +278,9 @@ add_task(async function test_browser_settings() {
   await testSetting("overrideContentColorScheme", "light", {
     "layout.css.prefers-color-scheme.content-override": 1,
   });
-  await testSetting("overrideContentColorScheme", "system", {
+  await testSetting("overrideContentColorScheme", "auto", {
     "layout.css.prefers-color-scheme.content-override": 2,
   });
-  await testSetting("overrideContentColorScheme", "browser", {
-    "layout.css.prefers-color-scheme.content-override": 3,
-  });
 
   await testSetting("useDocumentFonts", false, {
     "browser.display.use_document_fonts": 0,

widget/nsXPLookAndFeel.cpp

@@ -1299,8 +1299,6 @@ void LookAndFeel::RecomputeColorSchemes() {
         return ColorScheme::Dark;
       case 1:
         return ColorScheme::Light;
-      case 2:
-        return SystemColorScheme();
       default:
         return ThemeDerivedColorSchemeForContent();
     }