Bug 1549803 - Change LoginList to use an OL instead of PRE for containing the LoginListItems. r=MattN
☠☠ backed out by 54f367c785cb ☠ ☠
authorJared Wein <jwein@mozilla.com>
Fri, 10 May 2019 18:31:41 +0000
changeset 532292 e062410531b12d49ebb71840b40bf5a11da5b647
parent 532291 2d13d407f562a49cdd391c83b6d5eaa6f1598e0c
child 532293 e450e9d4671c01b57531b20ef2c347ed3f4ad905
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
@@ -25,19 +25,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)