Bug 1898130 - Use <search-bar> in the about:import calendar items selector. r=aleca

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

--HG--
extra : rebase_source : 5668593621d1d1cf2eacc2a7afbb9c34b2e56c5f
extra : amend_source : e76801772e160420f213e2c71ccd14f808378649

calendar/test/browser/browser_import.js

@@ -146,7 +146,7 @@ add_task(async function () {
     if (filterText) {
       EventUtils.sendString(filterText, win);
     } else {
-      EventUtils.synthesizeKey("KEY_Delete", {}, win);
+      EventUtils.synthesizeKey("KEY_Escape", {}, win);
     }
 
     let visibleItems;

mail/locales/en-US/messenger/aboutImport.ftl

@@ -170,7 +170,8 @@ calendar-items-title = Select which items to import.
 
 calendar-items-loading = Loading items…
 
-calendar-items-filter-input =
+calendar-items-filter-input2 =
+  .label = Filter items
   .placeholder = Filter items…
 
 calendar-select-all-items = Select all

mail/themes/shared/mail/aboutImport.css

@@ -199,11 +199,19 @@ dd {
   display: flex;
   align-items: center;
 
-  & input {
+  & search-bar {
     flex: 1;
     padding-inline: 0.5rem;
     height: 32px;
   }
+
+  & [slot="clear-button"] {
+    content: var(--icon-clear);
+  }
+
+  & [slot="search-button"] {
+    content: var(--icon-search);
+  }
 }
 
 #calendar-item-list {

mailnews/import/content/aboutImport.js

@@ -994,6 +994,9 @@ class AddrBookImporterController extends ImporterController {
 class CalendarImporterController extends ImporterController {
   constructor() {
     super("tabPane-calendar", "calendar");
+    const filter = document.getElementById("calendarFilter");
+    filter.addEventListener("autocomplete", this.onFilterChange.bind(this));
+    filter.addEventListener("search", event => event.preventDefault());
   }
 
   next() {
@@ -1018,29 +1021,14 @@ class CalendarImporterController extends ImporterController {
     this._showSources();
   }
 
-  #filterChangeTimeout;
-
   /**
    * When filter changes, re-render the item list. This function wraps
    * #onFilterChange in a timer, to reduce the frequency of list updates.
    *
-   * @param {HTMLInputElement} filterInput - The filter input.
+   * @param {Event} event - The "autocomplete" event fired by the filter input.
    */
-  onFilterChange(filterInput) {
-    clearTimeout(this.#filterChangeTimeout);
-    this.#filterChangeTimeout = setTimeout(() => {
-      this.#onFilterChange(filterInput);
-      this.#filterChangeTimeout = undefined;
-    }, 250);
-  }
-
-  /**
-   * When filter changes, re-render the item list.
-   *
-   * @param {HTMLInputElement} filterInput - The filter input.
-   */
-  #onFilterChange(filterInput) {
-    let searchString = filterInput.value.trim();
+  onFilterChange(event) {
+    let searchString = event.detail.trim();
     if (!searchString) {
       this._filteredItems = [...this._items];
       for (const item of this._items) {

mailnews/import/content/aboutImport.xhtml

@@ -18,6 +18,7 @@
   <link rel="localization" href="branding/brand.ftl" />
   <link rel="localization" href="messenger/aboutImport.ftl"/>
   <link rel="icon" href="chrome://messenger/skin/icons/new/compact/import.svg" sizes="any"/>
+  <script type="module" src="chrome://messenger/content/search-bar.mjs"></script>
   <script defer="" src="chrome://messenger/content/aboutImport.js"></script>
   <script defer="" src="chrome://messenger/content/csv-field-map.js"></script>
   <script defer="" src="chrome://calendar/content/widgets/calendar-item-summary.js"></script>
@@ -351,10 +352,12 @@
         </dl>
         <h2 data-l10n-id="calendar-items-title"></h2>
         <div id="calendarItemsTools">
-          <input id="calendarFilter"
-                 type="search"
-                 data-l10n-id="calendar-items-filter-input"
-                 oninput="calendarController.onFilterChange(this)"/>
+          <search-bar id="calendarFilter"
+                      data-l10n-id="calendar-items-filter-input2"
+                      data-l10n-attrs="label, placeholder">
+            <img slot="clear-button" src="" alt="" />
+            <img slot="search-button" src="" alt="" />
+          </search-bar>
           <button id="calendarDeselectAll"
                   data-l10n-id="calendar-deselect-all-items"
                   onclick="calendarController.selectAllItems(false)"></button>
@@ -468,5 +471,6 @@
          href="https://support.mozilla.org/products/thunderbird"></a>
     </footer>
   </main>
+#include ../../../mail/base/content/widgets/search-bar.inc.xhtml
 </body>
 </html>