Bug 1654073 - Extend the element for numCopies from HTMLInputElement. r=mstriemer
authorSam Foster <sfoster@mozilla.com>
Mon, 03 Aug 2020 06:21:05 +0000
changeset 543055 28f5bc0faffe5c2c6db2a67980240c50b1d1fc8f
parent 543054 a25524d613da49b37f0b8e2d19bd38ebaa6af1e5
child 543056 1ccc197c39a021b75b244b0d2474f515d8c52ff7
push id37664
push userncsoregi@mozilla.com
push dateMon, 03 Aug 2020 21:39:27 +0000
treeherdermozilla-central@255b4f5888e9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstriemer
bugs1654073
milestone81.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 1654073 - Extend the element for numCopies from HTMLInputElement. r=mstriemer Differential Revision: https://phabricator.services.mozilla.com/D85040
toolkit/components/printing/content/print.html
toolkit/components/printing/content/print.js
--- a/toolkit/components/printing/content/print.html
+++ b/toolkit/components/printing/content/print.html
@@ -27,21 +27,16 @@
 
     <template id="orientation-template">
       <input type="radio" name="orientation" id="portrait" value="0" checked class="toggle-group-input">
       <label for="portrait" data-l10n-id="printui-portrait" class="toggle-group-label toggle-group-label-iconic"></label>
       <input type="radio" name="orientation" id="landscape" value="1" class="toggle-group-input">
       <label for="landscape" data-l10n-id="printui-landscape" class="toggle-group-label toggle-group-label-iconic"></label>
     </template>
 
-    <template id="copy-count-template">
-      <span class="input"></span>
-      <input id="copies-count" type="number" min="1">
-    </template>
-
     <template id="twisty-summary-template">
       <span class="label"></span>
       <span class="twisty"></span>
     </template>
 
     <template id="scale-template">
       <div role="radiogroup" aria-labelledby="scale-label">
         <div>
@@ -56,26 +51,26 @@
       </div>
     </template>
 
     <header class="header-container">
       <h2 data-l10n-id="printui-title"></h2>
       <p id="sheet-count" is="page-count" hidden></p>
     </header>
 
-    <form id="print" is="print-form">
+    <form id="print" is="print-form" aria-labelledby="page-header">
       <section class="body-container">
         <section id="destination" class="row">
           <label for="printer-picker" class="block-label" data-l10n-id="printui-destination-label"></label>
           <select is="destination-picker" id="printer-picker"></select>
         </section>
         <section id="settings">
           <section id="copies" class="row">
-            <label for="copy-count-input" class="block-label" data-l10n-id="printui-copies-label"></label>
-            <span id="copy-count-input" is="copy-count-input" class="copy-count-input"></span>
+            <label for="copies-count" class="block-label" data-l10n-id="printui-copies-label"></label>
+            <input id="copies-count" is="copy-count-input" min="1" class="copy-count-input">
           </section>
 
           <section id="orientation" class="row">
             <label class="block-label" for="orientation-input" data-l10n-id="printui-orientation"></label>
             <div id="orientation-input" is="orientation-input" role="radiogroup" class="toggle-group"></div>
           </section>
 
           <section id="pages" class="row">
--- a/toolkit/components/printing/content/print.js
+++ b/toolkit/components/printing/content/print.js
@@ -296,32 +296,35 @@ class OrientationInput extends PrintUICo
   handleEvent(e) {
     this.dispatchSettingsChange({
       orientation: e.target.value,
     });
   }
 }
 customElements.define("orientation-input", OrientationInput);
 
-class CopiesInput extends PrintUIControlMixin(HTMLElement) {
-  get templateId() {
-    return "copy-count-template";
+class CopiesInput extends PrintUIControlMixin(HTMLInputElement) {
+  connectedCallback() {
+    this.type = "number";
+    super.connectedCallback();
   }
 
   update(settings) {
-    this.querySelector("input").value = settings.numCopies;
+    this.value = settings.numCopies;
   }
 
   handleEvent(e) {
     this.dispatchSettingsChange({
       numCopies: e.target.value,
     });
   }
 }
-customElements.define("copy-count-input", CopiesInput);
+customElements.define("copy-count-input", CopiesInput, {
+  extends: "input",
+});
 
 class PrintUIForm extends PrintUIControlMixin(HTMLElement) {
   initialize() {
     super.initialize();
 
     this.addEventListener("submit", this);
     this.addEventListener("click", this);
   }