Bug 1497039 - Put a placeholder in privacy.xul that will be used to inject the form-autofill section. r=MattN

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

--HG--
extra : moz-landing-system : lando

browser/components/preferences/in-content/preferences.js

@@ -236,7 +236,7 @@ async function spotlight(subcategory) {
     if (!gSearchResultsPane.categoriesInitialized) {
       await waitForSystemAddonInjectionsFinished([{
         isGoingToInject: formAutofillParent.initialized,
-        elementId: "formAutofillGroupBox",
+        elementId: "formAutofillGroup",
       }]);
     }
     scrollAndHighlight(subcategory);
@@ -246,7 +246,7 @@ async function spotlight(subcategory) {
    * Wait for system addons finished their dom injections.
    * @param {Array} addons - The system addon information array.
    * For example, the element is looked like
-   * { isGoingToInject: true, elementId: "formAutofillGroupBox" }.
+   * { isGoingToInject: true, elementId: "formAutofillGroup" }.
    * The `isGoingToInject` means the system addon will be visible or not,
    * and the `elementId` means the id of the element will be injected into the dom
    * if the `isGoingToInject` is true.

browser/components/preferences/in-content/privacy.xul

@@ -369,6 +369,12 @@
   </hbox>
 </groupbox>
 
+<!-- The form autofill section is inserted in to this box
+     after the form autofill extension has initialized. -->
+<groupbox id="formAutofillGroupBox"
+          data-category="panePrivacy"
+          data-subcategory="form-autofill"></groupbox>
+
 <!-- History -->
 <groupbox id="historyGroup" data-category="panePrivacy" hidden="true">
   <caption><label data-l10n-id="history-header"/></caption>

browser/extensions/formautofill/FormAutofillParent.jsm

@@ -133,10 +133,9 @@ FormAutofillParent.prototype = {
       case "sync-pane-loaded": {
         let formAutofillPreferences = new FormAutofillPreferences();
         let document = subject.document;
-        let prefGroupBox = formAutofillPreferences.init(document);
-        let parentNode = document.getElementById("mainPrefPane");
-        let insertBeforeNode = document.getElementById("historyGroup");
-        parentNode.insertBefore(prefGroupBox, insertBeforeNode);
+        let prefFragment = formAutofillPreferences.init(document);
+        let formAutofillGroupBox = document.getElementById("formAutofillGroupBox");
+        formAutofillGroupBox.appendChild(prefFragment);
         break;
       }
 

browser/extensions/formautofill/FormAutofillPreferences.jsm

@@ -51,7 +51,7 @@ FormAutofillPreferences.prototype = {
     this.createPreferenceGroup(document);
     this.attachEventListeners();
 
-    return this.refs.formAutofillGroupBox;
+    return this.refs.formAutofillFragment;
   },
 
   /**
@@ -69,7 +69,7 @@ FormAutofillPreferences.prototype = {
    */
   createPreferenceGroup(document) {
     let learnMoreURL = Services.urlFormatter.formatURLPref("app.support.baseURL") + "autofill-card-address";
-    let formAutofillGroupBox = document.createXULElement("groupbox");
+    let formAutofillFragment = document.createDocumentFragment();
     let formAutofillGroupBoxCaption = document.createXULElement("caption");
     let formAutofillGroupBoxCaptionLabel = document.createXULElement("label");
     let formAutofillGroupBoxDescription = document.createXULElement("description");
@@ -93,9 +93,6 @@ FormAutofillPreferences.prototype = {
     addressAutofill.id = "addressAutofill";
     addressAutofillLearnMore.id = "addressAutofillLearnMore";
 
-    formAutofillGroupBox.setAttribute("id", "formAutofillGroupBox");
-    formAutofillGroupBox.setAttribute("data-category", "panePrivacy");
-    formAutofillGroupBox.setAttribute("data-subcategory", "form-autofill");
     formAutofillGroupBoxCaptionLabel.textContent = this.bundle.GetStringFromName("autofillHeader");
     formAutofillGroupBoxDescription.textContent =
       this.bundle.formatStringFromName("autofillDescription",
@@ -127,9 +124,9 @@ FormAutofillPreferences.prototype = {
     addressAutofillCheckboxLabel.flex = 1;
 
     formAutofillGroupBoxCaption.appendChild(formAutofillGroupBoxCaptionLabel);
-    formAutofillGroupBox.appendChild(formAutofillGroupBoxCaption);
-    formAutofillGroupBox.appendChild(formAutofillGroupBoxDescription);
-    formAutofillGroupBox.appendChild(formAutofillGroup);
+    formAutofillFragment.appendChild(formAutofillGroupBoxCaption);
+    formAutofillFragment.appendChild(formAutofillGroupBoxDescription);
+    formAutofillFragment.appendChild(formAutofillGroup);
     formAutofillGroup.appendChild(addressAutofill);
     addressAutofill.appendChild(addressAutofillCheckboxGroup);
     addressAutofillCheckboxGroup.appendChild(addressAutofillCheckbox);
@@ -140,7 +137,7 @@ FormAutofillPreferences.prototype = {
     savedAddressesBtnWrapper.appendChild(savedAddressesBtn);
 
     this.refs = {
-      formAutofillGroupBox,
+      formAutofillFragment,
       formAutofillGroup,
       addressAutofillCheckbox,
       addressAutofillCheckboxLabel,

browser/extensions/formautofill/test/browser/browser_privacyPreferences.js

@@ -3,7 +3,7 @@
 const PAGE_PREFS = "about:preferences";
 const PAGE_PRIVACY = PAGE_PREFS + "#privacy";
 const SELECTORS = {
-  group: "#passwordsGroup",
+  group: "#formAutofillGroupBox",
   addressAutofillCheckbox: "#addressAutofill checkbox",
   creditCardAutofillCheckbox: "#creditCardAutofill checkbox",
   savedAddressesBtn: "#addressAutofill button",