Bug 1475208 - (Part 3) Record upper bounds by unit in font size component. r=gl

MozReview-Commit-ID: Ku6dBVux3GP

--HG--
extra : rebase_source : 35e1f16e0c6a9f24819c6d448a88a1a3504c4e5a

devtools/client/inspector/fonts/components/FontSize.js

@@ -20,7 +20,13 @@ class FontSize extends PureComponent {
     };
   }
 
+  constructor(props) {
+    super(props);
+    this.historicMax = {};
+  }
+
   render() {
+    const value = parseFloat(this.props.value);
     const unit = getUnitFromValue(this.props.value);
     let max;
     switch (unit) {
@@ -42,16 +48,25 @@ class FontSize extends PureComponent {
         break;
     }
 
+    // Allow the upper bound to increase so it accomodates the out-of-bounds value.
+    max = Math.max(max, value);
+    // Ensure we store the max value ever reached for this unit type. This will be the
+    // max value of the input and slider. Without this memoization, the value and slider
+    // thumb get clamped at the upper bound while decrementing an out-of-bounds value.
+    this.historicMax[unit] = this.historicMax[unit]
+      ? Math.max(this.historicMax[unit], max)
+      : max;
+
     return FontPropertyValue({
       label: getStr("fontinspector.fontSizeLabel"),
       min: 0,
-      max,
+      max: this.historicMax[unit],
       name: "font-size",
       onChange: this.props.onChange,
       showUnit: true,
       step: getStepForUnit(unit),
       unit,
-      value: parseFloat(this.props.value),
+      value,
     });
   }
 }