From b6b0dae2b990f83554e8e97f5ffc13883ea28f6d Mon Sep 17 00:00:00 2001
From: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Wed, 15 Feb 2023 15:54:20 +0000
Subject: [PATCH] Bug 1816342 - [devtools] Fix `valid` getter in color.js.
 r=ochameau.

It used to return true only if `colorToRGBA` wasn't returning null.
We changed it to be an alias of `isValidCSSColor` but this had unintended effect
We need to consider a color valid if we can get the rgba tuples from it, as we
need them to run the different methods/operation in this module.

Differential Revision: https://phabricator.services.mozilla.com/D169592
---
 .../client/shared/test/helper_color_data.js   | 29 +++++++++++++++++++
 devtools/shared/css/color.js                  | 13 +++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/devtools/client/shared/test/helper_color_data.js b/devtools/client/shared/test/helper_color_data.js
index 8906f2ff1eae..6150f6325e4f 100644
--- a/devtools/client/shared/test/helper_color_data.js
+++ b/devtools/client/shared/test/helper_color_data.js
@@ -1,5 +1,7 @@
 "use strict";
 
+// This is used to test color.js in browser_css_color.js
+
 /* eslint-disable max-len */
 function getFixtureColorData() {
   return [
@@ -1469,6 +1471,33 @@ function getFixtureColorData() {
       hwb: "unset",
       cycle: false,
     },
+    {
+      authored: "currentcolor",
+      name: "currentcolor",
+      hex: "currentcolor",
+      hsl: "currentcolor",
+      rgb: "currentcolor",
+      hwb: "currentcolor",
+      cycle: false,
+    },
+    {
+      authored: "accentcolor",
+      name: "",
+      hex: "",
+      hsl: "",
+      rgb: "",
+      hwg: "",
+      cycle: false,
+    },
+    {
+      authored: "-moz-menubartext",
+      name: "",
+      hex: "",
+      hsl: "",
+      rgb: "",
+      hwg: "",
+      cycle: false,
+    },
   ];
 }
 /* eslint-enable max-len */
diff --git a/devtools/shared/css/color.js b/devtools/shared/css/color.js
index 9f2fc95ec91d..374d3b8d24e5 100644
--- a/devtools/shared/css/color.js
+++ b/devtools/shared/css/color.js
@@ -138,8 +138,14 @@ CssColor.prototype = {
     return this.getRGBATuple().a !== 1;
   },
 
+  /**
+   * Return true if the color is a valid color and we can get rgba tuples from it.
+   */
   get valid() {
-    return InspectorUtils.isValidCSSColor(this.authored);
+    // We can't use InspectorUtils.isValidCSSColor as colors can be valid but we can't have
+    // their rgba tuples (e.g. currentColor, accentColor, … whose actual values depends on
+    // additional context we don't have here).
+    return InspectorUtils.colorToRGBA(this.authored) !== null;
   },
 
   /**
@@ -365,7 +371,10 @@ CssColor.prototype = {
    * @return {String|Boolean}
    *         - If the current color is a special value e.g. "transparent" then
    *           return the color.
-   *         - If the color is invalid return an empty string.
+   *         - If the current color is a system value e.g. "accentcolor" then
+   *           return the color.
+   *         - If the color is invalid or that we can't get rgba components from it
+   *           (e.g. "accentcolor"), return an empty string.
    *         - If the color is a regular color e.g. #F06 so we return false
    *           to indicate that the color is neither invalid or special.
    */