Bug 1265790 - replace inIDOMUtils.isInheritedProperty r=pbro
authorGreg Tatum <tatum.creative@gmail.com>
Thu, 02 Jun 2016 13:07:00 +0200
changeset 339401 7556b084d9e1d24c577956325a5da126c8f480cc
parent 339400 a139db504ae189bb3115ff9156ab47fc7bbddcda
child 339402 10e00a4afa507911c110ca779a0769922f9e9ea8
push id6249
push userjlund@mozilla.com
push dateMon, 01 Aug 2016 13:59:36 +0000
treeherdermozilla-beta@bad9d4f5bf7e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1265790
milestone49.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1265790 - replace inIDOMUtils.isInheritedProperty r=pbro MozReview-Commit-ID: 1c6OLfYMW0p
devtools/client/inspector/rules/models/rule.js
devtools/client/shared/css-properties-db.js
devtools/client/shared/moz.build
devtools/server/actors/css-properties.js
devtools/server/actors/styles.js
devtools/server/tests/mochitest/test_css-logic-inheritance.html
devtools/server/tests/mochitest/test_css-logic-media-queries.html
devtools/server/tests/mochitest/test_css-logic-specificity.html
devtools/shared/css-properties-db.js
devtools/shared/fronts/css-properties.js
devtools/shared/inspector/css-logic.js
devtools/shared/moz.build
--- a/devtools/client/inspector/rules/models/rule.js
+++ b/devtools/client/inspector/rules/models/rule.js
@@ -17,20 +17,16 @@ const {parseDeclarations} = require("dev
 const {getCssProperties} = require("devtools/shared/fronts/css-properties");
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 
 XPCOMUtils.defineLazyGetter(this, "osString", function () {
   return Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
 });
 
-XPCOMUtils.defineLazyGetter(this, "domUtils", function () {
-  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
-});
-
 /**
  * Rule is responsible for the following:
  *   Manages a single style declaration or rule.
  *   Applies changes to the properties in a rule.
  *   Maintains a list of TextProperty objects.
  *
  * @param {ElementStyle} elementStyle
  *        The ElementStyle to which this rule belongs.
@@ -461,17 +457,17 @@ Rule.prototype = {
       // way to display them.
       if (!name) {
         continue;
       }
       // In an inherited rule, we only show inherited properties.
       // However, we must keep all properties in order for rule
       // rewriting to work properly.  So, compute the "invisible"
       // property here.
-      let invisible = this.inherited && !domUtils.isInheritedProperty(name);
+      let invisible = this.inherited && !this.cssProperties.isInherited(name);
       let value = store.userProperties.getProperty(this.style, name,
                                                    prop.value);
       let textProp = new TextProperty(this, name, value, prop.priority,
                                       !("commentOffsets" in prop),
                                       invisible);
       textProps.push(textProp);
     }
 
deleted file mode 100644
--- a/devtools/client/shared/css-properties-db.js
+++ /dev/null
@@ -1,422 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-/**
- * This list is generated from the output of the CssPropertiesActor. If a server
- * does not support the actor, this is loaded as a backup. This list does not
- * guarantee that the server actually supports these CSS properties.
- */
-exports.propertiesList = [
-  "align-content",
-  "align-items",
-  "align-self",
-  "animation-delay",
-  "animation-direction",
-  "animation-duration",
-  "animation-fill-mode",
-  "animation-iteration-count",
-  "animation-name",
-  "animation-play-state",
-  "animation-timing-function",
-  "-moz-appearance",
-  "backface-visibility",
-  "background-attachment",
-  "background-blend-mode",
-  "background-clip",
-  "background-color",
-  "background-image",
-  "background-origin",
-  "background-position-x",
-  "background-position-y",
-  "background-repeat",
-  "background-size",
-  "-moz-binding",
-  "block-size",
-  "border-block-end-color",
-  "border-block-end-style",
-  "border-block-end-width",
-  "border-block-start-color",
-  "border-block-start-style",
-  "border-block-start-width",
-  "border-bottom-color",
-  "-moz-border-bottom-colors",
-  "border-bottom-left-radius",
-  "border-bottom-right-radius",
-  "border-bottom-style",
-  "border-bottom-width",
-  "border-collapse",
-  "border-image-outset",
-  "border-image-repeat",
-  "border-image-slice",
-  "border-image-source",
-  "border-image-width",
-  "border-inline-end-color",
-  "border-inline-end-style",
-  "border-inline-end-width",
-  "border-inline-start-color",
-  "border-inline-start-style",
-  "border-inline-start-width",
-  "border-left-color",
-  "-moz-border-left-colors",
-  "border-left-style",
-  "border-left-width",
-  "border-right-color",
-  "-moz-border-right-colors",
-  "border-right-style",
-  "border-right-width",
-  "border-spacing",
-  "border-top-color",
-  "-moz-border-top-colors",
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "border-top-style",
-  "border-top-width",
-  "bottom",
-  "-moz-box-align",
-  "box-decoration-break",
-  "-moz-box-direction",
-  "-moz-box-flex",
-  "-moz-box-ordinal-group",
-  "-moz-box-orient",
-  "-moz-box-pack",
-  "box-shadow",
-  "box-sizing",
-  "caption-side",
-  "clear",
-  "clip",
-  "clip-path",
-  "clip-rule",
-  "color",
-  "color-adjust",
-  "color-interpolation",
-  "color-interpolation-filters",
-  "-moz-column-count",
-  "-moz-column-fill",
-  "-moz-column-gap",
-  "-moz-column-rule-color",
-  "-moz-column-rule-style",
-  "-moz-column-rule-width",
-  "-moz-column-width",
-  "content",
-  "-moz-control-character-visibility",
-  "counter-increment",
-  "counter-reset",
-  "cursor",
-  "direction",
-  "display",
-  "dominant-baseline",
-  "empty-cells",
-  "fill",
-  "fill-opacity",
-  "fill-rule",
-  "filter",
-  "flex-basis",
-  "flex-direction",
-  "flex-grow",
-  "flex-shrink",
-  "flex-wrap",
-  "float",
-  "-moz-float-edge",
-  "flood-color",
-  "flood-opacity",
-  "font-family",
-  "font-feature-settings",
-  "font-kerning",
-  "font-language-override",
-  "font-size",
-  "font-size-adjust",
-  "font-stretch",
-  "font-style",
-  "font-synthesis",
-  "font-variant-alternates",
-  "font-variant-caps",
-  "font-variant-east-asian",
-  "font-variant-ligatures",
-  "font-variant-numeric",
-  "font-variant-position",
-  "font-weight",
-  "-moz-force-broken-image-icon",
-  "grid-auto-columns",
-  "grid-auto-flow",
-  "grid-auto-rows",
-  "grid-column-end",
-  "grid-column-gap",
-  "grid-column-start",
-  "grid-row-end",
-  "grid-row-gap",
-  "grid-row-start",
-  "grid-template-areas",
-  "grid-template-columns",
-  "grid-template-rows",
-  "height",
-  "hyphens",
-  "image-orientation",
-  "-moz-image-region",
-  "image-rendering",
-  "ime-mode",
-  "inline-size",
-  "isolation",
-  "justify-content",
-  "justify-items",
-  "justify-self",
-  "left",
-  "letter-spacing",
-  "lighting-color",
-  "line-height",
-  "list-style-image",
-  "list-style-position",
-  "list-style-type",
-  "margin-block-end",
-  "margin-block-start",
-  "margin-bottom",
-  "margin-inline-end",
-  "margin-inline-start",
-  "margin-left",
-  "margin-right",
-  "margin-top",
-  "marker-end",
-  "marker-mid",
-  "marker-offset",
-  "marker-start",
-  "mask",
-  "mask-type",
-  "max-block-size",
-  "max-height",
-  "max-inline-size",
-  "max-width",
-  "min-block-size",
-  "min-height",
-  "min-inline-size",
-  "min-width",
-  "mix-blend-mode",
-  "object-fit",
-  "object-position",
-  "offset-block-end",
-  "offset-block-start",
-  "offset-inline-end",
-  "offset-inline-start",
-  "opacity",
-  "order",
-  "-moz-orient",
-  "-moz-osx-font-smoothing",
-  "outline-color",
-  "outline-offset",
-  "-moz-outline-radius-bottomleft",
-  "-moz-outline-radius-bottomright",
-  "-moz-outline-radius-topleft",
-  "-moz-outline-radius-topright",
-  "outline-style",
-  "outline-width",
-  "overflow-x",
-  "overflow-y",
-  "padding-block-end",
-  "padding-block-start",
-  "padding-bottom",
-  "padding-inline-end",
-  "padding-inline-start",
-  "padding-left",
-  "padding-right",
-  "padding-top",
-  "page-break-after",
-  "page-break-before",
-  "page-break-inside",
-  "paint-order",
-  "perspective",
-  "perspective-origin",
-  "pointer-events",
-  "position",
-  "quotes",
-  "resize",
-  "right",
-  "ruby-align",
-  "ruby-position",
-  "scroll-behavior",
-  "scroll-snap-coordinate",
-  "scroll-snap-destination",
-  "scroll-snap-points-x",
-  "scroll-snap-points-y",
-  "scroll-snap-type-x",
-  "scroll-snap-type-y",
-  "shape-rendering",
-  "-moz-stack-sizing",
-  "stop-color",
-  "stop-opacity",
-  "stroke",
-  "stroke-dasharray",
-  "stroke-dashoffset",
-  "stroke-linecap",
-  "stroke-linejoin",
-  "stroke-miterlimit",
-  "stroke-opacity",
-  "stroke-width",
-  "-moz-tab-size",
-  "table-layout",
-  "text-align",
-  "-moz-text-align-last",
-  "text-anchor",
-  "text-combine-upright",
-  "text-decoration-color",
-  "text-decoration-line",
-  "text-decoration-style",
-  "text-emphasis-color",
-  "text-emphasis-position",
-  "text-emphasis-style",
-  "-webkit-text-fill-color",
-  "text-indent",
-  "text-orientation",
-  "text-overflow",
-  "text-rendering",
-  "text-shadow",
-  "-moz-text-size-adjust",
-  "-webkit-text-stroke-color",
-  "-webkit-text-stroke-width",
-  "text-transform",
-  "top",
-  "transform",
-  "transform-box",
-  "transform-origin",
-  "transform-style",
-  "transition-delay",
-  "transition-duration",
-  "transition-property",
-  "transition-timing-function",
-  "unicode-bidi",
-  "-moz-user-focus",
-  "-moz-user-input",
-  "-moz-user-modify",
-  "-moz-user-select",
-  "vector-effect",
-  "vertical-align",
-  "visibility",
-  "white-space",
-  "width",
-  "will-change",
-  "-moz-window-dragging",
-  "word-break",
-  "word-spacing",
-  "word-wrap",
-  "writing-mode",
-  "z-index",
-  "all",
-  "animation",
-  "background",
-  "background-position",
-  "border",
-  "border-block-end",
-  "border-block-start",
-  "border-bottom",
-  "border-color",
-  "border-image",
-  "border-inline-end",
-  "border-inline-start",
-  "border-left",
-  "border-radius",
-  "border-right",
-  "border-style",
-  "border-top",
-  "border-width",
-  "-moz-column-rule",
-  "-moz-columns",
-  "flex",
-  "flex-flow",
-  "font",
-  "font-variant",
-  "grid",
-  "grid-area",
-  "grid-column",
-  "grid-gap",
-  "grid-row",
-  "grid-template",
-  "list-style",
-  "margin",
-  "marker",
-  "outline",
-  "-moz-outline-radius",
-  "overflow",
-  "padding",
-  "scroll-snap-type",
-  "text-decoration",
-  "text-emphasis",
-  "-webkit-text-stroke",
-  "-moz-transform",
-  "transition",
-  "-moz-transform-origin",
-  "-moz-perspective-origin",
-  "-moz-perspective",
-  "-moz-transform-style",
-  "-moz-backface-visibility",
-  "-moz-border-image",
-  "-moz-transition",
-  "-moz-transition-delay",
-  "-moz-transition-duration",
-  "-moz-transition-property",
-  "-moz-transition-timing-function",
-  "-moz-animation",
-  "-moz-animation-delay",
-  "-moz-animation-direction",
-  "-moz-animation-duration",
-  "-moz-animation-fill-mode",
-  "-moz-animation-iteration-count",
-  "-moz-animation-name",
-  "-moz-animation-play-state",
-  "-moz-animation-timing-function",
-  "-moz-box-sizing",
-  "-moz-font-feature-settings",
-  "-moz-font-language-override",
-  "-moz-padding-end",
-  "-moz-padding-start",
-  "-moz-margin-end",
-  "-moz-margin-start",
-  "-moz-border-end",
-  "-moz-border-end-color",
-  "-moz-border-end-style",
-  "-moz-border-end-width",
-  "-moz-border-start",
-  "-moz-border-start-color",
-  "-moz-border-start-style",
-  "-moz-border-start-width",
-  "-moz-hyphens",
-  "-webkit-animation",
-  "-webkit-animation-delay",
-  "-webkit-animation-direction",
-  "-webkit-animation-duration",
-  "-webkit-animation-fill-mode",
-  "-webkit-animation-iteration-count",
-  "-webkit-animation-name",
-  "-webkit-animation-play-state",
-  "-webkit-animation-timing-function",
-  "-webkit-filter",
-  "-webkit-text-size-adjust",
-  "-webkit-transform",
-  "-webkit-transform-origin",
-  "-webkit-transform-style",
-  "-webkit-backface-visibility",
-  "-webkit-perspective",
-  "-webkit-perspective-origin",
-  "-webkit-transition",
-  "-webkit-transition-delay",
-  "-webkit-transition-duration",
-  "-webkit-transition-property",
-  "-webkit-transition-timing-function",
-  "-webkit-border-radius",
-  "-webkit-border-top-left-radius",
-  "-webkit-border-top-right-radius",
-  "-webkit-border-bottom-left-radius",
-  "-webkit-border-bottom-right-radius",
-  "-webkit-background-clip",
-  "-webkit-background-origin",
-  "-webkit-background-size",
-  "-webkit-border-image",
-  "-webkit-box-shadow",
-  "-webkit-box-sizing",
-  "-webkit-box-flex",
-  "-webkit-box-ordinal-group",
-  "-webkit-box-orient",
-  "-webkit-box-direction",
-  "-webkit-box-align",
-  "-webkit-box-pack",
-  "-webkit-user-select"
-];
--- a/devtools/client/shared/moz.build
+++ b/devtools/client/shared/moz.build
@@ -17,17 +17,16 @@ DIRS += [
 
 DevToolsModules(
     'AppCacheUtils.jsm',
     'autocomplete-popup.js',
     'browser-loader.js',
     'css-angle.js',
     'css-color-db.js',
     'css-color.js',
-    'css-properties-db.js',
     'css-reload.js',
     'Curl.jsm',
     'demangle.js',
     'developer-toolbar.js',
     'devices.js',
     'devtools-file-watcher.js',
     'DOMHelpers.jsm',
     'doorhanger.js',
--- a/devtools/server/actors/css-properties.js
+++ b/devtools/server/actors/css-properties.js
@@ -8,32 +8,47 @@ const { Cc, Ci, Cu } = require("chrome")
 
 loader.lazyGetter(this, "DOMUtils", () => {
   return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
 });
 
 const protocol = require("devtools/shared/protocol");
 const { ActorClassWithSpec, Actor } = protocol;
 const { cssPropertiesSpec } = require("devtools/shared/specs/css-properties");
+const clientCssDatabase = require("devtools/shared/css-properties-db")
 
 var CssPropertiesActor = exports.CssPropertiesActor = ActorClassWithSpec(cssPropertiesSpec, {
   typeName: "cssProperties",
 
   initialize: function(conn, parent) {
     Actor.prototype.initialize.call(this, conn);
     this.parent = parent;
   },
 
   destroy: function() {
     Actor.prototype.destroy.call(this);
   },
 
   getCSSDatabase: function() {
-    const propertiesList = DOMUtils.getCSSPropertyNames(DOMUtils.INCLUDE_ALIASES);
-    return { propertiesList };
+    const db = {};
+    const properties = DOMUtils.getCSSPropertyNames(DOMUtils.INCLUDE_ALIASES);
+
+    properties.forEach(name => {
+      // In order to maintain any backwards compatible changes when debugging
+      // older clients, take the definition from the static database in the
+      // devtools client, and fill it in with the most recent property
+      // definition from the server.
+      const clientDefinition = clientCssDatabase[name] || {};
+      const serverDefinition = {
+        isInherited: DOMUtils.isInheritedProperty(name)
+      };
+      db[name] = Object.assign(clientDefinition, serverDefinition);
+    });
+
+    return db;
   }
 });
 
 /**
  * Test if a CSS is property is known using server-code.
  *
  * @param {string} name
  * @return {Boolean}
--- a/devtools/server/actors/styles.js
+++ b/devtools/server/actors/styles.js
@@ -61,17 +61,17 @@ var PageStyleActor = protocol.ActorClass
   initialize: function (inspector) {
     protocol.Actor.prototype.initialize.call(this, null);
     this.inspector = inspector;
     if (!this.inspector.walker) {
       throw Error("The inspector's WalkerActor must be created before " +
                    "creating a PageStyleActor.");
     }
     this.walker = inspector.walker;
-    this.cssLogic = new CssLogic();
+    this.cssLogic = new CssLogic(DOMUtils.isInheritedProperty);
 
     // Stores the association of DOM objects -> actors
     this.refMap = new Map();
 
     // Maps document elements to style elements, used to add new rules.
     this.styleElements = new WeakMap();
 
     this.onFrameUnload = this.onFrameUnload.bind(this);
--- a/devtools/server/tests/mochitest/test_css-logic-inheritance.html
+++ b/devtools/server/tests/mochitest/test_css-logic-inheritance.html
@@ -11,25 +11,28 @@ Test that css-logic handles inherited pr
 </head>
 <body>
   <div style="margin-left:10px; font-size: 5px">
     <div id="innerdiv">Inner div</div>
   </div>
   <script type="application/javascript;version=1.8">
 
   window.onload = function() {
-    var Cu = Components.utils;
+    var { classes: Cc, utils: Cu, interfaces: Ci } = Components;
+    const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
+      .getService(Ci.inIDOMUtils);
 
     const {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
     var Services = require("Services");
     const {CssLogic} = require("devtools/shared/inspector/css-logic");
 
+
     SimpleTest.waitForExplicitFinish();
 
-    let cssLogic = new CssLogic();
+    let cssLogic = new CssLogic(DOMUtils.isInheritedProperty);
     cssLogic.highlight(document.getElementById("innerdiv"));
 
     let marginProp = cssLogic.getPropertyInfo("margin-left");
     is(marginProp.matchedRuleCount, 0,
       "margin-left should not be included in matched selectors.");
 
     let fontSizeProp = cssLogic.getPropertyInfo("font-size");
     is(fontSizeProp.matchedRuleCount, 1,
--- a/devtools/server/tests/mochitest/test_css-logic-media-queries.html
+++ b/devtools/server/tests/mochitest/test_css-logic-media-queries.html
@@ -22,26 +22,28 @@ Test that css-logic handles media-querie
     }
   </style>
 </head>
 <body>
   <div></div>
   <script type="application/javascript;version=1.8">
 
   window.onload = function() {
-    var Cu = Components.utils;
+    var { classes: Cc, utils: Cu, interfaces: Ci } = Components;
+    const DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
+      .getService(Ci.inIDOMUtils);
 
     var {require} = Cu.import("resource://devtools/shared/Loader.jsm", {});
     var Services = require("Services");
     const {CssLogic} = require("devtools/shared/inspector/css-logic");
 
     SimpleTest.waitForExplicitFinish();
 
     let div = document.querySelector("div");
-    let cssLogic = new CssLogic();
+    let cssLogic = new CssLogic(DOMUtils.isInheritedProperty);
     cssLogic.highlight(div);
     cssLogic.processMatchedSelectors();
 
     let _strings = Services.strings
       .createBundle("chrome://devtools-shared/locale/styleinspector.properties");
 
     let inline = _strings.GetStringFromName("rule.sourceInline");
 
--- a/devtools/server/tests/mochitest/test_css-logic-specificity.html
+++ b/devtools/server/tests/mochitest/test_css-logic-specificity.html
@@ -46,17 +46,17 @@ Test that css-logic calculates CSS speci
 
     function getExpectedSpecificity(selectorText) {
       return TEST_DATA.filter(i => i.text === selectorText)[0].expected;
     }
 
     SimpleTest.waitForExplicitFinish();
 
     createDocument();
-    let cssLogic = new CssLogic();
+    let cssLogic = new CssLogic(DOMUtils.isInheritedProperty);
 
     cssLogic.highlight(document.body);
     let cssSheet = cssLogic.sheets[0];
     let cssRule = cssSheet.domSheet.cssRules[0];
     let selectors = CssLogic.getSelectors(cssRule);
 
     info("Iterating over the test selectors")
     for (let i = 0; i < selectors.length; i++) {
new file mode 100644
--- /dev/null
+++ b/devtools/shared/css-properties-db.js
@@ -0,0 +1,1282 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+/**
+ * This list is generated from the output of the CssPropertiesActor. If a server
+ * does not support the actor, this is loaded as a backup. This list does not
+ * guarantee that the server actually supports these CSS properties.
+ */
+module.exports = {
+  "align-content": {
+    isInherited: false
+  },
+  "align-items": {
+    isInherited: false
+  },
+  "align-self": {
+    isInherited: false
+  },
+  "animation-delay": {
+    isInherited: false
+  },
+  "animation-direction": {
+    isInherited: false
+  },
+  "animation-duration": {
+    isInherited: false
+  },
+  "animation-fill-mode": {
+    isInherited: false
+  },
+  "animation-iteration-count": {
+    isInherited: false
+  },
+  "animation-name": {
+    isInherited: false
+  },
+  "animation-play-state": {
+    isInherited: false
+  },
+  "animation-timing-function": {
+    isInherited: false
+  },
+  "-moz-appearance": {
+    isInherited: false
+  },
+  "backface-visibility": {
+    isInherited: false
+  },
+  "background-attachment": {
+    isInherited: false
+  },
+  "background-blend-mode": {
+    isInherited: false
+  },
+  "background-clip": {
+    isInherited: false
+  },
+  "background-color": {
+    isInherited: false
+  },
+  "background-image": {
+    isInherited: false
+  },
+  "background-origin": {
+    isInherited: false
+  },
+  "background-position-x": {
+    isInherited: false
+  },
+  "background-position-y": {
+    isInherited: false
+  },
+  "background-repeat": {
+    isInherited: false
+  },
+  "background-size": {
+    isInherited: false
+  },
+  "-moz-binding": {
+    isInherited: false
+  },
+  "block-size": {
+    isInherited: false
+  },
+  "border-block-end-color": {
+    isInherited: false
+  },
+  "border-block-end-style": {
+    isInherited: false
+  },
+  "border-block-end-width": {
+    isInherited: false
+  },
+  "border-block-start-color": {
+    isInherited: false
+  },
+  "border-block-start-style": {
+    isInherited: false
+  },
+  "border-block-start-width": {
+    isInherited: false
+  },
+  "border-bottom-color": {
+    isInherited: false
+  },
+  "-moz-border-bottom-colors": {
+    isInherited: false
+  },
+  "border-bottom-left-radius": {
+    isInherited: false
+  },
+  "border-bottom-right-radius": {
+    isInherited: false
+  },
+  "border-bottom-style": {
+    isInherited: false
+  },
+  "border-bottom-width": {
+    isInherited: false
+  },
+  "border-collapse": {
+    isInherited: true
+  },
+  "border-image-outset": {
+    isInherited: false
+  },
+  "border-image-repeat": {
+    isInherited: false
+  },
+  "border-image-slice": {
+    isInherited: false
+  },
+  "border-image-source": {
+    isInherited: false
+  },
+  "border-image-width": {
+    isInherited: false
+  },
+  "border-inline-end-color": {
+    isInherited: false
+  },
+  "border-inline-end-style": {
+    isInherited: false
+  },
+  "border-inline-end-width": {
+    isInherited: false
+  },
+  "border-inline-start-color": {
+    isInherited: false
+  },
+  "border-inline-start-style": {
+    isInherited: false
+  },
+  "border-inline-start-width": {
+    isInherited: false
+  },
+  "border-left-color": {
+    isInherited: false
+  },
+  "-moz-border-left-colors": {
+    isInherited: false
+  },
+  "border-left-style": {
+    isInherited: false
+  },
+  "border-left-width": {
+    isInherited: false
+  },
+  "border-right-color": {
+    isInherited: false
+  },
+  "-moz-border-right-colors": {
+    isInherited: false
+  },
+  "border-right-style": {
+    isInherited: false
+  },
+  "border-right-width": {
+    isInherited: false
+  },
+  "border-spacing": {
+    isInherited: true
+  },
+  "border-top-color": {
+    isInherited: false
+  },
+  "-moz-border-top-colors": {
+    isInherited: false
+  },
+  "border-top-left-radius": {
+    isInherited: false
+  },
+  "border-top-right-radius": {
+    isInherited: false
+  },
+  "border-top-style": {
+    isInherited: false
+  },
+  "border-top-width": {
+    isInherited: false
+  },
+  "bottom": {
+    isInherited: false
+  },
+  "-moz-box-align": {
+    isInherited: false
+  },
+  "box-decoration-break": {
+    isInherited: false
+  },
+  "-moz-box-direction": {
+    isInherited: false
+  },
+  "-moz-box-flex": {
+    isInherited: false
+  },
+  "-moz-box-ordinal-group": {
+    isInherited: false
+  },
+  "-moz-box-orient": {
+    isInherited: false
+  },
+  "-moz-box-pack": {
+    isInherited: false
+  },
+  "box-shadow": {
+    isInherited: false
+  },
+  "box-sizing": {
+    isInherited: false
+  },
+  "caption-side": {
+    isInherited: true
+  },
+  "clear": {
+    isInherited: false
+  },
+  "clip": {
+    isInherited: false
+  },
+  "clip-path": {
+    isInherited: false
+  },
+  "clip-rule": {
+    isInherited: true
+  },
+  "color": {
+    isInherited: true
+  },
+  "color-adjust": {
+    isInherited: true
+  },
+  "color-interpolation": {
+    isInherited: true
+  },
+  "color-interpolation-filters": {
+    isInherited: true
+  },
+  "-moz-column-count": {
+    isInherited: false
+  },
+  "-moz-column-fill": {
+    isInherited: false
+  },
+  "-moz-column-gap": {
+    isInherited: false
+  },
+  "-moz-column-rule-color": {
+    isInherited: false
+  },
+  "-moz-column-rule-style": {
+    isInherited: false
+  },
+  "-moz-column-rule-width": {
+    isInherited: false
+  },
+  "-moz-column-width": {
+    isInherited: false
+  },
+  "content": {
+    isInherited: false
+  },
+  "-moz-control-character-visibility": {
+    isInherited: true
+  },
+  "counter-increment": {
+    isInherited: false
+  },
+  "counter-reset": {
+    isInherited: false
+  },
+  "cursor": {
+    isInherited: true
+  },
+  "direction": {
+    isInherited: true
+  },
+  "display": {
+    isInherited: false
+  },
+  "dominant-baseline": {
+    isInherited: false
+  },
+  "empty-cells": {
+    isInherited: true
+  },
+  "fill": {
+    isInherited: true
+  },
+  "fill-opacity": {
+    isInherited: true
+  },
+  "fill-rule": {
+    isInherited: true
+  },
+  "filter": {
+    isInherited: false
+  },
+  "flex-basis": {
+    isInherited: false
+  },
+  "flex-direction": {
+    isInherited: false
+  },
+  "flex-grow": {
+    isInherited: false
+  },
+  "flex-shrink": {
+    isInherited: false
+  },
+  "flex-wrap": {
+    isInherited: false
+  },
+  "float": {
+    isInherited: false
+  },
+  "-moz-float-edge": {
+    isInherited: false
+  },
+  "flood-color": {
+    isInherited: false
+  },
+  "flood-opacity": {
+    isInherited: false
+  },
+  "font-family": {
+    isInherited: true
+  },
+  "font-feature-settings": {
+    isInherited: true
+  },
+  "font-kerning": {
+    isInherited: true
+  },
+  "font-language-override": {
+    isInherited: true
+  },
+  "font-size": {
+    isInherited: true
+  },
+  "font-size-adjust": {
+    isInherited: true
+  },
+  "font-stretch": {
+    isInherited: true
+  },
+  "font-style": {
+    isInherited: true
+  },
+  "font-synthesis": {
+    isInherited: true
+  },
+  "font-variant-alternates": {
+    isInherited: true
+  },
+  "font-variant-caps": {
+    isInherited: true
+  },
+  "font-variant-east-asian": {
+    isInherited: true
+  },
+  "font-variant-ligatures": {
+    isInherited: true
+  },
+  "font-variant-numeric": {
+    isInherited: true
+  },
+  "font-variant-position": {
+    isInherited: true
+  },
+  "font-weight": {
+    isInherited: true
+  },
+  "-moz-force-broken-image-icon": {
+    isInherited: false
+  },
+  "grid-auto-columns": {
+    isInherited: false
+  },
+  "grid-auto-flow": {
+    isInherited: false
+  },
+  "grid-auto-rows": {
+    isInherited: false
+  },
+  "grid-column-end": {
+    isInherited: false
+  },
+  "grid-column-gap": {
+    isInherited: false
+  },
+  "grid-column-start": {
+    isInherited: false
+  },
+  "grid-row-end": {
+    isInherited: false
+  },
+  "grid-row-gap": {
+    isInherited: false
+  },
+  "grid-row-start": {
+    isInherited: false
+  },
+  "grid-template-areas": {
+    isInherited: false
+  },
+  "grid-template-columns": {
+    isInherited: false
+  },
+  "grid-template-rows": {
+    isInherited: false
+  },
+  "height": {
+    isInherited: false
+  },
+  "hyphens": {
+    isInherited: true
+  },
+  "image-orientation": {
+    isInherited: true
+  },
+  "-moz-image-region": {
+    isInherited: true
+  },
+  "image-rendering": {
+    isInherited: true
+  },
+  "ime-mode": {
+    isInherited: false
+  },
+  "inline-size": {
+    isInherited: false
+  },
+  "isolation": {
+    isInherited: false
+  },
+  "justify-content": {
+    isInherited: false
+  },
+  "justify-items": {
+    isInherited: false
+  },
+  "justify-self": {
+    isInherited: false
+  },
+  "left": {
+    isInherited: false
+  },
+  "letter-spacing": {
+    isInherited: true
+  },
+  "lighting-color": {
+    isInherited: false
+  },
+  "line-height": {
+    isInherited: true
+  },
+  "list-style-image": {
+    isInherited: true
+  },
+  "list-style-position": {
+    isInherited: true
+  },
+  "list-style-type": {
+    isInherited: true
+  },
+  "margin-block-end": {
+    isInherited: false
+  },
+  "margin-block-start": {
+    isInherited: false
+  },
+  "margin-bottom": {
+    isInherited: false
+  },
+  "margin-inline-end": {
+    isInherited: false
+  },
+  "margin-inline-start": {
+    isInherited: false
+  },
+  "margin-left": {
+    isInherited: false
+  },
+  "margin-right": {
+    isInherited: false
+  },
+  "margin-top": {
+    isInherited: false
+  },
+  "marker-end": {
+    isInherited: true
+  },
+  "marker-mid": {
+    isInherited: true
+  },
+  "marker-offset": {
+    isInherited: false
+  },
+  "marker-start": {
+    isInherited: true
+  },
+  "mask": {
+    isInherited: false
+  },
+  "mask-type": {
+    isInherited: false
+  },
+  "max-block-size": {
+    isInherited: false
+  },
+  "max-height": {
+    isInherited: false
+  },
+  "max-inline-size": {
+    isInherited: false
+  },
+  "max-width": {
+    isInherited: false
+  },
+  "min-block-size": {
+    isInherited: false
+  },
+  "min-height": {
+    isInherited: false
+  },
+  "min-inline-size": {
+    isInherited: false
+  },
+  "min-width": {
+    isInherited: false
+  },
+  "mix-blend-mode": {
+    isInherited: false
+  },
+  "object-fit": {
+    isInherited: false
+  },
+  "object-position": {
+    isInherited: false
+  },
+  "offset-block-end": {
+    isInherited: false
+  },
+  "offset-block-start": {
+    isInherited: false
+  },
+  "offset-inline-end": {
+    isInherited: false
+  },
+  "offset-inline-start": {
+    isInherited: false
+  },
+  "opacity": {
+    isInherited: false
+  },
+  "order": {
+    isInherited: false
+  },
+  "-moz-orient": {
+    isInherited: false
+  },
+  "-moz-osx-font-smoothing": {
+    isInherited: true
+  },
+  "outline-color": {
+    isInherited: false
+  },
+  "outline-offset": {
+    isInherited: false
+  },
+  "-moz-outline-radius-bottomleft": {
+    isInherited: false
+  },
+  "-moz-outline-radius-bottomright": {
+    isInherited: false
+  },
+  "-moz-outline-radius-topleft": {
+    isInherited: false
+  },
+  "-moz-outline-radius-topright": {
+    isInherited: false
+  },
+  "outline-style": {
+    isInherited: false
+  },
+  "outline-width": {
+    isInherited: false
+  },
+  "overflow-x": {
+    isInherited: false
+  },
+  "overflow-y": {
+    isInherited: false
+  },
+  "padding-block-end": {
+    isInherited: false
+  },
+  "padding-block-start": {
+    isInherited: false
+  },
+  "padding-bottom": {
+    isInherited: false
+  },
+  "padding-inline-end": {
+    isInherited: false
+  },
+  "padding-inline-start": {
+    isInherited: false
+  },
+  "padding-left": {
+    isInherited: false
+  },
+  "padding-right": {
+    isInherited: false
+  },
+  "padding-top": {
+    isInherited: false
+  },
+  "page-break-after": {
+    isInherited: false
+  },
+  "page-break-before": {
+    isInherited: false
+  },
+  "page-break-inside": {
+    isInherited: false
+  },
+  "paint-order": {
+    isInherited: true
+  },
+  "perspective": {
+    isInherited: false
+  },
+  "perspective-origin": {
+    isInherited: false
+  },
+  "pointer-events": {
+    isInherited: true
+  },
+  "position": {
+    isInherited: false
+  },
+  "quotes": {
+    isInherited: true
+  },
+  "resize": {
+    isInherited: false
+  },
+  "right": {
+    isInherited: false
+  },
+  "ruby-align": {
+    isInherited: true
+  },
+  "ruby-position": {
+    isInherited: true
+  },
+  "scroll-behavior": {
+    isInherited: false
+  },
+  "scroll-snap-coordinate": {
+    isInherited: false
+  },
+  "scroll-snap-destination": {
+    isInherited: false
+  },
+  "scroll-snap-points-x": {
+    isInherited: false
+  },
+  "scroll-snap-points-y": {
+    isInherited: false
+  },
+  "scroll-snap-type-x": {
+    isInherited: false
+  },
+  "scroll-snap-type-y": {
+    isInherited: false
+  },
+  "shape-rendering": {
+    isInherited: true
+  },
+  "-moz-stack-sizing": {
+    isInherited: false
+  },
+  "stop-color": {
+    isInherited: false
+  },
+  "stop-opacity": {
+    isInherited: false
+  },
+  "stroke": {
+    isInherited: true
+  },
+  "stroke-dasharray": {
+    isInherited: true
+  },
+  "stroke-dashoffset": {
+    isInherited: true
+  },
+  "stroke-linecap": {
+    isInherited: true
+  },
+  "stroke-linejoin": {
+    isInherited: true
+  },
+  "stroke-miterlimit": {
+    isInherited: true
+  },
+  "stroke-opacity": {
+    isInherited: true
+  },
+  "stroke-width": {
+    isInherited: true
+  },
+  "-moz-tab-size": {
+    isInherited: true
+  },
+  "table-layout": {
+    isInherited: false
+  },
+  "text-align": {
+    isInherited: true
+  },
+  "text-align-last": {
+    isInherited: true
+  },
+  "text-anchor": {
+    isInherited: true
+  },
+  "text-combine-upright": {
+    isInherited: true
+  },
+  "text-decoration-color": {
+    isInherited: false
+  },
+  "text-decoration-line": {
+    isInherited: false
+  },
+  "text-decoration-style": {
+    isInherited: false
+  },
+  "text-emphasis-color": {
+    isInherited: true
+  },
+  "text-emphasis-position": {
+    isInherited: true
+  },
+  "text-emphasis-style": {
+    isInherited: true
+  },
+  "-webkit-text-fill-color": {
+    isInherited: true
+  },
+  "text-indent": {
+    isInherited: true
+  },
+  "text-orientation": {
+    isInherited: true
+  },
+  "text-overflow": {
+    isInherited: false
+  },
+  "text-rendering": {
+    isInherited: true
+  },
+  "text-shadow": {
+    isInherited: true
+  },
+  "-moz-text-size-adjust": {
+    isInherited: true
+  },
+  "-webkit-text-stroke-color": {
+    isInherited: true
+  },
+  "-webkit-text-stroke-width": {
+    isInherited: true
+  },
+  "text-transform": {
+    isInherited: true
+  },
+  "top": {
+    isInherited: false
+  },
+  "transform": {
+    isInherited: false
+  },
+  "transform-box": {
+    isInherited: false
+  },
+  "transform-origin": {
+    isInherited: false
+  },
+  "transform-style": {
+    isInherited: false
+  },
+  "transition-delay": {
+    isInherited: false
+  },
+  "transition-duration": {
+    isInherited: false
+  },
+  "transition-property": {
+    isInherited: false
+  },
+  "transition-timing-function": {
+    isInherited: false
+  },
+  "unicode-bidi": {
+    isInherited: false
+  },
+  "-moz-user-focus": {
+    isInherited: true
+  },
+  "-moz-user-input": {
+    isInherited: true
+  },
+  "-moz-user-modify": {
+    isInherited: true
+  },
+  "-moz-user-select": {
+    isInherited: false
+  },
+  "vector-effect": {
+    isInherited: false
+  },
+  "vertical-align": {
+    isInherited: false
+  },
+  "visibility": {
+    isInherited: true
+  },
+  "white-space": {
+    isInherited: true
+  },
+  "width": {
+    isInherited: false
+  },
+  "will-change": {
+    isInherited: false
+  },
+  "-moz-window-dragging": {
+    isInherited: false
+  },
+  "word-break": {
+    isInherited: true
+  },
+  "word-spacing": {
+    isInherited: true
+  },
+  "overflow-wrap": {
+    isInherited: true
+  },
+  "writing-mode": {
+    isInherited: true
+  },
+  "z-index": {
+    isInherited: false
+  },
+  "all": {
+    isInherited: false
+  },
+  "animation": {
+    isInherited: false
+  },
+  "background": {
+    isInherited: false
+  },
+  "background-position": {
+    isInherited: false
+  },
+  "border": {
+    isInherited: false
+  },
+  "border-block-end": {
+    isInherited: false
+  },
+  "border-block-start": {
+    isInherited: false
+  },
+  "border-bottom": {
+    isInherited: false
+  },
+  "border-color": {
+    isInherited: false
+  },
+  "border-image": {
+    isInherited: false
+  },
+  "border-inline-end": {
+    isInherited: false
+  },
+  "border-inline-start": {
+    isInherited: false
+  },
+  "border-left": {
+    isInherited: false
+  },
+  "border-radius": {
+    isInherited: false
+  },
+  "border-right": {
+    isInherited: false
+  },
+  "border-style": {
+    isInherited: false
+  },
+  "border-top": {
+    isInherited: false
+  },
+  "border-width": {
+    isInherited: false
+  },
+  "-moz-column-rule": {
+    isInherited: false
+  },
+  "-moz-columns": {
+    isInherited: false
+  },
+  "flex": {
+    isInherited: false
+  },
+  "flex-flow": {
+    isInherited: false
+  },
+  "font": {
+    isInherited: true
+  },
+  "font-variant": {
+    isInherited: true
+  },
+  "grid": {
+    isInherited: false
+  },
+  "grid-area": {
+    isInherited: false
+  },
+  "grid-column": {
+    isInherited: false
+  },
+  "grid-gap": {
+    isInherited: false
+  },
+  "grid-row": {
+    isInherited: false
+  },
+  "grid-template": {
+    isInherited: false
+  },
+  "list-style": {
+    isInherited: true
+  },
+  "margin": {
+    isInherited: false
+  },
+  "marker": {
+    isInherited: true
+  },
+  "outline": {
+    isInherited: false
+  },
+  "-moz-outline-radius": {
+    isInherited: false
+  },
+  "overflow": {
+    isInherited: false
+  },
+  "padding": {
+    isInherited: false
+  },
+  "scroll-snap-type": {
+    isInherited: false
+  },
+  "text-decoration": {
+    isInherited: false
+  },
+  "text-emphasis": {
+    isInherited: true
+  },
+  "-webkit-text-stroke": {
+    isInherited: true
+  },
+  "-moz-transform": {
+    isInherited: false
+  },
+  "transition": {
+    isInherited: false
+  },
+  "word-wrap": {
+    isInherited: true
+  },
+  "-moz-transform-origin": {
+    isInherited: false
+  },
+  "-moz-perspective-origin": {
+    isInherited: false
+  },
+  "-moz-perspective": {
+    isInherited: false
+  },
+  "-moz-transform-style": {
+    isInherited: false
+  },
+  "-moz-backface-visibility": {
+    isInherited: false
+  },
+  "-moz-border-image": {
+    isInherited: false
+  },
+  "-moz-transition": {
+    isInherited: false
+  },
+  "-moz-transition-delay": {
+    isInherited: false
+  },
+  "-moz-transition-duration": {
+    isInherited: false
+  },
+  "-moz-transition-property": {
+    isInherited: false
+  },
+  "-moz-transition-timing-function": {
+    isInherited: false
+  },
+  "-moz-animation": {
+    isInherited: false
+  },
+  "-moz-animation-delay": {
+    isInherited: false
+  },
+  "-moz-animation-direction": {
+    isInherited: false
+  },
+  "-moz-animation-duration": {
+    isInherited: false
+  },
+  "-moz-animation-fill-mode": {
+    isInherited: false
+  },
+  "-moz-animation-iteration-count": {
+    isInherited: false
+  },
+  "-moz-animation-name": {
+    isInherited: false
+  },
+  "-moz-animation-play-state": {
+    isInherited: false
+  },
+  "-moz-animation-timing-function": {
+    isInherited: false
+  },
+  "-moz-box-sizing": {
+    isInherited: false
+  },
+  "-moz-font-feature-settings": {
+    isInherited: true
+  },
+  "-moz-font-language-override": {
+    isInherited: true
+  },
+  "-moz-padding-end": {
+    isInherited: false
+  },
+  "-moz-padding-start": {
+    isInherited: false
+  },
+  "-moz-margin-end": {
+    isInherited: false
+  },
+  "-moz-margin-start": {
+    isInherited: false
+  },
+  "-moz-border-end": {
+    isInherited: false
+  },
+  "-moz-border-end-color": {
+    isInherited: false
+  },
+  "-moz-border-end-style": {
+    isInherited: false
+  },
+  "-moz-border-end-width": {
+    isInherited: false
+  },
+  "-moz-border-start": {
+    isInherited: false
+  },
+  "-moz-border-start-color": {
+    isInherited: false
+  },
+  "-moz-border-start-style": {
+    isInherited: false
+  },
+  "-moz-border-start-width": {
+    isInherited: false
+  },
+  "-moz-hyphens": {
+    isInherited: true
+  },
+  "-moz-text-align-last": {
+    isInherited: true
+  },
+  "-webkit-animation": {
+    isInherited: false
+  },
+  "-webkit-animation-delay": {
+    isInherited: false
+  },
+  "-webkit-animation-direction": {
+    isInherited: false
+  },
+  "-webkit-animation-duration": {
+    isInherited: false
+  },
+  "-webkit-animation-fill-mode": {
+    isInherited: false
+  },
+  "-webkit-animation-iteration-count": {
+    isInherited: false
+  },
+  "-webkit-animation-name": {
+    isInherited: false
+  },
+  "-webkit-animation-play-state": {
+    isInherited: false
+  },
+  "-webkit-animation-timing-function": {
+    isInherited: false
+  },
+  "-webkit-filter": {
+    isInherited: false
+  },
+  "-webkit-text-size-adjust": {
+    isInherited: true
+  },
+  "-webkit-transform": {
+    isInherited: false
+  },
+  "-webkit-transform-origin": {
+    isInherited: false
+  },
+  "-webkit-transform-style": {
+    isInherited: false
+  },
+  "-webkit-backface-visibility": {
+    isInherited: false
+  },
+  "-webkit-perspective": {
+    isInherited: false
+  },
+  "-webkit-perspective-origin": {
+    isInherited: false
+  },
+  "-webkit-transition": {
+    isInherited: false
+  },
+  "-webkit-transition-delay": {
+    isInherited: false
+  },
+  "-webkit-transition-duration": {
+    isInherited: false
+  },
+  "-webkit-transition-property": {
+    isInherited: false
+  },
+  "-webkit-transition-timing-function": {
+    isInherited: false
+  },
+  "-webkit-border-radius": {
+    isInherited: false
+  },
+  "-webkit-border-top-left-radius": {
+    isInherited: false
+  },
+  "-webkit-border-top-right-radius": {
+    isInherited: false
+  },
+  "-webkit-border-bottom-left-radius": {
+    isInherited: false
+  },
+  "-webkit-border-bottom-right-radius": {
+    isInherited: false
+  },
+  "-webkit-background-clip": {
+    isInherited: false
+  },
+  "-webkit-background-origin": {
+    isInherited: false
+  },
+  "-webkit-background-size": {
+    isInherited: false
+  },
+  "-webkit-border-image": {
+    isInherited: false
+  },
+  "-webkit-box-shadow": {
+    isInherited: false
+  },
+  "-webkit-box-sizing": {
+    isInherited: false
+  },
+  "-webkit-box-flex": {
+    isInherited: false
+  },
+  "-webkit-box-ordinal-group": {
+    isInherited: false
+  },
+  "-webkit-box-orient": {
+    isInherited: false
+  },
+  "-webkit-box-direction": {
+    isInherited: false
+  },
+  "-webkit-box-align": {
+    isInherited: false
+  },
+  "-webkit-box-pack": {
+    isInherited: false
+  },
+  "-webkit-flex-direction": {
+    isInherited: false
+  },
+  "-webkit-flex-wrap": {
+    isInherited: false
+  },
+  "-webkit-flex-flow": {
+    isInherited: false
+  },
+  "-webkit-order": {
+    isInherited: false
+  },
+  "-webkit-flex": {
+    isInherited: false
+  },
+  "-webkit-flex-grow": {
+    isInherited: false
+  },
+  "-webkit-flex-shrink": {
+    isInherited: false
+  },
+  "-webkit-flex-basis": {
+    isInherited: false
+  },
+  "-webkit-justify-content": {
+    isInherited: false
+  },
+  "-webkit-align-items": {
+    isInherited: false
+  },
+  "-webkit-align-self": {
+    isInherited: false
+  },
+  "-webkit-align-content": {
+    isInherited: false
+  },
+  "-webkit-user-select": {
+    isInherited: false
+  }
+};
--- a/devtools/shared/fronts/css-properties.js
+++ b/devtools/shared/fronts/css-properties.js
@@ -45,36 +45,45 @@ const CssPropertiesFront = FrontClassWit
 });
 
 exports.CssPropertiesFront = CssPropertiesFront;
 
 /**
  * Ask questions to a CSS database. This class does not care how the database
  * gets loaded in, only the questions that you can ask to it.
  *
- * @param {array} properties
- *                A list of all supported CSS properties.
+ * @param {Array}  propertiesList
+ *                 A list of known properties.
+ * @param {Object} inheritedList
+ *                 The key is the property name, the value is whether or not
+ *                 that property is inherited.
  */
 function CssProperties(properties) {
   this.properties = properties;
-  // Bind isKnown so it can be passed around to helper functions.
+  // Bind isKnown and isInherited so it can be passed around to helper
+  // functions.
   this.isKnown = this.isKnown.bind(this);
+  this.isInherited = this.isInherited.bind(this);
 }
 
 CssProperties.prototype = {
   /**
    * Checks to see if the property is known by the browser. This function has
    * `this` already bound so that it can be passed around by reference.
    *
    * @param {String}   property
    *                   The property name to be checked.
    * @return {Boolean}
    */
   isKnown(property) {
-    return this.properties.includes(property) || isCssVariable(property);
+    return !!this.properties[property] || isCssVariable(property);
+  },
+
+  isInherited(property) {
+    return this.properties[property] && this.properties[property].isInherited;
   }
 };
 
 exports.CssProperties = CssProperties;
 
 /**
  * Create a CssProperties object with a fully loaded CSS database. The
  * CssProperties interface can be queried synchronously, but the initialization
@@ -87,30 +96,28 @@ exports.CssProperties = CssProperties;
  * @returns {Promise} Resolves to {cssProperties, cssPropertiesFront}.
  */
 exports.initCssProperties = Task.async(function* (toolbox) {
   let client = toolbox.target.client;
   if (cachedCssProperties.has(client)) {
     return cachedCssProperties.get(client);
   }
 
-  let propertiesList, front;
+  let db, front;
 
   // Get the list dynamically if the cssProperties exists.
   if (toolbox.target.hasActor("cssProperties")) {
     front = CssPropertiesFront(client, toolbox.target.form);
-    const db = yield front.getCSSDatabase();
-    propertiesList = db.propertiesList;
+    db = yield front.getCSSDatabase();
   } else {
     // The target does not support this actor, so require a static list of
     // supported properties.
-    const db = require("devtools/client/shared/css-properties-db");
-    propertiesList = db.propertiesList;
+    db = require("devtools/shared/css-properties-db");
   }
-  const cssProperties = new CssProperties(propertiesList);
+  const cssProperties = new CssProperties(db);
   cachedCssProperties.set(client, {cssProperties, front});
   return {cssProperties, front};
 });
 
 /**
  * Synchronously get a cached and initialized CssProperties.
  *
  * @param {Toolbox} The current toolbox.
--- a/devtools/shared/inspector/css-logic.js
+++ b/devtools/shared/inspector/css-logic.js
@@ -47,18 +47,23 @@ const { getRootBindingParent } = require
 const nodeConstants = require("devtools/shared/dom-node-constants");
 
 // This should be ok because none of the functions that use this should be used
 // on the worker thread, where Cu is not available.
 loader.lazyRequireGetter(this, "CSS", "CSS");
 
 loader.lazyRequireGetter(this, "CSSLexer", "devtools/shared/css-lexer");
 
-function CssLogic() {
+/**
+ * @param {function} isInherited A function that determines if the CSS property
+ *                   is inherited.
+ */
+function CssLogic(isInherited) {
   // The cache of examined CSS properties.
+  this._isInherited = isInherited;
   this._propertyInfos = {};
 }
 
 exports.CssLogic = CssLogic;
 
 /**
  * Special values for filter, in addition to an href these values can be used
  */
@@ -249,17 +254,17 @@ CssLogic.prototype = {
    */
   getPropertyInfo: function (property) {
     if (!this.viewedElement) {
       return {};
     }
 
     let info = this._propertyInfos[property];
     if (!info) {
-      info = new CssPropertyInfo(this, property);
+      info = new CssPropertyInfo(this, property, this._isInherited);
       this._propertyInfos[property] = info;
     }
 
     return info;
   },
 
   /**
    * Cache all the stylesheets in the inspected document
@@ -564,17 +569,17 @@ CssLogic.prototype = {
       let rule = value[0];
       let status = value[1];
       properties = properties.filter((property) => {
         // We just need to find if a rule has this property while it matches
         // the viewedElement (or its parents).
         if (rule.getPropertyValue(property) &&
             (status == CssLogic.STATUS.MATCHED ||
              (status == CssLogic.STATUS.PARENT_MATCH &&
-              domUtils.isInheritedProperty(property)))) {
+              this._isInherited(property)))) {
           result[property] = true;
           return false;
         }
         // Keep the property for the next rule.
         return true;
       });
       return properties.length == 0;
     }, this);
@@ -1642,22 +1647,25 @@ CssSelector.prototype = {
  *
  * The heart of the CssPropertyInfo object is the _findMatchedSelectors()
  * method. This are invoked when the PropertyView tries to access the
  * .matchedSelectors array.
  * Results are cached, for later reuse.
  *
  * @param {CssLogic} cssLogic Reference to the parent CssLogic instance
  * @param {string} property The CSS property we are gathering information for
+ * @param {function} isInherited A function that determines if the CSS property
+ *                   is inherited.
  * @constructor
  */
-function CssPropertyInfo(cssLogic, property) {
+function CssPropertyInfo(cssLogic, property, isInherited) {
   this._cssLogic = cssLogic;
   this.property = property;
   this._value = "";
+  this._isInherited = isInherited;
 
   // The number of matched rules holding the this.property style property.
   // Additionally, only rules that come from allowed stylesheets are counted.
   this._matchedRuleCount = 0;
 
   // An array holding CssSelectorInfo objects for each of the matched selectors
   // that are inside a CSS rule. Only rules that hold the this.property are
   // counted. This includes rules that come from filtered stylesheets (those
@@ -1759,17 +1767,17 @@ CssPropertyInfo.prototype = {
    * @param {CssLogic.STATUS} status the CssSelector match status.
    */
   _processMatchedSelector: function (selector, status) {
     let cssRule = selector.cssRule;
     let value = cssRule.getPropertyValue(this.property);
     if (value &&
         (status == CssLogic.STATUS.MATCHED ||
          (status == CssLogic.STATUS.PARENT_MATCH &&
-          domUtils.isInheritedProperty(this.property)))) {
+          this._isInherited(this.property)))) {
       let selectorInfo = new CssSelectorInfo(selector, this.property, value,
           status);
       this._matchedSelectors.push(selectorInfo);
       if (this._cssLogic._passId !== cssRule._passId && cssRule.sheetAllowed) {
         this._matchedRuleCount++;
       }
     }
   },
--- a/devtools/shared/moz.build
+++ b/devtools/shared/moz.build
@@ -39,16 +39,17 @@ JAR_MANIFESTS += ['jar.mn']
 
 DevToolsModules(
     'async-storage.js',
     'async-utils.js',
     'builtin-modules.js',
     'content-observer.js',
     'css-lexer.js',
     'css-parsing-utils.js',
+    'css-properties-db.js',
     'defer.js',
     'deprecated-sync-thenables.js',
     'DevToolsUtils.js',
     'dom-node-constants.js',
     'event-emitter.js',
     'event-parsers.js',
     'indentation.js',
     'Loader.jsm',