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
2020-02-27 22:01:34 +00:00 · 2020-02-27 22:01:34 +00:00 · 798f853902
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@ -1590,12 +1590,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");
--- a/browser/base/content/logos/etp-mobile-dark.svg
+++ b/browser/base/content/logos/etp-mobile-dark.svg
@ -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>
--- a/browser/base/content/logos/etp-mobile-light.svg
+++ b/browser/base/content/logos/etp-mobile-light.svg
@ -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>
--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@ -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)
--- a/browser/components/protections/content/protections.css
+++ b/browser/components/protections/content/protections.css
@ -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;
 }

--- a/browser/components/protections/content/protections.html
+++ b/browser/components/protections/content/protections.html
@ -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=""></a>
+                    <a target="_blank" id="ios-mobile-inline-link" data-l10n-name="ios-mobile-inline-link" href=""></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="">
--- a/browser/components/protections/content/protections.js
+++ b/browser/components/protections/content/protections.js
@ -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
--- a/browser/components/protections/test/browser/browser_protections_report_ui.js
+++ b/browser/components/protections/test/browser/browser_protections_report_ui.js
@ -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.show_mobile_app", false]],
+  });
+  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);
+});
--- a/browser/components/protections/test/browser/browser_protections_telemetry.js
+++ b/browser/components/protections/test/browser/browser_protections_telemetry.js
@ -56,6 +56,8 @@ add_task(async function setup() {
      ["browser.contentblocking.report.cryptominer.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", ""],
    ],
  });

@ -463,6 +465,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("android-mobile-inline-link");
+    }, "android-mobile-inline-link exists");
+
+    mobileAppLink.click();
+  });
+
+  events = await waitForTelemetryEventCount(16);
+  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)
--- a/browser/locales/en-US/browser/protections.ftl
+++ b/browser/locales/en-US/browser/protections.ftl
@ -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.
--- a/toolkit/components/remotepagemanager/MessagePort.jsm
+++ b/toolkit/components/remotepagemanager/MessagePort.jsm
@ -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: [
--- a/toolkit/components/telemetry/Events.yaml
+++ b/toolkit/components/telemetry/Events.yaml
@ -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"]
--- a/toolkit/modules/AsyncPrefs.jsm
+++ b/toolkit/modules/AsyncPrefs.jsm
@ -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([