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 543072 28f5bc0faffe5c2c6db2a67980240c50b1d1fc8f
parent 543071 a25524d613da49b37f0b8e2d19bd38ebaa6af1e5
child 543073 1ccc197c39a021b75b244b0d2474f515d8c52ff7
push id123205
push usersfoster@mozilla.com
push dateMon, 03 Aug 2020 06:27:07 +0000
treeherderautoland@28f5bc0faffe [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);
   }