diff --git a/browser/components/search/SearchOneOffs.jsm b/browser/components/search/SearchOneOffs.jsm index 94e99530bbdc..ba6c0a81e5f9 100644 --- a/browser/components/search/SearchOneOffs.jsm +++ b/browser/components/search/SearchOneOffs.jsm @@ -148,6 +148,10 @@ class SearchOneOffs { return this.container.getAttribute(...args); } + hasAttribute(...args) { + return this.container.hasAttribute(...args); + } + setAttribute(...args) { this.container.setAttribute(...args); } @@ -194,18 +198,12 @@ class SearchOneOffs { /** * Width in pixels of the one-off buttons. + * NOTE: Used in browser/components/search/content/searchbar.js only. */ get buttonWidth() { return 48; } - /** - * Height in pixels of the one-off buttons. - */ - get buttonHeight() { - return 32; - } - /** * The popup that contains the one-offs. * @@ -275,7 +273,13 @@ class SearchOneOffs { if (this.isViewOpen) { let isOneOffSelected = this.selectedButton && - this.selectedButton.classList.contains("searchbar-engine-one-off-item"); + this.selectedButton.classList.contains( + "searchbar-engine-one-off-item" + ) && + !( + this.selectedButton == this.settingsButtonCompact && + this.hasAttribute("is_searchbar") + ); // Typing de-selects the settings or opensearch buttons at the bottom // of the search panel, as typing shows the user intends to search. if (this.selectedButton && !isOneOffSelected) { @@ -478,7 +482,10 @@ class SearchOneOffs { this.spacerCompact.setAttribute("flex", "1"); } - let engines = (await this.getEngineInfo()).engines; + // Ensure we can refer to the settings buttons by ID: + let origin = this.telemetryOrigin; + this.settingsButton.id = origin + "-anon-search-settings"; + this.settingsButtonCompact.id = origin + "-anon-search-settings-compact"; if (this.popup) { let buttonsWidth = this.popup.clientWidth; @@ -495,33 +502,17 @@ class SearchOneOffs { --buttonsWidth; } + // 8 is for the margin-inline of the setting button. + buttonsWidth -= this.settingsButtonCompact.clientWidth + 8; + // If the header string is very long, then the searchbar buttons will // overflow their container unless max-width is set. this.buttons.style.setProperty("max-width", `${buttonsWidth}px`); - - // In very narrow windows, we should always have at least one button - // per row. - buttonsWidth = Math.max(buttonsWidth, this.buttonWidth); - - let enginesPerRow = Math.floor(buttonsWidth / this.buttonWidth); - // There will be an empty area of: - // buttonsWidth - enginesPerRow * this.buttonWidth px - // at the end of each row. - - // If the
with the list of search engines doesn't have - // a fixed height, the panel will be sized incorrectly, causing the bottom - // of the suggestion to be hidden. - let engineCount = engines.length + addEngines.length; - let rowCount = Math.ceil(engineCount / enginesPerRow); - let height = rowCount * this.buttonHeight; - this.buttons.style.setProperty("height", `${height}px`); } - // Ensure we can refer to the settings buttons by ID: - let origin = this.telemetryOrigin; - this.settingsButton.id = origin + "-anon-search-settings"; - this.settingsButtonCompact.id = origin + "-anon-search-settings-compact"; + let engines = (await this.getEngineInfo()).engines; this._rebuildEngineList(engines, addEngines); + this.dispatchEvent(new Event("rebuild")); } diff --git a/browser/components/search/content/autocomplete-popup.js b/browser/components/search/content/autocomplete-popup.js index d780d3207e84..63771b9a1da0 100644 --- a/browser/components/search/content/autocomplete-popup.js +++ b/browser/components/search/content/autocomplete-popup.js @@ -108,7 +108,7 @@ - + `; } diff --git a/browser/components/search/test/browser/browser_searchbar_keyboard_navigation.js b/browser/components/search/test/browser/browser_searchbar_keyboard_navigation.js index 504dd3aef5d4..5e345a4c2cce 100644 --- a/browser/components/search/test/browser/browser_searchbar_keyboard_navigation.js +++ b/browser/components/search/test/browser/browser_searchbar_keyboard_navigation.js @@ -146,7 +146,7 @@ add_task(async function test_arrows() { } ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); await checkHeader(Services.search.defaultEngine); @@ -160,7 +160,7 @@ add_task(async function test_arrows() { info("now test the up arrow key"); EventUtils.synthesizeKey("KEY_ArrowUp"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); await checkHeader(Services.search.defaultEngine); @@ -215,7 +215,7 @@ add_task(async function test_typing_clears_button_selection() { EventUtils.synthesizeKey("KEY_ArrowUp"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); @@ -253,7 +253,7 @@ add_task(async function test_tab() { // One more selects the settings button. EventUtils.synthesizeKey("KEY_Tab"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); @@ -283,7 +283,7 @@ add_task(async function test_shift_tab() { // Press up once to select the last button. EventUtils.synthesizeKey("KEY_ArrowUp"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); @@ -413,7 +413,7 @@ add_task(async function test_alt_up() { // Cleanup for the next test. EventUtils.synthesizeKey("KEY_ArrowDown"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); EventUtils.synthesizeKey("KEY_ArrowDown"); @@ -593,7 +593,7 @@ add_task(async function test_open_search() { // Pressing up once selects the setting button... EventUtils.synthesizeKey("KEY_ArrowUp"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); @@ -634,7 +634,7 @@ add_task(async function test_open_search() { // Pressing down on the last engine item selects the settings button. EventUtils.synthesizeKey("KEY_ArrowDown"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); diff --git a/browser/components/search/test/browser/browser_searchbar_openpopup.js b/browser/components/search/test/browser/browser_searchbar_openpopup.js index b66cc7764aef..f9856b17d73f 100644 --- a/browser/components/search/test/browser/browser_searchbar_openpopup.js +++ b/browser/components/search/test/browser/browser_searchbar_openpopup.js @@ -201,21 +201,18 @@ add_task(async function open_empty_hiddenOneOffs() { set: [["browser.search.hiddenOneOffs", engines.map(e => e.name).join(",")]], }); - let oneOffButtons = searchPopup.searchOneOffsContainer.querySelector( - ".search-panel-one-offs" - ); textbox.value = "foo"; let promise = promiseEvent(searchPopup, "popupshown"); EventUtils.synthesizeMouseAtCenter(textbox, {}); await promise; Assert.ok( - oneOffButtons.hasAttribute("hidden"), - "The one-offs buttons should have the hidden attribute." + searchPopup.searchOneOffsContainer.hasAttribute("hidden"), + "The one-offs buttons container should have the hidden attribute." ); Assert.ok( - BrowserTestUtils.is_hidden(oneOffButtons), - "The one-off buttons should be hidden." + BrowserTestUtils.is_hidden(searchPopup.searchOneOffsContainer), + "The one-off buttons container should be hidden." ); promise = promiseEvent(searchPopup, "popuphidden"); diff --git a/browser/components/search/test/browser/browser_searchbar_smallpanel_keyboard_navigation.js b/browser/components/search/test/browser/browser_searchbar_smallpanel_keyboard_navigation.js index 86c50dfd4de7..0974295fcff2 100644 --- a/browser/components/search/test/browser/browser_searchbar_smallpanel_keyboard_navigation.js +++ b/browser/components/search/test/browser/browser_searchbar_smallpanel_keyboard_navigation.js @@ -108,7 +108,7 @@ add_task(async function test_arrows() { } ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); EventUtils.synthesizeKey("KEY_ArrowDown"); @@ -120,7 +120,7 @@ add_task(async function test_arrows() { info("now test the up arrow key"); EventUtils.synthesizeKey("KEY_ArrowUp"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); @@ -167,7 +167,7 @@ add_task(async function test_tab() { // One more selects the settings button. EventUtils.synthesizeKey("KEY_Tab"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); @@ -204,7 +204,7 @@ add_task(async function test_shift_tab() { // Press up once to select the last button. EventUtils.synthesizeKey("KEY_ArrowUp"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); @@ -321,7 +321,7 @@ add_task(async function test_alt_up() { // Cleanup for the next test. EventUtils.synthesizeKey("KEY_ArrowDown"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); EventUtils.synthesizeKey("KEY_ArrowDown"); @@ -400,7 +400,7 @@ add_task(async function test_open_search() { // Pressing up once selects the setting button... EventUtils.synthesizeKey("KEY_ArrowUp"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); @@ -441,7 +441,7 @@ add_task(async function test_open_search() { // Pressing down on the last engine item selects the settings button. EventUtils.synthesizeKey("KEY_ArrowDown"); ok( - textbox.selectedButton.classList.contains("search-setting-button"), + textbox.selectedButton.classList.contains("search-setting-button-compact"), "the settings item should be selected" ); diff --git a/browser/themes/shared/searchbar.inc.css b/browser/themes/shared/searchbar.inc.css index afc4555f64a9..fd7596a6b75c 100644 --- a/browser/themes/shared/searchbar.inc.css +++ b/browser/themes/shared/searchbar.inc.css @@ -225,6 +225,7 @@ .search-setting-button-compact { max-height: 32px; align-self: end; + margin-inline: var(--arrowpanel-menuitem-margin); } .search-setting-button-compact > .button-box > .button-icon { @@ -233,3 +234,7 @@ fill: currentColor; fill-opacity: var(--urlbar-icon-fill-opacity); } + +.search-one-offs[compact=true] .searchbar-separator { + display: none; +}