1 files changed, 81 insertions, 0 deletions
diff --git a/browser/components/aboutlogins/content/components/login-list-item.mjs b/browser/components/aboutlogins/content/components/login-list-item.mjs
new file mode 100644
index 0000000000..2fe37c6b12
--- /dev/null
+++ b/browser/components/aboutlogins/content/components/login-list-item.mjs
@@ -0,0 +1,81 @@
+/* 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/. */
+
+/**
+ * LoginListItemFactory is used instead of the "login-list-item" custom element
+ * since there may be 100s of login-list-items on about:logins and each
+ * custom element carries with it significant overhead when used in large
+ * numbers.
+ */
+export default class LoginListItemFactory {
+  static create(login) {
+    let template = document.querySelector("#login-list-item-template");
+    let fragment = template.content.cloneNode(true);
+    let listItem = fragment.firstElementChild;
+
+    LoginListItemFactory.update(listItem, login);
+
+    return listItem;
+  }
+
+  static update(listItem, login) {
+    let title = listItem.querySelector(".title");
+    let username = listItem.querySelector(".username");
+    let alertIcon = listItem.querySelector(".alert-icon");
+
+    const favicon = listItem.querySelector(".favicon");
+    favicon.src = `page-icon:${login.origin}`;
+
+    if (!login.guid) {
+      listItem.id = "new-login-list-item";
+      document.l10n.setAttributes(title, "login-list-item-title-new-login");
+      document.l10n.setAttributes(
+        username,
+        "login-list-item-subtitle-new-login"
+      );
+      return;
+    }
+
+    // Prepend the ID with a string since IDs must not begin with a number.
+    if (!listItem.id) {
+      listItem.id = "lli-" + login.guid;
+      listItem.dataset.guid = login.guid;
+    }
+    if (title.textContent != login.title) {
+      title.textContent = login.title;
+    }
+
+    let trimmedUsernameValue = login.username.trim();
+    if (trimmedUsernameValue) {
+      if (username.textContent != trimmedUsernameValue) {
+        username.removeAttribute("data-l10n-id");
+        username.textContent = trimmedUsernameValue;
+      }
+    } else {
+      document.l10n.setAttributes(
+        username,
+        "login-list-item-subtitle-missing-username"
+      );
+    }
+
+    if (listItem.classList.contains("breached")) {
+      alertIcon.src =
+        "chrome://browser/content/aboutlogins/icons/breached-website.svg";
+      document.l10n.setAttributes(
+        alertIcon,
+        "about-logins-list-item-breach-icon"
+      );
+    } else if (listItem.classList.contains("vulnerable")) {
+      alertIcon.src =
+        "chrome://browser/content/aboutlogins/icons/vulnerable-password.svg";
+
+      document.l10n.setAttributes(
+        alertIcon,
+        "about-logins-list-item-vulnerable-password-icon"
+      );
+    } else {
+      alertIcon.src = "";
+    }
+  }
+}