tor-browser

commit f03a8af4dc541a45a9c09d0c756601a3beb2f9a4
parent ef3fa635021440c699a053ac28393028b9daf41d
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Thu, 30 Oct 2025 05:58:18 +0000

Bug 1996775 - [devtools] Do not show contrast ratio information for color in contrast-color. r=devtools-reviewers,ochameau.

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

Diffstat:
M
devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js
 | 
25
++++++++++++++++++++-----
M
devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
 | 
5
++++-

2 files changed, 24 insertions(+), 6 deletions(-)
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js
@@ -31,13 +31,18 @@ const TEST_URI = `
       font-size: 100px;
     }
 
-    section {
+    .color-mix {
       color: color-mix(in srgb, blue, var(--title-color) 50%);
     }
+
+    .contrast-color {
+      color: contrast-color(gold);
+    }
   </style>
   <h1>Testing the color picker contrast ratio data</h1>
   <div>————</div>
-  <section>mixed colors</section>
+  <section class="color-mix">mixed colors</section>
+  <section class="contrast-color">mixed colors</section>
 `;
 
 add_task(async function () {
@@ -92,12 +97,12 @@ add_task(async function () {
     expectedMaxContrastValueScore: "19.77",
   });
 
-  await selectNode("section", inspector);
+  await selectNode(".color-mix", inspector);
   await checkColorPickerConstrastData({
     view,
     label:
       "Does not displays contrast information on color within color-mix function (#1)",
-    ruleViewPropertyEl: getRuleViewProperty(view, "section", "color"),
+    ruleViewPropertyEl: getRuleViewProperty(view, ".color-mix", "color"),
     swatchIndex: 0,
     expectVisibleContrast: false,
   });
@@ -105,10 +110,20 @@ add_task(async function () {
     view,
     label:
       "Does not displays contrast information on color within color-mix function (#2)",
-    ruleViewPropertyEl: getRuleViewProperty(view, "section", "color"),
+    ruleViewPropertyEl: getRuleViewProperty(view, ".color-mix", "color"),
     swatchIndex: 1,
     expectVisibleContrast: false,
   });
+
+  await selectNode(".contrast-color", inspector);
+  await checkColorPickerConstrastData({
+    view,
+    label:
+      "Does not displays contrast information on color within `contrast-color` function",
+    ruleViewPropertyEl: getRuleViewProperty(view, ".contrast-color", "color"),
+    swatchIndex: 0,
+    expectVisibleContrast: false,
+  });
 });
 
 async function checkColorPickerConstrastData({
diff --git a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
@@ -100,6 +100,8 @@ class SwatchColorPickerTooltip extends SwatchBasedEditorTooltip {
     this.tooltip.container.addEventListener("keydown", this._onTooltipKeydown);
   }
 
+  static COLOR_MODIFYING_FUNCTIONS = new Set(["color-mix", "contrast-color"]);
+
   /**
    * Fill the tooltip with a new instance of the spectrum color picker widget
    * initialized with the given color, and return the instance of spectrum
@@ -143,7 +145,8 @@ class SwatchColorPickerTooltip extends SwatchBasedEditorTooltip {
     // Only enable contrast if the type of property is color
     // and its value isn't inside a color-modifying function (e.g. color-mix()).
     this.spectrum.contrastEnabled =
-      name === "color" && colorFunction !== "color-mix";
+      name === "color" &&
+      !SwatchColorPickerTooltip.COLOR_MODIFYING_FUNCTIONS.has(colorFunction);
     if (this.spectrum.contrastEnabled) {
       const { nodeFront } = this.inspector.selection;
       const { pageStyle } = nodeFront.inspectorFront;