Bug 1495357 - convert wizard-buttons binding to a Custom Element, r=bgrins

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

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

.eslintignore

@@ -341,6 +341,7 @@ services/common/kinto-http-client.js
 services/common/kinto-offline-client.js
 
 # toolkit/ exclusions
+toolkit/content/widgets/wizard.xml
 
 # Intentionally invalid JS
 toolkit/components/workerloader/tests/moduleF-syntax-error.js
@@ -355,7 +356,6 @@ toolkit/components/reader/JSDOMParser.js
 
 # Uses preprocessing
 toolkit/components/reader/Readerable.jsm
-toolkit/content/widgets/wizard.xml
 toolkit/modules/AppConstants.jsm
 toolkit/mozapps/update/tests/data/xpcshellConstantsPP.js
 tools/tryselect/selectors/chooser/templates/chooser.html

testing/marionette/puppeteer/firefox/firefox_puppeteer/ui/update_wizard/wizard.py

@@ -54,27 +54,27 @@ class Wizard(UIBaseLib):
 
     @property
     def cancel_button(self):
-        return self._buttons.find_element(By.ANON_ATTRIBUTE, {'dlgtype': 'cancel'})
+        return self._buttons.find_element(By.CSS_SELECTOR, '[dlgtype="cancel"]')
 
     @property
     def extra1_button(self):
-        return self._buttons.find_element(By.ANON_ATTRIBUTE, {'dlgtype': 'extra1'})
+        return self._buttons.find_element(By.CSS_SELECTOR, '[dlgtype="extra1"]')
 
     @property
     def extra2_button(self):
-        return self._buttons.find_element(By.ANON_ATTRIBUTE, {'dlgtype': 'extra2'})
+        return self._buttons.find_element(By.CSS_SELECTOR, '[dlgtype="extra2"]')
 
     @property
     def previous_button(self):
-        return self._buttons.find_element(By.ANON_ATTRIBUTE, {'dlgtype': 'back'})
+        return self._buttons.find_element(By.CSS_SELECTOR, '[dlgtype="back"]')
 
     @property
     def finish_button(self):
-        return self._buttons.find_element(By.ANON_ATTRIBUTE, {'dlgtype': 'finish'})
+        return self._buttons.find_element(By.CSS_SELECTOR, '[dlgtype="finish"]')
 
     @property
     def next_button(self):
-        return self._buttons.find_element(By.ANON_ATTRIBUTE, {'dlgtype': 'next'})
+        return self._buttons.find_element(By.CSS_SELECTOR, '[dlgtype="next"]')
 
     # Properties for visual panels of the wizard #
 

toolkit/content/jar.mn

@@ -82,7 +82,7 @@ toolkit.jar:
    content/global/bindings/timekeeper.js       (widgets/timekeeper.js)
    content/global/bindings/timepicker.js       (widgets/timepicker.js)
    content/global/bindings/toolbarbutton.xml   (widgets/toolbarbutton.xml)
-*  content/global/bindings/wizard.xml          (widgets/wizard.xml)
+   content/global/bindings/wizard.xml          (widgets/wizard.xml)
    content/global/elements/autocomplete-popup.js              (widgets/autocomplete-popup.js)
    content/global/elements/autocomplete-richlistitem.js       (widgets/autocomplete-richlistitem.js)
    content/global/elements/browser-custom-element.js          (widgets/browser-custom-element.js)

toolkit/content/widgets/wizard.js

