Bug 1736218 - Stop using heuristics to determine content color-scheme. r=dao

Use system color-scheme for content for anything that isn't explicitly
opted into.

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

browser/components/extensions/test/browser/browser_toolbar_prefers_color_scheme.js

@@ -3,205 +3,9 @@
 
 "use strict";
 
-async function testThemeDeterminesToolbarQuery(toolbarProp) {
-  let darkModeQuery = window.matchMedia("(-moz-system-dark-theme)");
-  let darkToolbarQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
-  let darkToolbarExtension = ExtensionTestUtils.loadExtension({
-    manifest: {
-      applications: {
-        gecko: {
-          id: "dark@mochi.test",
-        },
-      },
-      theme: {
-        colors: {
-          [toolbarProp]: "#fff",
-        },
-      },
-    },
-  });
-  let lightToolbarExtension = ExtensionTestUtils.loadExtension({
-    manifest: {
-      applications: {
-        gecko: {
-          id: "light@mochi.test",
-        },
-      },
-      theme: {
-        colors: {
-          [toolbarProp]: "#000",
-        },
-      },
-    },
-  });
-
-  let darkToolbarLightContentExtension = ExtensionTestUtils.loadExtension({
-    manifest: {
-      applications: {
-        gecko: {
-          id: "dark-light@mochi.test",
-        },
-      },
-      theme: {
-        colors: {
-          [toolbarProp]: "#fff",
-          ntp_text: "#000",
-        },
-      },
-    },
-  });
-
-  let lightToolbarDarkContentExtension = ExtensionTestUtils.loadExtension({
-    manifest: {
-      applications: {
-        gecko: {
-          id: "light-dark@mochi.test",
-        },
-      },
-      theme: {
-        colors: {
-          [toolbarProp]: "#000",
-          ntp_text: "#fff",
-        },
-      },
-    },
-  });
-
-  let contentTab = await BrowserTestUtils.addTab(
-    gBrowser,
-    "http://example.com/browser/browser/components/extensions/test/browser/file_dummy.html"
-  );
-  await BrowserTestUtils.browserLoaded(contentTab.linkedBrowser);
-
-  let preferencesTab = await BrowserTestUtils.addTab(
-    gBrowser,
-    "about:preferences"
-  );
-  await BrowserTestUtils.browserLoaded(preferencesTab.linkedBrowser);
-
-  function queryMatchesInTab(tab) {
-    gBrowser.selectedTab = tab;
-    return SpecialPowers.spawn(tab.linkedBrowser, [], async () => {
-      // LookAndFeel updates are async.
-      await new Promise(resolve => {
-        content.requestAnimationFrame(() =>
-          content.requestAnimationFrame(resolve)
-        );
-      });
-      return content.matchMedia("(prefers-color-scheme: dark)").matches;
-    });
-  }
-
-  function queryMatchesInContent() {
-    return queryMatchesInTab(contentTab);
-  }
-
-  function queryMatchesInPreferences() {
-    return queryMatchesInTab(preferencesTab);
-  }
-
-  async function testColors(
-    expectedToolbarDark,
-    expectedContentDark,
-    description
-  ) {
-    is(
-      darkToolbarQuery.matches,
-      expectedToolbarDark,
-      "toolbar query " + description
-    );
-
-    is(
-      await queryMatchesInContent(),
-      expectedContentDark,
-      "content query " + description
-    );
-    is(
-      await queryMatchesInPreferences(),
-      expectedContentDark,
-      "about:preferences query " + description
-    );
-  }
-
-  let initialDarkModeMatches = darkModeQuery.matches;
-  await testColors(initialDarkModeMatches, initialDarkModeMatches, "initially");
-
-  async function testExtension(
-    extension,
-    expectedToolbarDark,
-    expectedContentDark
-  ) {
-    await Promise.all([
-      BrowserTestUtils.waitForEvent(darkToolbarQuery, "change"),
-      TestUtils.topicObserved("lightweight-theme-styling-update"),
-      TestUtils.topicObserved("look-and-feel-changed"),
-      extension.startup(),
-    ]);
-
-    info("testing " + extension.id);
-
-    is(darkModeQuery.matches, initialDarkModeMatches, "OS dark mode unchanged");
-    await testColors(expectedToolbarDark, expectedContentDark, extension.id);
-
-    info("tested " + extension.id);
-  }
-
-  let extensions = darkToolbarQuery.matches
-    ? [
-        lightToolbarExtension,
-        darkToolbarExtension,
-        lightToolbarDarkContentExtension,
-        darkToolbarLightContentExtension,
-      ]
-    : [
-        darkToolbarExtension,
-        lightToolbarExtension,
-        darkToolbarLightContentExtension,
-        lightToolbarDarkContentExtension,
-      ];
-
-  await testExtension(
-    extensions[0],
-    !initialDarkModeMatches,
-    !initialDarkModeMatches
-  );
-  await testExtension(
-    extensions[1],
-    initialDarkModeMatches,
-    initialDarkModeMatches
-  );
-  await testExtension(
-    extensions[2],
-    !initialDarkModeMatches,
-    initialDarkModeMatches
-  );
-  await testExtension(
-    extensions[3],
-    initialDarkModeMatches,
-    !initialDarkModeMatches
-  );
-
-  for (let extension of extensions) {
-    await extension.unload();
-  }
-  BrowserTestUtils.removeTab(contentTab);
-  BrowserTestUtils.removeTab(preferencesTab);
-}
-
-add_task(function test_toolbar() {
-  return testThemeDeterminesToolbarQuery("toolbar_text");
-});
-
-// Assert that we fall back to tab_background_text if toolbar is not set.
-add_task(function test_frame() {
-  return testThemeDeterminesToolbarQuery("tab_background_text");
-});
-
 const kDark = 0;
 const kLight = 1;
 const kSystem = 2;
-const kToolbar = 3;
 
 // The above tests should be enough to make sure that the prefs behave as
 // expected, the following ones test various edge cases in a simpler way.
@@ -246,7 +50,7 @@ add_task(async function test_dark_toolbar_dark_text() {
   await testTheme(
     "Dark toolbar color, dark toolbar background",
     kDark,
-    kToolbar,
+    kSystem,
     {
       theme: {
         colors: {
@@ -259,7 +63,7 @@ add_task(async function test_dark_toolbar_dark_text() {
 
   // Dark frame text is ignored as it might be overlaid with an image,
   // see bug 1741931.
-  await testTheme("Dark frame is ignored", kLight, kToolbar, {
+  await testTheme("Dark frame is ignored", kLight, kSystem, {
     theme: {
       colors: {
         frame: "#000000",
@@ -271,7 +75,7 @@ add_task(async function test_dark_toolbar_dark_text() {
   await testTheme(
     "Semi-transparent toolbar backgrounds are ignored.",
     kLight,
-    kToolbar,
+    kSystem,
     {
       theme: {
         colors: {
@@ -290,7 +94,7 @@ add_task(async function dark_theme_presence_overrides_heuristics() {
   await testTheme(
     "darkTheme presence overrides heuristics",
     systemScheme,
-    systemScheme,
+    kSystem,
     {
       theme: {
         colors: {

toolkit/modules/LightweightThemeConsumer.jsm

@@ -450,7 +450,6 @@ function _determineToolbarAndContentTheme(
   const kDark = 0;
   const kLight = 1;
   const kSystem = 2;
-  const kToolbar = 3; // Only valid for content theme
 
   const colors = aTheme?._processedColors;
   function prefValue(aColor, aIsForeground = false) {
@@ -516,7 +515,10 @@ function _determineToolbarAndContentTheme(
 
   let contentTheme = (function() {
     if (!aTheme) {
-      return kToolbar;
+      if (!DEFAULT_THEME_RESPECTS_SYSTEM_COLOR_SCHEME) {
+        return kLight;
+      }
+      return kSystem;
     }
     let themeValue = colorSchemeValue(
       aTheme.content_color_scheme || aTheme.color_scheme
@@ -524,18 +526,7 @@ function _determineToolbarAndContentTheme(
     if (themeValue !== null) {
       return themeValue;
     }
-    if (aHasDarkTheme) {
-      return aIsDarkTheme ? kDark : kLight;
-    }
-    if (colors.ntp_background) {
-      // We don't care about transparency here as ntp background can't have
-      // transparency (alpha channel is dropped).
-      return prefValue(colors.ntp_background);
-    }
-    if (colors.ntp_text) {
-      return prefValue(colors.ntp_text, /* aIsForeground = */ true);
-    }
-    return kToolbar;
+    return kSystem;
   })();
 
   Services.prefs.setIntPref("browser.theme.toolbar-theme", toolbarTheme);

widget/nsXPLookAndFeel.cpp

@@ -1165,10 +1165,8 @@ ColorScheme LookAndFeel::ThemeDerivedColorSchemeForContent() {
       return ColorScheme::Dark;
     case 1:  // Light
       return ColorScheme::Light;
-    case 2:  // System
-      return SystemColorScheme();
     default:
-      return ColorSchemeForChrome();
+      return SystemColorScheme();
   }
 }