1 files changed, 169 insertions, 0 deletions
diff --git a/browser/components/aboutlogins/content/components/login-list-lit-item.mjs b/browser/components/aboutlogins/content/components/login-list-lit-item.mjs
new file mode 100644
index 0000000000..9bd9632971
--- /dev/null
+++ b/browser/components/aboutlogins/content/components/login-list-lit-item.mjs
@@ -0,0 +1,169 @@
+/* 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/. */
+
+import {
+  html,
+  classMap,
+  choose,
+  when,
+} from "chrome://global/content/vendor/lit.all.mjs";
+
+import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
+
+export class ListItem extends MozLitElement {
+  static get properties() {
+    return {
+      icon: { type: String },
+      selected: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.icon = "";
+    this.selected = false;
+  }
+
+  render() {
+    const classes = { selected: this.selected, "list-item": true };
+    return html` <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-list-lit-item.css"
+      />
+      <li class=${classMap(classes)} role="option">
+        <img class="icon" src=${this.icon} />
+        <slot name="login-info"></slot>
+        <slot name="notificationIcon"></slot>
+      </li>`;
+  }
+}
+
+export class NewListItem extends MozLitElement {
+  static properties = {
+    icon: { type: String },
+    selected: { type: Boolean },
+  };
+
+  constructor() {
+    super();
+    this.id = "new-login-list-item";
+    this.selected = false;
+    this.icon = "page-icon:undefined";
+  }
+
+  render() {
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-list-lit-item.css"
+      />
+      <list-item ?selected=${this.selected} icon=${this.icon}>
+        <div class="labels" slot="login-info">
+          <span
+            class="title"
+            dir="auto"
+            data-l10n-id="login-list-item-title-new-login2"
+          ></span
+          ><span class="subtitle" dir="auto"></span>
+        </div>
+      </list-item>
+    `;
+  }
+}
+
+export class LoginListItem extends MozLitElement {
+  static get properties() {
+    return {
+      favicon: { type: String },
+      title: { type: String, reflect: true },
+      username: { type: String, reflect: true },
+      notificationIcon: { type: String, reflect: true },
+      selected: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.favicon = "";
+    this.title = "";
+    this.username = "";
+    this.notificationIcon = "";
+    this.selected = false;
+  }
+  render() {
+    switch (this.notificationIcon) {
+      case "breached":
+        this.classList.add("breached");
+        break;
+      case "vulnerable":
+        this.classList.add("vulnerable");
+        break;
+      default:
+        this.classList.remove("breached");
+        this.classList.remove("vulnerable");
+        break;
+    }
+
+    return html`
+      <link
+        rel="stylesheet"
+        href="chrome://browser/content/aboutlogins/components/login-list-lit-item.css"
+      />
+      <list-item
+        icon=${this.favicon}
+        title=${this.title}
+        username=${this.username}
+        notificationIcon=${this.notificationIcon}
+        ?selected=${this.selected}
+      >
+        <div class="labels" slot="login-info">
+          <span class="title" dir="auto">${this.title}</span>
+          ${when(
+            this.username,
+            () => html` <span class="subtitle" dir="auto">
+              ${this.username}
+            </span>`,
+            () => html`<span
+              class="subtitle"
+              dir="auto"
+              data-l10n-id="login-list-item-subtitle-missing-username"
+            ></span>`
+          )}
+        </div>
+        <div slot="notificationIcon">
+          ${choose(
+            this.notificationIcon,
+            [
+              [
+                "breached",
+                () =>
+                  html`<img
+                    class="alert-icon"
+                    data-l10n-id="about-logins-list-item-breach-icon"
+                    title=""
+                    src="chrome://browser/content/aboutlogins/icons/breached-website.svg"
+                  />`,
+              ],
+              [
+                "vulnerable",
+                () =>
+                  html`<img
+                    class="alert-icon"
+                    data-l10n-id="about-logins-list-item-vulnerable-password-icon"
+                    title=""
+                    src="chrome://browser/content/aboutlogins/icons/vulnerable-password.svg"
+                  />`,
+              ],
+            ],
+            () => html`<img class="alert-icon" title="" src="" />`
+          )}
+        </div>
+      </list-item>
+    `;
+  }
+}
+
+customElements.define("list-item", ListItem);
+customElements.define("new-list-item", NewListItem);
+customElements.define("login-list-item", LoginListItem);