Bug 1550165 - Footer advertising links to Lockwise mobile apps. r=fluent-reviewers,Pike,MattN

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

--HG--
extra : moz-landing-system : lando

browser/app/profile/firefox.js

@@ -1775,11 +1775,16 @@ pref("signon.includeOtherSubdomainsInLookup", true);
 pref("signon.management.page.faqURL", "https://lockwise.firefox.com/faq.html");
 pref("signon.management.page.feedbackURL",
      "https://www.surveygizmo.com/s3/5036102/Lockwise-feedback?ver=%VERSION%");
-pref("signon.management.page.mobileAndroidURL", "https://app.adjust.com/6tteyjo?redirect=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dmozilla.lockbox&utm_campaign=Desktop&utm_adgroup=InProduct&utm_creative=Elipsis_Menu");
-pref("signon.management.page.mobileAppleURL", "https://app.adjust.com/6tteyjo?redirect=https%3A%2F%2Fitunes.apple.com%2Fapp%2Fid1314000270%3Fmt%3D8&utm_campaign=Desktop&utm_adgroup=InProduct&utm_creative=Elipsis_Menu");
+// The utm_creative value is appended within the code (specific to the location on
+// where it is clicked). Be sure that if these two prefs are updated, that
+// the utm_creative param be last. 
+pref("signon.management.page.mobileAndroidURL", "https://app.adjust.com/6tteyjo?redirect=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dmozilla.lockbox&utm_campaign=Desktop&utm_adgroup=InProduct&utm_creative=");
+pref("signon.management.page.mobileAppleURL", "https://app.adjust.com/6tteyjo?redirect=https%3A%2F%2Fitunes.apple.com%2Fapp%2Fid1314000270%3Fmt%3D8&utm_campaign=Desktop&utm_adgroup=InProduct&utm_creative=");
 pref("signon.management.page.breachAlertUrl",
      "https://monitor.firefox.com/breach-details/");
 
+pref("signon.management.page.hideMobileFooter", false);
+
 // Enable the "Simplify Page" feature in Print Preview. This feature
 // is disabled by default in toolkit.
 pref("print.use_simplify_page", true);

browser/components/BrowserGlue.jsm

