Bug 1861328: Disable color mode simulation if RFPTarget::CSSPrefersColorScheme is enabled. r=tjr,devtools-backward-compat-reviewers,devtools-reviewers,ochameau

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

devtools/client/fronts/walker.js

@@ -61,6 +61,9 @@ class WalkerFront extends FrontClassWithSpec(walkerSpec) {
     // calling watchRootNode, so we keep this assignment as a fallback.
     this.rootNode = types.getType("domnode").read(json.root, this);
 
+    // Bug 1861328: boolean set to true when color scheme can't be changed (happens when `privacy.resistFingerprinting` is set to true)
+    this.rfpCSSColorScheme = json.rfpCSSColorScheme;
+
     this.traits = json.traits;
   }
 

devtools/client/inspector/rules/rules.js

@@ -592,6 +592,12 @@ CssRuleView.prototype = {
       "click",
       this._onToggleDarkColorSchemeSimulation
     );
+    const { rfpCSSColorScheme } = this.inspector.walker;
+    if (rfpCSSColorScheme) {
+      this.colorSchemeLightSimulationButton.setAttribute("disabled", true);
+      this.colorSchemeDarkSimulationButton.setAttribute("disabled", true);
+      console.warn("Color scheme simulation is disabled in RFP mode.");
+    }
   },
 
   /**

devtools/client/inspector/rules/test/browser_part1.toml

@@ -114,6 +114,8 @@ skip-if = ["os == 'win' && !debug"] # Bug 1703465
 
 ["browser_rules_color_scheme_simulation_rdm.js"]
 
+["browser_rules_color_scheme_simulation_rfp.js"]
+
 ["browser_rules_colorpicker-and-image-tooltip_01.js"]
 
 ["browser_rules_colorpicker-and-image-tooltip_02.js"]

devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rfp.js

@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test color scheme simulation buttons' state with RFPTarget::CSSPrefersColorScheme enabled
+const TEST_URI = URL_ROOT_SSL + "doc_media_queries.html";
+
+async function runTest(enabled) {
+  const sign = enabled ? "+" : "-";
+  await SpecialPowers.pushPrefEnv({
+    set: [
+      ["privacy.fingerprintingProtection", true],
+      [
+        "privacy.fingerprintingProtection.overrides",
+        `${sign}CSSPrefersColorScheme`,
+      ],
+    ],
+  });
+
+  await addTab(TEST_URI);
+  const { inspector } = await openRuleView();
+
+  info("Check that the color scheme simulation buttons exist");
+  const lightButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-light-toggle"
+  );
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+  ok(lightButton, "The light color scheme simulation button exists");
+  ok(darkButton, "The dark color scheme simulation button exists");
+
+  const expectedState = enabled ? "disabled" : "enabled";
+  is(lightButton.disabled, enabled, `Light button is ${expectedState}`);
+  is(darkButton.disabled, enabled, `Dark button is ${expectedState}`);
+
+  await SpecialPowers.popPrefEnv();
+}
+
+add_task(async function () {
+  await runTest(true);
+});
+
+add_task(async function () {
+  await runTest(false);
+});

devtools/server/actors/inspector/walker.js

@@ -339,6 +339,10 @@ class WalkerActor extends Actor {
     return {
       actor: this.actorID,
       root: this.rootNode.form(),
+      rfpCSSColorScheme: ChromeUtils.shouldResistFingerprinting(
+        "CSSPrefersColorScheme",
+        null
+      ),
       traits: {},
     };
   }

dom/base/ChromeUtils.cpp

@@ -2107,6 +2107,9 @@ bool ChromeUtils::ShouldResistFingerprinting(
     case JSRFPTarget::SiteSpecificZoom:
       target = RFPTarget::SiteSpecificZoom;
       break;
+    case JSRFPTarget::CSSPrefersColorScheme:
+      target = RFPTarget::CSSPrefersColorScheme;
+      break;
     default:
       MOZ_CRASH("Unhandled JSRFPTarget enum value");
   }

dom/chrome-webidl/ChromeUtils.webidl

@@ -1119,6 +1119,7 @@ enum PopupBlockerState {
 enum JSRFPTarget {
   "RoundWindowSize",
   "SiteSpecificZoom",
+  "CSSPrefersColorScheme",
 };
 
 #ifdef XP_UNIX

tools/@types/lib.gecko.dom.d.ts

@@ -25321,7 +25321,7 @@ type ImageOrientation = "flipY" | "from-image" | "none";
 type ImportESModuleTargetGlobal = "contextual" | "current" | "devtools" | "shared";
 type InspectorPropertyType = "color" | "gradient" | "timing-function";
 type IterationCompositeOperation = "accumulate" | "replace";
-type JSRFPTarget = "RoundWindowSize" | "SiteSpecificZoom";
+type JSRFPTarget = "RoundWindowSize" | "SiteSpecificZoom" | "CSSPrefersColorScheme";
 type L10nFileSourceHasFileStatus = "missing" | "present" | "unknown";
 type LatencyMode = "quality" | "realtime";
 type LineAlignSetting = "center" | "end" | "start";