diff options
Diffstat (limited to 'browser/components/protections/content/protections.html')
| -rw-r--r-- | browser/components/protections/content/protections.html | 597 |
1 files changed, 597 insertions, 0 deletions
diff --git a/browser/components/protections/content/protections.html b/browser/components/protections/content/protections.html new file mode 100644 index 0000000000..1374c30fd7 --- /dev/null +++ b/browser/components/protections/content/protections.html @@ -0,0 +1,597 @@ +<!-- 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'" + /> + <meta name="color-scheme" content="light dark" /> + <link rel="localization" href="branding/brand.ftl" /> + <link rel="localization" href="browser/protections.ftl" /> + <link rel="localization" href="toolkit/branding/accounts.ftl" /> + <link rel="localization" href="toolkit/branding/brandings.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.mjs" + ></script> + <title data-l10n-id="protection-report-webpage-title"></title> + </head> + + <body> + <div class="new-banner vpn-banner hidden"> + <div class="banner-wrapper"> + <img + class="icon light" + src="chrome://browser/content/logos/vpn-light.svg" + /> + <img + class="icon dark" + src="chrome://browser/content/logos/vpn-dark.svg" + /> + <div class="wrapper"> + <div> + <h3 class="banner-title" data-l10n-id="vpn-banner-header"></h3> + <span class="content" data-l10n-id="vpn-banner-content"></span> + </div> + <a + target="_blank" + id="vpn-banner-link" + data-l10n-id="get-vpn-link" + ></a> + <button + class="exit-icon" + data-l10n-id="protections-close-button2" + ></button> + </div> + </div> + </div> + <div id="report-content"> + <h1 + id="report-title" + data-l10n-id="protection-report-page-content-title" + ></h1> + <p + id="report-summary" + data-l10n-id="protection-report-page-summary-default" + ></p> + <p + id="protection-settings" + data-l10n-id="protection-report-settings-link" + role="link" + tabindex="0" + ></p> + <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-always"></h2> + <p + id="etp-card-content" + class="content" + data-l10n-id="etp-card-content-description" + ></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/thumb-down.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/canvas.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/fingerprint.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-button2" + ></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://global/skin/icons/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"> + <a + target="_blank" + id="monitor-stored-emails-link" + data-l10n-id="monitor-emails-tooltip" + > + <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> + </a> + </div> + <div class="monitor-block breaches"> + <a + target="_blank" + id="monitor-known-breaches-link" + data-l10n-id="monitor-breaches-tooltip" + > + <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> + </a> + </div> + <div class="monitor-block passwords"> + <a + target="_blank" + id="monitor-exposed-passwords-link" + data-l10n-id="monitor-passwords-tooltip" + > + <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> + </a> + </div> + </div> + <div class="monitor-breaches-wrapper"> + <div class="monitor-breaches-header"> + <img id="monitor-breaches-icon" /> + <span id="monitor-breaches-title" /> + </div> + <div class="monitor-breaches-description-wrapper"> + <span + id="monitor-breaches-description" + class="content" + ></span> + <div class="monitor-breaches-link-wrapper"> + <a id="monitor-breaches-link" target="_blank"></a> + </div> + </div> + </div> + <div class="monitor-partial-breaches-wrapper"> + <div class="monitor-partial-breaches-header"> + <img + id="monitor-partial-breaches-icon" + src="chrome://browser/skin/protections/resolved-breach-gray.svg" + /> + <span id="monitor-partial-breaches-title"></span> + <span id="monitor-partial-breaches-percentage"></span> + </div> + <progress class="progress-bar" max="100"></progress> + <div class="monitor-partial-breaches-motivation-text"> + <span id="monitor-partial-breaches-motivation-title"></span> + <div class="monitor-partial-breaches-motivation-wrapper"> + <span + id="monitor-partial-breaches-motivation-desc" + class="content" + data-l10n-id="monitor-partial-breaches-motivation-description" + ></span> + <div class="monitor-partial-breaches-link-wrapper"> + <a + id="monitor-partial-breaches-link" + target="_blank" + data-l10n-id="monitor-resolve-breaches-link" + ></a> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </section> + <!-- Markup for passwords 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"> + <span> + <!-- Insert Lockwise header content here. --> + </span> + <a + target="_blank" + id="lockwise-how-it-works" + data-l10n-id="lockwise-how-it-works-link" + href="" + ></a> + </p> + </div> + <button + id="save-passwords-button" + class="primary" + data-l10n-id="protection-report-passwords-save-passwords-button" + ></button> + <div class="lockwise-scanned-wrapper"> + <img id="lockwise-scanned-icon" /> + <span id="lockwise-scanned-text" class="content"> + <!-- Display message for stored logins here. --> + </span> + </div> + <button + id="manage-passwords-button" + class="primary" + data-l10n-id="protection-report-passwords-manage-passwords-button" + ></button> + </div> + </div> + <!-- <div class="card-body hidden"> + <div id="lockwise-body-content" class="body-wrapper"> + <div class="no-logins hidden"> + </div> + </div> + </div> --> + </section> + <!-- Markup for Proxy card --> + <section class="card card-no-hover proxy-card hidden"> + <div class="card-header"> + <img + class="icon light" + src="chrome://browser/content/logos/proxy-light.svg" + /> + <img + class="icon dark" + src="chrome://browser/content/logos/proxy-dark.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> + + <section class="card card-no-hover vpn-card hidden"> + <div class="card-header"> + <img + class="icon light" + src="chrome://browser/content/logos/vpn-light.svg" + /> + <img + class="icon dark" + src="chrome://browser/content/logos/vpn-dark.svg" + /> + <div class="wrapper"> + <div> + <div class="title-wrapper"> + <img + id="check-icon" + src="chrome://browser/skin/protections/resolved-breach.svg" + /> + <h3 class="card-title" data-l10n-id="vpn-title"></h3> + </div> + <p class="content" data-l10n-id="vpn-header-content"></p> + <p + class="content subscribed" + data-l10n-id="vpn-header-content-subscribed" + > + <a + target="_blank" + id="vpn-google-playstore-link" + data-l10n-name="vpn-google-playstore-link" + ></a> + <a + target="_blank" + id="vpn-app-store-link" + data-l10n-name="vpn-app-store-link" + ></a> + </p> + </div> + <a + target="_blank" + id="get-vpn-link" + data-l10n-id="get-vpn-link" + ></a> + </div> + </div> + </section> + </div> + </body> +</html> |