Backed out changeset 6de570466e66 (bug 1668965) for failures on browser_protections_lockwise.js. CLOSED TREE

browser/app/profile/firefox.js

@@ -1726,6 +1726,8 @@ pref("browser.contentblocking.report.monitor.home_page_url", "https://monitor.fi
 pref("browser.contentblocking.report.manage_devices.url", "https://accounts.firefox.com/settings/clients");
 pref("browser.contentblocking.report.endpoint_url", "https://monitor.firefox.com/user/breach-stats?includeResolved=true");
 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");
 pref("browser.contentblocking.report.vpn.url", "https://vpn.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-browser&utm_campaign=about-protections-card");
@@ -1885,8 +1887,11 @@ pref("signon.management.page.sort", "name");
 // 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);
 pref("signon.management.page.showPasswordSyncNotification", true);
 pref("signon.passwordEditCapture.enabled", true);
 pref("signon.showAutoCompleteFooter", true);

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

@@ -52,6 +52,11 @@ var gExceptionPaths = [
   // Exclude all services-automation because they are used through webdriver
   "resource://gre/modules/services-automation/",
   "resource://services-automation/ServicesAutomation.jsm",
+
+  // 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/components/BrowserGlue.jsm

@@ -148,10 +148,13 @@ let JSWINDOWACTORS = {
         AboutLoginsCreateLogin: { wantUntrusted: true },
         AboutLoginsDeleteLogin: { wantUntrusted: true },
         AboutLoginsDismissBreachAlert: { wantUntrusted: true },
+        AboutLoginsHideFooter: { wantUntrusted: true },
         AboutLoginsImportFromBrowser: { wantUntrusted: true },
         AboutLoginsImportFromFile: { wantUntrusted: true },
         AboutLoginsInit: { wantUntrusted: true },
         AboutLoginsGetHelp: { wantUntrusted: true },
+        AboutLoginsOpenMobileAndroid: { wantUntrusted: true },
+        AboutLoginsOpenMobileIos: { wantUntrusted: true },
         AboutLoginsOpenPreferences: { wantUntrusted: true },
         AboutLoginsOpenSite: { wantUntrusted: true },
         AboutLoginsRecordTelemetryEvent: { wantUntrusted: true },

browser/components/aboutlogins/AboutLoginsChild.jsm

@@ -132,6 +132,10 @@ class AboutLoginsChild extends JSWindowActorChild {
         this.sendAsyncMessage("AboutLogins:GetHelp");
         break;
       }
+      case "AboutLoginsHideFooter": {
+        this.sendAsyncMessage("AboutLogins:HideFooter");
+        break;
+      }
       case "AboutLoginsImportFromBrowser": {
         this.sendAsyncMessage("AboutLogins:Import");
         recordTelemetryEvent({
@@ -148,6 +152,18 @@ class AboutLoginsChild extends JSWindowActorChild {
         });
         break;
       }
+      case "AboutLoginsOpenMobileAndroid": {
+        this.sendAsyncMessage("AboutLogins:OpenMobileAndroid", {
+          source: event.detail,
+        });
+        break;
+      }
+      case "AboutLoginsOpenMobileIos": {
+        this.sendAsyncMessage("AboutLogins:OpenMobileIos", {
+          source: event.detail,
+        });
+        break;
+      }
       case "AboutLoginsOpenPreferences": {
         this.sendAsyncMessage("AboutLogins:OpenPreferences");
         recordTelemetryEvent({

browser/components/aboutlogins/AboutLoginsParent.jsm

@@ -60,6 +60,7 @@ 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";
 const SHOW_PASSWORD_SYNC_NOTIFICATION_PREF =
   "signon.management.page.showPasswordSyncNotification";
 
@@ -67,6 +68,123 @@ const SHOW_PASSWORD_SYNC_NOTIFICATION_PREF =
 // even if it is disabled for other consumers such as about:newtab.
 const EXPECTED_ABOUTLOGINS_REMOTE_TYPE = E10SUtils.PRIVILEGEDABOUT_REMOTE_TYPE;
 
+// 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 APP_STORE_LOCALES = [
+  "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 PLAY_STORE_LOCALES = [
+  "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 convertSubjectToLogin = subject => {
   subject.QueryInterface(Ci.nsILoginMetaInfo).QueryInterface(Ci.nsILoginInfo);
   const login = LoginHelper.loginToVanillaObject(subject);
@@ -147,6 +265,10 @@ class AboutLoginsParent extends JSWindowActorParent {
         Services.logins.removeLogin(login);
         break;
       }
+      case "AboutLogins:HideFooter": {
+        Services.prefs.setBoolPref(HIDE_MOBILE_FOOTER_PREF, true);
+        break;
+      }
       case "AboutLogins:SortChanged": {
         Services.prefs.setCharPref("signon.management.page.sort", message.data);
         break;
@@ -178,6 +300,31 @@ class AboutLoginsParent extends JSWindowActorParent {
         });
         break;
       }
+      case "AboutLogins:OpenMobileAndroid": {
+        const MOBILE_ANDROID_URL_PREF =
+          "signon.management.page.mobileAndroidURL";
+        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;
+        ownerGlobal.openWebLinkIn(MOBILE_ANDROID_URL, "tab", {
+          relatedToCurrent: true,
+        });
+        break;
+      }
+      case "AboutLogins:OpenMobileIos": {
+        const MOBILE_IOS_URL_PREF = "signon.management.page.mobileAppleURL";
+        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;
+        ownerGlobal.openWebLinkIn(MOBILE_IOS_URL, "tab", {
+          relatedToCurrent: true,
+        });
+        break;
+      }
       case "AboutLogins:OpenPreferences": {
         ownerGlobal.openPreferences("privacy-logins");
         break;
@@ -245,6 +392,25 @@ class AboutLoginsParent extends JSWindowActorParent {
             AboutLogins.updatePasswordSyncNotificationState(syncState);
           }
 
+          const playStoreBadgeLanguage = Services.locale.negotiateLanguages(
+            Services.locale.appLocalesAsBCP47,
+            PLAY_STORE_LOCALES,
+            "en-us",
+            Services.locale.langNegStrategyLookup
+          )[0];
+
+          const appStoreBadgeLanguage = Services.locale.negotiateLanguages(
+            Services.locale.appLocalesAsBCP47,
+            APP_STORE_LOCALES,
+            "en-us",
+            Services.locale.langNegStrategyLookup
+          )[0];
+
+          const selectedBadgeLanguages = {
+            appStoreBadgeLanguage,
+            playStoreBadgeLanguage,
+          };
+
           let selectedSort = Services.prefs.getCharPref(
             "signon.management.page.sort",
             "name"
@@ -258,6 +424,7 @@ class AboutLoginsParent extends JSWindowActorParent {
             logins,
             selectedSort,
             syncState,
+            selectedBadgeLanguages,
             masterPasswordEnabled: LoginHelper.isMasterPasswordSet(),
             passwordRevealVisible: Services.policies.isAllowed(
               "passwordReveal"
@@ -791,10 +958,16 @@ var AboutLogins = {
     // by other more Sync-specific pages.
     const loggedIn = state.status != UIState.STATUS_NOT_CONFIGURED;
 
+    // Pass the pref set if user has dismissed mobile promo footer
+    const dismissedMobileFooter = Services.prefs.getBoolPref(
+      HIDE_MOBILE_FOOTER_PREF
+    );
+
     return {
       loggedIn,
       email: state.email,
       avatarURL: state.avatarURL,
+      hideMobileFooter: !loggedIn || dismissedMobileFooter,
       fxAccountsEnabled: FXA_ENABLED,
     };
   },

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>
@@ -255,6 +256,7 @@
             <p class="time-changed meta-info" data-l10n-id="login-item-time-changed" data-l10n-args='{"timeChanged": 0}'></p>
             <p class="time-used meta-info" data-l10n-id="login-item-time-used" data-l10n-args='{"timeUsed": 0}'></p>
           </form>
+          <login-footer hidden></login-footer>
         </div>
       </div>
     </template>
@@ -279,8 +281,30 @@
         <button role="menuitem" class="menuitem-button menuitem-preferences ghost-button" data-event-name="AboutLoginsOpenPreferences" data-l10n-id="menu-menuitem-preferences"></button>
         <hr role="separator" class="menuitem-separator"></hr>
         <button role="menuitem" class="menuitem-button menuitem-help ghost-button" data-event-name="AboutLoginsGetHelp" data-l10n-id="about-logins-menu-menuitem-help"></button>
+        <hr role="separator" class="menuitem-separator"></hr>
+        <button role="menuitem" class="menuitem-button menuitem-mobile menuitem-mobile-android ghost-button" data-event-name="AboutLoginsOpenMobileAndroid" data-l10n-id="menu-menuitem-android-app"></button>
+        <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>
+        <p>
+          <strong data-l10n-id="login-app-promo-title"></strong><br>
+          <span data-l10n-id="login-app-promo-subtitle"></span>
+        </p>
+        <div class="buttons">
+          <button class="app-store" data-event-name="AboutLoginsOpenMobileIos">
+            <img class="image-app-store" data-l10n-id="login-app-promo-apple" src="" alt=""/>
+          </button>
+          <button class="play-store" data-event-name="AboutLoginsOpenMobileAndroid">
+            <img class="image-play-store" data-l10n-id="login-app-promo-android" src="" alt=""/>
+          </button>
+        </div>
+        <button class="close" data-event-name="AboutLoginsHideFooter"></button>
+      </footer>
+    </template>
   </body>
 </html>

browser/components/aboutlogins/content/aboutLogins.js

@@ -15,6 +15,10 @@ const gElements = {
   loginIntro: document.querySelector("login-intro"),
   loginItem: document.querySelector("login-item"),
   loginFilter: document.querySelector("login-filter"),
+  // loginFooter is nested inside of loginItem
+  get loginFooter() {
+    return this.loginItem.shadowRoot.querySelector("login-footer");
+  },
 };
 
 let numberOfLogins = 0;
@@ -33,6 +37,7 @@ function handleAllLogins(logins) {
 
 function handleSyncState(syncState) {
   gElements.fxAccountsButton.updateState(syncState);
+  gElements.loginFooter.hidden = syncState.hideMobileFooter;
   gElements.loginIntro.updateState(syncState);
 }
 
@@ -88,6 +93,9 @@ window.addEventListener("AboutLoginsChromeToContent", event => {
     }
     case "Setup": {
       handleAllLogins(event.detail.value.logins);
+      gElements.loginFooter.showStoreIconsForLocales(
+        event.detail.value.selectedBadgeLanguages
+      );
       handleSyncState(event.detail.value.syncState);
       gElements.loginList.setSortDirection(event.detail.value.selectedSort);
       document.documentElement.classList.add("initialized");

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

@@ -0,0 +1,70 @@
+/* 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 {
+  background-color: var(--in-content-box-background);
+  border-radius: 4px;
+  box-shadow: var(--shadow-10);
+  position: relative;
+  padding-block: 8px;
+  padding-inline: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-block: 20px;
+}
+
+footer > p {
+  display: inline-block;
+  line-height: 1.5;
+  margin: 0;
+  margin-inline-end: auto;
+}
+
+footer > .buttons {
+  display: inline-block;
+}
+
+footer button {
+  background-color: transparent !important; /* override common.css */
+  padding: 0;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+footer .app-store {
+  margin-inline-start: 0;
+}
+
+footer button:not(.close) img {
+  width: auto;
+  display: block;
+}
+
+footer .app-store img {
+  height: 40px;
+  padding: 10px;
+}
+
+footer .play-store img {
+  height: 60px;
+}
+
+footer .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;
+  min-height: auto;
+  position: absolute;
+  inset-inline-end: 12px;
+  top: 12px;
+  width: 16px;
+  min-width: auto;
+}

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

@@ -0,0 +1,75 @@
+/* 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 target = event.currentTarget;
+        let classList = target.classList;
+
+        if (
+          classList.contains("play-store") ||
+          classList.contains("app-store") ||
+          classList.contains("close")
+        ) {
+          let eventName = target.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) {
+    let appStoreLink =
+      "chrome://browser/content/aboutlogins/third-party/app-store/app_" +
+      lang +
+      ".png";
+    this._imageAppStore.setAttribute("src", appStoreLink);
+  }
+
+  _setPlayStoreImage(lang) {
+    let playStoreLink =
+      "chrome://browser/content/aboutlogins/third-party/play-store/play_" +
+      lang +
+      ".png";
+    this._imagePlayStore.setAttribute("src", playStoreLink);
+  }
+
+  showStoreIconsForLocales(appLocales) {
+    this._setAppStoreImage(appLocales.appStoreBadgeLanguage);
+    this._setPlayStoreImage(appLocales.playStoreBadgeLanguage);
+  }
+}
+customElements.define("login-footer", LoginFooter);

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

@@ -50,10 +50,12 @@ form {
 
 :host([data-editing]) .edit-button,
 :host([data-editing]) .copy-button,
+:host([data-editing]) login-footer,
 :host([data-is-new-login].no-logins) .cancel-button,
 :host([data-is-new-login]) .delete-button,
 :host([data-is-new-login]) .origin-saved-value,
 :host([data-is-new-login]) .meta-info,
+:host([data-is-new-login]) login-footer,
 :host([data-is-new-login]) .login-item-title,
 :host(:not([data-is-new-login])) .new-login-title,
 :host(:not([data-editing])) .form-actions-row {

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

@@ -81,3 +81,11 @@
 .menuitem-preferences {
   background-image: url("chrome://global/skin/icons/settings.svg");
 }
+
+.menuitem-mobile-ios {
+  background-image: url("chrome://browser/skin/logo-ios.svg");
+}
+
+.menuitem-mobile-android {
+  background-image: url("chrome://browser/skin/logo-android.svg");
+}

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.