Bug 1549803 - Change LoginList to use an OL instead of PRE for containing the LoginListItems. r=MattN
☠☠ backed out by 1be22e2d35d1 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Fri, 10 May 2019 22:38:50 +0000
changeset 535380 fe60f9cc2007212395954c6d5b343034a0480d86
parent 535379 b665ca03d2f6b9853383bec29db258ca3393f3e7
child 535381 fe75205edc195b77e0a90d8703ddb07d1c7ed4c0
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [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)