@@ -135,6 +135,7 @@ let LEGACY_ACTORS = {
         AboutLoginsCopyLoginDetail: { wantUntrusted: true },
         AboutLoginsCreateLogin: { wantUntrusted: true },
         AboutLoginsDeleteLogin: { wantUntrusted: true },
+        AboutLoginsHideFooter: { wantUntrusted: true },
         AboutLoginsImport: { wantUntrusted: true },
         AboutLoginsInit: { wantUntrusted: true },
         AboutLoginsOpenFAQ: { wantUntrusted: true },
@@ -150,6 +151,7 @@ let LEGACY_ACTORS = {
       },
       messages: [
         "AboutLogins:AllLogins",
+        "AboutLogins:LocalizeBadges",
         "AboutLogins:LoginAdded",
         "AboutLogins:LoginModified",
         "AboutLogins:LoginRemoved",
@@ -636,6 +638,7 @@ const listeners = {
   mm: {
     "AboutLogins:CreateLogin": ["AboutLoginsParent"],
     "AboutLogins:DeleteLogin": ["AboutLoginsParent"],
+    "AboutLogins:HideFooter": ["AboutLoginsParent"],
     "AboutLogins:Import": ["AboutLoginsParent"],
     "AboutLogins:MasterPasswordRequest": ["AboutLoginsParent"],
     "AboutLogins:OpenFAQ": ["AboutLoginsParent"],

browser/components/aboutlogins/AboutLoginsChild.jsm

@@ -34,6 +34,8 @@ const TELEMETRY_EVENT_CATEGORY = "pwmgr";
 
 let masterPasswordPromise;
 
+const HIDE_MOBILE_FOOTER_PREF = "signon.management.page.hideMobileFooter";
+
 class AboutLoginsChild extends ActorChild {
   handleEvent(event) {
     switch (event.type) {
@@ -72,6 +74,10 @@ class AboutLoginsChild extends ActorChild {
             cloneFunctions: true,
           }
         );
+        this.sendToContent("InitialInfo", {
+          hideMobileFooter: Services.prefs.getBoolPref(HIDE_MOBILE_FOOTER_PREF),
+          appLocales: Services.locale.appLocalesAsBCP47,
+        });
         break;
       }
       case "AboutLoginsCopyLoginDetail": {
@@ -90,6 +96,10 @@ class AboutLoginsChild extends ActorChild {
         });
         break;
       }
+      case "AboutLoginsHideFooter": {
+        this.mm.sendAsyncMessage("AboutLogins:HideFooter");
+        break;
+      }
       case "AboutLoginsImport": {
         this.mm.sendAsyncMessage("AboutLogins:Import");
         break;
@@ -99,11 +109,15 @@ class AboutLoginsChild extends ActorChild {
         break;
       }
       case "AboutLoginsOpenMobileAndroid": {
-        this.mm.sendAsyncMessage("AboutLogins:OpenMobileAndroid");
+        this.mm.sendAsyncMessage("AboutLogins:OpenMobileAndroid", {
+          source: event.detail,
+        });
         break;
       }
       case "AboutLoginsOpenMobileIos": {
-        this.mm.sendAsyncMessage("AboutLogins:OpenMobileIos");
+        this.mm.sendAsyncMessage("AboutLogins:OpenMobileIos", {
+          source: event.detail,
+        });
         break;
       }
       case "AboutLoginsOpenFeedback": {
@@ -157,6 +171,9 @@ class AboutLoginsChild extends ActorChild {
       case "AboutLogins:AllLogins":
         this.sendToContent("AllLogins", message.data);
         break;
+      case "AboutLogins:LocalizeBadges":
+        this.sendToContent("LocalizeBadges", message.data);
+        break;
       case "AboutLogins:LoginAdded":
         this.sendToContent("LoginAdded", message.data);
         break;

browser/components/aboutlogins/AboutLoginsParent.jsm

@@ -55,6 +55,8 @@ const ABOUT_LOGINS_ORIGIN = "about:logins";
 const MASTER_PASSWORD_NOTIFICATION_ID = "master-password-login-required";
 const PASSWORD_SYNC_NOTIFICATION_ID = "enable-password-sync";
 
+const HIDE_MOBILE_FOOTER_PREF = "signon.management.page.hideMobileFooter";
+
 // about:logins will always use the privileged content process,
 // even if it is disabled for other consumers such as about:newtab.
 const EXPECTED_ABOUTLOGINS_REMOTE_TYPE = E10SUtils.PRIVILEGEDABOUT_REMOTE_TYPE;
@@ -123,6 +125,10 @@ var AboutLoginsParent = {
         Services.logins.removeLogin(login);
         break;
       }
+      case "AboutLogins:HideFooter": {
+        Services.prefs.setBoolPref(HIDE_MOBILE_FOOTER_PREF, true);
+        break;
+      }
       case "AboutLogins:SyncEnable": {
         message.target.ownerGlobal.gSync.openFxAEmailFirstPage(
           "password-manager"
@@ -164,9 +170,12 @@ var AboutLoginsParent = {
       case "AboutLogins:OpenMobileAndroid": {
         const MOBILE_ANDROID_URL_PREF =
           "signon.management.page.mobileAndroidURL";
-        const MOBILE_ANDROID_URL = Services.prefs.getStringPref(
+        const linkTrackingSource = message.data.source;
+        let MOBILE_ANDROID_URL = Services.prefs.getStringPref(
           MOBILE_ANDROID_URL_PREF
         );
+        // Append the `utm_creative` query parameter value:
+        MOBILE_ANDROID_URL += linkTrackingSource;
         message.target.ownerGlobal.openWebLinkIn(MOBILE_ANDROID_URL, "tab", {
           relatedToCurrent: true,
         });
@@ -174,9 +183,10 @@ var AboutLoginsParent = {
       }
       case "AboutLogins:OpenMobileIos": {
         const MOBILE_IOS_URL_PREF = "signon.management.page.mobileAppleURL";
-        const MOBILE_IOS_URL = Services.prefs.getStringPref(
-          MOBILE_IOS_URL_PREF
-        );
+        const linkTrackingSource = message.data.source;
+        let MOBILE_IOS_URL = Services.prefs.getStringPref(MOBILE_IOS_URL_PREF);
+        // Append the `utm_creative` query parameter value:
+        MOBILE_IOS_URL += linkTrackingSource;
         message.target.ownerGlobal.openWebLinkIn(MOBILE_IOS_URL, "tab", {
           relatedToCurrent: true,
         });
@@ -268,6 +278,148 @@ var AboutLoginsParent = {
           messageManager.sendAsyncMessage("AboutLogins:SyncState", syncState);
           this.updatePasswordSyncNotificationState();
 
+          // App store badges sourced from https://developer.apple.com/app-store/marketing/guidelines/#section-badges.
+          // This array mirrors the file names from the App store directory (./content/third-party/app-store)
+          const appStoreLocales = [
+            "az",
+            "ar",
+            "bg",
+            "cs",
+            "da",
+            "de",
+            "el",
+            "en",
+            "es-mx",
+            "es",
+            "et",
+            "fi",
+            "fr",
+            "he",
+            "hu",
+            "id",
+            "it",
+            "ja",
+            "ko",
+            "lt",
+            "lv",
+            "my",
+            "nb",
+            "nl",
+            "nn",
+            "pl",
+            "pt-br",
+            "pt-pt",
+            "ro",
+            "ru",
+            "si",
+            "sk",
+            "sv",
+            "th",
+            "tl",
+            "tr",
+            "vi",
+            "zh-hans",
+            "zh-hant",
+          ];
+
+          // Google play badges sourced from https://play.google.com/intl/en_us/badges/
+          // This array mirrors the file names from the play store directory (./content/third-party/play-store)
+          const playStoreLocales = [
+            "af",
+            "ar",
+            "az",
+            "be",
+            "bg",
+            "bn",
+            "bs",
+            "ca",
+            "cs",
+            "da",
+            "de",
+            "el",
+            "en",
+            "es",
+            "et",
+            "eu",
+            "fa",
+            "fi",
+            "fr",
+            "gl",
+            "gu",
+            "he",
+            "hi",
+            "hr",
+            "hu",
+            "hy",
+            "id",
+            "is",
+            "it",
+            "ja",
+            "ka",
+            "kk",
+            "km",
+            "kn",
+            "ko",
+            "lo",
+            "lt",
+            "lv",
+            "mk",
+            "mr",
+            "ms",
+            "my",
+            "nb",
+            "ne",
+            "nl",
+            "nn",
+            "pa",
+            "pl",
+            "pt-br",
+            "pt",
+            "ro",
+            "ru",
+            "si",
+            "sk",
+            "sl",
+            "sq",
+            "sr",
+            "sv",
+            "ta",
+            "te",
+            "th",
+            "tl",
+            "tr",
+            "uk",
+            "ur",
+            "uz",
+            "vi",
+            "zh-cn",
+            "zh-tw",
+          ];
+
+          const playStoreBadgeLanguage = Services.locale.negotiateLanguages(
+            Services.locale.appLocalesAsBCP47,
+            playStoreLocales,
+            "en-US",
+            Services.locale.langNegStrategyLookup
+          );
+
+          const appStoreBadgeLanguage = Services.locale.negotiateLanguages(
+            Services.locale.appLocalesAsBCP47,
+            appStoreLocales,
+            "en-US",
+            Services.locale.langNegStrategyLookup
+          );
+
+          const selectedBadgeLanguages = {
+            appStoreBadge: appStoreBadgeLanguage,
+            playStoreBadge: playStoreBadgeLanguage,
+          };
+
+          messageManager.sendAsyncMessage(
+            "AboutLogins:LocalizeBadges",
+            selectedBadgeLanguages
+          );
+
           if (BREACH_ALERTS_ENABLED) {
             const breachesByLoginGUID = await LoginHelper.getBreachesForLogins(
               logins

browser/components/aboutlogins/content/aboutLogins.css

@@ -51,6 +51,10 @@ login-item {
   max-width: 800px;
 }
 
+login-footer {
+  grid-area: login;
+}
+
 #branding-logo {
   height: 32px;
   margin-inline-end: 18px;

browser/components/aboutlogins/content/aboutLogins.html

@@ -16,6 +16,7 @@
     <script type="module" src="chrome://browser/content/aboutlogins/components/fxaccounts-button.js"></script>
     <script type="module" src="chrome://browser/content/aboutlogins/components/login-filter.js"></script>
     <script type="module" src="chrome://browser/content/aboutlogins/components/login-intro.js"></script>
+    <script type="module" src="chrome://browser/content/aboutlogins/components/login-footer.js"></script>
     <script type="module" src="chrome://browser/content/aboutlogins/components/login-item.js"></script>
     <script type="module" src="chrome://browser/content/aboutlogins/components/login-list.js"></script>
     <script type="module" src="chrome://browser/content/aboutlogins/components/login-list-item.js"></script>
@@ -36,6 +37,7 @@
     <login-list></login-list>
     <login-item></login-item>
     <login-intro></login-intro>
+    <login-footer hidden></login-footer>
     <confirmation-dialog hidden></confirmation-dialog>
 
     <template id="confirmation-dialog-template">
@@ -213,5 +215,25 @@
         <button role="menuitem" class="menuitem-button menuitem-mobile menuitem-mobile-ios ghost-button" data-event-name="AboutLoginsOpenMobileIos" data-l10n-id="menu-menuitem-iphone-app"></button>
       </ul>
     </template>
+
+    <template id="login-footer-template">
+      <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-footer.css">
+      <footer>
+        <div class="footer-content message-bar">
+          <span class="close" data-event-name="AboutLoginsHideFooter"></span>
+          <p>
+            <strong data-l10n-id="login-app-promo-title"></strong><br>
+            <span data-l10n-id="login-app-promo-subtitle"></span>
+          </p>
+          <button class="app-store">
+            <img class="image-app-store" data-event-name="AboutLoginsOpenMobileIos" data-l10n-id="login-app-promo-apple" src="" alt=""/>
+          </button>
+          <button class="play-store" >
+            <img class="image-play-store" data-event-name="AboutLoginsOpenMobileAndroid" data-l10n-id="login-app-promo-android" src="" alt=""/>
+          </button>
+        </div>
+      </footer>
+    </template>
   </body>
 </html>

browser/components/aboutlogins/content/aboutLogins.js

@@ -10,7 +10,9 @@ const gElements = {
   loginIntro: document.querySelector("login-intro"),
   loginItem: document.querySelector("login-item"),
   loginFilter: document.querySelector("login-filter"),
+  loginFooter: document.querySelector("login-footer"),
 };
+
 let numberOfLogins = 0;
 
 let { searchParams } = new URL(document.location);
@@ -18,8 +20,6 @@ if (searchParams.get("filter")) {
   gElements.loginFilter.value = searchParams.get("filter");
 }
 
-document.dispatchEvent(new CustomEvent("AboutLoginsInit", { bubbles: true }));
-
 gElements.loginFilter.focus();
 
 function updateNoLogins() {
@@ -35,6 +35,14 @@ window.addEventListener("AboutLoginsChromeToContent", event => {
       updateNoLogins();
       break;
     }
+    case "InitialInfo": {
+      gElements.loginFooter.hidden = event.detail.value.hideMobileFooter;
+      break;
+    }
+    case "LocalizeBadges": {
+      gElements.loginFooter.showStoreIconsForLocales(event.detail.value);
+      break;
+    }
     case "LoginAdded": {
       gElements.loginList.loginAdded(event.detail.value);
       gElements.loginItem.loginAdded(event.detail.value);
@@ -69,3 +77,5 @@ window.addEventListener("AboutLoginsChromeToContent", event => {
     }
   }
 });
+
+document.dispatchEvent(new CustomEvent("AboutLoginsInit", { bubbles: true }));

browser/components/aboutlogins/content/components/login-footer.css

@@ -0,0 +1,67 @@
+/* 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/. */
+
+footer {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  position: absolute;
+  margin-inline-start: 40px;
+  bottom: 40px;
+}
+
+.footer-content {
+  background-color: var(--in-content-box-background);
+  box-shadow: var(--shadow-10);
+  max-width: 700px;
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  padding-inline-start: 40px;
+  padding-inline-end: 80px;
+}
+
+.footer-content > p {
+  font-size: 15px;
+  margin: 0;
+  line-height: 1.5;
+  padding-inline-end: 40px;
+}
+
+.footer-content button {
+  background-color: transparent;
+  padding: 0;
+}
+
+.footer-content button:hover {
+  cursor: pointer;
+  background-color: transparent;
+}
+
+.footer-content button img {
+  width: auto;
+  height: 40px;
+  display: block;
+}
+
+.footer-content button + button img {
+  height: 60px;
+}
+
+.footer-content .close {
+  -moz-context-properties: fill, fill-opacity;
+  background-image: url("chrome://global/skin/icons/close.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  display: block;
+  fill: currentColor;
+  fill-opacity: 0;
+  height: 16px;
+  position: absolute;
+  inset-inline-end: 12px;
+  top: 12px;
+  width: 16px;
+}

browser/components/aboutlogins/content/components/login-footer.js

@@ -0,0 +1,76 @@
+/* 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/. */
+
+export default class LoginFooter extends HTMLElement {
+  connectedCallback() {
+    if (this.shadowRoot) {
+      return;
+    }
+
+    let LoginFooterTemplate = document.querySelector("#login-footer-template");
+    let shadowRoot = this.attachShadow({ mode: "open" });
+    document.l10n.connectRoot(shadowRoot);
+    shadowRoot.appendChild(LoginFooterTemplate.content.cloneNode(true));
+
+    this.shadowRoot.querySelector(".app-store").addEventListener("click", this);
+    this.shadowRoot
+      .querySelector(".play-store")
+      .addEventListener("click", this);
+    this.shadowRoot.querySelector(".close").addEventListener("click", this);
+    this._imageAppStore = shadowRoot.querySelector(".image-app-store");
+    this._imagePlayStore = shadowRoot.querySelector(".image-play-store");
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "click": {
+        let classList = event.originalTarget.classList;
+
+        if (
+          classList.contains("image-play-store") ||
+          classList.contains("image-app-store") ||
+          classList.contains("close")
+        ) {
+          let eventName = event.originalTarget.dataset.eventName;
+          const linkTrackingSource = "Footer_Menu";
+          document.dispatchEvent(
+            new CustomEvent(eventName, {
+              bubbles: true,
+              detail: linkTrackingSource,
+            })
+          );
+
+          if (classList.contains("close")) {
+            this.shadowRoot.host.hidden = true;
+          }
+        }
+        break;
+      }
+    }
+  }
+
+  _setAppStoreImage(lang) {
+    const currLang = lang.toLowerCase();
+    let appStoreLink =
+      "chrome://browser/content/aboutlogins/third-party/app-store/app_" +
+      currLang +
+      ".png";
+    this._imageAppStore.setAttribute("src", appStoreLink);
+  }
+
+  _setPlayStoreImage(lang) {
+    const currLang = lang.toLowerCase();
+    let playStoreLink =
+      "chrome://browser/content/aboutlogins/third-party/play-store/play_" +
+      currLang +
+      ".png";
+    this._imagePlayStore.setAttribute("src", playStoreLink);
+  }
+
+  showStoreIconsForLocales(appLocales) {
+    this._setAppStoreImage(appLocales.appStoreBadge[0]);
+    this._setPlayStoreImage(appLocales.playStoreBadge[0]);
+  }
+}
+customElements.define("login-footer", LoginFooter);

browser/components/aboutlogins/content/components/menu-button.js

@@ -67,9 +67,11 @@ export default class MenuButton extends HTMLElement {
         let classList = event.originalTarget.classList;
         if (classList.contains("menuitem-button")) {
           let eventName = event.originalTarget.dataset.eventName;
+          const linkTrackingSource = "Elipsis_Menu";
           document.dispatchEvent(
             new CustomEvent(eventName, {
               bubbles: true,
+              detail: linkTrackingSource,
             })
           );
         }

browser/components/aboutlogins/content/third-party/LICENSE

@@ -0,0 +1,2 @@
+// The image files in this folder are trademarks of Google and Apple.
+// Google and Apple's trademark policies govern their use.