зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1559418 - Create a base card for Firefox Lockwise. r=ewright
Differential Revision: https://phabricator.services.mozilla.com/D37004 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Родитель
1190fb0269
Коммит
7a5967aca6
|
@ -0,0 +1,11 @@
|
|||
<!-- 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/. -->
|
||||
<svg data-name="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M19.14 25v-1.11a.56.56 0 0 0-.56-.56H18V13.14A1.13 1.13 0 0 0 16.88 12H3.29a1.12 1.12 0 0 0-1.13 1.13v10.2h-.57a.57.57 0 0 0-.57.56V25a.58.58 0 0 0 .57.57h17a.57.57 0 0 0 .55-.57zm-6.79-.57H7.82v-1.1h4.53zm3.39-2.26H4.42v-7.9h11.32z"/>
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M32.7 20h-9.35A2.33 2.33 0 0 0 21 22.34v14a2.34 2.34 0 0 0 2.33 2.33h9.37a2.33 2.33 0 0 0 2.3-2.32v-14A2.32 2.32 0 0 0 32.7 20zm-3.51 17.5h-2.33v-1.16h2.33zm3.5-2.91a.58.58 0 0 1-.58.58h-8.17a.58.58 0 0 1-.58-.58V22.92a.58.58 0 0 1 .58-.58h8.17a.58.58 0 0 1 .58.58z"/>
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M11.72 9.16A1.07 1.07 0 0 0 13 8.29a3.83 3.83 0 0 1 4.78-3 1.07 1.07 0 0 0 .36-2.11 5.9 5.9 0 0 0-7.25 4.79 1.07 1.07 0 0 0 .83 1.19z"/>
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M38.13 14.17a1.07 1.07 0 1 0-1.48 1.54 3.83 3.83 0 0 1-.16 5.67 1.07 1.07 0 0 0 1.06 1.77 1.12 1.12 0 0 0 .49-.29 5.9 5.9 0 0 0 .09-8.69z"/>
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M17.88 31.65a3.81 3.81 0 0 1-5-2.6 1.07 1.07 0 1 0-2 .75 5.82 5.82 0 0 0 4.71 4.2 6.73 6.73 0 0 0 .88.06 6.62 6.62 0 0 0 2.15-.35 1.06 1.06 0 0 0 .63-1.37 1.07 1.07 0 0 0-1.37-.69z"/>
|
||||
<path fill="context-fill" fill-opacity="context-fill-opacity" d="M32.55 4.53a4.47 4.47 0 0 0-4.32 3.36h-8a1.12 1.12 0 0 0 0 2.24v1.12a1.12 1.12 0 1 0 2.24 0v-1.12h1.13v1.12a1.12 1.12 0 1 0 2.23 0v-1.12h2.4a4.47 4.47 0 1 0 4.32-5.6zm0 6.72A2.24 2.24 0 1 1 34.79 9a2.24 2.24 0 0 1-2.24 2.25z"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.8 KiB |
Различия файлов скрыты, потому что одна или несколько строк слишком длинны
После Ширина: | Высота: | Размер: 5.6 KiB |
|
@ -18,6 +18,8 @@ const kESModuleList = new Set([
|
|||
/browser\/res\/payments\/PaymentsStore\.js$/,
|
||||
/browser\/aboutlogins\/components\/.*\.js$/,
|
||||
/browser\/aboutlogins\/.*\.js$/,
|
||||
/browser\/protections.js$/,
|
||||
/browser\/lockwise-card.js$/,
|
||||
]);
|
||||
|
||||
// Normally we would use reflect.jsm to get Reflect.parse. However, if
|
||||
|
|
|
@ -19,6 +19,8 @@ browser.jar:
|
|||
content/browser/illustrations/error-malformed-url.svg (content/illustrations/error-malformed-url.svg)
|
||||
content/browser/illustrations/under-construction.svg (content/illustrations/under-construction.svg)
|
||||
content/browser/illustrations/blue-berror.svg (content/illustrations/blue-berror.svg)
|
||||
content/browser/logos/lockwise.svg (content/logos/lockwise.svg)
|
||||
content/browser/logos/lockwise-mobile-app.svg (content/logos/lockwise-mobile-app.svg)
|
||||
content/browser/aboutNetError.xhtml (content/aboutNetError.xhtml)
|
||||
content/browser/aboutNetError.js (content/aboutNetError.js)
|
||||
content/browser/aboutRobots-icon.png (content/aboutRobots-icon.png)
|
||||
|
|
|
@ -11,6 +11,8 @@ const { XPCOMUtils } = ChromeUtils.import(
|
|||
const { RemotePages } = ChromeUtils.import(
|
||||
"resource://gre/modules/remotepagemanager/RemotePageManagerParent.jsm"
|
||||
);
|
||||
const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
|
||||
|
||||
XPCOMUtils.defineLazyServiceGetter(
|
||||
this,
|
||||
"TrackingDBService",
|
||||
|
@ -27,7 +29,13 @@ let idToTextMap = new Map([
|
|||
|
||||
var AboutProtectionsHandler = {
|
||||
_inited: false,
|
||||
_topics: ["OpenContentBlockingPreferences", "FetchContentBlockingEvents"],
|
||||
_topics: [
|
||||
"OpenAboutLogins",
|
||||
"OpenContentBlockingPreferences",
|
||||
"OpenSyncPreferences",
|
||||
"FetchContentBlockingEvents",
|
||||
"FetchUserLoginsData",
|
||||
],
|
||||
|
||||
init() {
|
||||
this.receiveMessage = this.receiveMessage.bind(this);
|
||||
|
@ -48,14 +56,39 @@ var AboutProtectionsHandler = {
|
|||
this.pageListener.destroy();
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieves login data for the user.
|
||||
*
|
||||
* @return {{ isLoggedIn: Boolean,
|
||||
* numberOfLogins: Number,
|
||||
* numberOfSyncedDevices: Number }}
|
||||
* The login data.
|
||||
*/
|
||||
getLoginData() {
|
||||
const logins = Services.logins.countLogins("", "", "");
|
||||
|
||||
const isLoggedIn = logins > 0;
|
||||
return {
|
||||
isLoggedIn,
|
||||
numberOfLogins: logins,
|
||||
numberOfSyncedDevices: 0,
|
||||
};
|
||||
},
|
||||
|
||||
receiveMessage(aMessage) {
|
||||
let win = aMessage.target.browser.ownerGlobal;
|
||||
switch (aMessage.name) {
|
||||
case "OpenAboutLogins":
|
||||
win.openTrustedLinkIn("about:logins", "tab");
|
||||
break;
|
||||
case "OpenContentBlockingPreferences":
|
||||
win.openPreferences("privacy-trackingprotection", {
|
||||
origin: "about-protections",
|
||||
});
|
||||
break;
|
||||
case "OpenSyncPreferences":
|
||||
win.openTrustedLinkIn("about:preferences#sync", "tab");
|
||||
break;
|
||||
case "FetchContentBlockingEvents":
|
||||
TrackingDBService.getEventsByDateRange(
|
||||
aMessage.data.from,
|
||||
|
@ -85,6 +118,12 @@ var AboutProtectionsHandler = {
|
|||
}
|
||||
});
|
||||
break;
|
||||
case "FetchUserLoginsData":
|
||||
aMessage.target.sendAsyncMessage(
|
||||
"SendUserLoginsData",
|
||||
this.getLoginData()
|
||||
);
|
||||
break;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
"use strict";
|
||||
|
||||
module.exports = {
|
||||
parserOptions: {
|
||||
sourceType: "module",
|
||||
},
|
||||
};
|
|
@ -0,0 +1,106 @@
|
|||
/* 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/. */
|
||||
|
||||
/* eslint-env mozilla/frame-script */
|
||||
|
||||
export default class LockwiseCard {
|
||||
constructor(document) {
|
||||
this.doc = document;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes message listeners/senders.
|
||||
*/
|
||||
init() {
|
||||
const openAboutLoginsButton = this.doc.getElementById(
|
||||
"open-about-logins-button"
|
||||
);
|
||||
openAboutLoginsButton.addEventListener("click", () => {
|
||||
RPMSendAsyncMessage("OpenAboutLogins");
|
||||
});
|
||||
|
||||
const syncLink = this.doc.querySelector(".synced-devices-text a");
|
||||
// Register a click handler for the anchor since it's not possible to navigate to about:preferences via href
|
||||
syncLink.addEventListener("click", () => {
|
||||
RPMSendAsyncMessage("OpenSyncPreferences");
|
||||
});
|
||||
|
||||
RPMAddMessageListener("SendUserLoginsData", ({ data }) => {
|
||||
// Once browser data for the user is retrieved, display it on the card's body
|
||||
// section.
|
||||
this.buildContent(data);
|
||||
});
|
||||
|
||||
// Dispatch messages to retrieve data for the Lockwise card.
|
||||
RPMSendAsyncMessage("FetchUserLoginsData");
|
||||
}
|
||||
|
||||
buildContent(data) {
|
||||
const { isLoggedIn, numberOfLogins, numberOfSyncedDevices } = data;
|
||||
const title = this.doc.getElementById("lockwise-title");
|
||||
const headerContent = this.doc.getElementById("lockwise-header-content");
|
||||
const lockwiseBodyContent = this.doc.getElementById(
|
||||
"lockwise-body-content"
|
||||
);
|
||||
|
||||
// Get the container for the content to display.
|
||||
const container = isLoggedIn
|
||||
? lockwiseBodyContent.querySelector(".has-logins")
|
||||
: lockwiseBodyContent.querySelector(".no-logins");
|
||||
// Display the content
|
||||
container.classList.remove("hidden");
|
||||
|
||||
if (isLoggedIn) {
|
||||
title.textContent = "Firefox Lockwise";
|
||||
headerContent.textContent =
|
||||
"Securely store and sync your passwords to all your devices.";
|
||||
this.renderContentForLoggedInUser(
|
||||
container,
|
||||
numberOfLogins,
|
||||
numberOfSyncedDevices
|
||||
);
|
||||
} else {
|
||||
title.textContent = "Never forget a password again";
|
||||
headerContent.textContent =
|
||||
"Firefox Lockwise securely stores your passwords in your browser.";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays the number of stored logins and synced devices for a user.
|
||||
*
|
||||
* @param {Element} container
|
||||
* The containing element for the content.
|
||||
* @param {Number} storedLogins
|
||||
* The number of browser-stored logins.
|
||||
* @param {Number} syncedDevices
|
||||
* The number of synced devices.
|
||||
*/
|
||||
renderContentForLoggedInUser(container, storedLogins, syncedDevices) {
|
||||
// Set the text for number of stored logins.
|
||||
const numberOfLoginsBlock = container.querySelector(
|
||||
".number-of-logins.block"
|
||||
);
|
||||
numberOfLoginsBlock.textContent = storedLogins;
|
||||
|
||||
// Set the text for the number of synced devices.
|
||||
const syncedDevicesBlock = container.querySelector(
|
||||
".number-of-synced-devices.block"
|
||||
);
|
||||
syncedDevicesBlock.textContent = syncedDevices;
|
||||
|
||||
const syncedDevicesText = container.querySelector(".synced-devices-text");
|
||||
const textEl = syncedDevicesText.querySelector("span");
|
||||
textEl.textContent =
|
||||
syncedDevices > 0
|
||||
? `Syncing to ${syncedDevices} other devices.`
|
||||
: "Not syncing to other devices.";
|
||||
|
||||
// Display the link for enabling sync if no synced devices are detected.
|
||||
if (syncedDevices === 0) {
|
||||
const syncLink = syncedDevicesText.querySelector("a");
|
||||
syncLink.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
}
|
|
@ -15,13 +15,29 @@
|
|||
--cookie-color-darker: #0073C3;
|
||||
--tracker-color: #2AC3A2;
|
||||
--tracker-color-darker: #229C82;
|
||||
--fingerprinter-color: #FFBD4F;
|
||||
--fingerprinter-color-darker: #ffA40C;
|
||||
--cryptominer-color: #AFAFBB;
|
||||
--cryptominer-color-darker: #88889A;
|
||||
--orange: #FFBD4F;
|
||||
--dark-orange: #ffA40C;
|
||||
--grey: #AFAFBB;
|
||||
--dark-grey: #88889A;
|
||||
--tab-highlight: var(--social-color); /* start with social selected */
|
||||
--blue-60: #0060DF;
|
||||
--blue-70: #003eaa;
|
||||
--blue-80: #002275;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--blue-60);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: var(--blue-70);
|
||||
}
|
||||
|
||||
a:hover, a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--report-background);
|
||||
font: message-box;
|
||||
|
@ -41,11 +57,11 @@ body[focuseddatatype=tracker] {
|
|||
}
|
||||
|
||||
body[focuseddatatype=fingerprinter] {
|
||||
--tab-highlight: var(--fingerprinter-color);
|
||||
--tab-highlight: var(--orange);
|
||||
}
|
||||
|
||||
body[focuseddatatype=cryptominer] {
|
||||
--tab-highlight: var(--cryptominer-color);
|
||||
--tab-highlight: var(--grey);
|
||||
}
|
||||
|
||||
#report-title {
|
||||
|
@ -59,14 +75,46 @@ body[focuseddatatype=cryptominer] {
|
|||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.etp-card .icon {
|
||||
.card-header button {
|
||||
font-size: 0.95rem;
|
||||
background-color: var(--blue-60);
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
margin-inline-end: 15px;
|
||||
margin-inline-start: 15px;
|
||||
padding: 10px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.card-header button:hover {
|
||||
background-color: var(--blue-70);
|
||||
}
|
||||
|
||||
.card-header button:active {
|
||||
background-color: var(--blue-80);
|
||||
}
|
||||
|
||||
.report-card.lockwise-card .card-header {
|
||||
grid-template-columns: 2fr 6fr 7fr;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: url("chrome://browser/skin/controlcenter/tracking-protection.svg") no-repeat center/cover;
|
||||
grid-column: 1;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.etp-card .icon {
|
||||
background: url("chrome://browser/skin/controlcenter/tracking-protection.svg") no-repeat center/cover;
|
||||
}
|
||||
|
||||
.lockwise-card .icon {
|
||||
background: url("chrome://browser/content/logos/lockwise.svg") no-repeat center/cover;
|
||||
}
|
||||
|
||||
.report-card {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
|
@ -74,6 +122,7 @@ body[focuseddatatype=cryptominer] {
|
|||
border-radius: 3px;
|
||||
background-color: var(--card-background);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.report-card .card-header,
|
||||
|
@ -189,19 +238,19 @@ body[focuseddatatype=cryptominer] {
|
|||
}
|
||||
|
||||
.fingerprinter-bar {
|
||||
background-color: var(--fingerprinter-color);
|
||||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
.hover-fingerprinter .fingerprinter-bar {
|
||||
background-color: var(--fingerprinter-color-darker);
|
||||
background-color: var(--dark-orange);
|
||||
}
|
||||
|
||||
.cryptominer-bar {
|
||||
background-color: var(--cryptominer-color);
|
||||
background-color: var(--grey);
|
||||
}
|
||||
|
||||
.hover-cryptominer .cryptominer-bar {
|
||||
background-color: var(--cryptominer-color-darker);
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.column-label {
|
||||
|
@ -247,14 +296,14 @@ label[data-type="tracker"] {
|
|||
|
||||
label[data-type="fingerprinter"] {
|
||||
background-image: url(chrome://browser/skin/controlcenter/fingerprinters.svg);
|
||||
fill: var(--fingerprinter-color);
|
||||
color: var(--fingerprinter-color);
|
||||
fill: var(--orange);
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
label[data-type="cryptominer"] {
|
||||
background-image: url(chrome://browser/skin/controlcenter/cryptominers.svg);
|
||||
fill: var(--cryptominer-color);
|
||||
color: var(--cryptominer-color);
|
||||
fill: var(--grey);
|
||||
color: var(--grey);
|
||||
}
|
||||
|
||||
.hover-social label[for="tab-social"],
|
||||
|
@ -297,3 +346,76 @@ label:hover {
|
|||
#tab-cryptominer:checked ~ #cryptominer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Lockwise Card */
|
||||
|
||||
#lockwise-body-content > .no-logins,
|
||||
#lockwise-body-content > .has-logins {
|
||||
display: grid;
|
||||
font-size: 0.875rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#lockwise-body-content > .no-logins {
|
||||
grid: 1fr / 50px 275px;
|
||||
grid-gap: none;
|
||||
}
|
||||
|
||||
#lockwise-body-content > .has-logins {
|
||||
grid: 1fr 1fr / minmax(70px, auto) 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
a.hidden,
|
||||
#lockwise-body-content .has-logins.hidden,
|
||||
#lockwise-body-content .no-logins.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.number-of-logins {
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
||||
.number-of-synced-devices {
|
||||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
.lockwise-text-icon {
|
||||
background-size: 16px 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 3px;
|
||||
background-position-y: 5px;
|
||||
padding: 4px 4px 4px 24px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.lockwise-mobile-app-icon {
|
||||
background: url("chrome://browser/content/logos/lockwise-mobile-app.svg") no-repeat center/cover;
|
||||
width: 38px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.passwords-stored-text {
|
||||
background-image: url("chrome://browser/skin/login.svg");
|
||||
}
|
||||
|
||||
.synced-devices-text {
|
||||
background-image: url("chrome://browser/skin/sync.svg");
|
||||
}
|
||||
|
||||
.non-logged-in-user-content {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.block {
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 1.125rem;
|
||||
color: var(--card-background);
|
||||
padding: 7px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.has-logins a {
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
|
|
@ -10,7 +10,8 @@
|
|||
<link rel="stylesheet" type="text/css"
|
||||
href="chrome://browser/content/protections.css">
|
||||
<link rel="icon" href="chrome://global/skin/icons/warning.svg">
|
||||
<script type="text/javascript" src="chrome://browser/content/protections.js"></script>
|
||||
<script type="module" src="chrome://browser/content/protections.js"></script>
|
||||
<script type="module" src="chrome://browser/content/lockwise-card.js"></script>
|
||||
<title>Protection Report</title>
|
||||
</head>
|
||||
|
||||
|
@ -83,6 +84,51 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Markup for Lockwise card. -->
|
||||
<section class="report-card lockwise-card">
|
||||
<div class="card-header">
|
||||
<div class="icon"></div>
|
||||
<div class="wrapper">
|
||||
<h3 id="lockwise-title" class="card-title">
|
||||
<!-- Insert Lockwise card title here. -->
|
||||
</h3>
|
||||
<p id="lockwise-header-content" class="content">
|
||||
<!-- Insert Lockwise header content here. -->
|
||||
</p>
|
||||
</div>
|
||||
<button id="open-about-logins-button">Open in Firefox</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="lockwise-body-content" class="body-wrapper">
|
||||
<div class="no-logins hidden">
|
||||
<div class="lockwise-mobile-app-icon"></div>
|
||||
<span>
|
||||
Get the <a target="_blank" href="https://lockwise.firefox.com/">Firefox Lockwise</a>
|
||||
app to take your passwords everywhere.
|
||||
</span>
|
||||
</div>
|
||||
<div class="has-logins hidden">
|
||||
<span class="number-of-logins block">
|
||||
<!-- Display number of stored logins here. -->
|
||||
</span>
|
||||
<span class="lockwise-text-icon passwords-stored-text">
|
||||
Passwords stored securely.
|
||||
<a href="">How it works</a>
|
||||
</span>
|
||||
<span class="number-of-synced-devices block">
|
||||
<!-- Display number of synced devices here. -->
|
||||
</span>
|
||||
<span class="lockwise-text-icon synced-devices-text">
|
||||
<span>
|
||||
<!-- Display message for status of synced devices here. -->
|
||||
</span>
|
||||
<a class="hidden" href="" title="Go to sync preferences">Turn on sync…</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,6 +4,8 @@
|
|||
|
||||
/* eslint-env mozilla/frame-script */
|
||||
|
||||
import LockwiseCard from "./lockwise-card.js";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", e => {
|
||||
let todayInMs = Date.now();
|
||||
let weekAgoInMs = todayInMs - 7 * 24 * 60 * 60 * 1000;
|
||||
|
@ -107,4 +109,8 @@ document.addEventListener("DOMContentLoaded", e => {
|
|||
RPMAddMessageListener("SendContentBlockingRecords", message => {
|
||||
createGraph(message.data);
|
||||
});
|
||||
|
||||
// Create the Lockwise card.
|
||||
const lockwiseCard = new LockwiseCard(document);
|
||||
lockwiseCard.init();
|
||||
});
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
browser.jar:
|
||||
content/browser/lockwise-card.js (content/lockwise-card.js)
|
||||
content/browser/protections.css (content/protections.css)
|
||||
content/browser/protections.html (content/protections.html)
|
||||
content/browser/protections.js (content/protections.js)
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
[DEFAULT]
|
||||
support-files =
|
||||
head.js
|
||||
!/browser/base/content/test/trackingUI/trackingPage.html
|
||||
|
||||
[browser_protections_lockwise.js]
|
||||
[browser_protections_report_ui.js]
|
||||
|
|
|
@ -0,0 +1,102 @@
|
|||
/* 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/. */
|
||||
|
||||
"use strict";
|
||||
|
||||
const nsLoginInfo = new Components.Constructor(
|
||||
"@mozilla.org/login-manager/loginInfo;1",
|
||||
Ci.nsILoginInfo,
|
||||
"init"
|
||||
);
|
||||
|
||||
const TEST_LOGIN1 = new nsLoginInfo(
|
||||
"https://example.com/",
|
||||
"https://example.com/",
|
||||
null,
|
||||
"user1",
|
||||
"pass1",
|
||||
"username",
|
||||
"password"
|
||||
);
|
||||
|
||||
const TEST_LOGIN2 = new nsLoginInfo(
|
||||
"https://2.example.com/",
|
||||
"https://2.example.com/",
|
||||
null,
|
||||
"user2",
|
||||
"pass2",
|
||||
"username",
|
||||
"password"
|
||||
);
|
||||
|
||||
add_task(async function() {
|
||||
let tab = await BrowserTestUtils.openNewForegroundTab({
|
||||
url: "about:protections",
|
||||
gBrowser,
|
||||
});
|
||||
|
||||
info("Check that the correct content is displayed for non-logged in users.");
|
||||
await ContentTask.spawn(tab.linkedBrowser, {}, function() {
|
||||
const noLoginsContent = content.document.querySelector(
|
||||
"#lockwise-body-content .no-logins"
|
||||
);
|
||||
const hasLoginsContent = content.document.querySelector(
|
||||
"#lockwise-body-content .has-logins"
|
||||
);
|
||||
|
||||
ok(
|
||||
ContentTaskUtils.is_visible(noLoginsContent),
|
||||
"Content for user with no logins is shown."
|
||||
);
|
||||
ok(
|
||||
ContentTaskUtils.is_hidden(hasLoginsContent),
|
||||
"Content for user with logins is hidden."
|
||||
);
|
||||
});
|
||||
|
||||
info("Add a login and check that content for a logged in user is displayed.");
|
||||
Services.logins.addLogin(TEST_LOGIN1);
|
||||
await reloadTab(tab);
|
||||
|
||||
await ContentTask.spawn(tab.linkedBrowser, {}, function() {
|
||||
const noLoginsContent = content.document.querySelector(
|
||||
"#lockwise-body-content .no-logins"
|
||||
);
|
||||
const hasLoginsContent = content.document.querySelector(
|
||||
"#lockwise-body-content .has-logins"
|
||||
);
|
||||
const numberOfLogins = hasLoginsContent.querySelector(
|
||||
".number-of-logins.block"
|
||||
);
|
||||
|
||||
ok(
|
||||
ContentTaskUtils.is_hidden(noLoginsContent),
|
||||
"Content for user with no logins is hidden."
|
||||
);
|
||||
ok(
|
||||
ContentTaskUtils.is_visible(hasLoginsContent),
|
||||
"Content for user with logins is shown."
|
||||
);
|
||||
is(numberOfLogins.textContent, 1, "One stored login should be displayed");
|
||||
});
|
||||
|
||||
info(
|
||||
"Add another login and check the number of stored logins is updated after reload."
|
||||
);
|
||||
Services.logins.addLogin(TEST_LOGIN2);
|
||||
await reloadTab(tab);
|
||||
|
||||
await ContentTask.spawn(tab.linkedBrowser, {}, function() {
|
||||
const numberOfLogins = content.document.querySelector(
|
||||
"#lockwise-body-content .has-logins .number-of-logins.block"
|
||||
);
|
||||
|
||||
is(numberOfLogins.textContent, 2, "Two stored logins should be displayed");
|
||||
});
|
||||
|
||||
// remove logins
|
||||
Services.logins.removeLogin(TEST_LOGIN1);
|
||||
Services.logins.removeLogin(TEST_LOGIN2);
|
||||
await BrowserTestUtils.removeTab(tab);
|
||||
});
|
|
@ -0,0 +1,13 @@
|
|||
/* 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/. */
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
|
||||
"use strict";
|
||||
|
||||
async function reloadTab(tab) {
|
||||
const tabReloaded = BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
|
||||
gBrowser.reloadTab(tab);
|
||||
await tabReloaded;
|
||||
}
|
Загрузка…
Ссылка в новой задаче