summaryrefslogtreecommitdiffstats
path: root/browser/components/aboutlogins/content/components/login-list-item.mjs
blob: 2fe37c6b1280dfd61f3e5f163954ce96250a9ee4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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 = "";
    }
  }
}