Bug 1562255 - Move 'Create new login' button to the bottom of the login list. r=MattN,fluent-reviewers,flod
☠☠ backed out by 41e2fd3acd91 ☠ ☠
authorJared Wein <jwein@mozilla.com>
Mon, 08 Jul 2019 04:44:54 +0000
changeset 544427 f4081c5e99bf3f47f82f70b09edc7b94cc243841
parent 544426 fec2c81434b4daecc226168a761fbd0b8229d8b7
child 544428 109fab16fddacbe16a28a8cb9ed8182378fdfef6
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN, fluent-reviewers, flod
bugs1562255
milestone69.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 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
browser/components/aboutlogins/content/aboutLogins.css
browser/components/aboutlogins/content/aboutLogins.ftl
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/aboutLogins.js
browser/components/aboutlogins/content/components/login-list.css
browser/components/aboutlogins/content/components/login-list.js
--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -20,35 +20,34 @@ header {
   padding: 0 18px;
 }
 
 login-filter {
   flex: auto;
   align-self: center;
 }
 
+menu-button {
+  margin-inline-start: 18px;
+}
+
 login-list {
   grid-area: logins;
 }
 
 login-item {
   grid-area: login;
   max-width: 800px;
 }
 
 #branding-logo {
   height: 32px;
   margin-inline-end: 18px;
 }
 
-#create-login-button {
-  margin-inline-start: 18px;
-  margin-inline-end: 18px;
-}
-
 #branding-logo {
   -moz-context-properties: fill;
   fill: #20123a;
 }
 
 @supports -moz-bool-pref("browser.in-content.dark-mode") {
   @media (prefers-color-scheme: dark) {
     #branding-logo {
--- a/browser/components/aboutlogins/content/aboutLogins.ftl
+++ b/browser/components/aboutlogins/content/aboutLogins.ftl
@@ -6,17 +6,17 @@
 ### being translated as the feature is still in heavy development
 ### and strings are likely to change often.
 
 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 =
   .title = Open menu
 menu-menuitem-faq = Frequently Asked Questions
 menu-menuitem-feedback = Leave Feedback
 menu-menuitem-import = Import Passwords…
 menu-menuitem-preferences =
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -20,17 +20,16 @@
     <link rel="stylesheet" href="chrome://browser/content/aboutlogins/aboutLogins.css">
     <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
     <link rel="icon" href="chrome://browser/content/aboutlogins/icons/favicon.svg">
   </head>
   <body>
     <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>
     <login-item></login-item>
     <confirm-delete-dialog hidden></confirm-delete-dialog>
 
     <template id="confirm-delete-dialog-template">
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
@@ -65,16 +64,17 @@
             <option data-l10n-id="login-list-last-used-option" value="last-used"/>
             <option data-l10n-id="login-list-last-changed-option" value="last-changed"/>
           </select>
         </label>
         <span class="count" data-l10n-id="login-list-count" data-l10n-args='{"count": 0}'></span>
       </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">
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-list-item.css">
       <span class="title"></span>
       <span class="username"></span>
--- a/browser/components/aboutlogins/content/aboutLogins.js
+++ b/browser/components/aboutlogins/content/aboutLogins.js
@@ -1,34 +1,26 @@
 /* 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/. */
 
-import { recordTelemetryEvent } from "./aboutLoginsUtils.js";
-
 let gElements = {};
 
 document.addEventListener(
   "DOMContentLoaded",
   () => {
     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 })
     );
 
     gElements.loginFilter.focus();
   },
   { once: true }
 );
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -25,9 +25,15 @@
   margin-inline-start: 18px;
 }
 
 ol {
   margin-top: 0;
   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;
+}
--- a/browser/components/aboutlogins/content/components/login-list.js
+++ b/browser/components/aboutlogins/content/components/login-list.js
@@ -1,13 +1,14 @@
 /* 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/. */
 
 import LoginListItem from "./login-list-item.js";
+import { recordTelemetryEvent } from "../aboutLoginsUtils.js";
 
 const collator = new Intl.Collator();
 const sortFnOptions = {
   name: (a, b) => collator.compare(a.title, b.title),
   "last-used": (a, b) => a.timeLastUsed < b.timeLastUsed,
   "last-changed": (a, b) => a.timePasswordChanged < b.timePasswordChanged,
 };
 
@@ -24,31 +25,33 @@ export default class LoginList extends H
     if (this.shadowRoot) {
       return;
     }
     let loginListTemplate = document.querySelector("#login-list-template");
     let shadowRoot = this.attachShadow({ mode: "open" });
     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();
 
     this.shadowRoot
       .getElementById("login-sort")
       .addEventListener("change", this);
     window.addEventListener("AboutLoginsClearSelection", this);
     window.addEventListener("AboutLoginsCreateLogin", this);
     window.addEventListener("AboutLoginsInitialLoginSelected", this);
     window.addEventListener("AboutLoginsLoginSelected", this);
     window.addEventListener("AboutLoginsFilterLogins", this);
     this.addEventListener("keydown", this);
+    this._createLoginButton.addEventListener("click", this);
   }
 
   /**
    *
    * @param {object} options optional
    *                         createLogin: When set to true will show and select
    *                                      a blank login-list-item.
    */
@@ -91,16 +94,21 @@ export default class LoginList extends H
   handleEvent(event) {
     switch (event.type) {
       case "change": {
         const sort = this._sortSelect.value;
         this._logins = this._logins.sort((a, b) => sortFnOptions[sort](a, b));
         this.render();
         break;
       }
+      case "click": {
+        window.dispatchEvent(new CustomEvent("AboutLoginsCreateLogin"));
+        recordTelemetryEvent({ object: "new_login", method: "new" });
+        break;
+      }
       case "AboutLoginsClearSelection": {
         if (!this._logins.length) {
           return;
         }
         window.dispatchEvent(
           new CustomEvent("AboutLoginsLoginSelected", {
             detail: this._logins[0],
           })