Bug 1464801 - Externalize parsing axis and values from font-variation-settings. r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Wed, 30 May 2018 00:11:16 +0200
changeset 420528 a8d1c965c25ece82ae277592d5cfb9d2a9c45341
parent 420527 061370af88da365e5e11d2082735746f186c460e
child 420529 42cb57f4d43a886640980df5d7476d4f222be02b
push id103828
push useraiakab@mozilla.com
push dateWed, 30 May 2018 22:08:58 +0000
treeherdermozilla-inbound@8d0ee6e73fb3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1464801
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 1464801 - Externalize parsing axis and values from font-variation-settings. r=pbro MozReview-Commit-ID: B5HeSdyaUx3
devtools/client/inspector/fonts/reducers/font-editor.js
devtools/client/inspector/fonts/utils/font-utils.js
--- a/devtools/client/inspector/fonts/reducers/font-editor.js
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -1,15 +1,16 @@
 /* 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";
 
 const { getStr } = require("../utils/l10n");
+const { parseFontVariationAxes } = require("../utils/font-utils");
 
 const {
   APPLY_FONT_VARIATION_INSTANCE,
   RESET_EDITOR,
   UPDATE_AXIS_VALUE,
   UPDATE_CUSTOM_INSTANCE,
   UPDATE_EDITOR_STATE,
   UPDATE_PROPERTY_VALUE,
@@ -65,32 +66,17 @@ let reducers = {
     const newState = { ...state };
     newState.customInstanceValues = Object.keys(state.axes).map(axis => {
       return { axis: [axis], value: state.axes[axis] };
     });
     return newState;
   },
 
   [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.
     let weight = properties["font-weight"];
     if (axes.wght === undefined && parseFloat(weight).toString() === weight.toString()) {
       axes.wght = weight;
     }
 
--- a/devtools/client/inspector/fonts/utils/font-utils.js
+++ b/devtools/client/inspector/fonts/utils/font-utils.js
@@ -35,9 +35,44 @@ module.exports = {
   getUnitFromValue(value) {
     if (typeof value !== "string") {
       return null;
     }
 
     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;
+  }
 };