forked from mirrors/gecko-dev
336 lines
11 KiB
HTML
336 lines
11 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/firefoxView.ftl" />
|
|
<link rel="localization" href="toolkit/branding/accounts.ftl" />
|
|
<link rel="localization" href="toolkit/branding/brandings.ftl" />
|
|
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/content/firefoxview/firefoxview.css"
|
|
/>
|
|
<script
|
|
type="module"
|
|
src="chrome://browser/content/firefoxview/tab-pickup-container.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://browser/content/firefoxview/firefoxview.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://browser/content/firefoxview/recently-closed-tabs.mjs"
|
|
></script>
|
|
<script
|
|
type="module"
|
|
src="chrome://browser/content/firefoxview/tab-pickup-list.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-feature-name"
|
|
data-l10n-id="firefoxview-page-title"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
<main>
|
|
<details
|
|
class="content-container"
|
|
is="tab-pickup-container"
|
|
id="tab-pickup-container"
|
|
open
|
|
>
|
|
<summary class="page-section-header">
|
|
<span
|
|
class="twisty icon"
|
|
data-l10n-id="firefoxview-collapse-button-hide"
|
|
aria-role="presentation"
|
|
></span>
|
|
<h1
|
|
id="collapsible-synced-tabs-header"
|
|
data-l10n-id="firefoxview-tabpickup-header"
|
|
></h1>
|
|
<h2
|
|
class="section-description"
|
|
data-l10n-id="firefoxview-tabpickup-description"
|
|
></h2>
|
|
</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>
|
|
<named-deck
|
|
class="sync-setup-container"
|
|
role="region"
|
|
aria-labelledby="collapsible-synced-tabs-header"
|
|
id="tabpickup-steps"
|
|
>
|
|
<div
|
|
name="sync-setup-view0"
|
|
id="tabpickup-steps-view0"
|
|
class="card card-no-hover error-state"
|
|
aria-labelledby="tabpickup-steps-view0-header"
|
|
>
|
|
<icon class="icon info primary"></icon>
|
|
<h3 id="tabpickup-steps-view0-header" class="card-header"></h3>
|
|
<section>
|
|
<p>
|
|
<span id="error-state-description"></span>
|
|
<a id="error-state-link" target="_blank" hidden></a>
|
|
</p>
|
|
<button id="error-state-button" class="primary"></button>
|
|
</section>
|
|
</div>
|
|
<div
|
|
name="sync-setup-view1"
|
|
id="tabpickup-steps-view1"
|
|
class="card card-no-hover zap-card setup-step"
|
|
aria-labelledby="tabpickup-steps-view1-header"
|
|
>
|
|
<h2
|
|
id="tabpickup-steps-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
|
|
id="tabpickup-steps-view1-progress"
|
|
class="step-progress"
|
|
max="100"
|
|
value="11"
|
|
></progress>
|
|
<label
|
|
for="tabpickup-steps-view1-progress"
|
|
data-l10n-id="firefoxview-tabpickup-progress-label"
|
|
data-l10n-args='{"percentValue":"11"}'
|
|
></label>
|
|
</footer>
|
|
</div>
|
|
<div
|
|
name="sync-setup-view2"
|
|
id="tabpickup-steps-view2"
|
|
class="card card-no-hover zap-card setup-step"
|
|
aria-labelledby="tabpickup-steps-view2-header"
|
|
>
|
|
<h2
|
|
id="tabpickup-steps-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
|
|
id="tabpickup-steps-view2-progress"
|
|
class="step-progress"
|
|
max="100"
|
|
value="33"
|
|
></progress>
|
|
<label
|
|
for="tabpickup-steps-view2-progress"
|
|
data-l10n-id="firefoxview-tabpickup-progress-label"
|
|
data-l10n-args='{"percentValue":"33"}'
|
|
></label>
|
|
</footer>
|
|
</div>
|
|
<div
|
|
name="sync-setup-view3"
|
|
id="tabpickup-steps-view3"
|
|
class="card card-no-hover zap-card setup-step"
|
|
aria-labelledby="tabpickup-steps-view3-header"
|
|
>
|
|
<h2
|
|
id="tabpickup-steps-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
|
|
id="tabpickup-steps-view3-progress"
|
|
class="step-progress"
|
|
max="100"
|
|
value="66"
|
|
></progress>
|
|
<label
|
|
for="tabpickup-steps-view3-progress"
|
|
data-l10n-id="firefoxview-tabpickup-progress-label"
|
|
data-l10n-args='{"percentValue":"66"}'
|
|
></label>
|
|
</footer>
|
|
</div>
|
|
</named-deck>
|
|
|
|
<div
|
|
id="tabpickup-tabs-container"
|
|
role="region"
|
|
aria-labelledby="collapsible-synced-tabs-header"
|
|
class="synced-tabs-container"
|
|
hidden
|
|
>
|
|
<tab-pickup-list>
|
|
<ol hidden="true" class="synced-tabs-list"></ol>
|
|
</tab-pickup-list>
|
|
<div hidden id="synced-tabs-placeholder" class="placeholder-content">
|
|
<img
|
|
id="tab-pickup-empty-image"
|
|
src="chrome://browser/content/firefoxview/tab-pickup-empty.svg"
|
|
role="presentation"
|
|
alt=""
|
|
/>
|
|
<div class="placeholder-text">
|
|
<h4
|
|
data-l10n-id="firefoxview-synced-tabs-placeholder-header"
|
|
class="placeholder-header"
|
|
></h4>
|
|
<p
|
|
data-l10n-id="firefoxview-synced-tabs-placeholder-body"
|
|
class="placeholder-body"
|
|
></p>
|
|
</div>
|
|
</div>
|
|
<div class="loading-content">
|
|
<icon class="icon sync"></icon>
|
|
<p data-l10n-id="firefoxview-tabpickup-syncing"></p>
|
|
</div>
|
|
</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>
|
|
|
|
<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"
|
|
>
|
|
<span class="twisty icon" aria-role="presentation"></span>
|
|
<h1
|
|
id="recently-closed-tabs-header"
|
|
data-l10n-id="firefoxview-recently-closed-header"
|
|
></h1>
|
|
</summary>
|
|
<div
|
|
id="collapsible-tabs-container"
|
|
id="recently-closed-tabs"
|
|
role="region"
|
|
aria-labelledby="recently-closed-tabs-header"
|
|
>
|
|
<recently-closed-tabs-list></recently-closed-tabs-list>
|
|
</div>
|
|
</details>
|
|
</main>
|
|
</body>
|
|
</html>
|