--- a/browser/extensions/formautofill/content/formautofill.css
+++ b/browser/extensions/formautofill/content/formautofill.css
@@ -1,15 +1,16 @@
 /* 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/. */
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-profile"],
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-footer"],
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-insecureWarning"] {
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-insecureWarning"],
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-clear-button"] {
   display: block;
   margin: 0;
   padding: 0;
   height: auto;
   min-height: auto;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-profile"] {
@@ -19,21 +20,25 @@
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-footer"] {
   -moz-binding: url("chrome://formautofill/content/formautofill.xml#autocomplete-profile-listitem-footer");
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-insecureWarning"] {
   -moz-binding: url("chrome://formautofill/content/formautofill.xml#autocomplete-creditcard-insecure-field");
 }
 
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-clear-button"] {
+  -moz-binding: url("chrome://formautofill/content/formautofill.xml#autocomplete-profile-listitem-clear-button");
+}
 /* Treat @collpased="true" as display: none similar to how it is for XUL elements.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values */
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-profile"][collapsed="true"],
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-footer"][collapsed="true"],
-#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-insecureWarning"][collapsed="true"] {
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-insecureWarning"][collapsed="true"],
+#PopupAutoComplete > richlistbox > richlistitem[originaltype="autofill-clear-button"][collapsed="true"] {
   display: none;
 }
 
 #PopupAutoComplete[firstresultstyle="autofill-profile"] {
   min-width: 150px !important;
 }
 
 #PopupAutoComplete[firstresultstyle="autofill-insecureWarning"] {

--- a/browser/extensions/formautofill/content/formautofill.xml
+++ b/browser/extensions/formautofill/content/formautofill.xml
@@ -148,17 +148,17 @@
     </implementation>
   </binding>
 
   <binding id="autocomplete-profile-listitem-footer" extends="chrome://formautofill/content/formautofill.xml#autocomplete-profile-listitem-base">
     <xbl:content xmlns="http://www.w3.org/1999/xhtml">
       <div anonid="autofill-footer" class="autofill-item-box autofill-footer">
         <div anonid="autofill-warning" class="autofill-footer-row autofill-warning">
         </div>
