Bug 1659463 - Include spin button for print zoom setting r=emalysz

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

toolkit/components/printing/content/print.css

@@ -37,7 +37,6 @@ body[loading] {
   display: flex;
   flex-direction: column;
   width: 100%;
-  box-sizing: border-box;
   min-height: 1.8em;
   margin-block: 2px;
 }
@@ -47,7 +46,6 @@ body[loading] {
 .col > input {
   margin-inline: 0 0;
   max-width: 100%;
-  box-sizing: border-box;
   display: inline-block;
 }
 
@@ -275,19 +273,15 @@ input[type="number"]:invalid {
 }
 
 #percent-scale {
-  appearance: textfield;
   margin-inline-start: 4px;
 }
 
-#copies-count {
-  width: 4em;
-  height: 20px;
-}
-
 input[type="number"].photon-number {
   padding: 0;
   padding-inline-start: 4px;
   margin: 0;
+  height: 20px;
+  width: 4em;
 }
 
 input[type="number"].photon-number::-moz-number-spin-box {
@@ -309,6 +303,8 @@ input[type="number"].photon-number::-moz-number-spin-down {
   background-image: url("chrome://global/skin/icons/arrow-dropdown-16.svg");
   background-size: 8px;
   background-position: center;
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 input[type="number"].photon-number::-moz-number-spin-up {

toolkit/components/printing/content/print.html

@@ -48,7 +48,7 @@
           <span class="col">
             <label id="percent-scale-label" for="percent-scale-choice" data-l10n-id="printui-scale-pcent"></label>
             <input
-              id="percent-scale"
+              id="percent-scale" class="photon-number"
               type="number" min="10" max="200" step="1" size="6"
               aria-labelledby="percent-scale-label"
               autocomplete="off" disabled required>

toolkit/components/printing/content/print.js

@@ -581,14 +581,16 @@ class ScaleInput extends PrintUIControlMixin(HTMLElement) {
       return;
     }
 
-    window.clearTimeout(this.invalidTimeoutId);
+    if (e.type == "input") {
+      window.clearTimeout(this.invalidTimeoutId);
 
-    if (this._percentScale.checkValidity() && e.type == "input") {
-      this.invalidTimeoutId = window.setTimeout(() => {
-        this.dispatchSettingsChange({
-          scaling: Number(this._percentScale.value / 100),
-        });
-      }, INVALID_INPUT_DELAY_MS);
+      if (this._percentScale.checkValidity()) {
+        this.invalidTimeoutId = window.setTimeout(() => {
+          this.dispatchSettingsChange({
+            scaling: Number(this._percentScale.value / 100),
+          });
+        }, INVALID_INPUT_DELAY_MS);
+      }
     }
     this._scaleError.hidden = this._percentScale.validity.valid;
   }