Bug 1653389, validate page range setting r=sfoster,mstriemer,fluent-reviewers,flod

Creates two input elements for the start and end range.

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

toolkit/actors/PrintingChild.jsm

@@ -87,7 +87,10 @@ class PrintingChild extends ActorChild {
           data.simplifiedMode,
           data.changingBrowsers,
           data.lastUsedPrinterName,
-          data.outputFormat
+          data.outputFormat,
+          data.startPageRange,
+          data.endPageRange,
+          data.printRange
         );
         break;
       }
@@ -312,7 +315,10 @@ class PrintingChild extends ActorChild {
     simplifiedMode,
     changingBrowsers,
     lastUsedPrinterName,
-    outputFormat
+    outputFormat,
+    startPageRange,
+    endPageRange,
+    printRange
   ) {
     const { docShell } = this;
 
@@ -331,6 +337,11 @@ class PrintingChild extends ActorChild {
         printSettings.printToFile = true;
       }
 
+      // TODO: waiting on the print preview to be updated in Bug 1659005
+      printSettings.startPageRange = startPageRange;
+      printSettings.endPageRange = endPageRange;
+      printSettings.printRange = printRange;
+
       // If we happen to be on simplified mode, we need to set docURL in order
       // to generate header/footer content correctly, since simplified tab has
       // "about:blank" as its URI.

toolkit/components/printing/content/print.css

@@ -249,8 +249,30 @@ input[type="text"] {
   margin: 0;
 }
 
-.page-range-input:not(.custom-input-selected) #custom-range {
-  display: none;
+.range-group-input {
+  width: 3em;
+  height: max-content;
+  appearance: textfield !important;
+  margin-inline: 5px;
+}
+
+.range-part-label {
+  height: max-content;
+  margin-top: 8px;
+}
+
+.range-group {
+  align-items: center;
+  display: inline-flex;
+}
+
+#range-picker {
+  margin-bottom: 8px;
+}
+
+input[type="number"]:invalid {
+  border: 1px solid #D70022;
+  box-shadow: 0 0 0 1px #D70022, 0 0 0 4px rgba(215, 0, 34, 0.3);
 }
 
 .toggle-group #landscape + .toggle-group-label::before {

toolkit/components/printing/content/print.html

@@ -22,7 +22,12 @@
         <option value="all" selected data-l10n-id="printui-page-range-all"></option>
         <option value="custom" data-l10n-id="printui-page-range-custom"></option>
       </select>
-      <input id="custom-range" name="page-range" pattern="\d(-\d)?" type="text" hidden data-l10n-id="printui-page-custom-range">
+      <div class="range-group" hidden="true">
+        <label data-l10n-id="printui-range-start" class="range-group-separator" for="custom-range-start"></label>
+        <input id="custom-range-start" type="number" min="1" step="1" class="range-group-input" disabled>
+        <label data-l10n-id="printui-range-end" class="range-group-separator" for="custom-range-end"></label>
+        <input id="custom-range-end" type="number" min="1" step="1" class="range-group-input" disabled>
+      </div>
     </template>
 
     <template id="orientation-template">
@@ -82,7 +87,7 @@
             <div is="orientation-input" class="toggle-group" role="radiogroup" aria-labelledby="orientation-label"></div>
           </section>
 
-          <section id="pages" class="section-block" hidden>
+          <section id="pages" class="section-block">
             <label for="page-range-input" class="block-label" data-l10n-id="printui-page-range-label"></label>
             <div id="page-range-input" is="page-range-input" class="page-range-input row"></div>
           </section>

toolkit/components/printing/content/print.js

@@ -63,6 +63,13 @@ var PrintEventHandler = {
         Ci.nsIPrintSettings.kInitSaveBGColors |
         Ci.nsIPrintSettings.kInitSaveBGImages,
     };
+    // These settings do not have an associated pref value or flag, but
+    // changing them requires us to update the print preview.
+    this._nonFlaggedUpdatePreviewSettings = [
+      "printAllOrCustomRange",
+      "startPageRange",
+      "endPageRange",
+    ];
 
     // First check the available destinations to ensure we get settings for an
     // accessible printer.
