Source code
Revision control
Copy as Markdown
Other Tools
<!-- 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,
<!doctype html>
<html>
<head>
<title id="reader-title"></title>
<meta
http-equiv="Content-Security-Policy"
content="default-src chrome:; img-src data: *; media-src *; object-src 'none'"
/>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width; user-scalable=0" />
<link
rel="stylesheet"
href="chrome://global/skin/design-system/tokens-brand.css"
/>
<link
rel="stylesheet"
href="chrome://global/skin/aboutReader.css"
type="text/css"
/>
<link rel="localization" href="toolkit/about/aboutReader.ftl" />
<link rel="localization" href="toolkit/branding/brandings.ftl" />
<script
type="module"
src="chrome://global/content/reader/moz-slider.mjs"
></script>
<script
type="module"
src="chrome://global/content/reader/color-input.mjs"
></script>
<script
type="module"
src="chrome://global/content/elements/named-deck.js"
></script>
</head>
<body>
<div class="top-anchor"></div>
<div id="toolbar" class="toolbar-container">
<div class="toolbar reader-toolbar">
<div class="reader-controls">
<button
class="close-button toolbar-button"
aria-labelledby="toolbar-close"
data-telemetry-id="reader-close"
>
<span
class="hover-label"
id="toolbar-close"
data-l10n-id="about-reader-toolbar-close"
></span>
</button>
<ul
class="dropdown improved-style-dropdown"
id="improved-text-menu"
hidden="true"
>
<li>
<button
class="dropdown-toggle toolbar-button improved-style-button"
aria-labelledby="toolbar-text-layout-controls"
data-telemetry-id="reader-text-layout-controls"
>
<span
class="hover-label"
id="toolbar-text-layout-controls"
data-l10n-id="about-reader-toolbar-text-layout-controls"
></span>
</button>
</li>
<li class="dropdown-popup" id="text-layout-controls" tabindex="-1">
<h2
data-l10n-id="about-reader-text-header"
id="about-reader-text-header"
></h2>
<div id="text-size-controls">
<span
data-l10n-id="about-reader-text-size-label"
id="about-reader-text-size-label"
></span>
<div class="text-size-buttons buttonrow">
<button
class="text-size-minus-button"
data-l10n-id="about-reader-toolbar-minus"
data-telemetry-id="text-size-minus-button"
></button>
<button
class="text-size-plus-button"
data-l10n-id="about-reader-toolbar-plus"
data-telemetry-id="text-size-plus-button"
></button>
</div>
</div>
<div id="font-controls">
<div id="font-type-dropdown" class="dropdown-selector">
<label
for="font-type-selector"
data-l10n-id="about-reader-font-type-selector-label"
></label>
<select
name="font-type-selector"
id="font-type-selector"
data-telemetry-id="font-type-selector"
></select>
</div>
<div id="font-weight-dropdown" class="dropdown-selector">
<label
for="font-weight-selector"
data-l10n-id="about-reader-font-weight-selector-label"
></label>
<select
name="font-weight-selector"
id="font-weight-selector"
data-telemetry-id="font-weight-selector"
></select>
</div>
</div>
<hr />
<h2
data-l10n-id="about-reader-layout-header"
id="about-reader-layout-header"
></h2>
<div id="content-width-slider" class="slider-container"></div>
<div id="line-spacing-slider" class="slider-container"></div>
<hr />
<details id="about-reader-advanced-layout">
<summary class="accordion-header">
<h2
data-l10n-id="about-reader-advanced-layout-header"
id="about-reader-advanced-layout-header"
></h2>
<span class="chevron-icon"></span>
</summary>
<div
id="character-spacing-slider"
class="slider-container"
></div>
<div id="word-spacing-slider" class="slider-container"></div>
<label
for="text-alignment-buttons"
data-l10n-id="about-reader-text-alignment-label"
></label>
<div
class="text-alignment-buttons radiorow"
id="text-alignment-buttons"
></div>
<button
class="text-layout-reset-button reset-button"
data-l10n-id="about-reader-reset-button"
></button>
</details>
</li>
</ul>
<ul class="dropdown style-dropdown" id="regular-text-menu">
<li>
<button
class="dropdown-toggle toolbar-button style-button"
aria-labelledby="toolbar-type-controls"
data-telemetry-id="reader-type-controls"
>
<span
class="hover-label"
id="toolbar-type-controls"
data-l10n-id="about-reader-toolbar-type-controls"
></span>
</button>
</li>
<li class="dropdown-popup">
<div class="font-type-buttons radiorow"></div>
<div class="font-size-buttons buttonrow">
<button
class="minus-button"
data-l10n-id="about-reader-toolbar-minus"
></button>
<span class="font-size-value"></span>
<button
class="plus-button"
data-l10n-id="about-reader-toolbar-plus"
></button>
</div>
<div class="content-width-buttons buttonrow">
<button
class="content-width-minus-button"
data-l10n-id="about-reader-toolbar-contentwidthminus"
></button>
<span class="content-width-value"></span>
<button
class="content-width-plus-button"
data-l10n-id="about-reader-toolbar-contentwidthplus"
></button>
</div>
<div class="line-height-buttons buttonrow">
<button
class="line-height-minus-button"
data-l10n-id="about-reader-toolbar-lineheightminus"
></button>
<span class="line-height-value"></span>
<button
class="line-height-plus-button"
data-l10n-id="about-reader-toolbar-lineheightplus"
></button>
</div>
<div
class="color-scheme-buttons radiorow"
id="regular-color-scheme"
hidden="false"
></div>
</li>
</ul>
<ul
class="dropdown colors-dropdown"
id="custom-colors-color-scheme"
hidden="true"
>
<li>
<button
class="dropdown-toggle toolbar-button colors-button"
aria-labelledby="toolbar-color-controls"
data-telemetry-id="reader-color-controls"
>
<span
class="hover-label"
id="toolbar-color-controls"
data-l10n-id="about-reader-toolbar-theme-controls"
></span>
</button>
</li>
<li class="dropdown-popup" id="color-controls">
<h2
data-l10n-id="about-reader-colors-menu-header"
id="about-reader-colors-menu-header"
></h2>
<button-group aria-labelledby="about-reader-colors-menu-header">
<button
is="named-deck-button"
deck="tabs-deck"
name="fxtheme"
data-l10n-id="about-reader-fxtheme-tab"
data-telemetry-id="colors-menu-default-tab"
></button>
<button
is="named-deck-button"
deck="tabs-deck"
name="customtheme"
data-l10n-id="about-reader-customtheme-tab"
data-telemetry-id="colors-menu-custom-tab"
></button>
</button-group>
<named-deck id="tabs-deck" is-tabbed>
<div
name="fxtheme"
class="colors-menu-color-scheme-buttons radiorow"
></div>
<div name="customtheme">
<ul class="custom-colors-selection"></ul>
<button
class="custom-colors-reset-button reset-button"
data-l10n-id="about-reader-reset-button"
></button>
</div>
</named-deck>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="header reader-header">
<a class="domain reader-domain"></a>
<div class="domain-border"></div>
<h1 class="reader-title"></h1>
<div class="credits reader-credits"></div>
<div class="meta-data">
<div class="reader-estimated-time"></div>
</div>
</div>
<hr />
<div class="content">
<div class="moz-reader-content"></div>
</div>
<div>
<div class="reader-message"></div>
</div>
<div aria-owns="toolbar"></div>
</div>
</body>
</html>