diff --git a/browser/components/aboutlogins/content/aboutLogins.css b/browser/components/aboutlogins/content/aboutLogins.css index b731ed464ead..cb1df1ec2272 100644 --- a/browser/components/aboutlogins/content/aboutLogins.css +++ b/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; } diff --git a/browser/components/aboutlogins/content/components/login-item.js b/browser/components/aboutlogins/content/components/login-item.js index c096934f31c4..b0a0828eb304 100644 --- a/browser/components/aboutlogins/content/components/login-item.js +++ b/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; diff --git a/browser/components/aboutlogins/content/components/login-list.js b/browser/components/aboutlogins/content/components/login-list.js index fad546492d1c..0e50db12c456 100644 --- a/browser/components/aboutlogins/content/components/login-list.js +++ b/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]; diff --git a/browser/components/aboutlogins/tests/browser/browser_openFiltered.js b/browser/components/aboutlogins/tests/browser/browser_openFiltered.js index d8dac3c86479..fb973737f758 100644 --- a/browser/components/aboutlogins/tests/browser/browser_openFiltered.js +++ b/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" + ); + }); +});