Bug 1612088 - change the lockwise app card UI r=fluent-reviewers,johannh,flod

Differential Revision: https://phabricator.services.mozilla.com/D61220

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Erica Wright 2020-02-21 21:38:50 +00:00
Родитель 284f79cb5f
Коммит ea8a25a55e
13 изменённых файлов: 157 добавлений и 49 удалений

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

@ -1594,9 +1594,10 @@ pref("browser.contentblocking.report.proxy.enabled", false);
pref("browser.contentblocking.report.monitor.url", "https://monitor.firefox.com/?entrypoint=protection_report_monitor&utm_source=about-protections");
pref("browser.contentblocking.report.monitor.sign_in_url", "https://monitor.firefox.com/oauth/init?entrypoint=protection_report_monitor&utm_source=about-protections&email=");
pref("browser.contentblocking.report.lockwise.url", "https://lockwise.firefox.com/?utm_source=firefox-desktop&utm_medium=referral&utm_campaign=about-protections&utm_content=about-protections");
pref("browser.contentblocking.report.manage_devices.url", "https://accounts.firefox.com/settings/clients");
pref("browser.contentblocking.report.proxy_extension.url", "https://fpn.firefox.com/browser?utm_source=firefox-desktop&utm_medium=referral&utm_campaign=about-protections&utm_content=about-protections");
pref("browser.contentblocking.report.lockwise.mobile-ios.url", "https://apps.apple.com/app/id1314000270");
pref("browser.contentblocking.report.lockwise.mobile-android.url", "https://play.google.com/store/apps/details?id=mozilla.lockbox&referrer=utm_source%3Dprotection_report%26utm_content%3Dmobile_promotion");
// Protection Report's SUMO urls
pref("browser.contentblocking.report.monitor.how_it_works.url", "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/monitor-faq");

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

После

Ширина:  |  Высота:  |  Размер: 6.6 KiB

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

После

Ширина:  |  Высота:  |  Размер: 6.7 KiB

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

@ -1,11 +0,0 @@
<!-- 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

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

@ -20,8 +20,9 @@ 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-light.svg (content/logos/lockwise-light.svg)
content/browser/logos/lockwise-dark.svg (content/logos/lockwise-dark.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/logos/proxy.svg (content/logos/proxy.svg)
content/browser/logos/send.svg (content/logos/send.svg)

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

@ -4,9 +4,11 @@
/* eslint-env mozilla/frame-script */
const LOCKWISE_URL = RPMGetStringPref(
"browser.contentblocking.report.lockwise.url",
""
const LOCKWISE_URL_IOS = RPMGetStringPref(
"browser.contentblocking.report.lockwise.mobile-ios.url"
);
const LOCKWISE_URL_ANDROID = RPMGetStringPref(
"browser.contentblocking.report.lockwise.mobile-android.url"
);
const MANAGE_DEVICES_URL = RPMGetStringPref(
"browser.contentblocking.report.manage_devices.url",
@ -44,11 +46,22 @@ export default class LockwiseCard {
syncLink.addEventListener("click", eventHandler);
syncLink.addEventListener("keydown", eventHandler);
// Attach link to Firefox Lockwise app page.
const lockwiseAppLink = this.doc.getElementById("lockwise-inline-link");
lockwiseAppLink.href = LOCKWISE_URL;
lockwiseAppLink.addEventListener("click", () => {
this.doc.sendTelemetryEvent("click", "lw_sync_link");
// Attach link to Firefox Lockwise ios mobile app.
const androidLockwiseAppLink = this.doc.getElementById(
"lockwise-android-inline-link"
);
androidLockwiseAppLink.href = LOCKWISE_URL_ANDROID;
androidLockwiseAppLink.addEventListener("click", () => {
this.doc.sendTelemetryEvent("click", "lw_sync_link", "android");
});
// Attach link to Firefox Lockwise ios mobile app.
const iosLockwiseAppLink = this.doc.getElementById(
"lockwise-ios-inline-link"
);
iosLockwiseAppLink.href = LOCKWISE_URL_IOS;
iosLockwiseAppLink.addEventListener("click", () => {
this.doc.sendTelemetryEvent("click", "lw_sync_link", "ios");
});
// Attack link to Firefox Lockwise "How it works" page.
@ -74,15 +87,19 @@ export default class LockwiseCard {
const lockwiseBodyContent = this.doc.getElementById(
"lockwise-body-content"
);
const cardBody = this.doc.querySelector(".lockwise-card .card-body");
// 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");
const exitIcon = lockwiseBodyContent.querySelector(".exit-icon");
// User has closed the lockwise promotion, hide it and don't show again.
exitIcon.addEventListener("click", () => {
RPMSetBoolPref("browser.contentblocking.report.hide_lockwise_app", true);
lockwiseBodyContent.querySelector(".no-logins").classList.add("hidden");
cardBody.classList.add("hidden");
});
if (isLoggedIn) {
let container = lockwiseBodyContent.querySelector(".has-logins");
container.classList.remove("hidden");
title.setAttribute("data-l10n-id", "lockwise-title-logged-in");
headerContent.setAttribute(
"data-l10n-id",
@ -90,6 +107,17 @@ export default class LockwiseCard {
);
this.renderContentForLoggedInUser(container, numLogins, numSyncedDevices);
} else {
if (
!RPMGetBoolPref(
"browser.contentblocking.report.hide_lockwise_app",
false
)
) {
lockwiseBodyContent
.querySelector(".no-logins")
.classList.remove("hidden");
cardBody.classList.remove("hidden");
}
title.setAttribute("data-l10n-id", "lockwise-title");
headerContent.setAttribute("data-l10n-id", "lockwise-header-content");
}

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

@ -4,6 +4,8 @@
:root {
--card-padding: 24px;
--exit-icon-size: 12px;
--exit-icon-position: calc((var(--card-padding) - var(--exit-icon-size)) / 2);
--social-color: #9059FF;
--cookie-color: #0090F4;
--tracker-color: #2AC3A2;
@ -110,6 +112,7 @@ h2 {
.etp-card.custom-not-blocking #protection-details,
#manage-protections,
.etp-card .icon.dark,
.lockwise-mobile-app-icon.dark,
a.hidden,
.loading .card-body.hidden,
.lockwise-card.hidden,
@ -125,7 +128,9 @@ a.hidden,
.loading a,
.loading button,
.loading .wrapper,
.proxy-card.hidden {
.proxy-card.hidden,
.card-body.hidden,
.hidden {
display: none;
}
@ -154,6 +159,14 @@ a.hidden,
.etp-card .icon.light {
display: none;
}
.lockwise-mobile-app-icon.dark {
display: block;
}
.lockwise-mobile-app-icon.light {
display: none;
}
}
}
@ -163,7 +176,7 @@ a.hidden,
grid-template-rows: 20% auto;
padding: 0;
margin-block-end: 25px;
line-height: 1.6em;
line-height: 1.3em;
}
.card-header,
@ -188,6 +201,32 @@ a.hidden,
color: var(--in-content-deemphasized-text);
}
.exit-icon {
position: absolute;
width: var(--exit-icon-size);
height: var(--exit-icon-size);
background-image: url(chrome://browser/skin/stop.svg);
background-size: calc(var(--exit-icon-size) - 2px);
background-position: center;
background-repeat: no-repeat;
top: var(--exit-icon-position);
right: var(--exit-icon-position);
-moz-context-properties: fill;
fill: var(--in-content-deemphasized-text);
}
.exit-icon:dir(rtl) {
left: var(--exit-icon-position);
}
.exit-icon:hover {
background-color: var(--in-content-button-background);
}
.exit-icon:hover:active {
background-color: var(--in-content-button-background-hover);
}
.custom-not-blocking .content {
margin-block-end: 5px;
}
@ -232,6 +271,7 @@ a.hidden,
border-block-start: 1px solid var(--in-content-border-color);
grid-column: span 2;
grid-row: 2;
position: relative;
}
.body-wrapper {
@ -536,11 +576,10 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
display: grid;
font-size: 0.875em;
align-items: center;
color: var(--in-content-deemphasized-text);
}
#lockwise-body-content > .no-logins {
grid: 1fr / 50px 275px;
grid: 1fr / 1fr 6fr;
grid-gap: 0;
}
@ -550,10 +589,12 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
}
.lockwise-mobile-app-icon {
-moz-context-properties: fill;
fill: currentColor;
width: 38px;
height: 35px;
height: 56px;
width: auto;
}
#lockwise-app-links {
display: block;
}
.passwords-stored-text,

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

@ -138,7 +138,7 @@
</a>
</div>
</div>
<div class="card-body hidden">
<div class="card-body">
<div class="body-wrapper">
<div id="monitor-body-content">
<div class="monitor-info-wrapper">
@ -204,10 +204,19 @@
<div class="card-body hidden">
<div id="lockwise-body-content" class="body-wrapper">
<div class="no-logins hidden">
<img class="lockwise-mobile-app-icon" src="chrome://browser/content/logos/lockwise-mobile-app.svg"/>
<span data-l10n-id="lockwise-no-logins-content">
<a target="_blank" id="lockwise-inline-link" data-l10n-name="lockwise-inline-link" href=""></a>
</span>
<span class="exit-icon" aria-label="close"></span>
<img class="lockwise-mobile-app-icon light" src="chrome://browser/content/logos/lockwise-light.svg"/>
<img class="lockwise-mobile-app-icon dark" src="chrome://browser/content/logos/lockwise-dark.svg"/>
<span>
<h2 id="lockwise-mobile-app-title" class="card-title" data-l10n-id="lockwise-mobile-app-title"></h2>
<p class="content">
<span data-l10n-id="lockwise-no-logins-card-content"></span>
<span target="_blank" id="lockwise-app-links" data-l10n-id="lockwise-app-links" href="">
<a id="lockwise-android-inline-link" target="_blank" data-l10n-name="lockwise-android-inline-link"></a>
<a id="lockwise-ios-inline-link" target="_blank" data-l10n-name="lockwise-ios-inline-link"></a>
</span>
</p>
</span>
</div>
<div class="has-logins hidden">
<span class="number-of-logins block">

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

@ -49,12 +49,13 @@ add_task(async function setup() {
// Change the endpoints to prevent non-local network connections when landing on the page.
["browser.contentblocking.report.monitor.url", ""],
["browser.contentblocking.report.monitor.sign_in_url", ""],
["browser.contentblocking.report.lockwise.url", ""],
["browser.contentblocking.report.social.url", ""],
["browser.contentblocking.report.cookie.url", ""],
["browser.contentblocking.report.tracker.url", ""],
["browser.contentblocking.report.fingerprinter.url", ""],
["browser.contentblocking.report.cryptominer.url", ""],
["browser.contentblocking.report.lockwise.mobile-android.url", ""],
["browser.contentblocking.report.lockwise.mobile-ios.url", ""],
],
});
@ -218,11 +219,14 @@ add_task(async function checkTelemetryClickEvents() {
is(events.length, 1, `recorded telemetry for lw_open_button`);
await SpecialPowers.spawn(tab.linkedBrowser, [], async function() {
const lockwiseAppLink = await ContentTaskUtils.waitForCondition(() => {
return content.document.getElementById("lockwise-inline-link");
}, "lockwiseAppLink exists");
const lockwiseAndroidAppLink = await ContentTaskUtils.waitForCondition(
() => {
return content.document.getElementById("lockwise-android-inline-link");
},
"lockwiseAndroidAppLink exists"
);
lockwiseAppLink.click();
lockwiseAndroidAppLink.click();
});
events = await waitForTelemetryEventCount(4);
@ -231,9 +235,10 @@ add_task(async function checkTelemetryClickEvents() {
e =>
e[1] == "security.ui.protections" &&
e[2] == "click" &&
e[3] == "lw_sync_link"
e[3] == "lw_sync_link" &&
e[4] == "android"
);
is(events.length, 1, `recorded telemetry for lw_sync_link`);
is(events.length, 1, `recorded telemetry for lw_sync_link, android`);
await SpecialPowers.spawn(tab.linkedBrowser, [], async function() {
const lockwiseReportLink = await ContentTaskUtils.waitForCondition(() => {
@ -439,6 +444,25 @@ add_task(async function checkTelemetryClickEvents() {
`recorded telemetry for cryptominer trackers_about_link`
);
await SpecialPowers.spawn(tab.linkedBrowser, [], async function() {
const lockwiseIOSAppLink = await ContentTaskUtils.waitForCondition(() => {
return content.document.getElementById("lockwise-ios-inline-link");
}, "lockwiseIOSAppLink exists");
lockwiseIOSAppLink.click();
});
events = await waitForTelemetryEventCount(15);
events = events.filter(
e =>
e[1] == "security.ui.protections" &&
e[2] == "click" &&
e[3] == "lw_sync_link" &&
e[4] == "ios"
);
is(events.length, 1, `recorded telemetry for lw_sync_link`);
await BrowserTestUtils.removeTab(tab);
// We open three extra tabs with the click events.
// 1. Monitor's "Viewed Saved Logins" link (goes to about:logins)

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

@ -70,7 +70,9 @@ lockwise-header-content = { -lockwise-brand-name } securely stores your password
lockwise-header-content-logged-in = Securely store and sync your passwords to all your devices.
protection-report-view-logins-button = View Logins
.title = Go to Saved Logins
lockwise-no-logins-content = Get the <a data-l10n-name="lockwise-inline-link">{ -lockwise-brand-name }</a> app to take your passwords everywhere.
lockwise-mobile-app-title = Take your passwords everywhere
lockwise-no-logins-card-content = Use passwords saved in { -brand-short-name } on any device.
lockwise-app-links = { -lockwise-brand-name } for <a data-l10n-name="lockwise-android-inline-link">Android</a> and <a data-l10n-name="lockwise-ios-inline-link">iOS</a>
# This string is displayed after a large numeral that indicates the total number
# of email addresses being monitored. Dont add $count to

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

@ -75,6 +75,7 @@ let RPMAccessManager = {
isWindowPrivate: ["yes"],
},
"about:protections": {
setBoolPref: ["browser.contentblocking.report.hide_lockwise_app"],
getBoolPref: [
"browser.contentblocking.report.lockwise.enabled",
"browser.contentblocking.report.monitor.enabled",
@ -84,14 +85,16 @@ let RPMAccessManager = {
"privacy.trackingprotection.fingerprinting.enabled",
"privacy.trackingprotection.enabled",
"privacy.trackingprotection.socialtracking.enabled",
"browser.contentblocking.report.hide_lockwise_app",
],
getStringPref: [
"browser.contentblocking.category",
"browser.contentblocking.report.lockwise.url",
"browser.contentblocking.report.monitor.url",
"browser.contentblocking.report.monitor.sign_in_url",
"browser.contentblocking.report.manage_devices.url",
"browser.contentblocking.report.proxy_extension.url",
"browser.contentblocking.report.lockwise.mobile-android.url",
"browser.contentblocking.report.lockwise.mobile-ios.url",
],
getIntPref: ["network.cookie.cookieBehavior"],
getFormatURLPref: [

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

@ -1560,6 +1560,7 @@ security.ui.protections:
- 1557050
- 1572825
- 1610897
- 1612088
description: >
User interaction by click events on the protection report.
objects: [

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

@ -29,6 +29,7 @@ const kAllowedPrefs = new Set([
"security.ssl.errorReporting.automatic",
"security.tls.version.enable-deprecated",
"browser.contentblocking.report.hide_lockwise_app",
]);
const kPrefTypeMap = new Map([