Bug 1968916 - Use moz-input-search in about:addons. r=tgiles,extension-reviewers,desktop-theme-reviewers,dao,reusable-components-reviewers,fluent-reviewers,flod

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

Author: emilio

toolkit/content/widgets/moz-input-search/moz-input-search.mjs

@@ -17,8 +17,7 @@ import MozInputText from "chrome://global/content/elements/moz-input-text.mjs";
  * @property {string} description - The text for the description element that helps describe the input control
  * @property {string} supportPage - Name of the SUMO support page to link to.
  * @property {string} placeholder - Text to display when the input has no value.
- * @property {string} ariaLabel
- *  The aria-label text for cases where there is no visible label.
+ * @property {string} ariaLabel - The aria-label text for cases where there is no visible label.
  */
 export default class MozInputSearch extends MozInputText {
   // The amount of milliseconds that we wait before firing the "search" event.
@@ -69,11 +68,16 @@ export default class MozInputSearch extends MozInputText {
     }
   }
 
+  #hasIcon() {
+    // If unspecified, search inputs still have a default search icon.
+    return this.iconSrc === undefined || !!this.iconSrc;
+  }
+
   inputTemplate() {
     return html`
       <input
         id="input"
-        class="with-icon"
+        class=${this.#hasIcon() ? "with-icon" : ""}
         type="search"
         name=${this.name}
         value=${this.value}

toolkit/locales/en-US/toolkit/about/aboutAddons.ftl

@@ -540,6 +540,9 @@ shortcuts-heading = Manage Extension Shortcuts
 default-heading-search-label = Find more add-ons
 addons-heading-search-input =
     .placeholder = Search addons.mozilla.org
+addons-heading-search-button =
+    .title = Search addons.mozilla.org
+    .aria-label = Search addons.mozilla.org
 
 addon-page-options-button =
     .title = Tools for all add-ons

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -143,10 +143,12 @@ h2 {
   max-width: var(--page-main-content-width);
 }
 
-search-addons > search-textbox {
-  margin: 0;
-  width: 20em;
-  min-height: 32px;
+search-addons {
+  display: inline-flex;
+
+  > moz-button {
+    margin-inline-start: var(--space-xsmall);
+  }
 }
 
 .search-label {

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -621,22 +621,36 @@ var DiscoveryAPI = {
 class SearchAddons extends HTMLElement {
   connectedCallback() {
     if (this.childElementCount === 0) {
-      this.input = document.createXULElement("search-textbox");
-      this.input.setAttribute("searchbutton", true);
+      this.input = document.createElement("moz-input-search");
       this.input.setAttribute("maxlength", 100);
       this.input.setAttribute("data-l10n-attrs", "placeholder");
+      this.input.setAttribute("iconsrc", "");
       document.l10n.setAttributes(this.input, "addons-heading-search-input");
       this.append(this.input);
+
+      this.button = document.createElement("moz-button");
+      this.button.setAttribute("type", "ghost");
+      this.button.setAttribute(
+        "iconsrc",
+        "chrome://global/skin/icons/search-textbox.svg"
+      );
+      document.l10n.setAttributes(this.button, "addons-heading-search-button");
+      this.append(this.button);
     }
-    this.input.addEventListener("command", this);
+    this.input.addEventListener("keypress", this);
+    this.button.addEventListener("click", this);
   }
 
   disconnectedCallback() {
-    this.input.removeEventListener("command", this);
+    this.input.removeEventListener("keypress", this);
+    this.button.removeEventListener("click", this);
   }
 
   handleEvent(e) {
-    if (e.type === "command") {
+    if (
+      e.type == "click" ||
+      (e.type === "keypress" && e.keyCode == KeyEvent.DOM_VK_RETURN)
+    ) {
       this.searchAddons(this.value);
     }
   }