Bug 1493844 - Part 2 - Remove the "caption" and "groupbox" bindings. r=bgrins,dao,jaws,johannh,surkov
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Tue, 23 Oct 2018 10:14:06 +0100
changeset 490753 e6a310eb8e42c16180e6fd1c9539e7a751f07c69
parent 490752 f7525008369c91098d956634894662ffa185de22
child 490754 ff4c77d7c5ea2cb88d321f44bd9d80ac5c3ab08a
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersbgrins, dao, jaws, johannh, surkov
bugs1493844
milestone65.0a1
Bug 1493844 - Part 2 - Remove the "caption" and "groupbox" bindings. r=bgrins,dao,jaws,johannh,surkov Proper native "groupbox" styling depends on the structure of the XBL binding. By restyling the Page Info dialog, the native styling is now unused except for the Print Page Setup dialog on Windows. The native apperance is thus not applied by default anymore, and the "groupbox" element can just be used semantically for accessibility. The Print Page Setup dialog applies the native styling on its own in a way that still works on Windows. The only other consumers of "groupbox" are the in-content Preferences pages and dialogs. These are updated to use simpler styles that don't depend on the binding structure. Differential Revision: https://phabricator.services.mozilla.com/D8752
accessible/tests/mochitest/name/test_general.xul
accessible/tests/mochitest/relations/test_general.xul
accessible/tests/mochitest/tree/test_groupbox.xul
browser/base/content/pageinfo/pageInfo.xul
browser/base/content/sanitize.xul
browser/components/newtab/lib/AboutPreferences.jsm
browser/components/preferences/sanitize.xul
browser/installer/allowed-dupes.mn
browser/themes/linux/pageInfo.css
browser/themes/linux/preferences/preferences.css
browser/themes/osx/pageInfo.css
browser/themes/osx/preferences/preferences.css
browser/themes/shared/incontentprefs/dialog.inc.css
browser/themes/shared/incontentprefs/preferences.inc.css
browser/themes/windows/pageInfo.css
browser/themes/windows/preferences/preferences.css
mobile/android/installer/allowed-dupes.mn
toolkit/components/printing/content/printPageSetup.js
toolkit/components/printing/content/printPageSetup.xul
toolkit/content/jar.mn
toolkit/content/widgets.css
toolkit/content/widgets/groupbox.xml
toolkit/content/xul.css
toolkit/mozapps/preferences/changemp.xul
toolkit/themes/linux/global/groupbox.css
toolkit/themes/linux/global/in-content/common.css
toolkit/themes/linux/global/jar.mn
toolkit/themes/linux/global/printPageSetup.css
toolkit/themes/mobile/jar.mn
toolkit/themes/osx/global/groupbox.css
toolkit/themes/osx/global/in-content/common.css
toolkit/themes/osx/global/jar.mn
toolkit/themes/shared/in-content/common.inc.css
toolkit/themes/windows/global/groupbox.css
toolkit/themes/windows/global/in-content/common.css
toolkit/themes/windows/global/jar.mn
toolkit/themes/windows/global/printPageSetup.css
--- a/accessible/tests/mochitest/name/test_general.xul
+++ b/accessible/tests/mochitest/name/test_general.xul
@@ -169,19 +169,18 @@
       testName("lb_opt1_children_hidden", "i am visible");
 
 
       //////////////////////////////////////////////////////////////////////////
       // Name from aria-labelledby: menuitem label+ listitem label
       testName("li_labelledby", "Show an Alert The moment the event starts");
 
       //////////////////////////////////////////////////////////////////////////
-      // groupbox labeling from caption label or its sub tree
+      // groupbox labeling from caption sub tree
       testName("groupbox", "Some caption");
-      testName("groupbox2", "Some caption");
 
       SimpleTest.finish();
     }
 
     SimpleTest.waitForExplicitFinish();
     addA11yLoadEvent(doTest);
   ]]>
   </script>
@@ -342,22 +341,18 @@
 
   <!-- name from children, hidden children -->
   <vbox role="listbox" tabindex="0">
     <hbox id="lb_opt1_children_hidden" role="option" tabindex="0">
       <description>i am visible</description>
       <description style="display:none">i am hidden</description>
     </hbox>
 
-    <!-- Name from label or sub tree -->
+    <!-- Name from caption sub tree -->
     <groupbox id="groupbox">
-      <caption label="Some caption" />
-      <checkbox label="some checkbox label" />
-    </groupbox>
-    <groupbox id="groupbox2">
       <caption><label>Some caption</label></caption>
       <checkbox label="some checkbox label" />
     </groupbox>
   </vbox>
 
   <!-- bug 441991; create name from other menuitem label listitem's own label -->
   <hbox>
     <richlistbox>
--- a/accessible/tests/mochitest/relations/test_general.xul
+++ b/accessible/tests/mochitest/relations/test_general.xul
@@ -206,17 +206,17 @@
 
     <description id="flowto" aria-flowto="flowfrom">flow to</description>
     <description id="flowfrom">flow from</description>
 
     <textbox id="textbox"/>
     <button id="submit" default="true" label="Default"/>
 
     <groupbox id="groupbox">
-      <caption label="caption"/>
+      <caption><label id="groupboxlabel" value="caption"/></caption>
     </groupbox>
 
     <tabbox>
       <tabs>
         <tab label="tab1" id="tab1"/>
         <tab label="tab2" id="tab2" linkedpanel="tabpanel2"/>
         <tab label="tab3" id="tab3" linkedpanel="tabpanel3"/>
       </tabs>
--- a/accessible/tests/mochitest/tree/test_groupbox.xul
+++ b/accessible/tests/mochitest/tree/test_groupbox.xul
@@ -49,16 +49,16 @@
       <div id="content" style="display: none">
       </div>
       <pre id="test">
       </pre>
     </body>
 
     <vbox flex="1">
       <groupbox id="groupbox">
-        <caption label="Some caption" />
+        <caption><label value="Some caption"/></caption>
         <checkbox label="some checkbox label" />
     </groupbox>
     </vbox>
   </hbox>
 
 </window>
 
--- a/browser/base/content/pageinfo/pageInfo.xul
+++ b/browser/base/content/pageinfo/pageInfo.xul
@@ -273,135 +273,120 @@
       <hbox pack="end">
         <button command="cmd_help" label="&helpButton.label;" dlgtype="help"/>
       </hbox>
     </vbox>
 
     <!-- Security & Privacy -->
     <vbox id="securityPanel">
       <!-- Identity Section -->
