diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css index 995ebaa60d7b..518b529b24b1 100644 --- a/browser/components/firefoxview/firefoxview.css +++ b/browser/components/firefoxview/firefoxview.css @@ -16,7 +16,6 @@ --fxview-text-color-hover: var(--newtab-text-primary-color); --fxview-primary-action-background: var(--newtab-primary-action-background, #0061e0); --fxview-border: var(--border-color-transparent); - --fxview-border-interactive: var(--border-color-interactive); --fxview-indicator-stroke-color-hover: #deddde; /* ensure utility button hover states match those of the rest of the page */ diff --git a/browser/components/firefoxview/fxview-search-textbox.css b/browser/components/firefoxview/fxview-search-textbox.css deleted file mode 100644 index ac8b7cae3e58..000000000000 --- a/browser/components/firefoxview/fxview-search-textbox.css +++ /dev/null @@ -1,76 +0,0 @@ -/* 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/. */ - -.search-container { - color: var(--fxview-text-primary-color); - display: inline-flex; - overflow: hidden; - position: relative; - - &:focus-within { - overflow: visible; - } -} - -.search-icon { - background-image: url(chrome://global/skin/icons/search-textbox.svg); - background-position: center; - background-repeat: no-repeat; - background-size: 16px; - fill: currentColor; - -moz-context-properties: fill; - height: 16px; - width: 16px; - position: absolute; - top: 0; - bottom: 0; - margin: auto 0; - padding: 2px; - pointer-events: none; -} - -.search-icon:dir(ltr) { - left: 8px; -} - -.search-icon:dir(rtl) { - right: 8px; -} - -input { - border: 1px solid var(--fxview-border-interactive); - border-radius: var(--border-radius-small); - padding: 8px 32px; - width: 100%; -} - -.clear-icon { - background-image: url(resource://content-accessible/close-12.svg); - background-position: center; - background-repeat: no-repeat; - background-size: 16px; - fill: currentColor; - -moz-context-properties: fill; - cursor: pointer; - height: 16px; - width: 16px; - position: absolute; - top: 0; - bottom: 0; - margin: auto 0; - padding: 2px; -} - -.clear-icon:hover { - background-color: var(--fxview-element-background-hover); - color: var(--fxview-text-color-hover); -} - -.clear-icon:dir(ltr) { - right: 8px; -} - -.clear-icon:dir(rtl) { - left: 8px; -} diff --git a/browser/components/firefoxview/fxview-search-textbox.mjs b/browser/components/firefoxview/fxview-search-textbox.mjs deleted file mode 100644 index 771ca2370a82..000000000000 --- a/browser/components/firefoxview/fxview-search-textbox.mjs +++ /dev/null @@ -1,134 +0,0 @@ -/* 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 { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs"; -import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; - -const SEARCH_DEBOUNCE_RATE_MS = 500; - -/** - * A search box that displays a search icon and is clearable. Updates to the - * search query trigger a `fxview-search-textbox-query` event with the current - * query value. - * - * There is no actual searching done here. That needs to be implemented by the - * `fxview-search-textbox-query` event handler. `searchTabList()` from - * `search-helpers.mjs` can be used as a starting point. - * - * @property {string} placeholder - * The placeholder text for the search box. - * @property {number} size - * The width (number of characters) of the search box. - * @property {string} pageName - * The hash for the page name that the search input is located on. - */ -export default class FxviewSearchTextbox extends MozLitElement { - static properties = { - placeholder: { type: String }, - size: { type: Number }, - pageName: { type: String }, - autofocus: { type: Boolean }, - }; - - static queries = { - clearButton: ".clear-icon", - input: "input", - }; - - #query = ""; - #searchTimer; - - firstUpdated() { - if (this.autofocus) { - this.focus(); - } - } - - disconnectedCallback() { - super.disconnectedCallback(); - clearTimeout(this.#searchTimer); - } - - focus() { - this.input.focus(); - } - - blur() { - this.input.blur(); - } - - onInput(event) { - this.#query = event.target.value.trim(); - event.preventDefault(); - this.onSearch(); - } - - /** - * Handler for query updates from keyboard input, and textbox clears from 'X' - * button. - */ - onSearch() { - clearTimeout(this.#searchTimer); - this.#searchTimer = setTimeout( - () => this.#dispatchQueryEvent(), - SEARCH_DEBOUNCE_RATE_MS - ); - this.requestUpdate(); - } - - clear(event) { - if ( - event.type == "click" || - (event.type == "keydown" && event.code == "Enter") || - (event.type == "keydown" && event.code == "Space") - ) { - this.#query = ""; - event.preventDefault(); - this.onSearch(); - } - } - - #dispatchQueryEvent() { - window.scrollTo(0, 0); - this.dispatchEvent( - new CustomEvent("fxview-search-textbox-query", { - bubbles: true, - composed: true, - detail: { query: this.#query }, - }) - ); - if (!window.IS_STORYBOOK) { - Glean.firefoxviewNext.searchInitiatedSearch.record({ - page: this.pageName, - }); - } - } - - render() { - return html` - -
-
- -
-
`; - } -} - -customElements.define("fxview-search-textbox", FxviewSearchTextbox); diff --git a/browser/components/firefoxview/history.mjs b/browser/components/firefoxview/history.mjs index 0fb3fc806bbc..80ffcc5bdd25 100644 --- a/browser/components/firefoxview/history.mjs +++ b/browser/components/firefoxview/history.mjs @@ -121,7 +121,7 @@ class HistoryInView extends ViewPage { emptyState: "fxview-empty-state", lists: { all: "fxview-tab-list" }, showAllHistoryBtn: ".show-all-history-button", - searchTextbox: "fxview-search-textbox", + searchTextbox: "moz-input-search", sortInputs: { all: "input[name=history-sort-option]" }, panelList: "panel-list", }; @@ -168,6 +168,11 @@ class HistoryInView extends ViewPage { } onSearchQuery(e) { + if (!this.recentBrowsing) { + Glean.firefoxviewNext.searchInitiatedSearch.record({ + page: "history", + }); + } this.controller.onSearchQuery(e); this.cumulativeSearches = this.controller.searchQuery ? this.cumulativeSearches + 1 @@ -414,13 +419,11 @@ class HistoryInView extends ViewPage {

- + @MozInputSearch:search=${this.onSearchQuery} + >

-
- -
+

- + @MozInputSearch:search=${this.onSearchQuery} + >
diff --git a/browser/components/firefoxview/recentlyclosed.mjs b/browser/components/firefoxview/recentlyclosed.mjs index 679518a168a5..b903942c2cf4 100644 --- a/browser/components/firefoxview/recentlyclosed.mjs +++ b/browser/components/firefoxview/recentlyclosed.mjs @@ -58,7 +58,7 @@ class RecentlyClosedTabsInView extends ViewPage { static queries = { cardEl: "card-container", emptyState: "fxview-empty-state", - searchTextbox: "fxview-search-textbox", + searchTextbox: "moz-input-search", tabList: "fxview-tab-list", }; @@ -91,7 +91,7 @@ class RecentlyClosedTabsInView extends ViewPage { if (this.recentBrowsing) { this.recentBrowsingElement.addEventListener( - "fxview-search-textbox-query", + "MozInputSearch:search", this ); } @@ -116,7 +116,7 @@ class RecentlyClosedTabsInView extends ViewPage { if (this.recentBrowsing) { this.recentBrowsingElement.removeEventListener( - "fxview-search-textbox-query", + "MozInputSearch:search", this ); } @@ -130,7 +130,7 @@ class RecentlyClosedTabsInView extends ViewPage { } handleEvent(event) { - if (this.recentBrowsing && event.type === "fxview-search-textbox-query") { + if (this.recentBrowsing && event.type === "MozInputSearch:search") { this.onSearchQuery(event); } } @@ -343,15 +343,11 @@ class RecentlyClosedTabsInView extends ViewPage { data-l10n-id="firefoxview-recently-closed-header" >
- + @MozInputSearch:search=${this.onSearchQuery} + >
` )} @@ -413,6 +409,11 @@ class RecentlyClosedTabsInView extends ViewPage { } onSearchQuery(e) { + if (!this.recentBrowsing) { + Glean.firefoxviewNext.searchInitiatedSearch.record({ + page: "recentlyclosed", + }); + } this.searchQuery = e.detail.query; this.showAll = false; this.cumulativeSearches = this.searchQuery diff --git a/browser/components/firefoxview/syncedtabs.mjs b/browser/components/firefoxview/syncedtabs.mjs index 036964a860b5..8405be4a4615 100644 --- a/browser/components/firefoxview/syncedtabs.mjs +++ b/browser/components/firefoxview/syncedtabs.mjs @@ -62,7 +62,7 @@ class SyncedTabsInView extends ViewPage { static queries = { cardEls: { all: "card-container" }, emptyState: "fxview-empty-state", - searchTextbox: "fxview-search-textbox", + searchTextbox: "moz-input-search", tabLists: { all: "syncedtabs-tab-list" }, }; @@ -77,7 +77,7 @@ class SyncedTabsInView extends ViewPage { if (this.recentBrowsing) { this.recentBrowsingElement.addEventListener( - "fxview-search-textbox-query", + "MozInputSearch:search", this.onSearchQuery ); } @@ -94,7 +94,7 @@ class SyncedTabsInView extends ViewPage { if (this.recentBrowsing) { this.recentBrowsingElement.removeEventListener( - "fxview-search-textbox-query", + "MozInputSearch:search", this.onSearchQuery ); } @@ -252,6 +252,11 @@ class SyncedTabsInView extends ViewPage { } onSearchQuery(e) { + if (!this.recentBrowsing) { + Glean.firefoxviewNext.searchInitiatedSearch.record({ + page: "syncedtabs", + }); + } this.controller.searchQuery = e.detail.query; this.cumulativeSearches = e.detail.query ? this.cumulativeSearches + 1 : 0; this.showAll = false; @@ -390,15 +395,11 @@ class SyncedTabsInView extends ViewPage { >
- + @MozInputSearch:search=${this.onSearchQuery} + >
${when( this.controller.currentSetupStateIndex === 4, diff --git a/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js index 527f6c1108f1..ed58715e8f03 100644 --- a/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js +++ b/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js @@ -471,7 +471,8 @@ add_task(async function test_search_history() { }, "There are no matching search results."); info("Clear the search query."); - EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content); + searchTextbox.select(); + EventUtils.synthesizeKey("VK_BACK_SPACE"); await BrowserTestUtils.waitForMutationCondition( historyComponent.shadowRoot, { childList: true, subtree: true }, @@ -488,26 +489,6 @@ add_task(async function test_search_history() { const tabList = historyComponent.lists[0]; return tabList?.emptyState; }, "There are no matching search results."); - - info("Clear the search query with keyboard."); - is( - historyComponent.shadowRoot.activeElement, - searchTextbox, - "Search input is focused" - ); - EventUtils.synthesizeKey("KEY_Tab", {}, content); - ok( - searchTextbox.clearButton.matches(":focus-visible"), - "Clear Search button is focused" - ); - EventUtils.synthesizeKey("KEY_Enter", {}, content); - await BrowserTestUtils.waitForMutationCondition( - historyComponent.shadowRoot, - { childList: true, subtree: true }, - () => - historyComponent.cards.length === - historyComponent.controller.historyVisits.length - ); }); }); @@ -550,7 +531,8 @@ add_task(async function test_search_ignores_stale_queries() { await TestUtils.waitForCondition(() => bogusQueryInProgress); info("Clear the bogus query."); - EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content); + searchTextbox.select(); + EventUtils.synthesizeKey("VK_BACK_SPACE"); await searchTextbox.updateComplete; info("Input a real search query."); diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_search.js b/browser/components/firefoxview/tests/browser/browser_opentabs_search.js index 54ca2a5f0d6d..79bae613b799 100644 --- a/browser/components/firefoxview/tests/browser/browser_opentabs_search.js +++ b/browser/components/firefoxview/tests/browser/browser_opentabs_search.js @@ -54,11 +54,8 @@ add_task(async function search_open_tabs() { ); info("Clear the search query."); - EventUtils.synthesizeMouseAtCenter( - openTabs.searchTextbox.clearButton, - {}, - content - ); + openTabs.searchTextbox.select(); + EventUtils.synthesizeKey("VK_BACK_SPACE"); await TestUtils.waitForCondition( () => openTabs.viewCards[0].tabList.rowEls.length === winTabs.length, "The original window's list is restored." @@ -80,27 +77,6 @@ add_task(async function search_open_tabs() { () => openTabs.viewCards[1].tabList.rowEls.length === 1, "There is one matching search result in the new window." ); - - info("Clear the search query with keyboard."); - is( - openTabs.shadowRoot.activeElement, - openTabs.searchTextbox, - "Search input is focused" - ); - EventUtils.synthesizeKey("KEY_Tab", {}, content); - ok( - openTabs.searchTextbox.clearButton.matches(":focus-visible"), - "Clear Search button is focused" - ); - EventUtils.synthesizeKey("KEY_Enter", {}, content); - await TestUtils.waitForCondition( - () => openTabs.viewCards[0].tabList.rowEls.length === winTabs.length, - "The original window's list is restored." - ); - await TestUtils.waitForCondition( - () => openTabs.viewCards[1].tabList.rowEls.length === newWinTabs.length, - "The new window's list is restored." - ); }); await SpecialPowers.popPrefEnv(); diff --git a/browser/components/firefoxview/tests/browser/browser_recentlyclosed_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_recentlyclosed_firefoxview.js index 24567ed93b7c..97338d5a82ef 100644 --- a/browser/components/firefoxview/tests/browser/browser_recentlyclosed_firefoxview.js +++ b/browser/components/firefoxview/tests/browser/browser_recentlyclosed_firefoxview.js @@ -561,7 +561,8 @@ add_task(async function test_search() { ); info("Clear the search query."); - EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content); + searchTextbox.select(); + EventUtils.synthesizeKey("VK_BACK_SPACE"); await TestUtils.waitForCondition( () => listElem.rowEls.length === expectedURLs.length, "The original list is restored." @@ -575,21 +576,6 @@ add_task(async function test_search() { () => tabList.shadowRoot.querySelector("fxview-empty-state"), "There are no matching search results." ); - - info("Clear the search query with keyboard."); - EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content); - - is( - recentlyClosedComponent.shadowRoot.activeElement, - searchTextbox, - "Search input is focused" - ); - EventUtils.synthesizeKey("KEY_Tab", {}, content); - EventUtils.synthesizeKey("KEY_Enter", {}, content); - await TestUtils.waitForCondition( - () => listElem.rowEls.length === expectedURLs.length, - "The original list is restored." - ); }); await cleanup(); }); diff --git a/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js index ed285833d853..176b1d1e2edf 100644 --- a/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js +++ b/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js @@ -561,11 +561,8 @@ add_task(async function search_synced_tabs() { ); info("Clear the search query."); - EventUtils.synthesizeMouseAtCenter( - syncedTabsComponent.searchTextbox.clearButton, - {}, - content - ); + syncedTabsComponent.searchTextbox.select(); + EventUtils.synthesizeKey("VK_BACK_SPACE"); await TestUtils.waitForCondition( () => syncedTabsComponent.fullyUpdated, "Synced Tabs component is done updating." @@ -625,51 +622,6 @@ add_task(async function search_synced_tabs() { !syncedTabsComponent.cardEls[1].querySelector("syncedtabs-tab-list"), "There are no matching search results for the second device." ); - - info("Clear the search query with keyboard."); - is( - syncedTabsComponent.shadowRoot.activeElement, - syncedTabsComponent.searchTextbox, - "Search input is focused" - ); - EventUtils.synthesizeKey("KEY_Tab", {}, content); - ok( - syncedTabsComponent.searchTextbox.clearButton.matches(":focus-visible"), - "Clear Search button is focused" - ); - EventUtils.synthesizeKey("KEY_Enter", {}, content); - await TestUtils.waitForCondition( - () => syncedTabsComponent.fullyUpdated, - "Synced Tabs component is done updating." - ); - await TestUtils.waitForCondition( - () => - syncedTabsComponent.cardEls[0].querySelector("syncedtabs-tab-list") && - syncedTabsComponent.cardEls[0].querySelector("syncedtabs-tab-list") - .rowEls.length && - syncedTabsComponent.cardEls[1].querySelector("syncedtabs-tab-list") && - syncedTabsComponent.cardEls[1].querySelector("syncedtabs-tab-list") - .rowEls.length, - "The tab list has loaded for the first two cards." - ); - deviceOneTabs = syncedTabsComponent.cardEls[0].querySelector( - "syncedtabs-tab-list" - ).rowEls; - deviceTwoTabs = syncedTabsComponent.cardEls[1].querySelector( - "syncedtabs-tab-list" - ).rowEls; - await TestUtils.waitForCondition( - () => - syncedTabsComponent.cardEls[0].querySelector("syncedtabs-tab-list") - .rowEls.length === deviceOneTabs.length, - "The original device's list is restored." - ); - await TestUtils.waitForCondition( - () => - syncedTabsComponent.cardEls[1].querySelector("syncedtabs-tab-list") - .rowEls.length === deviceTwoTabs.length, - "The new devices's list is restored." - ); }); await SpecialPowers.popPrefEnv(); await tearDown(sandbox); diff --git a/browser/components/firefoxview/tests/chrome/chrome.toml b/browser/components/firefoxview/tests/chrome/chrome.toml index 1dfbb1331247..3edeefd4a9b6 100644 --- a/browser/components/firefoxview/tests/chrome/chrome.toml +++ b/browser/components/firefoxview/tests/chrome/chrome.toml @@ -2,6 +2,4 @@ ["test_card_container.html"] -["test_fxview_search_textbox.html"] - ["test_fxview_tab_list.html"] diff --git a/browser/components/firefoxview/tests/chrome/test_fxview_search_textbox.html b/browser/components/firefoxview/tests/chrome/test_fxview_search_textbox.html deleted file mode 100644 index 612551edd48a..000000000000 --- a/browser/components/firefoxview/tests/chrome/test_fxview_search_textbox.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - FxviewSearchTextbox Tests - - - - - - - -

-
- -
-
- -

-
-
-
diff --git a/browser/components/firefoxview/viewpage.mjs b/browser/components/firefoxview/viewpage.mjs
index cfe2933295d8..a5d2b948e9fb 100644
--- a/browser/components/firefoxview/viewpage.mjs
+++ b/browser/components/firefoxview/viewpage.mjs
@@ -9,8 +9,6 @@ import "chrome://browser/content/firefoxview/card-container.mjs";
 // eslint-disable-next-line import/no-unassigned-import
 import "chrome://browser/content/firefoxview/fxview-empty-state.mjs";
 // eslint-disable-next-line import/no-unassigned-import
-import "chrome://browser/content/firefoxview/fxview-search-textbox.mjs";
-// eslint-disable-next-line import/no-unassigned-import
 import "chrome://browser/content/firefoxview/fxview-tab-list.mjs";
 
 const lazy = {};
diff --git a/browser/components/sidebar/sidebar-history.css b/browser/components/sidebar/sidebar-history.css
index 8d8971e281d1..963999514e25 100644
--- a/browser/components/sidebar/sidebar-history.css
+++ b/browser/components/sidebar/sidebar-history.css
@@ -8,7 +8,7 @@
   align-items: center;
 }
 
-fxview-search-textbox {
+moz-input-search {
   flex: 1;
 }
 
diff --git a/browser/components/sidebar/sidebar-history.html b/browser/components/sidebar/sidebar-history.html
index fa61f56fe5c9..bf4880f40c81 100644
--- a/browser/components/sidebar/sidebar-history.html
+++ b/browser/components/sidebar/sidebar-history.html
@@ -21,10 +21,6 @@
       rel="stylesheet"
       href="chrome://browser/content/sidebar/sidebar.css"
     />
-    
     
-