diff --git a/browser/components/aboutlogins/content/aboutLogins.html b/browser/components/aboutlogins/content/aboutLogins.html
index 8e1284d7cc18..16d905f28a5d 100644
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -223,12 +223,6 @@
-
-
-
-
diff --git a/browser/components/aboutlogins/content/components/login-list-section.js b/browser/components/aboutlogins/content/components/login-list-section.js
deleted file mode 100644
index 5495f55e28a5..000000000000
--- a/browser/components/aboutlogins/content/components/login-list-section.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* 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/. */
-
-export default class LoginListHeaderFactory {
- static ID_PREFIX = "id-";
-
- static create(header) {
- let template = document.querySelector("#login-list-section-template");
- let fragment = template.content.cloneNode(true);
- let sectionItem = fragment.firstElementChild;
-
- this.update(sectionItem, header);
-
- return sectionItem;
- }
-
- static update(headerItem, header) {
- let headerElement = headerItem.querySelector(".login-list-header");
- if (header) {
- if (header.startsWith(this.ID_PREFIX)) {
- document.l10n.setAttributes(
- headerElement,
- header.substring(this.ID_PREFIX.length)
- );
- } else {
- headerElement.textContent = header;
- }
- headerElement.hidden = false;
- } else {
- headerElement.hidden = true;
- }
- }
-}
diff --git a/browser/components/aboutlogins/content/components/login-list.css b/browser/components/aboutlogins/content/components/login-list.css
index 36443d40099e..b6d528fd0644 100644
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -86,7 +86,6 @@ ol {
padding-inline-start: 0;
overflow: hidden auto;
flex-grow: 1;
- scroll-padding-top: 24px; /* there is the section header that is sticky to the top */
}
.create-login-button {
@@ -108,18 +107,6 @@ ol {
user-select: none;
}
-.login-list-header {
- display: block;
- position: sticky;
- top: 0;
- font-size: .85em;
- font-weight: 600;
- padding: 4px 16px;
- border-bottom: 1px solid var(--in-content-border-color);
- background-color: var(--in-content-box-background);
-}
-
-:not([hidden]) + .login-list-section,
.login-list-item + .login-list-item {
border-top: 1px solid var(--in-content-border-color);
}
diff --git a/browser/components/aboutlogins/content/components/login-list.js b/browser/components/aboutlogins/content/components/login-list.js
index ac40a1495067..c518ccd4eca1 100644
--- a/browser/components/aboutlogins/content/components/login-list.js
+++ b/browser/components/aboutlogins/content/components/login-list.js
@@ -3,16 +3,9 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import LoginListItemFactory from "./login-list-item.js";
-import LoginListSectionFactory from "./login-list-section.js";
import { recordTelemetryEvent } from "../aboutLoginsUtils.js";
const collator = new Intl.Collator();
-const monthFormatter = new Intl.DateTimeFormat(undefined, { month: "long" });
-const yearMonthFormatter = new Intl.DateTimeFormat(undefined, {
- year: "numeric",
- month: "long",
-});
-const dayDuration = 24 * 60 * 60_000;
const sortFnOptions = {
name: (a, b) => collator.compare(a.title, b.title),
"name-reverse": (a, b) => collator.compare(b.title, a.title),
@@ -39,60 +32,6 @@ const sortFnOptions = {
},
};
-const headersFnOptions = {
- // TODO: name should use the ICU API, see Bug 1592834
- // name: l =>
- // l.title.length && letterRegExp.test(l.title[0])
- // ? l.title[0].toUpperCase()
- // : "#",
- // "name-reverse": l => headersFnOptions.name(l),
- name: () => "",
- "name-reverse": () => "",
- "last-used": l => headerFromDate(l.timeLastUsed),
- "last-changed": l => headerFromDate(l.timePasswordChanged),
- alerts: (l, breachesByLoginGUID, vulnerableLoginsByLoginGUID) => {
- const isBreached = breachesByLoginGUID && breachesByLoginGUID.has(l.guid);
- const isVulnerable =
- vulnerableLoginsByLoginGUID && vulnerableLoginsByLoginGUID.has(l.guid);
- if (isBreached) {
- return (
- LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-breach"
- );
- } else if (isVulnerable) {
- return (
- LoginListSectionFactory.ID_PREFIX +
- "about-logins-list-section-vulnerable"
- );
- }
- return (
- LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-nothing"
- );
- },
-};
-
-function headerFromDate(timestamp) {
- let now = new Date();
- now.setHours(0, 0, 0, 0); // reset to start of day
- let date = new Date(timestamp);
-
- if (now < date) {
- return (
- LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-today"
- );
- } else if (now - dayDuration < date) {
- return (
- LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-yesterday"
- );
- } else if (now - 7 * dayDuration < date) {
- return LoginListSectionFactory.ID_PREFIX + "about-logins-list-section-week";
- } else if (now.getFullYear() == date.getFullYear()) {
- return monthFormatter.format(date);
- } else if (now.getFullYear() - 1 == date.getFullYear()) {
- return yearMonthFormatter.format(date);
- }
- return String(date.getFullYear());
-}
-
export default class LoginList extends HTMLElement {
constructor() {
super();
@@ -100,8 +39,6 @@ export default class LoginList extends HTMLElement {
this._loginGuidsSortedOrder = [];
// A map of login GUID -> {login, listItem}.
this._logins = {};
- // A map of section header -> sectionItem
- this._sections = {};
this._filter = "";
this._selectedGuid = null;
this._blankLoginListItem = LoginListItemFactory.create({});
@@ -191,40 +128,14 @@ export default class LoginList extends HTMLElement {
listItem.hidden = !visibleLoginGuids.has(listItem.dataset.guid);
}
- let sectionsKey = Object.keys(this._sections);
- for (let sectionKey of sectionsKey) {
- this._sections[sectionKey]._inUse = false;
- }
-
- if (this._loginGuidsSortedOrder.length) {
- let section = null;
- let currentHeader = null;
- // Re-arrange the login-list-items according to their sort and
- // create / re-arrange sections
- for (let i = this._loginGuidsSortedOrder.length - 1; i >= 0; i--) {
- let guid = this._loginGuidsSortedOrder[i];
- let { listItem, _header } = this._logins[guid];
-
- if (!listItem.hidden) {
- if (currentHeader != _header) {
- section = this.renderSectionHeader((currentHeader = _header));
- }
-
- section.insertBefore(
- listItem,
- section.firstElementChild.nextElementSibling
- );
- }
- }
- }
-
- for (let sectionKey of sectionsKey) {
- let section = this._sections[sectionKey];
- if (section._inUse) {
- continue;
- }
-
- section.hidden = true;
+ // Re-arrange the login-list-items according to their sort
+ for (let i = this._loginGuidsSortedOrder.length - 1; i >= 0; i--) {
+ let guid = this._loginGuidsSortedOrder[i];
+ let { listItem } = this._logins[guid];
+ this._list.insertBefore(
+ listItem,
+ this._blankLoginListItem.nextElementSibling
+ );
}
let activeDescendantId = this._list.getAttribute("aria-activedescendant");
@@ -256,22 +167,6 @@ export default class LoginList extends HTMLElement {
}
}
- renderSectionHeader(header) {
- let section = this._sections[header];
- if (!section) {
- section = this._sections[header] = LoginListSectionFactory.create(header);
- }
-
- this._list.insertBefore(
- section,
- this._blankLoginListItem.nextElementSibling
- );
-
- section._inUse = true;
- section.hidden = false;
- return section;
- }
-
handleEvent(event) {
switch (event.type) {
case "click": {
@@ -314,7 +209,6 @@ export default class LoginList extends HTMLElement {
break;
}
case "change": {
- this._applyHeaders();
this._applySortAndScrollToTop();
const extra = { sort_key: this._sortSelect.value };
recordTelemetryEvent({ object: "list", method: "sort", extra });
@@ -438,7 +332,6 @@ export default class LoginList extends HTMLElement {
map[login.guid] = { login };
return map;
}, {});
- this._applyHeaders();
this._applySort();
this._list.textContent = "";
this._list.appendChild(this._blankLoginListItem);
@@ -527,7 +420,6 @@ export default class LoginList extends HTMLElement {
const alertsSortOptionElement = this._sortSelect.namedItem("alerts");
alertsSortOptionElement.hidden = false;
this._sortSelect.selectedIndex = alertsSortOptionElement.index;
- this._applyHeaders();
this._applySortAndScrollToTop();
this._selectFirstVisibleLogin();
}
@@ -563,7 +455,6 @@ export default class LoginList extends HTMLElement {
return;
}
this._sortSelect.value = sortDirection;
- this._applyHeaders();
this._applySortAndScrollToTop();
this._selectFirstVisibleLogin();
}
@@ -574,7 +465,6 @@ export default class LoginList extends HTMLElement {
loginAdded(login) {
this._logins[login.guid] = { login };
this._loginGuidsSortedOrder.push(login.guid);
- this._applyHeaders(false);
this._applySort();
// Add the list item and update any other related state that may pertain
@@ -596,12 +486,10 @@ export default class LoginList extends HTMLElement {
loginModified(login) {
this._logins[login.guid] = Object.assign(this._logins[login.guid], {
login,
- _header: null, // reset header
});
- this._applyHeaders(false);
this._applySort();
- let loginObject = this._logins[login.guid];
- LoginListItemFactory.update(loginObject.listItem, login);
+ let { listItem } = this._logins[login.guid];
+ LoginListItemFactory.update(listItem, login);
// Update any other related state that may pertain to the list item
// such as breach alerts that may or may not now apply.
@@ -689,20 +577,6 @@ export default class LoginList extends HTMLElement {
});
}
- _applyHeaders(updateAll = true) {
- let headerFn = headersFnOptions[this._sortSelect.value];
- for (let guid of this._loginGuidsSortedOrder) {
- let login = this._logins[guid];
- if (updateAll || !login._header) {
- login._header = headerFn(
- login.login,
- this._breachesByLoginGUID,
- this._vulnerableLoginsByLoginGUID
- );
- }
- }
- }
-
_applySortAndScrollToTop() {
this._applySort();
this.render();
@@ -757,43 +631,20 @@ export default class LoginList extends HTMLElement {
let activeDescendantId = this._list.getAttribute("aria-activedescendant");
let activeDescendant =
activeDescendantId && this.shadowRoot.getElementById(activeDescendantId);
- if (
- !activeDescendant ||
- activeDescendant.hidden ||
- !activeDescendant.classList.contains("login-list-item")
- ) {
+ if (!activeDescendant || activeDescendant.hidden) {
activeDescendant =
this._list.querySelector(".login-list-item[data-guid]:not([hidden])") ||
this._list.firstElementChild;
}
let newlyFocusedItem = null;
- let previousItem = activeDescendant;
- do {
- previousItem =
- (previousItem.tagName == "SECTION"
- ? previousItem.lastElementChild
- : previousItem.previousElementSibling) ||
- (previousItem.parentElement.tagName == "SECTION" &&
- previousItem.parentElement.previousElementSibling);
- } while (
- previousItem &&
- (previousItem.hidden ||
- !previousItem.classList.contains("login-list-item"))
- );
-
- let nextItem = activeDescendant;
- do {
- nextItem =
- (nextItem.tagName == "SECTION"
- ? nextItem.firstElementChild.nextElementSibling
- : nextItem.nextElementSibling) ||
- (nextItem.parentElement.tagName == "SECTION" &&
- nextItem.parentElement.nextElementSibling);
- } while (
- nextItem &&
- (nextItem.hidden || !nextItem.classList.contains("login-list-item"))
- );
-
+ let previousItem = activeDescendant.previousElementSibling;
+ while (previousItem && previousItem.hidden) {
+ previousItem = previousItem.previousElementSibling;
+ }
+ let nextItem = activeDescendant.nextElementSibling;
+ while (nextItem && nextItem.hidden) {
+ nextItem = nextItem.nextElementSibling;
+ }
if (event.type == "keydown") {
switch (event.key) {
case "ArrowDown": {
diff --git a/browser/components/aboutlogins/jar.mn b/browser/components/aboutlogins/jar.mn
index fa5632000ecf..58759463b3d9 100644
--- a/browser/components/aboutlogins/jar.mn
+++ b/browser/components/aboutlogins/jar.mn
@@ -25,7 +25,6 @@ browser.jar:
content/browser/aboutlogins/components/login-list.css (content/components/login-list.css)
content/browser/aboutlogins/components/login-list.js (content/components/login-list.js)
content/browser/aboutlogins/components/login-list-item.js (content/components/login-list-item.js)
- content/browser/aboutlogins/components/login-list-section.js (content/components/login-list-section.js)
content/browser/aboutlogins/components/menu-button.css (content/components/menu-button.css)
content/browser/aboutlogins/components/menu-button.js (content/components/menu-button.js)
content/browser/aboutlogins/icons/breached-website.svg (content/icons/breached-website.svg)
diff --git a/browser/locales/en-US/browser/aboutLogins.ftl b/browser/locales/en-US/browser/aboutLogins.ftl
index 50b18af99ac7..1af390c15ee2 100644
--- a/browser/locales/en-US/browser/aboutLogins.ftl
+++ b/browser/locales/en-US/browser/aboutLogins.ftl
@@ -59,12 +59,6 @@ about-logins-list-item-breach-icon =
.title = Breached website
about-logins-list-item-vulnerable-password-icon =
.title = Vulnerable password
-about-logins-list-section-breach = Breached websites
-about-logins-list-section-vulnerable = Vulnerable passwords
-about-logins-list-section-nothing = No alert
-about-logins-list-section-today = Today
-about-logins-list-section-yesterday = Yesterday
-about-logins-list-section-week = Last 7 days
## Introduction screen