Bug 1343014 Part 1: Make RDM viewport dimension inputs have input type "number". r=gl
☠☠ backed out by b29882123ec6 ☠ ☠
authorBrad Werth <bwerth@mozilla.com>
Tue, 19 Mar 2019 20:11:24 +0000
changeset 465106 8d9b4e8dce578a417cc0f2f98eaebe3cef47370f
parent 465105 6e305e6f45432091b99a29f57a7aaffc00ac0ddf
child 465107 fa8777d9e0e163ce41f29fd4618cbc6358738ce6
push id35732
push useropoprus@mozilla.com
push dateWed, 20 Mar 2019 10:52:37 +0000
treeherdermozilla-central@708979f9c3f3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1343014
milestone68.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 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
devtools/client/responsive.html/components/ViewportDimension.js
devtools/client/responsive.html/index.css
--- a/devtools/client/responsive.html/components/ViewportDimension.js
+++ b/devtools/client/responsive.html/components/ViewportDimension.js
@@ -157,16 +157,17 @@ class ViewportDimension extends PureComp
       },
       dom.input({
         ref: input => {
           this.widthInput = input;
         },
         className: "text-input viewport-dimension-input" +
                    (this.state.isWidthValid ? "" : " invalid"),
         size: 4,
+        type: "number",
         value: this.state.width,
         onBlur: this.onInputBlur,
         onChange: this.onInputChange,
         onFocus: this.onInputFocus,
         onKeyDown: this.onInputKeyDown,
         onKeyUp: this.onInputKeyUp,
       }),
       dom.span({
@@ -174,16 +175,17 @@ class ViewportDimension extends PureComp
       }, "×"),
       dom.input({
         ref: input => {
           this.heightInput = input;
         },
         className: "text-input viewport-dimension-input" +
                    (this.state.isHeightValid ? "" : " invalid"),
         size: 4,
+        type: "number",
         value: this.state.height,
         onBlur: this.onInputBlur,
         onChange: this.onInputChange,
         onFocus: this.onInputFocus,
         onKeyDown: this.onInputKeyDown,
         onKeyUp: this.onInputKeyUp,
       })
     );
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -355,16 +355,17 @@ body,
   display: flex;
   align-items: center;
   margin: 1px;
 }
 
 .viewport-dimension-input {
   text-align: center;
   width: 3em;
+  -moz-appearance: textfield;
 }
 
 .viewport-dimension-separator {
   -moz-user-select: none;
   padding: 0 0.3em;
 }
 
 /**