Bug 1464801 - Externalize parsing axis and values from font-variation-settings. r=pbro

MozReview-Commit-ID: B5HeSdyaUx3

--HG--
extra : rebase_source : 84fe8b81055010f4c9b5565c8f51c743ff071c72

devtools/client/inspector/fonts/reducers/font-editor.js

@@ -5,6 +5,7 @@
 "use strict";
 
 const { getStr } = require("../utils/l10n");
+const { parseFontVariationAxes } = require("../utils/font-utils");
 
 const {
   APPLY_FONT_VARIATION_INSTANCE,
@@ -70,22 +71,7 @@ let reducers = {
   },
 
   [UPDATE_EDITOR_STATE](state, { fonts, properties }) {
-    let axes = {};
-
-    if (properties["font-variation-settings"] !== "normal") {
-      // Parse font-variation-settings CSS declaration into an object
-      // with axis tags as keys and axis values as values.
-      axes = properties["font-variation-settings"]
-        .split(",")
-        .reduce((acc, pair) => {
-          // Tags are always in quotes. Split by quote and filter excessive whitespace.
-          pair = pair.split(/["']/).filter(part => part.trim() !== "");
-          const tag = pair[0].trim();
-          const value = pair[1].trim();
-          acc[tag] = value;
-          return acc;
-        }, {});
-    }
+    let axes = parseFontVariationAxes(properties["font-variation-settings"]);
 
     // If not defined in font-variation-settings, setup "wght" axis with the value of
     // "font-weight" if it is numeric and not a keyword.

devtools/client/inspector/fonts/utils/font-utils.js

@@ -40,4 +40,39 @@ module.exports = {
     const match = value.match(/\D+?$/);
     return match && match.length ? match[0] : null;
   },
+
+  /**
+   * Parse the string value of CSS font-variation-settings into an object with
+   * axis tag names and corresponding values. If the string is a keyword or does not
+   * contain axes, return an empty object.
+   *
+   * @param {String} string
+   *        Value of font-variation-settings property coming from node's computed style.
+   *        Its contents are expected to be stable having been already parsed by the
+   *        browser.
+   * @return {Object}
+   */
+  parseFontVariationAxes(string) {
+    let axes = {};
+    let keywords = ["initial", "normal", "inherit", "unset"];
+
+    if (keywords.includes(string.trim())) {
+      return axes;
+    }
+
+    // Parse font-variation-settings CSS declaration into an object
+    // with axis tags as keys and axis values as values.
+    axes = string
+      .split(",")
+      .reduce((acc, pair) => {
+        // Tags are always in quotes. Split by quote and filter excessive whitespace.
+        pair = pair.split(/["']/).filter(part => part.trim() !== "");
+        const tag = pair[0].trim();
+        const value = pair[1].trim();
+        acc[tag] = value;
+        return acc;
+      }, {});
+
+    return axes;
+  }
 };