Merge mozilla-central to mozilla-inbound.

--HG--
extra : amend_source : 61b0a9cac79e3a1ad10902ee2b6ec9487f8ba053

browser/app/profile/firefox.js

@@ -483,7 +483,7 @@ pref("browser.tabs.delayHidingAudioPlayingIconMS", 3000);
   // for about: pages. This pref name did not age well: we will have multiple
   // types of privileged content processes, each with different privileges.
   // types of privleged content processes, each with different privleges.
-  pref("browser.tabs.remote.separatePrivilegedContentProcess", true);
+  pref("browser.tabs.remote.separatePrivilegedContentProcess", false);
   // Pref to control whether we use a separate privileged content process
   // for certain mozilla webpages (which are listed in the pref
   // browser.tabs.remote.separatedMozillaDomains).
@@ -1773,11 +1773,16 @@ pref("signon.management.overrideURI", "about:logins?filter=%DOMAIN%");
 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/app/winlauncher/ErrorHandler.cpp

@@ -286,7 +286,8 @@ static bool AddWscInfo(mozilla::JSONWriter& aJson) {
 
   // We need COM for this. Using ProcessRuntime so that process-global COM
   // configuration is done correctly
-  mozilla::mscom::ProcessRuntime mscom(GeckoProcessType_Default);
+  mozilla::mscom::ProcessRuntime mscom(
+      mozilla::mscom::ProcessRuntime::ProcessCategory::Launcher);
   if (!mscom) {
     // We haven't written anything yet, so we can return true here and continue
     // capturing data.

browser/base/content/browser.xhtml

@@ -735,7 +735,11 @@
               </hbox>
               <arrowscrollbox orient="horizontal" flex="1" style="min-width: 1px;" clicktoscroll="true" class="tabbrowser-arrowscrollbox" scrolledtostart="true" scrolledtoend="true">
                 <tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="true" fadein="true"/>
-                <toolbarbutton class="tabs-newtab-button toolbarbutton-1" command="cmd_newNavigatorTab" onclick="checkForMiddleClick(this, event);"/>
+                <toolbarbutton id="tabs-newtab-button"
+                               class="tabs-newtab-button toolbarbutton-1"
+                               command="cmd_newNavigatorTab"
+                               onclick="checkForMiddleClick(this, event);"
+                               tooltip="dynamic-shortcut-tooltip"/>
                 <spacer class="closing-tabs-spacer" style="width: 0;"/>
               </arrowscrollbox>
               <html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>

browser/base/content/tabbrowser-tabs.js

@@ -67,11 +67,6 @@
       var tab = this.allTabs[0];
       tab.label = this.emptyTabTitle;
 
-      this.newTabButton.setAttribute(
-        "tooltiptext",
-        GetDynamicShortcutTooltipText("tabs-newtab-button")
-      );
-
       window.addEventListener("resize", this);
 
       this.boundObserve = (...args) => this.observe(...args);
@@ -1063,7 +1058,7 @@
                 "menupopup"
               );
               if (parent.id) {
-                popup.id = "newtab-popup";
+                popup.id = parent.id + "-popup";
               } else {
                 popup.setAttribute("anonid", "newtab-popup");
               }
@@ -1088,6 +1083,15 @@
 
               parent.setAttribute("type", "menu");
             }
+
+            // Update tooltip text and evict from tooltip cache
+            if (containersEnabled) {
+              nodeToTooltipMap[parent.id] = "newTabContainer.tooltip";
+            } else {
+              nodeToTooltipMap[parent.id] = "newTabButton.tooltip";
+            }
+
+            gDynamicTooltipCache.delete(parent.id);
           }
 
           break;

browser/base/content/test/general/browser_restore_isAppTab.js