-      <groupbox id="security-identity-groupbox" flex="1">
-        <caption id="security-identity" label="&securityView.identity.header;"/>
-        <grid id="security-identity-grid" flex="1">
+      <groupbox>
+        <caption>
+          <label class="header" value="&securityView.identity.header;"/>
+        </caption>
+        <grid>
           <columns>
             <column/>
             <column flex="1"/>
           </columns>
-          <rows id="security-identity-rows">
+          <rows>
             <!-- Domain -->
-            <row id="security-identity-domain-row">
-              <label id="security-identity-domain-label"
-                     class="fieldLabel"
-                     value="&securityView.identity.domain;"
+            <row>
+              <label value="&securityView.identity.domain;"
                      control="security-identity-domain-value"/>
-              <textbox id="security-identity-domain-value"
-                       class="fieldValue" readonly="true"/>
+              <textbox id="security-identity-domain-value" readonly="true"/>
             </row>
             <!-- Owner -->
-            <row id="security-identity-owner-row">
+            <row>
               <label id="security-identity-owner-label"
                      class="fieldLabel"
                      value="&securityView.identity.owner;"
                      control="security-identity-owner-value"/>
-              <textbox id="security-identity-owner-value"
-                       class="fieldValue" readonly="true"/>
+              <textbox id="security-identity-owner-value" readonly="true"/>
             </row>
             <!-- Verifier -->
-            <row id="security-identity-verifier-row">
-              <label id="security-identity-verifier-label"
-                     class="fieldLabel"
-                     value="&securityView.identity.verifier;"
+            <row>
+              <label value="&securityView.identity.verifier;"
                      control="security-identity-verifier-value"/>
-              <textbox id="security-identity-verifier-value"
-                       class="fieldValue" readonly="true" />
+              <hbox align="center">
+                <textbox id="security-identity-verifier-value" readonly="true"
+                         flex="1"/>
+                <button id="security-view-cert" label="&securityView.certView;"
+                        accesskey="&securityView.accesskey;"
+                        oncommand="security.viewCert();"/>
+              </hbox>
             </row>
             <!-- Certificate Validity -->
             <row id="security-identity-validity-row">
-              <label id="security-identity-validity-label"
-                     class="fieldLabel"
-                     value="&securityView.identity.validity;"
+              <label value="&securityView.identity.validity;"
                      control="security-identity-validity-value"/>
-              <textbox id="security-identity-validity-value"
-                       class="fieldValue" readonly="true" />
+              <textbox id="security-identity-validity-value" readonly="true"/>
             </row>
           </rows>
         </grid>
-        <spacer flex="1"/>
-        <!-- Cert button -->
-        <hbox id="security-view-cert-box" pack="end">
-          <button id="security-view-cert" label="&securityView.certView;"
-                  accesskey="&securityView.accesskey;"
-                  oncommand="security.viewCert();"/>
-        </hbox>
       </groupbox>
 
       <!-- Privacy & History section -->
-      <groupbox id="security-privacy-groupbox" flex="1">
-        <caption id="security-privacy" label="&securityView.privacy.header;" />
-        <grid id="security-privacy-grid">
+      <groupbox>
+        <caption>
+          <label class="header" value="&securityView.privacy.header;"/>
+        </caption>
+        <grid>
           <columns>
             <column flex="1"/>
             <column flex="1"/>
           </columns>
-          <rows id="security-privacy-rows">
+          <rows>
             <!-- History -->
-            <row id="security-privacy-history-row">
-              <label id="security-privacy-history-label"
-                           control="security-privacy-history-value"
-                           class="fieldLabel">&securityView.privacy.history;</label>
+            <row>
+              <label control="security-privacy-history-value">&securityView.privacy.history;</label>
               <label id="security-privacy-history-value"
-                     class="fieldValue"
                      value="&securityView.unknown;"/>
             </row>
             <!-- Site Data & Cookies -->
-            <row id="security-privacy-sitedata-row">
-              <label id="security-privacy-sitedata-label"
-                           control="security-privacy-sitedata-value"
-                           class="fieldLabel">&securityView.privacy.siteData;</label>
+            <row>
+              <label control="security-privacy-sitedata-value">&securityView.privacy.siteData;</label>
               <hbox id="security-privacy-sitedata-box" align="center">
                 <label id="security-privacy-sitedata-value"
-                       class="fieldValue"
                        flex="1">&securityView.unknown;</label>
                 <button id="security-clear-sitedata"
                         disabled="true"
                         label="&securityView.privacy.clearSiteData;"
                         accesskey="&securityView.privacy.clearSiteData.accessKey;"
                         oncommand="security.clearSiteData();"/>
               </hbox>
             </row>
             <!-- Passwords -->
-            <row id="security-privacy-passwords-row">
-              <label id="security-privacy-passwords-label"
-                            control="security-privacy-passwords-value"
-                            class="fieldLabel">&securityView.privacy.passwords;</label>
+            <row>
+              <label control="security-privacy-passwords-value">&securityView.privacy.passwords;</label>
               <hbox id="security-privacy-passwords-box" align="center">
                 <label id="security-privacy-passwords-value"
-                       class="fieldValue"
                        value="&securityView.unknown;"
                        flex="1"/>
                 <button id="security-view-password"
                         label="&securityView.privacy.viewPasswords;"
                         accesskey="&securityView.privacy.viewPasswords.accessKey;"
                         oncommand="security.viewPasswords();"/>
               </hbox>
             </row>
           </rows>
         </grid>
       </groupbox>
 
       <!-- Technical Details section -->
-      <groupbox id="security-technical-groupbox" flex="1">
-        <caption id="security-technical" label="&securityView.technical.header;" />
-        <vbox id="security-technical-box" flex="1">
-          <label id="security-technical-shortform" class="fieldValue"/>
-          <description id="security-technical-longform1" class="fieldLabel"/>
-          <description id="security-technical-longform2" class="fieldLabel"/>
-          <description id="security-technical-certificate-transparency" class="fieldLabel"/>
-        </vbox>
+      <groupbox>
+        <caption>
+          <label class="header" value="&securityView.technical.header;"/>
+        </caption>
+        <label id="security-technical-shortform"/>
+        <description id="security-technical-longform1"/>
+        <description id="security-technical-longform2"/>
+        <description id="security-technical-certificate-transparency"/>
       </groupbox>
+
       <hbox pack="end">
         <button command="cmd_help" label="&helpButton.label;" dlgtype="help"/>
       </hbox>
     </vbox>
     <!-- Others added by overlay -->
   </deck>
 
 </window>
--- a/browser/base/content/sanitize.xul
+++ b/browser/base/content/sanitize.xul
@@ -78,17 +78,17 @@
           </vbox>
         </hbox>
         <spacer flex="1"/>
       </vbox>
 
 
     <separator class="thin"/>
 
-    <groupbox orient="horizontal">
+    <groupbox>
       <caption><label>&historySection.label;</label></caption>
       <grid flex="1">
         <columns>
           <column style="width: &sanitizePrefs2.column.width;"/>
           <column flex="1"/>
         </columns>
         <rows>
           <row>
@@ -115,17 +115,17 @@
             <checkbox label="&itemFormSearchHistory.label;"
                       accesskey="&itemFormSearchHistory.accesskey;"
                       preference="privacy.cpd.formdata"
                       onsyncfrompreference="return gSanitizePromptDialog.onReadGeneric();"/>
           </row>
         </rows>
       </grid>
     </groupbox>
-    <groupbox orient="horizontal">
+    <groupbox>
       <caption><label>&dataSection.label;</label></caption>
       <grid flex="1">
         <columns>
           <column style="width: &sanitizePrefs2.column.width;"/>
           <column flex="1"/>
         </columns>
         <rows>
           <row>
--- a/browser/components/newtab/lib/AboutPreferences.jsm
+++ b/browser/components/newtab/lib/AboutPreferences.jsm
@@ -158,17 +158,18 @@ this.AboutPreferences = class AboutPrefe
       document.documentElement);
 
     // Insert a new group immediately after the homepage one
     const homeGroup = document.getElementById("homepageGroup");
     const contentsGroup = homeGroup.insertAdjacentElement("afterend", homeGroup.cloneNode());
     contentsGroup.id = "homeContentsGroup";
     contentsGroup.setAttribute("data-subcategory", "contents");
     const caption = createAppend("caption", contentsGroup);
-    caption.setAttribute("label", formatString("prefs_home_header"));
+    const captionLabel = createAppend("label", caption);
+    captionLabel.setAttribute("value", formatString("prefs_home_header"));
     const description = createAppend("description", contentsGroup);
     description.textContent = formatString("prefs_home_description");
 
     // Add preferences for each section
     prefStructure.forEach(sectionData => {
       const {
         id,
         pref: prefData,
--- a/browser/components/preferences/sanitize.xul
+++ b/browser/components/preferences/sanitize.xul
@@ -36,17 +36,17 @@
   </keyset>
 
   <vbox id="SanitizeDialogPane" class="prefpane">
 
     <script type="application/javascript" src="chrome://browser/content/preferences/sanitize.js"/>
 
     <description>&clearDataSettings4.label;</description>
 
-    <groupbox orient="horizontal">
+    <groupbox>
       <caption><label>&historySection.label;</label></caption>
       <grid flex="1">
         <columns>
           <column style="width: &sanitizePrefs2.column.width;"/>
           <column flex="1"/>
         </columns>
         <rows>
           <row>
@@ -68,17 +68,17 @@
           <row>
             <checkbox label="&itemFormSearchHistory.label;"
                       accesskey="&itemFormSearchHistory.accesskey;"
                       preference="privacy.clearOnShutdown.formdata"/>
           </row>
         </rows>
       </grid>
     </groupbox>
-    <groupbox orient="horizontal">
+    <groupbox>
       <caption><label>&dataSection.label;</label></caption>
       <grid flex="1">
         <columns>
           <column style="width: &sanitizePrefs2.column.width;"/>
           <column flex="1"/>
         </columns>
         <rows>
           <row>
--- a/browser/installer/allowed-dupes.mn
+++ b/browser/installer/allowed-dupes.mn
@@ -87,17 +87,16 @@ browser/features/firefox@getpocket.com/c
 browser/features/firefox@getpocket.com/chrome/skin/windows/menuPanel@2x.png
 chrome.manifest
 chrome/toolkit/skin/classic/global/autocomplete.css
 chrome/toolkit/skin/classic/global/button.css
 chrome/toolkit/skin/classic/global/checkbox.css
 chrome/toolkit/skin/classic/global/dialog.css
 chrome/toolkit/skin/classic/global/dropmarker.css
 chrome/toolkit/skin/classic/global/global.css
-chrome/toolkit/skin/classic/global/groupbox.css
 chrome/toolkit/skin/classic/global/icons/close-win7.png
 chrome/toolkit/skin/classic/global/menu.css
 chrome/toolkit/skin/classic/global/menulist.css
 chrome/toolkit/skin/classic/global/numberbox.css
 chrome/toolkit/skin/classic/global/popup.css
 chrome/toolkit/skin/classic/global/preferences.css
 chrome/toolkit/skin/classic/global/progressmeter.css
 chrome/toolkit/skin/classic/global/radio.css
--- a/browser/themes/linux/pageInfo.css
+++ b/browser/themes/linux/pageInfo.css
@@ -152,28 +152,16 @@ treechildren::-moz-tree-cell-text(broken
 }
 
 .permission:hover {
   background-color: -moz-dialog;
   color: -moz-DialogText;
 }
 
 /* Security Tab */
-#securityPanel .caption-icon {
-  display: none;
-}
 
-#securityPanel .header {
-  font-size: 120%;
-}
-
-#securityPanel .fieldLabel {
-  margin: 2px 10px 3px;
-}
-
-#securityPanel .fieldValue {
-  font-weight: bold;
-  margin: 2px 10px 3px;
+#securityPanel grid {
+  margin-bottom: 1em;
 }
 
 #securityPanel row {
   -moz-box-align: center;
 }
--- a/browser/themes/linux/preferences/preferences.css
+++ b/browser/themes/linux/preferences/preferences.css
@@ -47,29 +47,16 @@
 .contentPane {
   margin: 9px 8px 5px 8px;
 }
 
 .actionButtons {
   margin: 0px 3px 6px 3px !important;
 }
 
-/* bottom-most box containing a groupbox in a prefpane. Prevents the bottom
-   of the groupbox from being cutoff */
-.bottomBox {
-  padding-bottom: 4px;
-}
-
-/**
- * Clear Private Data
- */
-#SanitizeDialogPane > groupbox {
-  margin-top: 0;
-}
-
 /* Sync Pane */
 
 #noFxaAccount {
   line-height: 1.2em;
 }
 
 #noFxaAccount > label:first-child {
   margin-bottom: 0.6em;
--- a/browser/themes/osx/pageInfo.css
+++ b/browser/themes/osx/pageInfo.css
@@ -128,28 +128,16 @@ treechildren::-moz-tree-cell-text(broken
 }
 
 .permission:hover {
   background-color: -moz-dialog;
   color: -moz-DialogText;
 }
 
 /* Security Tab */
-#securityPanel .caption-icon {
-  display: none;
-}
 
-#securityPanel .header {
-  font-size: 120%;
-}
-
-#securityPanel .fieldLabel {
-  margin: 2px 10px 3px;
-}
-
-#securityPanel .fieldValue {
-  font-weight: bold;
-  margin: 2px 10px 3px;
+#securityPanel grid {
+  margin-bottom: 1em;
 }
 
 #securityPanel row {
   -moz-box-align: center;
 }
--- a/browser/themes/osx/preferences/preferences.css
+++ b/browser/themes/osx/preferences/preferences.css
@@ -18,47 +18,31 @@
 
 .prefwindow[type="child"] {
   padding-top: 18px;
   padding-bottom: 15px;
   padding-inline-start: 18px;
   padding-inline-end: 20px;
 }
 
-description {
-  margin-bottom: 4px !important;
-}
-
 .prefpane {
   padding-top: 12px;
   padding-bottom: 12px;
   padding-inline-start: 0;
   padding-inline-end: 12px;
 }
 
 .prefwindow[type="child"] > .prefpane {
   padding: 0;
 }
 
-.prefpane .groupbox-body,
-.prefpane .groupbox-body {
-  -moz-appearance: none;
-  padding: 8px 4px 4px 4px;
-}
-
 tabpanels {
   padding: 20px 7px 7px;
 }
 
-caption {
-  padding-inline-start: 5px;
-  padding-top: 4px;
-  padding-bottom: 2px;
-}
-
 #popupPolicyRow {
   margin-bottom: 4px !important;
   padding-bottom: 4px !important;
   border-bottom: 1px solid #ccc;
 }
 
 #translationAttributionImage {
   width: 70px;
@@ -104,24 +88,16 @@ caption {
 #autoInstallOptions {
   margin-inline-start: 20px;
 }
 
 .updateControls {
   margin-inline-start: 10px;
 }
 
-/**
- * Clear Private Data
- */
-#SanitizeDialogPane > groupbox {
-  margin-top: 0;
-}
-
-
 /* ----- SYNC PANE ----- */
 
 #noFxaAccount {
   line-height: 1.2em;
 }
 
 #noFxaAccount > label:first-child {
   margin-bottom: 0.6em;
--- a/browser/themes/shared/incontentprefs/dialog.inc.css
+++ b/browser/themes/shared/incontentprefs/dialog.inc.css
@@ -14,57 +14,19 @@ window,
   margin: 0;
   padding: 0;
 }
 
 .contentPane {
   margin: 0;
 }
 
-tabbox {
-  /* override the rule in certManager.xul */
-  margin: 0 0 5px !important;
-}
-
-tabpanels {
-  font-size: 1em;
-}
-
-tabs,
-label,
-description,
-#useDocumentColors {
-  margin-right: 4px;
-  margin-left: 4px;
-}
-
 tree:not(#rejectsTree) {
   min-height: 15em;
 }
 
 .actionButtons {
   margin: 3px 0 0 !important;
 }
 
-caption {
-  padding-inline-start: 0;
-}
-
-groupbox {
-  margin-top: 0;
-  margin-right: 4px;
-  margin-left: 4px;
-  padding-top: 0;
-  padding-bottom: 5px;
-}
-
-.prefpane .groupbox-body {
-  padding: 0 0 5px;
-}
-
-groupbox description {
-  margin-right: 0;
-  margin-left: 0;
-}
-
 menulist label {
   font-weight: unset;
 }
--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -19,27 +19,28 @@
   width: 664px;
 }
 
 #mainPrefPane {
   width: 100%;
   padding: 0;
 }
 
-.prefpane > groupbox + groupbox {
-  margin-top: 16px;
+groupbox[data-category] {
+  margin: 0 0 32px;
 }
 
-groupbox + groupbox > .groupbox-body,
-groupbox + vbox groupbox > .groupbox-body {
-  margin-top: 4px;
+caption {
+  margin: 16px 0 4px;
+  font-size: 1.14em;
+  font-weight: 600;
 }
 
-.groupbox-title {
-  margin-top: 16px;
+.header-name {
+  margin-bottom: 8px;
 }
 
 description.indent,
 .indent > description {
   color: #737373;
 }
 
 button,
@@ -55,18 +56,17 @@ html|option {
  */
 button[flex] {
   min-width: auto;
 }
 
 description,
 label {
   line-height: 1.8em;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
+  margin: 0;
 }
 
 .tip-caption {
   font-size: .9em;
 }
 
 menulist > hbox > label,
 menuitem > label,
@@ -114,20 +114,16 @@ button > hbox > label {
 
 [data-subcategory] {
   margin-left: -4px;
   margin-right: -4px;
   padding-left: 4px;
   padding-right: 4px;
 }
 
-[data-subcategory] > .groupbox-title {
-  padding-inline-start: 4px;
-}
-
 .ac-site-icon {
   display: -moz-box;
 }
 
 /* Subcategory title */
 
 /**
  * The first subcategory title for each category should not have margin-top.
@@ -229,16 +225,20 @@ button > hbox > label {
   width: 30px;
   margin-inline-start: 5px;
 }
 
 #getStarted {
   font-size: 90%;
 }
 
+#useDocumentColors {
+  margin: 0;
+}
+
 #activeLanguages {
   height: 16em;
 }
 
 #activeLanguages > richlistitem {
   padding: 0.3em;
 }
 
@@ -249,24 +249,16 @@ button > hbox > label {
   background-size: 16px;
   background-position: center left 8px;
 }
 
 #downloadFolder:-moz-locale-dir(rtl) {
   background-position-x: right 8px;
 }
 
-#updateApp > .groupbox-body > label {
-  margin: 0 0 4px;
-}
-
-#updateApp > .groupbox-body > description {
-  margin: 0;
-}
-
 #updateBox {
   margin-top: 4px;
   margin-bottom: 32px;
 }
 
 #updateDeck > hbox > button {
   margin-top: 0;
   margin-bottom: 0;
@@ -324,21 +316,16 @@ button > hbox > label {
   padding-inline-start: 10px !important;
 }
 
 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
   margin-inline-end: 8px !important;
 }
 
 /* Home Pane */
-#homepageGroup > .groupbox-title {
-  /* The Restore Defaults button will make this heading taller than the other
-   * sections, so lower the top margin to account for it. */
-  margin-top: 6px;
-}
 #homepageGroup menulist,
 #homepageGroup textbox {
   margin: 5px 0;
 }
 #homepageAndNewWindowsOption {
   margin-top: 20px;
 }
 #homepageGroup:-moz-locale-dir(rtl) input {
@@ -448,29 +435,16 @@ button > hbox > label {
 #historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
 #historyPane:not([selectedIndex="2"]) > #historyCustomPane,
 #weavePrefsDeck:not([selectedIndex="1"]) > #hasFxaAccount,
 #fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
 #fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
   visibility: collapse;
 }
 
-#weavePrefsDeck > vbox > label,
-#weavePrefsDeck > vbox > groupbox,
-#weavePrefsDeck > vbox > description,
-#weavePrefsDeck > #hasFxaAccount > vbox > label,
-#weavePrefsDeck > #hasFxaAccount > hbox > label {
-  /* no margin-inline-start for elements at the beginning of a line */
-  margin-inline-start: 0;
-}
-
-#weavePrefsDeck > vbox > groupbox {
-  margin-top: 16px;
-}
-
 #tabsElement {
   margin-inline-end: 4px; /* add the 4px end-margin of other elements */
 }
 
 .text-link {
   margin-bottom: 0;
 }
 
--- a/browser/themes/windows/pageInfo.css
+++ b/browser/themes/windows/pageInfo.css
@@ -171,28 +171,16 @@ treechildren::-moz-tree-cell-text(broken
 }
 
 .permission:hover {
   background-color: -moz-dialog;
   color: -moz-dialogText;
 }
 
 /* Security Tab */
-#securityPanel .caption-icon {
-  display: none;
-}
 
-#securityPanel .header {
-  font-size: 120%;
-}
-
-#securityPanel .fieldLabel {
-  margin: 2px 10px 3px;
-}
-
-#securityPanel .fieldValue {
-  font-weight: bold;
-  margin: 2px 10px 3px;
+#securityPanel grid {
+  margin-bottom: 1em;
 }
 
 #securityPanel row {
   -moz-box-align: center;
 }
--- a/browser/themes/windows/preferences/preferences.css
+++ b/browser/themes/windows/preferences/preferences.css
@@ -53,24 +53,16 @@
 .contentPane {
   margin: 9px 8px 5px;
 }
 
 .actionButtons {
   margin: 0 3px 6px !important;
 }
 
-/* Advanced Pane */
-
-/* bottom-most box containing a groupbox in a prefpane. Prevents the bottom
-   of the groupbox from being cutoff */
-.bottomBox {
-  padding-bottom: 4px;
-}
-
 /* Sync Pane */
 
 #noFxaAccount {
   line-height: 1.2em;
 }
 
 #noFxaAccount > label:first-child {
   margin-bottom: 0.6em;
--- a/mobile/android/installer/allowed-dupes.mn
+++ b/mobile/android/installer/allowed-dupes.mn
@@ -6,17 +6,16 @@
 #
 
 chrome/toolkit/skin/classic/global/autocomplete.css
 chrome/toolkit/skin/classic/global/button.css
 chrome/toolkit/skin/classic/global/checkbox.css
 chrome/toolkit/skin/classic/global/dialog.css
 chrome/toolkit/skin/classic/global/dropmarker.css
 chrome/toolkit/skin/classic/global/global.css
-chrome/toolkit/skin/classic/global/groupbox.css
 chrome/toolkit/skin/classic/global/listbox.css
 chrome/toolkit/skin/classic/global/menu.css
 chrome/toolkit/skin/classic/global/menulist.css
 chrome/toolkit/skin/classic/global/numberbox.css
 chrome/toolkit/skin/classic/global/popup.css
 chrome/toolkit/skin/classic/global/preferences.css
 chrome/toolkit/skin/classic/global/progressmeter.css
 chrome/toolkit/skin/classic/global/radio.css
--- a/toolkit/components/printing/content/printPageSetup.js
+++ b/toolkit/components/printing/content/printPageSetup.js
@@ -250,28 +250,28 @@ function loadDialog() {
   setPrinterDefaultsForSelectedPrinter();
 
   gDialog.printBG.checked = gPrintSettings.printBGColors || gPrintSettings.printBGImages;
 
   gDialog.shrinkToFit.checked   = gPrintSettings.shrinkToFit;
 
   gDialog.scalingLabel.disabled = gDialog.scalingInput.disabled = gDialog.shrinkToFit.checked;
 
-  var marginGroupLabel = gDialog.marginGroup.label;
+  var marginGroupLabel = gDialog.marginGroup.getAttribute("value");
   if (gPrintSettings.paperSizeUnit == gPrintSettingsInterface.kPaperSizeInches) {
     marginGroupLabel = marginGroupLabel.replace(/#1/, gDialog.strings["marginUnits.inches"]);
     gDoingMetric = false;
   } else {
     marginGroupLabel = marginGroupLabel.replace(/#1/, gDialog.strings["marginUnits.metric"]);
     // Also, set global page dimensions for A4 paper, in millimeters (assumes portrait at this point).
     gPageWidth = 2100;
     gPageHeight = 2970;
     gDoingMetric = true;
   }
-  gDialog.marginGroup.label = marginGroupLabel;
+  gDialog.marginGroup.setAttribute("value", marginGroupLabel);
 
   print_orientation   = gPrintSettings.orientation;
   print_margin_top    = convertMarginInchesToUnits(gPrintSettings.marginTop, gDoingMetric);
   print_margin_left   = convertMarginInchesToUnits(gPrintSettings.marginLeft, gDoingMetric);
   print_margin_right  = convertMarginInchesToUnits(gPrintSettings.marginRight, gDoingMetric);
   print_margin_bottom = convertMarginInchesToUnits(gPrintSettings.marginBottom, gDoingMetric);
 
   if (gDoDebug) {
--- a/toolkit/components/printing/content/printPageSetup.xul
+++ b/toolkit/components/printing/content/printPageSetup.xul
@@ -28,18 +28,18 @@
   <tabbox flex="1">
     <tabs>
       <tab label="&basic.tab;"/>
       <tab label="&advanced.tab;"/>
     </tabs>
     <tabpanels flex="1">
       <vbox>
         <groupbox>
-          <caption label="&formatGroup.label;"/>
-          <vbox>
+          <caption><label value="&formatGroup.label;"/></caption>
+          <vbox class="groupbox-body">
             <hbox align="center">
               <label control="orientation" value="&orientation.label;"/>
               <radiogroup id="orientation" oncommand="setOrientation()">
                 <hbox align="center">
                   <radio id="portrait"
                          class="portrait-page"
                          label="&portrait.label;"
                          accesskey="&portrait.accesskey;"/>
@@ -61,26 +61,27 @@
               <checkbox id="shrinkToFit"
                         label="&shrinkToFit.label;"
                         accesskey="&shrinkToFit.accesskey;"
                         oncommand="gDialog.scalingInput.disabled=gDialog.scalingLabel.disabled=this.checked"/>
             </hbox>
           </vbox>
         </groupbox>
         <groupbox>
-          <caption label="&optionsGroup.label;"/>
+          <caption><label value="&optionsGroup.label;"/></caption>
           <checkbox id="printBG"
+                    class="groupbox-body"
                     label="&printBG.label;"
                     accesskey="&printBG.accesskey;"/>
         </groupbox>
       </vbox>
       <vbox>
         <groupbox>
-          <caption id="marginGroup" label="&marginGroup.label;"/>
-          <vbox>
+          <caption><label id="marginGroup" value="&marginGroup.label;"/></caption>
+          <vbox class="groupbox-body">
             <hbox align="center">
               <spacer flex="1"/>
               <label control="topInput"
                      value="&marginTop.label;"
                      accesskey="&marginTop.accesskey;"/>
               <textbox id="topInput" size="5" oninput="changeMargin(this)"/>
               <!-- This invisible label (with same content as the visible one!) is used
                    to ensure that the <textbox> is centered above the page.  The same
@@ -130,18 +131,18 @@
                      accesskey="&marginBottom.accesskey;"/>
               <textbox id="bottomInput" size="5" oninput="changeMargin(this)"/>
               <label value="&marginBottom.label;" style="visibility: hidden;"/>
               <spacer flex="1"/>
             </hbox>
           </vbox>
         </groupbox>
         <groupbox>
-          <caption id="headersAndFooters" label="&headerFooter.label;"/>
-          <grid>
+          <caption><label value="&headerFooter.label;"/></caption>
+          <grid class="groupbox-body">
             <columns>
               <column/>
               <column/>
               <column/>
             </columns>
             <rows>
               <row dir="ltr">
                 <menulist id="hLeftOption" oncommand="customize(this)" tooltiptext="&headerLeft.tip;">
--- a/toolkit/content/jar.mn
+++ b/toolkit/content/jar.mn
@@ -69,17 +69,16 @@ toolkit.jar:
    content/global/bindings/checkbox.xml        (widgets/checkbox.xml)
    content/global/bindings/datekeeper.js       (widgets/datekeeper.js)
    content/global/bindings/datepicker.js       (widgets/datepicker.js)
    content/global/bindings/datetimepopup.xml   (widgets/datetimepopup.xml)
    content/global/bindings/datetimebox.xml     (widgets/datetimebox.xml)
    content/global/bindings/datetimebox.css     (widgets/datetimebox.css)
 *  content/global/bindings/dialog.xml          (widgets/dialog.xml)
    content/global/bindings/general.xml         (widgets/general.xml)
-   content/global/bindings/groupbox.xml        (widgets/groupbox.xml)
    content/global/bindings/menu.xml            (widgets/menu.xml)
    content/global/bindings/menulist.xml        (widgets/menulist.xml)
    content/global/bindings/notification.xml    (widgets/notification.xml)
    content/global/bindings/numberbox.xml       (widgets/numberbox.xml)
    content/global/bindings/popup.xml           (widgets/popup.xml)
    content/global/bindings/radio.xml           (widgets/radio.xml)
    content/global/bindings/richlistbox.xml     (widgets/richlistbox.xml)
    content/global/bindings/scrollbox.xml       (widgets/scrollbox.xml)
--- a/toolkit/content/widgets.css
+++ b/toolkit/content/widgets.css
@@ -7,17 +7,16 @@
    ======================================================================= */
 
 @import url("chrome://global/content/autocomplete.css");
 @import url("chrome://global/skin/autocomplete.css");
 @import url("chrome://global/skin/checkbox.css");
 @import url("chrome://global/skin/dialog.css");
 @import url("chrome://global/skin/dropmarker.css");
 @import url("chrome://global/skin/findBar.css");
-@import url("chrome://global/skin/groupbox.css");
 @import url("chrome://global/skin/menu.css");
 @import url("chrome://global/skin/menulist.css");
 @import url("chrome://global/skin/notification.css");
 @import url("chrome://global/skin/popup.css");
 @import url("chrome://global/skin/progressmeter.css");
 @import url("chrome://global/skin/radio.css");
 @import url("chrome://global/skin/richlistbox.css");
 @import url("chrome://global/skin/scrollbox.css");
deleted file mode 100644
--- a/toolkit/content/widgets/groupbox.xml
+++ /dev/null
@@ -1,33 +0,0 @@
-<?xml version="1.0"?>
-<!-- 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/. -->
-
-
-<bindings id="groupboxBindings"
-   xmlns="http://www.mozilla.org/xbl"
-   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-   xmlns:xbl="http://www.mozilla.org/xbl">
-
-  <binding id="groupbox">
-    <content>
-      <xul:hbox class="groupbox-title" align="center" pack="start">
-        <children includes="caption"/>
-      </xul:hbox>
-      <xul:box flex="1" class="groupbox-body" xbl:inherits="orient,align,pack">
-        <children/>
-      </xul:box>
-    </content>
-  </binding>
-
-  <binding id="caption" extends="chrome://global/content/bindings/general.xml#basetext">
-    <content>
-      <children>
-        <xul:image class="caption-icon" xbl:inherits="src=image"/>
-        <xul:label class="caption-text" flex="1"
-                   xbl:inherits="default,value=label,crop,accesskey"/>
-      </children>
-    </content>
-  </binding>
-
-</bindings>
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -218,27 +218,16 @@ radiogroup {
 
 radio {
   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
 }
 
 /******** groupbox *********/
 
 groupbox {
-  -moz-binding: url("chrome://global/content/bindings/groupbox.xml#groupbox");
-  display: -moz-groupbox;
-}
-
-caption {
-  -moz-binding: url("chrome://global/content/bindings/groupbox.xml#caption");
-}
-
-.groupbox-body {
-  -moz-box-pack: inherit;
-  -moz-box-align: inherit;
   -moz-box-orient: vertical;
 }
 
 /******** draggable elements *********/
 
 %ifndef MOZ_WIDGET_GTK
 titlebar,
 toolbar:not([nowindowdrag="true"]):not([customizing="true"]) {
--- a/toolkit/mozapps/preferences/changemp.xul
+++ b/toolkit/mozapps/preferences/changemp.xul
@@ -21,48 +21,44 @@
         onload="init()">
 
   <script type="application/javascript" src="chrome://mozapps/content/preferences/changemp.js"/>
 
   <stringbundle id="bundlePreferences" src="chrome://mozapps/locale/preferences/preferences.properties"/>
 
   <description control="pw1">&masterPasswordDescription.label;</description>
 
-  <groupbox>
-    <grid>
-      <columns>
-        <column flex="1"/>
-        <column/>
-      </columns>
-      <rows>
-        <row>
-          <label control="oldpw">&setPassword.oldPassword.label;</label>
-          <textbox id="oldpw" type="password"/>
-          <!-- This textbox is inserted as a workaround to the fact that making the 'type'
-                & 'disabled' property of the 'oldpw' textbox toggle between ['password' &
-                'false'] and ['text' & 'true'] - as would be necessary if the menu has more
-                than one tokens, some initialized and some not - does not work properly. So,
-                either the textbox 'oldpw' or the textbox 'message' would be displayed,
-                depending on the state of the token selected
-          -->
-          <textbox id="message" disabled="true" />
-        </row>
-        <row>
-          <label control="pw1">&setPassword.newPassword.label;</label>
-          <textbox id="pw1" type="password"
-                   oninput="setPasswordStrength(); checkPasswords();"/>
-        </row>
-        <row>
-          <label control="pw2">&setPassword.reenterPassword.label;</label>
-          <textbox id="pw2" type="password" oninput="checkPasswords();"/>
-        </row>
-      </rows>
-    </grid>
-  </groupbox>
+  <grid>
+    <columns>
+      <column flex="1"/>
+      <column/>
+    </columns>
+    <rows>
+      <row>
+        <label control="oldpw">&setPassword.oldPassword.label;</label>
+        <textbox id="oldpw" type="password"/>
+        <!-- This textbox is inserted as a workaround to the fact that making the 'type'
+              & 'disabled' property of the 'oldpw' textbox toggle between ['password' &
+              'false'] and ['text' & 'true'] - as would be necessary if the menu has more
+              than one tokens, some initialized and some not - does not work properly. So,
+              either the textbox 'oldpw' or the textbox 'message' would be displayed,
+              depending on the state of the token selected
+        -->
+        <textbox id="message" disabled="true" />
+      </row>
+      <row>
+        <label control="pw1">&setPassword.newPassword.label;</label>
+        <textbox id="pw1" type="password"
+                 oninput="setPasswordStrength(); checkPasswords();"/>
+      </row>
+      <row>
+        <label control="pw2">&setPassword.reenterPassword.label;</label>
+        <textbox id="pw2" type="password" oninput="checkPasswords();"/>
+      </row>
+    </rows>
+  </grid>
 
-  <groupbox>
-    <caption label="&setPassword.meter.label;"/>
-    <html:progress id="pwmeter" value="0" max="100"/>
-  </groupbox>
+  <html:label for="pwmeter" style="display: -moz-box;">&setPassword.meter.label;</html:label>
+  <html:progress id="pwmeter" value="0" max="100"/>
 
   <description control="pw2" class="header">&masterPasswordWarning.label;</description>
 
 </dialog>
deleted file mode 100644
--- a/toolkit/themes/linux/global/groupbox.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/* 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/. */
-
-/* ===== groupbox.css ==================================================
-  == Styles used by the XUL groupbox and related elements.
-  ======================================================================= */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-/* ::::: groupbox ::::: */
-
-groupbox {
-  margin: 5px;
-  padding: 5px;
-}
-
-.groupbox-body {
-  padding-inline-start: 10px;
-}
-
-caption {
-  margin-bottom: 2px;
-  font-weight: bold;
-}
-
-/* !important is needed to override label in global.css */
-.caption-text {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  margin-inline-start: 1px !important;
-}
--- a/toolkit/themes/linux/global/in-content/common.css
+++ b/toolkit/themes/linux/global/in-content/common.css
@@ -24,20 +24,16 @@ xul|menulist > xul|*.menulist-label-box 
 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
   -moz-appearance: none !important;
 }
 
 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
   margin-inline-end: 0;
 }
 
-xul|*.groupbox-body {
-  padding-inline-start: 0;
-}
-
 xul|menulist {
   font-size: inherit;
 }
 
 xul|*.menulist-dropmarker {
   display: -moz-box;
   margin-top: 6px;
   margin-bottom: 6px;
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -7,17 +7,16 @@
 toolkit.jar:
    skin/classic/global/autocomplete.css
    skin/classic/global/button.css
    skin/classic/global/checkbox.css
    skin/classic/global/commonDialog.css
    skin/classic/global/dropmarker.css
 *  skin/classic/global/findBar.css
 *  skin/classic/global/global.css
-   skin/classic/global/groupbox.css
    skin/classic/global/menu.css
    skin/classic/global/menulist.css
    skin/classic/global/netError.css
 *  skin/classic/global/notification.css
    skin/classic/global/popup.css
    skin/classic/global/radio.css
    skin/classic/global/richlistbox.css
    skin/classic/global/scrollbox.css
deleted file mode 100644
--- a/toolkit/themes/linux/global/printPageSetup.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* 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/. */
-
-.portrait-page {
-  list-style-image: url("moz-icon://stock/gtk-orientation-portrait?size=button");
-}
-
-.landscape-page {
-  list-style-image: url("moz-icon://stock/gtk-orientation-landscape?size=button");
-}
--- a/toolkit/themes/mobile/jar.mn
+++ b/toolkit/themes/mobile/jar.mn
@@ -6,17 +6,16 @@ toolkit.jar:
 % skin global classic/1.0 %skin/classic/global/
 # These are the CSS files that must exist
    skin/classic/global/autocomplete.css                    (global/empty.css)
    skin/classic/global/button.css                          (global/empty.css)
    skin/classic/global/checkbox.css                        (global/empty.css)
    skin/classic/global/dialog.css                          (global/empty.css)
    skin/classic/global/dropmarker.css                      (global/empty.css)
    skin/classic/global/global.css                          (global/empty.css)
-   skin/classic/global/groupbox.css                        (global/empty.css)
    skin/classic/global/menu.css                            (global/empty.css)
    skin/classic/global/menulist.css                        (global/empty.css)
    skin/classic/global/numberbox.css                       (global/empty.css)
    skin/classic/global/popup.css                           (global/empty.css)
    skin/classic/global/progressmeter.css                   (global/empty.css)
    skin/classic/global/radio.css                           (global/empty.css)
    skin/classic/global/richlistbox.css                     (global/empty.css)
    skin/classic/global/scrollbox.css                       (global/empty.css)
deleted file mode 100644
--- a/toolkit/themes/osx/global/groupbox.css
+++ /dev/null
@@ -1,30 +0,0 @@
-/* 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/. */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-groupbox {
-  padding: 5px 1px 1px;
-  padding-inline-start: 0;
-  margin: 6px;
-}
-
-.groupbox-body {
-  -moz-appearance: groupbox;
-  padding: 8px 8px 3px;
-  margin: 0;
-}
-
-caption {
-  padding-inline-start: 4px;
-  padding-bottom: 1px;
-  font: caption;
-}
-
-/* !important is needed to override label in global.css */
-.caption-text {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  margin-inline-start: 1px !important;
-}
--- a/toolkit/themes/osx/global/in-content/common.css
+++ b/toolkit/themes/osx/global/in-content/common.css
@@ -16,24 +16,16 @@ xul|tab[visuallyselected] {
   text-shadow: none;
 }
 
 xul|button[dlgtype="help"] {
   -moz-appearance: none;
   width: auto;
 }
 
-xul|caption {
-  padding-inline-start: 0;
-}
-
-xul|groupbox > xul|*.groupbox-body {
-  padding: 0;
-}
-
 xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before,
 xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before {
   display: none;
 }
 
 xul|*.menulist-dropmarker {
   display: -moz-box;
   margin-top: 1px;
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -8,17 +8,16 @@ toolkit.jar:
   skin/classic/global/autocomplete.css
   skin/classic/global/button.css
   skin/classic/global/checkbox.css
   skin/classic/global/commonDialog.css
   skin/classic/global/dialog.css
   skin/classic/global/dropmarker.css
 * skin/classic/global/findBar.css
 * skin/classic/global/global.css
-  skin/classic/global/groupbox.css
   skin/classic/global/menu.css
   skin/classic/global/menulist.css
 * skin/classic/global/notification.css
   skin/classic/global/netError.css
   skin/classic/global/popup.css
   skin/classic/global/progressmeter.css
   skin/classic/global/radio.css
   skin/classic/global/richlistbox.css
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/toolkit/themes/shared/in-content/common.inc.css
@@ -84,59 +84,26 @@ html|h1 {
   margin-bottom: .5em;
 }
 
 html|hr {
   border-style: solid none none none;
   border-color: var(--in-content-border-color);
 }
 
-xul|caption {
-  -moz-appearance: none;
-  font-size: 1.14em;
-  margin: 0;
-}
-
-html|h2,
-xul|caption xul|checkbox,
-xul|caption xul|label {
+html|h2 {
   font-weight: 600;
   line-height: 1.4em;
 }
 
-xul|caption xul|checkbox,
-xul|caption xul|label {
-  margin: 0 !important;
-}
-
 *|*.main-content {
   padding: 40px 28px;
   overflow: auto;
 }
 
-/* groupboxes */
-
-xul|groupbox {
-  -moz-appearance: none;
-  border: none;
-  margin: 0 0 32px;
-  padding: 0;
-}
-
-xul|groupbox > xul|caption {
-  padding: 4px 0;
-}
-
-xul|groupbox xul|label:not(.menu-accel):not(.menu-iconic-accel):not(.menu-text):not(.menu-iconic-text):not(.menulist-label):not(.indent):not(.learnMore):not(.tail-with-learn-more),
-xul|groupbox xul|description {
-  /* !important needed to override toolkit !important rule */
-  margin-inline-start: 0 !important;
-  margin-inline-end: 0 !important;
-}
-
 /* tabpanels and tabs */
 
 xul|tabpanels {
   -moz-appearance: none;
   border: none;
   padding: 0;
   background-color: transparent;
   color: inherit;
deleted file mode 100644
--- a/toolkit/themes/windows/global/groupbox.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/* 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/. */
-
-/* ===== groupbox.css ==================================================
-  == Styles used by the XUL groupbox and related elements.
-  ======================================================================= */
-
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-
-/* ::::: groupbox ::::: */
-
-groupbox {
-  -moz-appearance: groupbox;
-  border: 2px groove ThreeDFace;
-  border-radius: 3px;
-  margin: 3px;
-  padding: 3px 3px 6px;
-}
-
-.groupbox-body {
-  padding: inherit;
-}
-
-caption {
-  margin: 0 6px;
-  background-color: -moz-Dialog;
-}
-
-tabpanels caption {
-  -moz-appearance: tabpanel;
-}
-
-/* !important is needed to override label in global.css */
-.caption-text {
-  margin: 0 2px !important;
-}
--- a/toolkit/themes/windows/global/in-content/common.css
+++ b/toolkit/themes/windows/global/in-content/common.css
@@ -3,20 +3,16 @@
    - You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %include ../../../shared/in-content/common.inc.css
 
 :root {
   --in-content-box-background-odd: transparent;
 }
 
-xul|caption {
-  background-color: transparent;
-}
-
 xul|*.menulist-dropmarker {
   margin-top: 1px;
   margin-bottom: 1px;
 }
 
 xul|checkbox,
 xul|radio {
   padding-inline-start: 0;
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -4,17 +4,16 @@
 
 #include ../../shared/non-mac.jar.inc.mn
 
 toolkit.jar:
   skin/classic/global/autocomplete.css
   skin/classic/global/button.css
   skin/classic/global/checkbox.css
   skin/classic/global/dropmarker.css
-  skin/classic/global/groupbox.css
 * skin/classic/global/menu.css
   skin/classic/global/menulist.css
 * skin/classic/global/popup.css
   skin/classic/global/radio.css
   skin/classic/global/tabbox.css
   skin/classic/global/textbox.css
   skin/classic/global/commonDialog.css
 * skin/classic/global/findBar.css
--- a/toolkit/themes/windows/global/printPageSetup.css
+++ b/toolkit/themes/windows/global/printPageSetup.css
@@ -1,11 +1,32 @@
 /* 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/. */
 
+groupbox {
+  display: -moz-groupbox;
+  -moz-appearance: groupbox;
+  margin: 6px 3px;
+}
+
+.groupbox-body {
+  /* We cannot use padding on the groupbox due to its -moz-appearance. */
+  margin: 3px 3px 6px;
+}
+
+caption {
+  -moz-box-pack: start;
+  margin: -8px 6px 0;
+}
+
+caption > label {
+  background-color: -moz-field;
+  padding: 0 2px;
+}
+
 .portrait-page {
   list-style-image: url("chrome://global/skin/icons/Portrait.png");
 }
 
 .landscape-page {
   list-style-image: url("chrome://global/skin/icons/Landscape.png");
 }