Bug 1569855: add sortByBreached option r=jaws,fluent-reviewers,flod

***
roll

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

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

browser/components/aboutlogins/content/aboutLogins.html

@@ -80,9 +80,10 @@
         <label for="login-sort">
           <span data-l10n-id="login-list-sort-label-text"></span>
           <select id="login-sort">
-            <option data-l10n-id="login-list-name-option" value="name"/>
-            <option data-l10n-id="login-list-last-used-option" value="last-used"/>
-            <option data-l10n-id="login-list-last-changed-option" value="last-changed"/>
+            <option name="name" data-l10n-id="login-list-name-option" value="name"/>
+            <option name="last-user" data-l10n-id="login-list-last-used-option" value="last-used"/>
+            <option name="last-changed" data-l10n-id="login-list-last-changed-option" value="last-changed"/>
+            <option name="breached" data-l10n-id="login-list-breached-option" value="breached" hidden/>
           </select>
         </label>
         <span class="count" data-l10n-id="login-list-count" data-l10n-args='{"count": 0}'></span>

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

@@ -10,6 +10,20 @@ const sortFnOptions = {
   name: (a, b) => collator.compare(a.title, b.title),
   "last-used": (a, b) => a.timeLastUsed < b.timeLastUsed,
   "last-changed": (a, b) => a.timePasswordChanged < b.timePasswordChanged,
+  breached: (a, b, breachesByLoginGUID) => {
+    if (!breachesByLoginGUID) {
+      return 0;
+    }
+    const aIsBreached = breachesByLoginGUID.has(a.guid);
+    const bIsBreached = breachesByLoginGUID.has(b.guid);
+    if (aIsBreached && !bIsBreached) {
+      return -1;
+    }
+    if (!aIsBreached && bIsBreached) {
+      return 1;
+    }
+    return collator.compare(a.title, b.title);
+  },
 };
 
 export default class LoginList extends HTMLElement {
@@ -249,7 +263,16 @@ export default class LoginList extends HTMLElement {
    */
   updateBreaches(breachesByLoginGUID) {
     this._breachesByLoginGUID = breachesByLoginGUID;
-    this.render();
+    if (this._breachesByLoginGUID.size === 0) {
+      return;
+    }
+    const breachedSortOptionElement = this._sortSelect.namedItem("breached");
+    breachedSortOptionElement.hidden = false;
+    this._sortSelect.selectedIndex = breachedSortOptionElement.index;
+    this._sortSelect.dispatchEvent(new CustomEvent("input", { bubbles: true }));
+    this._sortSelect.dispatchEvent(
+      new CustomEvent("change", { bubbles: true })
+    );
   }
 
   /**
@@ -349,7 +372,7 @@ export default class LoginList extends HTMLElement {
     this._loginGuidsSortedOrder = this._loginGuidsSortedOrder.sort((a, b) => {
       let loginA = this._logins[a].login;
       let loginB = this._logins[b].login;
-      return sortFnOptions[sort](loginA, loginB);
+      return sortFnOptions[sort](loginA, loginB, this._breachesByLoginGUID);
     });
   }
 

browser/components/aboutlogins/tests/chrome/chrome.ini

@@ -2,6 +2,8 @@
 scheme = https
 support-files =
    aboutlogins_common.js
+prefs =
+    signon.management.page.breach-alerts.enabled=true
 
 [test_confirm_delete_dialog.html]
 [test_fxaccounts_button.html]

browser/components/aboutlogins/tests/chrome/test_login_list.html

@@ -58,10 +58,20 @@ const TEST_LOGIN_3 = {
 };
 
 const TEST_BREACH = {
-  Name: "Test-Breach",
-  breachAlertURL: "https://monitor.firefox.com/breach-details/Test-Breach",
+  AddedDate: "2018-12-20T23:56:26Z",
+  BreachDate: "2018-12-11",
+  Domain: "abc.example.com",
+  Name: "ABC Example",
+  PwnCount: 1643100,
+  DataClasses: ["Usernames", "Passwords"],
+  _status: "synced",
+  id: "047940fe-d2fd-4314-b636-b4a952ee0043",
+  last_modified: "1541615610052",
+  schema: "1541615609018",
+  breachAlertURL: "https://monitor.firefox.com/breach-details/ABC-Example",
 };
 
+
 const TEST_BREACHES_MAP = new Map();
 TEST_BREACHES_MAP.set(TEST_LOGIN_1.guid, TEST_BREACH);
 
@@ -336,7 +346,25 @@ add_task(async function test_sorted_list() {
   let pwChanged3 = gLoginList._logins[loginListItems[2].dataset.guid].login.timePasswordChanged;
   is(pwChanged1 > pwChanged2, true, "Logins sorted by timePasswordChanged. First: " + pwChanged1 + "; Second: " + pwChanged2);
   is(pwChanged2 > pwChanged3, true, "Logins sorted by timePasswordChanged. Second: " + pwChanged2 + "; Third: " + pwChanged3);
+
+  // sort by breached when there are breached logins
+  gLoginList.updateBreaches(TEST_BREACHES_MAP);
+  loginSort.selectedIndex = 3;
+  dispatchChangeEvent(loginSort);
+  loginListItems = gLoginList.shadowRoot.querySelectorAll(".login-list-item:not([hidden])");
+  is(loginListItems[0].classList.contains("breached"), true, "Breached login should be displayed at top of list");
+  is(!loginListItems[1].classList.contains("breached"), true, "Non-breached login should be displayed below breached");
+
+  // sort by name when there are no breached logins
+  gLoginList.updateBreaches(new Map());
+  loginSort.selectedIndex = 3;
+  dispatchChangeEvent(loginSort);
+  loginListItems = gLoginList.shadowRoot.querySelectorAll(".login-list-item:not([hidden])");
+  title1 = loginListItems[0]._login.title;
+  title2 = loginListItems[1]._login.title;
+  is(title1.localeCompare(title2), -1, "Logins should be sorted alphabetically by hostname");
 });
+
 </script>
 
 </body>

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

@@ -45,6 +45,7 @@ login-list-count =
   }
 login-list-sort-label-text = Sort by:
 login-list-name-option = Name (A-Z)
+login-list-breached-option = Breached Websites
 login-list-last-changed-option = Last Modified
 login-list-last-used-option = Last Used
 login-list-intro-title = No logins found