зеркало из https://github.com/mozilla/gecko-dev.git
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
This commit is contained in:
Родитель
bb6528a673
Коммит
d5e112fc03
|
@ -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.
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
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({
|
||||
printAllOrCustomRange: e.target.value,
|
||||
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);
|
||||
|
|
|
@ -202,6 +202,9 @@ var PrintUtils = {
|
|||
simplifiedMode: false,
|
||||
browsingContextId: sourceBrowsingContext.id,
|
||||
outputFormat: printSettings.outputFormat,
|
||||
startPageRange: printSettings.startPageRange,
|
||||
endPageRange: printSettings.endPageRange,
|
||||
printRange: printSettings.printRange,
|
||||
}
|
||||
);
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
Загрузка…
Ссылка в новой задаче