Bug 1728187 - Make the non-native theme not use standins for system colors if forcing colors. r=morgan

We allow using system colors when forcing colors so it makes sense to do this.

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

layout/reftests/high-contrast/reftest.list

@@ -1,5 +1,5 @@
 # This pref enables high-contrast mode in the testcases here:
-defaults test-pref(browser.display.document_color_use,2) test-pref(browser.display.permit_backplate,true) test-pref(layout.css.prefers-contrast.enabled,true) test-pref(layout.css.forced-colors.enabled,true) test-pref(browser.display.foreground_color,"#000000") test-pref(browser.display.background_color,"#FFFFFF")
+defaults test-pref(browser.display.document_color_use,2) test-pref(browser.display.permit_backplate,true) test-pref(layout.css.prefers-contrast.enabled,true) test-pref(layout.css.forced-colors.enabled,true) test-pref(browser.display.foreground_color,"#000000") test-pref(browser.display.background_color,"#FFFFFF") pref(ui.use_standins_for_native_colors,true) pref(widget.non-native-theme.always-use-system-colors,true)
 
 # There are several platform-specific fuzzy-if notations below due to
 # anti-aliasing, extra ink overflow, and slightly inacurate reftest
@@ -14,7 +14,7 @@ fuzzy-if(cocoaWidget,255-255,4-4) == backplate-bg-image-003.html backplate-bg-im
 fuzzy-if(cocoaWidget,255-255,20-20) == backplate-bg-image-004.html backplate-bg-image-004-ref.html
 fuzzy-if(cocoaWidget,255-255,80-80) == backplate-bg-image-005.html backplate-bg-image-005-ref.html
 
-fuzzy-if(cocoaWidget,255-255,40-40) == backplate-bg-image-006.html backplate-bg-image-006-ref.html
+fuzzy-if(cocoaWidget,255-255,60-60) == backplate-bg-image-006.html backplate-bg-image-006-ref.html
 
 fuzzy-if(cocoaWidget,255-255,40-40) == backplate-bg-image-007.html backplate-bg-image-007-ref.html
 fuzzy-if(cocoaWidget,255-255,20-20) fuzzy-if(!cocoaWidget&&!nativeThemePref,0-21,0-6) == backplate-bg-image-008.html backplate-bg-image-008-ref.html

layout/style/PreferenceSheet.cpp

@@ -12,6 +12,7 @@
 #include "mozilla/Preferences.h"
 #include "mozilla/StaticPrefs_browser.h"
 #include "mozilla/StaticPrefs_devtools.h"
+#include "mozilla/StaticPrefs_widget.h"
 #include "mozilla/StaticPrefs_ui.h"
 #include "mozilla/Telemetry.h"
 #include "mozilla/LookAndFeel.h"
@@ -83,6 +84,14 @@ static bool UseDocumentColors(bool aIsChrome, bool aUseAcccessibilityTheme) {
   }
 }
 
