Bug 1562255 - Move 'Create new login' button to the bottom of the login list. r=MattN,fluent-reviewers,flod

Differential Revision: https://phabricator.services.mozilla.com/D37133

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

browser/components/aboutlogins/content/aboutLogins.css

@@ -25,6 +25,10 @@ login-filter {
   align-self: center;
 }
 
+menu-button {
+  margin-inline-start: 18px;
+}
+
 login-list {
   grid-area: logins;
 }
@@ -39,11 +43,6 @@ login-item {
   margin-inline-end: 18px;
 }
 
-#create-login-button {
-  margin-inline-start: 18px;
-  margin-inline-end: 18px;
-}
-
 #branding-logo {
   -moz-context-properties: fill;
   fill: #20123a;

browser/components/aboutlogins/content/aboutLogins.ftl

@@ -11,7 +11,7 @@ about-logins-page-title = Logins & Passwords
 login-filter =
   .placeholder = Search Logins
 
-create-login-button = New Login
+create-login-button = Create New Login
 
 ## The ⋯ menu that is in the top corner of the page
 menu =

browser/components/aboutlogins/content/aboutLogins.html

@@ -25,7 +25,6 @@
     <header>
       <img id="branding-logo" src="chrome://branding/content/aboutlogins.svg" alt=""/>
       <login-filter></login-filter>
-      <button id="create-login-button" data-l10n-id="create-login-button"></button>
       <menu-button></menu-button>
     </header>
     <login-list></login-list>
@@ -70,6 +69,7 @@
       </div>
       <ol role="listbox" tabindex="0" data-l10n-id="login-list">
       </ol>
+      <button class="create-login-button" data-l10n-id="create-login-button"></button>
     </template>
 
     <template id="login-list-item-template">

browser/components/aboutlogins/content/aboutLogins.js

@@ -2,8 +2,6 @@
  * 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/. */
 
-import { recordTelemetryEvent } from "./aboutLoginsUtils.js";
-
 let gElements = {};
 
 document.addEventListener(
@@ -12,18 +10,12 @@ document.addEventListener(
     gElements.loginList = document.querySelector("login-list");
     gElements.loginItem = document.querySelector("login-item");
     gElements.loginFilter = document.querySelector("login-filter");
-    gElements.newLoginButton = document.querySelector("#create-login-button");
 
     let { searchParams } = new URL(document.location);
     if (searchParams.get("filter")) {
       gElements.loginFilter.value = searchParams.get("filter");
     }
 
-    gElements.newLoginButton.addEventListener("click", () => {
-      window.dispatchEvent(new CustomEvent("AboutLoginsCreateLogin"));
-      recordTelemetryEvent({ object: "new_login", method: "new" });
-    });
-
     document.dispatchEvent(
       new CustomEvent("AboutLoginsInit", { bubbles: true })
     );

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

@@ -30,4 +30,10 @@ ol {
   margin-bottom: 0;
   padding-inline-start: 0;
   overflow: hidden auto;
+  flex-grow: 1;
+  box-shadow: inset 0 -10px 10px -10px var(--grey-90-a20);
+}
+
+.create-login-button {
+  margin: 18px;
 }

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

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import LoginListItem from "./login-list-item.js";
+import { recordTelemetryEvent } from "../aboutLoginsUtils.js";
 
 const collator = new Intl.Collator();
 const sortFnOptions = {
@@ -29,9 +30,10 @@ export default class LoginList extends HTMLElement {
     document.l10n.connectRoot(shadowRoot);
     shadowRoot.appendChild(loginListTemplate.content.cloneNode(true));
 
-    this._count = this.shadowRoot.querySelector(".count");
-    this._list = this.shadowRoot.querySelector("ol");
-    this._sortSelect = this.shadowRoot.querySelector("#login-sort");
+    this._count = shadowRoot.querySelector(".count");
+    this._createLoginButton = shadowRoot.querySelector(".create-login-button");
+    this._list = shadowRoot.querySelector("ol");
+    this._sortSelect = shadowRoot.querySelector("#login-sort");
 
     this.render();
 
@@ -44,6 +46,7 @@ export default class LoginList extends HTMLElement {
     window.addEventListener("AboutLoginsLoginSelected", this);
     window.addEventListener("AboutLoginsFilterLogins", this);
     this.addEventListener("keydown", this);
+    this._createLoginButton.addEventListener("click", this);
   }
 
   /**
@@ -96,6 +99,11 @@ export default class LoginList extends HTMLElement {
         this.render();
         break;
       }
+      case "click": {
+        window.dispatchEvent(new CustomEvent("AboutLoginsCreateLogin"));
+        recordTelemetryEvent({ object: "new_login", method: "new" });
+        break;
+      }
       case "AboutLoginsClearSelection": {
         if (!this._logins.length) {
           return;