Commit b13de681 authored by Jared Wein's avatar Jared Wein
Browse files

Bug 1549809 - Show the count of the items in the login list. r=MattN,Pike

Differential Revision: https://phabricator.services.mozilla.com/D30758

--HG--
extra : moz-landing-system : lando
parent 23fa3950
......@@ -16,7 +16,11 @@ login-filter =
.placeholder = Search Logins
login-list =
.login-list-header = Logins
.count =
{ $count ->
[one] { $count } entry
*[other] { $count } entries
}
login-item =
.cancel-button = Cancel
......
......@@ -23,7 +23,8 @@
data-l10n-attrs="placeholder"></login-filter>
</header>
<login-list data-l10n-id="login-list"
data-l10n-attrs="login-list-header"></login-list>
data-l10n-attrs="count"
data-l10n-args='{"count": 0}'></login-list>
<login-item data-l10n-id="login-item"
data-l10n-args='{"timeCreated": 0, "timeChanged": 0, "timeUsed": 0}'
data-l10n-attrs="cancel-button,
......@@ -39,7 +40,9 @@
<template id="login-list-template">
<link rel="stylesheet" type="text/css" href="chrome://global/skin/in-content/common.css">
<link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-list.css">
<h2></h2>
<div class="meta">
<span class="count"></span>
</div>
<ol>
</ol>
</template>
......
......@@ -2,6 +2,25 @@
* 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/. */
:host {
border-inline-end: 1px solid var(--grey-30);
}
.meta {
display: flex;
padding: 10px;
border-bottom: 1px solid var(--grey-30);
background-color: var(--grey-20);
}
.count {
flex: auto;
text-align: end;
font-size: smaller;
}
ol {
margin-top: 0;
margin-bottom: 0;
padding-inline-start: 0;
}
......@@ -29,6 +29,7 @@ class LoginList extends HTMLElement {
for (let login of this._logins) {
list.append(new LoginListItem(login));
}
document.l10n.setAttributes(this, "login-list", {count: this._logins.length});
}
handleEvent(event) {
......@@ -53,6 +54,7 @@ class LoginList extends HTMLElement {
listItem.hidden = true;
}
}
document.l10n.setAttributes(this, "login-list", {count: matchingLoginGuids.length});
break;
}
case "AboutLoginsLoginSelected": {
......@@ -70,7 +72,7 @@ class LoginList extends HTMLElement {
}
static get observedAttributes() {
return ["login-list-header"];
return ["count"];
}
/* Fluent doesn't handle localizing into Shadow DOM yet so strings
......@@ -81,8 +83,8 @@ class LoginList extends HTMLElement {
}
switch (attr) {
case "login-list-header":
this.shadowRoot.querySelector("h2").textContent = newValue;
case "count":
this.shadowRoot.querySelector(".count").textContent = newValue;
break;
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment