Bug 1449891 - Setup Font Editor with font properties from rule or inherited. r=gl
authorRazvan Caliman <rcaliman@mozilla.com>
Tue, 24 Apr 2018 13:32:38 +0200
changeset 417482 8824e436d3bda6d5ab78c6b11c52bc02c03e6c97
parent 417481 41fc8534882ebe66046fdbb973b0307ba4b27be4
child 417483 60e83456adb9358ed032dc510db0e25e48534353
push id33968
push userebalazs@mozilla.com
push dateWed, 09 May 2018 09:32:53 +0000
treeherdermozilla-central@a2eccfbeb0ae [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1449891
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 1449891 - Setup Font Editor with font properties from rule or inherited. r=gl MozReview-Commit-ID: HwydD2JeKAh
devtools/client/inspector/fonts/fonts.js
devtools/client/inspector/fonts/reducers/font-editor.js
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -165,18 +165,18 @@ class FontInspector {
     this.store = null;
     this.textProperties.clear();
     this.textProperties = null;
     this.writers.clear();
     this.writers = null;
   }
 
   /**
-   * Collect all expected CSS font properties and their values for the selected node
-   * from the node's computed style and from the selected rule.
+   * Collect all the expected CSS font properties and their values for the selected node
+   * from the node's computed style and from all the rules that apply to it.
    *
    * @return {Object}
    */
   getFontProperties() {
     let properties = {};
 
     // First, get all expected font properties from computed styles.
     for (let prop of FONT_PROPERTIES) {
@@ -562,19 +562,18 @@ class FontInspector {
     }
 
     const node = this.inspector.selection.nodeFront;
     const fonts = await this.getFontsForNode(node, options);
     // Get all computed styles for selected node; used for identifying inherited values.
     this.nodeComputedStyle = await this.pageStyle.getComputed(node, {
       filterProperties: FONT_PROPERTIES
     });
-    // Collect any expected font properties and their values from the selected rule.
+    const fontEditor = this.store.getState().fontEditor;
     const properties = this.getFontProperties();
-    const fontEditor = this.store.getState().fontEditor;
 
     // Update the font editor state only if property values in rule differ from store.
     // This can happen when a user makes manual edits to the values in the rule view.
     if (JSON.stringify(properties) !== JSON.stringify(fontEditor.properties)) {
       this.store.dispatch(updateFontEditor(fonts, properties));
     }
   }
 
--- a/devtools/client/inspector/fonts/reducers/font-editor.js
+++ b/devtools/client/inspector/fonts/reducers/font-editor.js
@@ -71,31 +71,48 @@ let reducers = {
       return { axis: [axis], value: state.axes[axis] };
     });
     return newState;
   },
 
   [UPDATE_EDITOR_STATE](state, { fonts, properties }) {
     let axes = {};
 
-    if (properties["font-variation-settings"]) {
+    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;
         }, {});
     }
 
+    // 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;
+    }
+
+    // If not defined in font-variation-settings, setup "wdth" axis with the percentage
+    // number from the value of "font-stretch" if it is not a keyword.
+    let stretch = properties["font-stretch"];
+    // Match the number part from values like: 10%, 10.55%, 0.2%
+    // If there's a match, the number is the second item in the match array.
+    let match = stretch.trim().match(/^(\d+(.\d+)?)%$/);
+    if (axes.wdth === undefined && match && match[1]) {
+      axes.wdth = match[1];
+    }
+
     return { ...state, axes, fonts, properties };
   },
 
   [UPDATE_EDITOR_VISIBILITY](state, { isVisible, selector }) {
     return { ...state, isVisible, selector };
   },
 
 };