зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1559422 - Create base Monitor card. r=ewright
Differential Revision: https://phabricator.services.mozilla.com/D37992 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Micah Tigley
Родитель
226cdbc467
Коммит
c1640d7f9e
|
|
@ -1610,6 +1610,9 @@ pref("browser.contentblocking.reportBreakage.url", "https://tracking-protection-
|
|||
// Enable Protections report's Lockwise card by default.
|
||||
pref("browser.contentblocking.report.lockwise.enabled", true);
|
||||
|
||||
// Enable Protections report's Monitor card by default.
|
||||
pref("browser.contentblocking.report.monitor.enabled", true);
|
||||
|
||||
// Enables the new Protections Panel.
|
||||
#ifdef NIGHTLY_BUILD
|
||||
pref("browser.protections_panel.enabled", true);
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="44.39" x2="17.83" y1="55.11" y2="9.1"><stop offset="0" stop-color="#ff980e"/><stop offset=".21" stop-color="#ff7139"/><stop offset=".36" stop-color="#ff5854"/><stop offset=".46" stop-color="#ff4f5e"/><stop offset=".69" stop-color="#ff3750"/><stop offset=".86" stop-color="#f92261"/><stop offset="1" stop-color="#f5156c"/></linearGradient><linearGradient id="b" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="44.39" x2="17.83" y1="55.11" y2="9.1"><stop offset="0" stop-color="#fff44f" stop-opacity=".8"/><stop offset=".75" stop-color="#fff44f" stop-opacity="0"/></linearGradient><linearGradient id="c" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="44.49" x2="44.49" y1="3.82" y2="58.55"><stop offset="0" stop-color="#3a8ee6"/><stop offset=".24" stop-color="#5c79f0"/><stop offset=".63" stop-color="#9059ff"/><stop offset="1" stop-color="#c139e6"/></linearGradient><linearGradient id="d" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="35.2" x2="59.52" y1="60.58" y2="36.25"><stop offset="0" stop-color="#6e008b" stop-opacity=".5"/><stop offset=".5" stop-color="#c846cb" stop-opacity="0"/></linearGradient><linearGradient id="e" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="59.67" x2="45.66" y1="30.62" y2="16.61"><stop offset=".14" stop-color="#6a2bea" stop-opacity="0"/><stop offset=".3" stop-color="#662ce6" stop-opacity=".09"/><stop offset=".47" stop-color="#592fdb" stop-opacity=".19"/><stop offset=".64" stop-color="#4534c9" stop-opacity=".29"/><stop offset=".81" stop-color="#283baf" stop-opacity=".39"/><stop offset=".99" stop-color="#03448d" stop-opacity=".49"/><stop offset="1" stop-color="#00458b" stop-opacity=".5"/></linearGradient><linearGradient id="f" gradientTransform="matrix(1 0 0 -1 0 66)" gradientUnits="userSpaceOnUse" x1="38.67" x2="41.95" y1="21.69" y2="17.77"><stop offset="0" stop-color="#960e18" stop-opacity=".6"/><stop offset=".17" stop-color="#a91522" stop-opacity=".47"/><stop offset=".51" stop-color="#d9283c" stop-opacity=".19"/><stop offset=".75" stop-color="#ff3750" stop-opacity="0"/></linearGradient><path d="m54.55 15.53-5.71-3.26-13-7.46-.41-.23a6.88 6.88 0 0 0 -6.88 0l-.42.23-18.28 10.48-.41.24a6.83 6.83 0 0 0 -3.44 5.92v21.89a6.86 6.86 0 0 0 3.44 5.92l18.7 10.74a2.75 2.75 0 0 0 1.44.38 2.91 2.91 0 0 0 2.49-1.42 2.83 2.83 0 0 0 -1.07-3.96l-18.29-10.44a2 2 0 0 1 -1-1.69v-20.95a2 2 0 0 1 1-1.69l3.29-1.85 15-8.63a2 2 0 0 1 2 0l18.27 10.48a2 2 0 0 1 1 1.69v20.95a1.94 1.94 0 0 1 -1 1.69l-6.18 3.54-3.09-4.71a15 15 0 1 0 -5 2.92l4.75 7.15a1.91 1.91 0 0 0 .24.32 3.18 3.18 0 0 0 .33.3.27.27 0 0 0 .08.07l.41.25h.1a1.3 1.3 0 0 0 .39.14.14.14 0 0 0 .09 0 2.34 2.34 0 0 0 .45.07.3.3 0 0 1 .13 0h.39a.23.23 0 0 0 .11 0 2.57 2.57 0 0 0 .48-.11.26.26 0 0 0 .12 0l.37-.16h.08l8.94-5.13a6.83 6.83 0 0 0 3.54-5.9v-21.86a6.75 6.75 0 0 0 -3.45-5.92zm-31.74 16.85a9.18 9.18 0 1 1 9.19 9.11 9.15 9.15 0 0 1 -9.19-9.11z" fill="url(#a)"/><path d="m54.55 15.53-5.71-3.26-13-7.46-.41-.23a6.88 6.88 0 0 0 -6.88 0l-.42.23-18.28 10.48-.41.24a6.83 6.83 0 0 0 -3.44 5.92v21.89a6.86 6.86 0 0 0 3.44 5.92l18.7 10.74a2.75 2.75 0 0 0 1.44.38 2.91 2.91 0 0 0 2.49-1.42 2.83 2.83 0 0 0 -1.07-3.96l-18.29-10.44a2 2 0 0 1 -1-1.69v-20.95a2 2 0 0 1 1-1.69l3.29-1.85 15-8.63a2 2 0 0 1 2 0l18.27 10.48a2 2 0 0 1 1 1.69v20.95a1.94 1.94 0 0 1 -1 1.69l-6.18 3.54-3.09-4.71a15 15 0 1 0 -5 2.92l4.75 7.15a1.91 1.91 0 0 0 .24.32 3.18 3.18 0 0 0 .33.3.27.27 0 0 0 .08.07l.41.25h.1a1.3 1.3 0 0 0 .39.14.14.14 0 0 0 .09 0 2.34 2.34 0 0 0 .45.07.3.3 0 0 1 .13 0h.39a.23.23 0 0 0 .11 0 2.57 2.57 0 0 0 .48-.11.26.26 0 0 0 .12 0l.37-.16h.08l8.94-5.13a6.83 6.83 0 0 0 3.54-5.9v-21.86a6.75 6.75 0 0 0 -3.45-5.92zm-31.74 16.85a9.18 9.18 0 1 1 9.19 9.11 9.15 9.15 0 0 1 -9.19-9.11z" fill="url(#b)"/><path d="m54.55 15.53-5.71-3.26-7.94-4.55a6.11 6.11 0 0 0 -5.9-.08l-4 2.11a2 2 0 0 1 2 0l18.3 10.48a1.94 1.94 0 0 1 1 1.69v20.95a1.93 1.93 0 0 1 -1 1.69l-6.23 3.54 1 1.55a4.05 4.05 0 0 0 5.41 1.35l3.06-1.75a6.82 6.82 0 0 0 3.46-5.91v-21.9a6.75 6.75 0 0 0 -3.45-5.91z" fill="url(#c)"/><path d="m52.26 21.92v10.16h5.74v-10.64a6.83 6.83 0 0 0 -3.44-5.92l-5.7-3.26-8-4.55a6.14 6.14 0 0 0 -5.86-.09l-4 2.12a2 2 0 0 1 2 0l18.27 10.48a2 2 0 0 1 .99 1.7z" fill="url(#d)"/><path d="m52.26 33.72v9.14a2 2 0 0 1 -1 1.69l-6.19 3.54 1 1.55a4.06 4.06 0 0 0 5.42 1.36l3.06-1.75a6.84 6.84 0 0 0 3.45-5.92v-9.63h-5.74z" fill="url(#e)" opacity=".9"/><path d="m41.17 32.38a9.18 9.18 0 1 0 -9.17 9.11 9.14 9.14 0 0 0 9.17-9.11z" fill="none"/><path d="m44.64 47.43-2.68-4a15 15 0 0 1 -4.96 2.88l2.86 4.31c1.63-1.02 3.22-2.08 4.78-3.19z" fill="url(#f)" opacity=".9"/></svg>
|
||||
|
После Ширина: | Высота: | Размер: 4.8 KiB |
|
|
@ -20,6 +20,7 @@ const kESModuleList = new Set([
|
|||
/browser\/aboutlogins\/.*\.js$/,
|
||||
/browser\/protections.js$/,
|
||||
/browser\/lockwise-card.js$/,
|
||||
/browser\/monitor-card.js$/,
|
||||
/toolkit\/content\/global\/certviewer\/components\/.*\.js$/,
|
||||
/toolkit\/content\/global\/certviewer\/.*\.js$/,
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ browser.jar:
|
|||
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/logos/monitor.svg (content/logos/monitor.svg)
|
||||
content/browser/aboutNetError.xhtml (content/aboutNetError.xhtml)
|
||||
content/browser/aboutNetError.js (content/aboutNetError.js)
|
||||
content/browser/aboutRobots-icon.png (content/aboutRobots-icon.png)
|
||||
|
|
|
|||
|
|
@ -41,12 +41,15 @@ var AboutProtectionsHandler = {
|
|||
"OpenSyncPreferences",
|
||||
// Fetching data
|
||||
"FetchContentBlockingEvents",
|
||||
"FetchMonitorData",
|
||||
"FetchUserLoginsData",
|
||||
// Getting prefs
|
||||
"GetEnabledLockwiseCard",
|
||||
"GetEnabledPrefs",
|
||||
],
|
||||
|
||||
PREF_LOCKWISE_CARD_ENABLED: "browser.contentblocking.report.lockwise.enabled",
|
||||
_prefs: {
|
||||
LockwiseCard: "browser.contentblocking.report.lockwise.enabled",
|
||||
MonitorCard: "browser.contentblocking.report.monitor.enabled",
|
||||
},
|
||||
|
||||
init() {
|
||||
this.receiveMessage = this.receiveMessage.bind(this);
|
||||
|
|
@ -70,24 +73,43 @@ var AboutProtectionsHandler = {
|
|||
/**
|
||||
* Retrieves login data for the user.
|
||||
*
|
||||
* @return {{ isLoggedIn: Boolean,
|
||||
* numberOfLogins: Number,
|
||||
* numberOfSyncedDevices: Number }}
|
||||
* @return {{ hasFxa: Boolean,
|
||||
* numLogins: Number,
|
||||
* numSyncedDevices: Number }}
|
||||
* The login data.
|
||||
*/
|
||||
async getLoginData() {
|
||||
const loginCount = Services.logins.countLogins("", "", "");
|
||||
let syncedDevices = [];
|
||||
const isLoggedWithFxa = await fxAccounts.accountStatus();
|
||||
const hasFxa = await fxAccounts.accountStatus();
|
||||
|
||||
if (isLoggedWithFxa) {
|
||||
if (hasFxa) {
|
||||
syncedDevices = await fxAccounts.getDeviceList();
|
||||
}
|
||||
|
||||
return {
|
||||
isLoggedIn: loginCount > 0 || syncedDevices.length > 0,
|
||||
numberOfLogins: loginCount,
|
||||
numberOfSyncedDevices: syncedDevices.length,
|
||||
hasFxa,
|
||||
numLogins: Services.logins.countLogins("", "", ""),
|
||||
numSyncedDevices: syncedDevices.length,
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Retrieves monitor data for the user.
|
||||
*
|
||||
* @return {{ monitoredEmails: Number,
|
||||
* numBreaches: Number,
|
||||
* passwords: Number,
|
||||
* error: Boolean }}
|
||||
* Monitor data.
|
||||
*/
|
||||
async getMonitorData() {
|
||||
// TODO: Fetch real data for endpoints in Bug 1559424.
|
||||
return {
|
||||
monitoredEmails: 1,
|
||||
numBreaches: 11,
|
||||
passwords: 8,
|
||||
lockwisePasswords: 2,
|
||||
error: false,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -154,6 +176,13 @@ var AboutProtectionsHandler = {
|
|||
dataToSend
|
||||
);
|
||||
break;
|
||||
case "FetchMonitorData":
|
||||
this.sendMessage(
|
||||
aMessage.target,
|
||||
"SendMonitorData",
|
||||
await this.getMonitorData()
|
||||
);
|
||||
break;
|
||||
case "FetchUserLoginsData":
|
||||
this.sendMessage(
|
||||
aMessage.target,
|
||||
|
|
@ -161,13 +190,17 @@ var AboutProtectionsHandler = {
|
|||
await this.getLoginData()
|
||||
);
|
||||
break;
|
||||
case "GetEnabledLockwiseCard":
|
||||
const enabled = Services.prefs.getBoolPref(
|
||||
this.PREF_LOCKWISE_CARD_ENABLED
|
||||
);
|
||||
this.sendMessage(aMessage.target, "SendEnabledLockWiseCardPref", {
|
||||
isEnabled: enabled,
|
||||
case "GetEnabledPrefs":
|
||||
const prefs = Object.keys(this._prefs);
|
||||
|
||||
// Get all the enabled prefs and send separate messages depending on their names.
|
||||
for (let name of prefs) {
|
||||
const message = `SendEnabled${name}Pref`;
|
||||
const isEnabled = Services.prefs.getBoolPref(this._prefs[name]);
|
||||
this.sendMessage(aMessage.target, message, {
|
||||
isEnabled,
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -36,13 +36,11 @@ export default class LockwiseCard {
|
|||
);
|
||||
lockwiseCard.classList.remove("hidden");
|
||||
});
|
||||
|
||||
// Dispatch messages to retrieve data for the Lockwise card.
|
||||
RPMSendAsyncMessage("FetchUserLoginsData");
|
||||
}
|
||||
|
||||
buildContent(data) {
|
||||
const { isLoggedIn, numberOfLogins, numberOfSyncedDevices } = data;
|
||||
const { hasFxa, numLogins, numSyncedDevices } = data;
|
||||
const isLoggedIn = numLogins > 0 || hasFxa;
|
||||
const title = this.doc.getElementById("lockwise-title");
|
||||
const headerContent = this.doc.getElementById("lockwise-header-content");
|
||||
const lockwiseBodyContent = this.doc.getElementById(
|
||||
|
|
@ -60,11 +58,7 @@ export default class LockwiseCard {
|
|||
title.textContent = "Firefox Lockwise";
|
||||
headerContent.textContent =
|
||||
"Securely store and sync your passwords to all your devices.";
|
||||
this.renderContentForLoggedInUser(
|
||||
container,
|
||||
numberOfLogins,
|
||||
numberOfSyncedDevices
|
||||
);
|
||||
this.renderContentForLoggedInUser(container, numLogins, numSyncedDevices);
|
||||
} else {
|
||||
title.textContent = "Never forget a password again";
|
||||
headerContent.textContent =
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
/* 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 MonitorClass {
|
||||
constructor(document) {
|
||||
this.doc = document;
|
||||
}
|
||||
|
||||
init() {
|
||||
const signUpForMonitorButton = this.doc.getElementById(
|
||||
"sign-up-for-monitor-button"
|
||||
);
|
||||
signUpForMonitorButton.addEventListener("click", () => {
|
||||
console.log("TODO: Where is this link supposed to go.");
|
||||
});
|
||||
|
||||
RPMAddMessageListener("SendUserLoginsData", ({ data }) => {
|
||||
// Wait for monitor data and display the card.
|
||||
this.getMonitorData(data);
|
||||
RPMSendAsyncMessage("FetchMonitorData");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a listener for receiving the monitor data. Once received then display this data
|
||||
* in the card.
|
||||
*
|
||||
* @param {Object} loginData
|
||||
* Login data received from the Logins service.
|
||||
*/
|
||||
getMonitorData(loginData) {
|
||||
RPMAddMessageListener("SendMonitorData", ({ data: monitorData }) => {
|
||||
// Once data for the user is retrieved, display the monitor card.
|
||||
this.buildContent(loginData, monitorData);
|
||||
|
||||
// Show the Monitor card.
|
||||
const monitorCard = this.doc.querySelector(
|
||||
".report-card.monitor-card.hidden"
|
||||
);
|
||||
monitorCard.classList.remove("hidden");
|
||||
});
|
||||
}
|
||||
|
||||
buildContent(loginData, monitorData) {
|
||||
const { hasFxa, numLogins } = loginData;
|
||||
const isLoggedIn = numLogins > 0 || hasFxa;
|
||||
const headerContent = this.doc.querySelector(
|
||||
"#monitor-header-content span"
|
||||
);
|
||||
const monitorCard = this.doc.querySelector(".report-card.monitor-card");
|
||||
if (isLoggedIn && !monitorData.error) {
|
||||
monitorCard.classList.add("has-logins");
|
||||
headerContent.textContent =
|
||||
"Firefox Monitor warns you if your info has appeared in a known data breach";
|
||||
this.renderContentForUserWithLogins(monitorData);
|
||||
} else {
|
||||
monitorCard.classList.add("no-logins");
|
||||
const signUpForMonitorButton = this.doc.getElementById(
|
||||
"sign-up-for-monitor-button"
|
||||
);
|
||||
signUpForMonitorButton.textContent = hasFxa
|
||||
? "Turn on Monitor"
|
||||
: "Sign up for Monitor";
|
||||
headerContent.textContent =
|
||||
"Check Firefox Monitor to see if you've been part of a data breach and get alerts about new breaches.";
|
||||
}
|
||||
}
|
||||
|
||||
renderContentForUserWithLogins(monitorData) {
|
||||
const storedEmail = this.doc.querySelector(
|
||||
"span[data-type='stored-emails']"
|
||||
);
|
||||
const knownBreaches = this.doc.querySelector(
|
||||
"span[data-type='known-breaches']"
|
||||
);
|
||||
const exposedPasswords = this.doc.querySelector(
|
||||
"span[data-type='exposed-passwords']"
|
||||
);
|
||||
const exposedLockwisePasswords = this.doc.querySelector(
|
||||
".number-of-breaches.block"
|
||||
);
|
||||
|
||||
storedEmail.textContent = monitorData.monitoredEmails;
|
||||
knownBreaches.textContent = monitorData.numBreaches;
|
||||
exposedPasswords.textContent = monitorData.passwords;
|
||||
exposedLockwisePasswords.textContent = monitorData.lockwisePasswords;
|
||||
}
|
||||
}
|
||||
|
|
@ -97,10 +97,26 @@ body[focuseddatatype=cryptominer] {
|
|||
background-color: var(--blue-80);
|
||||
}
|
||||
|
||||
.report-card.lockwise-card .card-header {
|
||||
.report-card.lockwise-card .card-header,
|
||||
.report-card.monitor-card.no-logins .card-header {
|
||||
grid-template-columns: 2fr 6fr 7fr;
|
||||
}
|
||||
|
||||
|
||||
/* We want to hide certain components depending on its state. */
|
||||
a.hidden,
|
||||
.card-body.hidden,
|
||||
.lockwise-card.hidden,
|
||||
#lockwise-body-content .has-logins.hidden,
|
||||
#lockwise-body-content .no-logins.hidden,
|
||||
.monitor-card.hidden,
|
||||
.monitor-card.no-logins .card-body,
|
||||
.monitor-card.no-logins #monitor-header-content a,
|
||||
.monitor-card.no-logins .inline-text-icon.monitor-scanned-text,
|
||||
.monitor-card.has-logins #sign-up-for-monitor-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
|
@ -116,6 +132,10 @@ body[focuseddatatype=cryptominer] {
|
|||
background: url("chrome://browser/content/logos/lockwise.svg") no-repeat center/cover;
|
||||
}
|
||||
|
||||
.monitor-card .icon {
|
||||
background: url("chrome://browser/content/logos/monitor.svg") no-repeat center/cover;
|
||||
}
|
||||
|
||||
.report-card {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
|
|
@ -389,13 +409,6 @@ label:hover {
|
|||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
a.hidden,
|
||||
.lockwise-card.hidden,
|
||||
#lockwise-body-content .has-logins.hidden,
|
||||
#lockwise-body-content .no-logins.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.number-of-logins {
|
||||
background-color: var(--dark-grey);
|
||||
}
|
||||
|
|
@ -404,7 +417,7 @@ a.hidden,
|
|||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
.lockwise-text-icon {
|
||||
.inline-text-icon {
|
||||
background-size: 16px 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: 3px;
|
||||
|
|
@ -427,10 +440,6 @@ a.hidden,
|
|||
background-image: url("chrome://browser/skin/sync.svg");
|
||||
}
|
||||
|
||||
.non-logged-in-user-content {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.block {
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
|
|
@ -443,3 +452,108 @@ a.hidden,
|
|||
#lockwise-body-content .has-logins a {
|
||||
margin-inline-start: 10px;
|
||||
}
|
||||
|
||||
/* Monitor card */
|
||||
|
||||
#monitor-body-content .monitor-breached-passwords {
|
||||
grid: 1fr / minmax(70px, auto) 1fr;
|
||||
grid-row: 3;
|
||||
grid-column: span 3;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
font-size: 0.85rem;
|
||||
border-top: var(--card-divider);
|
||||
padding-top: 20px;
|
||||
line-height: 18px;
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
|
||||
.monitor-scanned-text {
|
||||
background-image: url("chrome://browser/skin/reload.svg");
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.monitor-card #monitor-header-content > a {
|
||||
display: block;
|
||||
margin-block-start: 5px;
|
||||
}
|
||||
|
||||
.monitor-card.has-logins #monitor-body-content {
|
||||
display: grid;
|
||||
grid: 2fr 1fr auto / repeat(3, 160px);
|
||||
grid-column-gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.monitor-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 4px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
padding: 25px 5px 25px 5px;
|
||||
}
|
||||
|
||||
.email {
|
||||
background: linear-gradient(162.33deg, #AB71FF 0%, #9059FF 100%);
|
||||
}
|
||||
|
||||
.email .monitor-icon {
|
||||
background-image: url(chrome://browser/skin/mail.svg);
|
||||
}
|
||||
|
||||
.breaches {
|
||||
background: linear-gradient(162.33deg, #9059FF 0%, #7542E5 100%);
|
||||
}
|
||||
|
||||
.breaches .monitor-icon {
|
||||
background-image: url(chrome://browser/skin/fxa/avatar.svg);
|
||||
}
|
||||
|
||||
.passwords {
|
||||
background: linear-gradient(162.33deg, #7542E5 0%, #592ACB 100%);
|
||||
}
|
||||
|
||||
.passwords .monitor-icon {
|
||||
background-image: url(chrome://browser/skin/login.svg);
|
||||
}
|
||||
|
||||
.monitor-view-full-report {
|
||||
grid-row: 2;
|
||||
grid-column: span 2;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.monitor-stat {
|
||||
display: flex;
|
||||
font-size: 1.75rem;
|
||||
font-weight: bold;
|
||||
margin-block-end: 5px;
|
||||
word-break: break-all;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.monitor-stat .monitor-icon {
|
||||
background-size: 24px 24px;
|
||||
background-repeat: no-repeat;
|
||||
-moz-context-properties: fill,fill-opacity;
|
||||
fill: white;
|
||||
fill-opacity: 0.65;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
background-position-y: center;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: .69rem;
|
||||
line-height: 13px;
|
||||
margin-block-start: 5px;
|
||||
}
|
||||
|
||||
.number-of-breaches.block {
|
||||
background-color: var(--orange);
|
||||
padding: 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
<link rel="icon" href="chrome://global/skin/icons/warning.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>
|
||||
<title>Protection Report</title>
|
||||
</head>
|
||||
|
||||
|
|
@ -82,6 +83,75 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Markup for Monitor card. -->
|
||||
<section class="report-card monitor-card hidden">
|
||||
<div class="card-header">
|
||||
<div class="icon"></div>
|
||||
<div class="wrapper">
|
||||
<h3 id="monitor-title" class="card-title">
|
||||
Look out for data breaches
|
||||
</h3>
|
||||
<p id="monitor-header-content" class="content">
|
||||
<span>
|
||||
<!-- Insert Monitor header content here. -->
|
||||
</span>
|
||||
<a href="">How it works</a>
|
||||
</p>
|
||||
<span class="inline-text-icon monitor-scanned-text">
|
||||
Automatically scanned today
|
||||
</span>
|
||||
</div>
|
||||
<button id="sign-up-for-monitor-button">
|
||||
<!-- Insert Monitor button content here. -->
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="body-wrapper">
|
||||
<div id="monitor-body-content">
|
||||
<div class="monitor-block email">
|
||||
<span class="monitor-stat">
|
||||
<span class="monitor-icon"></span>
|
||||
<span data-type="stored-emails">
|
||||
<!-- Display number of stored emails here. -->
|
||||
</span>
|
||||
</span>
|
||||
<span class="info-text">Email address being monitored</span>
|
||||
</div>
|
||||
<div class="monitor-block breaches">
|
||||
<span class="monitor-stat">
|
||||
<span class="monitor-icon"></span>
|
||||
<span data-type="known-breaches">
|
||||
<!-- Display number of known breaches here. -->
|
||||
</span>
|
||||
</span>
|
||||
<span class="info-text">Known data breaches have exposed your information</span>
|
||||
</div>
|
||||
<div class="monitor-block passwords">
|
||||
<span class="monitor-stat">
|
||||
<span class="monitor-icon"></span>
|
||||
<span data-type="exposed-passwords">
|
||||
<!-- Display number of exposed passwords here. -->
|
||||
</span>
|
||||
</span>
|
||||
<span class="info-text">Passwords exposed across all breaches</span>
|
||||
</div>
|
||||
<div class="monitor-view-full-report">
|
||||
<span>View full report on</span>
|
||||
<a href="">Firefox Monitor</a>
|
||||
</div>
|
||||
<div class="monitor-breached-passwords">
|
||||
<span class="number-of-breaches block">
|
||||
<!-- Display number of exposed stored passwords here. -->
|
||||
</span>
|
||||
<span class="">
|
||||
Saved passwords have appeared in known data breaches. Change these passwords to protect your accounts.
|
||||
<a href="">Open Lockwise</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Markup for Lockwise card. -->
|
||||
<section class="report-card lockwise-card hidden">
|
||||
<div class="card-header">
|
||||
|
|
@ -109,14 +179,14 @@
|
|||
<span class="number-of-logins block">
|
||||
<!-- Display number of stored logins here. -->
|
||||
</span>
|
||||
<span class="lockwise-text-icon passwords-stored-text">
|
||||
<span class="inline-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 class="inline-text-icon synced-devices-text">
|
||||
<span>
|
||||
<!-- Display message for status of synced devices here. -->
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
/* eslint-env mozilla/frame-script */
|
||||
|
||||
import LockwiseCard from "./lockwise-card.js";
|
||||
import MonitorCard from "./monitor-card.js";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", e => {
|
||||
let todayInMs = Date.now();
|
||||
|
|
@ -28,8 +29,8 @@ document.addEventListener("DOMContentLoaded", e => {
|
|||
RPMSendAsyncMessage("OpenContentBlockingPreferences");
|
||||
});
|
||||
|
||||
// Check to see if displaying the Lockwise card pref is enabled.
|
||||
RPMSendAsyncMessage("GetEnabledLockwiseCard");
|
||||
// Get the display prefs for each component
|
||||
RPMSendAsyncMessage("GetEnabledPrefs");
|
||||
|
||||
let createGraph = data => {
|
||||
let dateInMS = data.earliestDate
|
||||
|
|
@ -149,8 +150,20 @@ document.addEventListener("DOMContentLoaded", e => {
|
|||
createGraph(message.data);
|
||||
});
|
||||
|
||||
// Display Monitor card
|
||||
RPMAddMessageListener("SendEnabledMonitorCardPref", message => {
|
||||
if (message.data.isEnabled) {
|
||||
const monitorCard = new MonitorCard(document);
|
||||
monitorCard.init();
|
||||
}
|
||||
|
||||
// For tests
|
||||
const monitorUI = document.querySelector(".monitor-card");
|
||||
monitorUI.dataset.enabled = message.data.isEnabled;
|
||||
});
|
||||
|
||||
// Display Lockwise card
|
||||
RPMAddMessageListener("SendEnabledLockWiseCardPref", message => {
|
||||
RPMAddMessageListener("SendEnabledLockwiseCardPref", message => {
|
||||
if (message.data.isEnabled) {
|
||||
const lockwiseCard = new LockwiseCard(document);
|
||||
lockwiseCard.init();
|
||||
|
|
@ -160,4 +173,8 @@ document.addEventListener("DOMContentLoaded", e => {
|
|||
const lockwiseUI = document.querySelector(".lockwise-card");
|
||||
lockwiseUI.dataset.enabled = message.data.isEnabled;
|
||||
});
|
||||
|
||||
// Dispatch messages to retrieve data for the Lockwise & Monitor
|
||||
// cards.
|
||||
RPMSendAsyncMessage("FetchUserLoginsData");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
|
||||
browser.jar:
|
||||
content/browser/lockwise-card.js (content/lockwise-card.js)
|
||||
content/browser/monitor-card.js (content/monitor-card.js)
|
||||
content/browser/protections.css (content/protections.css)
|
||||
content/browser/protections.html (content/protections.html)
|
||||
content/browser/protections.js (content/protections.js)
|
||||
|
|
|
|||
|
|
@ -4,4 +4,5 @@ support-files =
|
|||
!/browser/base/content/test/trackingUI/trackingPage.html
|
||||
|
||||
[browser_protections_lockwise.js]
|
||||
[browser_protections_monitor.js]
|
||||
[browser_protections_report_ui.js]
|
||||
|
|
|
|||
|
|
@ -37,12 +37,10 @@ const TEST_LOGIN2 = new nsLoginInfo(
|
|||
// Modify AboutProtectionsHandler's getLoginData method to fake returning a specified
|
||||
// number of devices.
|
||||
const mockGetLoginDataWithSyncedDevices = deviceCount => async () => {
|
||||
const loginCount = Services.logins.countLogins("", "", "");
|
||||
|
||||
return {
|
||||
isLoggedIn: loginCount > 0 || deviceCount > 0,
|
||||
numberOfLogins: loginCount,
|
||||
numberOfSyncedDevices: deviceCount,
|
||||
hasFxa: true,
|
||||
numLogins: Services.logins.countLogins("", "", ""),
|
||||
numSyncedDevices: deviceCount,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
@ -56,7 +54,9 @@ add_task(async function() {
|
|||
info("Check that the correct content is displayed for non-logged in users.");
|
||||
await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
|
||||
await ContentTaskUtils.waitForCondition(() => {
|
||||
const noLogins = content.document.querySelector(".no-logins");
|
||||
const noLogins = content.document.querySelector(
|
||||
"#lockwise-body-content .no-logins"
|
||||
);
|
||||
return ContentTaskUtils.is_visible(noLogins);
|
||||
}, "Lockwise card for user with no logins is shown.");
|
||||
|
||||
|
|
@ -83,7 +83,9 @@ add_task(async function() {
|
|||
|
||||
await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
|
||||
await ContentTaskUtils.waitForCondition(() => {
|
||||
const hasLogins = content.document.querySelector(".has-logins");
|
||||
const hasLogins = content.document.querySelector(
|
||||
"#lockwise-body-content .has-logins"
|
||||
);
|
||||
return ContentTaskUtils.is_visible(hasLogins);
|
||||
}, "Lockwise card for user with logins is shown.");
|
||||
|
||||
|
|
@ -149,7 +151,9 @@ add_task(async function() {
|
|||
|
||||
await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
|
||||
await ContentTaskUtils.waitForCondition(() => {
|
||||
const hasLogins = content.document.querySelector(".has-logins");
|
||||
const hasLogins = content.document.querySelector(
|
||||
"#lockwise-body-content .has-logins"
|
||||
);
|
||||
return ContentTaskUtils.is_visible(hasLogins);
|
||||
}, "Lockwise card for user with logins is shown.");
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,194 @@
|
|||
/* 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 { AboutProtectionsHandler } = ChromeUtils.import(
|
||||
"resource:///modules/aboutpages/AboutProtectionsHandler.jsm"
|
||||
);
|
||||
|
||||
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"
|
||||
);
|
||||
|
||||
let fakeDataWithNoError = {
|
||||
monitoredEmails: 1,
|
||||
numBreaches: 11,
|
||||
passwords: 8,
|
||||
lockwisePasswords: 2,
|
||||
error: false,
|
||||
};
|
||||
|
||||
let fakeDataWithError = {
|
||||
monitoredEmails: null,
|
||||
numBreaches: null,
|
||||
passwords: null,
|
||||
lockwisePasswords: null,
|
||||
error: true,
|
||||
};
|
||||
|
||||
// Modify AboutProtectionsHandler's getMonitorData method to fake returning a specified
|
||||
// number of devices.
|
||||
const mockGetMonitorData = data => async () => data;
|
||||
|
||||
// Modify AboutProtectionsHandler's getLoginData method to fake being logged in with Fxa.
|
||||
const mockGetLoginData = async () => {
|
||||
return {
|
||||
hasFxa: true,
|
||||
numLogins: Services.logins.countLogins("", "", ""),
|
||||
numSyncedDevices: 0,
|
||||
};
|
||||
};
|
||||
|
||||
add_task(async function() {
|
||||
let tab = await BrowserTestUtils.openNewForegroundTab({
|
||||
url: "about:protections",
|
||||
gBrowser,
|
||||
});
|
||||
const { getLoginData } = AboutProtectionsHandler;
|
||||
const { getMonitorData } = AboutProtectionsHandler;
|
||||
|
||||
await reloadTab(tab);
|
||||
|
||||
info("Check that the correct content is displayed for users with no logins.");
|
||||
await checkNoLoginsContentIsDisplayed(tab, "Sign up for Monitor");
|
||||
|
||||
info(
|
||||
"Check that the correct content is displayed for users with monitor data."
|
||||
);
|
||||
Services.logins.addLogin(TEST_LOGIN1);
|
||||
AboutProtectionsHandler.getMonitorData = mockGetMonitorData(
|
||||
fakeDataWithNoError
|
||||
);
|
||||
await reloadTab(tab);
|
||||
|
||||
await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
|
||||
await ContentTaskUtils.waitForCondition(() => {
|
||||
const noLogins = content.document.querySelector(
|
||||
".monitor-card.has-logins"
|
||||
);
|
||||
return ContentTaskUtils.is_visible(noLogins);
|
||||
}, "Monitor card for user with stored logins is shown.");
|
||||
|
||||
const hasLoginsHeaderContent = content.document.querySelector(
|
||||
"#monitor-header-content span"
|
||||
);
|
||||
const cardBody = content.document.querySelector(".monitor-card .card-body");
|
||||
|
||||
ok(
|
||||
ContentTaskUtils.is_visible(cardBody),
|
||||
"Card body is shown for users monitor data."
|
||||
);
|
||||
is(
|
||||
hasLoginsHeaderContent.textContent,
|
||||
"Firefox Monitor warns you if your info has appeared in a known data breach",
|
||||
"Header content for user with monitor data is correct"
|
||||
);
|
||||
|
||||
info("Make sure correct numbers for monitor stats are displayed.");
|
||||
const emails = content.document.querySelector(
|
||||
".monitor-stat span[data-type='stored-emails']"
|
||||
);
|
||||
const passwords = content.document.querySelector(
|
||||
".monitor-stat span[data-type='exposed-passwords']"
|
||||
);
|
||||
const breaches = content.document.querySelector(
|
||||
".monitor-stat span[data-type='known-breaches']"
|
||||
);
|
||||
|
||||
is(emails.textContent, 1, "1 monitored email is displayed");
|
||||
is(passwords.textContent, 8, "8 exposed stored passwords is displayed");
|
||||
is(breaches.textContent, 11, "11 known data breaches is displayed.");
|
||||
});
|
||||
|
||||
info(
|
||||
"Check that correct content is displayed when monitor data contains an error message."
|
||||
);
|
||||
AboutProtectionsHandler.getMonitorData = mockGetMonitorData(
|
||||
fakeDataWithError
|
||||
);
|
||||
AboutProtectionsHandler.getLoginData = mockGetLoginData;
|
||||
await reloadTab(tab);
|
||||
await checkNoLoginsContentIsDisplayed(tab, "Turn on Monitor");
|
||||
|
||||
info("Disable showing the Monitor card.");
|
||||
Services.prefs.setBoolPref(
|
||||
"browser.contentblocking.report.monitor.enabled",
|
||||
false
|
||||
);
|
||||
await reloadTab(tab);
|
||||
|
||||
await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
|
||||
await ContentTaskUtils.waitForCondition(() => {
|
||||
const monitorCard = content.document.querySelector(".monitor-card");
|
||||
return !monitorCard["data-enabled"];
|
||||
}, "Monitor card is not enabled.");
|
||||
|
||||
const monitorCard = content.document.querySelector(".monitor-card");
|
||||
ok(ContentTaskUtils.is_hidden(monitorCard), "Lockwise card is hidden.");
|
||||
});
|
||||
|
||||
// set the pref back to displaying the card.
|
||||
Services.prefs.setBoolPref(
|
||||
"browser.contentblocking.report.monitor.enabled",
|
||||
true
|
||||
);
|
||||
|
||||
// remove logins
|
||||
Services.logins.removeLogin(TEST_LOGIN1);
|
||||
|
||||
// restore original getLoginData & getMonitorData methods to AboutProtectionsHandler
|
||||
AboutProtectionsHandler.getLoginData = getLoginData;
|
||||
AboutProtectionsHandler.getMonitorData = getMonitorData;
|
||||
|
||||
await BrowserTestUtils.removeTab(tab);
|
||||
});
|
||||
|
||||
async function checkNoLoginsContentIsDisplayed(tab, expectedButtonContent) {
|
||||
await ContentTask.spawn(
|
||||
tab.linkedBrowser,
|
||||
{ buttonText: expectedButtonContent },
|
||||
async function({ buttonText }) {
|
||||
await ContentTaskUtils.waitForCondition(() => {
|
||||
const noLogins = content.document.querySelector(
|
||||
".monitor-card.no-logins"
|
||||
);
|
||||
return ContentTaskUtils.is_visible(noLogins);
|
||||
}, "Monitor card for user with no logins is shown.");
|
||||
|
||||
const noLoginsHeaderContent = content.document.querySelector(
|
||||
"#monitor-header-content span"
|
||||
);
|
||||
const cardBody = content.document.querySelector(
|
||||
".monitor-card .card-body"
|
||||
);
|
||||
const button = content.document.getElementById(
|
||||
"sign-up-for-monitor-button"
|
||||
);
|
||||
|
||||
ok(
|
||||
ContentTaskUtils.is_hidden(cardBody),
|
||||
"Card body is hidden for users with no logins."
|
||||
);
|
||||
is(
|
||||
noLoginsHeaderContent.textContent,
|
||||
"Check Firefox Monitor to see if you've been part of a data breach and get alerts about new breaches.",
|
||||
"Header content for user with no logins is correct"
|
||||
);
|
||||
is(button.textContent, buttonText, "Text content for button is correct");
|
||||
}
|
||||
);
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче