Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this file,
<html>
<head>
<meta charset="utf-8" />
<title data-l10n-id="printui-title"></title>
<meta
http-equiv="Content-Security-Policy"
content="default-src chrome:;img-src data:; object-src 'none'"
/>
<link rel="localization" href="toolkit/printing/printUI.ftl" />
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<link rel="stylesheet" href="chrome://global/content/toggle-group.css" />
<link rel="stylesheet" href="chrome://global/content/print.css" />
<script defer src="chrome://global/content/print.js"></script>
<script
type="module"
src="chrome://global/content/elements/moz-button-group.mjs"
></script>
</head>
<body loading rendering>
<template id="page-range-template">
<select
id="range-picker"
name="page-range-type"
data-l10n-id="printui-page-range-picker"
is="setting-select"
>
<option
value="all"
selected
data-l10n-id="printui-page-range-all"
></option>
<option
value="current"
data-l10n-id="printui-page-range-current"
></option>
<option value="odd" data-l10n-id="printui-page-range-odd"></option>
<option
value="even"
name="even"
data-l10n-id="printui-page-range-even"
></option>
<option
value="custom"
data-l10n-id="printui-page-range-custom"
></option>
</select>
<input
id="custom-range"
type="text"
disabled
hidden
data-l10n-id="printui-page-custom-range-input"
aria-errormessage="error-invalid-range error-invalid-start-range-overflow"
/>
<p
id="error-invalid-range"
hidden
data-l10n-id="printui-error-invalid-range"
class="error-message"
role="alert"
data-l10n-args='{ "numPages": 1 }'
></p>
<p
id="error-invalid-start-range-overflow"
hidden
data-l10n-id="printui-error-invalid-start-overflow"
class="error-message"
role="alert"
></p>
</template>
<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="twisty-summary-template">
<span class="label"></span>
<span class="twisty"></span>
</template>
<template id="scale-template">
<div role="radiogroup" aria-labelledby="scale-label">
<label class="row cols-2">
<input
type="radio"
name="scale-choice"
id="fit-choice"
value="fit"
checked
/>
<span
data-l10n-id="printui-scale-fit-to-page-width"
class="col"
></span>
</label>
<label class="row cols-2" for="percent-scale-choice">
<input type="radio" name="scale-choice" id="percent-scale-choice" />
<span class="col">
<span
id="percent-scale-label"
data-l10n-id="printui-scale-pcent"
></span>
<!-- Note that here and elsewhere, we're setting aria-errormessage
attributes to a list of all possible errors. The a11y APIs
will filter this down to visible items only. -->
<input
id="percent-scale"
is="setting-number"
min="10"
max="200"
step="1"
size="6"
aria-labelledby="percent-scale-label"
aria-errormessage="error-invalid-scale"
disabled
required
/>
</span>
</label>
<p
id="error-invalid-scale"
hidden
data-l10n-id="printui-error-invalid-scale"
class="error-message"
role="alert"
></p>
</div>
</template>
<template id="copy-template">
<input
id="copies-count"
is="setting-number"
data-setting-name="numCopies"
min="1"
max="10000"
class="copy-count-input"
aria-errormessage="error-invalid-copies"
required
/>
<p
id="error-invalid-copies"
hidden
data-l10n-id="printui-error-invalid-copies"
class="error-message"
role="alert"
></p>
</template>
<template id="margins-template">
<label
for="margins-picker"
class="block-label"
data-l10n-id="printui-margins"
></label>
<select
is="margins-select"
id="margins-picker"
name="margin-type"
data-setting-name="margins"
>
<option value="default" data-l10n-id="printui-margins-default"></option>
<option value="minimum" data-l10n-id="printui-margins-min"></option>
<option value="none" data-l10n-id="printui-margins-none"></option>
<option
value="custom"
data-unit-prefix-l10n-id="printui-margins-custom-"
></option>
</select>
<div id="custom-margins" class="margin-group" role="group" hidden>
<div class="vertical-margins">
<div class="margin-pair">
<input
is="setting-number"
id="custom-margin-top"
class="margin-input"
aria-describedby="margins-custom-margin-top-desc"
min="0"
step="0.01"
required
/>
<label
for="custom-margin-top"
class="margin-descriptor"
data-l10n-id="printui-margins-custom-top"
></label>
<label
hidden
id="margins-custom-margin-top-desc"
data-unit-prefix-l10n-id="printui-margins-custom-top-"
></label>
</div>
<div class="margin-pair">
<input
is="setting-number"
id="custom-margin-bottom"
class="margin-input"
aria-describedby="margins-custom-margin-bottom-desc"
min="0"
step="0.01"
required
/>
<label
for="custom-margin-bottom"
class="margin-descriptor"
data-l10n-id="printui-margins-custom-bottom"
></label>
<label
hidden
id="margins-custom-margin-bottom-desc"
data-unit-prefix-l10n-id="printui-margins-custom-bottom-"
></label>
</div>
</div>
<div class="horizontal-margins">
<div class="margin-pair">
<input
is="setting-number"
id="custom-margin-left"
class="margin-input"
aria-describedby="margins-custom-margin-left-desc"
min="0"
step="0.01"
required
/>
<label
for="custom-margin-left"
class="margin-descriptor"
data-l10n-id="printui-margins-custom-left"
></label>
<label
hidden
id="margins-custom-margin-left-desc"
data-unit-prefix-l10n-id="printui-margins-custom-left-"
></label>
</div>
<div class="margin-pair">
<input
is="setting-number"
id="custom-margin-right"
class="margin-input"
aria-describedby="margins-custom-margin-right-desc"
min="0"
step="0.01"
required
/>
<label
for="custom-margin-right"
class="margin-descriptor"
data-l10n-id="printui-margins-custom-right"
></label>
<label
hidden
id="margins-custom-margin-right-desc"
data-unit-prefix-l10n-id="printui-margins-custom-right-"
></label>
</div>
</div>
<p
id="error-invalid-margin"
hidden
data-l10n-id="printui-error-invalid-margin"
class="error-message"
role="alert"
></p>
</div>
</template>
<header class="header-container" role="none">
<h2 data-l10n-id="printui-title"></h2>
<div aria-live="off">
<p
id="sheet-count"
is="page-count"
data-l10n-id="printui-sheets-count"
data-l10n-args='{ "sheetCount": 0 }'
loading
></p>
</div>
</header>
<hr />
<form id="print" is="print-form" aria-labelledby="page-header">
<section class="body-container">
<section id="destination" class="section-block">
<label
for="printer-picker"
class="block-label"
data-l10n-id="printui-destination-label"
></label>
<select
is="destination-picker"
id="printer-picker"
data-setting-name="printerName"
iconic
></select>
</section>
<section id="settings">
<section id="copies" class="section-block">
<label
for="copies-count"
class="block-label"
data-l10n-id="printui-copies-label"
></label>
<copy-count-input></copy-count-input>
</section>
<section id="orientation" class="section-block">
<label
id="orientation-label"
class="block-label"
data-l10n-id="printui-orientation"
></label>
<div
is="orientation-input"
class="toggle-group"
role="radiogroup"
aria-labelledby="orientation-label"
></div>
</section>
<section id="pages" class="section-block">
<label
for="range-picker"
class="block-label"
data-l10n-id="printui-page-range-label"
></label>
<div id="page-range-input" is="page-range-input"></div>
</section>
<section id="color-mode" class="section-block">
<label
for="color-mode-picker"
class="block-label"
data-l10n-id="printui-color-mode-label"
></label>
<select
is="color-mode-select"
id="color-mode-picker"
data-setting-name="printInColor"
>
<option
value="color"
selected
data-l10n-id="printui-color-mode-color"
></option>
<option value="bw" data-l10n-id="printui-color-mode-bw"></option>
</select>
</section>
<hr />
<details id="more-settings" class="twisty">
<summary
class="block-label section-block"
is="twisty-summary"
data-open-l10n-id="printui-less-settings"
data-closed-l10n-id="printui-more-settings"
></summary>
<section id="paper-size" class="section-block">
<label
for="paper-size-picker"
class="block-label"
data-l10n-id="printui-paper-size-label"
></label>
<select
is="paper-size-select"
id="paper-size-picker"
data-setting-name="paperId"
></select>
</section>
<section id="scale" class="section-block">
<label
id="scale-label"
class="block-label"
data-l10n-id="printui-scale"
></label>
<scale-input></scale-input>
</section>
<section id="pages-per-sheet" class="section-block">
<label
id="pages-per-sheet-label"
for="pages-per-sheet-picker"
class="block-label"
data-l10n-id="printui-pages-per-sheet"
></label>
<select
is="setting-select"
id="pages-per-sheet-picker"
data-setting-name="numPagesPerSheet"
>
<option value="1">1</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="9">9</option>
<option value="16">16</option>
</select>
</section>
<section id="margins" class="section-block">
<div id="margins-select" is="margins-select"></div>
</section>
<section id="two-sided-printing" class="section-block">
<label
class="block-label"
for="duplex-select"
data-l10n-id="printui-two-sided-printing"
></label>
<select
is="setting-select"
id="duplex-select"
name="duplex-type"
data-setting-name="printDuplex"
>
<option
value="off"
data-l10n-id="printui-two-sided-printing-off"
selected
></option>
<option
value="long-edge"
data-l10n-id="printui-two-sided-printing-long-edge"
></option>
<option
value="short-edge"
data-l10n-id="printui-two-sided-printing-short-edge"
></option>
</select>
</section>
<section id="source-version-section" class="section-block">
<label
id="source-version-label"
data-l10n-id="printui-source-label"
></label>
<div role="radiogroup" aria-labelledby="source-version-label">
<label id="source-version-source" class="row cols-2">
<input
is="setting-radio"
name="source-version"
value="source"
id="source-version-source-radio"
data-setting-name="sourceVersion"
checked
/>
<span data-l10n-id="printui-source-radio"></span>
</label>
<label id="source-version-selection" class="row cols-2">
<input
is="setting-radio"
name="source-version"
value="selection"
id="source-version-selection-radio"
data-setting-name="sourceVersion"
/>
<span data-l10n-id="printui-selection-radio"></span>
</label>
<label id="source-version-simplified" class="row cols-2">
<input
is="setting-radio"
name="source-version"
value="simplified"
id="source-version-simplified-radio"
data-setting-name="sourceVersion"
/>
<span data-l10n-id="printui-simplify-page-radio"></span>
</label>
</div>
</section>
<section id="more-settings-options" class="section-block">
<label class="block-label" data-l10n-id="printui-options"></label>
<label id="headers-footers" class="row cols-2">
<input
is="setting-checkbox"
id="headers-footers-enabled"
data-setting-name="printFootersHeaders"
/>
<span data-l10n-id="printui-headers-footers-checkbox"></span>
</label>
<label id="backgrounds" class="row cols-2">
<input
is="print-backgrounds"
id="backgrounds-enabled"
data-setting-name="printBackgrounds"
/>
<span data-l10n-id="printui-backgrounds-checkbox"></span>
</label>
</section>
</details>
</section>
<section id="system-print" class="section-block">
<a
href="#"
id="open-dialog-link"
data-l10n-id="printui-system-dialog-link"
></a>
</section>
</section>
<hr />
<footer class="footer-container" id="print-footer" role="none">
<p
id="print-progress"
class="section-block"
data-l10n-id="printui-print-progress-indicator"
hidden
></p>
<moz-button-group id="button-container" class="section-block">
<button
id="print-button"
class="primary"
showfocus
name="print"
data-l10n-id="printui-primary-button"
is="print-button"
type="submit"
></button>
<button
id="cancel-button"
name="cancel"
data-l10n-id="printui-cancel-button"
data-close-l10n-id="printui-close-button"
data-cancel-l10n-id="printui-cancel-button"
type="button"
is="cancel-button"
></button>
</moz-button-group>
</footer>
</form>
</body>
</html>