diff --git a/devtools/client/shared/output-parser.js b/devtools/client/shared/output-parser.js
index 063f5cb7a1dc..acff188beb9b 100644
--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -10,8 +10,6 @@ const {getCSSLexer} = require("devtools/shared/css/lexer");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {appendText} = require("devtools/client/inspector/shared/utils");
 
-loader.lazyRequireGetter(this, "CSS_TYPES", "devtools/shared/css/constants", true);
-
 const STYLE_INSPECTOR_PROPERTIES = "devtools/shared/locales/styleinspector.properties";
 const {LocalizationHelper} = require("devtools/shared/l10n");
 const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
@@ -51,9 +49,8 @@ const HTML_NS = "http://www.w3.org/1999/xhtml";
  *
  * @param {Document} document Used to create DOM nodes.
  * @param {Function} supportsTypes - A function that returns a boolean when asked if a css
- *                   property name supports a given css type.
- *                   The function is executed like supportsType("color", CSS_TYPES.COLOR)
- *                   where CSS_TYPES is defined in devtools/shared/css/properties-db.js
+ *                   property name supports a given css type.  The function is
+ *                   executed like supportsType("color", "timing-function")
  * @param {Function} isValidOnClient - A function that checks if a css property
  *                   name/value combo is valid.
  * @param {Function} supportsCssColor4ColorFunction - A function for checking
