Bug 1576272 - Show the empty-search results view of about:logins if the page is opened with a filter that doesn't match any stored logins. r=MattN

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

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

browser/components/aboutlogins/content/aboutLogins.css

@@ -38,8 +38,10 @@ login-list {
   grid-area: logins;
 }
 
-:root:not(.no-logins) login-intro,
+:root:not(.no-logins):not(.empty-search):not(.login-selected) login-intro,
 login-item[data-editing="true"] + login-intro,
+.login-selected login-intro,
+.empty-search:not(.login-selected) login-item:not([data-editing="true"]),
 .no-logins login-item:not([data-editing="true"]) {
   display: none;
 }

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

@@ -462,6 +462,7 @@ export default class LoginItem extends HTMLElement {
     } else {
       this.dataset.isNewLogin = true;
     }
+    document.documentElement.classList.toggle("login-selected", login.guid);
     this._toggleEditing(!login.guid);
 
     this._revealCheckbox.checked = false;

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

@@ -71,7 +71,11 @@ export default class LoginList extends HTMLElement {
   render() {
     let visibleLoginGuids = this._applyFilter();
     this._updateVisibleLoginCount(visibleLoginGuids.size);
-    this.classList.toggle("empty-search", visibleLoginGuids.size == 0);
+    this.classList.toggle("empty-search", !visibleLoginGuids.size);
+    document.documentElement.classList.toggle(
+      "empty-search",
+      this._filter && !visibleLoginGuids.size
+    );
 
     // Add all of the logins that are not in the DOM yet.
     let fragment = document.createDocumentFragment();
@@ -103,11 +107,6 @@ export default class LoginList extends HTMLElement {
       listItem.hidden = !visibleLoginGuids.has(listItem.dataset.guid);
     }
 
-    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];

browser/components/aboutlogins/tests/browser/browser_openFiltered.js

@@ -52,6 +52,16 @@ add_task(async function test_query_parameter_filter() {
       "Waiting for TEST_LOGIN1 to be selected for the login-item view"
     );
 
+    ok(
+      ContentTaskUtils.is_visible(loginItem),
+      "login-item should be visible when a login is selected"
+    );
+    let loginIntro = content.document.querySelector("login-intro");
+    ok(
+      ContentTaskUtils.is_hidden(loginIntro),
+      "login-intro should be hidden when a login is selected"
+    );
+
     let loginFilter = content.document.querySelector("login-filter");
     let xRayLoginFilter = Cu.waiveXrays(loginFilter);
     is(
@@ -90,3 +100,84 @@ add_task(async function test_query_parameter_filter() {
     );
   });
 });
+
+add_task(async function test_query_parameter_filter_no_logins_for_site() {
+  BrowserTestUtils.removeTab(gBrowser.selectedTab);
+  const HOSTNAME_WITH_NO_LOGINS = "xxx-no-logins-for-site-xxx";
+  let tabOpenedPromise = BrowserTestUtils.waitForNewTab(
+    gBrowser,
+    "about:logins?filter=" + encodeURIComponent(HOSTNAME_WITH_NO_LOGINS),
+    true
+  );
+  LoginHelper.openPasswordManager(window, {
+    filterString: HOSTNAME_WITH_NO_LOGINS,
+    entryPoint: "preferences",
+  });
+  await tabOpenedPromise;
+
+  let browser = gBrowser.selectedBrowser;
+  await ContentTask.spawn(browser, null, async () => {
+    let loginList = Cu.waiveXrays(content.document.querySelector("login-list"));
+    await ContentTaskUtils.waitForCondition(() => {
+      return loginList._loginGuidsSortedOrder.length == 2;
+    }, "Waiting for logins to be cached");
+    is(
+      loginList._loginGuidsSortedOrder.length,
+      2,
+      "login list should have two logins stored"
+    );
+
+    ok(
+      ContentTaskUtils.is_hidden(loginList._list),
+      "the login list should be hidden when there is a search with no results"
+    );
+    let intro = loginList.shadowRoot.querySelector(".intro");
+    ok(
+      ContentTaskUtils.is_hidden(intro),
+      "the intro should be hidden when there is a search with no results"
+    );
+    let emptySearchMessage = loginList.shadowRoot.querySelector(
+      ".empty-search-message"
+    );
+    ok(
+      ContentTaskUtils.is_visible(emptySearchMessage),
+      "the empty search message should be visible when there is a search with no results"
+    );
+
+    let visibleLoginListItems = loginList.shadowRoot.querySelectorAll(
+      ".login-list-item:not(#new-login-list-item):not([hidden])"
+    );
+    is(visibleLoginListItems.length, 0, "No login should be visible");
+
+    ok(
+      !loginList._createLoginButton.disabled,
+      "create button should be enabled"
+    );
+
+    let loginItem = content.document.querySelector("login-item");
+    ok(!loginItem.dataset.isNewLogin, "should not be in create mode");
+    ok(!loginItem.dataset.editing, "should not be in edit mode");
+    ok(
+      ContentTaskUtils.is_hidden(loginItem),
+      "login-item should be hidden when a login is not selected and we're not in create mode"
+    );
+    let loginIntro = content.document.querySelector("login-intro");
+    ok(
+      ContentTaskUtils.is_visible(loginIntro),
+      "login-intro should be visible when a login is not selected and we're not in create mode"
+    );
+
+    loginList._createLoginButton.click();
+
+    ok(loginItem.dataset.isNewLogin, "should be in create mode");
+    ok(loginItem.dataset.editing, "should be in edit mode");
+    ok(
+      ContentTaskUtils.is_visible(loginItem),
+      "login-item should be visible in create mode"
+    );
+    ok(
+      ContentTaskUtils.is_hidden(loginIntro),
+      "login-intro should be hidden in create mode"
+    );
+  });
+});