Bug 1475947 - (Part 2) Update font editor unit conversion to use getOwnerGlobalDimensions(). r=gl
MozReview-Commit-ID: A9efHXiMs46
--- 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);
}
}