Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-01-11 14:28:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1563769 - Display the count of logins earlier and chunk the layout of loginsin the list so we can display ASAP. r=MattN

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D37107

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Jared Wein 2019-07-08 17:39:47 +00:00
parent 9367744c2b
commit 423635cba5
1 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
browser/components/aboutlogins/content/components/login-list.js
View File

@ -54,7 +54,7 @@ export default class LoginList extends HTMLElement {
* createLogin: When set to true will show and select
* a blank login-list-item.
*/
render(options = {}) {
async render(options = {}) {
this._list.textContent = "";
if (options.createLogin) {
@ -65,6 +65,8 @@ export default class LoginList extends HTMLElement {
this._blankLoginListItem.id
);
this._list.appendChild(this._blankLoginListItem);
} else {
this._blankLoginListItem.remove();
}
if (!this._logins.length) {
@ -74,20 +76,35 @@ export default class LoginList extends HTMLElement {
return;
}
let visibleLogins = this._applyFilter();
document.l10n.setAttributes(this._count, "login-list-count", {
count: visibleLogins.length,
});
let fragment = document.createDocumentFragment();
for (let login of this._logins) {
let chunkSize = 5;
for (let i = 0; i < this._logins.length; i++) {
let login = this._logins[i];
let listItem = new LoginListItem(login);
if (login.guid == this._selectedGuid) {
this._setListItemAsSelected(listItem);
}
if (!visibleLogins.includes(login.guid)) {
listItem.hidden = true;
}
fragment.appendChild(listItem);
// Display a first chunk of logins ASAP to improve perceived performance,
// then append progressively larger chunks until complete.
if (i == chunkSize) {
this._list.appendChild(fragment);
await new Promise(resolve => requestAnimationFrame(resolve));
chunkSize *= chunkSize;
}
}
this._list.appendChild(fragment);
let visibleLoginCount = this._applyFilter();
document.l10n.setAttributes(this._count, "login-list-count", {
count: visibleLoginCount,
});
}
handleEvent(event) {
@ -227,21 +244,7 @@ export default class LoginList extends HTMLElement {
matchingLoginGuids = this._logins.map(login => login.guid);
}
for (let listItem of this._list.querySelectorAll("login-list-item")) {
if (!listItem.dataset.guid) {
// Don't hide the 'New Login' item if it is present.
continue;
}
if (matchingLoginGuids.includes(listItem.dataset.guid)) {
if (listItem.hidden) {
listItem.hidden = false;
}
} else if (!listItem.hidden) {
listItem.hidden = true;
}
}
return matchingLoginGuids.length;
return matchingLoginGuids;
}
_handleKeyboardNav(event) {
@ -331,6 +334,9 @@ export default class LoginList extends HTMLElement {
oldSelectedItem.classList.remove("selected");
oldSelectedItem.removeAttribute("aria-selected");
}
if (listItem.dataset.guid) {
this._blankLoginListItem.remove();
}
listItem.classList.add("selected");
listItem.setAttribute("aria-selected", "true");
this._list.setAttribute("aria-activedescendant", listItem.id);