bec652a910
Added dynamic DOM reordering to FX View so that the order of announcement in screen readers and tab sorting, matches the visual changes made by the responsive CSS layout. Differential Revision: https://phabricator.services.mozilla.com/D157256
183 lines
10 KiB
HTML
183 lines
10 KiB
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, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src resource: chrome:; object-src 'none'; img-src data: chrome:;">
|
|
<meta name="color-scheme" content="light dark">
|
|
<title data-l10n-id="firefoxview-page-title"></title>
|
|
<link rel="icon" type="image/png" id="favicon" href="chrome://branding/content/icon32.png"/>
|
|
<link rel="localization" href="branding/brand.ftl">
|
|
<link rel="localization" href="browser/branding/brandings.ftl"/>
|
|
<link rel="localization" href="browser/firefoxView.ftl"/>
|
|
<link rel="localization" href="browser/colorways.ftl">
|
|
<link rel="localization" href="browser/colorwaycloset.ftl">
|
|
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
|
|
<link rel="stylesheet" href="chrome://browser/content/firefoxview.css">
|
|
<script type="module" src="chrome://browser/content/tab-pickup-container.mjs"></script>
|
|
<script type="module" src="chrome://browser/content/firefoxview.mjs"></script>
|
|
<script type="module" src="chrome://browser/content/colorways-card.mjs"></script>
|
|
<script type="module" src="chrome://browser/content/recently-closed-tabs.mjs"></script>
|
|
<script type="module" src="chrome://browser/content/tab-pickup-list.mjs"></script>
|
|
<script type="module" src="chrome://browser/content/featureCallout.mjs"></script>
|
|
<script src="chrome://browser/content/contentTheme.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="logo-container" class="content-container">
|
|
<div class="brand-logo">
|
|
<span class="brand-icon"></span>
|
|
<span class="brand-feature-name" data-l10n-id="firefoxview-page-title"></span>
|
|
</div>
|
|
</div>
|
|
<main>
|
|
<template id="sync-setup-template">
|
|
<named-deck class="sync-setup-container" role="region" aria-labelledby="collapsible-synced-tabs-header" data-prefix="id:">
|
|
<div name="sync-setup-view0" data-prefix="id:-view0" class="card card-no-hover error-state" data-prefix="aria-labelledby:-view0-header">
|
|
<icon class="icon info primary"></icon><h3 data-prefix="id:-view0-header" class="card-header"></h3>
|
|
<section>
|
|
<p>
|
|
<span id="error-state-description"></span>
|
|
</p>
|
|
<button id="error-state-button" class="primary"></button>
|
|
</section>
|
|
</div>
|
|
<div name="sync-setup-view1" data-prefix="id:-view1" class="card card-no-hover zap-card setup-step" data-prefix="aria-labelledby:-view1-header">
|
|
<h2 data-prefix="id:-view1-header" data-l10n-id="firefoxview-tabpickup-step-signin-header" class="card-header"></h2>
|
|
<section class="card-body">
|
|
<p class="step-content" data-l10n-id="firefoxview-tabpickup-step-signin-description"></p>
|
|
<button id="firefoxview-tabpickup-step-signin-primarybutton" class="primary" data-action="view1-primary-action" data-l10n-id="firefoxview-tabpickup-step-signin-primarybutton"></button>
|
|
</section>
|
|
<footer>
|
|
<progress data-prefix="id:-view1-progress" class="step-progress" max="100" value="11"></progress>
|
|
<label
|
|
data-prefix="for:-view1-progress"
|
|
data-l10n-id="firefoxview-tabpickup-progress-label"
|
|
data-l10n-args='{"percentValue":"11"}'></label>
|
|
</footer>
|
|
</div>
|
|
<div name="sync-setup-view2" data-prefix="id:-view2" class="card card-no-hover zap-card setup-step" data-prefix="aria-labelledby:-view2-header">
|
|
<h2 data-prefix="id:-view2-header" data-l10n-id="firefoxview-tabpickup-adddevice-header" class="card-header"></h2>
|
|
<section class="card-body">
|
|
<p class="step-content">
|
|
<span data-l10n-id="firefoxview-tabpickup-adddevice-description"></span>
|
|
<br/>
|
|
<a target="_blank" data-support-url="tab-pickup-firefox-view" data-l10n-id="firefoxview-tabpickup-adddevice-learn-how"></a>
|
|
</p>
|
|
<button class="primary" data-action="view2-primary-action" data-l10n-id="firefoxview-tabpickup-adddevice-primarybutton"></button>
|
|
</section>
|
|
<footer>
|
|
<progress data-prefix="id:-view2-progress" class="step-progress" max="100" value="33"></progress>
|
|
<label
|
|
data-prefix="for:-view2-progress"
|
|
data-l10n-id="firefoxview-tabpickup-progress-label"
|
|
data-l10n-args='{"percentValue":"33"}'></label>
|
|
</footer>
|
|
</div>
|
|
<div name="sync-setup-view3" data-prefix="id:-view3" class="card card-no-hover zap-card setup-step" data-prefix="aria-labelledby:-view3-header">
|
|
<h2 data-prefix="id:-view3-header" data-l10n-id="firefoxview-tabpickup-synctabs-header" class="card-header"></h2>
|
|
<section class="card-body">
|
|
<p class="step-content">
|
|
<span data-l10n-id="firefoxview-tabpickup-synctabs-description"></span>
|
|
<br/>
|
|
<a target="_blank" data-support-url="tab-pickup-firefox-view" data-l10n-id="firefoxview-tabpickup-synctabs-learn-how"></a>
|
|
</p>
|
|
<button class="primary" data-action="view3-primary-action" data-l10n-id="firefoxview-tabpickup-synctabs-primarybutton"></button>
|
|
</section>
|
|
<footer>
|
|
<progress data-prefix="id:-view3-progress" class="step-progress" max="100" value="66"></progress>
|
|
<label
|
|
data-prefix="for:-view3-progress"
|
|
data-l10n-id="firefoxview-tabpickup-progress-label"
|
|
data-l10n-args='{"percentValue":"66"}'></label>
|
|
</footer>
|
|
</div>
|
|
</named-deck>
|
|
</template>
|
|
<template id="synced-tabs-template">
|
|
<div id="synced-tabs" role="region" aria-labelledby="collapsible-synced-tabs-header" class="synced-tabs-container" data-prefix="id:" hidden>
|
|
<tab-pickup-list>
|
|
<ol hidden="true" class="synced-tabs-list"></ol>
|
|
</tab-pickup-list>
|
|
<div hidden id="synced-tabs-placeholder" class="placeholder-content">
|
|
<icon class="icon synced-tabs"></icon>
|
|
<p data-l10n-id="firefoxview-synced-tabs-placeholder" class="placeholder-text"></p>
|
|
</div>
|
|
<div class="loading-content">
|
|
<icon class="icon sync"></icon>
|
|
<p data-l10n-id="firefoxview-tabpickup-syncing"></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<details class="content-container" is="tab-pickup-container" id="tab-pickup-container" open>
|
|
<summary class="page-section-header">
|
|
<h1 id="collapsible-synced-tabs-header" data-l10n-id="firefoxview-tabpickup-header"></h1>
|
|
<span class="twisty icon" data-l10n-id="firefoxview-collapse-button-hide" aria-role="presentation"></span>
|
|
<p class="section-description" data-l10n-id="firefoxview-tabpickup-description"></p>
|
|
</summary>
|
|
|
|
<div class="confirmation-message-box message-box card card-no-hover" hidden>
|
|
<div class="message-content">
|
|
<h2 data-l10n-id="firefoxview-mobile-confirmation-header" class="message-header"></h2>
|
|
<span class="message-description" data-l10n-id="firefoxview-mobile-confirmation-description"></span>
|
|
</div>
|
|
<button data-action="mobile-confirmation-dismiss" class="close icon-button ghost-button" data-l10n-id="firefoxview-close-button"></button>
|
|
</div>
|
|
<div id="sync-setup-placeholder" hidden></div>
|
|
<div id="synced-tabs-placeholder" hidden></div>
|
|
<div class="promo-box message-box zap-card card-no-hover card" hidden>
|
|
<div class="card-body">
|
|
<div class="message-content">
|
|
<h2 data-l10n-id="firefoxview-mobile-promo-header" class="message-header"></h2>
|
|
<p class="message-description" data-l10n-id="firefoxview-mobile-promo-description"></p>
|
|
</div>
|
|
<button class="primary" data-action="mobile-promo-primary-action" data-l10n-id="firefoxview-mobile-promo-primarybutton"></button>
|
|
</div>
|
|
<button data-action="mobile-promo-dismiss" class="close icon-button ghost-button" data-l10n-id="firefoxview-close-button"></button>
|
|
</div>
|
|
</details>
|
|
|
|
<aside id="colorway-landmark" class="content-container" is="colorways-card">
|
|
<template id="colorways-no-collection-template">
|
|
<div class="content-container">
|
|
<div id="no-current-colorway-collection-notice" data-l10n-id="firefoxview-no-current-colorway-collection"></div>
|
|
</div>
|
|
</template>
|
|
<template id="colorways-active-collection-template">
|
|
<figure role="presentation">
|
|
<img id="colorways-collection-figure" role="presentation">
|
|
</figure>
|
|
<header>
|
|
<h1 id="colorways-collection-title"></h1>
|
|
<div id="colorways-collection-expiry-date"><span></span></div>
|
|
</header>
|
|
<div id="colorways-collection-description"></div>
|
|
<button class="primary" id="colorways-button" data-l10n-id="firefoxview-try-colorways-button"></button>
|
|
</template>
|
|
<section id="colorways"></section>
|
|
</aside>
|
|
|
|
<details class="content-container" is="recently-closed-tabs-container" id="recently-closed-tabs-container" open>
|
|
<summary id="recently-closed-tabs-header-section" class="page-section-header" data-l10n-id="firefoxview-collapse-button-hide">
|
|
<h1 id="recently-closed-tabs-header" data-l10n-id="firefoxview-closed-tabs-title"></h1>
|
|
<span class="twisty icon" aria-role="presentation"></span>
|
|
<p class="section-description" data-l10n-id="firefoxview-closed-tabs-description2"></p>
|
|
</summary>
|
|
<div id="collapsible-tabs-container" id="recently-closed-tabs" role="region" aria-labelledby="recently-closed-tabs-header">
|
|
<recently-closed-tabs-list>
|
|
<ol hidden="true" class="closed-tabs-list"></ol>
|
|
</recently-closed-tabs-list>
|
|
<div hidden="true" id="recently-closed-tabs-placeholder" class="placeholder-content">
|
|
<icon class="icon history"></icon>
|
|
<p data-l10n-id="firefoxview-closed-tabs-placeholder" class="placeholder-text"></p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</main>
|
|
</body>
|
|
</html>
|