1 files changed, 152 insertions, 0 deletions
diff --git a/toolkit/content/widgets/autocomplete-richlistitem.js b/toolkit/content/widgets/autocomplete-richlistitem.js
index fddd5b4029..b339ab1e27 100644
--- a/toolkit/content/widgets/autocomplete-richlistitem.js
+++ b/toolkit/content/widgets/autocomplete-richlistitem.js
@@ -522,6 +522,11 @@
           return;
         }
 
+        let label = this.getAttribute("ac-label");
+        if (label && JSON.parse(label)?.noLearnMore) {
+          return;
+        }
+
         let baseURL = Services.urlFormatter.formatURLPref(
           "app.support.baseURL"
         );
@@ -715,6 +720,129 @@
     }
   }
 
+  // This type has an action that is triggered when activated. The comment
+  // for that result should contain a fillMessageName -- the message to send --
+  // and, optionally a secondary label, for example:
+  //   { "fillMessageName": "Fill:Clear", secondary: "Second Label" }
+  class MozAutocompleteActionRichlistitem extends MozAutocompleteTwoLineRichlistitem {
+    constructor() {
+      super();
+      this.selectedByMouseOver = true;
+    }
+
+    _adjustAcItem() {
+      super._adjustAcItem();
+
+      let comment = JSON.parse(this.getAttribute("ac-label"));
+      this.querySelector(".line2-label").textContent = comment?.secondary || "";
+      this.querySelector(".ac-site-icon").collapsed =
+        this.getAttribute("ac-image") == "";
+    }
+  }
+
+  // A row that conveys status information assigned from the status field
+  // within the comment associated with the selected item in the list.
+  class MozAutocompleteStatusRichlistitem extends MozAutocompleteTwoLineRichlistitem {
+    static get markup() {
+      return `<div class="ac-status" xmlns="http://www.w3.org/1999/xhtml"></div>`;
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.parentNode.addEventListener("select", this);
+      this.eventListenerParentNode = this.parentNode;
+    }
+
+    disconnectedCallback() {
+      this.eventListenerParentNode?.removeEventListener("select", this);
+      this.eventListenerParentNode = null;
+    }
+
+    handleEvent(event) {
+      if (event.type == "select") {
+        let selectedItem = event.target.selectedItem;
+        if (selectedItem) {
+          this.#setStatus(selectedItem);
+        }
+      }
+    }
+
+    #setStatus(item) {
+      // For normal rows, use that row's comment, otherwise use the status's
+      // comment which serves as the default label.
+      let target =
+        !item || item instanceof MozAutocompleteActionRichlistitem
+          ? this
+          : item;
+
+      let comment = JSON.parse(target.getAttribute("ac-comment"));
+      let statusBox = this.querySelector(".ac-status");
+      statusBox.textContent = comment?.status || "";
+    }
+
+    _adjustAcItem() {
+      super._adjustAcItem();
+      this.#setStatus(this);
+      this.setAttribute("disabled", "true");
+    }
+  }
+
+  class MozAutocompleteAutoFillRichlistitem extends MozAutocompleteTwoLineRichlistitem {
+    constructor() {
+      super();
+      this.selectedByMouseOver = true;
+    }
+
+    _adjustAcItem() {
+      let { primary, secondary, ariaLabel } = JSON.parse(
+        this.getAttribute("ac-value")
+      );
+
+      let line1Label = this.querySelector(".line1-label");
+      line1Label.textContent = primary.toString();
+
+      let line2Label = this.querySelector(".line2-label");
+      line2Label.textContent = secondary.toString();
+
+      if (ariaLabel) {
+        this.setAttribute("aria-label", ariaLabel);
+      }
+
+      this.querySelector(".ac-site-icon").collapsed =
+        this.getAttribute("ac-image") == "";
+    }
+
+    set selected(val) {
+      if (val) {
+        this.setAttribute("selected", "true");
+      } else {
+        this.removeAttribute("selected");
+      }
+
+      let { AutoCompleteParent } = ChromeUtils.importESModule(
+        "resource://gre/actors/AutoCompleteParent.sys.mjs"
+      );
+
+      let actor = AutoCompleteParent.getCurrentActor();
+      if (!actor) {
+        return;
+      }
+
+      let popup = actor.openedPopup;
+
+      setTimeout(() => {
+        let selectedIndex = popup ? popup.selectedIndex : -1;
+        actor.manager
+          .getActor("FormAutofill")
+          .sendAsyncMessage("FormAutofill:PreviewProfile", { selectedIndex });
+      }, 0);
+    }
+
+    get selected() {
+      return this.getAttribute("selected") == "true";
+    }
+  }
+
   class MozAutocompleteGeneratedPasswordRichlistitem extends MozAutocompleteTwoLineRichlistitem {
     constructor() {
       super();
@@ -840,6 +968,14 @@
   );
 
   customElements.define(
+    "autocomplete-autofill-richlistitem",
+    MozAutocompleteAutoFillRichlistitem,
+    {
+      extends: "richlistitem",
+    }
+  );
+
+  customElements.define(
     "autocomplete-login-richlistitem",
     MozAutocompleteLoginRichlistitem,
     {
@@ -848,6 +984,22 @@
   );
 
   customElements.define(
+    "autocomplete-action-richlistitem",
+    MozAutocompleteActionRichlistitem,
+    {
+      extends: "richlistitem",
+    }
+  );
+
+  customElements.define(
+    "autocomplete-status-richlistitem",
+    MozAutocompleteStatusRichlistitem,
+    {
+      extends: "richlistitem",
+    }
+  );
+
+  customElements.define(
     "autocomplete-generated-password-richlistitem",
     MozAutocompleteGeneratedPasswordRichlistitem,
     {