Bug 1343014 Part 1: Make RDM viewport dimension inputs have input type "number". r=gl

This also changes the styling to prevent "spinners" from appearing.

Differential Revision: https://phabricator.services.mozilla.com/D24054

--HG--
extra : moz-landing-system : lando

devtools/client/responsive.html/components/ViewportDimension.js

@@ -103,6 +103,11 @@ class ViewportDimension extends PureComponent {
     const { target } = event;
     target.value = parseInt(target.value, 10) + increment;
     this.onInputChange(event, this.onInputSubmit);
+
+    // Keep this event from having default processing. Since the field is a
+    // number field, default processing would trigger additional manipulations
+    // of the value, and we've already applied the desired amount.
+    event.preventDefault();
   }
 
   onInputKeyUp({ target, keyCode }) {
@@ -162,6 +167,7 @@ class ViewportDimension extends PureComponent {
         className: "text-input viewport-dimension-input" +
                    (this.state.isWidthValid ? "" : " invalid"),
         size: 4,
+        type: "number",
         value: this.state.width,
         onBlur: this.onInputBlur,
         onChange: this.onInputChange,
@@ -179,6 +185,7 @@ class ViewportDimension extends PureComponent {
         className: "text-input viewport-dimension-input" +
                    (this.state.isHeightValid ? "" : " invalid"),
         size: 4,
+        type: "number",
         value: this.state.height,
         onBlur: this.onInputBlur,
         onChange: this.onInputChange,

devtools/client/responsive.html/index.css

@@ -362,6 +362,7 @@ body,
 .viewport-dimension-input {
   text-align: center;
   width: 3em;
+  -moz-appearance: textfield;
 }
 
 .viewport-dimension-separator {