Bug 1549809 - Show the count of the items in the login list. r=MattN,Pike
authorJared Wein <jwein@mozilla.com>
Tue, 14 May 2019 20:36:27 +0000
changeset 473853 bba51fabf09d9868343e6f12cb55d62ae168d961
parent 473852 60941bb2b5242eebb8ec1a855dd5fd06f017bb5b
child 473854 2e3ae6f6b1cf59ef0babbb29ce6dff99c880b336
push id36017
push userrgurzau@mozilla.com
push dateWed, 15 May 2019 09:25:56 +0000
treeherdermozilla-central@76bbedc1ec1a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN, Pike
bugs1549809
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1549809 - Show the count of the items in the login list. r=MattN,Pike Differential Revision: https://phabricator.services.mozilla.com/D30758
browser/components/aboutlogins/content/aboutLogins.ftl
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-list.css
browser/components/aboutlogins/content/components/login-list.js
--- a/browser/components/aboutlogins/content/aboutLogins.ftl
+++ b/browser/components/aboutlogins/content/aboutLogins.ftl
@@ -11,17 +11,21 @@
 ### descendant after translation.
 
 about-logins-page-title = Login Manager
 
 login-filter =
   .placeholder = Search Logins
 
 login-list =
-  .login-list-header = Logins
+  .count =
+    { $count ->
+        [one] { $count } entry
+       *[other] { $count } entries
+    }
 
 login-item =
   .cancel-button = Cancel
   .delete-button = Delete
   .hostname-label = Website Address
   .password-label = Password
   .save-changes-button = Save Changes
   .time-created = Created: { DATETIME($timeCreated, day: "numeric", month: "long", year: "numeric") }
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -18,33 +18,36 @@
     <link rel="stylesheet" type="text/css" href="chrome://browser/content/aboutlogins/aboutLogins.css">
   </head>
   <body>
     <header>
       <login-filter data-l10n-id="login-filter"
                     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,
                                  delete-button,
                                  hostname-label,
                                  password-label,
                                  save-changes-button,
                                  time-created,
                                  time-changed,
                                  time-used,
                                  username-label"></login-item>
 
     <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>
 
     <template id="login-list-item-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-item.css">
       <span class="hostname"></span>
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -1,7 +1,26 @@
 /* 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/. */
 
+: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;
 }
--- a/browser/components/aboutlogins/content/components/login-list.js
+++ b/browser/components/aboutlogins/content/components/login-list.js
@@ -24,16 +24,17 @@ class LoginList extends HTMLElement {
     window.addEventListener("AboutLoginsFilterLogins", this);
   }
 
   render() {
     let list = this.shadowRoot.querySelector("ol");
     for (let login of this._logins) {
       list.append(new LoginListItem(login));
     }
+    document.l10n.setAttributes(this, "login-list", {count: this._logins.length});
   }
 
   handleEvent(event) {
     switch (event.type) {
       case "AboutLoginsFilterLogins": {
         let query = event.detail.toLocaleLowerCase();
         let matchingLoginGuids;
         if (query) {
@@ -48,16 +49,17 @@ class LoginList extends HTMLElement {
           if (matchingLoginGuids.includes(listItem.getAttribute("guid"))) {
             if (listItem.hidden) {
               listItem.hidden = false;
             }
           } else if (!listItem.hidden) {
             listItem.hidden = true;
           }
         }
+        document.l10n.setAttributes(this, "login-list", {count: matchingLoginGuids.length});
         break;
       }
       case "AboutLoginsLoginSelected": {
         if (this._selectedItem) {
           if (this._selectedItem.getAttribute("guid") == event.detail.guid) {
             return;
           }
           this._selectedItem.classList.toggle("selected", false);
@@ -65,29 +67,29 @@ class LoginList extends HTMLElement {
         this._selectedItem = this.shadowRoot.querySelector(`login-list-item[guid="${event.detail.guid}"]`);
         this._selectedItem.classList.toggle("selected", true);
         break;
       }
     }
   }
 
   static get observedAttributes() {
-    return ["login-list-header"];
+    return ["count"];
   }
 
   /* Fluent doesn't handle localizing into Shadow DOM yet so strings
      need to get reflected in to their targeted element. */
   attributeChangedCallback(attr, oldValue, newValue) {
     if (!this.shadowRoot) {
       return;
     }
 
     switch (attr) {
-      case "login-list-header":
-        this.shadowRoot.querySelector("h2").textContent = newValue;
+      case "count":
+        this.shadowRoot.querySelector(".count").textContent = newValue;
         break;
     }
   }
 
   setLogins(logins) {
     let list = this.shadowRoot.querySelector("ol");
     list.textContent = "";
     this._logins = logins;