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

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/aboutLogins.html

@@ -31,9 +31,10 @@
                                  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">

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;
+}

browser/components/aboutlogins/content/components/login-list.js

@@ -21,9 +21,9 @@ class LoginList extends HTMLElement {
   }
 
   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));
     }
   }
 
@@ -46,16 +46,16 @@ class LoginList extends HTMLElement {
   }
 
   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) {
@@ -65,8 +65,8 @@ class LoginList extends HTMLElement {
         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;
@@ -76,8 +76,8 @@ class LoginList extends HTMLElement {
 
   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;

browser/components/aboutlogins/jar.mn

@@ -5,6 +5,7 @@
 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)