@@ -7,6 +7,10 @@
 // This is loaded into chrome windows with the subscript loader. Wrap in
 // a block to prevent accidentally leaking globals onto `window`.
 {
+const {AppConstants} = ChromeUtils.import("resource://gre/modules/AppConstants.jsm");
+
+const kDTDs = [ "chrome://global/locale/wizard.dtd" ];
+
 class MozWizardPage extends MozXULElement {
   constructor() {
     super();
@@ -29,4 +33,144 @@ class MozWizardPage extends MozXULElement {
 }
 
 customElements.define("wizardpage", MozWizardPage);
+
+class MozWizardButtons extends MozXULElement {
+  connectedCallback() {
+    this.textContent = "";
+    this.appendChild(MozXULElement.parseXULToFragment(this._markup, kDTDs));
+
+    this._wizardButtonDeck = this.querySelector(".wizard-next-deck");
+
+    this.initializeAttributeInheritance();
+
+    const listeners = [
+      ["back", () => document.documentElement.rewind()],
+      ["next", () => document.documentElement.advance()],
+      ["finish", () => document.documentElement.advance()],
+      ["cancel", () => document.documentElement.cancel()],
+      ["extra1", () => document.documentElement.extra1()],
+      ["extra2", () => document.documentElement.extra2()],
+    ];
+    for (let [name, listener] of listeners) {
+      let btn = this.getButton(name);
+      if (btn) {
+        btn.addEventListener("command", listener);
+      }
+    }
+  }
+
+  static get inheritedAttributes() {
+    return AppConstants.platform == "macosx" ? {
+      "[dlgtype='finish']": "hidefinishbutton",
+      "[dlgtype='next']": "lastpage",
+    } : null;
+  }
+
+  get _markup() {
+    if (AppConstants.platform == "macosx") {
+      return `
+        <vbox flex="1">
+          <hbox class="wizard-buttons-btm">
+            <button class="wizard-button" dlgtype="extra1" hidden="true"/>
+            <button class="wizard-button" dlgtype="extra2" hidden="true"/>
+            <button label="&button-cancel-mac.label;"
+                    class="wizard-button" dlgtype="cancel"/>
+            <spacer flex="1"/>
+            <button label="&button-back-mac.label;"
+                    accesskey="&button-back-mac.accesskey;"
+                    class="wizard-button wizard-nav-button" dlgtype="back"/>
+            <button label="&button-next-mac.label;"
+                    accesskey="&button-next-mac.accesskey;"
+                    class="wizard-button wizard-nav-button" dlgtype="next"
+                    default="true" />
+            <button label="&button-finish-mac.label;" class="wizard-button"
+                    dlgtype="finish" default="true" />
+          </hbox>
+        </vbox>`;
+    }
+
+    let buttons = AppConstants.platform == "linux" ? `
+      <button label="&button-cancel-unix.label;"
+              class="wizard-button"
+              dlgtype="cancel"/>
+      <spacer style="width: 24px;"/>
+      <button label="&button-back-unix.label;"
+              accesskey="&button-back-unix.accesskey;"
+              class="wizard-button" dlgtype="back"/>
+      <deck class="wizard-next-deck">
+        <hbox>
+          <button label="&button-finish-unix.label;"
+                  class="wizard-button"
+                  dlgtype="finish" default="true" flex="1"/>
+        </hbox>
+        <hbox>
+          <button label="&button-next-unix.label;"
+                  accesskey="&button-next-unix.accesskey;"
+                  class="wizard-button" dlgtype="next"
+                  default="true" flex="1"/>
+        </hbox>
+      </deck>` : `
+      <button label="&button-back-win.label;"
+              accesskey="&button-back-win.accesskey;"
+              class="wizard-button" dlgtype="back"/>
+      <deck class="wizard-next-deck">
+        <hbox>
+          <button label="&button-finish-win.label;"
+                  class="wizard-button"
+                  dlgtype="finish" default="true" flex="1"/>
+        </hbox>
+        <hbox>
+          <button label="&button-next-win.label;"
+                  accesskey="&button-next-win.accesskey;"
+                  class="wizard-button" dlgtype="next"
+                  default="true" flex="1"/>
+        </hbox>
+      </deck>
+      <button label="&button-cancel-win.label;"
+              class="wizard-button"
+              dlgtype="cancel"/>`;
+
+    return `
+      <vbox class="wizard-buttons-box-1" flex="1">
+        <separator class="wizard-buttons-separator groove"/>
+        <hbox class="wizard-buttons-box-2">
+          <button class="wizard-button" dlgtype="extra1" hidden="true"/>
+          <button class="wizard-button" dlgtype="extra2" hidden="true"/>
+          <spacer flex="1" anonid="spacer"/>
+          ${buttons}
+        </hbox>
+      </vbox>`;
+  }
+
+  onPageChange() {
+    if (AppConstants.platform == "macosx") {
+      this.setAttribute("hidefinishbutton",
+                        !(this.getAttribute("lastpage") == "true"));
+    } else if (this.getAttribute("lastpage") == "true") {
+      this._wizardButtonDeck.setAttribute("selectedIndex", 0);
+    } else {
+      this._wizardButtonDeck.setAttribute("selectedIndex", 1);
+    }
+  }
+
+  getButton(type) {
+    return this.querySelector(`[dlgtype="${type}"]`);
+  }
+
+  get defaultButton() {
+    const kXULNS =
+      "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+    let buttons = this._wizardButtonDeck.selectedPanel.
+      getElementsByTagNameNS(kXULNS, "button");
+    for (let i = 0; i < buttons.length; i++) {
+      if (buttons[i].getAttribute("default") == "true" &&
+          !buttons[i].hidden && !buttons[i].disabled) {
+        return buttons[i];
+      }
+    }
+    return null;
+  }
+}
+
+customElements.define("wizard-buttons", MozWizardButtons);
 }

toolkit/content/widgets/wizard.xml

@@ -4,11 +4,6 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 
-<!DOCTYPE bindings [
-  <!ENTITY % wizardDTD SYSTEM "chrome://global/locale/wizard.dtd">
-  %wizardDTD;
-]>
-
 <bindings id="wizardBindings"
    xmlns="http://www.mozilla.org/xbl"
    xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
@@ -23,7 +18,7 @@
       </xul:deck>
       <children/>
 
-      <xul:hbox class="wizard-buttons" anonid="Buttons" xbl:inherits="pagestep,firstpage,lastpage"/>
+      <xul:wizard-buttons class="wizard-buttons" anonid="Buttons" xbl:inherits="pagestep,firstpage,lastpage"/>
     </content>
 
     <implementation>
@@ -31,9 +26,9 @@
                              onset="return document.title = val;"/>
 
       <property name="canAdvance" onget="return this._canAdvance;"
-                                  onset="this._nextButton.disabled = !val; return this._canAdvance = val;"/>
+                                  onset="this.getButton('next').disabled = !val; return this._canAdvance = val;"/>
       <property name="canRewind" onget="return this._canRewind;"
-                                 onset="this._backButton.disabled = !val; return this._canRewind = val;"/>
+                                 onset="this.getButton('back').disabled = !val; return this._canRewind = val;"/>
 
       <property name="pageStep" readonly="true" onget="return this._pageStack.length"/>
 
@@ -67,13 +62,13 @@
             this.canRewind = false;
             this.setAttribute("firstpage", "true");
             if (/Linux/.test(navigator.platform)) {
-              this._backButton.setAttribute('hidden', 'true');
+              this.getButton("back").setAttribute("hidden", "true");
             }
           } else {
             this.canRewind = true;
             this.setAttribute("firstpage", "false");
             if (/Linux/.test(navigator.platform)) {
-              this._backButton.setAttribute('hidden', 'false');
+              this.getButton("back").setAttribute("hidden", "false");
             }
           }
 
@@ -128,8 +123,7 @@
         <parameter name="aDlgType"/>
         <body>
         <![CDATA[
-          var btns = this.getElementsByAttribute("dlgtype", aDlgType);
+          return this._wizardButtons.getButton(aDlgType);
-          return btns.item(0) ? btns[0] : document.getAnonymousElementByAttribute(this._wizardButtons, "dlgtype", aDlgType);
         ]]>
         </body>
       </method>
@@ -139,22 +133,6 @@
       <field name="_wizardHeader"/>
       <field name="_wizardButtons"/>
       <field name="_deck"/>
-      <field name="_backButton"/>
-      <field name="_nextButton"/>
-      <field name="_cancelButton"/>
-
-      <!-- functions to be added as oncommand listeners to the wizard buttons -->
-      <field name="_backFunc">(function() { document.documentElement.rewind(); })</field>
-      <field name="_nextFunc">(function() { document.documentElement.advance(); })</field>
-      <field name="_finishFunc">(function() { document.documentElement.advance(); })</field>
-      <field name="_cancelFunc">(function() { document.documentElement.cancel(); })</field>
-      <field name="_extra1Func">(function() { document.documentElement.extra1(); })</field>
-      <field name="_extra2Func">(function() { document.documentElement.extra2(); })</field>
-
-      <field name="_closeHandler">(function(event) {
-        if (document.documentElement.cancel())
-          event.preventDefault();
-      })</field>
 
       <constructor><![CDATA[
         this._canAdvance = true;
@@ -201,18 +179,17 @@
         );
 
         this._wizardButtons = document.getAnonymousElementByAttribute(this, "anonid", "Buttons");
-        this._deck = document.getAnonymousElementByAttribute(this, "anonid", "Deck");
+        customElements.upgrade(this._wizardButtons);
 
-        this._initWizardButton("back");
+        this._deck = document.getAnonymousElementByAttribute(this, "anonid", "Deck");
-        this._initWizardButton("next");
-        this._initWizardButton("finish");
-        this._initWizardButton("cancel");
-        this._initWizardButton("extra1");
-        this._initWizardButton("extra2");
 
         this._initPages();
 
-        window.addEventListener("close", this._closeHandler);
+        window.addEventListener("close", (event) => {
+          if (document.documentElement.cancel()) {
+            event.preventDefault();
+          }
+        });
 
         // start off on the first page
         this.pageCount = this.wizardPages.length;
@@ -386,18 +363,6 @@
         ]]></body>
       </method>
 
