mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-08 20:28:42 +02:00
182 lines
10 KiB
HTML
182 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="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>
|
|
<nav 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>
|
|
</nav>
|
|
<main>
|
|
<template id="sync-setup-template">
|
|
<named-deck class="sync-setup-container" 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 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>
|
|
|
|
<section class="content-container" is="tab-pickup-container" id="tab-pickup-container">
|
|
<header class="page-section-header">
|
|
<h1 id="collapsible-synced-tabs-header" data-l10n-id="firefoxview-tabpickup-header"></h1>
|
|
<button aria-expanded=true aria-controls="synced-tabs" id="collapsible-synced-tabs-button" class="ghost-button twisty icon arrow-up" data-l10n-id="firefoxview-collapse-button-hide" hidden></button>
|
|
<p class="section-description" data-l10n-id="firefoxview-tabpickup-description"></p>
|
|
</header>
|
|
|
|
<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>
|
|
|
|
</section>
|
|
|
|
<aside 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>
|
|
|
|
<section class="content-container" is="recently-closed-tabs-container" id="recently-closed-tabs-container">
|
|
<header class="page-section-header">
|
|
<h1 id="recently-closed-tabs-header" data-l10n-id="firefoxview-closed-tabs-title"></h1>
|
|
<button aria-expanded="true" aria-controls="recently-closed-tabs" data-l10n-id="firefoxview-collapse-button-hide" id="collapsible-tabs-button" class="ghost-button twisty icon arrow-up"></button>
|
|
<p class="section-description" data-l10n-id="firefoxview-closed-tabs-description"></p>
|
|
</header>
|
|
<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>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|