Bug 1572052 - Disable “Create New Login” button when creating a new login. r=MattN
authorTim Nguyen <ntim.bugs@gmail.com>
Tue, 13 Aug 2019 19:27:59 +0000
changeset 487763 2faaf439477012f2ff08949d3abf206d71a7ca2a
parent 487762 8d2d3b3fb7e27f0bd238985c265b4f50dc10bc05
child 487764 7b86930a9d34358e931f85148832fd0190fbf9d9
push id92448
push userntim.bugs@gmail.com
push dateTue, 13 Aug 2019 19:39:22 +0000
treeherderautoland@2faaf4394770 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1572052
milestone70.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 1572052 - Disable “Create New Login” button when creating a new login. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D41815
browser/components/aboutlogins/content/components/login-list.js
browser/components/aboutlogins/tests/browser/browser_createLogin.js
--- a/browser/components/aboutlogins/content/components/login-list.js
+++ b/browser/components/aboutlogins/content/components/login-list.js
@@ -97,20 +97,21 @@ export default class LoginList extends H
         this._breachesByLoginGUID &&
         this._breachesByLoginGUID.has(listItem.dataset.guid)
       ) {
         listItem.classList.add("breached");
       }
 
       listItem.hidden = !visibleLoginGuids.has(listItem.dataset.guid);
     }
-    this.classList.toggle(
-      "create-login-selected",
-      this._selectedGuid == null && Object.keys(this._logins).length > 0
-    );
+
+    let createLoginSelected =
+      this._selectedGuid == null && Object.keys(this._logins).length > 0;
+    this.classList.toggle("create-login-selected", createLoginSelected);
+    this._createLoginButton.disabled = createLoginSelected;
 
     // Re-arrange the login-list-items according to their sort
     for (let i = this._loginGuidsSortedOrder.length - 1; i >= 0; i--) {
       let guid = this._loginGuidsSortedOrder[i];
       let { listItem } = this._logins[guid];
       this._list.insertBefore(
         listItem,
         this._blankLoginListItem.nextElementSibling
@@ -470,16 +471,17 @@ export default class LoginList extends H
 
   _setListItemAsSelected(listItem) {
     let oldSelectedItem = this._list.querySelector(".selected");
     if (oldSelectedItem) {
       oldSelectedItem.classList.remove("selected");
       oldSelectedItem.removeAttribute("aria-selected");
     }
     this.classList.toggle("create-login-selected", !listItem.dataset.guid);
+    this._createLoginButton.disabled = !listItem.dataset.guid;
     listItem.classList.add("selected");
     listItem.setAttribute("aria-selected", "true");
     listItem.scrollIntoView();
     this._list.setAttribute("aria-activedescendant", listItem.id);
     this._selectedGuid = listItem.dataset.guid;
   }
 }
 customElements.define("login-list", LoginList);
--- a/browser/components/aboutlogins/tests/browser/browser_createLogin.js
+++ b/browser/components/aboutlogins/tests/browser/browser_createLogin.js
@@ -45,30 +45,32 @@ add_task(async function test_create_logi
       "passwordmgr-storage-changed",
       (_, data) => data == "addLogin"
     );
 
     await ContentTask.spawn(browser, originTuple, async aOriginTuple => {
       let loginList = Cu.waiveXrays(
         content.document.querySelector("login-list")
       );
-      let createButton = loginList.shadowRoot.querySelector(
-        ".create-login-button"
-      );
+      let createButton = loginList._createLoginButton;
       is(
         content.getComputedStyle(loginList._blankLoginListItem).display,
         "none",
         "the blank login list item should be hidden initially"
       );
+      ok(!createButton.disabled, "Create button should not be disabled initially");
+
       createButton.click();
+
       isnot(
         content.getComputedStyle(loginList._blankLoginListItem).display,
         "none",
         "the blank login list item should be visible after clicking on the create button"
       );
+      ok(createButton.disabled, "Create button should be disabled after being clicked");
 
       let loginItem = Cu.waiveXrays(
         content.document.querySelector("login-item")
       );
 
       let originInput = loginItem.shadowRoot.querySelector(
         "input[name='origin']"
       );
@@ -113,16 +115,21 @@ add_task(async function test_create_logi
           !loginList.classList.contains("no-logins"),
           "login-list should no longer be in no logins view"
         );
         is(
           content.getComputedStyle(loginList._blankLoginListItem).display,
           "none",
           "the blank login list item should be hidden after adding new login"
         );
+        ok(
+          !loginList._createLoginButton.disabled,
+          "Create button shouldn't be disabled after exiting create login view"
+        );
+
         let loginGuid = await ContentTaskUtils.waitForCondition(() => {
           return loginList._loginGuidsSortedOrder.find(
             guid => loginList._logins[guid].login.origin == aOriginTuple[1]
           );
         }, "Waiting for login to be displayed");
         ok(loginGuid, "Expected login found in login-list");
 
         let loginItem = Cu.waiveXrays(