Bug 1867008 - Update Strings for about:logins - Empty state. r=bolsso…

…n,issammani

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

browser/components/aboutlogins/content/aboutLogins.html

@@ -238,9 +238,11 @@ <h1 class="title" id="title"></h1>
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-intro.css">
 
       <img class="illustration" src="chrome://browser/content/aboutlogins/icons/intro-illustration.svg"/>
-      <h1 class="heading" data-l10n-id="about-logins-login-intro-heading-logged-out2"></h1>
+      <h1 class="heading" data-l10n-id="about-logins-login-intro-heading-message"></h1>
       <section>
-        <p class="description" data-l10n-id="login-intro-description"></p>
+        <p class="description" data-l10n-id="login-intro-description2">
+          <a data-l10n-name="breach-alert-link" href="https://support.mozilla.org/kb/firefox-password-manager-alerts-breached-websites" target="_blank" rel="noreferrer"></a>
+        </p>
         <ul>
           <li data-l10n-id="login-intro-instructions-fxa2"></li>
           <li data-l10n-id="login-intro-instructions-fxa-settings"></li>
@@ -251,7 +253,7 @@ <h1 class="heading" data-l10n-id="about-logins-login-intro-heading-logged-out2">
         <p class="description intro-import-text no-file-import" hidden data-l10n-id="about-logins-intro-browser-only-import">
           <a data-l10n-name="import-link" href="#"></a>
         </p>
-        <p class="description intro-import-text file-import" hidden data-l10n-id="about-logins-intro-import2">
+        <p class="description intro-import-text file-import" hidden data-l10n-id="about-logins-intro-import3">
           <a data-l10n-name="import-browser-link" href="#"></a>
           <a data-l10n-name="import-file-link" href="#"></a>
         </p>

browser/components/aboutlogins/content/components/login-alert.stories.mjs

@@ -19,7 +19,7 @@ export const BasicLoginAlert = ({ variant, icon }) => {
     <login-alert
       .variant=${variant}
       .icon=${icon}
-      titleId="about-logins-login-intro-heading-logged-in"
+      titleId="about-logins-login-intro-heading-message"
     >
       <a slot="action"> Some action </a>
       <div slot="content">

browser/components/aboutlogins/content/components/login-intro.mjs

@@ -38,9 +38,7 @@ export default class LoginIntro extends HTMLElement {
   }
 
   updateState(syncState) {
-    let l10nId = syncState.loggedIn
-      ? "about-logins-login-intro-heading-logged-in"
-      : "about-logins-login-intro-heading-logged-out2";
+    let l10nId = "about-logins-login-intro-heading-message";
     document.l10n.setAttributes(
       this.shadowRoot.querySelector(".heading"),
       l10nId

browser/components/aboutlogins/tests/browser/browser_noLoginsView.js

@@ -64,7 +64,7 @@ add_task(async function test_no_logins_class() {
         content.document.l10n.getAttributes(
           loginIntro.shadowRoot.querySelector(".heading")
         ).id,
-        "about-logins-login-intro-heading-logged-out2",
+        "about-logins-login-intro-heading-message",
         "The default message should be the non-logged-in message"
       );
       Assert.ok(
@@ -80,7 +80,7 @@ add_task(async function test_no_logins_class() {
         content.document.l10n.getAttributes(
           loginIntro.shadowRoot.querySelector(".heading")
         ).id,
-        "about-logins-login-intro-heading-logged-in",
+        "about-logins-login-intro-heading-message",
         "When logged in the message should update"
       );
 

browser/locales/en-US/browser/aboutLogins.ftl

@@ -84,14 +84,13 @@ about-logins-list-section-week = Last 7 days
 
 ## Introduction screen
 
-about-logins-login-intro-heading-logged-out2 = Looking for your saved logins? Turn on sync or import them.
-about-logins-login-intro-heading-logged-in = No synced logins found.
-login-intro-description = If you saved your logins to { -brand-product-name } on a different device, here’s how to get them here:
+about-logins-login-intro-heading-message = Save your passwords to a safe spot
+login-intro-description2 = All passwords you save to { -brand-product-name } are encrypted. Plus, we watch out for breaches and alert you if you’re affected. <a data-l10n-name="breach-alert-link">Learn more</a>
 login-intro-instructions-fxa2 = Create or sign in to your account on the device where your logins are saved.
 login-intro-instructions-fxa-settings = Go to Settings > Sync > Turn on syncing… Select the Logins and passwords checkbox.
 login-intro-instructions-fxa-passwords-help = Visit <a data-l10n-name="passwords-help-link">passwords support</a> for more help.
 about-logins-intro-browser-only-import = If your logins are saved in another browser, you can <a data-l10n-name="import-link">import them into { -brand-product-name }</a>
-about-logins-intro-import2 = If your logins are saved outside of { -brand-product-name }, you can <a data-l10n-name="import-browser-link">import them from another browser</a> or <a data-l10n-name="import-file-link">from a file</a>
+about-logins-intro-import3 = Select the plus sign button above to add a password now. You can also <a data-l10n-name="import-browser-link">import passwords from another browser</a> or <a data-l10n-name="import-file-link">from a file</a>.
 
 ## Login