Bug 1407508 - Part 3. Add form autofill clear form button binding. r=lchang, seanlee draft
authorRay Lin <ralin@mozilla.com>
Mon, 16 Oct 2017 13:50:16 +0800
changeset 684633 9375d3b3196a5a2c6c6f7f91111c6ce9a3a5bcf7
parent 684632 28a125e7b1cac21d7a8b594dbcc1a4d3587f1246
child 684634 7de5a0c647282adfcefaaf8c65ccae9573b0d1b5
push id85683
push userbmo:ralin@mozilla.com
push dateMon, 23 Oct 2017 10:11:05 +0000
reviewerslchang, seanlee
bugs1407508
milestone58.0a1
Bug 1407508 - Part 3. Add form autofill clear form button binding. r=lchang, seanlee MozReview-Commit-ID: 7lDi5zsf1QI
browser/extensions/formautofill/content/formautofill.css
browser/extensions/formautofill/content/formautofill.xml
browser/extensions/formautofill/skin/shared/autocomplete-item.css
toolkit/content/widgets/autocomplete.xml
--- 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[
         window.openPreferences("panePrivacy", {origin: "autofillFooter"});
       ]]></handler>
@@ -302,9 +302,53 @@
           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">
+          Clear Form
+        </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._adjustAcItem();
+      ]]>
+      </constructor>
+
+      <method name="_adjustAcItem">
+        <body>
+        <![CDATA[
+          this._adjustAutofillItemLayout();
+          this.setAttribute("formautofillattached", "true");
+
+          // let value = this.getAttribute("ac-value");
+          // this._itemBox.textContent = value;
+        ]]>
+        </body>
+      </method>
+
+    </implementation>
+  </binding>
+
 </bindings>
--- 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);
 }
 
 .autofill-footer[no-warning="true"] > .autofill-warning {
   display: none;
 }
 
 .autofill-insecure-item {
   box-sizing: border-box;
--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -1303,22 +1303,28 @@ 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
+              // All of types are reusable except for form autofill bindings
+              // which have different structure of <content> and overrided
               // _adjustAcItem().
+              let formAutofillStyles = [
+                "autofill-profile",
+                "autofill-footer",
+                "autofill-clear-button",
+                "autofill-insecureWarning",
+              ];
               reusable = originalType === style ||
-                         (style !== "autofill-profile" && originalType !== "autofill-profile" &&
-                         style !== "autofill-footer" && originalType !== "autofill-footer");
+                !(formAutofillStyles.includes(style) || formAutofillStyles.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);