-      <method name="_initWizardButton">
-        <parameter name="aName"/>
-        <body><![CDATA[
-         var btn = document.getAnonymousElementByAttribute(this._wizardButtons, "dlgtype", aName);
-         if (btn) {
-           btn.addEventListener("command", this["_"+aName+"Func"]);
-           this["_"+aName+"Button"] = btn;
-         }
-         return btn;
-        ]]></body>
-      </method>
-
       <method name="_adjustWizardHeader">
         <body><![CDATA[
           var label = this.currentPage.getAttribute("label");
@@ -460,116 +425,4 @@
       </handler>
     </handlers>
   </binding>
-
-#ifdef XP_MACOSX
-  <binding id="wizard-buttons">
-    <content>
-      <xul:vbox flex="1">
-        <xul:hbox class="wizard-buttons-btm">
-          <xul:button class="wizard-button" dlgtype="extra1" hidden="true"/>
-          <xul:button class="wizard-button" dlgtype="extra2" hidden="true"/>
-          <xul:button label="&button-cancel-mac.label;" class="wizard-button" dlgtype="cancel"/>
-          <xul:spacer flex="1"/>
-          <xul:button label="&button-back-mac.label;" accesskey="&button-back-mac.accesskey;"
-                      class="wizard-button wizard-nav-button" dlgtype="back"/>
-          <xul:button label="&button-next-mac.label;" accesskey="&button-next-mac.accesskey;"
-                      class="wizard-button wizard-nav-button" dlgtype="next"
-                      default="true" xbl:inherits="hidden=lastpage" />
-          <xul:button label="&button-finish-mac.label;" class="wizard-button"
-                      dlgtype="finish" default="true" xbl:inherits="hidden=hidefinishbutton" />
-        </xul:hbox>
-      </xul:vbox>
-    </content>
-
-    <implementation>
-      <method name="onPageChange">
-        <body><![CDATA[
-          this.setAttribute("hidefinishbutton", !(this.getAttribute("lastpage") == "true"));
-        ]]></body>
-      </method>
-    </implementation>
-
-  </binding>
-
-#else
-
-  <binding id="wizard-buttons">
-    <content>
-      <xul:vbox class="wizard-buttons-box-1" flex="1">
-        <xul:separator class="wizard-buttons-separator groove"/>
-        <xul:hbox class="wizard-buttons-box-2">
-          <xul:button class="wizard-button" dlgtype="extra1" hidden="true"/>
-          <xul:button class="wizard-button" dlgtype="extra2" hidden="true"/>
-          <xul:spacer flex="1" anonid="spacer"/>
-#ifdef XP_UNIX
-          <xul:button label="&button-cancel-unix.label;" class="wizard-button"
-                      dlgtype="cancel"/>
-          <xul:spacer style="width: 24px"/>
-          <xul:button label="&button-back-unix.label;" accesskey="&button-back-unix.accesskey;"
-                      class="wizard-button" dlgtype="back"/>
-          <xul:deck class="wizard-next-deck" anonid="WizardButtonDeck">
-            <xul:hbox>
-              <xul:button label="&button-finish-unix.label;" class="wizard-button"
-                          dlgtype="finish" default="true" flex="1"/>
-            </xul:hbox>
-            <xul:hbox>
-              <xul:button label="&button-next-unix.label;" accesskey="&button-next-unix.accesskey;"
-                          class="wizard-button" dlgtype="next"
-                          default="true" flex="1"/>
-            </xul:hbox>
-          </xul:deck>
-#else
-          <xul:button label="&button-back-win.label;" accesskey="&button-back-win.accesskey;"
-                      class="wizard-button" dlgtype="back"/>
-          <xul:deck class="wizard-next-deck" anonid="WizardButtonDeck">
-            <xul:hbox>
-              <xul:button label="&button-finish-win.label;" class="wizard-button"
-                          dlgtype="finish" default="true" flex="1"/>
-            </xul:hbox>
-            <xul:hbox>
-              <xul:button label="&button-next-win.label;" accesskey="&button-next-win.accesskey;"
-                          class="wizard-button" dlgtype="next"
-                          default="true" flex="1"/>
-            </xul:hbox>
-          </xul:deck>
-          <xul:button label="&button-cancel-win.label;" class="wizard-button"
-                      dlgtype="cancel"/>
-#endif
-        </xul:hbox>
-      </xul:vbox>
-    </content>
-
-    <implementation>
-      <field name="_wizardButtonDeck" readonly="true">
-        document.getAnonymousElementByAttribute(this, "anonid", "WizardButtonDeck");
-      </field>
-
-      <method name="onPageChange">
-        <body><![CDATA[
-          if (this.getAttribute("lastpage") == "true") {
-            this._wizardButtonDeck.setAttribute("selectedIndex", 0);
-          } else {
-            this._wizardButtonDeck.setAttribute("selectedIndex", 1);
-          }
-        ]]></body>
-      </method>
-
-      <property name="defaultButton" readonly="true">
-        <getter><![CDATA[
-          const kXULNS =
-            "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-          var buttons = this._wizardButtonDeck.selectedPanel
-                            .getElementsByTagNameNS(kXULNS, "button");
-          for (var i = 0; i < buttons.length; i++) {
-            if (buttons[i].getAttribute("default") == "true" &&
-                !buttons[i].hidden && !buttons[i].disabled)
-              return buttons[i];
-          }
-          return null;
-        ]]></getter>
-      </property>
-    </implementation>
-  </binding>
-#endif
-
 </bindings>

toolkit/content/xul.css

@@ -672,10 +672,6 @@ wizardpage {
   overflow: auto;
 }
 
-.wizard-buttons {
-  -moz-binding: url("chrome://global/content/bindings/wizard.xml#wizard-buttons");
-}
-
 /********** Rich Listbox ********/
 
 richlistbox {