Bug 1751088 - Choose tabpanel background based on content preferred color-scheme. r=dao

If the theme is dark but user prefers light pages, the background of the
tabpanel should arguably be light, since it can be seen across some
navigations.

Expose a -moz-content-prefers-color-scheme media query to chrome pages
so that our UI can correctly query it (and remove the unused -moz-proton
atom while at it).

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

browser/themes/shared/tabs.inc.css

@@ -20,7 +20,7 @@
   --tabpanel-background-color: #F9F9FB;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (-moz-content-prefers-color-scheme: dark) {
   :root {
     /* --tabpanel-background-color matches $in-content-page-background in newtab
        (browser/components/newtab/content-src/styles/_variables.scss) */

layout/style/GeckoBindings.h

@@ -591,7 +591,7 @@ bool Gecko_MediaFeatures_PrefersReducedMotion(const mozilla::dom::Document*);
 mozilla::StylePrefersContrast Gecko_MediaFeatures_PrefersContrast(
     const mozilla::dom::Document*);
 mozilla::StylePrefersColorScheme Gecko_MediaFeatures_PrefersColorScheme(
-    const mozilla::dom::Document*);
+    const mozilla::dom::Document*, bool aUseContent);
 
 mozilla::PointerCapabilities Gecko_MediaFeatures_PrimaryPointerCapabilities(
     const mozilla::dom::Document*);

layout/style/nsMediaFeatures.cpp

@@ -258,10 +258,11 @@ bool Gecko_MediaFeatures_PrefersReducedMotion(const Document* aDocument) {
 }
 
 StylePrefersColorScheme Gecko_MediaFeatures_PrefersColorScheme(
-    const Document* aDocument) {
-  return aDocument->PreferredColorScheme() == ColorScheme::Dark
-             ? StylePrefersColorScheme::Dark
-             : StylePrefersColorScheme::Light;
+    const Document* aDocument, bool aUseContent) {
+  auto scheme = aUseContent ? LookAndFeel::PreferredColorSchemeForContent()
+                            : aDocument->PreferredColorScheme();
+  return scheme == ColorScheme::Dark ? StylePrefersColorScheme::Dark
+                                     : StylePrefersColorScheme::Light;
 }
 
 // Neither Linux, Windows, nor Mac have a way to indicate that low contrast is

layout/style/test/chrome/chrome-only-media-queries.js

@@ -34,4 +34,6 @@ const CHROME_ONLY_QUERIES = [
   "(-moz-os-version: windows-win7)",
   "(-moz-os-version: windows-win8)",
   "(-moz-os-version: windows-win10)",
+  "(-moz-content-prefers-color-scheme: dark)",
+  "(-moz-content-prefers-color-scheme: light)",
 ];

layout/style/test/test_media_queries.html

@@ -698,8 +698,8 @@ function run() {
     expression_should_not_be_parseable(toggle + ": false");
   }
 
-  for (let toggle of CHROME_ONLY_QUERIES) {
-    expression_should_not_be_parseable(toggle);
+  for (let query of CHROME_ONLY_QUERIES) {
+    query_should_not_be_parseable(query);
   }
 
   {

servo/components/style/gecko/media_features.rs

@@ -396,16 +396,31 @@ fn eval_overflow_inline(device: &Device, query_value: Option<OverflowInline>) ->
     }
 }
 
-/// https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
-fn eval_prefers_color_scheme(device: &Device, query_value: Option<PrefersColorScheme>) -> bool {
+fn do_eval_prefers_color_scheme(
+    device: &Device,
+    use_content: bool,
+    query_value: Option<PrefersColorScheme>,
+) -> bool {
     let prefers_color_scheme =
-        unsafe { bindings::Gecko_MediaFeatures_PrefersColorScheme(device.document()) };
+        unsafe { bindings::Gecko_MediaFeatures_PrefersColorScheme(device.document(), use_content) };
     match query_value {
         Some(v) => prefers_color_scheme == v,
         None => true,
     }
 }
 
+/// https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
+fn eval_prefers_color_scheme(device: &Device, query_value: Option<PrefersColorScheme>) -> bool {
+    do_eval_prefers_color_scheme(device, /* use_content = */ false, query_value)
+}
+
+fn eval_content_prefers_color_scheme(
+    device: &Device,
+    query_value: Option<PrefersColorScheme>,
+) -> bool {
+    do_eval_prefers_color_scheme(device, /* use_content = */ true, query_value)
+}
+
 bitflags! {
     /// https://drafts.csswg.org/mediaqueries-4/#mf-interaction
     struct PointerCapabilities: u8 {
@@ -652,7 +667,7 @@ macro_rules! bool_pref_feature {
 /// to support new types in these entries and (2) ensuring that either
 /// nsPresContext::MediaFeatureValuesChanged is called when the value that
 /// would be returned by the evaluator function could change.
-pub static MEDIA_FEATURES: [MediaFeatureDescription; 57] = [
+pub static MEDIA_FEATURES: [MediaFeatureDescription; 58] = [
     feature!(
         atom!("width"),
         AllowsRanges::Yes,
@@ -805,6 +820,15 @@ pub static MEDIA_FEATURES: [MediaFeatureDescription; 57] = [
         keyword_evaluator!(eval_prefers_color_scheme, PrefersColorScheme),
         ParsingRequirements::empty(),
     ),
+    // Evaluates to the preferred color scheme for content. Only useful in
+    // chrome context, where the chrome color-scheme and the content
+    // color-scheme might differ.
+    feature!(
+        atom!("-moz-content-prefers-color-scheme"),
+        AllowsRanges::No,
+        keyword_evaluator!(eval_content_prefers_color_scheme, PrefersColorScheme),
+        ParsingRequirements::CHROME_AND_UA_ONLY,
+    ),
     feature!(
         atom!("pointer"),
         AllowsRanges::No,

xpcom/ds/StaticAtoms.py

@@ -2241,7 +2241,7 @@ STATIC_ATOMS = [
     Atom("_moz_gtk_csd_close_button_position", "-moz-gtk-csd-close-button-position"),
     Atom("_moz_gtk_csd_reversed_placement", "-moz-gtk-csd-reversed-placement"),
     Atom("_moz_gtk_csd_menu_radius", "-moz-gtk-csd-menu-radius"),
-    Atom("_moz_proton", "-moz-proton"),
+    Atom("_moz_content_prefers_color_scheme", "-moz-content-prefers-color-scheme"),
     Atom("_moz_proton_places_tooltip", "-moz-proton-places-tooltip"),
     Atom("_moz_system_dark_theme", "-moz-system-dark-theme"),
     # application commands