summaryrefslogtreecommitdiffstats
path: root/toolkit/components/printing/content
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--toolkit/components/printing/content/print.css354
-rw-r--r--toolkit/components/printing/content/print.html44
-rw-r--r--toolkit/components/printing/content/print.js18
-rw-r--r--toolkit/components/printing/content/toggle-group.css14
4 files changed, 194 insertions, 236 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 {
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-04 22:31:08 +0000