Bug 1689830 - Stop using <deck> for .wizard-page-box. r=bgrins

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

toolkit/content/widgets/wizard.js

@@ -69,16 +69,13 @@
         <html:link rel="stylesheet" href="chrome://global/skin/button.css"/>
         <html:link rel="stylesheet" href="chrome://global/skin/wizard.css"/>
         <hbox class="wizard-header"></hbox>
-        <deck class="wizard-page-box" flex="1">
-          <html:slot name="wizardpage"/>
-        </deck>
+        <html:slot name="wizardpage" class="wizard-page-box" style="display: grid; -moz-box-flex: 1;"/>
         <html:slot/>
         <wizard-buttons class="wizard-buttons"></wizard-buttons>
     `)
       );
       this.initializeAttributeInheritance();
 
-      this._deck = this.shadowRoot.querySelector(".wizard-page-box");
       this._wizardButtons = this.shadowRoot.querySelector(".wizard-buttons");
 
       this._wizardHeader = this.shadowRoot.querySelector(".wizard-header");
@@ -183,6 +180,9 @@
         return;
       }
 
+      this._currentPage?.classList.remove("selected");
+      val.classList.add("selected");
+
       this._currentPage = val;
 
       // Setting this attribute allows wizard's clients to dynamically
@@ -191,7 +191,6 @@
 
       this._initCurrentPage();
 
-      this._deck.setAttribute("selectedIndex", val.pageIndex);
       this._advanceFocusToPage(val);
 
       this._fireEvent(val, "pageshow");

toolkit/content/xul.css

@@ -556,6 +556,15 @@ wizard {
   height: 30em;
 }
 
+wizard > wizardpage {
+  grid-area: 1 / 1;
+  min-height: 0;
+}
+
+wizard > wizardpage:not(.selected) {
+  visibility: hidden;
+}
+
 wizardpage {
   -moz-box-orient: vertical;
   overflow: auto;

toolkit/themes/osx/global/wizard.css

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
 
 :host {
   padding: 14px;
@@ -39,7 +40,7 @@
   height: 48px;
 }
 
-.wizard-page-box {
+html|*.wizard-page-box {
   padding: 15px 23px;
   appearance: auto;
   -moz-default-appearance: dialog;

toolkit/themes/windows/global/wizard.css

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
 
 .wizard-header {
   border-bottom: 2px groove ThreeDFace;
@@ -30,7 +31,7 @@
   margin-inline-end: 5px;
 }
 
-.wizard-page-box {
+html|*.wizard-page-box {
   margin: 10px 44px;
 }