forked from mirrors/gecko-dev
84bf0fdb08
Differential Revision: https://phabricator.services.mozilla.com/D68701 --HG-- rename : browser/base/content/logos/etp-mobile-light.svg => browser/base/content/logos/etp-mobile.svg rename : browser/base/content/logos/lockwise-light.svg => browser/base/content/logos/lockwise-mobile.svg extra : moz-landing-system : lando
279 lines
15 KiB
HTML
279 lines
15 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 chrome: blob:; object-src 'none'">
|
|
<link rel="localization" href="browser/branding/brandings.ftl"/>
|
|
<link rel="localization" href="branding/brand.ftl"/>
|
|
<link rel="localization" href="browser/branding/sync-brand.ftl">
|
|
<link rel="localization" href="browser/protections.ftl">
|
|
<!-- Temporary "en-US"-only l10n strings -->
|
|
<link rel="localization" href="preview/protections.ftl">
|
|
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
|
|
<link rel="stylesheet" href="chrome://browser/content/protections.css">
|
|
<link rel="icon" href="chrome://browser/skin/controlcenter/dashboard.svg">
|
|
<script type="module" src="chrome://browser/content/protections.js"></script>
|
|
<script type="module" src="chrome://browser/content/lockwise-card.js"></script>
|
|
<script type="module" src="chrome://browser/content/monitor-card.js"></script>
|
|
<script type="module" src="chrome://browser/content/proxy-card.js"></script>
|
|
<title data-l10n-id="protection-report-page-title"></title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="report-content">
|
|
<h1 id="report-title" data-l10n-id="protection-report-content-title"></h1>
|
|
<div class="card card-no-hover etp-card">
|
|
<div class="card-header">
|
|
<img class="icon light" src="chrome://browser/content/logos/tracking-protection.svg"/>
|
|
<img class="icon dark" src="chrome://browser/content/logos/tracking-protection-dark-theme.svg"/>
|
|
<div class="wrapper">
|
|
<div>
|
|
<h2 class="card-title" data-l10n-id="etp-card-title"></h2>
|
|
<p id="etp-card-content" class="content" data-l10n-id="etp-card-content"></p>
|
|
<p id="protection-details" role="link" tabindex="0"></p>
|
|
</div>
|
|
<a target="_blank" id="manage-protections" data-l10n-id="protection-report-manage-protections"></a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="body-wrapper">
|
|
<p id="graph-week-summary"></p>
|
|
<div id="graph-wrapper">
|
|
<div id="graph" role="table" aria-labelledby="graphLegendDescription">
|
|
<div id="private-window-message" data-l10n-id="graph-private-window"></div>
|
|
</div>
|
|
<div id="legend">
|
|
<label id="graphLegendDescription" data-l10n-id="graph-legend-description"></label>
|
|
<input id="tab-social" data-type="social" type="radio" name="tabs" aria-labelledby="socialLabel socialTitle" aria-describedby="socialContent" checked>
|
|
<label id="socialLabel" for="tab-social" data-type="social">
|
|
<img class="icon-small" src="chrome://browser/skin/controlcenter/socialblock.svg" data-type="social"/>
|
|
<span data-type="social"></span>
|
|
</label>
|
|
|
|
<input id="tab-cookie" data-type="cookie" type="radio" name="tabs" aria-labelledby="cookieLabel cookieTitle" aria-describedby="cookieContent">
|
|
<label id="cookieLabel" for="tab-cookie" data-type="cookie">
|
|
<img class="icon-small" src="chrome://browser/skin/controlcenter/3rdpartycookies.svg" data-type="cookie"/>
|
|
<span data-type="cookie"></span>
|
|
</label>
|
|
|
|
<input id="tab-tracker" data-type="tracker" type="radio" name="tabs" aria-labelledby="trackerLabel trackerTitle" aria-describedby="trackerContent">
|
|
<label id="trackerLabel" for="tab-tracker" data-type="tracker">
|
|
<img class="icon-small" src="chrome://browser/skin/controlcenter/tracker-image.svg" data-type="tracker"/>
|
|
<span data-type="tracker"></span>
|
|
</label>
|
|
|
|
<input id="tab-fingerprinter" data-type="fingerprinter" type="radio" name="tabs" aria-labelledby="fingerprinterLabel fingerprinterTitle" aria-describedby="fingerprinterContent">
|
|
<label id="fingerprinterLabel" for="tab-fingerprinter" data-type="fingerprinter">
|
|
<img class="icon-small" src="chrome://browser/skin/controlcenter/fingerprinters.svg" data-type="fingerprinter"/>
|
|
<span data-type="fingerprinter"></span>
|
|
</label>
|
|
|
|
<input id="tab-cryptominer" data-type="cryptominer" type="radio" name="tabs" aria-labelledby="cryptominerLabel cryptominerTitle" aria-describedby="cryptominerContent">
|
|
<label id="cryptominerLabel" for="tab-cryptominer" data-type="cryptominer">
|
|
<img class="icon-small" src="chrome://browser/skin/controlcenter/cryptominers.svg" data-type="cryptominer"/>
|
|
<span data-type="cryptominer"></span>
|
|
</label>
|
|
<div id=highlight></div>
|
|
<div id=highlight-hover></div>
|
|
<div id="social" class="tab-content">
|
|
<p id="socialTitle" class="content-title" data-l10n-id="social-tab-title"></p>
|
|
<p id="socialContent" data-l10n-id="social-tab-contant">
|
|
<a target="_blank" id="social-link" data-l10n-name="learn-more-link"></a>
|
|
</p>
|
|
</div>
|
|
<div id="cookie" class="tab-content">
|
|
<p id="cookieTitle" class="content-title" data-l10n-id="cookie-tab-title"></p>
|
|
<p id="cookieContent" data-l10n-id="cookie-tab-content">
|
|
<a target="_blank" id="cookie-link" data-l10n-name="learn-more-link"></a>
|
|
</p>
|
|
</div>
|
|
<div id="tracker" class="tab-content">
|
|
<p id="trackerTitle" class="content-title" data-l10n-id="tracker-tab-title"></p>
|
|
<p id="trackerContent" data-l10n-id="tracker-tab-description">
|
|
<a target="_blank" id="tracker-link" data-l10n-name="learn-more-link"></a>
|
|
</p>
|
|
</div>
|
|
<div id="fingerprinter" class="tab-content">
|
|
<p id="fingerprinterTitle" class="content-title" data-l10n-id="fingerprinter-tab-title"></p>
|
|
<p id="fingerprinterContent" data-l10n-id="fingerprinter-tab-content">
|
|
<a target="_blank" id="fingerprinter-link" data-l10n-name="learn-more-link"></a>
|
|
</p>
|
|
</div>
|
|
<div id="cryptominer" class="tab-content">
|
|
<p id="cryptominerTitle" class="content-title" data-l10n-id="cryptominer-tab-title"></p>
|
|
<p id="cryptominerContent" data-l10n-id="cryptominer-tab-content">
|
|
<a target="_blank" id="cryptominer-link" data-l10n-name="learn-more-link"></a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="graph-total-summary"></div>
|
|
</div>
|
|
</div>
|
|
<div id="mobile-hanger" class="card-body hidden">
|
|
<div class="body-wrapper">
|
|
<button class="exit-icon" data-l10n-id="protections-close-button"></button>
|
|
<div id="etp-mobile-content">
|
|
<img class="mobile-app-icon" src="chrome://browser/content/logos/etp-mobile.svg"/>
|
|
<span>
|
|
<h2 class="card-title" data-l10n-id="mobile-app-title"></h2>
|
|
<p class="content">
|
|
<span data-l10n-id="mobile-app-card-content"></span>
|
|
<span target="_blank" id="mobile-app-links" data-l10n-id="mobile-app-links">
|
|
<a target="_blank" id="android-mobile-inline-link" data-l10n-name="android-mobile-inline-link" href=""></a>
|
|
<a target="_blank" id="ios-mobile-inline-link" data-l10n-name="ios-mobile-inline-link" href=""></a>
|
|
</span>
|
|
</p>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Markup for Monitor card. -->
|
|
<section class="card card-no-hover monitor-card hidden">
|
|
<div class="card-header">
|
|
<img class="icon" src="chrome://browser/content/logos/monitor.svg"/>
|
|
<div class="wrapper">
|
|
<div>
|
|
<h2 id="monitor-title" class="card-title" data-l10n-id="monitor-title"></h2>
|
|
<p id="monitor-header-content" class="content">
|
|
<span>
|
|
<!-- Insert Monitor header content here. -->
|
|
</span>
|
|
<a target="_blank" href="" id="monitor-link" data-l10n-id="monitor-link"></a>
|
|
</p>
|
|
<div class="monitor-scanned-wrapper">
|
|
<img class="icon-small" src="chrome://browser/skin/reload.svg"/>
|
|
<span class="monitor-scanned-text" data-l10n-id="auto-scan"></span>
|
|
</div>
|
|
</div>
|
|
<a target="_blank" id="sign-up-for-monitor-link">
|
|
<!-- Insert Monitor link content here. -->
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="body-wrapper">
|
|
<div id="monitor-body-content">
|
|
<div class="monitor-info-wrapper">
|
|
<div class="monitor-block email">
|
|
<span class="monitor-stat">
|
|
<img class="icon-med" src="chrome://browser/skin/mail.svg"/>
|
|
<span data-type="stored-emails">
|
|
<!-- Display number of stored emails here. -->
|
|
</span>
|
|
</span>
|
|
<span id="info-monitored-addresses" class="info-text"></span>
|
|
</div>
|
|
<div class="monitor-block breaches">
|
|
<span class="monitor-stat">
|
|
<img class="icon-med" src="chrome://browser/skin/fxa/avatar.svg"/>
|
|
<span data-type="known-breaches">
|
|
<!-- Display number of known breaches here. -->
|
|
</span>
|
|
</span>
|
|
<span id="info-known-breaches" class="info-text"></span>
|
|
</div>
|
|
<div class="monitor-block passwords">
|
|
<span class="monitor-stat">
|
|
<img class="icon-med" src="chrome://browser/skin/login.svg"/>
|
|
<span data-type="exposed-passwords">
|
|
<!-- Display number of exposed passwords here. -->
|
|
</span>
|
|
</span>
|
|
<span id="info-exposed-passwords" class="info-text"></span>
|
|
</div>
|
|
</div>
|
|
<div id="full-report-link" class="monitor-view-full-report" data-l10n-id="full-report-link">
|
|
<a target="_blank" id="monitor-inline-link" data-l10n-name="monitor-inline-link" href=""></a>
|
|
</div>
|
|
<div class="monitor-breached-passwords hidden">
|
|
<span data-type="breached-lockwise-passwords" class="number-of-breaches block">
|
|
<!-- Display number of exposed stored passwords here. -->
|
|
</span>
|
|
<span id="password-warning">
|
|
<a target="_blank" href="about:logins?entryPoint=aboutprotections" id="lockwise-link" data-l10n-name="lockwise-link"></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Markup for Lockwise card. -->
|
|
<section class="card card-no-hover lockwise-card hidden">
|
|
<div class="card-header">
|
|
<img class="icon" src="chrome://browser/content/logos/lockwise.svg"/>
|
|
<div class="wrapper">
|
|
<div>
|
|
<h2 id="lockwise-title" class="card-title">
|
|
<!-- Insert Lockwise card title here. -->
|
|
</h2>
|
|
<p id="lockwise-header-content" class="content">
|
|
<!-- Insert Lockwise header content here. -->
|
|
</p>
|
|
</div>
|
|
<button id="open-about-logins-button" class="primary" data-l10n-id="protection-report-view-logins-button"></button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body hidden">
|
|
<div id="lockwise-body-content" class="body-wrapper">
|
|
<div class="no-logins hidden">
|
|
<button class="exit-icon" data-l10n-id="protections-close-button"></button>
|
|
<img class="mobile-app-icon" src="chrome://browser/content/logos/lockwise-mobile.svg"/>
|
|
<span>
|
|
<h2 class="card-title" data-l10n-id="lockwise-mobile-app-title"></h2>
|
|
<p class="content">
|
|
<span data-l10n-id="lockwise-no-logins-card-content"></span>
|
|
<span target="_blank" id="lockwise-app-links" data-l10n-id="lockwise-app-links" href="">
|
|
<a id="lockwise-android-inline-link" target="_blank" data-l10n-name="lockwise-android-inline-link"></a>
|
|
<a id="lockwise-ios-inline-link" target="_blank" data-l10n-name="lockwise-ios-inline-link"></a>
|
|
</span>
|
|
</p>
|
|
</span>
|
|
</div>
|
|
<div class="has-logins hidden">
|
|
<span class="number-of-logins block">
|
|
<!-- Display number of stored logins here. -->
|
|
</span>
|
|
<span class="passwords-stored-text">
|
|
<img class="icon-small" src= "chrome://browser/skin/login.svg"/>
|
|
<span id="lockwise-passwords-stored">
|
|
<!-- Display message for stored logins here. -->
|
|
<a target="_blank" id="lockwise-how-it-works" data-l10n-name="lockwise-how-it-works" href=""></a>
|
|
</span>
|
|
</span>
|
|
<span class="number-of-synced-devices block">
|
|
<!-- Display number of synced devices here. -->
|
|
</span>
|
|
<span class="synced-devices-text">
|
|
<img class="icon-small" src="chrome://browser/skin/sync.svg"/>
|
|
<span>
|
|
<!-- Display message for status of synced devices here. -->
|
|
</span>
|
|
<a id="turn-on-sync" tabindex="0" class="hidden" href="" data-l10n-id="turn-on-sync"></a>
|
|
<a id="manage-devices" target="_blank" class="hidden" href="" data-l10n-id="manage-connected-devices"></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Markup for Proxy card -->
|
|
<section class="card card-no-hover proxy-card hidden">
|
|
<div class="card-header">
|
|
<img class="icon" src="chrome://browser/content/logos/proxy.svg" />
|
|
<div class="wrapper">
|
|
<div>
|
|
<h3 class="card-title" data-l10n-id="proxy-title"></h3>
|
|
<p class="content" data-l10n-id="proxy-header-content"></p>
|
|
</div>
|
|
<a target="_blank" id="get-proxy-extension-link" data-l10n-id="get-proxy-extension-link"></a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|