Bug 1475947 - (Part 2) Update font editor unit conversion to use getOwnerGlobalDimensions(). r=gl draft
authorRazvan Caliman <rcaliman@mozilla.com>
Mon, 16 Jul 2018 19:08:21 +0200
changeset 819371 6f19b750c758a277814e149374730c39bbf396b2
parent 819370 1fcb89fa634d6890f3442dab4003ffe4a86b6002
push id116535
push userbmo:rcaliman@mozilla.com
push dateTue, 17 Jul 2018 18:29:14 +0000
reviewersgl
bugs1475947
milestone63.0a1
Bug 1475947 - (Part 2) Update font editor unit conversion to use getOwnerGlobalDimensions(). r=gl MozReview-Commit-ID: A9efHXiMs46
devtools/client/inspector/fonts/fonts.js
--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -173,18 +173,16 @@ class FontInspector {
     const unit = toUnit === "px" ? fromUnit : toUnit;
     // NodeFront instance of selected element.
     const node = this.inspector.selection.nodeFront;
     // Default output value to input value for a 1-to-1 conversion as a guard against
     // unrecognized CSS units. It will not be correct, but it will also not break.
     let out = value;
     // Computed style for reference node used for conversion of "em", "rem", "%".
     let computedStyle;
-    // Raw DOM node of selected element used for conversion of "vh", "vw", "vmin", "vmax".
-    let rawNode;
 
     if (unit === "in") {
       out = fromPx
         ? value / 96
         : value * 96;
     }
 
     if (unit === "cm") {
@@ -228,46 +226,41 @@ class FontInspector {
     if (unit === "rem") {
       const document = await this.inspector.walker.documentElement();
       computedStyle = await this.pageStyle.getComputed(document);
       out = fromPx
         ? value / parseFloat(computedStyle["font-size"].value)
         : value * parseFloat(computedStyle["font-size"].value);
     }
 
-    if (unit === "vh") {
-      rawNode = await node.rawNode();
-      out = fromPx
-        ? value * 100 / rawNode.ownerGlobal.innerHeight
-        : value / 100 * rawNode.ownerGlobal.innerHeight;
-    }
-
-    if (unit === "vw") {
-      rawNode = await node.rawNode();
-      out = fromPx
-        ? value * 100 / rawNode.ownerGlobal.innerWidth
-        : value / 100 * rawNode.ownerGlobal.innerWidth;
-    }
+    if (unit === "vh" || unit === "vw" || unit === "vmin" || unit === "vmax") {
+      const dim = await node.getOwnerGlobalDimensions();
 
-    if (unit === "vmin") {
-      rawNode = await node.rawNode();
-      out = fromPx
-        ? value * 100 / Math.min(
-          rawNode.ownerGlobal.innerWidth, rawNode.ownerGlobal.innerHeight)
-        : value / 100 * Math.min(
-          rawNode.ownerGlobal.innerWidth, rawNode.ownerGlobal.innerHeight);
-    }
-
-    if (unit === "vmax") {
-      rawNode = await node.rawNode();
-      out = fromPx
-        ? value * 100 / Math.max(
-          rawNode.ownerGlobal.innerWidth, rawNode.ownerGlobal.innerHeight)
-        : value / 100 * Math.max(
-          rawNode.ownerGlobal.innerWidth, rawNode.ownerGlobal.innerHeight);
+      // The getOwnerGlobalDimensions() method does not exist on the NodeFront API spec
+      // prior to Firefox 63. In that case, return a 1-to-1 conversion which isn't a
+      // correct conversion, but doesn't break the font editor either.
+      if (!dim || !dim.innerWidth || !dim.innerHeight) {
+        out = value;
+      } else if (unit === "vh") {
+        out = fromPx
+          ? value * 100 / dim.innerHeight
+          : value / 100 * dim.innerHeight;
+      } else if (unit === "vw") {
+        out = fromPx
+          ? value * 100 / dim.innerWidth
+          : value / 100 * dim.innerWidth;
+      } else if (unit === "vmin") {
+        out = fromPx
+          ? value * 100 / Math.min(dim.innerWidth, dim.innerHeight)
+          : value / 100 * Math.min(dim.innerWidth, dim.innerHeight);
+      } else if (unit === "vmax") {
+        out = fromPx
+          ? value * 100 / Math.max(dim.innerWidth, dim.innerHeight)
+          : value / 100 * Math.max(dim.innerWidth, dim.innerHeight);
+      }
     }
 
     // Return rounded pixel values. Limit other values to 3 decimals.
     if (fromPx) {
       // Round values like 1.000 to 1
       return out === Math.round(out) ? Math.round(out) : out.toFixed(3);
     }
 
@@ -723,22 +716,18 @@ class FontInspector {
    * @param  {String|undefined} toUnit
    *         Optional CSS unit to convert to
    */
   async onPropertyChange(property, value, fromUnit, toUnit) {
     if (FONT_PROPERTIES.includes(property)) {
       let unit = fromUnit;
 
       if (toUnit && fromUnit) {
-        try {
-          value = await this.convertUnits(value, fromUnit, toUnit);
-          unit = toUnit;
-        } catch (err) {
-          // Silent error
-        }
+        value = await this.convertUnits(value, fromUnit, toUnit);
+        unit = toUnit;
       }
 
       this.onFontPropertyUpdate(property, value, unit);
     } else {
       this.onAxisUpdate(property, value);
     }
   }