+bool PreferenceSheet::Prefs::NonNativeThemeShouldUseSystemColors() const {
+  // We only do that if we are overriding the document colors. Otherwise it
+  // causes issues when pages only override some of the system colors,
+  // specially in dark themes mode.
+  return StaticPrefs::widget_non_native_theme_always_use_system_colors() ||
+         !mUseDocumentColors;
+}
+
 void PreferenceSheet::Prefs::Load(bool aIsChrome) {
   *this = {};
 

layout/style/PreferenceSheet.h

@@ -37,12 +37,7 @@ struct PreferenceSheet {
     bool mUseDocumentColors = true;
 
     // Whether the non-native theme should use system colors for widgets.
-    // We only do that if we have a high-contrast theme _and_ we are overriding
+    bool NonNativeThemeShouldUseSystemColors() const;
-    // the document colors. Otherwise it causes issues when pages only override
-    // some of the system colors, specially in dark themes mode.
-    bool NonNativeThemeShouldUseSystemColors() const {
-      return mUseAccessibilityTheme && !mUseDocumentColors;
-    }
 
     void Load(bool aIsChrome);
   };

layout/style/test/test_dont_use_document_colors.html

@@ -70,8 +70,6 @@ function pushPrefEnvAndWait(args, cb) {
 pushPrefEnvAndWait({'set': [['browser.display.document_color_use', 1]]}, part1);
 
 var transparentBackgroundColor;
-var inputBackgroundColor, inputColor, inputBorderTopColor;
-var inputBorderRightColor, inputBorderLeftColor, inputBorderBottomColor;
 
 function part1()
 {
@@ -106,7 +104,7 @@ function part1()
     isnot(cs5.borderRightColor, cs2.borderRightColor,
           "border-inline-end-color applies");
     isnot(cs5.borderLeftColor, cs2.borderLeftColor,
-          "border-inline-start-color applies");    
+          "border-inline-start-color applies");
     isnot(cs6.borderRightColor, cs2.borderRightColor,
           "border-inline-start-color applies");
     isnot(cs6.borderLeftColor, cs2.borderLeftColor,
@@ -124,15 +122,14 @@ function part1()
           "border-bottom-color applies");
     isnot(cs8.borderImageSource, cs9.borderImageSource, "border-image-source applies");
     transparentBackgroundColor = cs2.backgroundColor;
-    inputBackgroundColor = cs4.backgroundColor;
-    inputColor = cs4.color;
-    inputBorderTopColor = cs4.borderTopColor;
-    inputBorderRightColor = cs4.borderRightColor;
-    inputBorderLeftColor = cs4.borderLeftColor;
-    inputBorderBottomColor = cs4.borderBottomColor;
     pushPrefEnvAndWait({'set': [['browser.display.document_color_use', 2]]}, part2);
 }
 
+function systemColor(c) {
+    let {r, g, b, a} = SpecialPowers.wrap(window).InspectorUtils.colorToRGBA(c, document);
+    return a != 1 ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`;
+}
+
 function part2()
 {
     isnot(cs1.backgroundColor, cs2.backgroundColor, "background-color transparency preserved (opaque)");
@@ -168,14 +165,14 @@ function part2()
        "border-left-color is blocked");
     is(cs3.borderBottomColor, cs4.borderBottomColor,
        "border-bottom-color is blocked");
-    is(cs4.backgroundColor, inputBackgroundColor, "background-color not broken on inputs");
+    is(cs4.backgroundColor, systemColor("ButtonFace"), "background-color not broken on inputs");
-    is(cs4.color, inputColor, "color not broken on inputs");
+    is(cs4.color, systemColor("ButtonText"), "color not broken on inputs");
-    is(cs4.borderTopColor, inputBorderTopColor, "border-top-color not broken on inputs");
+    is(cs4.borderTopColor, systemColor("ThreeDLightShadow"), "border-top-color not broken on inputs");
-    is(cs4.borderRightColor, inputBorderRightColor,
+    is(cs4.borderRightColor, systemColor("ThreeDLightShadow"),
        "border-right-color not broken on inputs");
-    is(cs4.borderLeftColor, inputBorderLeftColor,
+    is(cs4.borderLeftColor, systemColor("ThreeDLightShadow"),
        "border-left-color not broken on inputs");
-    is(cs4.borderBottomColor, inputBorderBottomColor,
+    is(cs4.borderBottomColor, systemColor("ThreeDLightShadow"),
        "border-bottom-color not broken on inputs");
     is(cs8.borderImageSource, cs9.borderImageSource, "border-image-source is blocked");
 

modules/libpref/init/StaticPrefList.yaml

@@ -11601,6 +11601,13 @@
   value: true
   mirror: always
 
+# Whether the non-native theme should always use system colors. Useful mostly
+# for testing forced colors mode.
+- name: widget.non-native-theme.always-use-system-colors
+  type: RelaxedAtomicBool
+  value: false
+  mirror: always
+
 # The size in CSS pixels at full zoom of the minimum scrollbar width.
 - name: widget.non-native-theme.scrollbar.size
   type: uint32_t