Bug 1465397 - Font Editor: read font properties from computed style and overwrite with ones explicitly declared. r=pbro.

- Read all expected font properties from computed style.
- Overwrite with properties explicitly declared in rules which apply.
- Skip explicit keywords, CSS Custom Properties and calc() expressions.

MozReview-Commit-ID: JAKHundvV5w

--HG--
extra : rebase_source : d809d6630ab4eb3015e14daf8bcad5f2c8a14b11

devtools/client/inspector/fonts/fonts.js

@@ -158,17 +158,34 @@ class FontInspector {
   }
 
   /**
-   * Get all expected CSS font properties and values from the node's computed style.
+   * Get all expected CSS font properties and values from the node's matching rules and
+   * fallback to computed style.
    *
    * @return {Object}
    */
   getFontProperties() {
+    const KEYWORD_VALUES = ["initial", "inherit", "unset", "none"];
     const properties = {};
 
+    // First, get all expected font properties from computed styles.
     for (const prop of FONT_PROPERTIES) {
       properties[prop] = this.nodeComputedStyle[prop].value;
     }
 
+    // Then, replace with enabled font properties found on any of the rules that apply.
+    for (const rule of this.ruleView.rules) {
+      for (const textProp of rule.textProps) {
+        if (FONT_PROPERTIES.includes(textProp.name) &&
+            !KEYWORD_VALUES.includes(textProp.value) &&
+            !textProp.value.includes("calc(") &&
+            !textProp.value.includes("var(") &&
+            !textProp.overridden &&
+            textProp.enabled) {
+          properties[textProp.name] = textProp.value;
+        }
+      }
+    }
+
     return properties;
   }