Bug 1559964 - Make the caption look more native. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Sun, 23 Jun 2019 14:59:07 +0200
changeset 35926 3d905e57ebe0ac1386ffab24fb25560221160555
parent 35925 e2aac84cae9495a19c1ad87cc74825933c11a306
child 35927 7ad11431613a9329d152abd7a6ffd45f69d72ed9
push id392
push userclokep@gmail.com
push dateMon, 02 Sep 2019 20:17:19 +0000
reviewersjorgk
bugs1559964
Bug 1559964 - Make the caption look more native. r=jorgk
calendar/base/content/dialogs/calendar-event-dialog-recurrence.xul
calendar/base/content/dialogs/calendar-print-dialog.xul
editor/ui/dialogs/content/EdButtonProps.xul
editor/ui/dialogs/content/EdColorProps.xul
editor/ui/dialogs/content/EdFieldSetProps.xul
editor/ui/dialogs/content/EdFormProps.xul
editor/ui/dialogs/content/EdHLineProps.xul
editor/ui/dialogs/content/EdImageProps.xul
editor/ui/dialogs/content/EdInputImage.xul
editor/ui/dialogs/content/EdInputProps.xul
editor/ui/dialogs/content/EdInsertChars.xul
editor/ui/dialogs/content/EdInsertMath.xul
editor/ui/dialogs/content/EdInsertTOC.xul
editor/ui/dialogs/content/EdInsertTable.xul
editor/ui/dialogs/content/EdLabelProps.xul
editor/ui/dialogs/content/EdLinkProps.xul
editor/ui/dialogs/content/EdListProps.xul
editor/ui/dialogs/content/EdSelectProps.xul
editor/ui/dialogs/content/EdTableProps.xul
editor/ui/dialogs/content/EdTextAreaProps.xul
editor/ui/dialogs/content/EditorSaveAsCharset.xul
editor/ui/dialogs/content/edImage.inc.xul
mail/components/im/content/am-im.xul
mail/components/im/content/imAccountWizard.js
mail/components/im/content/imAccountWizard.xul
mail/components/im/themes/imAccountWizard.css
mail/themes/linux/editor/EditorDialog.css
mail/themes/linux/mail/messenger.css
mail/themes/osx/editor/EditorDialog.css
mail/themes/osx/mail/messenger.css
mail/themes/windows/editor/EditorDialog.css
mail/themes/windows/mail/messenger.css
--- a/calendar/base/content/dialogs/calendar-event-dialog-recurrence.xul
+++ b/calendar/base/content/dialogs/calendar-event-dialog-recurrence.xul
@@ -32,17 +32,19 @@
   <script src="chrome://calendar/content/calendar-statusbar.js"/>
 
   <script src="chrome://messenger/content/customElements.js"/>
   <script src="chrome://calendar/content/datetimepickers/datetimepickers.js"/>
   <script src="chrome://calendar/content/calendar-daypicker.js"/>
 
   <!-- recurrence pattern -->
   <groupbox id="recurrence-pattern-groupbox">
-    <label id="recurrence-pattern-caption" class="header">&event.recurrence.pattern.label;</label>
+    <hbox class="groupbox-title">
+      <label id="recurrence-pattern-caption" class="header">&event.recurrence.pattern.label;</label>
+    </hbox>
     <grid id="recurrence-pattern-grid">
       <columns id="recurrence-pattern-columns">
         <column id="recurrence-pattern-description-column"/>
         <column id="recurrence-pattern-controls-column"/>
       </columns>
       <rows id="recurrence-pattern-rows">
         <row id="recurrence-pattern-repeat-row" align="center">
           <label value="&event.recurrence.occurs.label;"
@@ -510,17 +512,19 @@
           </deck>
         </row>
       </rows>
     </grid>
   </groupbox>
 
   <!-- range of recurrence -->
   <groupbox id="recurrence-range-groupbox">
-    <label id="recurrence-range-caption" class="header">&event.recurrence.range.label;</label>
+    <hbox class="groupbox-title">
+      <label id="recurrence-range-caption" class="header">&event.recurrence.range.label;</label>
+    </hbox>
     <vbox>
       <radiogroup id="recurrence-duration"
                   oncommand="updateRecurrenceControls()">
         <radio id="recurrence-range-forever"
                label="&event.recurrence.forever.label;"
                value="forever"
                selected="true"
                disable-on-readonly="true"
@@ -562,17 +566,19 @@
                       disable-on-occurrence="true"/>
         </box>
       </radiogroup>
     </vbox>
   </groupbox>
 
   <!-- preview -->
   <groupbox id="preview-border" flex="1">
-    <label id="recurrence-preview-label" class="header">&event.recurrence.preview.label;</label>
+    <hbox class="groupbox-title">
+      <label id="recurrence-preview-label" class="header">&event.recurrence.preview.label;</label>
+    </hbox>
     <box id="recurrence-preview" flex="1">
       <grid flex="1">
         <columns>
           <column class="first-column"/>
           <column flex="1"/>
         </columns>
         <rows>
           <row>
--- a/calendar/base/content/dialogs/calendar-print-dialog.xul
+++ b/calendar/base/content/dialogs/calendar-print-dialog.xul
@@ -29,17 +29,19 @@
   <script src="chrome://calendar/content/calendar-print-dialog.js"/>
   <script src="chrome://calendar/content/calendar-ui-utils.js"/>
   <script src="chrome://global/content/printUtils.js"/>
   <script src="chrome://calendar/content/datetimepickers/datetimepickers.js"/>
 
   <hbox id="firstHbox" flex="1">
     <vbox id="groupboxVbox">
       <groupbox id="settingsGroup">
-        <label class="header">&calendar.print.settingsGroup.label;</label>
+        <hbox class="groupbox-title">
+          <label class="header">&calendar.print.settingsGroup.label;</label>
+        </hbox>
 
         <grid>
           <columns>
             <column/>
             <column flex="1"/>
           </columns>
 
           <rows>
