Bug 1465397 - Font Editor: read font properties from computed style and overwrite with ones explicitly declared. r=pbro.
authorRazvan Caliman <rcaliman@mozilla.com>
Mon, 04 Jun 2018 15:07:00 +0200
changeset 421536 e0d8aa3344b85dce6a962b5dc2e48a0ee403b524
parent 421535 2c78b7574bc1d1b9f5797bf0016438f6121449ec
child 421537 841300ddc8ec135573453aa95a31196d84bba872
push id34097
push usernbeleuzu@mozilla.com
push dateWed, 06 Jun 2018 16:59:16 +0000
treeherdermozilla-central@223e5900fbbb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1465397
milestone62.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 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
devtools/client/inspector/fonts/fonts.js
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -153,27 +153,44 @@ class FontInspector {
     this.store = null;
     this.textProperties.clear();
     this.textProperties = null;
     this.writers.clear();
     this.writers = null;
   }
 
   /**
-   * 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;
   }
 
   async getFontsForNode(node, options) {
     // In case we've been destroyed in the meantime
     if (!this.document) {
       return [];
     }