@@ -170,6 +177,7 @@ var PrintEventHandler = {
 
   updateSettings(changedSettings = {}) {
     let didSettingsChange = false;
+    let updatePreviewWithoutFlag = false;
     let flags = 0;
     for (let [setting, value] of Object.entries(changedSettings)) {
       if (this.viewSettings[setting] != value) {
@@ -183,6 +191,10 @@ var PrintEventHandler = {
           this._nonFlaggedChangedSettings[setting] = value;
         }
         didSettingsChange = true;
+        updatePreviewWithoutFlag |= this._nonFlaggedUpdatePreviewSettings.includes(
+          setting
+        );
+
         Services.telemetry.keyedScalarAdd(
           "printing.settings_changed",
           setting,
@@ -210,8 +222,7 @@ var PrintEventHandler = {
       if (printerChanged) {
         this.refreshSettings(this.settings.printerName);
       }
-
-      if (flags || printerChanged) {
+      if (flags || printerChanged || updatePreviewWithoutFlag) {
         this.updatePrintPreview();
       }
 
@@ -237,13 +248,21 @@ var PrintEventHandler = {
   },
 
   async _updatePrintPreview() {
-    let numPages = await PrintUtils.updatePrintPreview(
+    let totalPages = await PrintUtils.updatePrintPreview(
       this.getSourceBrowsingContext(),
       this.previewBrowser,
       this.settings
     );
+
+    let numPages = totalPages;
+    // Adjust number of pages if the user specifies the pages they want printed
+    if (
+      this.settings.printRange == Ci.nsIPrintSettings.kRangeSpecifiedPageRange
+    ) {
+      numPages = this.settings.endPageRange - this.settings.startPageRange + 1;
+    }
     document.dispatchEvent(
-      new CustomEvent("page-count", { detail: { numPages } })
+      new CustomEvent("page-count", { detail: { numPages, totalPages } })
     );
 
     if (this._queuedPreviewUpdatePromise) {
@@ -443,8 +462,6 @@ const PrintSettingsViewProxy = {
           value == "all"
             ? Ci.nsIPrintSettings.kRangeAllPages
             : Ci.nsIPrintSettings.kRangeSpecifiedPageRange;
-        // TODO: There's also kRangeSelection, which should come into play
-        // once we have a text box where the user can specify a range
         break;
 
       case "printerName":
@@ -614,6 +631,11 @@ class OrientationInput extends PrintUIControlMixin(HTMLElement) {
 customElements.define("orientation-input", OrientationInput);
 
 class CopiesInput extends PrintUIControlMixin(HTMLInputElement) {
+  initialize() {
+    super.initialize();
+    this.addEventListener("input", this);
+  }
+
   update(settings) {
     this.value = settings.numCopies;
   }
@@ -632,6 +654,7 @@ class PrintUIForm extends PrintUIControlMixin(HTMLFormElement) {
   initialize() {
     super.initialize();
 
+    this.addEventListener("change", this);
     this.addEventListener("submit", this);
     this.addEventListener("click", this);
     this.addEventListener("input", this);
@@ -656,9 +679,12 @@ class PrintUIForm extends PrintUIControlMixin(HTMLFormElement) {
           this.dispatchEvent(new Event("cancel-print", { bubbles: true }));
           break;
       }
-    } else if (e.type == "input") {
+    } else if (e.type == "change" || e.type == "input") {
       let isValid = this.checkValidity();
       let section = e.target.closest(".section-block");
+      document
+        .querySelector("#sheet-count")
+        .toggleAttribute("loading", !isValid);
       for (let element of this.elements) {
         // If we're valid, enable all inputs.
         // Otherwise, disable the valid inputs other than the cancel button and the elements
@@ -741,19 +767,71 @@ class ScaleInput extends PrintUIControlMixin(HTMLElement) {
 customElements.define("scale-input", ScaleInput);
 
 class PageRangeInput extends PrintUIControlMixin(HTMLElement) {
+  initialize() {
+    super.initialize();
+
+    this.startRange = this.querySelector("#custom-range-start");
+    this.endRange = this.querySelector("#custom-range-end");
+    this.rangePicker = this.querySelector("#range-picker");
+
+    this.addEventListener("input", this);
+    document.addEventListener("page-count", this);
+  }
+
   get templateId() {
     return "page-range-template";
   }
 
   update(settings) {
-    let rangePicker = this.querySelector("#range-picker");
-    rangePicker.value = settings.printAllOrCustomRange;
+    this.toggleAttribute("all-pages", settings.printRange == 0);
   }
 
   handleEvent(e) {
-    this.dispatchSettingsChange({
-      printAllOrCustomRange: e.target.value,
-    });
+    if (e.type == "page-count") {
+      this.startRange.max = this.endRange.max = this._numPages =
+        e.detail.totalPages;
+      this.startRange.disabled = this.endRange.disabled = false;
+      if (!this.endRange.checkValidity()) {
+        this.endRange.value = this._numPages;
+        this.dispatchSettingsChange({
+          endPageRange: this.endRange.value,
+        });
+        this.endRange.dispatchEvent(new Event("change", { bubbles: true }));
+      }
+    } else if (e.target == this.rangePicker) {
+      let printAll = e.target.value == "all";
+      this.startRange.required = this.endRange.required = !printAll;
+      this.querySelector(".range-group").hidden = printAll;
+      if (printAll) {
+        this.dispatchSettingsChange({
+          printAllOrCustomRange: "all",
+        });
+      } else {
+        this.startRange.value = 1;
+        this.endRange.value = this._numPages || 1;
+
+        this.dispatchSettingsChange({
+          printAllOrCustomRange: "custom",
+          startPageRange: this.startRange.value,
+          endPageRange: this.endRange.value,
+        });
+      }
+    } else if (e.target == this.startRange || e.target == this.endRange) {
+      if (this.startRange.checkValidity()) {
+        this.endRange.min = this.startRange.value;
+      }
+      if (this.endRange.checkValidity()) {
+        this.startRange.max = this.endRange.value;
+      }
+      if (this.startRange.checkValidity() && this.endRange.checkValidity()) {
+        if (this.startRange.value && this.endRange.value) {
+          this.dispatchSettingsChange({
+            startPageRange: this.startRange.value,
+            endPageRange: this.endRange.value,
+          });
+        }
+      }
+    }
   }
 }
 customElements.define("page-range-input", PageRangeInput);

toolkit/components/printing/content/printUtils.js

@@ -202,6 +202,9 @@ var PrintUtils = {
           simplifiedMode: false,
           browsingContextId: sourceBrowsingContext.id,
           outputFormat: printSettings.outputFormat,
+          startPageRange: printSettings.startPageRange,
+          endPageRange: printSettings.endPageRange,
+          printRange: printSettings.printRange,
         }
       );
     });

toolkit/locales/en-US/toolkit/printing/printUI.ftl

@@ -21,6 +21,12 @@ printui-page-range-picker =
   .aria-label = Pick page range
 printui-page-custom-range =
   .aria-label = Enter custom page range
+# This label is displayed before the first input field indicating
+# the start of the range to print.
+printui-range-start = From
+# This label is displayed between the input fields indicating
+# the start and end page of the range to print.
+printui-range-end = to
 
 # Section title for the number of copies to print
 printui-copies-label = Copies