Bug 1969471 - Remove fxview-search-textbox. r=fxview-reviewers,desktop-theme-reviewers,sidebar-reviewers,dao,nsharpley

Use <moz-input-search>.

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

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 */

browser/components/firefoxview/fxview-search-textbox.css

@@ -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;
-}

browser/components/firefoxview/fxview-search-textbox.mjs

@@ -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`
-    <link rel="stylesheet" href="chrome://browser/content/firefoxview/fxview-search-textbox.css" />
-    <div class="search-container" part="container">
-      <div class="search-icon"></div>
-      <input
-        part="input"
-        type="search"
-        .placeholder=${ifDefined(this.placeholder)}
-        .size=${ifDefined(this.size)}
-        .value=${this.#query}
-        @input=${this.onInput}
-      ></input>
-      <div
-        class="clear-icon"
-        role="button"
-        tabindex="0"
-        ?hidden=${!this.#query}
-        @click=${this.clear}
-        @keydown=${this.clear}
-        data-l10n-id="firefoxview-search-text-box-clear-button"
-      ></div>
-    </div>`;
-  }
-}
-
-customElements.define("fxview-search-textbox", FxviewSearchTextbox);

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 {
         <h2 class="page-header" data-l10n-id="firefoxview-history-header"></h2>
         <div class="history-sort-options">
           <div class="history-sort-option">
-            <fxview-search-textbox
+            <moz-input-search
               data-l10n-id="firefoxview-search-text-box-history"
               data-l10n-attrs="placeholder"
-              .size=${this.searchTextboxSize}
+              @MozInputSearch:search=${this.onSearchQuery}
-              pageName=${this.recentBrowsing ? "recentbrowsing" : "history"}
+            ></moz-input-search>
-              @fxview-search-textbox-query=${this.onSearchQuery}
-            ></fxview-search-textbox>
           </div>
           <div class="history-sort-option">
             <input

browser/components/firefoxview/jar.mn

@@ -19,8 +19,6 @@ browser.jar:
     content/browser/firefoxview/fxview-empty-state.mjs
     content/browser/firefoxview/helpers.mjs
     content/browser/firefoxview/search-helpers.mjs
-    content/browser/firefoxview/fxview-search-textbox.css
-    content/browser/firefoxview/fxview-search-textbox.mjs
     content/browser/firefoxview/fxview-tab-list.css
     content/browser/firefoxview/fxview-tab-list.mjs
     content/browser/firefoxview/fxview-tab-row.css

browser/components/firefoxview/opentabs.mjs

@@ -58,7 +58,7 @@ class OpenTabsInView extends ViewPage {
   static queries = {
     viewCards: { all: "view-opentabs-card" },
     optionsContainer: ".open-tabs-options",
-    searchTextbox: "fxview-search-textbox",
+    searchTextbox: "moz-input-search",
   };
 
   initialWindowsReady = false;
@@ -106,7 +106,7 @@ class OpenTabsInView extends ViewPage {
 
     if (this.recentBrowsing) {
       this.recentBrowsingElement.addEventListener(
-        "fxview-search-textbox-query",
+        "MozInputSearch:search",
         this
       );
     }
@@ -145,7 +145,7 @@ class OpenTabsInView extends ViewPage {
 
     if (this.recentBrowsing) {
       this.recentBrowsingElement.removeEventListener(
-        "fxview-search-textbox-query",
+        "MozInputSearch:search",
         this
       );
     }
@@ -222,15 +222,11 @@ class OpenTabsInView extends ViewPage {
       <div class="sticky-container bottom-fade">
         <h2 class="page-header" data-l10n-id="firefoxview-opentabs-header"></h2>
         <div class="open-tabs-options">
-          <div>
+          <moz-input-search
-            <fxview-search-textbox
+            data-l10n-id="firefoxview-search-text-box-opentabs"
-              data-l10n-id="firefoxview-search-text-box-opentabs"
+            data-l10n-attrs="placeholder"
-              data-l10n-attrs="placeholder"
+            @MozInputSearch:search=${this.onSearchQuery}
-              @fxview-search-textbox-query=${this.onSearchQuery}
+          ></moz-input-search>
-              .size=${this.searchTextboxSize}
-              pageName=${this.recentBrowsing ? "recentbrowsing" : "opentabs"}
-            ></fxview-search-textbox>
-          </div>
           <div class="open-tabs-sort-wrapper">
             <div class="open-tabs-sort-option">
               <input
@@ -305,6 +301,11 @@ class OpenTabsInView extends ViewPage {
   }
 
   onSearchQuery(e) {
+    if (!this.recentBrowsing) {
+      Glean.firefoxviewNext.searchInitiatedSearch.record({
+        page: "opentabs",
+      });
+    }
     this.searchQuery = e.detail.query;
   }
 
@@ -338,7 +339,7 @@ class OpenTabsInView extends ViewPage {
   }
 
   handleEvent({ detail, type }) {
-    if (this.recentBrowsing && type === "fxview-search-textbox-query") {
+    if (this.recentBrowsing && type === "MozInputSearch:search") {
       this.onSearchQuery({ detail });
       return;
     }

browser/components/firefoxview/recentbrowsing.mjs

@@ -12,7 +12,7 @@ class RecentBrowsingInView extends ViewPage {
   }
 
   static queries = {
-    searchTextbox: "fxview-search-textbox",
+    searchTextbox: "moz-input-search",
   };
 
   static properties = {
@@ -35,6 +35,14 @@ class RecentBrowsingInView extends ViewPage {
     }
   }
 
+  onSearchQuery() {
+    // Individual components also listen to this event, so no need to do
+    // anything else.
+    Glean.firefoxviewNext.searchInitiatedSearch.record({
+      page: "recentbrowsing",
+    });
+  }
+
   render() {
     return html`
       <link
@@ -44,12 +52,11 @@ class RecentBrowsingInView extends ViewPage {
       <div class="sticky-container bottom-fade">
         <h2 class="page-header" data-l10n-id="firefoxview-overview-header"></h2>
         <div class="search-container">
-          <fxview-search-textbox
+          <moz-input-search
             data-l10n-id="firefoxview-search-text-box-recentbrowsing"
             data-l10n-attrs="placeholder"
-            .size=${this.searchTextboxSize}
+            @MozInputSearch:search=${this.onSearchQuery}
-            pageName="recentbrowsing"
+          ></moz-input-search>
-          ></fxview-search-textbox>
         </div>
       </div>
       <div class="cards-container">

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"
             ></h2>
             <div>
-              <fxview-search-textbox
+              <moz-input-search
                 data-l10n-id="firefoxview-search-text-box-recentlyclosed"
                 data-l10n-attrs="placeholder"
-                @fxview-search-textbox-query=${this.onSearchQuery}
+                @MozInputSearch:search=${this.onSearchQuery}
-                .size=${this.searchTextboxSize}
+              ></moz-input-search>
-                pageName=${this.recentBrowsing
-                  ? "recentbrowsing"
-                  : "recentlyclosed"}
-              ></fxview-search-textbox>
             </div>
           </div>`
       )}
@@ -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

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 {
           ></h2>
           <div class="syncedtabs-header">
             <div>
-              <fxview-search-textbox
+              <moz-input-search
                 data-l10n-id="firefoxview-search-text-box-tabs"
                 data-l10n-attrs="placeholder"
-                @fxview-search-textbox-query=${this.onSearchQuery}
+                @MozInputSearch:search=${this.onSearchQuery}
-                .size=${this.searchTextboxSize}
+              ></moz-input-search>
-                pageName=${this.recentBrowsing
-                  ? "recentbrowsing"
-                  : "syncedtabs"}
-              ></fxview-search-textbox>
             </div>
             ${when(
               this.controller.currentSetupStateIndex === 4,

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.");

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.select();
-      openTabs.searchTextbox.clearButton,
+    EventUtils.synthesizeKey("VK_BACK_SPACE");
-      {},
-      content
-    );
     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();

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();
 });

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.select();
-      syncedTabsComponent.searchTextbox.clearButton,
+    EventUtils.synthesizeKey("VK_BACK_SPACE");
-      {},
-      content
-    );
     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);

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"]

browser/components/firefoxview/tests/chrome/test_fxview_search_textbox.html

@@ -1,64 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>FxviewSearchTextbox Tests</title>
-  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
-  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
-  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
-  <link rel="localization" href="browser/firefoxView.ftl"/>
-  <script type="module" src="chrome://browser/content/firefoxview/fxview-search-textbox.mjs"></script>
-</head>
-<body>
-<p id="display"></p>
-<div id="search-test">
-  <fxview-search-textbox></fxview-search-textbox>
-</div>
-<div id="focus-test"></div>
-
-<pre id="test"></pre>
-<script>
-  add_task(async function test_search_and_clear() {
-    const component = document.querySelector("#search-test fxview-search-textbox");
-
-    info("Enter a search query.");
-    let eventDeferred = Promise.withResolvers();
-    component.addEventListener("fxview-search-textbox-query", e =>
-      eventDeferred.resolve(e)
-    );
-    synthesizeMouseAtCenter(component, {});
-    sendChar("Q");
-    let query = (await eventDeferred.promise).detail.query;
-    is(query, "Q", "Event was fired with the correct query.");
-
-    info("Clear the search query.");
-    eventDeferred = Promise.withResolvers();
-    synthesizeMouseAtCenter(component.clearButton, {});
-    query = (await eventDeferred.promise).detail.query;
-    is(query, "", "Event was fired with a blank query.");
-  });
-
-  add_task(async function test_search_autofocus() {
-    const container = document.querySelector('#focus-test');
-    const componentWithAutofocus = document.createElement('fxview-search-textbox');
-    componentWithAutofocus.toggleAttribute('autofocus', true);
-    container.appendChild(componentWithAutofocus);
-    await componentWithAutofocus.updateCompleted;
-
-    isnot(componentWithAutofocus.input, null, 'component input should not be null');
-    is(componentWithAutofocus.shadowRoot.activeElement, componentWithAutofocus.input, 'Search input has focus');
-
-    container.removeChild(componentWithAutofocus);
-
-    const component = document.createElement('fxview-search-textbox');
-    container.appendChild(component);
-    await component.updateCompleted;
-
-    isnot(component.input, null, 'component input should not be null');
-    isnot(component.shadowRoot.activeElement, component.input, 'Search input does not have focus');
-
-    container.removeChild(component);
-  });
-</script>
-</body>
-</html>

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 = {};

browser/components/sidebar/sidebar-history.css

@@ -8,7 +8,7 @@
   align-items: center;
 }
 
-fxview-search-textbox {
+moz-input-search {
   flex: 1;
 }
 

browser/components/sidebar/sidebar-history.html

@@ -21,10 +21,6 @@
       rel="stylesheet"
       href="chrome://browser/content/sidebar/sidebar.css"
     />
-    <script
-      type="module"
-      src="chrome://browser/content/firefoxview/fxview-search-textbox.mjs"
-    ></script>
     <script
       type="module"
       src="chrome://browser/content/firefoxview/fxview-tab-list.mjs"

browser/components/sidebar/sidebar-history.mjs

@@ -28,7 +28,7 @@ export class SidebarHistory extends SidebarPage {
     emptyState: "fxview-empty-state",
     lists: { all: "sidebar-tab-list" },
     menuButton: ".menu-button",
-    searchTextbox: "fxview-search-textbox",
+    searchTextbox: "moz-input-search",
   };
 
   constructor() {
@@ -505,12 +505,11 @@ export class SidebarHistory extends SidebarPage {
         >
         </sidebar-panel-header>
         <div class="options-container">
-          <fxview-search-textbox
+          <moz-input-search
             data-l10n-id="firefoxview-search-text-box-history"
             data-l10n-attrs="placeholder"
-            @fxview-search-textbox-query=${this.onSearchQuery}
+            @MozInputSearch:search=${this.onSearchQuery}
-            .size=${15}
+          ></moz-input-search>
-          ></fxview-search-textbox>
           <moz-button
             class="menu-button"
             @click=${this.openMenu}

browser/components/sidebar/sidebar-syncedtabs.html

@@ -30,10 +30,6 @@
       type="module"
       src="chrome://browser/content/firefoxview/fxview-empty-state.mjs"
     ></script>
-    <script
-      type="module"
-      src="chrome://browser/content/firefoxview/fxview-search-textbox.mjs"
-    ></script>
     <script
       type="module"
       src="chrome://browser/content/sidebar/sidebar-tab-list.mjs"

browser/components/sidebar/sidebar-syncedtabs.mjs

@@ -24,7 +24,7 @@ class SyncedTabsInSidebar extends SidebarPage {
 
   static queries = {
     cards: { all: "moz-card" },
-    searchTextbox: "fxview-search-textbox",
+    searchTextbox: "moz-input-search",
   };
 
   constructor() {
@@ -298,12 +298,11 @@ class SyncedTabsInSidebar extends SidebarPage {
           view="viewTabsSidebar"
         >
         </sidebar-panel-header>
-        <fxview-search-textbox
+        <moz-input-search
           data-l10n-id="firefoxview-search-text-box-tabs"
           data-l10n-attrs="placeholder"
-          @fxview-search-textbox-query=${this.onSearchQuery}
+          @MozInputSearch:search=${this.onSearchQuery}
-          size="15"
+        ></moz-input-search>
-        ></fxview-search-textbox>
         ${when(
           messageCard,
           () => this.messageCardTemplate(messageCard),

browser/components/sidebar/sidebar.css

@@ -65,20 +65,6 @@ moz-card {
   width: 100%;
 }
 
-fxview-search-textbox {
-  &::part(input) {
-    background-color: var(--sidebar-box-background);
-    color: var(--sidebar-box-color);
-    border: var(--sidebar-box-border);
-    border-radius: var(--border-radius-medium);
-  }
-
-  &::part(container) {
-    width: 100%;
-    height: var(--size-item-large);
-  }
-}
-
 fxview-empty-state {
   &::part(container) {
     margin-block-start: var(--space-medium);

browser/components/sidebar/tests/browser/browser_history_sidebar.js

@@ -269,11 +269,7 @@ add_task(async function test_history_search() {
   }, "There are no matching search results.");
 
   info("Clear the search query.");
-  EventUtils.synthesizeMouseAtCenter(
+  searchTextbox.clear();
-    searchTextbox.clearButton,
-    {},
-    contentWindow
-  );
   await TestUtils.waitForCondition(
     () => !component.lists[0].emptyState,
     "The original cards are restored."

browser/components/storybook/stories/fxview-search-textbox.stories.mjs

@@ -1,60 +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 { action } from "@storybook/addon-actions";
-
-import { html, ifDefined } from "lit.all.mjs";
-import "browser/components/firefoxview/fxview-search-textbox.mjs";
-
-export default {
-  title: "Domain-specific UI Widgets/Firefox View/Search Textbox",
-  component: "fxview-search-textbox",
-  argTypes: {
-    size: {
-      control: { type: "number", min: 1, step: 1 },
-    },
-  },
-};
-
-const Template = ({ autofocus, placeholder, size }) => html`
-  <style>
-    fxview-search-textbox {
-      --fxview-border: var(--in-content-border-color);
-      --fxview-text-primary-color: var(--in-content-page-color);
-      --fxview-element-background-hover: var(
-        --in-content-button-background-hover
-      );
-      --fxview-text-color-hover: var(--in-content-button-text-color-hover);
-    }
-  </style>
-  <fxview-search-textbox
-    placeholder=${ifDefined(placeholder)}
-    size=${ifDefined(size)}
-    autofocus=${ifDefined(autofocus)}
-    @fxview-search-textbox-query=${action("fxview-search-textbox-query")}
-  ></fxview-search-textbox>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  placeholder: "",
-};
-
-export const SearchBoxWithPlaceholder = Template.bind({});
-SearchBoxWithPlaceholder.args = {
-  ...Default.args,
-  placeholder: "Search",
-};
-
-export const SearchBoxWithCustomSize = Template.bind({});
-SearchBoxWithCustomSize.args = {
-  ...Default.args,
-  size: 32,
-};
-
-export const SearchBoxWithAutoFocus = Template.bind({});
-SearchBoxWithAutoFocus.args = {
-  ...Default.args,
-  autofocus: true,
-};