protections.html (21505B)
1 <!-- This Source Code Form is subject to the terms of the Mozilla Public 2 - License, v. 2.0. If a copy of the MPL was not distributed with this 3 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 4 5 <!doctype html> 6 <html> 7 <head> 8 <meta charset="utf-8" /> 9 <meta 10 http-equiv="Content-Security-Policy" 11 content="default-src chrome:; object-src 'none'" 12 /> 13 <meta name="color-scheme" content="light dark" /> 14 <link rel="localization" href="branding/brand.ftl" /> 15 <link rel="localization" href="browser/protections.ftl" /> 16 <link rel="localization" href="toolkit/branding/brandings.ftl" /> 17 <!-- Temporary "en-US"-only l10n strings --> 18 <link rel="localization" href="preview/protections.ftl" /> 19 <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" /> 20 <link rel="stylesheet" href="chrome://browser/content/protections.css" /> 21 <link rel="icon" href="chrome://browser/skin/controlcenter/dashboard.svg" /> 22 <script 23 type="module" 24 src="chrome://browser/content/protections.mjs" 25 ></script> 26 <title data-l10n-id="protection-report-webpage-title"></title> 27 </head> 28 29 <body> 30 <div class="new-banner vpn-banner hidden"> 31 <div class="banner-wrapper"> 32 <img class="icon" src="chrome://browser/content/logos/vpn.svg" /> 33 <div class="wrapper"> 34 <div> 35 <h3 class="banner-title" data-l10n-id="vpn-banner-header"></h3> 36 <span class="content" data-l10n-id="vpn-banner-content"></span> 37 </div> 38 <a 39 target="_blank" 40 id="vpn-banner-link" 41 data-l10n-id="get-vpn-link" 42 ></a> 43 <button 44 class="exit-icon" 45 data-l10n-id="protections-close-button2" 46 ></button> 47 </div> 48 </div> 49 </div> 50 <div id="report-content"> 51 <h1 52 id="report-title" 53 data-l10n-id="protection-report-page-content-title" 54 ></h1> 55 <p 56 id="report-summary" 57 data-l10n-id="protection-report-page-summary-default" 58 ></p> 59 <p 60 id="protection-settings" 61 data-l10n-id="protection-report-settings-link" 62 role="link" 63 tabindex="0" 64 ></p> 65 <div class="card card-no-hover etp-card"> 66 <div class="card-header"> 67 <img 68 class="icon light" 69 src="chrome://browser/content/logos/tracking-protection.svg" 70 /> 71 <img 72 class="icon dark" 73 src="chrome://browser/content/logos/tracking-protection-dark-theme.svg" 74 /> 75 <div class="wrapper"> 76 <div> 77 <h2 class="card-title" data-l10n-id="etp-card-title-always"></h2> 78 <p 79 id="etp-card-content" 80 class="content" 81 data-l10n-id="etp-card-content-description" 82 ></p> 83 </div> 84 <a 85 target="_blank" 86 id="manage-protections" 87 data-l10n-id="protection-report-manage-protections" 88 ></a> 89 </div> 90 </div> 91 <div class="card-body"> 92 <div class="body-wrapper"> 93 <p id="graph-week-summary"></p> 94 <div id="graph-wrapper"> 95 <div 96 id="graph" 97 role="table" 98 aria-labelledby="graphLegendDescription" 99 > 100 <div 101 id="private-window-message" 102 data-l10n-id="graph-private-window" 103 ></div> 104 </div> 105 <div id="legend"> 106 <label 107 id="graphLegendDescription" 108 data-l10n-id="graph-legend-description" 109 ></label> 110 <input 111 id="tab-social" 112 data-type="social" 113 type="radio" 114 name="tabs" 115 aria-labelledby="socialLabel socialTitle" 116 aria-describedby="socialContent" 117 checked 118 /> 119 <label id="socialLabel" for="tab-social" data-type="social"> 120 <img 121 class="icon-small" 122 src="chrome://browser/skin/thumb-down.svg" 123 data-type="social" 124 /> 125 <span data-type="social"></span> 126 </label> 127 128 <input 129 id="tab-cookie" 130 data-type="cookie" 131 type="radio" 132 name="tabs" 133 aria-labelledby="cookieLabel cookieTitle" 134 aria-describedby="cookieContent" 135 /> 136 <label id="cookieLabel" for="tab-cookie" data-type="cookie"> 137 <img 138 class="icon-small" 139 src="chrome://browser/skin/controlcenter/3rdpartycookies.svg" 140 data-type="cookie" 141 /> 142 <span data-type="cookie"></span> 143 </label> 144 145 <input 146 id="tab-tracker" 147 data-type="tracker" 148 type="radio" 149 name="tabs" 150 aria-labelledby="trackerLabel trackerTitle" 151 aria-describedby="trackerContent" 152 /> 153 <label id="trackerLabel" for="tab-tracker" data-type="tracker"> 154 <img 155 class="icon-small" 156 src="chrome://browser/skin/canvas.svg" 157 data-type="tracker" 158 /> 159 <span data-type="tracker"></span> 160 </label> 161 162 <input 163 id="tab-fingerprinter" 164 data-type="fingerprinter" 165 type="radio" 166 name="tabs" 167 aria-labelledby="fingerprinterLabel fingerprinterTitle" 168 aria-describedby="fingerprinterContent" 169 /> 170 <label 171 id="fingerprinterLabel" 172 for="tab-fingerprinter" 173 data-type="fingerprinter" 174 > 175 <img 176 class="icon-small" 177 src="chrome://browser/skin/fingerprint.svg" 178 data-type="fingerprinter" 179 /> 180 <span data-type="fingerprinter"></span> 181 </label> 182 183 <input 184 id="tab-cryptominer" 185 data-type="cryptominer" 186 type="radio" 187 name="tabs" 188 aria-labelledby="cryptominerLabel cryptominerTitle" 189 aria-describedby="cryptominerContent" 190 /> 191 <label 192 id="cryptominerLabel" 193 for="tab-cryptominer" 194 data-type="cryptominer" 195 > 196 <img 197 class="icon-small" 198 src="chrome://browser/skin/controlcenter/cryptominers.svg" 199 data-type="cryptominer" 200 /> 201 <span data-type="cryptominer"></span> 202 </label> 203 <div id="highlight"></div> 204 <div id="highlight-hover"></div> 205 <div id="social" class="tab-content"> 206 <p 207 id="socialTitle" 208 class="content-title" 209 data-l10n-id="social-tab-title" 210 ></p> 211 <p id="socialContent" data-l10n-id="social-tab-contant"> 212 <a 213 target="_blank" 214 id="social-link" 215 data-l10n-name="learn-more-link" 216 ></a> 217 </p> 218 </div> 219 <div id="cookie" class="tab-content"> 220 <p 221 id="cookieTitle" 222 class="content-title" 223 data-l10n-id="cookie-tab-title" 224 ></p> 225 <p id="cookieContent" data-l10n-id="cookie-tab-content"> 226 <a 227 target="_blank" 228 id="cookie-link" 229 data-l10n-name="learn-more-link" 230 ></a> 231 </p> 232 </div> 233 <div id="tracker" class="tab-content"> 234 <p 235 id="trackerTitle" 236 class="content-title" 237 data-l10n-id="tracker-tab-title" 238 ></p> 239 <p id="trackerContent" data-l10n-id="tracker-tab-description"> 240 <a 241 target="_blank" 242 id="tracker-link" 243 data-l10n-name="learn-more-link" 244 ></a> 245 </p> 246 </div> 247 <div id="fingerprinter" class="tab-content"> 248 <p 249 id="fingerprinterTitle" 250 class="content-title" 251 data-l10n-id="fingerprinter-tab-title" 252 ></p> 253 <p 254 id="fingerprinterContent" 255 data-l10n-id="fingerprinter-tab-content" 256 > 257 <a 258 target="_blank" 259 id="fingerprinter-link" 260 data-l10n-name="learn-more-link" 261 ></a> 262 </p> 263 </div> 264 <div id="cryptominer" class="tab-content"> 265 <p 266 id="cryptominerTitle" 267 class="content-title" 268 data-l10n-id="cryptominer-tab-title" 269 ></p> 270 <p 271 id="cryptominerContent" 272 data-l10n-id="cryptominer-tab-content" 273 > 274 <a 275 target="_blank" 276 id="cryptominer-link" 277 data-l10n-name="learn-more-link" 278 ></a> 279 </p> 280 </div> 281 </div> 282 </div> 283 <div id="graph-total-summary"></div> 284 </div> 285 </div> 286 <div id="mobile-hanger" class="card-body hidden"> 287 <div class="body-wrapper"> 288 <button 289 class="exit-icon" 290 data-l10n-id="protections-close-button2" 291 ></button> 292 <div id="etp-mobile-content"> 293 <img 294 class="mobile-app-icon" 295 src="chrome://browser/content/logos/etp-mobile.svg" 296 /> 297 <span> 298 <h2 class="card-title" data-l10n-id="mobile-app-title"></h2> 299 <p class="content"> 300 <span data-l10n-id="mobile-app-card-content"></span> 301 <span 302 target="_blank" 303 id="mobile-app-links" 304 data-l10n-id="mobile-app-links" 305 > 306 <a 307 target="_blank" 308 id="android-mobile-inline-link" 309 data-l10n-name="android-mobile-inline-link" 310 href="" 311 ></a> 312 <a 313 target="_blank" 314 id="ios-mobile-inline-link" 315 data-l10n-name="ios-mobile-inline-link" 316 href="" 317 ></a> 318 </span> 319 </p> 320 </span> 321 </div> 322 </div> 323 </div> 324 </div> 325 <!-- Markup for Monitor card. --> 326 <section class="card card-no-hover monitor-card hidden"> 327 <div class="card-header"> 328 <img class="icon" src="chrome://browser/content/logos/monitor.svg" /> 329 <div class="wrapper"> 330 <div> 331 <h2 332 id="monitor-title" 333 class="card-title" 334 data-l10n-id="monitor-title" 335 ></h2> 336 <p id="monitor-header-content" class="content"> 337 <span> 338 <!-- Insert Monitor header content here. --> 339 </span> 340 <a 341 target="_blank" 342 href="" 343 id="monitor-link" 344 data-l10n-id="monitor-link" 345 ></a> 346 </p> 347 <div class="monitor-scanned-wrapper"> 348 <img 349 class="icon-small" 350 src="chrome://global/skin/icons/reload.svg" 351 /> 352 <span 353 class="monitor-scanned-text" 354 data-l10n-id="auto-scan" 355 ></span> 356 </div> 357 </div> 358 <a target="_blank" id="sign-up-for-monitor-link"> 359 <!-- Insert Monitor link content here. --> 360 </a> 361 </div> 362 </div> 363 <div class="card-body"> 364 <div class="body-wrapper"> 365 <div id="monitor-body-content"> 366 <div class="monitor-info-wrapper"> 367 <div class="monitor-block email"> 368 <a 369 target="_blank" 370 id="monitor-stored-emails-link" 371 data-l10n-id="monitor-emails-tooltip" 372 > 373 <span class="monitor-stat"> 374 <img 375 class="icon-med" 376 src="chrome://browser/skin/mail.svg" 377 /> 378 <span data-type="stored-emails"> 379 <!-- Display number of stored emails here. --> 380 </span> 381 </span> 382 <span 383 id="info-monitored-addresses" 384 class="info-text" 385 ></span> 386 </a> 387 </div> 388 <div class="monitor-block breaches"> 389 <a 390 target="_blank" 391 id="monitor-known-breaches-link" 392 data-l10n-id="monitor-breaches-tooltip" 393 > 394 <span class="monitor-stat"> 395 <img 396 class="icon-med" 397 src="chrome://browser/skin/fxa/avatar.svg" 398 /> 399 <span data-type="known-breaches"> 400 <!-- Display number of known breaches here. --> 401 </span> 402 </span> 403 <span id="info-known-breaches" class="info-text"></span> 404 </a> 405 </div> 406 <div class="monitor-block passwords"> 407 <a 408 target="_blank" 409 id="monitor-exposed-passwords-link" 410 data-l10n-id="monitor-passwords-tooltip" 411 > 412 <span class="monitor-stat"> 413 <img 414 class="icon-med" 415 src="chrome://browser/skin/login.svg" 416 /> 417 <span data-type="exposed-passwords"> 418 <!-- Display number of exposed passwords here. --> 419 </span> 420 </span> 421 <span id="info-exposed-passwords" class="info-text"></span> 422 </a> 423 </div> 424 </div> 425 <div class="monitor-breaches-wrapper"> 426 <div class="monitor-breaches-header"> 427 <img id="monitor-breaches-icon" /> 428 <span id="monitor-breaches-title" /> 429 </div> 430 <div class="monitor-breaches-description-wrapper"> 431 <span 432 id="monitor-breaches-description" 433 class="content" 434 ></span> 435 <div class="monitor-breaches-link-wrapper"> 436 <a id="monitor-breaches-link" target="_blank"></a> 437 </div> 438 </div> 439 </div> 440 <div class="monitor-partial-breaches-wrapper"> 441 <div class="monitor-partial-breaches-header"> 442 <img 443 id="monitor-partial-breaches-icon" 444 src="chrome://browser/skin/protections/resolved-breach-gray.svg" 445 /> 446 <span id="monitor-partial-breaches-title"></span> 447 <span id="monitor-partial-breaches-percentage"></span> 448 </div> 449 <progress class="progress-bar" max="100"></progress> 450 <div class="monitor-partial-breaches-motivation-text"> 451 <span id="monitor-partial-breaches-motivation-title"></span> 452 <div class="monitor-partial-breaches-motivation-wrapper"> 453 <span 454 id="monitor-partial-breaches-motivation-desc" 455 class="content" 456 data-l10n-id="monitor-partial-breaches-motivation-description" 457 ></span> 458 <div class="monitor-partial-breaches-link-wrapper"> 459 <a 460 id="monitor-partial-breaches-link" 461 target="_blank" 462 data-l10n-id="monitor-resolve-breaches-link" 463 ></a> 464 </div> 465 </div> 466 </div> 467 </div> 468 </div> 469 </div> 470 </div> 471 </section> 472 <!-- Markup for passwords card. --> 473 <section class="card card-no-hover lockwise-card hidden"> 474 <div class="card-header"> 475 <img class="icon" src="chrome://browser/content/logos/lockwise.svg" /> 476 <div class="wrapper"> 477 <div> 478 <h2 id="lockwise-title" class="card-title"> 479 <!-- Insert Lockwise card title here. --> 480 </h2> 481 <p id="lockwise-header-content" class="content"> 482 <span> 483 <!-- Insert Lockwise header content here. --> 484 </span> 485 <a 486 target="_blank" 487 id="lockwise-how-it-works" 488 data-l10n-id="lockwise-how-it-works-link" 489 href="" 490 ></a> 491 </p> 492 </div> 493 <button 494 id="save-passwords-button" 495 class="primary" 496 data-l10n-id="protection-report-passwords-save-passwords-button" 497 ></button> 498 <div class="lockwise-scanned-wrapper"> 499 <img id="lockwise-scanned-icon" /> 500 <span id="lockwise-scanned-text" class="content"> 501 <!-- Display message for stored logins here. --> 502 </span> 503 </div> 504 <button 505 id="manage-passwords-button" 506 class="primary" 507 data-l10n-id="protection-report-passwords-manage-passwords-button" 508 ></button> 509 </div> 510 </div> 511 <!-- <div class="card-body hidden"> 512 <div id="lockwise-body-content" class="body-wrapper"> 513 <div class="no-logins hidden"> 514 </div> 515 </div> 516 </div> --> 517 </section> 518 <!-- Markup for Proxy card --> 519 <section class="card card-no-hover proxy-card hidden"> 520 <div class="card-header"> 521 <img 522 class="icon light" 523 src="chrome://browser/content/logos/proxy-light.svg" 524 /> 525 <img 526 class="icon dark" 527 src="chrome://browser/content/logos/proxy-dark.svg" 528 /> 529 <div class="wrapper"> 530 <div> 531 <h3 class="card-title" data-l10n-id="proxy-title"></h3> 532 <p class="content" data-l10n-id="proxy-header-content"></p> 533 </div> 534 <a 535 target="_blank" 536 id="get-proxy-extension-link" 537 data-l10n-id="get-proxy-extension-link" 538 ></a> 539 </div> 540 </div> 541 </section> 542 543 <section class="card card-no-hover vpn-card hidden"> 544 <div class="card-header"> 545 <img class="icon" src="chrome://browser/content/logos/vpn.svg" /> 546 <div class="wrapper"> 547 <div> 548 <div class="title-wrapper"> 549 <img 550 id="check-icon" 551 src="chrome://browser/skin/protections/resolved-breach.svg" 552 /> 553 <h3 class="card-title" data-l10n-id="vpn-title"></h3> 554 </div> 555 <p class="content" data-l10n-id="vpn-header-content"></p> 556 <p 557 class="content subscribed" 558 data-l10n-id="vpn-header-content-subscribed" 559 > 560 <a 561 target="_blank" 562 id="vpn-google-playstore-link" 563 data-l10n-name="vpn-google-playstore-link" 564 ></a> 565 <a 566 target="_blank" 567 id="vpn-app-store-link" 568 data-l10n-name="vpn-app-store-link" 569 ></a> 570 </p> 571 </div> 572 <a 573 target="_blank" 574 id="get-vpn-link" 575 data-l10n-id="get-vpn-link" 576 ></a> 577 </div> 578 </div> 579 </section> 580 </div> 581 </body> 582 </html>