Bug 1549803 - Change LoginList to use an OL instead of PRE for containing the LoginListItems. r=MattN
authorJared Wein <jwein@mozilla.com>
Sat, 11 May 2019 03:29:47 +0000
changeset 532347 6efab548863ef3ff2b2ef68892d775dbedf1f527
parent 532346 54c528ee4cc638b3fe134e1ea9aebec1e1d823e0
child 532348 7654f255fd12223f92011e01627dc98649f9d0f5
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1549803
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 1549803 - Change LoginList to use an OL instead of PRE for containing the LoginListItems. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D30676
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-list.css
browser/components/aboutlogins/content/components/login-list.js
browser/components/aboutlogins/jar.mn
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -26,19 +26,20 @@
                                  password-label,
                                  save-changes-button,
                                  time-created,
                                  time-changed,
                                  time-used,
                                  username-label"></login-item>
 
     <template id="login-list-template">
+      <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-list.css">
       <h2></h2>
-      <pre>
-      </pre>
+      <ol>
+      </ol>
     </template>
 
     <template id="login-list-item-template">
       <style>
         :host(.selected) {
           font-weight: bold;
         }
       </style>
new file mode 100644
--- /dev/null
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -0,0 +1,7 @@
+/* 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/. */
+
+ol {
+  padding-inline-start: 0;
+}
--- a/browser/components/aboutlogins/content/components/login-list.js
+++ b/browser/components/aboutlogins/content/components/login-list.js
@@ -16,19 +16,19 @@ class LoginList extends HTMLElement {
     }
     let loginListTemplate = document.querySelector("#login-list-template");
     this.attachShadow({mode: "open"})
         .appendChild(loginListTemplate.content.cloneNode(true));
     this.render();
   }
 
   render() {
-    let pre = this.shadowRoot.querySelector("pre");
+    let list = this.shadowRoot.querySelector("ol");
     for (let login of this._logins) {
-      pre.append(new LoginListItem(login));
+      list.append(new LoginListItem(login));
     }
   }
 
   static get observedAttributes() {
     return ["login-list-header"];
   }
 
   /* Fluent doesn't handle localizing into Shadow DOM yet so strings
@@ -41,48 +41,48 @@ class LoginList extends HTMLElement {
     switch (attr) {
       case "login-list-header":
         this.shadowRoot.querySelector("h2").textContent = newValue;
         break;
     }
   }
 
   setLogins(logins) {
-    let pre = this.shadowRoot.querySelector("pre");
-    pre.textContent = "";
+    let list = this.shadowRoot.querySelector("ol");
+    list.textContent = "";
     this._logins = logins;
     this.render();
   }
 
   loginAdded(login) {
     this._logins.push(login);
-    let pre = this.shadowRoot.querySelector("pre");
-    pre.append(new LoginListItem(login));
+    let list = this.shadowRoot.querySelector("ol");
+    list.append(new LoginListItem(login));
   }
 
   loginModified(login) {
     for (let i = 0; i < this._logins.length; i++) {
       if (this._logins[i].guid == login.guid) {
         this._logins[i] = login;
         break;
       }
     }
-    let pre = this.shadowRoot.querySelector("pre");
-    for (let loginListItem of pre.children) {
+    let list = this.shadowRoot.querySelector("ol");
+    for (let loginListItem of list.children) {
       if (loginListItem.getAttribute("guid") == login.guid) {
         loginListItem.update(login);
         break;
       }
     }
   }
 
   loginRemoved(login) {
     this._logins = this._logins.filter(l => l.guid != login.guid);
-    let pre = this.shadowRoot.querySelector("pre");
-    for (let loginListItem of pre.children) {
+    let list = this.shadowRoot.querySelector("ol");
+    for (let loginListItem of list.children) {
       if (loginListItem.getAttribute("guid") == login.guid) {
         loginListItem.remove();
         break;
       }
     }
   }
 }
 customElements.define("login-list", LoginList);
--- a/browser/components/aboutlogins/jar.mn
+++ b/browser/components/aboutlogins/jar.mn
@@ -1,11 +1,12 @@
 # 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/.
 
 browser.jar:
   content/browser/aboutlogins/components/login-item.css        (content/components/login-item.css)
   content/browser/aboutlogins/components/login-item.js         (content/components/login-item.js)
+  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/aboutLogins.js    (content/aboutLogins.js)
   content/browser/aboutlogins/aboutLogins.html  (content/aboutLogins.html)