@@ -90,13 +87,13 @@ OutputParser.prototype = {
   parseCssProperty: function(name, value, options = {}) {
     options = this._mergeOptions(options);
 
-    options.expectCubicBezier = this.supportsType(name, CSS_TYPES.TIMING_FUNCTION);
+    options.expectCubicBezier = this.supportsType(name, "timing-function");
     options.expectDisplay = name === "display";
     options.expectFilter = name === "filter";
     options.expectShape = name === "clip-path" || name === "shape-outside";
     options.expectFont = name === "font-family";
-    options.supportsColor = this.supportsType(name, CSS_TYPES.COLOR) ||
-                            this.supportsType(name, CSS_TYPES.GRADIENT);
+    options.supportsColor = this.supportsType(name, "color") ||
+                            this.supportsType(name, "gradient");
 
     // The filter property is special in that we want to show the
     // swatch even if the value is invalid, because this way the user
diff --git a/devtools/server/actors/css-properties.js b/devtools/server/actors/css-properties.js
index e217a6118466..e8d03985fe73 100644
--- a/devtools/server/actors/css-properties.js
+++ b/devtools/server/actors/css-properties.js
@@ -50,8 +50,8 @@ function generateCssProperties() {
     // Get the list of CSS types this property supports.
     const supports = [];
     for (const type in CSS_TYPES) {
-      if (safeCssPropertySupportsType(name, InspectorUtils["TYPE_" + type])) {
-        supports.push(CSS_TYPES[type]);
+      if (safeCssPropertySupportsType(name, type)) {
+        supports.push(type);
       }
     }
 
diff --git a/devtools/shared/css/constants.js b/devtools/shared/css/constants.js
index cb60b1fb22d0..871a8a8172e5 100644
--- a/devtools/shared/css/constants.js
+++ b/devtools/shared/css/constants.js
@@ -15,13 +15,11 @@ exports.CSS_ANGLEUNIT = {
 };
 
 /**
- * All CSS types that properties can support. This list can be manually edited.
- *
- * The existing numbers are for backward compatibility so that newer versions
- * are still able to debug an old version correctly.
+ * Mapping of InspectorPropertyType to old type ID.
+ * Kept for backwards compatibility. Remove after Firefox 70.
  */
 exports.CSS_TYPES = {
-  "COLOR": 2,
-  "GRADIENT": 4,
-  "TIMING_FUNCTION": 10,
+ "color": 2,
+ "gradient": 4,
+ "timing-function": 10,
 };
diff --git a/devtools/shared/css/generated/properties-db.js b/devtools/shared/css/generated/properties-db.js
index bd845d6dac3e..2b27a07a0c02 100644
--- a/devtools/shared/css/generated/properties-db.js
+++ b/devtools/shared/css/generated/properties-db.js
@@ -28,7 +28,7 @@ exports.CSS_PROPERTIES = {
       "animation-play-state"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "alternate",
@@ -166,7 +166,7 @@ exports.CSS_PROPERTIES = {
       "animation-timing-function"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "cubic-bezier",
@@ -350,7 +350,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-end-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -385,7 +385,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-end-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -450,7 +450,7 @@ exports.CSS_PROPERTIES = {
       "border-image-width"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -490,7 +490,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-start-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -525,7 +525,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-start-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -739,7 +739,7 @@ exports.CSS_PROPERTIES = {
       "column-rule-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -774,7 +774,7 @@ exports.CSS_PROPERTIES = {
       "column-rule-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -1269,7 +1269,7 @@ exports.CSS_PROPERTIES = {
       "transition-delay"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "all",
@@ -1336,7 +1336,7 @@ exports.CSS_PROPERTIES = {
       "transition-timing-function"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "cubic-bezier",
@@ -1536,7 +1536,7 @@ exports.CSS_PROPERTIES = {
       "animation-play-state"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "alternate",
@@ -1674,7 +1674,7 @@ exports.CSS_PROPERTIES = {
       "animation-timing-function"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "cubic-bezier",
@@ -1935,7 +1935,7 @@ exports.CSS_PROPERTIES = {
       "border-image-width"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -2108,7 +2108,7 @@ exports.CSS_PROPERTIES = {
       "box-shadow"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -2331,7 +2331,7 @@ exports.CSS_PROPERTIES = {
       "mask-image"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -2428,7 +2428,7 @@ exports.CSS_PROPERTIES = {
       "mask-image"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -2610,7 +2610,7 @@ exports.CSS_PROPERTIES = {
       "-webkit-text-fill-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -2648,7 +2648,7 @@ exports.CSS_PROPERTIES = {
       "-webkit-text-stroke-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -2673,7 +2673,7 @@ exports.CSS_PROPERTIES = {
       "-webkit-text-stroke-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -2784,7 +2784,7 @@ exports.CSS_PROPERTIES = {
       "transition-delay"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "all",
@@ -2851,7 +2851,7 @@ exports.CSS_PROPERTIES = {
       "transition-timing-function"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "cubic-bezier",
@@ -3329,7 +3329,7 @@ exports.CSS_PROPERTIES = {
       "animation-play-state"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "alternate",
@@ -3467,7 +3467,7 @@ exports.CSS_PROPERTIES = {
       "animation-timing-function"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "cubic-bezier",
@@ -3514,8 +3514,8 @@ exports.CSS_PROPERTIES = {
       "background-clip"
     ],
     "supports": [
-      2,
-      4
+      "color",
+      "gradient"
     ],
     "values": [
       "COLOR",
@@ -3637,7 +3637,7 @@ exports.CSS_PROPERTIES = {
       "background-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -3659,7 +3659,7 @@ exports.CSS_PROPERTIES = {
       "background-image"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -3829,7 +3829,7 @@ exports.CSS_PROPERTIES = {
       "border-image-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -3869,7 +3869,7 @@ exports.CSS_PROPERTIES = {
       "border-block-end-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -3905,7 +3905,7 @@ exports.CSS_PROPERTIES = {
       "border-block-end-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -3929,7 +3929,7 @@ exports.CSS_PROPERTIES = {
       "border-block-end-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -3964,7 +3964,7 @@ exports.CSS_PROPERTIES = {
       "border-block-end-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4027,7 +4027,7 @@ exports.CSS_PROPERTIES = {
       "border-block-start-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4062,7 +4062,7 @@ exports.CSS_PROPERTIES = {
       "border-block-start-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4166,7 +4166,7 @@ exports.CSS_PROPERTIES = {
       "border-bottom-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4201,7 +4201,7 @@ exports.CSS_PROPERTIES = {
       "border-bottom-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4306,7 +4306,7 @@ exports.CSS_PROPERTIES = {
       "border-left-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4358,7 +4358,7 @@ exports.CSS_PROPERTIES = {
       "border-image-width"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -4440,7 +4440,7 @@ exports.CSS_PROPERTIES = {
       "border-image-source"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -4491,7 +4491,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-end-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4527,7 +4527,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-end-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4551,7 +4551,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-end-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4586,7 +4586,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-end-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4649,7 +4649,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-start-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4684,7 +4684,7 @@ exports.CSS_PROPERTIES = {
       "border-inline-start-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4788,7 +4788,7 @@ exports.CSS_PROPERTIES = {
       "border-left-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4823,7 +4823,7 @@ exports.CSS_PROPERTIES = {
       "border-left-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4902,7 +4902,7 @@ exports.CSS_PROPERTIES = {
       "border-right-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -4937,7 +4937,7 @@ exports.CSS_PROPERTIES = {
       "border-right-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -5065,7 +5065,7 @@ exports.CSS_PROPERTIES = {
       "border-top-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -5100,7 +5100,7 @@ exports.CSS_PROPERTIES = {
       "border-top-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -5235,7 +5235,7 @@ exports.CSS_PROPERTIES = {
       "box-shadow"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -5346,7 +5346,7 @@ exports.CSS_PROPERTIES = {
       "caret-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -5445,7 +5445,7 @@ exports.CSS_PROPERTIES = {
       "color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -5559,7 +5559,7 @@ exports.CSS_PROPERTIES = {
       "column-rule-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -5594,7 +5594,7 @@ exports.CSS_PROPERTIES = {
       "column-rule-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -5899,7 +5899,7 @@ exports.CSS_PROPERTIES = {
       "fill"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -6122,7 +6122,7 @@ exports.CSS_PROPERTIES = {
       "flood-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -7259,7 +7259,7 @@ exports.CSS_PROPERTIES = {
       "lighting-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -7700,7 +7700,7 @@ exports.CSS_PROPERTIES = {
       "mask-image"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -7797,7 +7797,7 @@ exports.CSS_PROPERTIES = {
       "mask-image"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -8233,7 +8233,7 @@ exports.CSS_PROPERTIES = {
       "outline-width"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -8269,7 +8269,7 @@ exports.CSS_PROPERTIES = {
       "outline-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -9083,7 +9083,7 @@ exports.CSS_PROPERTIES = {
       "scrollbar-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -9148,7 +9148,7 @@ exports.CSS_PROPERTIES = {
       "shape-outside"
     ],
     "supports": [
-      4
+      "gradient"
     ],
     "values": [
       "-moz-element",
@@ -9206,7 +9206,7 @@ exports.CSS_PROPERTIES = {
       "stop-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -9241,7 +9241,7 @@ exports.CSS_PROPERTIES = {
       "stroke"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -9461,7 +9461,7 @@ exports.CSS_PROPERTIES = {
       "text-decoration-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -9494,7 +9494,7 @@ exports.CSS_PROPERTIES = {
       "text-decoration-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -9554,7 +9554,7 @@ exports.CSS_PROPERTIES = {
       "text-emphasis-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -9584,7 +9584,7 @@ exports.CSS_PROPERTIES = {
       "text-emphasis-color"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -9724,7 +9724,7 @@ exports.CSS_PROPERTIES = {
       "text-shadow"
     ],
     "supports": [
-      2
+      "color"
     ],
     "values": [
       "COLOR",
@@ -9887,7 +9887,7 @@ exports.CSS_PROPERTIES = {
       "transition-delay"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "all",
@@ -9954,7 +9954,7 @@ exports.CSS_PROPERTIES = {
       "transition-timing-function"
     ],
     "supports": [
-      10
+      "timing-function"
     ],
     "values": [
       "cubic-bezier",
diff --git a/devtools/shared/fronts/css-properties.js b/devtools/shared/fronts/css-properties.js
index 3a02d9c35ece..441599ac315b 100644
--- a/devtools/shared/fronts/css-properties.js
+++ b/devtools/shared/fronts/css-properties.js
@@ -24,6 +24,9 @@ var FIRST_CHAR = ["[_a-z]", NON_ASCII, ESCAPE].join("|");
 var TRAILING_CHAR = ["[_a-z0-9-]", NON_ASCII, ESCAPE].join("|");
 var IS_VARIABLE_TOKEN = new RegExp(`^--(${FIRST_CHAR})(${TRAILING_CHAR})*$`,
                                    "i");
+
+loader.lazyRequireGetter(this, "CSS_TYPES", "devtools/shared/css/constants", true);
+
 /**
  * Check that this is a CSS variable.
  *
@@ -162,14 +165,16 @@ CssProperties.prototype = {
 
   /**
    * Checks if the property supports the given CSS type.
-   * CSS types should come from devtools/shared/css/constants.js' CSS_TYPES.
    *
    * @param {String} property The property to be checked.
-   * @param {Number} type One of the type values from CSS_TYPES.
+   * @param {String} type One of the values from InspectorPropertyType.
    * @return {Boolean}
    */
   supportsType(property, type) {
-    return this.properties[property] && this.properties[property].supports.includes(type);
+    const id = CSS_TYPES[type];
+    return this.properties[property] &&
+      (this.properties[property].supports.includes(type) ||
+       this.properties[property].supports.includes(id));
   },
 
   /**
diff --git a/dom/chrome-webidl/InspectorUtils.webidl b/dom/chrome-webidl/InspectorUtils.webidl
index 2cfa713f967f..dce787cf1b2e 100644
--- a/dom/chrome-webidl/InspectorUtils.webidl
+++ b/dom/chrome-webidl/InspectorUtils.webidl
@@ -40,11 +40,7 @@ namespace InspectorUtils {
   [Throws] sequence<DOMString> getSubpropertiesForCSSProperty(DOMString property);
   [Throws] boolean cssPropertyIsShorthand(DOMString property);
 
-  // TODO: Change this to use an enum.
-  const unsigned long TYPE_COLOR = 1;
-  const unsigned long TYPE_GRADIENT = 2;
-  const unsigned long TYPE_TIMING_FUNCTION = 3;
-  [Throws] boolean cssPropertySupportsType(DOMString property, unsigned long type);
+  [Throws] boolean cssPropertySupportsType(DOMString property, InspectorPropertyType type);
 
   boolean isIgnorableWhitespace(CharacterData dataNode);
   Node? getParentForNode(Node node, boolean showingAnonymousContent);
@@ -104,6 +100,14 @@ dictionary InspectorRGBATuple {
   double a = 1;
 };
 
+// Any update to this enum should probably also update
+// devtools/shared/css/constants.js
+enum InspectorPropertyType {
+  "color",
+  "gradient",
+  "timing-function",
+};
+
 dictionary InspectorVariationAxis {
   required DOMString tag;
   required DOMString name;
diff --git a/layout/inspector/InspectorUtils.cpp b/layout/inspector/InspectorUtils.cpp
index 344d3655bdfe..d8aa7aeedcae 100644
--- a/layout/inspector/InspectorUtils.cpp
+++ b/layout/inspector/InspectorUtils.cpp
@@ -440,16 +440,32 @@ bool InspectorUtils::CssPropertyIsShorthand(GlobalObject& aGlobalObject,
   return isShorthand;
 }
 
+// This should match the constants in specified_value_info.rs
+//
+// Once we can use bitflags in consts, we can also cbindgen that and use them
+// here instead.
+static uint8_t ToServoCssType(InspectorPropertyType aType) {
+  switch (aType) {
+    case InspectorPropertyType::Color:
+      return 1;
+    case InspectorPropertyType::Gradient:
+      return 1 << 1;
+    case InspectorPropertyType::Timing_function:
+      return 1 << 2;
+    default:
+      MOZ_ASSERT_UNREACHABLE("Unknown property type?");
+      return 0;
+  }
+}
+
 bool InspectorUtils::CssPropertySupportsType(GlobalObject& aGlobalObject,
                                              const nsAString& aProperty,
-                                             uint32_t aType, ErrorResult& aRv) {
+                                             InspectorPropertyType aType,
+                                             ErrorResult& aRv) {
   NS_ConvertUTF16toUTF8 property(aProperty);
-  if (!aType || aType > InspectorUtils_Binding::TYPE_TIMING_FUNCTION) {
-    aRv.Throw(NS_ERROR_INVALID_ARG);
-    return false;
-  }
   bool found;
-  bool result = Servo_Property_SupportsType(&property, aType, &found);
+  bool result =
+      Servo_Property_SupportsType(&property, ToServoCssType(aType), &found);
   if (!found) {
     aRv.Throw(NS_ERROR_FAILURE);
     return false;
diff --git a/layout/inspector/InspectorUtils.h b/layout/inspector/InspectorUtils.h
index 5506622b1abd..b3eba7744711 100644
--- a/layout/inspector/InspectorUtils.h
+++ b/layout/inspector/InspectorUtils.h
@@ -11,6 +11,7 @@
 #include "mozilla/dom/InspectorUtilsBinding.h"
 
 class nsAtom;
+class nsINode;
 class ComputedStyle;
 
 namespace mozilla {
@@ -153,7 +154,7 @@ class InspectorUtils {
   // unknown types.
   static bool CssPropertySupportsType(GlobalObject& aGlobal,
                                       const nsAString& aProperty,
-                                      uint32_t aType, ErrorResult& aRv);
+                                      InspectorPropertyType, ErrorResult& aRv);
 
   static bool IsIgnorableWhitespace(GlobalObject& aGlobalObject,
                                     CharacterData& aDataNode) {
diff --git a/layout/inspector/tests/test_bug1006595.html b/layout/inspector/tests/test_bug1006595.html
index fc78599a27ba..0a0583abf6a7 100644
--- a/layout/inspector/tests/test_bug1006595.html
+++ b/layout/inspector/tests/test_bug1006595.html
@@ -46,30 +46,28 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1006595
   ok(InspectorUtils.cssPropertyIsShorthand("padding"), "'padding' is a shorthand")
   ok(!InspectorUtils.cssPropertyIsShorthand("color"), "'color' is not a shorthand")
 
-  ok(!InspectorUtils.cssPropertySupportsType("padding", InspectorUtils.TYPE_COLOR),
+  ok(!InspectorUtils.cssPropertySupportsType("padding", "color"),
      "'padding' can't be a color");
 
-  ok(InspectorUtils.cssPropertySupportsType("color", InspectorUtils.TYPE_COLOR),
+  ok(InspectorUtils.cssPropertySupportsType("color", "color"),
      "'color' can be a color");
-  ok(InspectorUtils.cssPropertySupportsType("background", InspectorUtils.TYPE_COLOR),
+  ok(InspectorUtils.cssPropertySupportsType("background", "color"),
      "'background' can be a color");
-  ok(!InspectorUtils.cssPropertySupportsType("background-image", InspectorUtils.TYPE_COLOR),
+  ok(!InspectorUtils.cssPropertySupportsType("background-image", "color"),
      "'background-image' can't be a color");
 
-  ok(InspectorUtils.cssPropertySupportsType("background-image", InspectorUtils.TYPE_GRADIENT),
+  ok(InspectorUtils.cssPropertySupportsType("background-image", "gradient"),
      "'background-image' can be a gradient");
-  ok(InspectorUtils.cssPropertySupportsType("background", InspectorUtils.TYPE_GRADIENT),
+  ok(InspectorUtils.cssPropertySupportsType("background", "gradient"),
      "'background' can be a gradient");
-  ok(!InspectorUtils.cssPropertySupportsType("background-color", InspectorUtils.TYPE_GRADIENT),
+  ok(!InspectorUtils.cssPropertySupportsType("background-color", "gradient"),
      "'background-color' can't be a gradient");
 
-  ok(InspectorUtils.cssPropertySupportsType("transition", InspectorUtils.TYPE_TIMING_FUNCTION),
+  ok(InspectorUtils.cssPropertySupportsType("transition", "timing-function"),
      "'transition' can be a timing function");
-  ok(InspectorUtils.cssPropertySupportsType("transition-timing-function",
-                                   InspectorUtils.TYPE_TIMING_FUNCTION),
+  ok(InspectorUtils.cssPropertySupportsType("transition-timing-function", "timing-function"),
      "'transition-duration' can be a timing function");
-  ok(!InspectorUtils.cssPropertySupportsType("background-color",
-                                    InspectorUtils.TYPE_TIMING_FUNCTION),
+  ok(!InspectorUtils.cssPropertySupportsType("background-color", "timing-function"),
      "'background-color' can't be a timing function");
 
   </script>
diff --git a/layout/style/ServoBindings.h b/layout/style/ServoBindings.h
index 9edb239d1616..966d9863e369 100644
--- a/layout/style/ServoBindings.h
+++ b/layout/style/ServoBindings.h
@@ -965,7 +965,7 @@ const uint8_t* Servo_Property_GetName(nsCSSPropertyID, uint32_t* out_length);
 bool Servo_Property_IsShorthand(const nsACString* name, bool* found);
 bool Servo_Property_IsInherited(const nsACString* name);
 
-bool Servo_Property_SupportsType(const nsACString* name, uint32_t ty,
+bool Servo_Property_SupportsType(const nsACString* name, uint8_t ty,
                                  bool* found);
 
 void Servo_Property_GetCSSValuesForProperty(const nsACString* name, bool* found,
diff --git a/layout/style/test/test_bug1112014.html b/layout/style/test/test_bug1112014.html
index 73b071177f3e..1414c5fbd1b3 100644
--- a/layout/style/test/test_bug1112014.html
+++ b/layout/style/test/test_bug1112014.html
@@ -16,9 +16,9 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1112014
 
   // This holds a canonical test value for each TYPE_ constant.
   let testValues = {
-    TYPE_COLOR: "rgb(3,3,3)",
-    TYPE_GRADIENT: "linear-gradient( 45deg, blue, red )",
-    TYPE_TIMING_FUNCTION: "cubic-bezier(0.1, 0.7, 1.0, 0.1)",
+    "color": "rgb(3,3,3)",
+    "gradient": "linear-gradient( 45deg, blue, red )",
+    "timing-function": "cubic-bezier(0.1, 0.7, 1.0, 0.1)",
   };
 
   // The canonical test values don't work for all properties, in
@@ -26,16 +26,16 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1112014
   // override values.
   let overrideValues = {
     "box-shadow": {
-      TYPE_COLOR: testValues.TYPE_COLOR + " 2px 2px"
+      "color": testValues.color + " 2px 2px"
     },
     "-webkit-box-shadow": {
-      TYPE_COLOR: testValues.TYPE_COLOR + " 2px 2px"
+      "color": testValues.color + " 2px 2px"
     },
     "scrollbar-color": {
-      TYPE_COLOR: testValues.TYPE_COLOR + " " + testValues.TYPE_COLOR,
+      "color": testValues.color + " " + testValues.color,
     },
     "text-shadow": {
-      TYPE_COLOR: testValues.TYPE_COLOR + " 2px 2px"
+      "color": testValues.color + " 2px 2px"
     },
   };
 
@@ -64,7 +64,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1112014
       }
 
       let supported =
-        InspectorUtils.cssPropertySupportsType(propertyName, InspectorUtils[iter]);
+        InspectorUtils.cssPropertySupportsType(propertyName, iter);
       let parsed = CSS.supports(propertyName, testValue);
       is(supported, parsed, propertyName + " supports " + iter);
     }
@@ -73,7 +73,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1112014
   // Regression test for an assertion failure in an earlier version of
   // the code.  Note that cssPropertySupportsType returns false for
   // all types for a variable.
-  ok(!InspectorUtils.cssPropertySupportsType("--variable", InspectorUtils.TYPE_COLOR),
+  ok(!InspectorUtils.cssPropertySupportsType("--variable", "color"),
      "cssPropertySupportsType returns false for variable");
 
   </script>
diff --git a/servo/components/style_traits/specified_value_info.rs b/servo/components/style_traits/specified_value_info.rs
index 3cb59e796c46..c978727b47ac 100644
--- a/servo/components/style_traits/specified_value_info.rs
+++ b/servo/components/style_traits/specified_value_info.rs
@@ -10,7 +10,7 @@ use std::sync::Arc as StdArc;
 
 /// Type of value that a property supports. This is used by Gecko's
 /// devtools to make sense about value it parses, and types listed
-/// here should match TYPE_* constants in InspectorUtils.webidl.
+/// here should match InspectorPropertyType in InspectorUtils.webidl.
 ///
 /// XXX This should really be a bitflags rather than a namespace mod,
 /// but currently we cannot use bitflags in const.
diff --git a/servo/ports/geckolib/glue.rs b/servo/ports/geckolib/glue.rs
index 4deb13dd057b..69d1f3c602e7 100644
--- a/servo/ports/geckolib/glue.rs
+++ b/servo/ports/geckolib/glue.rs
@@ -204,7 +204,7 @@ use style::values::specified;
 use style::values::specified::gecko::IntersectionObserverRootMargin;
 use style::values::specified::source_size_list::SourceSizeList;
 use style::values::{CustomIdent, KeyframesName};
-use style_traits::{CssType, CssWriter, ParsingMode, StyleParseErrorKind, ToCss};
+use style_traits::{CssWriter, ParsingMode, StyleParseErrorKind, ToCss};
 
 trait ClosureHelper {
     fn invoke(&self);
@@ -1149,20 +1149,10 @@ pub unsafe extern "C" fn Servo_Property_IsInherited(prop_name: *const nsACString
 #[no_mangle]
 pub unsafe extern "C" fn Servo_Property_SupportsType(
     prop_name: *const nsACString,
-    ty: u32,
+    ty: u8,
     found: *mut bool,
 ) -> bool {
     let prop_id = parse_enabled_property_name!(prop_name, found, false);
-    // This should match the constants in InspectorUtils.
-    // (Let's don't bother importing InspectorUtilsBinding into bindings
-    // because it is not used anywhere else, and issue here would be
-    // caught by the property-db test anyway.)
-    let ty = match ty {
-        1 => CssType::COLOR,
-        2 => CssType::GRADIENT,
-        3 => CssType::TIMING_FUNCTION,
-        _ => unreachable!("unknown CSS type {}", ty),
-    };
     prop_id.supports_type(ty)
 }