@@ -63,17 +65,19 @@
                 <spacer flex="1"/>
               </hbox>
             </row>
           </rows>
         </grid>
       </groupbox>
 
       <groupbox id="what-to-print-group">
-        <label class="header">&calendar.print.range.label;</label>
+        <hbox class="groupbox-title">
+          <label class="header">&calendar.print.range.label;</label>
+        </hbox>
         <grid id="grid-events-and-tasks">
           <columns id="columns-for-events-and-tasks">
             <column id="column-event">
               <checkbox id="events" label="&calendar.print.events.label;" checked="true"
                         oncommand="eventsAndTasksOptions(this.id); refreshHtml();" persist="checked" autocheck="false"/>
             </column>
             <column id="column-tasks">
               <checkbox id="tasks" label="&calendar.print.tasks.label;" checked="true"
@@ -111,17 +115,19 @@
                 <datepicker id="end-date-picker"
                             onchange="onDatePick();"/>
               </row>
             </rows>
           </grid>
         </radiogroup>
       </groupbox>
       <groupbox id="optionsGroup" label="&calendar.print.optionsGroup.label;">
-        <label class="header">&calendar.print.optionsGroup.label;</label>
+        <hbox class="groupbox-title">
+          <label class="header">&calendar.print.optionsGroup.label;</label>
+        </hbox>
         <checkbox id="tasks-with-no-due-date" label="&calendar.print.taskswithnoduedate.label;" checked="true" oncommand="refreshHtml();"/>
         <checkbox id="completed-tasks" label="&calendar.print.completedtasks.label;" checked="true" oncommand="refreshHtml();"/>
       </groupbox>
     </vbox>
 
     <splitter/>
 
     <iframe src="about:blank"
--- a/editor/ui/dialogs/content/EdButtonProps.xul
+++ b/editor/ui/dialogs/content/EdButtonProps.xul
@@ -20,17 +20,20 @@
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdButtonProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox><label class="header">&Settings.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header">&Settings.label;</label>
+    </hbox>
     <grid><columns><column/><column/></columns>
       <rows>
         <row align="center">
           <label control="ButtonType" value="&ButtonType.label;" accesskey="&ButtonType.accesskey;"/>
           <menulist id="ButtonType">
             <menupopup>
               <menuitem label="&submit.value;"/>
               <menuitem label="&reset.value;"/>
--- a/editor/ui/dialogs/content/EdColorProps.xul
+++ b/editor/ui/dialogs/content/EdColorProps.xul
@@ -21,17 +21,19 @@
 
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdColorProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
   <groupbox align="start">
-    <label class="header">&pageColors.label;</label>
+    <hbox class="groupbox-title">
+      <label class="header">&pageColors.label;</label>
+    </hbox>
     <radiogroup id="PageColorGroup">
       <radio id="DefaultColorsRadio" label="&defaultColorsRadio.label;" oncommand="UseDefaultColors()"
         accesskey="&defaultColorsRadio.accessKey;"
         tooltiptext="&defaultColorsRadio.tooltip;" />
       <radio id="CustomColorsRadio" label="&customColorsRadio.label;" oncommand="UseCustomColors()"
         accesskey="&customColorsRadio.accessKey;"
         tooltiptext="&customColorsRadio.tooltip;" />
     </radiogroup>
--- a/editor/ui/dialogs/content/EdFieldSetProps.xul
+++ b/editor/ui/dialogs/content/EdFieldSetProps.xul
@@ -20,17 +20,20 @@
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdFieldSetProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox><label class="header" accesskey="&Legend.accesskey;">&Legend.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header" accesskey="&Legend.accesskey;">&Legend.label;</label>
+    </hbox>
     <grid><columns><column/><column/></columns>
       <rows>
         <row align="center">
           <checkbox id="EditText" label="&EditLegendText.label;" accesskey="&EditLegendText.accesskey;" checked="true" disabled="true"
             oncommand="gDialog.legendText.disabled = !gDialog.editText.checked;"/>
           <textbox id="LegendText" accesskey="&Legend.accesskey;"/>
         </row>
         <row align="center">
--- a/editor/ui/dialogs/content/EdFormProps.xul
+++ b/editor/ui/dialogs/content/EdFormProps.xul
@@ -23,17 +23,20 @@
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdFormProps.js"/>
 
   <script src="chrome://messenger/content/customElements.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox><label class="header">&Settings.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header">&Settings.label;</label>
+    </hbox>
     <grid><columns><column/><column/></columns>
       <rows>
         <row align="center">
           <label control="FormName" value="&FormName.label;" accesskey="&FormName.accesskey;"/>
           <textbox id="FormName"/>
         </row>
         <row align="center">
           <label control="FormAction" value="&FormAction.label;" accesskey="&FormAction.accesskey;"/>
--- a/editor/ui/dialogs/content/EdHLineProps.xul
+++ b/editor/ui/dialogs/content/EdHLineProps.xul
@@ -21,17 +21,20 @@
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <!--- Element-specific methods -->
   <script src="chrome://editor/content/EdHLineProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox><label class="header">&dimensionsBox.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header">&dimensionsBox.label;</label>
+    </hbox>
     <grid>
       <columns><column/><column/><column /></columns>
       <rows>
         <row align="center">
           <label control="width"
                  value="&widthEditField.label;"
                  accesskey="&widthEditField.accessKey;"/>
           <textbox class="narrow" id="width" flex="1" oninput="forceInteger('width')"/>
@@ -44,17 +47,20 @@
                  accesskey="&heightEditField.accessKey;"/>
           <textbox class="narrow" id="height" oninput="forceInteger('height')"/>
           <label value="&pixelsPopup.value;" />
         </row>
       </rows>
     </grid>
     <checkbox id="3dShading" label="&threeDShading.label;" accesskey="&threeDShading.accessKey;"/>
   </groupbox>
-  <groupbox><label class="header">&alignmentBox.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header">&alignmentBox.label;</label>
+    </hbox>
     <radiogroup id="alignmentGroup" orient="horizontal">
       <spacer class="spacer"/>
       <radio id="leftAlign"   label="&leftRadio.label;"   accesskey="&leftRadio.accessKey;"/>
       <radio id="centerAlign" label="&centerRadio.label;" accesskey="&centerRadio.accessKey;"/>
       <radio id="rightAlign"  label="&rightRadio.label;"  accesskey="&rightRadio.accessKey;"/>
     </radiogroup>
   </groupbox>
   <spacer class="spacer"/>
--- a/editor/ui/dialogs/content/EdImageProps.xul
+++ b/editor/ui/dialogs/content/EdImageProps.xul
@@ -72,17 +72,19 @@
                   oncommand="onLinkAdvancedEdit();"/>
         </hbox>
       </vbox>
     </tabpanels>
   </tabbox>
 
   <hbox align="end">
     <groupbox id="imagePreview" orient="horizontal" flex="1">
-      <label class="header">&previewBox.label;</label>
+      <hbox class="groupbox-title">
+        <label class="header">&previewBox.label;</label>
+      </hbox>
       <hbox id="preview-image-box" align="center">
         <spacer flex="1"/>
         <description id="preview-image-holder"/>
         <spacer flex="1"/>
       </hbox>
       <vbox id="PreviewSize" collapsed="true">
         <spacer flex="1"/>
         <label value="&actualSize.label;"/>
--- a/editor/ui/dialogs/content/EdInputImage.xul
+++ b/editor/ui/dialogs/content/EdInputImage.xul
@@ -31,17 +31,20 @@
   <tabbox id="TabBox">
     <tabs flex="1">
       <tab id="imageInputTab" label="&imageInputTab.label;"/>
       <tab id="imageLocationTab" label="&imageLocationTab.label;"/>
       <tab id="imageDimensionsTab" label="&imageDimensionsTab.label;"/>
       <tab id="imageAppearanceTab" label="&imageAppearanceTab.label;"/>
     </tabs>
     <tabpanels>
-      <groupbox><label class="header">&InputSettings.label;</label>
+      <groupbox>
+        <hbox class="groupbox-title">
+          <label class="header">&InputSettings.label;</label>
+        </hbox>
         <grid><columns><column/><column/></columns>
           <rows>
             <row align="center">
               <label value="&InputName.label;"/>
               <textbox id="InputName"/>
             </row>
             <row>
               <spacer/>
@@ -57,17 +60,19 @@
         </grid>
       </groupbox>
 #include edImage.inc.xul
     </tabpanels>
   </tabbox>
 
   <hbox align="end">
     <groupbox id="imagePreview" orient="horizontal" flex="1">
-      <label class="header">&previewBox.label;</label>
+      <hbox class="groupbox-title">
+        <label class="header">&previewBox.label;</label>
+      </hbox>
       <hbox id="preview-image-box" align="center">
         <spacer flex="1"/>
         <description id="preview-image-holder"/>
         <spacer flex="1"/>
       </hbox>
       <vbox id="PreviewSize" collapsed="true">
         <spacer flex="1"/>
         <label value="&actualSize.label;"/>
--- a/editor/ui/dialogs/content/EdInputProps.xul
+++ b/editor/ui/dialogs/content/EdInputProps.xul
@@ -20,34 +20,40 @@
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdInputProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox><label class="header" control="InputType" accesskey="&InputType.accesskey;">&InputType.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header" control="InputType" accesskey="&InputType.accesskey;">&InputType.label;</label>
+    </hbox>
     <menulist id="InputType" oncommand="SelectInputType();">
       <menupopup>
         <menuitem label="&text.value;"/>
         <menuitem label="&password.value;"/>
         <menuitem label="&checkbox.value;"/>
         <menuitem label="&radio.value;"/>
         <menuitem label="&submit.value;"/>
         <menuitem label="&reset.value;"/>
         <menuitem label="&file.value;"/>
         <menuitem label="&hidden.value;"/>
         <menuitem label="&image.value;"/>
         <menuitem label="&button.value;"/>
       </menupopup>
     </menulist>
   </groupbox>
 
-  <groupbox><label class="header">&InputSettings.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header">&InputSettings.label;</label>
+    </hbox>
     <grid><columns><column/><column/></columns>
       <rows>
         <row align="center">
           <deck id="InputNameDeck">
             <label control="InputName" value="&InputName.label;" accesskey="&InputName.accesskey;"/>
             <label control="InputName" value="&GroupName.label;" accesskey="&GroupName.accesskey;"/>
           </deck>
           <textbox id="InputName" oninput="onInput();"/>
--- a/editor/ui/dialogs/content/EdInsertChars.xul
+++ b/editor/ui/dialogs/content/EdInsertChars.xul
@@ -20,17 +20,20 @@
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdInsertChars.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox><label class="header">&category.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header">&category.label;</label>
+    </hbox>
     <radiogroup id="CatGrp" persist="category letter_index char_index">
       <radio id="AccentUpper" label="&accentUpper.label;"   oncommand="ChangeCategory(this.id)"/>
       <radio id="AccentLower" label="&accentLower.label;"   oncommand="ChangeCategory(this.id)"/>
       <radio id="Upper"       label="&otherUpper.label;"    oncommand="ChangeCategory(this.id)"/>
       <radio id="Lower"       label="&otherLower.label;"    oncommand="ChangeCategory(this.id)"/>
       <radio id="Symbol"      label="&commonSymbols.label;" oncommand="ChangeCategory(this.id)"/>
     </radiogroup>
     <spacer class="spacer"/>
--- a/editor/ui/dialogs/content/EdInsertMath.xul
+++ b/editor/ui/dialogs/content/EdInsertMath.xul
@@ -32,17 +32,19 @@
     <description id="output"/>
   </vbox>
   <tabbox id="tabboxInsertLaTeXCommand">
     <tabs/>
     <tabpanels oncommand="insertLaTeXCommand(event.target);"/>
   </tabbox>
   <spacer class="spacer"/>
   <groupbox>
-    <label class="header">&options.label;</label>
+    <hbox class="groupbox-title">
+      <label class="header">&options.label;</label>
+    </hbox>
     <hbox>
       <radiogroup id="optionMode" oncommand="updateMode();">
         <radio label="&optionInline.label;"
                accesskey="&optionInline.accesskey;"/>
         <radio label="&optionDisplay.label;"
                accesskey="&optionDisplay.accesskey;"/>
       </radiogroup>
       <radiogroup id="optionDirection" oncommand="updateDirection();">
--- a/editor/ui/dialogs/content/EdInsertTOC.xul
+++ b/editor/ui/dialogs/content/EdInsertTOC.xul
@@ -19,17 +19,20 @@
   <script src="chrome://editor/content/editorUtilities.js"/>
 
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdInsertTOC.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
   <spacer id="dummy" style="display:none"/>
   <vbox flex="1">
-    <groupbox><label class="header">&buildToc.label;</label>
+    <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header">&buildToc.label;</label>
+    </hbox>
       <grid>
         <columns><column/><column style="min-width: 6em"/><column/></columns>
         <rows>
           <row align="center">
             <spacer/>
             <label value="&tag.label;"/>
             <label value="&class.label;"/>
           </row>
--- a/editor/ui/dialogs/content/EdInsertTable.xul
+++ b/editor/ui/dialogs/content/EdInsertTable.xul
@@ -19,17 +19,20 @@
     onload = "Startup()">
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdInsertTable.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
-  <groupbox><label class="header">&size.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header">&size.label;</label>
+    </hbox>
     <grid>
       <columns>
         <column flex="1"/>
         <column flex="1"/>
         <column flex="6"/>
       </columns>
       <rows>
         <row align="center">
--- a/editor/ui/dialogs/content/EdLabelProps.xul
+++ b/editor/ui/dialogs/content/EdLabelProps.xul
@@ -20,17 +20,20 @@
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdLabelProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox><label class="header" accesskey="&Settings.accesskey;">&Settings.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header" accesskey="&Settings.accesskey;">&Settings.label;</label>
+    </hbox>
     <grid><columns><column/><column/></columns>
       <rows>
         <row align="center">
           <checkbox id="EditText" label="&EditLabelText.label;" accesskey="&EditLabelText.accesskey;" checked="true" disabled="true"
             oncommand="gDialog.labelText.disabled = !gDialog.editText.checked;"/>
           <textbox id="LabelText" accesskey="&Settings.accesskey;"/>
         </row>
         <row align="center">
--- a/editor/ui/dialogs/content/EdLinkProps.xul
+++ b/editor/ui/dialogs/content/EdLinkProps.xul
@@ -23,24 +23,30 @@
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdLinkProps.js"/>
   <script src="chrome://editor/content/EdImageLinkLoader.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
   <vbox style="min-width: 20em">
-    <groupbox><label id="linkTextCaption" class="header"/>
+    <groupbox>
+      <hbox class="groupbox-title">
+        <label id="linkTextCaption" class="header"/>
+      </hbox>
       <vbox>
         <label id="linkTextMessage" control="linkTextInput"/>
         <textbox id="linkTextInput"/>
       </vbox>
     </groupbox>
 
-    <groupbox id="LinkURLBox"><label class="header">&LinkURLBox.label;</label>
+    <groupbox id="LinkURLBox">
+      <hbox class="groupbox-title">
+        <label class="header">&LinkURLBox.label;</label>
+      </hbox>
       <vbox id="LinkLocationBox">
         <label control="hrefInput"
                accesskey="&LinkURLEditField2.accessKey;"
                width="1">&LinkURLEditField2.label;</label>
         <textbox id="hrefInput" type="text"
                  class="uri-element padded" oninput="ChangeLinkLocation();"/>
         <hbox align="center">
           <checkbox id="MakeRelativeLink"
--- a/editor/ui/dialogs/content/EdListProps.xul
+++ b/editor/ui/dialogs/content/EdListProps.xul
@@ -19,32 +19,38 @@
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdListProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox flex="1"><label class="header">&ListType.label;</label>
+  <groupbox flex="1">
+    <hbox class="groupbox-title">
+      <label class="header">&ListType.label;</label>
+    </hbox>
     <menulist id="ListType" oncommand="SelectListType()">
       <menupopup>
         <menuitem label="&none.value;"/>
         <menuitem value="ul" label="&bulletList.value;"/>
         <menuitem value="ol" label="&numberList.value;"/>
         <menuitem value="dl" label="&definitionList.value;"/>
       </menupopup>
     </menulist>
   </groupbox>
   <spacer class="spacer"/>
 
   <!-- message text and list items are set in JS
        text value should be identical to string with id=BulletStyle in editor.properties
   -->
-  <groupbox flex="1"><label id="BulletStyleLabel" class="header">&bulletStyle.label;</label>
+  <groupbox flex="1">
+    <hbox class="groupbox-title">
+      <label id="BulletStyleLabel" class="header">&bulletStyle.label;</label>
+    </hbox>
     <menulist class="MinWidth10em" id="BulletStyle" oncommand="SelectBulletStyle()">
       <menupopup/>
     </menulist>
     <spacer class="spacer"/>
     <hbox>
       <label id="StartingNumberLabel" control="StartingNumber"
              value="&startingNumber.label;" accesskey="&startingNumber.accessKey;"/>
       <textbox class="narrow" id="StartingNumber"/>
--- a/editor/ui/dialogs/content/EdSelectProps.xul
+++ b/editor/ui/dialogs/content/EdSelectProps.xul
@@ -35,17 +35,20 @@
         <treecol id="SelectSelCol" label="&SelectedHeader.label;" cycler="true"/>
       </treecols>
 
       <treechildren id="SelectTreeChildren"/>
     </tree>
 
     <hbox flex="1">
       <deck flex="1" id="SelectDeck" index="0">
-        <groupbox flex="1"><label class="header">&Select.label;</label>
+        <groupbox flex="1">
+          <hbox class="groupbox-title">
+            <label class="header">&Select.label;</label>
+          </hbox>
           <grid flex="1"><columns><column flex="1"/><column/></columns>
             <rows>
               <row align="center">
                 <label control="SelectName" value="&SelectName.label;" accesskey="&SelectName.accesskey;"/>
                 <textbox id="SelectName" flex="1" oninput="onNameInput();"/>
               </row>
               <row align="center">
                 <label control="SelectSize" value="&SelectSize.label;" accesskey="&SelectSize.accesskey;"/>
@@ -66,32 +69,38 @@
                 <hbox>
                   <textbox id="SelectTabIndex" class="narrow" oninput="forceInteger(this.id);"/>
                 </hbox>
               </row>
             </rows>
           </grid>
         </groupbox>
 
-        <groupbox flex="1"><label class="header">&OptGroup.label;</label>
+        <groupbox flex="1">
+          <hbox class="groupbox-title">
+            <label class="header">&OptGroup.label;</label>
+          </hbox>
           <grid flex="1"><columns><column flex="1"/><column/></columns>
             <rows>
               <row align="center">
                 <label control="OptGroupLabel" value="&OptGroupLabel.label;" accesskey="&OptGroupLabel.accesskey;"/>
                 <textbox id="OptGroupLabel" oninput="onLabelInput();"/>
               </row>
               <row>
                 <spacer/>
                 <checkbox id="OptGroupDisabled" label="&OptGroupDisabled.label;" accesskey="&OptGroupDisabled.accesskey;"/>
               </row>
             </rows>
           </grid>
         </groupbox>
 
-        <groupbox flex="1"><label class="header">&Option.label;</label>
+        <groupbox flex="1">
+          <hbox class="groupbox-title">
+            <label class="header">&Option.label;</label>
+          </hbox>
           <grid flex="1"><columns><column flex="1"/><column/></columns>
             <rows>
               <row align="center">
                 <label control="OptionText" value="&OptionText.label;" accesskey="&OptionText.accesskey;"/>
                 <textbox id="OptionText" oninput="onTextInput();"/>
               </row>
               <row align="center">
                 <checkbox id="OptionHasValue" label="&OptionValue.label;" accesskey="&OptionValue.accesskey;" oncommand="onHasValueClick();"/>
--- a/editor/ui/dialogs/content/EdTableProps.xul
+++ b/editor/ui/dialogs/content/EdTableProps.xul
@@ -34,17 +34,20 @@
     <tabs flex="1">
       <tab id="TableTab" label="&tableTab.label;"/>
       <tab id="CellTab" label="&cellTab.label;"/>
     </tabs>
     <tabpanels>
 
       <!-- TABLE PANEL -->
       <vbox>
-        <groupbox orient="horizontal"><label class="header">&size.label;</label>
+        <groupbox orient="horizontal">
+          <hbox class="groupbox-title">
+            <label class="header">&size.label;</label>
+          </hbox>
           <grid>
             <columns><column/><column/><column/><column/><column/></columns>
               <rows>
                 <row align="center">
                   <label value="&tableRows.label;" accesskey="&tableRows.accessKey;" control="TableRowsInput"/>
                   <textbox class="narrow" id="TableRowsInput" oninput="forceInteger(this.id);"/>
                   <spring class="bigspacer"/>
                   <label value="&tableHeight.label;" accesskey="&tableHeight.accessKey;"
@@ -59,17 +62,20 @@
                 <label value="&tableWidth.label;" accesskey="&tableWidth.accessKey;" control="TableWidthInput"/>
                 <textbox class="narrow" id="TableWidthInput" oninput="forceInteger(this.id);"/>
                 <menulist id="TableWidthUnits"/>
               </row>
             </rows>
             <!-- KEEP GRID LAYOUT here since we will be adding back support for table HEIGHT via CSS -->
           </grid>
         </groupbox>
-        <groupbox><label class="header">&tableBorderSpacing.label;</label>
+        <groupbox>
+          <hbox class="groupbox-title">
+            <label class="header">&tableBorderSpacing.label;</label>
+          </hbox>
         <grid>
           <columns><column/><column/><column/></columns>
           <rows>
             <row align="center">
               <label control="BorderWidthInput"
                      value="&tableBorderWidth.label;"
                      accesskey="&tableBorderWidth.accessKey;"/>
               <textbox class="narrow" id="BorderWidthInput" oninput="forceInteger(this.id);"/>
@@ -137,17 +143,19 @@
             tooltiptext="&AdvancedEditButton.tooltip;"/>
         </hbox>
         <spacer flex="1"/>
       </vbox><!-- Table Panel -->
 
       <!-- CELL PANEL -->
       <vbox>
         <groupbox orient="horizontal" align="center">
-          <label class="header">&cellSelection.label;</label>
+          <hbox class="groupbox-title">
+            <label class="header">&cellSelection.label;</label>
+          </hbox>
           <vbox>
             <menulist id="SelectionList" oncommand="ChangeSelection(event.target.value)" flex="1">
               <menupopup>
                 <!-- JS code assumes order is Cell, Row, Column -->
                 <menuitem label="&cellSelectCell.label;"   value="1"/>
                 <menuitem label="&cellSelectRow.label;"    value="2"/>
                 <menuitem label="&cellSelectColumn.label;" value="3"/>
               </menupopup>
@@ -174,17 +182,20 @@
               </button>
             </hbox>
           </vbox>
           <spacer class="bigspacer"/>
             <description class="wrap" flex="1">&applyBeforeChange.label;</description>
         </groupbox>
         <hbox align="center">
           <!-- cell size groupbox -->
-          <groupbox><label class="header">&size.label;</label>
+          <groupbox>
+            <hbox class="groupbox-title">
+              <label class="header">&size.label;</label>
+            </hbox>
             <grid>
               <columns><column/><column/><column flex="1"/></columns>
               <rows>
                 <row align="center">
                   <checkbox id="CellHeightCheckbox" label="&tableHeight.label;" accesskey="&tableHeight.accessKey;"/>
                   <textbox class="narrow" id="CellHeightInput"
                            oninput="ChangeIntTextbox(this.id, 'CellHeightCheckbox');"/>
                   <menulist id="CellHeightUnits" oncommand="SetCheckbox('CellHeightCheckbox');"/>
@@ -195,17 +206,20 @@
                            oninput="ChangeIntTextbox(this.id, 'CellWidthCheckbox');"/>
                   <menulist id="CellWidthUnits" oncommand="SetCheckbox('CellWidthCheckbox');"/>
                 </row>
               </rows>
             </grid>
             <spacer class="bigspacer"/>
           </groupbox>
           <!-- Alignment -->
-          <groupbox><label class="header">&cellContentAlignment.label;</label>
+          <groupbox>
+            <hbox class="groupbox-title">
+              <label class="header">&cellContentAlignment.label;</label>
+            </hbox>
             <grid>
               <columns><column/><column flex="1"/><column/></columns>
               <rows>
                 <row align="center">
                   <checkbox id="CellVAlignCheckbox" label="&cellVertical.label;" accesskey="&cellVertical.accessKey;"/>
                   <menulist id="CellVAlignList" oncommand="SetCheckbox('CellVAlignCheckbox');">
                     <menupopup>
                       <menuitem label="&cellAlignTop.label;"    value="top"/>
--- a/editor/ui/dialogs/content/EdTextAreaProps.xul
+++ b/editor/ui/dialogs/content/EdTextAreaProps.xul
@@ -21,17 +21,20 @@
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://editor/content/editorUtilities.js"/>
   <script src="chrome://editor/content/EdDialogCommon.js"/>
   <script src="chrome://editor/content/EdTextAreaProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox><label class="header">&Settings.label;</label>
+  <groupbox>
+    <hbox class="groupbox-title">
+      <label class="header">&Settings.label;</label>
+    </hbox>
     <grid><columns><column/><column/></columns>
       <rows>
         <row align="center">
           <label control="TextAreaName" value="&TextAreaName.label;" accesskey="&TextAreaName.accessKey;"/>
           <textbox id="TextAreaName" oninput="onInput();"/>
         </row>
         <row align="center">
           <label control="TextAreaRows" value="&TextAreaRows.label;" accesskey="&TextAreaRows.accessKey;"/>
--- a/editor/ui/dialogs/content/EditorSaveAsCharset.xul
+++ b/editor/ui/dialogs/content/EditorSaveAsCharset.xul
@@ -15,23 +15,28 @@
 
     <script src="chrome://editor/content/editorUtilities.js"/>
     <script src="chrome://editor/content/EdDialogCommon.js"/>
     <script src="chrome://editor/content/EditorSaveAsCharset.js"/>
 
     <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
     <groupbox>
+      <hbox class="groupbox-title">
         <label class="header">&documentTitleTitle.label;</label>
+      </hbox>
         <label id="EnterTitleLabel"/>
         <textbox id="TitleInput" oninput="TitleChanged();"/>
         <description id="TitleHelp" class="wrap" style="width:1em" />
     </groupbox>
 
-    <groupbox flex="1"><label class="header">&documentCharsetTitle2.label;</label>
+    <groupbox flex="1">
+      <hbox class="groupbox-title">
+        <label class="header">&documentCharsetTitle2.label;</label>
+      </hbox>
         <label value="&documentCharsetDesc2.label;"/>
         <tree id="CharsetTree" rows="8" hidecolumnpicker="true" onselect="SelectCharset();">
             <treecols>
                 <treecol id="CharsetCol" flex="1" hideheader="true"/>
             </treecols>
             <treechildren/>
         </tree>
     </groupbox>
--- a/editor/ui/dialogs/content/edImage.inc.xul
+++ b/editor/ui/dialogs/content/edImage.inc.xul
@@ -143,17 +143,19 @@
             </row>
           </rows>
         </grid>
         <spacer flex="1"/>
       </vbox>
 
       <hbox id="imageAppearance">
         <groupbox>
-          <label id="spacingLabel" class="header">&spacingBox.label;</label>
+          <hbox class="groupbox-title">
+            <label id="spacingLabel" class="header">&spacingBox.label;</label>
+          </hbox>
           <grid>
             <columns><column/><column/><column/></columns>
             <rows>
               <row align="center">
                 <label
                   class = "align-right"
                   id    = "leftrightLabel"
                   control = "imageleftrightInput"
@@ -197,17 +199,19 @@
                        value="&pixelsPopup.value;" />
               </row>
             </rows>
           </grid>
         </groupbox>
 
         <vbox>
           <groupbox align="start">
-            <label id="alignLabel" class="header">&alignment.label;</label>
+            <hbox class="groupbox-title">
+              <label id="alignLabel" class="header">&alignment.label;</label>
+            </hbox>
             <menulist id="alignTypeSelect" class="align-menu">
               <menupopup>
                 <menuitem class="align-menu menuitem-iconic"
                           value="top"
                           label="&topPopup.value;"/>
                 <menuitem class="align-menu menuitem-iconic"
                           value="middle"
                           label="&centerPopup.value;"/>
@@ -221,17 +225,19 @@
                 <menuitem class="align-menu menuitem-iconic"
                           value="left"
                           label="&wrapRightPopup.value;"/>
               </menupopup>
             </menulist>
           </groupbox>
 
           <groupbox>
-            <label id="imagemapLabel" class="header">&imagemapBox.label;</label>
+            <hbox class="groupbox-title">
+              <label id="imagemapLabel" class="header">&imagemapBox.label;</label>
+            </hbox>
             <hbox equalsize="always">
             <button id="removeImageMap"
                     oncommand="removeImageMap()"
                     accesskey="&removeImageMapButton.accessKey;"
                     label="&removeImageMapButton.label;"
                     flex="1"/>
             <spacer flex="1"/><!-- remove when we restore Image Map Editor -->
             </hbox>
--- a/mail/components/im/content/am-im.xul
+++ b/mail/components/im/content/am-im.xul
@@ -68,17 +68,16 @@
             <vbox>
               <label value="&account.autojoin;" control="server.autojoin" flex="1"/>
               <textbox id="server.autojoin" flex="1" preftype="wstring" genericattr="true"/>
             </vbox>
             <separator class="thin"/>
           </vbox>
           <vbox id="advanced">
             <label class="header">&account.advanced;</label>
-            <caption label="&account.advanced;"/>
             <vbox id="protoSpecific" flex="1"/>
           </vbox>
         </tabpanel>
 
         <tabpanel orient="vertical">
           <label class="header" data-l10n-id="account-otr-label" />
           <description data-l10n-id="account-otr-description" />
 
--- a/mail/components/im/content/imAccountWizard.js
+++ b/mail/components/im/content/imAccountWizard.js
@@ -192,17 +192,17 @@ var accountWizard = {
   },
 
   populateProtoSpecificBox() {
     let haveOptions =
       accountOptionsHelper.addOptions(this.proto.id + "-", this.getProtoOptions());
     document.getElementById("protoSpecificGroupbox").hidden = !haveOptions;
     if (haveOptions) {
       var bundle = document.getElementById("accountsBundle");
-      document.getElementById("protoSpecificCaption").label =
+      document.getElementById("protoSpecificCaption").value =
         bundle.getFormattedString("protoOptions", [this.proto.name]);
     }
   },
 
   createSummaryRow(aLabel, aValue) {
     var hbox = document.createXULElement("hbox");
     hbox.setAttribute("align", "baseline");
     hbox.setAttribute("equalsize", "always");
@@ -382,40 +382,16 @@ var accountWizard = {
   },
   getProtoOptions() {
     return this.getIter(this.proto.getOptions());
   },
   getProtoUserSplits() {
     return this.getIter(this.proto.getUsernameSplit());
   },
 
-  onGroupboxKeypress(aEvent) {
-    var target = aEvent.target;
-    var code = aEvent.charCode || aEvent.keyCode;
-    if (code == KeyEvent.DOM_VK_SPACE ||
-        (code == KeyEvent.DOM_VK_LEFT && !target.hasAttribute("closed")) ||
-        (code == KeyEvent.DOM_VK_RIGHT && target.hasAttribute("closed")))
-        this.toggleGroupbox(target.id);
-  },
-
-  toggleGroupbox(id) {
-    var elt = document.getElementById(id);
-    if (elt.hasAttribute("closed")) {
-      elt.removeAttribute("closed");
-      if (elt.flexWhenOpened)
-        elt.flex = elt.flexWhenOpened;
-    } else {
-      elt.setAttribute("closed", "true");
-      if (elt.flex) {
-        elt.flexWhenOpened = elt.flex;
-        elt.flex = 0;
-      }
-    }
-  },
-
   /* Check for correctness and set URL for the "Get more protocols..."-link
    *  Stripped down code from preferences/themes.js
    */
   setGetMoreProtocols() {
     let prefURL = PREF_EXTENSIONS_GETMOREPROTOCOLSURL;
     var getMore = document.getElementById("getMoreProtocols");
     var showGetMore = false;
     const nsIPrefBranch = Ci.nsIPrefBranch;
--- a/mail/components/im/content/imAccountWizard.xul
+++ b/mail/components/im/content/imAccountWizard.xul
@@ -1,16 +1,16 @@
 <?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/. -->
 
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://messenger/content/bindings.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/messenger.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/imAccountWizard.css" type="text/css"?>
 
 <!DOCTYPE wizard [
   <!ENTITY % accountWizardDTD SYSTEM "chrome://messenger/locale/imAccountWizard.dtd">
   <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
   %accountWizardDTD;
   %brandDTD;
 ]>
@@ -59,34 +59,34 @@
     <separator/>
     <description id="passwordManagerDescription">&accountPasswordManager.label;</description>
   </wizardpage>
 
   <wizardpage id="accountadvanced" pageid="accountadvanced" next="accountsummary"
               label="&accountAdvancedTitle.label;">
     <description>&accountAdvancedInfo.label;</description>
     <separator class="thin"/>
-    <groupbox id="aliasGroupbox" class="collapsable"
-              onkeypress="accountWizard.onGroupboxKeypress(event)">
-      <caption id="aliasGroupboxCaption" label="&accountAliasGroupbox.caption;"
-               onclick="accountWizard.toggleGroupbox('aliasGroupbox')"/>
+    <groupbox id="aliasGroupbox">
+      <hbox class="groupbox-title">
+        <label id="aliasGroupboxCaption" class="header">&accountAliasGroupbox.caption;</label>
+      </hbox>
       <hbox id="aliasBox" align="baseline">
         <label value="&accountAliasField.label;" control="alias" id="aliasLabel"/>
         <textbox id="alias"/>
       </hbox>
       <description>&accountAliasInfo.label;</description>
     </groupbox>
 
     <checkbox id="newMailNotification"
               label="&accountAdvanced.newMailNotification.label;" hidden="true"/>
 
-    <groupbox id="protoSpecificGroupbox" class="collapsable" closed="true"
-              onkeypress="accountWizard.onGroupboxKeypress(event)">
-      <caption id="protoSpecificCaption"
-               onclick="accountWizard.toggleGroupbox('protoSpecificGroupbox')"/>
+    <groupbox id="protoSpecificGroupbox">
+      <hbox class="groupbox-title">
+        <label id="protoSpecificCaption" class="header"/>
+      </hbox>
       <vbox id="protoSpecific" flex="1"/>
     </groupbox>
   </wizardpage>
 
   <wizardpage id="accountsummary" pageid="accountsummary"
               label="&accountSummaryTitle.label;">
     <description>&accountSummaryInfo.label;</description>
     <separator/>
--- a/mail/components/im/themes/imAccountWizard.css
+++ b/mail/components/im/themes/imAccountWizard.css
@@ -10,59 +10,16 @@
 #accountsummary {
   overflow: visible;
 }
 
 #summarygrid {
   overflow: auto;
 }
 
-.collapsable {
-  -moz-user-focus: normal;
-}
-
-%ifdef XP_WIN
-.caption-text {
-  border: 1px solid transparent;
-}
-
-.collapsable:focus .caption-text {
-  border: 1px dotted ThreeDDarkShadow;
-}
-%endif
-
-.collapsable[closed="true"] {
-  border: none;
-  -moz-appearance: none;
-}
-
-.collapsable[closed="true"] > .groupbox-body {
-  display: none;
-}
-
-.caption-icon {
-  width: 8px;
-  height: 8px;
-  background-repeat: no-repeat;
-  background-position: center;
-  margin-inline-start: 1px;
-  margin-inline-end: 3px;
-  background-image: url("chrome://global/skin/icons/twisty-expanded.svg");
-  -moz-context-properties: fill;
-  fill: currentColor;
-}
-
-.collapsable[closed="true"] .caption-icon {
-  background-image: url("chrome://global/skin/icons/twisty-collapsed.svg");
-}
-
-.collapsable[closed="true"] .caption-icon:-moz-locale-dir(rtl) {
-  background-image: url("chrome://global/skin/icons/twisty-collapsed-rtl.svg");
-}
-
 #value-column {
   min-width: 15em;
 }
 
 %ifdef XP_WIN
 textbox html|*.textbox-input::placeholder {
   font-style: normal;
 }
--- a/mail/themes/linux/editor/EditorDialog.css
+++ b/mail/themes/linux/editor/EditorDialog.css
@@ -290,13 +290,8 @@ tree.list {
 
 /* ::::: groupbox ::::: */
 
 groupbox {
   -moz-appearance: groupbox;
   margin: 5px;
   padding: 5px;
 }
-
-caption {
-  margin-bottom: 2px;
-  font-weight: bold;
-}
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -843,13 +843,8 @@ findbar {
 
 /* ::::: groupbox ::::: */
 
 groupbox {
   -moz-appearance: groupbox;
   margin: 5px;
   padding: 5px;
 }
-
-caption {
-  margin-bottom: 2px;
-  font-weight: bold;
-}
--- a/mail/themes/osx/editor/EditorDialog.css
+++ b/mail/themes/osx/editor/EditorDialog.css
@@ -288,15 +288,18 @@ tree.list {
 }
 
 /* ::::: groupbox ::::: */
 
 groupbox {
   -moz-appearance: groupbox;
   padding: 0 8px 5px;
   margin: 6px;
+  margin-top: 1.5em;
 }
 
-caption {
-  padding-bottom: 5px;
-  font: caption;
-  font-weight: bold;
+groupbox > .groupbox-title > .header {
+  font-size: 1.18em;
+  font-weight: normal;
+  margin-top: -1.3em;
+  margin-bottom: 5px;
+  margin-inline-start: -5px;
 }
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -739,15 +739,19 @@ findbar {
 }
 
 /* ::::: groupbox ::::: */
 
 groupbox {
   -moz-appearance: groupbox;
   padding: 0 8px 5px;
   margin: 6px;
+  margin-top: 1.5em;
 }
 
-caption {
-  padding-bottom: 5px;
-  font: caption;
-  font-weight: bold;
+groupbox > .groupbox-title > .header {
+  font-size: 1.18em;
+  font-weight: normal;
+  margin-top: -1.3em;
+  margin-bottom: 5px;
+  margin-inline-start: -5px;
 }
+
--- a/mail/themes/windows/editor/EditorDialog.css
+++ b/mail/themes/windows/editor/EditorDialog.css
@@ -2,21 +2,28 @@
  * 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.w3.org/1999/xhtml");
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* The defaults are WAY to big! */
 groupbox {
-  margin:         2px 5px;
-  padding-top:    2px;
+  margin: 1em 5px 2px;
+  padding-top: 2px;
   padding-bottom: 4px;
 }
 
+groupbox > hbox > .header {
+  margin-top: -1em;
+  padding-right: 5px;
+  padding-left: 5px;
+  background-color: -moz-dialog;
+}
+
 .MinWidth5em {
   min-width: 5em;
 }
 
 .MinWidth10em {
   min-width: 10em;
 }
 
@@ -302,18 +309,21 @@ tree.list {
   padding-bottom: 0;
   border-top-color: #d7d7d7;
 }
 
 /* ::::: groupbox ::::: */
 
 groupbox {
   -moz-appearance: groupbox;
-  border: 2px groove ThreeDFace;
-  border-radius: 3px;
   margin: 3px;
-  padding: 3px 3px 6px;
+  margin-top: 1em;
+  padding: 3px 0 6px;
 }
 
-caption {
-  margin: -5px 6px 6px;
-  font-weight: bold;
+groupbox > .groupbox-title > .header {
+  font-weight: normal;
+  margin-top: -1em;
+  margin-inline-start: 3px;
+  padding-right: 3px;
+  padding-left: 3px;
+  background-color: -moz-dialog;
 }
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -898,19 +898,20 @@ findbar {
   color: var(--toolbar-color);
 }
 
 /* ::::: groupbox ::::: */
 
 groupbox {
   -moz-appearance: groupbox;
   margin: 3px;
-  padding: 3px 3px 6px;
+  margin-top: 1em;
+  padding: 3px 0 6px;
 }
 
-caption {
-  margin: -5px 6px 6px;
-  font-weight: bold;
+groupbox > .groupbox-title > .header {
+  font-weight: normal;
+  margin-top: -1em;
+  margin-inline-start: 3px;
+  padding-right: 3px;
+  padding-left: 3px;
+  background-color: -moz-dialog;
 }
-
-tabpanels caption {
-  -moz-appearance: tabpanel;
-}