зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
284f79cb5f
Коммит
ea8a25a55e
|
@ -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. Don’t 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([
|
||||
|
|
Загрузка…
Ссылка в новой задаче