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

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 */

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.
    */