-        <div anonid="autofill-option-button" class="autofill-footer-row autofill-option-button">
+        <div anonid="autofill-option-button" class="autofill-footer-row autofill-button">
         </div>
       </div>
     </xbl:content>
 
     <handlers>
       <handler event="click" button="0"><![CDATA[
         if (this._warningTextBox.contains(event.originalTarget)) {
           return;
@@ -309,9 +309,54 @@
           this._itemBox.textContent = value;
         ]]>
         </body>
       </method>
 
     </implementation>
   </binding>
 
+  <binding id="autocomplete-profile-listitem-clear-button" extends="chrome://formautofill/content/formautofill.xml#autocomplete-profile-listitem-base">
+    <xbl:content xmlns="http://www.w3.org/1999/xhtml">
+      <div anonid="autofill-item-box" class="autofill-item-box autofill-footer">
+        <div anonid="autofill-clear-button" class="autofill-footer-row autofill-button"></div>
+      </div>
+    </xbl:content>
+
+    <handlers>
+      <handler event="click" button="0"><![CDATA[
+        /* global Cu */
+        let {AutoCompletePopup} = Cu.import("resource://gre/modules/AutoCompletePopup.jsm", {});
+
+        AutoCompletePopup.sendMessageToBrowser("FormAutofill:ClearForm");
+      ]]></handler>
+    </handlers>
+
+    <implementation implements="nsIDOMXULSelectControlItemElement">
+      <constructor>
+      <![CDATA[
+        this._itemBox = document.getAnonymousElementByAttribute(
+          this, "anonid", "autofill-item-box"
+        );
+        this._clearBtn = document.getAnonymousElementByAttribute(
+          this, "anonid", "autofill-clear-button"
+        );
+
+        this._adjustAcItem();
+      ]]>
+      </constructor>
+
+      <method name="_adjustAcItem">
+        <body>
+        <![CDATA[
+          this._adjustAutofillItemLayout();
+          this.setAttribute("formautofillattached", "true");
+
+          let clearFormBtnLabel = this._stringBundle.GetStringFromName("clearFormBtnLabel");
+          this._clearBtn.textContent = clearFormBtnLabel;
+        ]]>
+        </body>
+      </method>
+
+    </implementation>
+  </binding>
+
 </bindings>

--- a/browser/extensions/formautofill/locales/en-US/formautofill.properties
+++ b/browser/extensions/formautofill/locales/en-US/formautofill.properties
@@ -73,16 +73,19 @@ fieldNameSeparator = ,\u0020
 # text that is displayed for informing users what categories are about to be filled.
 # "%S" will be replaced with a list generated from the pre-defined categories.
 # The text would be e.g. Also autofills organization, phone, email.
 phishingWarningMessage = Also autofills %S
 phishingWarningMessage2 = Autofills %S
 # LOCALIZATION NOTE (insecureFieldWarningDescription): %S is brandShortName. This string is used in drop down
 # suggestion when users try to autofill credit card on an insecure website (without https).
 insecureFieldWarningDescription = %S has detected an insecure site. Form Autofill is temporarily disabled.
+# LOCALIZATION NOTE (clearFormBtnLabel): Label for the button in the dropdown menu that used to clear the populated
+# form.
+clearFormBtnLabel = Clear Form
 
 # LOCALIZATION NOTE (autofillAddressesCheckbox): Label for the checkbox that enables autofilling addresses.
 autofillAddressesCheckbox = Autofill addresses
 # LOCALIZATION NOTE (learnMoreLabel): Label for the link that leads users to the Form Autofill SUMO page.
 learnMoreLabel = Learn more
 # LOCALIZATION NOTE (savedAddressesBtnLabel): Label for the button that opens a dialog that shows the
 # list of saved addresses.
 savedAddressesBtnLabel = Saved Addresses…

--- a/browser/extensions/formautofill/skin/shared/autocomplete-item.css
+++ b/browser/extensions/formautofill/skin/shared/autocomplete-item.css
@@ -5,41 +5,42 @@
 @namespace url("http://www.w3.org/1999/xhtml");
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 
 xul|richlistitem[originaltype="autofill-profile"][selected="true"] > .autofill-item-box {
   background-color: #F2F2F2;
 }
 
-xul|richlistitem[originaltype="autofill-footer"][selected="true"] > .autofill-item-box > .autofill-option-button {
+xul|richlistitem[originaltype="autofill-footer"][selected="true"] > .autofill-item-box > .autofill-button,
+xul|richlistitem[originaltype="autofill-clear-button"][selected="true"] > .autofill-item-box > .autofill-button {
   background-color: #DCDCDE;
 }
 
 xul|richlistitem[originaltype="autofill-insecureWarning"] {
   border-bottom: 1px solid var(--panel-separator-color);
   background-color: var(--arrowpanel-dimmed);
 }
 
 .autofill-item-box {
   --item-padding-vertical: 7px;
   --item-padding-horizontal: 10px;
   --col-spacer: 7px;
   --item-width: calc(50% - (var(--col-spacer) / 2));
   --label-text-color: #262626;
   --comment-text-color: #646464;
   --warning-text-color: #646464;
-  --option-btn-text-color: -moz-FieldText;
+  --btn-text-color: -moz-FieldText;
 
   --default-font-size: 12;
   --label-affix-font-size: 10;
   --label-font-size: 12;
   --comment-font-size: 10;
   --warning-font-size: 10;
-  --option-btn-font-size: 11;
+  --btn-font-size: 11;
 }
 
 .autofill-item-box[size="small"] {
   --item-padding-vertical: 7px;
   --col-spacer: 0px;
   --row-spacer: 3px;
   --item-width: 100%;
 }
@@ -143,23 +144,23 @@ xul|richlistitem[originaltype="autofill-
   padding: 2.5px 0;
   color: var(--warning-text-color);
   text-align: center;
   background-color: rgba(248,232,28,.2);
   border-bottom: 1px solid rgba(38,38,38,.15);
   font-size: calc(var(--warning-font-size) / var(--default-font-size) * 1em);
 }
 
-.autofill-footer > .autofill-option-button {
+.autofill-footer > .autofill-button {
   box-sizing: border-box;
   padding: 0 10px;
   min-height: 40px;
   background-color: #EDEDED;
-  font-size: calc(var(--option-btn-font-size) / var(--default-font-size) * 1em);
-  color: var(--option-btn-text-color);
+  font-size: calc(var(--btn-font-size) / var(--default-font-size) * 1em);
+  color: var(--btn-text-color);
   text-align: center;
 }
 
 .autofill-footer[no-warning="true"] > .autofill-warning {
   display: none;
 }
 
 .autofill-insecure-item {

--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -1301,22 +1301,29 @@ extends="chrome://global/content/binding
             if (itemExists) {
               item = this.richlistbox.childNodes[this._currentIndex];
 
               // Url may be a modified version of value, see _adjustACItem().
               originalValue = item.getAttribute("url") || item.getAttribute("ac-value");
               originalText = item.getAttribute("ac-text");
               originalType = item.getAttribute("originaltype");
 
-              // All of types are reusable except for autofill-profile,
-              // which has different structure of <content> and overrides
-              // _adjustAcItem().
+              // The styles on the list which have different <content> structure and overrided
+              // _adjustAcItem() are unreusable.
+              const UNREUSEABLE_STYLES = [
+                "autofill-profile",
+                "autofill-footer",
+                "autofill-clear-button",
+                "autofill-insecureWarning",
+              ];
+              // Reuse the item when its style is exactly equal to the previous style or
+              // neither of their style are in the UNREUSEABLE_STYLES.
               reusable = originalType === style ||
-                         (style !== "autofill-profile" && originalType !== "autofill-profile" &&
-                         style !== "autofill-footer" && originalType !== "autofill-footer");
+                !(UNREUSEABLE_STYLES.includes(style) || UNREUSEABLE_STYLES.includes(originalType));
+
             } else {
               // need to create a new item
               item = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "richlistitem");
             }
 
             item.setAttribute("dir", this.style.direction);
             item.setAttribute("ac-image", image);
             item.setAttribute("ac-value", value);