@@ -48,7 +48,7 @@ var restart = async function(browser) {
   // Make sure the main process has all of the current tab state before crashing
   await TabStateFlusher.flush(browser);
 
-  await BrowserTestUtils.crashBrowser(browser);
+  await BrowserTestUtils.crashFrame(browser);
 
   let tab = gBrowser.getTabForBrowser(browser);
   SessionStore.reviveCrashedTab(tab);

browser/base/content/test/performance/io/browser.ini

@@ -21,3 +21,5 @@ environment =
 [../browser_startup_mainthreadio.js]
 [../browser_startup_content_mainthreadio.js]
 [../browser_startup_syncIPC.js]
+skip-if = (os == 'win') && asan # Bug 1574535
+

browser/base/content/test/static/browser_all_files_referenced.js

@@ -47,6 +47,11 @@ var gExceptionPaths = [
 
   // Exclude all search-extensions because they aren't referenced by filename
   "resource://search-extensions/",
+
+  // Bug 1550165 - Exclude localized App/Play store badges. These badges
+  // are displayed in a promo area on the first load of about:logins.
+  "chrome://browser/content/aboutlogins/third-party/app-store/",
+  "chrome://browser/content/aboutlogins/third-party/play-store/",
 ];
 
 // These are not part of the omni.ja file, so we find them only when running

browser/base/content/test/tabcrashed/browser_autoSubmitRequest.js

@@ -34,7 +34,7 @@ add_task(async function test_show_form() {
       await TabStateFlusher.flush(browser);
 
       // Now crash the browser.
-      await BrowserTestUtils.crashBrowser(browser);
+      await BrowserTestUtils.crashFrame(browser);
 
       let doc = browser.contentDocument;
 
@@ -87,7 +87,7 @@ add_task(async function test_show_form() {
     async function(browser) {
       await TabStateFlusher.flush(browser);
       // Now crash the browser.
-      await BrowserTestUtils.crashBrowser(browser);
+      await BrowserTestUtils.crashFrame(browser);
 
       let doc = browser.contentDocument;
 
@@ -138,7 +138,7 @@ add_task(async function test_no_offer() {
       prepareNoDump();
 
       // Now crash the browser.
-      await BrowserTestUtils.crashBrowser(browser);
+      await BrowserTestUtils.crashFrame(browser);
 
       let doc = browser.contentDocument;
 

browser/base/content/test/tabcrashed/browser_clearEmail.js

@@ -37,7 +37,7 @@ add_task(async function test_clear_email() {
       prefs.setBoolPref("emailMe", true);
 
       let tab = gBrowser.getTabForBrowser(browser);
-      await BrowserTestUtils.crashBrowser(
+      await BrowserTestUtils.crashFrame(
         browser,
         /* shouldShowTabCrashPage */ true,
         /* shouldClearMinidumps */ false

browser/base/content/test/tabcrashed/browser_noPermanentKey.js

@@ -20,7 +20,7 @@ add_task(async function test_without_dump() {
     async function(browser) {
       delete browser.permanentKey;
 
-      await BrowserTestUtils.crashBrowser(browser);
+      await BrowserTestUtils.crashFrame(browser);
       let crashReport = promiseCrashReport();
 
       await ContentTask.spawn(browser, null, async function() {

browser/base/content/test/tabcrashed/browser_showForm.js

@@ -27,7 +27,7 @@ add_task(async function test_show_form() {
       });
 
       // Now crash the browser.
-      await BrowserTestUtils.crashBrowser(browser);
+      await BrowserTestUtils.crashFrame(browser);
 
       let doc = browser.contentDocument;
 

browser/base/content/test/tabcrashed/browser_shown.js

@@ -58,7 +58,7 @@ function crashTabTestHelper(fieldValues, expectedExtra) {
       let originalEmail = prefs.getCharPref("email");
 
       let tab = gBrowser.getTabForBrowser(browser);
-      await BrowserTestUtils.crashBrowser(browser);
+      await BrowserTestUtils.crashFrame(browser);
       let doc = browser.contentDocument;
 
       // Since about:tabcrashed will run in the parent process, we can safely

browser/base/content/test/tabcrashed/browser_shownRestartRequired.js

@@ -23,7 +23,7 @@ function crashTabTestHelper() {
       // Simulate buildID mismatch.
       TabCrashHandler.testBuildIDMismatch = true;
 
-      await BrowserTestUtils.crashBrowser(browser, false);
+      await BrowserTestUtils.crashFrame(browser, false);
       let doc = browser.contentDocument;
 
       // Since about:restartRequired will run in the parent process, we can safely

browser/base/content/test/tabcrashed/browser_withoutDump.js

@@ -18,7 +18,7 @@ add_task(async function test_without_dump() {
     },
     async function(browser) {
       let tab = gBrowser.getTabForBrowser(browser);
-      await BrowserTestUtils.crashBrowser(browser);
+      await BrowserTestUtils.crashFrame(browser);
 
       let tabClosingPromise = BrowserTestUtils.waitForTabClosing(tab);
 

browser/components/BrowserGlue.jsm

@@ -136,6 +136,7 @@ let LEGACY_ACTORS = {
         AboutLoginsCreateLogin: { wantUntrusted: true },
         AboutLoginsDeleteLogin: { wantUntrusted: true },
         AboutLoginsDismissBreachAlert: { wantUntrusted: true },
+        AboutLoginsHideFooter: { wantUntrusted: true },
         AboutLoginsImport: { wantUntrusted: true },
         AboutLoginsInit: { wantUntrusted: true },
         AboutLoginsOpenFAQ: { wantUntrusted: true },
@@ -151,6 +152,7 @@ let LEGACY_ACTORS = {
       },
       messages: [
         "AboutLogins:AllLogins",
+        "AboutLogins:LocalizeBadges",
         "AboutLogins:LoginAdded",
         "AboutLogins:LoginModified",
         "AboutLogins:LoginRemoved",
@@ -638,6 +640,7 @@ const listeners = {
     "AboutLogins:CreateLogin": ["AboutLoginsParent"],
     "AboutLogins:DeleteLogin": ["AboutLoginsParent"],
     "AboutLogins:DismissBreachAlert": ["AboutLoginsParent"],
+    "AboutLogins:HideFooter": ["AboutLoginsParent"],
     "AboutLogins:Import": ["AboutLoginsParent"],
     "AboutLogins:MasterPasswordRequest": ["AboutLoginsParent"],
     "AboutLogins:OpenFAQ": ["AboutLoginsParent"],
@@ -2701,7 +2704,7 @@ BrowserGlue.prototype = {
   _migrateUI: function BG__migrateUI() {
     // Use an increasing number to keep track of the current migration state.
     // Completely unrelated to the current Firefox release number.
-    const UI_VERSION = 86;
+    const UI_VERSION = 87;
     const BROWSER_DOCURL = AppConstants.BROWSER_CHROME_URL;
 
     let currentUIVersion;
@@ -3082,16 +3085,11 @@ BrowserGlue.prototype = {
       flashPermissions.forEach(p => Services.perms.removePermission(p));
     }
 
-    if (currentUIVersion < 85) {
-      const TRACKING_TABLE_PREF = "urlclassifier.trackingTable";
-      const CUSTOM_BLOCKING_PREF =
-        "browser.contentblocking.customBlockList.preferences.ui.enabled";
-      // Check if user has set custom tables pref, and show custom block list UI
-      // in the about:preferences#privacy custom panel.
-      if (Services.prefs.prefHasUserValue(TRACKING_TABLE_PREF)) {
-        Services.prefs.setBoolPref(CUSTOM_BLOCKING_PREF, true);
-      }
-    }
+    // currentUIVersion < 85 is missing due to the following:
+    // Origianlly, Bug #1568900 added currentUIVersion 85 but was targeting FF70 release.
+    // In between it landing in FF70, Bug #1562601 (currentUIVersion 86) landed and
+    // was uplifted to Beta. To make sure the migration doesn't get skipped, the
+    // code block that was at 85 has been moved/bumped to currentUIVersion 87.
 
     if (currentUIVersion < 86) {
       // If the user has set "media.autoplay.allow-muted" to false
@@ -3111,6 +3109,17 @@ BrowserGlue.prototype = {
       Services.prefs.clearUserPref("media.autoplay.allow-muted");
     }
 
+    if (currentUIVersion < 87) {
+      const TRACKING_TABLE_PREF = "urlclassifier.trackingTable";
+      const CUSTOM_BLOCKING_PREF =
+        "browser.contentblocking.customBlockList.preferences.ui.enabled";
+      // Check if user has set custom tables pref, and show custom block list UI
+      // in the about:preferences#privacy custom panel.
+      if (Services.prefs.prefHasUserValue(TRACKING_TABLE_PREF)) {
+        Services.prefs.setBoolPref(CUSTOM_BLOCKING_PREF, true);
+      }
+    }
+
     // Update the migration version.
     Services.prefs.setIntPref("browser.migration.version", UI_VERSION);
   },

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": {
@@ -96,6 +102,10 @@ class AboutLoginsChild extends ActorChild {
         });
         break;
       }
+      case "AboutLoginsHideFooter": {
+        this.mm.sendAsyncMessage("AboutLogins:HideFooter");
+        break;
+      }
       case "AboutLoginsImport": {
         this.mm.sendAsyncMessage("AboutLogins:Import");
         break;
@@ -105,11 +115,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": {
@@ -163,6 +177,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;
@@ -138,6 +140,10 @@ var AboutLoginsParent = {
         );
         break;
       }
+      case "AboutLogins:HideFooter": {
+        Services.prefs.setBoolPref(HIDE_MOBILE_FOOTER_PREF, true);
+        break;
+      }
       case "AboutLogins:SyncEnable": {
         message.target.ownerGlobal.gSync.openFxAEmailFirstPage(
           "password-manager"
@@ -179,9 +185,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,
         });
@@ -189,9 +198,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,
         });
@@ -283,6 +293,147 @@ 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",
+            "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">
@@ -214,5 +216,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.