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:
Micah Tigley 2019-07-11 14:31:18 +00:00
Родитель 1190fb0269
Коммит 7a5967aca6
14 изменённых файлов: 478 добавлений и 18 удалений

Просмотреть файл

@ -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;
}