mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-20 16:55:40 +00:00
Bug 1612091 - Add mobile callout to the ETP card. r=fluent-reviewers,johannh,flod
Differential Revision: https://phabricator.services.mozilla.com/D63382 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Erica Wright
parent
757896954c
commit
3a45191c3e
@ -1587,12 +1587,17 @@ pref("browser.contentblocking.report.monitor.enabled", true);
|
||||
// Disable Protections report's Proxy card by default.
|
||||
pref("browser.contentblocking.report.proxy.enabled", false);
|
||||
|
||||
// Disable the mobile promotion by default.
|
||||
pref("browser.contentblocking.report.show_mobile_app", 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.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");
|
||||
pref("browser.contentblocking.report.mobile-ios.url", "https://apps.apple.com/app/firefox-private-safe-browser/id989804926");
|
||||
pref("browser.contentblocking.report.mobile-android.url", "https://play.google.com/store/apps/details?id=org.mozilla.firefox&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");
|
||||
|
||||
4
browser/base/content/logos/etp-mobile-dark.svg
Normal file
4
browser/base/content/logos/etp-mobile-dark.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- 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 width="50" height="58" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="13.375%" y1="0%" x2="86.625%" y2="100%" id="a"><stop stop-color="#C689FF" offset="0%"/><stop stop-color="#00B3F4" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M43.542 35.285c.174 1.234.01 1.996-.49 2.285L23.83 48.668c-.75.432-1.745.113-2.225-.718L4.08 17.598c-.478-.828-.258-1.853.491-2.286L23.793 4.215c.752-.434 1.747-.11 2.225.718l17.524 30.352zM33.997 49.68l4.618-2.666-1.616-2.8-4.618 2.667 1.616 2.8zM2.845 11.74c-2.548 1.47-3.17 5.164-1.388 8.249l19.382 33.57c1.781 3.086 5.29 4.394 7.838 2.923l18.487-10.673c2.548-1.471 3.17-5.164 1.388-8.25L29.17 3.989C27.389.903 23.88-.406 21.332 1.065L2.845 11.74z" fill="#D7D7DB"/><path d="M5.5 5.088c0 2.234-.067 3.795 0 4.537.036 2.173.751 4.28 2.045 6.025A5.807 5.807 0 0011 17.857a5.804 5.804 0 003.454-2.207A10.411 10.411 0 0016.5 9.625c.067-.742 0-2.303 0-4.537L11 4.146l-5.5.942zM11 20.633l-.154-.016A8.585 8.585 0 015.33 17.28a12.733 12.733 0 01-2.476-7.269C2.75 8.858 2.75 6.325 2.75 4.916a2.537 2.537 0 012.1-2.506L11 1.354l6.148 1.056a2.537 2.537 0 012.102 2.507c0 1.407 0 3.94-.11 5.094a12.732 12.732 0 01-2.475 7.269 8.585 8.585 0 01-5.516 3.337l-.149.016zm0-14.395l-3.438.589c.013 1.295.042 2.275.086 2.75A7.927 7.927 0 009.2 14.43a3.692 3.692 0 001.788 1.296H11V6.238z" transform="rotate(-30 45.883 -4.83)" fill="url(#a)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
4
browser/base/content/logos/etp-mobile-light.svg
Normal file
4
browser/base/content/logos/etp-mobile-light.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<!-- 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 width="50" height="57" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="13.375%" y1="0%" x2="86.625%" y2="100%" id="a"><stop stop-color="#9059FF" offset="0%"/><stop stop-color="#0250BB" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M43.436 34.835c.173 1.234.01 1.996-.491 2.286L23.723 48.218c-.749.433-1.745.113-2.225-.718L3.975 17.148c-.479-.828-.258-1.853.49-2.285L23.688 3.765c.751-.434 1.747-.11 2.225.718l17.524 30.352zM33.89 49.232l4.619-2.667-1.616-2.8-4.619 2.668 1.616 2.799zM2.738 11.289C.191 12.76-.43 16.453 1.351 19.538l19.382 33.571c1.78 3.085 5.29 4.393 7.838 2.923l18.487-10.674c2.547-1.47 3.169-5.164 1.388-8.249L29.063 3.538C27.283.453 23.773-.855 21.226.615L2.738 11.29z" fill-opacity=".8" fill="#0C0C0D"/><path d="M5.5 5.088c0 2.234-.067 3.795 0 4.537.036 2.173.751 4.28 2.045 6.025A5.807 5.807 0 0011 17.857a5.804 5.804 0 003.454-2.207A10.411 10.411 0 0016.5 9.625c.067-.742 0-2.303 0-4.537L11 4.146l-5.5.942zM11 20.633l-.154-.016A8.585 8.585 0 015.33 17.28a12.733 12.733 0 01-2.476-7.269C2.75 8.858 2.75 6.325 2.75 4.916a2.537 2.537 0 012.1-2.506L11 1.354l6.148 1.056a2.537 2.537 0 012.102 2.507c0 1.407 0 3.94-.11 5.094a12.732 12.732 0 01-2.475 7.269 8.585 8.585 0 01-5.516 3.337l-.149.016zm0-14.395l-3.438.589c.013 1.295.042 2.275.086 2.75A7.927 7.927 0 009.2 14.43a3.692 3.692 0 001.788 1.296H11V6.238z" transform="rotate(-30 44.99 -4.856)" fill="url(#a)"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -20,6 +20,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/etp-mobile-dark.svg (content/logos/etp-mobile-dark.svg)
|
||||
content/browser/logos/etp-mobile-light.svg (content/logos/etp-mobile-light.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)
|
||||
|
||||
@ -108,11 +108,12 @@ h2 {
|
||||
}
|
||||
|
||||
/* We want to hide certain components depending on its state. */
|
||||
.no-logins .monitor-scanned-wrapper,
|
||||
.etp-card.custom-not-blocking .card-body,
|
||||
.etp-card.custom-not-blocking #protection-details,
|
||||
#manage-protections,
|
||||
.etp-card .icon.dark,
|
||||
.lockwise-mobile-app-icon.dark,
|
||||
.mobile-app-icon.dark,
|
||||
a.hidden,
|
||||
.loading .card-body.hidden,
|
||||
.lockwise-card.hidden,
|
||||
@ -160,11 +161,11 @@ a.hidden,
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lockwise-mobile-app-icon.dark {
|
||||
.mobile-app-icon.dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lockwise-mobile-app-icon.light {
|
||||
.mobile-app-icon.light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -210,11 +211,14 @@ a.hidden,
|
||||
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(ltr) {
|
||||
right: var(--exit-icon-position);
|
||||
}
|
||||
|
||||
.exit-icon:dir(rtl) {
|
||||
left: var(--exit-icon-position);
|
||||
}
|
||||
@ -569,18 +573,28 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
|
||||
grid-area: cryptominer;
|
||||
}
|
||||
|
||||
#mobile-hanger {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.etp-card {
|
||||
grid-template-rows: 20% auto auto;
|
||||
}
|
||||
|
||||
/* Lockwise Card */
|
||||
|
||||
#lockwise-body-content > .no-logins,
|
||||
#lockwise-body-content > .has-logins {
|
||||
#lockwise-body-content > .has-logins,
|
||||
#etp-mobile-content {
|
||||
display: grid;
|
||||
font-size: 0.875em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#lockwise-body-content > .no-logins {
|
||||
#lockwise-body-content > .no-logins,
|
||||
#etp-mobile-content {
|
||||
grid: 1fr / 1fr 6fr;
|
||||
grid-gap: 0;
|
||||
}
|
||||
|
||||
#lockwise-body-content > .has-logins {
|
||||
@ -588,12 +602,14 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.lockwise-mobile-app-icon {
|
||||
.lockwise-mobile-app-icon,
|
||||
.mobile-app-icon {
|
||||
height: 56px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#lockwise-app-links {
|
||||
#lockwise-app-links,
|
||||
#mobile-app-links {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -114,6 +114,25 @@
|
||||
<div id="graph-total-summary"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile-hanger" class="card-body hidden">
|
||||
<div class="body-wrapper">
|
||||
<span class="exit-icon" aria-label="close"></span>
|
||||
<div id="etp-mobile-content">
|
||||
<img class="mobile-app-icon light" src="chrome://browser/content/logos/etp-mobile-light.svg"/>
|
||||
<img class="mobile-app-icon dark" src="chrome://browser/content/logos/etp-mobile-dark.svg"/>
|
||||
<span>
|
||||
<h2 class="card-title" data-l10n-id="mobile-app-title"></h2>
|
||||
<p class="content">
|
||||
<span data-l10n-id="mobile-app-card-content"></span>
|
||||
<span target="_blank" id="mobile-app-links" data-l10n-id="mobile-app-links">
|
||||
<a target="_blank" id="android-mobile-inline-link" data-l10n-name="android-mobile-inline-link" href="https://play.google.com/store/apps/details?id=org.mozilla.fenix"></a>
|
||||
<a target="_blank" id="ios-mobile-inline-link" data-l10n-name="ios-mobile-inline-link" href="https://apps.apple.com/app/firefox-private-safe-browser/id989804926"></a>
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Markup for Monitor card. -->
|
||||
<section class="card card-no-hover monitor-card hidden">
|
||||
@ -205,10 +224,10 @@
|
||||
<div id="lockwise-body-content" class="body-wrapper">
|
||||
<div class="no-logins hidden">
|
||||
<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"/>
|
||||
<img class="mobile-app-icon light" src="chrome://browser/content/logos/lockwise-light.svg"/>
|
||||
<img class="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>
|
||||
<h2 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="">
|
||||
|
||||
@ -359,6 +359,34 @@ document.addEventListener("DOMContentLoaded", e => {
|
||||
createGraph(message.data);
|
||||
});
|
||||
|
||||
let exitIcon = document.querySelector("#mobile-hanger .exit-icon");
|
||||
// hide the mobile promotion and keep hidden with a pref.
|
||||
exitIcon.addEventListener("click", () => {
|
||||
RPMSetBoolPref("browser.contentblocking.report.show_mobile_app", false);
|
||||
document.getElementById("mobile-hanger").classList.add("hidden");
|
||||
});
|
||||
|
||||
if (RPMGetBoolPref("browser.contentblocking.report.show_mobile_app")) {
|
||||
document.getElementById("mobile-hanger").classList.remove("hidden");
|
||||
}
|
||||
|
||||
let androidMobileAppLink = document.getElementById(
|
||||
"android-mobile-inline-link"
|
||||
);
|
||||
androidMobileAppLink.href = RPMGetStringPref(
|
||||
"browser.contentblocking.report.mobile-android.url"
|
||||
);
|
||||
androidMobileAppLink.addEventListener("click", () => {
|
||||
document.sendTelemetryEvent("click", "mobile_app_link", "android");
|
||||
});
|
||||
let iosMobileAppLink = document.getElementById("ios-mobile-inline-link");
|
||||
iosMobileAppLink.href = RPMGetStringPref(
|
||||
"browser.contentblocking.report.mobile-ios.url"
|
||||
);
|
||||
iosMobileAppLink.addEventListener("click", () => {
|
||||
document.sendTelemetryEvent("click", "mobile_app_link", "ios");
|
||||
});
|
||||
|
||||
let lockwiseEnabled = RPMGetBoolPref(
|
||||
"browser.contentblocking.report.lockwise.enabled",
|
||||
true
|
||||
|
||||
@ -727,3 +727,46 @@ add_task(async function test_etp_custom_protections_off() {
|
||||
Services.prefs.setStringPref("browser.contentblocking.category", "standard");
|
||||
BrowserTestUtils.removeTab(tab);
|
||||
});
|
||||
|
||||
// Ensure that the ETP mobile promotion card is shown when the pref is on, and hidden when the pref is off
|
||||
add_task(async function test_etp_mobile_promotion() {
|
||||
await SpecialPowers.pushPrefEnv({
|
||||
set: [["browser.contentblocking.report.show_mobile_app", true]],
|
||||
});
|
||||
let tab = await BrowserTestUtils.openNewForegroundTab({
|
||||
url: "about:protections",
|
||||
gBrowser,
|
||||
});
|
||||
await SpecialPowers.spawn(tab.linkedBrowser, [], async function() {
|
||||
let mobilePromotion = content.document.getElementById("mobile-hanger");
|
||||
Assert.ok(
|
||||
ContentTaskUtils.is_visible(mobilePromotion),
|
||||
"Mobile promotions card is displayed"
|
||||
);
|
||||
|
||||
// Card should hide after the X is clicked.
|
||||
mobilePromotion.querySelector(".exit-icon").click();
|
||||
Assert.ok(
|
||||
ContentTaskUtils.is_hidden(mobilePromotion),
|
||||
"Mobile promotions card is no longer displayed"
|
||||
);
|
||||
});
|
||||
BrowserTestUtils.removeTab(tab);
|
||||
|
||||
await SpecialPowers.pushPrefEnv({
|
||||
set: [["browser.contentblocking.report.hide_mobile_app", true]],
|
||||
});
|
||||
tab = await BrowserTestUtils.openNewForegroundTab({
|
||||
url: "about:protections",
|
||||
gBrowser,
|
||||
});
|
||||
await SpecialPowers.spawn(tab.linkedBrowser, [], async function() {
|
||||
let mobilePromotion = content.document.getElementById("mobile-hanger");
|
||||
Assert.ok(
|
||||
ContentTaskUtils.is_hidden(mobilePromotion),
|
||||
"Mobile promotions card is hidden"
|
||||
);
|
||||
});
|
||||
|
||||
BrowserTestUtils.removeTab(tab);
|
||||
});
|
||||
|
||||
@ -463,6 +463,29 @@ add_task(async function checkTelemetryClickEvents() {
|
||||
);
|
||||
is(events.length, 1, `recorded telemetry for lw_sync_link`);
|
||||
|
||||
await SpecialPowers.spawn(tab.linkedBrowser, [], async function() {
|
||||
// Show all elements, so we can click on them, even though our user is not logged in.
|
||||
let hidden_elements = content.document.querySelectorAll(".hidden");
|
||||
for (let el of hidden_elements) {
|
||||
el.style.display = "block ";
|
||||
}
|
||||
|
||||
const mobileAppLink = await ContentTaskUtils.waitForCondition(() => {
|
||||
return content.document.getElementById("mobile-app-link");
|
||||
}, "mobile-app-link exists");
|
||||
|
||||
mobileAppLink.click();
|
||||
});
|
||||
|
||||
events = await waitForTelemetryEventCount(15);
|
||||
events = events.filter(
|
||||
e =>
|
||||
e[1] == "security.ui.protections" &&
|
||||
e[2] == "click" &&
|
||||
e[3] == "mobile_app_link"
|
||||
);
|
||||
is(events.length, 1, `recorded telemetry for mobile_app_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)
|
||||
|
||||
@ -64,6 +64,10 @@ fingerprinter-tab-content = Fingerprinters collect settings from your browser an
|
||||
cryptominer-tab-title = Cryptominers
|
||||
cryptominer-tab-content = Cryptominers use your system’s computing power to mine digital money. Cryptomining scripts drain your battery, slow down your computer, and can increase your energy bill. <a data-l10n-name="learn-more-link">Learn more</a>
|
||||
|
||||
mobile-app-title = Block ad trackers across more devices
|
||||
mobile-app-card-content = Use the mobile browser with built-in protection against ad tracking.
|
||||
mobile-app-links = { -brand-product-name } Browser for <a data-l10n-name="android-mobile-inline-link">Android</a> and <a data-l10n-name="ios-mobile-inline-link">iOS</a>
|
||||
|
||||
lockwise-title = Never forget a password again
|
||||
lockwise-title-logged-in = { -lockwise-brand-name }
|
||||
lockwise-header-content = { -lockwise-brand-name } securely stores your passwords in your browser.
|
||||
|
||||
@ -76,7 +76,10 @@ let RPMAccessManager = {
|
||||
isWindowPrivate: ["yes"],
|
||||
},
|
||||
"about:protections": {
|
||||
setBoolPref: ["browser.contentblocking.report.hide_lockwise_app"],
|
||||
setBoolPref: [
|
||||
"browser.contentblocking.report.hide_lockwise_app",
|
||||
"browser.contentblocking.report.show_mobile_app",
|
||||
],
|
||||
getBoolPref: [
|
||||
"browser.contentblocking.report.lockwise.enabled",
|
||||
"browser.contentblocking.report.monitor.enabled",
|
||||
@ -87,6 +90,7 @@ let RPMAccessManager = {
|
||||
"privacy.trackingprotection.enabled",
|
||||
"privacy.trackingprotection.socialtracking.enabled",
|
||||
"browser.contentblocking.report.hide_lockwise_app",
|
||||
"browser.contentblocking.report.show_mobile_app",
|
||||
],
|
||||
getStringPref: [
|
||||
"browser.contentblocking.category",
|
||||
@ -96,6 +100,8 @@ let RPMAccessManager = {
|
||||
"browser.contentblocking.report.proxy_extension.url",
|
||||
"browser.contentblocking.report.lockwise.mobile-android.url",
|
||||
"browser.contentblocking.report.lockwise.mobile-ios.url",
|
||||
"browser.contentblocking.report.mobile-ios.url",
|
||||
"browser.contentblocking.report.mobile-android.url",
|
||||
],
|
||||
getIntPref: ["network.cookie.cookieBehavior"],
|
||||
getFormatURLPref: [
|
||||
|
||||
@ -1542,6 +1542,7 @@ security.ui.protections:
|
||||
bug_numbers:
|
||||
- 1557050
|
||||
- 1610897
|
||||
- 1612091
|
||||
description: >
|
||||
User closed on the protection report.
|
||||
expiry_version: "80"
|
||||
@ -1561,6 +1562,7 @@ security.ui.protections:
|
||||
- 1572825
|
||||
- 1610897
|
||||
- 1612088
|
||||
- 1612091
|
||||
description: >
|
||||
User interaction by click events on the protection report.
|
||||
objects: [
|
||||
@ -1573,6 +1575,7 @@ security.ui.protections:
|
||||
"mtr_about_link",
|
||||
"mtr_signup_button",
|
||||
"trackers_about_link",
|
||||
"mobile_app_link",
|
||||
]
|
||||
expiry_version: "80"
|
||||
record_in_processes: ["content"]
|
||||
|
||||
@ -30,6 +30,7 @@ const kAllowedPrefs = new Set([
|
||||
"security.ssl.errorReporting.automatic",
|
||||
"security.tls.version.enable-deprecated",
|
||||
"browser.contentblocking.report.hide_lockwise_app",
|
||||
"browser.contentblocking.report.show_mobile_app",
|
||||
]);
|
||||
|
||||
const kPrefTypeMap = new Map([
|
||||
|
||||
Loading…
Reference in New Issue
Block a user