diff options
Diffstat (limited to 'toolkit/components/printing')
7 files changed, 203 insertions, 243 deletions
diff --git a/toolkit/components/printing/content/print.css b/toolkit/components/printing/content/print.css index c510c58bbc..fe84c93eb0 100644 --- a/toolkit/components/printing/content/print.css +++ b/toolkit/components/printing/content/print.css @@ -2,7 +2,12 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ -html, body { +:root { + font: menu; +} + +:root, +body { height: 100vh; } @@ -13,21 +18,17 @@ body { overflow: hidden; } -body[loading] #print { - visibility: hidden; -} - *[hidden] { display: none !important; } .section-block { - margin: 16px; -} + margin: var(--space-large); -.section-block .block-label { - display: block; - margin-bottom: 8px; + .block-label { + display: block; + margin-bottom: var(--space-small); + } } .row { @@ -35,24 +36,23 @@ body[loading] #print { flex-direction: column; width: 100%; min-height: 1.8em; - margin-block: 2px; -} + margin-block: var(--space-xxsmall); -.row.cols-2 { - flex-direction: row; - align-items: center; -} + &.cols-2 { + flex-direction: row; + align-items: center; -#scale .row.cols-2, -#more-settings-options > .row.cols-2 { - /* The margin-block of the checkboxes/radiobuttons - already provide the needed vertical spacing. */ - margin-block: 0; + #scale &, + #more-settings-options > & { + /* The margin-block of the checkboxes/radiobuttons + already provide the needed vertical spacing. */ + margin-block: 0; + } + } } hr { - margin-inline: 8px; - margin-block: 0; + margin: 0 var(--space-small); } .header-container { @@ -61,236 +61,210 @@ hr { justify-content: space-between; align-items: center; flex: 0 1 auto; - padding: 8px 18px; -} -.header-container > h2 { - margin: 0; - font-size: 17px; - line-height: 1; + padding: var(--space-small) var(--space-large); + + > h2 { + margin: 0; + line-height: 1; + } } #sheet-count { - font-size: 11px; - padding: 3px 8px; + font: message-box; + padding-block: var(--space-xsmall); margin: 0; -} -#sheet-count[loading], -body[invalid] #sheet-count { - visibility: hidden; + &[loading], + body[invalid] & { + visibility: hidden; + } } -form#print { +#print { display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-start; overflow: hidden; - font: menu; + + body[loading] & { + visibility: hidden; + } +} + +.body-container { + flex: 1 1 auto; + overflow: auto; } select { margin: 0; -} + width: 100%; -select:not([size], [multiple])[iconic] { - padding-inline-start: calc(8px + 16px + 4px); /* spacing before image + image width + spacing after image */ - background-size: auto 12px, 16px; - background-position: right 19px center, left 8px center; -} + &:not([size], [multiple])[iconic] { + padding-inline-start: calc(8px + 16px + 4px); /* spacing before image + image width + spacing after image */ + background-size: auto 12px, 16px; + background-position: right 19px center, left 8px center; -select:not([size], [multiple])[iconic]:dir(rtl) { - background-position-x: left 19px, right 8px; + &:dir(rtl) { + background-position-x: left 19px, right 8px; + } + } } #printer-picker { background-image: url("chrome://global/skin/icons/arrow-down-12.svg"), url("chrome://global/skin/icons/print.svg"); - width: 100%; -} - -#printer-picker[output="pdf"] { - background-image: url("chrome://global/skin/icons/arrow-down-12.svg"), url("chrome://global/skin/icons/page-portrait.svg"); -} -input[type="number"], -input[type="text"] { - padding: 2px; - padding-inline-start: 8px; + &[output="pdf"] { + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"), url("chrome://global/skin/icons/page-portrait.svg"); + } } -.toggle-group-label { - padding: 4px 8px; +input:is([type="number"], [type="text"]) { + padding: var(--space-xxsmall); + padding-inline-start: var(--space-small); } -.body-container { - flex: 1 1 auto; - overflow: auto; +input[type="number"] { + box-sizing: content-box; + min-height: unset; + padding: 0; + padding-inline-start: var(--space-small); + margin: 0; + height: 1.5em; + width: 4em; } -.twisty > summary { - list-style: none; - display: flex; - cursor: pointer; - align-items: center; +input:is([type="checkbox"], [type="radio"]):disabled + label, +input[type="radio"]:disabled + span > label { + opacity: 0.5; } -#more-settings > summary > .twisty { - background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); - background-repeat: no-repeat; - background-position: center; - -moz-context-properties: fill; - fill: currentColor; - width: 12px; - height: 12px; +#custom-range { + margin: 0; + margin-top: var(--space-xsmall); + width: 100%; } -#more-settings > summary > .label { - flex-grow: 1; -} +#percent-scale { + margin-inline-start: var(--space-xsmall); -#more-settings[open] > summary > .twisty { - background-image: url("chrome://global/skin/icons/arrow-up-12.svg"); + &:disabled { + /* Let clicks on the disabled input select the radio button */ + pointer-events: none; + } } -#open-dialog-link { - display: flex; - justify-content: space-between; - align-items: center; -} +.toggle-group-label { + padding: var(--space-xsmall) var(--space-small); -#open-dialog-link::after { - display: block; - flex-shrink: 0; - content: ""; - background: url(chrome://global/skin/icons/open-in-new.svg) no-repeat center; - background-size: 12px; - -moz-context-properties: fill; - fill: currentColor; - width: 12px; - height: 12px; -} + #landscape + &::before { + content: url("chrome://global/skin/icons/page-landscape.svg"); + } -#open-dialog-link:dir(rtl)::after { - scale: -1 1; + #portrait + &::before { + content: url("chrome://global/skin/icons/page-portrait.svg"); + } } -.footer-container { - flex: 0 1 auto; -} +#more-settings { + > summary { + list-style: none; + display: flex; + cursor: pointer; + align-items: center; -#print-progress { - background-image: image-set( - url("chrome://global/skin/icons/loading.png"), - url("chrome://global/skin/icons/loading@2x.png") 2x - ); - background-repeat: no-repeat; - background-size: 16px; - background-position: left center; - padding-inline-start: 20px; -} + > .twisty { + background-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + background-repeat: no-repeat; + background-position: center; + -moz-context-properties: fill; + fill: currentColor; + width: 12px; + height: 12px; + } -#print-progress:dir(rtl) { - background-position-x: right; -} + > .label { + flex-grow: 1; + } + } -#custom-range { - margin-top: 4px; - margin-inline: 0; + &[open] > summary > .twisty { + background-image: url("chrome://global/skin/icons/arrow-up-12.svg"); + } } .vertical-margins, .horizontal-margins { display: flex; - gap: 20px; - margin-block: 5px; -} + gap: var(--space-large); + margin-block: var(--space-xsmall); -.margin-pair { - width: calc(50% - 10px); /* Half minus the gap */ -} + > .margin-pair { + width: calc(50% - (2 * var(--space-xsmall))); /* Half minus the gap */ -.margin-input { - /* FIXME: Important is needed to override the photon-number styles below, - * probably should be refactored */ - width: 100% !important; - box-sizing: border-box; -} + > .margin-descriptor { + display: block; + text-align: center; + margin-top: var(--space-xxsmall); + } -.margin-descriptor { - text-align: center; - display: block; - margin-top: 2px; + > .margin-input { + width: 100%; + box-sizing: border-box; + } + } } -.toggle-group #landscape + .toggle-group-label::before { - content: url("chrome://global/skin/icons/page-landscape.svg"); -} -.toggle-group #portrait + .toggle-group-label::before { - content: url("chrome://global/skin/icons/page-portrait.svg"); -} - -.error-message { - font-size: 12px; - color: var(--text-color-error); - margin-top: 4px; -} - -#percent-scale { - margin-inline-start: 4px; +.horizontal-margins:dir(rtl) { + /* Swap between the left and right margin inputs to match their position + * in the form to their physical location they represent. */ + flex-direction: row-reverse; } -#percent-scale:disabled { - /* Let clicks on the disabled input select the radio button */ - pointer-events: none; -} +#open-dialog-link { + display: flex; + justify-content: space-between; + align-items: center; + gap: var(--space-xsmall); -input[type="number"].photon-number { - padding: 0; - padding-inline-start: 8px; - margin: 0; - height: 1.5em; - width: 4em; -} + &::after { + display: block; + flex-shrink: 0; + content: ""; + background: url(chrome://global/skin/icons/open-in-new.svg) no-repeat center; + background-size: 12px; + -moz-context-properties: fill; + fill: currentColor; + width: 12px; + height: 12px; + } -input[type="number"].photon-number::-moz-number-spin-box { - height: 100%; - max-height: 100%; - border-inline-start: 1px solid var(--in-content-box-border-color); - width: 1em; - border-start-end-radius: 4px; - border-end-end-radius: 4px; + &:dir(rtl)::after { + transform: scaleX(-1); + } } -input[type="number"].photon-number:hover::-moz-number-spin-box { - border-color: var(--in-content-border-hover); +.footer-container { + flex: 0 1 auto; } -input[type="number"].photon-number::-moz-number-spin-up, -input[type="number"].photon-number::-moz-number-spin-down { - border: 0; - border-radius: 0; - background-color: var(--in-content-button-background); - background-image: url("chrome://global/skin/icons/arrow-down.svg"); +#print-progress { + background-image: image-set( + url("chrome://global/skin/icons/loading.png"), + url("chrome://global/skin/icons/loading@2x.png") 2x + ); background-repeat: no-repeat; - background-size: 8px; - background-position: center; - -moz-context-properties: fill; - fill: currentColor; - appearance: none; -} - -input[type="number"].photon-number::-moz-number-spin-up { - background-image: url("chrome://global/skin/icons/arrow-up.svg"); -} + background-size: var(--size-item-small); + background-position: left center; + padding-inline-start: calc(var(--size-item-small) + var(--space-xsmall)); -input[type="number"].photon-number::-moz-number-spin-up:hover, -input[type="number"].photon-number::-moz-number-spin-down:hover { - background-color: var(--in-content-button-background-hover); - color: var(--in-content-button-text-color-hover); + &:dir(rtl) { + background-position-x: right; + } } -input[type="checkbox"]:disabled + label, -input[type="radio"]:disabled + label, -input[type="radio"]:disabled + span > label { - opacity: 0.5; +.error-message { + color: var(--text-color-error); + margin-top: var(--space-xsmall); } diff --git a/toolkit/components/printing/content/print.html b/toolkit/components/printing/content/print.html index 62d214608c..4e129c3f66 100644 --- a/toolkit/components/printing/content/print.html +++ b/toolkit/components/printing/content/print.html @@ -136,7 +136,6 @@ will filter this down to visible items only. --> <input id="percent-scale" - class="photon-number" is="setting-number" min="10" max="200" @@ -166,7 +165,7 @@ data-setting-name="numCopies" min="1" max="10000" - class="copy-count-input photon-number" + class="copy-count-input" aria-errormessage="error-invalid-copies" required /> @@ -189,7 +188,6 @@ is="margins-select" id="margins-picker" name="margin-type" - class="row" data-setting-name="margins" > <option value="default" data-l10n-id="printui-margins-default"></option> @@ -206,7 +204,7 @@ <input is="setting-number" id="custom-margin-top" - class="margin-input photon-number" + class="margin-input" aria-describedby="margins-custom-margin-top-desc" min="0" step="0.01" @@ -227,7 +225,7 @@ <input is="setting-number" id="custom-margin-bottom" - class="margin-input photon-number" + class="margin-input" aria-describedby="margins-custom-margin-bottom-desc" min="0" step="0.01" @@ -250,7 +248,7 @@ <input is="setting-number" id="custom-margin-left" - class="margin-input photon-number" + class="margin-input" aria-describedby="margins-custom-margin-left-desc" min="0" step="0.01" @@ -271,7 +269,7 @@ <input is="setting-number" id="custom-margin-right" - class="margin-input photon-number" + class="margin-input" aria-describedby="margins-custom-margin-right-desc" min="0" step="0.01" @@ -322,14 +320,12 @@ class="block-label" data-l10n-id="printui-destination-label" ></label> - <div class="printer-picker-wrapper"> - <select - is="destination-picker" - id="printer-picker" - data-setting-name="printerName" - iconic - ></select> - </div> + <select + is="destination-picker" + id="printer-picker" + data-setting-name="printerName" + iconic + ></select> </section> <section id="settings"> <section id="copies" class="section-block"> @@ -357,15 +353,11 @@ <section id="pages" class="section-block"> <label - for="page-range-input" + for="range-picker" 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> + <div id="page-range-input" is="page-range-input"></div> </section> <section id="color-mode" class="section-block"> @@ -377,7 +369,6 @@ <select is="color-mode-select" id="color-mode-picker" - class="row" data-setting-name="printInColor" > <option @@ -408,7 +399,6 @@ <select is="paper-size-select" id="paper-size-picker" - class="row" data-setting-name="paperId" ></select> </section> @@ -432,7 +422,6 @@ <select is="setting-select" id="pages-per-sheet-picker" - class="row" data-setting-name="numPagesPerSheet" > <option value="1">1</option> @@ -445,11 +434,7 @@ </section> <section id="margins" class="section-block"> - <div - id="margins-select" - is="margins-select" - class="margins-select row" - ></div> + <div id="margins-select" is="margins-select"></div> </section> <section id="two-sided-printing" class="section-block"> @@ -462,7 +447,6 @@ is="setting-select" id="duplex-select" name="duplex-type" - class="row" data-setting-name="printDuplex" > <option diff --git a/toolkit/components/printing/content/print.js b/toolkit/components/printing/content/print.js index 3398b28ace..1c3be1728b 100644 --- a/toolkit/components/printing/content/print.js +++ b/toolkit/components/printing/content/print.js @@ -46,7 +46,7 @@ var logger = (function () { return _logger; })(); -function serializeSettings(settings, logPrefix) { +function serializeSettings(settings) { let re = /^(k[A-Z]|resolution)/; // accessing settings.resolution throws an exception? let types = new Set(["string", "boolean", "number", "undefined"]); let nameValues = {}; @@ -80,7 +80,7 @@ function cancelDeferredTasks() { document.addEventListener( "DOMContentLoaded", - e => { + () => { window._initialized = PrintEventHandler.init().catch(e => console.error(e)); ourBrowser.setAttribute("flex", "0"); ourBrowser.setAttribute("constrainpopups", "false"); @@ -96,7 +96,7 @@ window.addEventListener("dialogclosing", () => { window.addEventListener( "unload", - e => { + () => { document.textContent = ""; }, { once: true } @@ -1608,7 +1608,7 @@ function PrintUIControlMixin(superClass) { render() {} - update(settings) {} + update() {} dispatchSettingsChange(changedSettings) { this.dispatchEvent( @@ -1628,7 +1628,7 @@ function PrintUIControlMixin(superClass) { ); } - handleEvent(event) {} + handleEvent() {} }; } @@ -1863,7 +1863,7 @@ class PrintSettingCheckbox extends PrintUIControlMixin(HTMLInputElement) { this.checked = settings[this.settingName]; } - handleEvent(e) { + handleEvent() { this.dispatchSettingsChange({ [this.settingName]: this.checked, }); @@ -1884,7 +1884,7 @@ class PrintSettingRadio extends PrintUIControlMixin(HTMLInputElement) { this.checked = settings[this.settingName] == this.value; } - handleEvent(e) { + handleEvent() { this.dispatchSettingsChange({ [this.settingName]: this.value, }); @@ -2020,7 +2020,7 @@ class CopiesInput extends PrintUIControlMixin(HTMLElement) { this._copiesError.hidden = true; } - handleEvent(e) { + handleEvent() { this._copiesError.hidden = this._copiesInput.checkValidity(); } } @@ -2679,7 +2679,7 @@ class TwistySummary extends PrintUIControlMixin(HTMLElement) { this.updateSummary(shouldOpen); } - handleEvent(e) { + handleEvent() { let willOpen = !this.isOpen; Services.prefs.setBoolPref("print.more-settings.open", willOpen); this.updateSummary(willOpen); diff --git a/toolkit/components/printing/content/toggle-group.css b/toolkit/components/printing/content/toggle-group.css index 94922eb963..4416bfa512 100644 --- a/toolkit/components/printing/content/toggle-group.css +++ b/toolkit/components/printing/content/toggle-group.css @@ -2,7 +2,6 @@ * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - /* * A radiogroup styled to hide the radio buttons * and present tab-like labels as buttons @@ -10,6 +9,7 @@ .toggle-group { display: inline-flex; + min-height: var(--button-min-height-small); } .toggle-group-label { @@ -26,21 +26,21 @@ } .toggle-group-label-iconic::before { - width: 16px; - height: 16px; + width: var(--size-item-small); + height: var(--size-item-small); margin-inline-end: 5px; -moz-context-properties: fill; fill: currentColor; } .toggle-group-label:first-of-type { - border-start-start-radius: 4px; - border-end-start-radius: 4px; + border-start-start-radius: var(--border-radius-small); + border-end-start-radius: var(--border-radius-small); } .toggle-group-label:last-of-type { - border-start-end-radius: 4px; - border-end-end-radius: 4px; + border-start-end-radius: var(--border-radius-small); + border-end-end-radius: var(--border-radius-small); } .toggle-group-input:disabled + .toggle-group-label { diff --git a/toolkit/components/printing/tests/browser_preview_navigation.js b/toolkit/components/printing/tests/browser_preview_navigation.js index 53e54eddb0..23b3a9b7cc 100644 --- a/toolkit/components/printing/tests/browser_preview_navigation.js +++ b/toolkit/components/printing/tests/browser_preview_navigation.js @@ -23,7 +23,7 @@ async function waitForPageStatusUpdate(elem, expected, message) { ); } -async function waitUntilVisible(elem, visible = true) { +async function waitUntilVisible(elem) { await TestUtils.waitForCondition( () => BrowserTestUtils.isVisible(elem) && getComputedStyle(elem).opacity == "1", diff --git a/toolkit/components/printing/tests/file_window_print_reentrant.html b/toolkit/components/printing/tests/file_window_print_reentrant.html index 7eebd8c2fe..2008ffaf27 100644 --- a/toolkit/components/printing/tests/file_window_print_reentrant.html +++ b/toolkit/components/printing/tests/file_window_print_reentrant.html @@ -3,7 +3,7 @@ <script> let count = 0; onload = function() { - window.addEventListener('beforeprint', (event) => { + window.addEventListener('beforeprint', () => { document.getElementById("before-print-count").innerText = ++count; print() }); diff --git a/toolkit/components/printing/tests/head.js b/toolkit/components/printing/tests/head.js index 4c8c0b26b6..e2a83463a6 100644 --- a/toolkit/components/printing/tests/head.js +++ b/toolkit/components/printing/tests/head.js @@ -60,6 +60,9 @@ class PrintHelper { } static getTestPageUrl(pathName) { + if (pathName.startsWith("http://")) { + return pathName; + } const testPath = getRootDirectory(gTestPath).replace( "chrome://mochitests/content", "http://example.com" @@ -68,6 +71,9 @@ class PrintHelper { } static getTestPageUrlHTTPS(pathName) { + if (pathName.startsWith("https://")) { + return pathName; + } const testPath = getRootDirectory(gTestPath).replace( "chrome://mochitests/content", "https://example.com" @@ -232,11 +238,7 @@ class PrintHelper { }); // Mock PrintEventHandler with our Promises. - this.win.PrintEventHandler._showPrintDialog = ( - window, - haveSelection, - settings - ) => { + this.win.PrintEventHandler._showPrintDialog = (window, haveSelection) => { this.systemDialogOpenedWithSelection = haveSelection; return showSystemDialogPromise; }; |