Bug 1612776 - Remove usages of `display: -moz-groupbox` and `-moz-appearance: groupbox`, convert xul:groupbox to html:fieldset (port bug 1590180 to Thunderbird). r=khushil,pmorris
authorMagnus Melin <mkmelin+mozilla@iki.fi>
Thu, 13 Feb 2020 21:52:32 +0200
changeset 28758 b55b6873476a54a0712ddff905bd45e52ffbcf35
parent 28757 cd29db7dc1055c7b6db7d571cb3b49c0ffe5e0be
child 28759 0dc699fa42c68a8fb115a9fb61509fd3d7f4bb25
push id17022
push usermkmelin@iki.fi
push dateThu, 13 Feb 2020 20:08:51 +0000
treeherdercomm-central@b55b6873476a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerskhushil, pmorris
bugs1612776, 1590180
Bug 1612776 - Remove usages of `display: -moz-groupbox` and `-moz-appearance: groupbox`, convert xul:groupbox to html:fieldset (port bug 1590180 to Thunderbird). r=khushil,pmorris Lots of manual changes, and grep -rl "<groupbox" --exclude-dir=.hg --exclude-dir=suite --exclude-dir=editor . | xargs sed -E -i "s/<groupbox/<html:fieldset/g" grep -rl "</groupbox" --exclude-dir=.hg --exclude-dir=suite --exclude-dir=editor . | xargs sed -E -i "s#</groupbox#</html:fieldset#g" grep -rEl "<label><html:h2>.*</html:h2></label>" --exclude-dir=.hg --exclude-dir=suite --exclude-dir=editor --include="*.xhtml" --exclude=".*" . | xargs sed -E -i "s#<label><html:h2>(.*)</html:h2></label>#<html:legend>\1</html:legend>#g"
calendar/base/content/dialogs/calendar-event-dialog-recurrence.xhtml
calendar/base/content/dialogs/calendar-print-dialog.xhtml
calendar/base/content/preferences/alarms.inc.xhtml
calendar/base/content/preferences/categories.inc.xhtml
calendar/base/content/preferences/general.inc.xhtml
calendar/base/content/preferences/views.inc.xhtml
chat/content/otr-auth.xhtml
mail/components/accountcreation/content/emailWizard.xhtml
mail/components/compose/content/dialogs/EdColorProps.xhtml
mail/components/compose/content/dialogs/EdHLineProps.xhtml
mail/components/compose/content/dialogs/EdImageDialog.js
mail/components/compose/content/dialogs/EdImageProps.xhtml
mail/components/compose/content/dialogs/EdInsertChars.xhtml
mail/components/compose/content/dialogs/EdInsertMath.xhtml
mail/components/compose/content/dialogs/EdInsertTOC.xhtml
mail/components/compose/content/dialogs/EdInsertTable.xhtml
mail/components/compose/content/dialogs/EdLinkProps.xhtml
mail/components/compose/content/dialogs/EdListProps.js
mail/components/compose/content/dialogs/EdListProps.xhtml
mail/components/compose/content/dialogs/EdTableProps.xhtml
mail/components/compose/content/dialogs/edImage.inc.xhtml
mail/components/im/content/am-im.xhtml
mail/components/im/content/imAccountWizard.js
mail/components/im/content/imAccountWizard.xhtml
mail/components/preferences/aboutPreferences.xhtml
mail/components/preferences/attachmentReminder.xhtml
mail/components/preferences/chat.inc.xhtml
mail/components/preferences/colors.xhtml
mail/components/preferences/compose.inc.xhtml
mail/components/preferences/connection.xhtml
mail/components/preferences/dockoptions.xhtml
mail/components/preferences/fonts.xhtml
mail/components/preferences/general.inc.xhtml
mail/components/preferences/privacy.inc.xhtml
mail/components/preferences/sendoptions.xhtml
mail/themes/linux/mail/messenger.css
mail/themes/osx/mail/messenger.css
mail/themes/shared/mail/EditorDialog.css
mail/themes/shared/mail/accountManage.css
mail/themes/shared/mail/incontentprefs/preferences.css
mail/themes/windows/mail/messenger.css
mailnews/base/content/folderProps.xhtml
mailnews/base/prefs/content/SmtpServerEdit.xhtml
mailnews/base/prefs/content/am-addressing.inc.xhtml
mailnews/base/prefs/content/am-archiveoptions.xhtml
mailnews/base/prefs/content/am-copies.inc.xhtml
mailnews/base/prefs/content/am-identity-edit.xhtml
mailnews/base/prefs/content/am-junk.xhtml
mailnews/base/prefs/content/am-main.xhtml
mailnews/base/prefs/content/am-offline.xhtml
mailnews/base/prefs/content/am-server.xhtml
mailnews/base/prefs/content/am-serverwithnoidentities.xhtml
mailnews/base/search/content/FilterEditor.xhtml
mailnews/extensions/dsn/content/am-dsn.xhtml
mailnews/extensions/mdn/content/am-mdn.xhtml
mailnews/extensions/newsblog/content/am-newsblog.xhtml
mailnews/extensions/smime/content/am-smime.inc.xhtml
mailnews/import/content/importDialog.xhtml
--- a/calendar/base/content/dialogs/calendar-event-dialog-recurrence.xhtml
+++ b/calendar/base/content/dialogs/calendar-event-dialog-recurrence.xhtml
@@ -30,20 +30,18 @@
   <script src="chrome://calendar/content/calendar-ui-utils.js"/>
   <script src="chrome://calendar/content/calendar-statusbar.js"/>
 
   <script src="chrome://calendar/content/widgets/calendar-minimonth.js"/>
   <script src="chrome://calendar/content/datetimepickers/datetimepickers.js"/>
   <script src="chrome://calendar/content/calendar-daypicker.js"/>
 
   <!-- recurrence pattern -->
-  <groupbox id="recurrence-pattern-groupbox">
-    <hbox class="groupbox-title">
-      <label id="recurrence-pattern-caption" class="header">&event.recurrence.pattern.label;</label>
-    </hbox>
+  <html:fieldset id="recurrence-pattern-groupbox">
+    <html:legend id="recurrence-pattern-caption">&event.recurrence.pattern.label;</html:legend>
     <hbox flex="1" id="recurrence-pattern-hbox">
       <vbox>
         <label value="&event.recurrence.occurs.label;"
                class="recurrence-pattern-hbox-label"
                disable-on-readonly="true"
                disable-on-occurrence="true"
                control="period-list"/>
       </vbox>
@@ -485,23 +483,21 @@
                   </vbox>
                 </hbox>
               </vbox>
             </radiogroup>
           </box>
         </deck>
       </vbox>
     </hbox>
-  </groupbox>
+  </html:fieldset>
 
   <!-- range of recurrence -->
-  <groupbox id="recurrence-range-groupbox">
-    <hbox class="groupbox-title">
-      <label id="recurrence-range-caption" class="header">&event.recurrence.range.label;</label>
-    </hbox>
+  <html:fieldset id="recurrence-range-groupbox">
+    <html:legend id="recurrence-range-caption">&event.recurrence.range.label;</html:legend>
     <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"
@@ -536,28 +532,26 @@
                  control="repeat-until-date"/>
           <datepicker id="repeat-until-date"
                       onchange="checkUntilDate();"
                       disable-on-readonly="true"
                       disable-on-occurrence="true"/>
         </box>
       </radiogroup>
     </vbox>
-  </groupbox>
+  </html:fieldset>
 
   <!-- preview -->
-  <groupbox id="preview-border" flex="1">
-    <hbox class="groupbox-title">
-      <label id="recurrence-preview-label" class="header">&event.recurrence.preview.label;</label>
-    </hbox>
+  <html:fieldset id="preview-border">
+    <html:legend id="recurrence-preview-label">&event.recurrence.preview.label;</html:legend>
     <box id="recurrence-preview" flex="1">
       <vbox>
         <hbox>
             <calendar-minimonth readonly="true"/>
             <calendar-minimonth readonly="true"/>
             <calendar-minimonth readonly="true"/>
             <spacer/>
         </hbox>
       </vbox>
     </box>
-  </groupbox>
+  </html:fieldset>
 </dialog>
 </window>
--- a/calendar/base/content/dialogs/calendar-print-dialog.xhtml
+++ b/calendar/base/content/dialogs/calendar-print-dialog.xhtml
@@ -34,21 +34,18 @@
   <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/widgets/calendar-minimonth.js"/>
   <script src="chrome://calendar/content/datetimepickers/datetimepickers.js"/>
 
   <hbox id="firstHbox" flex="1">
     <vbox id="groupboxVbox">
-      <groupbox id="settingsGroup">
-        <hbox class="groupbox-title">
-          <label class="header">&calendar.print.settingsGroup.label;</label>
-        </hbox>
-
+      <html:fieldset id="settingsGroup">
+        <html:legend>&calendar.print.settingsGroup.label;</html:legend>
         <html:div class="grid-two-column">
           <html:div class="flex-items-center">
             <html:label for="title-field" class="html-label">
               &calendar.print.title.label;
             </html:label>
           </html:div>
           <html:div>
             <html:input id="title-field"
@@ -59,22 +56,20 @@
               &calendar.print.layout.label;
             </html:label>
           </html:div>
           <html:div>
             <html:select id="layout-field" onchange="refreshHtml();">
             </html:select>
           </html:div>
         </html:div>
-      </groupbox>
+      </html:fieldset>
 
-      <groupbox id="what-to-print-group">
-        <hbox class="groupbox-title">
-          <label class="header">&calendar.print.range.label;</label>
-        </hbox>
+      <html:fieldset id="what-to-print-group">
+        <html:legend>&calendar.print.range.label;</html:legend>
         <hbox>
           <checkbox id="events" label="&calendar.print.events.label;" checked="true"
                     oncommand="eventsAndTasksOptions(this.id); refreshHtml();" persist="checked" autocheck="false"/>
           <checkbox id="tasks" label="&calendar.print.tasks.label;" checked="true"
                     oncommand="eventsAndTasksOptions(this.id); refreshHtml();" persist="checked" autocheck="false"/>
         </hbox>
         <radiogroup id="view-field"
                     oncommand="refreshHtml();">
@@ -101,24 +96,24 @@
                 &calendar.print.to.label;
               </html:label>
             </html:div>
             <html:div>
               <datepicker id="end-date-picker"/>
             </html:div>
           </html:div>
         </radiogroup>
-      </groupbox>
-      <groupbox id="optionsGroup" label="&calendar.print.optionsGroup.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>
+      </html:fieldset>
+      <html:fieldset id="optionsGroup" label="&calendar.print.optionsGroup.label;">
+        <html:legend>&calendar.print.optionsGroup.label;</html:legend>
+        <vbox>
+          <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();"/>
+        </vbox>
+      </html:fieldset>
     </vbox>
 
     <splitter/>
 
     <iframe src="about:blank"
             id="content"
             flex="1"
             style="border: 2px solid #3c3c3c; width:30em; height:30em; background-color: white;"/>
--- a/calendar/base/content/preferences/alarms.inc.xhtml
+++ b/calendar/base/content/preferences/alarms.inc.xhtml
@@ -1,13 +1,13 @@
 # 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 data-category="paneCalendar">
-        <label><html:h2>&pref.alarmgoesoff.label;</html:h2></label>
+    <html:fieldset data-category="paneCalendar">
+        <html:legend>&pref.alarmgoesoff.label;</html:legend>
         <vbox id="alarm-sound-box">
             <hbox align="center">
                 <checkbox id="alarmSoundCheckbox"
                           preference="calendar.alarms.playsound"
                           label="&pref.playasound;"
                           accesskey="&pref.calendar.alarms.playsound.accessKey;"/>
                 <spacer flex="1"/>
                 <button id="calendar.prefs.alarm.sound.play"
@@ -54,20 +54,20 @@
                       accesskey="&pref.calendar.alarms.showAlarmBox.accessKey;"/>
         </hbox>
         <hbox align="center" flex="1">
             <checkbox id="missedalarms"
                       preference="calendar.alarms.showmissed"
                       label="&pref.missedalarms2;"
                       accesskey="&pref.calendar.alarms.missedAlarms.accessKey;"/>
         </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox data-category="paneCalendar">
-        <label><html:h2>&pref.calendar.alarms.defaults.label;</html:h2></label>
+    <html:fieldset data-category="paneCalendar">
+        <html:legend>&pref.calendar.alarms.defaults.label;</html:legend>
         <hbox align="center">
             <label value="&pref.defaultsnoozelength.label;"
                    accesskey="&pref.defaultsnoozelength.accesskey;"
                    control="defaultsnoozelength"/>
             <html:input id="defaultsnoozelength" type="number" class="size3"
                         min="0"
                         preference="calendar.alarms.defaultsnoozelength"
                         onselect="updateUnitLabelPlural('defaultsnoozelength', 'defaultsnoozelengthunit', 'minutes')"
@@ -180,9 +180,9 @@
                                 </menupopup>
                             </menulist>
                         </hbox>
                     </html:td>
                 </html:tr>
             </html:table>
             <spacer flex="1"/>
         </hbox>
-    </groupbox>
+    </html:fieldset>
--- a/calendar/base/content/preferences/categories.inc.xhtml
+++ b/calendar/base/content/preferences/categories.inc.xhtml
@@ -1,12 +1,12 @@
 # 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 data-category="paneCalendar">
+    <html:fieldset data-category="paneCalendar">
         <separator class="thin"/>
         <richlistbox id="categorieslist"
                      flex="1"
                      seltype="multiple"
                      onselect="gCategoriesPane.updateButtons()"
                      ondblclick="gCategoriesPane.listOnDblClick(event)"/>
         <hbox pack="end">
             <button label="&pref.categories.newButton.label;"
@@ -16,9 +16,9 @@
                     label="&pref.categories.editButton.label;"
                     accesskey="&pref.categories.editButton.accesskey;"
                     oncommand="gCategoriesPane.editCategory()"/>
             <button id="deleteCButton"
                     label="&pref.categories.removeButton.label;"
                     accesskey="&pref.categories.removeButton.accesskey;"
                     oncommand="gCategoriesPane.deleteCategory()"/>
         </hbox>
-    </groupbox>
+    </html:fieldset>
--- a/calendar/base/content/preferences/general.inc.xhtml
+++ b/calendar/base/content/preferences/general.inc.xhtml
@@ -1,13 +1,13 @@
 # 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 data-category="paneCalendar">
-        <label><html:h2>&pref.calendar.todaypane.agenda.caption;</html:h2></label>
+    <html:fieldset data-category="paneCalendar">
+        <html:legend>&pref.calendar.todaypane.agenda.caption;</html:legend>
         <hbox align="center">
             <label value="&pref.soondays2.label;"
                    accesskey="&pref.soondays2.accesskey;"
                    control="soondays-menulist"/>
             <menulist id="soondays-menulist"
                       preference="calendar.agendaListbox.soondays">
                 <menupopup id="soondaysdurationpopup">
                     <menuitem value="1"/>
@@ -18,20 +18,20 @@
                     <menuitem value="6"/>
                     <menuitem value="7"/>
                     <menuitem value="14"/>
                     <menuitem value="21"/>
                     <menuitem value="28"/>
                 </menupopup>
             </menulist>
         </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox id="defaults-itemtype-groupbox" data-category="paneCalendar">
-        <label><html:h2 id="defaults-itemtype-caption">&pref.eventsandtasks.label;</html:h2></label>
+    <html:fieldset id="defaults-itemtype-groupbox" data-category="paneCalendar">
+        <html:legend>&pref.eventsandtasks.label;</html:legend>
         <vbox id="defaults-itemtype-box">
             <hbox id="defaults-event-grid-box" align="center">
                 <label id="default-event-length-label"
                         value="&pref.default_event_task_length.label;"
                         accesskey="&pref.default_event_task_length.accesskey;"
                         control="defaultlength"/>
                 <html:input id="defaultlength" type="number"
                             class="size3"
@@ -161,19 +161,19 @@
             </html:table>
         </vbox>
         <hbox align="center">
             <checkbox id="tabedit" pack="end"
                       label="&pref.editInTab.label;"
                       accesskey="&pref.editInTab.accesskey;"
                       preference="calendar.item.editInTab"/>
         </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox id="systemColorsGroupbox" data-category="paneCalendar">
-        <label><html:h2>&pref.accessibility.label;</html:h2></label>
+    <html:fieldset id="systemColorsGroupbox" data-category="paneCalendar">
+        <html:legend>&pref.accessibility.label;</html:legend>
         <hbox align="center">
             <checkbox id="systemColors" pack="end"
                       label="&pref.systemcolors.label;"
                       accesskey="&pref.systemcolors.accesskey;"
                       preference="calendar.view.useSystemColors"/>
         </hbox>
-    </groupbox>
+    </html:fieldset>
--- a/calendar/base/content/preferences/views.inc.xhtml
+++ b/calendar/base/content/preferences/views.inc.xhtml
@@ -1,12 +1,12 @@
 # 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 data-category="paneCalendar">
+    <html:fieldset data-category="paneCalendar">
         <separator/>
         <hbox align="center">
           <label value="&pref.dateformat.label;"
                  accesskey="&pref.dateformat.accesskey;"
                  control="dateformat"/>
           <menulist id="dateformat" crop="none"
                     preference="calendar.date.format">
               <menupopup id="dateformatpopup">
@@ -102,27 +102,68 @@
                               class="dayOffCheckbox"
                               label="&day.7.Ddd;"
                               accesskey="&day.7.Ddd.accesskey;"
                               orient="vertical"
                               preference="calendar.week.d6saturdaysoff"/>
                 </hbox>
             </vbox>
         </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox data-category="paneCalendar">
-        <label><html:h2>&pref.calendar.view.dayandweekviews.caption;</html:h2></label>
+    <html:fieldset data-category="paneCalendar">
+        <html:legend>&pref.calendar.view.dayandweekviews.caption;</html:legend>
         <html:table id="dayAndWeekViewsTable">
             <html:tr>
+                <html:th>
+                   <label value="&pref.calendar.view.visiblehours.label;"
+                           accesskey="&pref.calendar.view.visiblehours.accesskey;"
+                           control="visiblehours"/>
+                </html:th>
                 <html:td>
+                    <hbox align="center">
+                    <menulist id="visiblehours"
+                              preference="calendar.view.visiblehours">
+                        <menupopup id="visiblehourspopup">
+                            <menuitem label="1"  value="1"/>
+                            <menuitem label="2"  value="2"/>
+                            <menuitem label="3"  value="3"/>
+                            <menuitem label="4"  value="4"/>
+                            <menuitem label="5"  value="5"/>
+                            <menuitem label="6"  value="6"/>
+                            <menuitem label="7"  value="7"/>
+                            <menuitem label="8"  value="8"/>
+                            <menuitem label="9"  value="9"/>
+                            <menuitem label="10" value="10"/>
+                            <menuitem label="11" value="11"/>
+                            <menuitem label="12" value="12"/>
+                            <menuitem label="13" value="13"/>
+                            <menuitem label="14" value="14"/>
+                            <menuitem label="15" value="15"/>
+                            <menuitem label="16" value="16"/>
+                            <menuitem label="17" value="17"/>
+                            <menuitem label="18" value="18"/>
+                            <menuitem label="19" value="19"/>
+                            <menuitem label="20" value="20"/>
+                            <menuitem label="21" value="21"/>
+                            <menuitem label="22" value="22"/>
+                            <menuitem label="23" value="23"/>
+                            <menuitem label="24" value="24"/>
+                        </menupopup>
+                    </menulist>
+                    <label value="&pref.calendar.view.visiblehoursend.label;"/>
+                    </hbox>
+                </html:td>
+            </html:tr>
+            <html:tr>
+                <html:th>
                     <label value="&pref.calendar.view.daystart.label;"
                            accesskey="&pref.calendar.view.daystart.accesskey;"
                            control="daystarthour"/>
-                </html:td>
+                </html:th>
                 <html:td>
                     <menulist id="daystarthour"
                               oncommand="gViewsPane.updateViewEndMenu(this.value);"
                               preference="calendar.view.daystarthour">
                         <menupopup id="daystarthourpopup">
                             <menuitem id="timeStart0" label="&time.midnight;" value="0"/>
                             <menuitem id="timeStart1"                         value="1"/>
                             <menuitem id="timeStart2"                         value="2"/>
@@ -144,59 +185,24 @@
                             <menuitem id="timeStart18"                        value="18"/>
                             <menuitem id="timeStart19"                        value="19"/>
                             <menuitem id="timeStart20"                        value="20"/>
                             <menuitem id="timeStart21"                        value="21"/>
                             <menuitem id="timeStart22"                        value="22"/>
                             <menuitem id="timeStart23"                        value="23"/>
                         </menupopup>
                     </menulist>
-                    <hbox align="center" pack="center">
-                        <label value="&pref.calendar.view.visiblehours.label;"
-                               accesskey="&pref.calendar.view.visiblehours.accesskey;"
-                               control="visiblehours"/>
-                        <menulist id="visiblehours"
-                                  preference="calendar.view.visiblehours">
-                            <menupopup id="visiblehourspopup">
-                                <menuitem label="1"  value="1"/>
-                                <menuitem label="2"  value="2"/>
-                                <menuitem label="3"  value="3"/>
-                                <menuitem label="4"  value="4"/>
-                                <menuitem label="5"  value="5"/>
-                                <menuitem label="6"  value="6"/>
-                                <menuitem label="7"  value="7"/>
-                                <menuitem label="8"  value="8"/>
-                                <menuitem label="9"  value="9"/>
-                                <menuitem label="10" value="10"/>
-                                <menuitem label="11" value="11"/>
-                                <menuitem label="12" value="12"/>
-                                <menuitem label="13" value="13"/>
-                                <menuitem label="14" value="14"/>
-                                <menuitem label="15" value="15"/>
-                                <menuitem label="16" value="16"/>
-                                <menuitem label="17" value="17"/>
-                                <menuitem label="18" value="18"/>
-                                <menuitem label="19" value="19"/>
-                                <menuitem label="20" value="20"/>
-                                <menuitem label="21" value="21"/>
-                                <menuitem label="22" value="22"/>
-                                <menuitem label="23" value="23"/>
-                                <menuitem label="24" value="24"/>
-                            </menupopup>
-                        </menulist>
-                        <label value="&pref.calendar.view.visiblehoursend.label;"/>
-                    </hbox>
                 </html:td>
             </html:tr>
             <html:tr>
-                <html:td>
+                <html:th>
                     <label value="&pref.calendar.view.dayend.label;"
                            accesskey="&pref.calendar.view.dayend.accesskey;"
                            control="dayendhour"/>
-                </html:td>
+                </html:th>
                 <html:td>
                     <menulist id="dayendhour"
                               oncommand="gViewsPane.updateViewStartMenu(this.value);"
                               preference="calendar.view.dayendhour">
                         <menupopup id="dayendhourpopup">
                             <menuitem id="timeEnd1"                          value="1"/>
                             <menuitem id="timeEnd2"                          value="2"/>
                             <menuitem id="timeEnd3"                          value="3"/>
@@ -225,20 +231,20 @@
                     </menulist>
                 </html:td>
             </html:tr>
         </html:table>
         <checkbox id="showLocation" pack="end"
                   label="&pref.showlocation.label;"
                   preference="calendar.view.showLocation"/>
         <spacer/>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox id="viewsMultiweekGroupbox" data-category="paneCalendar">
-        <label><html:h2>&pref.calendar.view.multiweekview.caption;</html:h2></label>
+    <html:fieldset id="viewsMultiweekGroupbox" data-category="paneCalendar">
+        <html:legend>&pref.calendar.view.multiweekview.caption;</html:legend>
         <hbox align="center">
             <label value="&pref.numberofweeks.label;"
                    accesskey="&pref.numberofweeks.accesskey;"
                    control="viewsMultiweekTotalWeeks"/>
             <menulist id="viewsMultiweekTotalWeeks"
                       preference="calendar.weeks.inview">
                 <menupopup>
                     <menuitem label="&pref.numberofweeks.1;" value="1"/>
@@ -258,9 +264,9 @@
                       preference="calendar.previousweeks.inview">
                 <menupopup>
                     <menuitem label="&pref.numberofweeks.0;" value="0"/>
                     <menuitem label="&pref.numberofweeks.1;" value="1"/>
                     <menuitem label="&pref.numberofweeks.2;" value="2"/>
                 </menupopup>
             </menulist>
         </hbox>
-    </groupbox>
+    </html:fieldset>
--- a/chat/content/otr-auth.xhtml
+++ b/chat/content/otr-auth.xhtml
@@ -1,14 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!-- 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/skin/messenger.css"?>
 <?xml-stylesheet type="text/css" href="chrome://messenger/skin/input-fields.css"?>
 
 <!DOCTYPE winodw>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"
         data-l10n-id="otr-auth"
         data-l10n-attrs="buttonlabelaccept"
         windowtype="OTR:Auth"
@@ -21,50 +22,57 @@
     <linkset>
       <html:link rel="localization" href="messenger/otr/auth.ftl"/>
     </linkset>
 
     <script src="chrome://global/content/globalOverlay.js"/>
     <script src="chrome://global/content/editMenuOverlay.js"/>
     <script src="chrome://chat/content/otr-auth.js"/>
 
-    <groupbox id="how" hidden="true">
-      <label><html:h4 data-l10n-id="auth-how"/></label>
+    <html:fieldset id="how" hidden="hidden">
+      <html:legend data-l10n-id="auth-how"></html:legend>
+      <vbox>
       <menulist id="howOption" oncommand="otrAuth.how();">
         <menupopup>
           <menuitem data-l10n-id="auth-questionAndAnswer-label" value="questionAndAnswer"/>
           <menuitem data-l10n-id="auth-sharedSecret-label" value="sharedSecret"/>
           <menuitem data-l10n-id="auth-manualVerification-label" value="manualVerification"/>
         </menupopup>
       </menulist>
-    </groupbox>
+      </vbox>
+    </html:fieldset>
 
-    <groupbox id="questionAndAnswer" hidden="true">
-      <label><html:h4 data-l10n-id="auth-questionAndAnswer"/></label>
+    <html:fieldset id="questionAndAnswer" hidden="hidden">
+      <html:legend data-l10n-id="auth-questionAndAnswer"></html:legend>
+      <vbox>
       <description style="width: 300px; white-space: pre-wrap;" data-l10n-id="auth-qaInstruction"></description>
       <label data-l10n-id="auth-question" control="question" flex="1"/>
       <html:input id="question" type="text" class="input-inline"
                   aria-labelledby="auth-question"/>
       <label data-l10n-id="auth-answer" control="answer" flex="1"/>
       <html:input id="answer" type="text" class="input-inline"
                   aria-labelledby="auth-answer"
                   oninput="otrAuth.oninput(this)"/>
-    </groupbox>
+      </vbox>
+    </html:fieldset>
 
-    <groupbox id="sharedSecret" hidden="true">
-      <label><html:h4 data-l10n-id="auth-sharedSecret"/></label>
+    <html:fieldset id="sharedSecret" hidden="hidden">
+      <html:legend data-l10n-id="auth-sharedSecret"></html:legend>
+      <vbox>
       <description style="width: 300px; white-space: pre-wrap;" data-l10n-id="auth-secretInstruction"></description>
       <label data-l10n-id="auth-secret" control="secret" flex="1"/>
       <html:input id="secret" type="text" class="input-inline"
                   aria-labelledby="auth-secret"
                   oninput="otrAuth.oninput(this)"/>
-    </groupbox>
+      </vbox>
+    </html:fieldset>
 
-    <groupbox id="manualVerification" hidden="true">
-      <label><html:h4 data-l10n-id="auth-manualVerification"/></label>
+    <html:fieldset id="manualVerification" hidden="hidden">
+      <html:legend data-l10n-id="auth-manualVerification"></html:legend>
+      <vbox>
       <description style="width: 300px; white-space: pre-wrap;" data-l10n-id="auth-manualInstruction"></description>
 
       <label id="yourFPLabel"/>
       <html:input id="yourFPValue" type="text" class="input-inline"
                   readonly="readonly"
                   aria-labelledby="yourFPLabel"/>
       <label id="theirFPLabel"/>
       <html:input id="theirFPValue" type="text" class="input-inline"
@@ -75,20 +83,23 @@
         <label data-l10n-id="auth-verified"/>
         <menulist id="verifiedOption">
           <menupopup>
             <menuitem data-l10n-id="auth-yes" value="yes"/>
             <menuitem data-l10n-id="auth-no" value="no"/>
           </menupopup>
         </menulist>
       </hbox>
-    </groupbox>
+      </vbox>
+    </html:fieldset>
 
-    <groupbox id="ask" hidden="true">
+    <html:fieldset id="ask" hidden="hidden">
       <label id="receivedQuestionLabel" data-l10n-id="auth-questionReceived"/>
+      <vbox>
       <description id="receivedQuestion" style="width: 300px; white-space: pre-wrap;"/>
       <label id="responseLabel" control="response" flex="1"/>
       <html:input id="response" type="text" class="input-inline"
                   aria-labelledby="responseLabel"
                   oninput="otrAuth.oninput(this)"/>
-    </groupbox>
+      </vbox>
+    </html:fieldset>
   </dialog>
 </window>
--- a/mail/components/accountcreation/content/emailWizard.xhtml
+++ b/mail/components/accountcreation/content/emailWizard.xhtml
@@ -1,14 +1,15 @@
 <?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/skin/messenger.css"?>
 <?xml-stylesheet href="chrome://messenger/skin/menulist.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/accountCreation.css" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/creationDialog.css" type="text/css"?>
 
 <!DOCTYPE window [
   <!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
   %brandDTD;
   <!ENTITY % acDTD SYSTEM "chrome://messenger/locale/accountCreation.dtd">
@@ -234,20 +235,19 @@
               <image id="statusImgAfter"/>
             </hbox>
           </vbox>
 
           <vbox id="status-lines" flex="1" align="center"/>
         </form>
       </vbox><!-- .hub-wrapper -->
 
-      <groupbox id="result_area"
-                class="hub-wrapper config-area"
-                hidden="true"
-                pack="center">
+      <html:fieldset id="result_area" class="hub-wrapper config-area"
+                     hidden="hidden"
+                     pack="center">
         <hbox flex="1">
           <label class="label-result"
                  value="&protocol.label;"
                  control="result_servertype"/>
           <radiogroup id="result_servertype" orient="vertical" flex="1">
             <radio id="result_select_imap" label="&imapLong.label;" value="imap"
                    oncommand="gEmailConfigWizard.onResultServerTypeChanged();"/>
             <radio id="result_select_pop3" label="&pop3Long.label;" value="pop3"
@@ -300,23 +300,20 @@
                   flex="1"/>
           </hbox>
           <description id="result_addon_intro"/>
           <hbox id="result_addon_install">
             <vbox id="result_addon_install_rows" flex="1">
             </vbox>
           </hbox>
         </vbox>
-      </groupbox>
+      </html:fieldset>
 
-      <groupbox id="manual-edit_area"
-                class="hub-wrapper config-area"
-                hidden="true"
-                pack="center"
-                orient="vertical">
+      <html:fieldset id="manual-edit_area" class="hub-wrapper config-area"
+                     hidden="hidden">
 
         <html:table class="manual-config-table">
           <html:tr>
             <html:th class="config-label"></html:th>
             <html:th class="column-title">&incomingColumn.label;</html:th>
             <html:th class="column-title">&outgoingColumn.label;</html:th>
           </html:tr>
 
@@ -486,17 +483,17 @@
                       class="btn-link"
                       label="&advancedSetup.label;"
                       accesskey="&advancedSetup.accesskey;"
                       oncommand="gEmailConfigWizard.onAdvancedSetup();"/>
             </html:td>
           </html:tr>
 
         </html:table>
-      </groupbox>
+      </html:fieldset>
 
       <hbox class="hub-footer">
         <hbox id="left_buttons_area" align="center" pack="start" flex="1">
           <button id="cancel_button"
                   label="&cancel.label;"
                   accesskey="&cancel.accesskey;"
                   oncommand="gEmailConfigWizard.onCancel();"/>
           <button id="manual-edit_button"
--- a/mail/components/compose/content/dialogs/EdColorProps.xhtml
+++ b/mail/components/compose/content/dialogs/EdColorProps.xhtml
@@ -25,20 +25,18 @@
   <script src="chrome://global/content/globalOverlay.js"/>
   <script src="chrome://global/content/editMenuOverlay.js"/>
   <script src="chrome://messenger/content/messengercompose/editorUtilities.js"/>
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <script src="chrome://messenger/content/messengercompose/EdColorProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox align="start">
-    <hbox class="groupbox-title">
-      <label class="header">&pageColors.label;</label>
-    </hbox>
+  <html:fieldset align="start">
+    <html:legend>&pageColors.label;</html:legend>
     <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>
@@ -98,17 +96,17 @@
         <label class="larger" id="ActiveLinkText"  value="&activeLinkText.label;"/>
         <spacer flex="1"/>
         <label class="larger" id="VisitedLinkText" value="&visitedLinkText.label;"/>
         <spacer flex="1"/>
       </vbox>
       <spacer flex="1"/>
     </hbox>
     <spacer class="spacer"/>
-  </groupbox>
+  </html:fieldset>
   <spacer class="spacer"/>
   <label control="BackgroundImageInput"
          value="&backgroundImage.label;"
          tooltiptext="&backgroundImage.tooltip;"
          accesskey="&backgroundImage.accessKey;"/>
   <tooltip id="shortenedDataURI">
     <label value="&backgroundImage.shortenedDataURI;"/>
   </tooltip>
--- a/mail/components/compose/content/dialogs/EdHLineProps.xhtml
+++ b/mail/components/compose/content/dialogs/EdHLineProps.xhtml
@@ -25,20 +25,18 @@
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://messenger/content/messengercompose/editorUtilities.js"/>
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <!--- Element-specific methods -->
   <script src="chrome://messenger/content/messengercompose/EdHLineProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox>
-    <hbox class="groupbox-title">
-      <label class="header">&dimensionsBox.label;</label>
-    </hbox>
+  <html:fieldset>
+    <html:legend>&dimensionsBox.label;</html:legend>
     <html:table>
       <html:tr>
         <html:th>
           <label id="widthLabel"
                  control="width"
                  value="&widthEditField.label;"
                  accesskey="&widthEditField.accessKey;"/>
         </html:th>
@@ -64,28 +62,26 @@
                       aria-labelledby="heightLabel"/>
         </html:td>
         <html:td>
           <label value="&pixelsPopup.value;"/>
         </html:td>
       </html:tr>
     </html:table>
     <checkbox id="3dShading" label="&threeDShading.label;" accesskey="&threeDShading.accessKey;"/>
-  </groupbox>
-  <groupbox>
-    <hbox class="groupbox-title">
-      <label class="header">&alignmentBox.label;</label>
-    </hbox>
+  </html:fieldset>
+  <html:fieldset>
+    <html:legend>&alignmentBox.label;</html:legend>
     <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>
+  </html:fieldset>
   <spacer class="spacer"/>
   <hbox>
     <button  id="SaveDefault" label="&saveSettings.label;"
          accesskey="&saveSettings.accessKey;"
          oncommand="onSaveDefault()"
          tooltiptext="&saveSettings.tooltip;" />
     <spacer flex="1"/>
     <button id="AdvancedEditButton"
--- a/mail/components/compose/content/dialogs/EdImageDialog.js
+++ b/mail/components/compose/content/dialogs/EdImageDialog.js
@@ -57,21 +57,20 @@ function ImageStartup() {
   gDialog.widthInput = document.getElementById("widthInput");
   gDialog.heightInput = document.getElementById("heightInput");
   gDialog.widthUnitsMenulist = document.getElementById("widthUnitsMenulist");
   gDialog.heightUnitsMenulist = document.getElementById("heightUnitsMenulist");
   gDialog.imagelrInput = document.getElementById("imageleftrightInput");
   gDialog.imagetbInput = document.getElementById("imagetopbottomInput");
   gDialog.border = document.getElementById("border");
   gDialog.alignTypeSelect = document.getElementById("alignTypeSelect");
-  gDialog.ImageHolder = document.getElementById("preview-image-holder");
   gDialog.PreviewWidth = document.getElementById("PreviewWidth");
   gDialog.PreviewHeight = document.getElementById("PreviewHeight");
-  gDialog.PreviewSize = document.getElementById("PreviewSize");
-  gDialog.PreviewImage = null;
+  gDialog.PreviewImage = document.getElementById("preview-image");
+  gDialog.PreviewImage.addEventListener("load", PreviewImageLoaded);
   gDialog.OkButton = document.querySelector("dialog").getButton("accept");
 }
 
 // Set dialog widgets with attribute data
 // We get them from globalElement copy so this can be used
 //   by AdvancedEdit(), which is shared by all property dialogs
 function InitImage() {
   // Set the controls to the image's attributes
@@ -256,34 +255,29 @@ function PreviewImageLoaded() {
         width = gActualWidth * (gPreviewImageHeight / gActualHeight);
       }
       gDialog.PreviewImage.width = width;
       gDialog.PreviewImage.height = height;
 
       gDialog.PreviewWidth.setAttribute("value", gActualWidth);
       gDialog.PreviewHeight.setAttribute("value", gActualHeight);
 
-      gDialog.PreviewSize.collapsed = false;
-      gDialog.ImageHolder.collapsed = false;
+      document.getElementById("imagePreview").hidden = false;
 
       SetSizeWidgets(gDialog.widthInput.value, gDialog.heightInput.value);
     }
 
     if (gDialog.actualSizeRadio.selected) {
       SetActualSize();
     }
   }
 }
 
 function LoadPreviewImage() {
-  gDialog.PreviewSize.collapsed = true;
-  // XXXbz workaround for bug 265416 / bug 266284
-  gDialog.ImageHolder.collapsed = true;
-
-  var imageSrc = TrimString(gDialog.srcInput.value);
+  var imageSrc = gDialog.srcInput.value.trim();
   if (!imageSrc) {
     return;
   }
   if (isImageDataShortened(imageSrc)) {
     imageSrc = restoredImageData(gDialog.srcInput);
   }
 
   try {
@@ -302,36 +296,18 @@ function LoadPreviewImage() {
         );
 
         // This returns error if image wasn't in the cache; ignore that
         imgCache.removeEntry(uri);
       }
     }
   } catch (e) {}
 
-  if (gDialog.PreviewImage) {
-    removeEventListener("load", PreviewImageLoaded, true);
-  }
-
-  if (gDialog.ImageHolder.hasChildNodes()) {
-    gDialog.ImageHolder.firstElementChild.remove();
-  }
-
-  gDialog.PreviewImage = document.createElementNS(
-    "http://www.w3.org/1999/xhtml",
-    "img"
-  );
-  if (gDialog.PreviewImage) {
-    // set the src before appending to the document -- see bug 198435 for why
-    // this is needed.
-    // XXXbz that bug is long-since fixed.  Is this still needed?
-    gDialog.PreviewImage.addEventListener("load", PreviewImageLoaded, true);
-    gDialog.PreviewImage.src = imageSrc;
-    gDialog.ImageHolder.appendChild(gDialog.PreviewImage);
-  }
+  gDialog.PreviewImage.addEventListener("load", PreviewImageLoaded, true);
+  gDialog.PreviewImage.src = imageSrc;
 }
 
 function SetActualSize() {
   gDialog.widthInput.value = gActualWidth ? gActualWidth : "";
   gDialog.widthUnitsMenulist.selectedIndex = 0;
   gDialog.heightInput.value = gActualHeight ? gActualHeight : "";
   gDialog.heightUnitsMenulist.selectedIndex = 0;
   doDimensionEnabling();
--- a/mail/components/compose/content/dialogs/EdImageProps.xhtml
+++ b/mail/components/compose/content/dialogs/EdImageProps.xhtml
@@ -77,48 +77,32 @@
                   accesskey="&LinkAdvancedEditButton.accessKey;"
                   tooltiptext="&LinkAdvancedEditButton.tooltip;"
                   oncommand="onLinkAdvancedEdit();"/>
         </hbox>
       </vbox>
     </tabpanels>
   </tabbox>
 
-  <hbox align="end">
-    <groupbox id="imagePreview" orient="horizontal" flex="1">
-      <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;"/>
-        <hbox>
-          <label value="&widthEditField.label;"/>
-          <spacer flex="1"/>
-          <label id="PreviewWidth"/>
-        </hbox>
-        <hbox>
-          <label value="&heightEditField.label;"/>
-          <spacer flex="1"/>
-          <label id="PreviewHeight"/>
-        </hbox>
-        <spacer flex="1"/>
-      </vbox>
-    </groupbox>
+  <spacer flex="1"/>
+
+  <html:fieldset id="imagePreview" hidden="hidden">
+    <html:legend>&previewBox.label;</html:legend>
 
-    <vbox id="AdvancedEdit">
-      <hbox flex="1" style="margin-top: 0.2em" align="center">
-        <!-- This will right-align the button -->
-        <spacer flex="1"/>
-        <button id="AdvancedEditButton1" oncommand="onAdvancedEdit()" label="&AdvancedEditButton.label;"
-                accesskey="&AdvancedEditButton.accessKey;" tooltiptext="&AdvancedEditButton.tooltip;"/>
-      </hbox>
-    </vbox>
+    <html:figure>
+      <html:img id="preview-image" style="display:inline-block;"/>
+      <html:figcaption style="float:right;">
+        <label value="&actualSize.label;"/> <label id="PreviewWidth"/>x<label id="PreviewHeight"/>
+      </html:figcaption>
+    </html:figure>
+  </html:fieldset>
+
+  <hbox pack="end">
+    <button id="AdvancedEditButton1" oncommand="onAdvancedEdit()"
+            label="&AdvancedEditButton.label;"
+            accesskey="&AdvancedEditButton.accessKey;"
+            tooltiptext="&AdvancedEditButton.tooltip;"/>
   </hbox>
+
   <separator class="groove"/>
 
 </dialog>
 </window>
--- a/mail/components/compose/content/dialogs/EdInsertChars.xhtml
+++ b/mail/components/compose/content/dialogs/EdInsertChars.xhtml
@@ -19,29 +19,27 @@
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://messenger/content/messengercompose/editorUtilities.js"/>
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <script src="chrome://messenger/content/messengercompose/EdInsertChars.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox>
-    <hbox class="groupbox-title">
-      <label class="header">&category.label;</label>
-    </hbox>
+  <html:fieldset>
+    <html:legend>&category.label;</html:legend>
     <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"/>
-  </groupbox>
+  </html:fieldset>
   <hbox equalsize="always">
     <vbox flex="1">
       <!-- value is set in JS from editor.properties strings -->
       <label id="LatinL_Label" control="LatinL" value="&letter.label;" accesskey="&letter.accessKey;"/>
       <menulist class="larger" flex="1" id="LatinL" oncommand="SelectLatinLetter()">
         <menupopup/>
       </menulist>
     </vbox>
--- a/mail/components/compose/content/dialogs/EdInsertMath.xhtml
+++ b/mail/components/compose/content/dialogs/EdInsertMath.xhtml
@@ -31,31 +31,29 @@
   <vbox flex="1" style="overflow: auto; width: 30em; height: 5em;">
     <description id="output"/>
   </vbox>
   <tabbox id="tabboxInsertLaTeXCommand">
     <tabs/>
     <tabpanels oncommand="insertLaTeXCommand(event.target);"/>
   </tabbox>
   <spacer class="spacer"/>
-  <groupbox>
-    <hbox class="groupbox-title">
-      <label class="header">&options.label;</label>
-    </hbox>
+  <html:fieldset>
+    <html:legend>&options.label;</html:legend>
     <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();">
         <radio label="&optionLTR.label;"
                accesskey="&optionLTR.accesskey;"/>
         <radio label="&optionRTL.label;"
                accesskey="&optionRTL.accesskey;"/>
       </radiogroup>
     </hbox>
-  </groupbox>
+  </html:fieldset>
   <spacer class="spacer"/>
   <separator class="groove"/>
 </dialog>
 </window>
--- a/mail/components/compose/content/dialogs/EdInsertTOC.xhtml
+++ b/mail/components/compose/content/dialogs/EdInsertTOC.xhtml
@@ -23,20 +23,18 @@
   <script src="chrome://messenger/content/messengercompose/editorUtilities.js"/>
 
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <script src="chrome://messenger/content/messengercompose/EdInsertTOC.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
   <spacer id="dummy" style="display:none"/>
   <vbox flex="1">
-    <groupbox>
-      <hbox class="groupbox-title">
-        <label class="header">&buildToc.label;</label>
-      </hbox>
+    <html:fieldset>
+      <html:legend>&buildToc.label;</html:legend>
       <html:table>
         <html:tr>
           <html:th></html:th>
           <html:th>&tag.label;</html:th>
           <html:th>&class.label;</html:th>
         </html:tr>
         <html:tr>
           <html:th id="header1Label">&header1.label;</html:th>
@@ -238,17 +236,17 @@
           <html:td>
             <html:input id="header6Class" type="text"
                         class="input-inline" size="10"
                         onchange="changeClass(this, 6)"
                         aria-labelledby="header6Label"/>
           </html:td>
         </html:tr>
       </html:table>
-    </groupbox>
+    </html:fieldset>
     <vbox>
       <checkbox id="orderedListCheckbox"
                 label="&orderedList.label;"
                 oncommand="ToggleOrderedList(this)"/>
       <checkbox id="readOnlyCheckbox"
                 label="&makeReadOnly.label;"
                 oncommand="ToggleReadOnlyToc(this)"/>
     </vbox>
--- a/mail/components/compose/content/dialogs/EdInsertTable.xhtml
+++ b/mail/components/compose/content/dialogs/EdInsertTable.xhtml
@@ -20,20 +20,18 @@
 <dialog>
 
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://messenger/content/messengercompose/editorUtilities.js"/>
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <script src="chrome://messenger/content/messengercompose/EdInsertTable.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
-  <groupbox>
-    <hbox class="groupbox-title">
-      <label class="header">&size.label;</label>
-    </hbox>
+  <html:fieldset>
+    <html:legend>&size.label;</html:legend>
     <html:table>
       <html:tr>
         <html:th>
           <label control="rowsInput"
                  value="&numRowsEditField.label;"
                  accesskey="&numRowsEditField.accessKey;"/>
         </html:th>
         <html:td>
@@ -66,17 +64,17 @@
                       oninput="forceInteger(this.id)"/>
         </html:td>
         <html:td>
           <menulist id="widthPixelOrPercentMenulist" class="menulist-narrow"/>
         </html:td>
       </html:tr>
     </html:table>
     <spacer class="spacer"/>
-  </groupbox>
+  </html:fieldset>
   <spacer class="spacer"/>
   <hbox align="center">
     <label control="borderInput"
            value="&borderEditField.label;"
            accesskey="&borderEditField.accessKey;"
            tooltiptext="&borderEditField.tooltip;" />
     <html:input id="borderInput" type="number"
                 class="narrow"
--- a/mail/components/compose/content/dialogs/EdLinkProps.xhtml
+++ b/mail/components/compose/content/dialogs/EdLinkProps.xhtml
@@ -27,31 +27,27 @@
   <script src="chrome://messenger/content/messengercompose/editorUtilities.js"/>
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <script src="chrome://messenger/content/messengercompose/EdLinkProps.js"/>
   <script src="chrome://messenger/content/messengercompose/EdImageLinkLoader.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
   <vbox style="min-width: 20em">
-    <groupbox>
-      <hbox class="groupbox-title">
-        <label id="linkTextCaption" class="header"/>
-      </hbox>
+    <html:fieldset>
+      <html:legend><label id="linkTextCaption"/></html:legend>
       <vbox>
         <label id="linkTextMessage" control="linkTextInput"/>
         <html:input id="linkTextInput" type="text" class="input-inline"
                     aria-labelledby="linkTextMessage"/>
       </vbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox id="LinkURLBox">
-      <hbox class="groupbox-title">
-        <label class="header">&LinkURLBox.label;</label>
-      </hbox>
+    <html:fieldset id="LinkURLBox">
+      <html:legend>&LinkURLBox.label;</html:legend>
       <vbox id="LinkLocationBox">
         <label id="hrefLabel"
                control="hrefInput"
                accesskey="&LinkURLEditField2.accessKey;"
                width="1">&LinkURLEditField2.label;</label>
         <html:input id="hrefInput" type="text"
                     class="input-inline uri-element padded" oninput="ChangeLinkLocation();"
                     aria-labelledby="hrefLabel"/>
@@ -67,17 +63,17 @@
                   oncommand="chooseLinkFile();"/>
         </hbox>
       </vbox>
       <checkbox id="AttachSourceToMail"
                 hidden="true"
                 label="&attachLinkSource.label;"
                 accesskey="&attachLinkSource.accesskey;"
                 oncommand="DoAttachSourceCheckbox()"/>
-    </groupbox>
+    </html:fieldset>
   </vbox>
   <vbox id="AdvancedEdit">
     <hbox flex="1" style="margin-top: 0.2em" align="center">
       <!-- This will right-align the button -->
       <spacer flex="1"/>
       <button id="AdvancedEditButton1" oncommand="onAdvancedEdit()" label="&AdvancedEditButton.label;"
               accesskey="&AdvancedEditButton.accessKey;" tooltiptext="&AdvancedEditButton.tooltip;"/>
     </hbox>
--- a/mail/components/compose/content/dialogs/EdListProps.js
+++ b/mail/components/compose/content/dialogs/EdListProps.js
@@ -230,17 +230,17 @@ function BuildBulletStyleList() {
   // Disable advanced edit button if changing to "normal"
   if (gListType) {
     gDialog.AdvancedEditButton.removeAttribute("disabled");
   } else {
     gDialog.AdvancedEditButton.setAttribute("disabled", "true");
   }
 
   if (label) {
-    gDialog.BulletStyleLabel.setAttribute("label", label);
+    gDialog.BulletStyleLabel.textContent = label;
   }
 }
 
 function SelectListType() {
   // Each list type is stored in the "value" of each menuitem
   var NewType = gDialog.ListTypeList.value;
 
   if (NewType == "ol") {
--- a/mail/components/compose/content/dialogs/EdListProps.xhtml
+++ b/mail/components/compose/content/dialogs/EdListProps.xhtml
@@ -23,51 +23,47 @@
   <script src="chrome://global/content/editMenuOverlay.js"/>
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://messenger/content/messengercompose/editorUtilities.js"/>
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <script src="chrome://messenger/content/messengercompose/EdListProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
-  <groupbox flex="1">
-    <hbox class="groupbox-title">
-      <label class="header">&ListType.label;</label>
-    </hbox>
+  <html:fieldset>
+    <html:legend>&ListType.label;</html:legend>
     <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>
+  </html:fieldset>
   <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">
-    <hbox class="groupbox-title">
-      <label id="BulletStyleLabel" class="header">&bulletStyle.label;</label>
-    </hbox>
-    <menulist class="MinWidth10em" id="BulletStyle" oncommand="SelectBulletStyle()">
+  <html:fieldset>
+    <html:legend id="BulletStyleLabel">&bulletStyle.label;</html:legend>
+    <menulist id="BulletStyle" oncommand="SelectBulletStyle()">
       <menupopup/>
     </menulist>
     <spacer class="spacer"/>
     <hbox align="center">
       <label id="StartingNumberLabel" control="StartingNumber"
              value="&startingNumber.label;" accesskey="&startingNumber.accessKey;"/>
       <html:input id="StartingNumber" type="number"
                   class="narrow input-inline"
                   aria-labelledby="StartingNumberLabel"/>
       <spacer/>
     </hbox>
-  </groupbox>
+  </html:fieldset>
   <radiogroup id="RadioGroup" index="0" persist="index">
     <radio id="ChangeAll"      label="&changeEntireListRadio.label;" accesskey="&changeEntireListRadio.accessKey;"/>
     <radio id="ChangeSelected" label="&changeSelectedRadio.label;"   accesskey="&changeSelectedRadio.accessKey;"/>
   </radiogroup>
   <vbox id="AdvancedEdit">
     <hbox flex="1" style="margin-top: 0.2em" align="center">
       <!-- This will right-align the button -->
       <spacer flex="1"/>
--- a/mail/components/compose/content/dialogs/EdTableProps.xhtml
+++ b/mail/components/compose/content/dialogs/EdTableProps.xhtml
@@ -38,20 +38,18 @@
     <tabs flex="1">
       <tab id="TableTab" label="&tableTab.label;"/>
       <tab id="CellTab" label="&cellTab.label;"/>
     </tabs>
     <tabpanels>
 
       <!-- TABLE PANEL -->
       <vbox>
-        <groupbox orient="horizontal">
-          <hbox class="groupbox-title">
-            <label class="header">&size.label;</label>
-          </hbox>
+        <html:fieldset orient="horizontal">
+          <html:legend>&size.label;</html:legend>
           <hbox>
             <vbox>
               <hbox>
                 <vbox>
                   <hbox align="center" flex="1">
                     <label id="TableRowsLabel" value="&tableRows.label;" accesskey="&tableRows.accessKey;"
                            control="TableRowsInput"/>
                   </hbox>
@@ -94,21 +92,19 @@
                               aria-labelledby="TableWidthLabel"/>
                 </html:div>
                 <html:div class="flex-items-center">
                   <menulist id="TableWidthUnits"/>
                 </html:div>
               </html:div>
             </vbox>
           </hbox>
-        </groupbox>
-        <groupbox>
-          <hbox class="groupbox-title">
-            <label class="header">&tableBorderSpacing.label;</label>
-          </hbox>
+        </html:fieldset>
+        <html:fieldset>
+          <html:legend>&tableBorderSpacing.label;</html:legend>
           <hbox>
             <vbox>
               <hbox flex="1" align="center">
                 <label id="BorderWidthLabel"
                        control="BorderWidthInput"
                        value="&tableBorderWidth.label;"
                        accesskey="&tableBorderWidth.accessKey;"/>
               </hbox>
@@ -143,17 +139,17 @@
               <hbox flex="1" align="center">
                 <label value="&tablePxBetwCells.label;"/>
               </hbox>
               <hbox flex="1" align="center">
                 <label value="&tablePxBetwBrdrCellContent.label;"/>
               </hbox>
             </vbox>
           </hbox>
-        </groupbox>
+        </html:fieldset>
         <!-- Table Alignment and Caption -->
         <hbox flex="1" align="center">
           <label control="TableAlignList"
                  value="&tableAlignment.label;"
                  accesskey="&tableAlignment.accessKey;"/>
           <menulist id="TableAlignList">
             <menupopup>
               <menuitem label="&AlignLeft.label;"   value="left"/>
@@ -193,60 +189,57 @@
             accesskey="&AdvancedEditButton.accessKey;"
             tooltiptext="&AdvancedEditButton.tooltip;"/>
         </hbox>
         <spacer flex="1"/>
       </vbox><!-- Table Panel -->
 
       <!-- CELL PANEL -->
       <vbox>
-        <groupbox orient="horizontal" align="center">
-          <hbox class="groupbox-title">
-            <label class="header">&cellSelection.label;</label>
-          </hbox>
+        <html:fieldset>
+          <html:legend>&cellSelection.label;</html:legend>
           <vbox>
-            <menulist id="SelectionList" oncommand="ChangeSelection(event.target.value)" flex="1">
+            <menulist id="SelectionList" oncommand="ChangeSelection(event.target.value)">
               <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>
             </menulist>
-            <hbox flex="1">
+            <hbox>
               <button id="PreviousButton"
                       oncommand="MoveSelection(0)"
-                      flex="1"
                       align="center">
                 <image/>
                 <label value="&cellSelectPrevious.label;"
                        accesskey="&cellSelectPrevious.accessKey;"
                        control="PreviousButton"/>
               </button>
               <button id="NextButton"
                       oncommand="MoveSelection(1)"
                       class="align-right"
-                      flex="1"
                       align="center">
                 <image/>
                 <label value="&cellSelectNext.label;"
                        accesskey="&cellSelectNext.accessKey;"
                        control="NextButton"/>
               </button>
             </hbox>
+            <hbox flex="1">
+              &applyBeforeChange.label;
+            </hbox>
           </vbox>
-          <spacer class="bigspacer"/>
-            <description class="wrap" flex="1">&applyBeforeChange.label;</description>
-        </groupbox>
+        </html:fieldset>
+
+        <separator class="groove"/>
+
         <hbox align="center">
-          <!-- cell size groupbox -->
-          <groupbox>
-            <hbox class="groupbox-title">
-              <label class="header">&size.label;</label>
-            </hbox>
+          <html:fieldset>
+            <html:legend>&size.label;</html:legend>
             <hbox>
               <vbox>
                 <hbox flex="1" align="center">
                   <checkbox id="CellHeightCheckbox" label="&tableHeight.label;" accesskey="&tableHeight.accessKey;"/>
                 </hbox>
                 <hbox flex="1" align="center">
                   <checkbox id="CellWidthCheckbox" label="&tableWidth.label;" accesskey="&tableWidth.accessKey;"/>
                 </hbox>
@@ -265,22 +258,19 @@
                 <hbox flex="1" align="center">
                   <menulist id="CellHeightUnits" oncommand="SetCheckbox('CellHeightCheckbox');"/>
                 </hbox>
                 <hbox flex="1" align="center">
                   <menulist id="CellWidthUnits" oncommand="SetCheckbox('CellWidthCheckbox');"/>
                 </hbox>
               </vbox>
             </hbox>
-          </groupbox>
-          <!-- Alignment -->
-          <groupbox>
-            <hbox class="groupbox-title">
-              <label class="header">&cellContentAlignment.label;</label>
-            </hbox>
+          </html:fieldset>
+          <html:fieldset>
+            <html:legend>&cellContentAlignment.label;</html:legend>
             <hbox>
               <vbox>
                 <hbox align="center" flex="1">
                   <checkbox id="CellVAlignCheckbox" label="&cellVertical.label;" accesskey="&cellVertical.accessKey;"/>
                 </hbox>
                 <hbox align="center" flex="1">
                   <checkbox id="CellHAlignCheckbox" label="&cellHorizontal.label;" accesskey="&cellHorizontal.accessKey;"/>
                 </hbox>
@@ -298,17 +288,17 @@
                     <menuitem label="&AlignLeft.label;" value="left"/>
                     <menuitem label="&AlignCenter.label;" value="center"/>
                     <menuitem label="&AlignRight.label;" value="right"/>
                     <menuitem label="&cellAlignJustify.label;" value="justify"/>
                   </menupopup>
                 </menulist>
               </vbox>
             </hbox>
-          </groupbox>
+          </html:fieldset>
         </hbox>
         <spacer class="spacer"/>
         <hbox align="center">
           <checkbox id="CellStyleCheckbox" label="&cellStyle.label;" accesskey="&cellStyle.accessKey;"/>
           <menulist id="CellStyleList" oncommand="SetCheckbox('CellStyleCheckbox');">
             <menupopup>
               <menuitem label="&cellNormal.label;" value="td"/>
               <menuitem label="&cellHeader.label;" value="th"/>
--- a/mail/components/compose/content/dialogs/edImage.inc.xhtml
+++ b/mail/components/compose/content/dialogs/edImage.inc.xhtml
@@ -148,20 +148,18 @@
               </html:td>
             </html:tr>
           </html:table>
         </hbox>
         <spacer flex="1"/>
       </vbox>
 
       <hbox id="imageAppearance">
-        <groupbox>
-          <hbox class="groupbox-title">
-            <label id="spacingLabel" class="header">&spacingBox.label;</label>
-          </hbox>
+        <html:fieldset>
+          <html:legend id="spacingLabel">&spacingBox.label;</html:legend>
           <html:table>
             <html:tr>
               <html:th>
                 <label id="leftrightLabel"
                        class="align-right"
                        control="imageleftrightInput"
                        accesskey="&leftRightEditField.accessKey;"
                        value="&leftRightEditField.label;"/>
@@ -205,23 +203,21 @@
                             class="narrow input-inline"
                             aria-labelledby="borderLabel"/>
               </html:td>
               <html:td id="bordertypeLabel">
                 &pixelsPopup.value;
               </html:td>
             </html:tr>
           </html:table>
-        </groupbox>
+        </html:fieldset>
 
         <vbox>
-          <groupbox align="start">
-            <hbox class="groupbox-title">
-              <label id="alignLabel" class="header">&alignment.label;</label>
-            </hbox>
+          <html:fieldset>
+            <html:legend id="alignLabel">&alignment.label;</html:legend>
             <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;"/>
@@ -232,25 +228,23 @@
                 <menuitem class="align-menu menuitem-iconic"
                           value="right"
                           label="&wrapLeftPopup.value;"/>
                 <menuitem class="align-menu menuitem-iconic"
                           value="left"
                           label="&wrapRightPopup.value;"/>
               </menupopup>
             </menulist>
-          </groupbox>
+          </html:fieldset>
 
-          <groupbox>
-            <hbox class="groupbox-title">
-              <label id="imagemapLabel" class="header">&imagemapBox.label;</label>
-            </hbox>
+          <html:fieldset>
+            <html:legend id="imagemapLabel">&imagemapBox.label;</html:legend>
             <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>
-          </groupbox>
+          </html:fieldset>
         </vbox>
       </hbox>
--- a/mail/components/im/content/am-im.xhtml
+++ b/mail/components/im/content/am-im.xhtml
@@ -30,26 +30,25 @@
     <html:link rel="localization" href="messenger/otr/am-im-otr.ftl"/>
   </linkset>
 
   <vbox flex="1" style="overflow: auto;">
     <hbox class="dialogheader">
       <label class="dialogheader-title" defaultTitle="&accountWindow.title;"/>
     </hbox>
 
-    <groupbox>
+
       <hbox align="center">
         <image id="protocolIcon"/>
         <vbox flex="1">
           <label id="accountName" crop="end" class="header"/>
           <label id="protocolName"/>
         </vbox>
       </hbox>
-    </groupbox>
-    <groupbox>
+
       <tabbox id="imTabbox" flex="1">
         <tabs>
             <tab id="imTabGeneral" label="&account.general;"/>
             <tab id="imTabOTR" data-l10n-id="account-encryption" hidden="true"/>
         </tabs>
         <tabpanels flex="1">
           <tabpanel orient="vertical">
             <label class="header" data-l10n-id="account-settingsTitle" />
@@ -148,11 +147,10 @@
                 <button id="viewFingerprintButton"
                         data-l10n-id="view-fingerprint-button"
                         oncommand="account.viewFingerprintKeys();"/>
               </hbox>
             </vbox>
           </tabpanel>
         </tabpanels>
       </tabbox>
-    </groupbox>
   </vbox>
 </window>
--- a/mail/components/im/content/imAccountWizard.js
+++ b/mail/components/im/content/imAccountWizard.js
@@ -229,17 +229,19 @@ var accountWizard = {
       this.proto.id + "-",
       this.getProtoOptions()
     );
     document.getElementById("protoSpecificGroupbox").hidden = !haveOptions;
     if (haveOptions) {
       var bundle = document.getElementById("accountsBundle");
       document.getElementById(
         "protoSpecificCaption"
-      ).value = bundle.getFormattedString("protoOptions", [this.proto.name]);
+      ).textContent = bundle.getFormattedString("protoOptions", [
+        this.proto.name,
+      ]);
     }
   },
 
   createSummaryRow(aLabel, aValue) {
     var hbox = document.createXULElement("hbox");
     hbox.setAttribute("align", "baseline");
     hbox.setAttribute("equalsize", "always");
 
--- a/mail/components/im/content/imAccountWizard.xhtml
+++ b/mail/components/im/content/imAccountWizard.xhtml
@@ -67,39 +67,35 @@
       <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">
-        <hbox class="groupbox-title">
-          <label id="aliasGroupboxCaption" class="header">&accountAliasGroupbox.caption;</label>
-        </hbox>
+      <html:fieldset id="aliasGroupbox">
+        <html:legend id="aliasGroupboxCaption">&accountAliasGroupbox.caption;</html:legend>
         <hbox id="aliasBox" align="baseline" class="input-container">
           <label id="aliasLabel"
                  value="&accountAliasField.label;"
                  class="label-inline"
                  control="alias" />
           <html:input id="alias" type="text" class="input-inline"/>
         </hbox>
         <description>&accountAliasInfo.label;</description>
-      </groupbox>
+      </html:fieldset>
 
       <checkbox id="newMailNotification"
                 label="&accountAdvanced.newMailNotification.label;" hidden="true"/>
 
-      <groupbox id="protoSpecificGroupbox">
-        <hbox class="groupbox-title">
-          <label id="protoSpecificCaption" class="header"/>
-        </hbox>
+      <html:fieldset id="protoSpecificGroupbox">
+        <html:legend id="protoSpecificCaption"></html:legend>
         <vbox id="protoSpecific" flex="1"/>
-      </groupbox>
+      </html:fieldset>
     </wizardpage>
 
     <wizardpage id="accountsummary" pageid="accountsummary"
                 label="&accountSummaryTitle.label;">
       <description>&accountSummaryInfo.label;</description>
       <separator/>
       <vbox id="summaryRows"/>
       <separator/>
--- a/mail/components/preferences/aboutPreferences.xhtml
+++ b/mail/components/preferences/aboutPreferences.xhtml
@@ -1,15 +1,16 @@
 <?xml version="1.0"?>
 # -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 4 -*-
 # 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/global.css"?>
+<?xml-stylesheet href="chrome://messenger/skin/messenger.css"?>
 <?xml-stylesheet href="chrome://messenger/skin/input-fields.css"?>
 <?xml-stylesheet href="chrome://messenger/content/messenger.css"?>
 <?xml-stylesheet href="chrome://messenger/content/preferences/handlers.css"?>
 <?xml-stylesheet href="chrome://messenger/skin/preferences/applications.css"?>
 <?xml-stylesheet href="chrome://global/skin/in-content/common.css"?>
 <?xml-stylesheet href="chrome://messenger/skin/preferences/preferences.css"?>
 <?xml-stylesheet href="chrome://calendar-common/skin/calendar-preferences.css" type="text/css"?>
 <?xml-stylesheet href="chrome://lightning/skin/lightning.css"?>
--- a/mail/components/preferences/attachmentReminder.xhtml
+++ b/mail/components/preferences/attachmentReminder.xhtml
@@ -19,27 +19,26 @@
         style="width:38em;">
 <dialog id="attachmentReminderOptionsDialog"
         type="child"
         dlgbuttons="accept,cancel">
 
   <prefpane id="attachmentReminderOptionsDialogPane">
     <script src="chrome://messenger/content/preferences/attachmentReminder.js"/>
     <stringbundle id="bundlePreferences" src="chrome://messenger/locale/preferences/preferences.properties"/>
-
-    <groupbox>
+    <vbox>
       <label control="keywordList">&attachKeywordText.label;</label>
       <hbox>
         <richlistbox id="keywordList" flex="1" height="250px"
                      ondblclick="gAttachmentReminderOptionsDialog.editKeyword();"/>
         <vbox>
           <button label="&newKeywordButton.label;" accesskey="&newKeywordButton.accesskey;"
                   oncommand="gAttachmentReminderOptionsDialog.addKeyword();"/>
           <button label="&editKeywordButton1.label;" accesskey="&editKeywordButton1.accesskey;"
                   oncommand="gAttachmentReminderOptionsDialog.editKeyword();"/>
           <button label="&removeKeywordButton.label;" accesskey="&removeKeywordButton.accesskey;"
                   oncommand="gAttachmentReminderOptionsDialog.removeKeyword();"/>
         </vbox>
       </hbox>
-    </groupbox>
+    </vbox>
   </prefpane>
 </dialog>
 </window>
--- a/mail/components/preferences/chat.inc.xhtml
+++ b/mail/components/preferences/chat.inc.xhtml
@@ -9,18 +9,18 @@
                   src="chrome://messenger/locale/preferences/messagestyle.properties"/>
 
     <hbox id="chatPaneCategory"
           class="subcategory"
           data-category="paneChat">
       <html:h1 data-l10n-id="chat-pane-header"/>
     </hbox>
 
-    <groupbox data-category="paneChat">
-      <label><html:h2 data-l10n-id="chat-status-title"/></label>
+    <html:fieldset data-category="paneChat">
+      <html:legend data-l10n-id="chat-status-title"></html:legend>
         <!-- Startup -->
         <hbox align="center">
           <label id="chatStartupAction" value="&startupAction.label;"
                  accesskey="&startupAction.accesskey;" control="messengerStartupAction"/>
           <menulist id="messengerStartupAction" preference="messenger.startup.action">
             <menupopup>
               <menuitem label="&startupOffline.label;"     value="0"/>
               <menuitem label="&startupConnectAuto.label;" value="1"/>
@@ -49,20 +49,20 @@
                       preference="messenger.status.awayWhenIdle"/>
             <spacer flex="1"/>
           </hbox>
           <html:input id="defaultIdleAwayMessage"
                       type="text"
                       class="idle-reporting-enabled indent"
                       preference="messenger.status.defaultIdleAwayMessage"/>
         </vbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox data-category="paneChat">
-      <label><html:h2 data-l10n-id="chat-notifications-title"/></label>
+    <html:fieldset data-category="paneChat">
+      <html:legend data-l10n-id="chat-notifications-title"></html:legend>
       <hbox>
         <checkbox id="sendTyping"
                   label="&sendTyping.label;"
                   accesskey="&sendTyping.accesskey;"
                   preference="purple.conversations.im.send_typing"/>
         <spacer flex="1"/>
       </hbox>
 
@@ -130,25 +130,25 @@
                       preference-editable="true"
                       aria-labelledby="chatSoundCustom"/>
           <button id="browseForChatSound"
                   label="&browse.label;"
                   accesskey="&browse.accesskey;"
                   oncommand="gChatPane.browseForSoundFile();"/>
         </hbox>
       </radiogroup>
-    </groupbox>
+    </html:fieldset>
 
     <hbox id="chatPaneStylingCategory"
           class="subcategory"
           data-category="paneChat">
       <html:h1 data-l10n-id="chat-pane-styling-header"/>
     </hbox>
 
-    <groupbox data-category="paneChat">
+    <html:fieldset data-category="paneChat">
       <separator/>
       <hbox align="baseline">
         <label value="&messageStyleTheme.label;" control="messagestyle-themename"
                accesskey="&messageStyleTheme.accesskey;"/>
         <menulist id="messagestyle-themename"
                   flex="1" crop="end"
                   preference="messenger.options.messagesStyle.theme"
                   onselect="previewObserver.currentThemeChanged();">
@@ -167,33 +167,35 @@
                       value="papersheets"/>
             <menuitem id="simple-menuitem"
                       label="&messageStyleSimpleTheme.label;"
                       value="simple"/>
           </menupopup>
         </menulist>
       </hbox>
       <separator class="thin"/>
+      <hbox align="start">
       <label value="&messageStylePreview.label;"/>
       <tooltip id="aHTMLTooltip" page="true"/>
       <deck flex="1" id="previewDeck" selectedIndex="1">
         <vbox flex="1" id="noPreviewScreen" align="center" pack="center">
           <hbox id="noPreviewBox" align="start">
             <vbox id="noPreviewInnerBox" flex="1">
               <label id="noPreviewTitle" value="&messageStyleNoPreview.title;"/>
               <description id="noAccountDesc">&messageStyleNoPreview.description;</description>
             </vbox>
           </hbox>
         </vbox>
       </deck>
+      </hbox>
       <hbox align="baseline">
         <label value="&messageStyleVariant.label;" control="themevariant"
                accesskey="&messageStyleVariant.accesskey;"/>
         <menulist id="themevariant"
                   preference="messenger.options.messagesStyle.variant"
                   onselect="previewObserver.currentVariantChanged();"/>
       </hbox>
       <checkbox id="showHeaderCheckbox" label="&messageStyleShowHeader.label;"
                 accesskey="&messageStyleShowHeader.accesskey;"
                 preference="messenger.options.messagesStyle.showHeader"/>
-    </groupbox>
+    </html:fieldset>
 
   </prefpane>
--- a/mail/components/preferences/colors.xhtml
+++ b/mail/components/preferences/colors.xhtml
@@ -1,16 +1,17 @@
 <?xml version="1.0"?>
 
 # -*- Mode: Java; tab-width: 4; indent-tabs-mode: nil; c-basic-offset: 4 -*-
 # 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/skin/messenger.css"?>
 <?xml-stylesheet href="chrome://messenger/skin/preferences/preferences.css"?>
 
 <!DOCTYPE window SYSTEM "chrome://messenger/locale/preferences/colors.dtd" >
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"
         title="&colorsDialog.title;"
 #ifdef XP_MACOSX
@@ -18,53 +19,56 @@
 #else
         style="width: &window.width; !important;">
 #endif
 <dialog id="ColorsDialog"
         type="child"
         dlgbuttons="accept,cancel">
   <prefpane id="ColorsDialogPane">
     <hbox>
-      <groupbox flex="1">
-        <label><html:h2>&color;</html:h2></label>
+      <hbox flex="1">
+      <html:fieldset>
+        <html:legend>&color;</html:legend>
         <hbox align="center">
           <label value="&textColor.label;" accesskey="&textColor.accesskey;" control="foregroundtextmenu"/>
           <spacer flex="1"/>
           <html:input type="color" id="foregroundtextmenu" preference="browser.display.foreground_color"/>
         </hbox>
         <hbox align="center" style="margin-top: 5px">
           <label value="&backgroundColor.label;" accesskey="&backgroundColor.accesskey;" control="backgroundmenu"/>
           <spacer flex="1"/>
           <html:input type="color" id="backgroundmenu" preference="browser.display.background_color"/>
         </hbox>
         <separator class="thin"/>
         <hbox align="center">
           <checkbox id="browserUseSystemColors" label="&useSystemColors.label;" accesskey="&useSystemColors.accesskey;"
                     preference="browser.display.use_system_colors"/>
         </hbox>
-      </groupbox>
-
-      <groupbox flex="1">
-        <label><html:h2>&links;</html:h2></label>
+      </html:fieldset>
+      </hbox>
+      <hbox flex="1">
+      <html:fieldset>
+        <html:legend>&links;</html:legend>
         <hbox align="center">
           <label value="&linkColor.label;" accesskey="&linkColor.accesskey;" control="unvisitedlinkmenu"/>
           <spacer flex="1"/>
           <html:input type="color" id="unvisitedlinkmenu" preference="browser.anchor_color"/>
         </hbox>
         <hbox align="center" style="margin-top: 5px">
           <label value="&visitedLinkColor.label;" accesskey="&visitedLinkColor.accesskey;" control="visitedlinkmenu"/>
           <spacer flex="1"/>
           <html:input type="color" id="visitedlinkmenu" preference="browser.visited_color"/>
         </hbox>
         <separator class="thin"/>
         <hbox align="center">
           <checkbox id="browserUnderlineAnchors" label="&underlineLinks.label;" accesskey="&underlineLinks.accesskey;"
                     preference="browser.underline_anchors"/>
         </hbox>
-      </groupbox>
+      </html:fieldset>
+      </hbox>
     </hbox>
 #ifdef XP_WIN
     <vbox align="start">
 #else
     <vbox>
 #endif
       <label accesskey="&overridePageColors.accesskey;"
              control="useDocumentColors">&overridePageColors.label;</label>
--- a/mail/components/preferences/compose.inc.xhtml
+++ b/mail/components/preferences/compose.inc.xhtml
@@ -10,17 +10,17 @@
     <stringbundle id="bundle_addressBook" src="chrome://messenger/locale/addressbook/addressBook.properties"/>
 
     <hbox id="compositionMainCategory"
           class="subcategory"
           data-category="paneCompose">
       <html:h1 data-l10n-id="composition-category-header"/>
     </hbox>
 
-    <groupbox data-category="paneCompose">
+    <html:fieldset data-category="paneCompose">
       <separator class="thin"/>
       <hbox align="center">
         <label value="&forwardMsg.label;" accesskey="&forwardMsg.accesskey;" control="forwardMessageMode"/>
         <menulist id="forwardMessageMode" preference="mail.forward_message_mode">
           <menupopup>
             <menuitem value="2" label="&inline.label;"/>
             <menuitem value="0" label="&asAttachment.label;"/>
           </menupopup>
@@ -43,19 +43,19 @@
       </hbox>
       <hbox>
         <checkbox id="mailWarnOnSendAccelKey"
                   label="&warnOnSendAccelKey.label;"
                   preference="mail.warn_on_send_accel_key"
                   accesskey="&warnOnSendAccelKey.accesskey;"/>
         <spacer flex="1"/>
       </hbox>
-    </groupbox>
-    <groupbox data-category="paneCompose">
-      <label><html:h2 data-l10n-id="composition-spelling-title"/></label>
+    </html:fieldset>
+    <html:fieldset data-category="paneCompose">
+      <html:legend data-l10n-id="composition-spelling-title"></html:legend>
       <hbox>
         <checkbox id="spellCheckBeforeSend"
                   label="&spellCheck.label;"
                   preference="mail.SpellCheckBeforeSend"
                   accesskey="&spellCheck.accesskey;"/>
         <spacer flex="1"/>
       </hbox>
       <hbox>
@@ -75,19 +75,19 @@
             <!-- dynamic content populated by JS -->
           </menupopup>
         </menulist>
         <label id="downloadDictionaries" class="text-link"
                 onclick="if (event.button == 0) { openDictionaryList('tab'); }"
                 value="&downloadDictionaries.label;"/>
         <spacer flex="1"/>
       </hbox>
-    </groupbox>
-    <groupbox data-category="paneCompose">
-      <label><html:h2 data-l10n-id="compose-html-style-title"/></label>
+    </html:fieldset>
+    <html:fieldset data-category="paneCompose">
+      <html:legend data-l10n-id="compose-html-style-title"></html:legend>
       <hbox>
         <vbox flex="1">
           <hbox align="center">
             <label control="FontSelect" value="&font.label;" accesskey="&font.accesskey;"/>
             <menulist id="FontSelect" preference="msgcompose.font_face"
                       sizetopopup="pref" crop="center" flex="1">
               <menupopup>
                 <menuitem value="" label="&fontVarWidth.label;"/>
@@ -153,25 +153,25 @@
       </hbox>
 
       <hbox align="center">
         <description flex="1">&sendOptionsDescription.label;</description>
         <button label="&sendOptions.label;"
                 accesskey="&sendOptions.accesskey;"
                 oncommand="gComposePane.sendOptionsDialog();"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <hbox id="compositionAddressingCategory"
           class="subcategory"
           data-category="paneCompose">
       <html:h1 data-l10n-id="composition-addressing-header"/>
     </hbox>
 
-    <groupbox data-category="paneCompose">
+    <html:fieldset data-category="paneCompose">
       <!-- Address Autocomplete -->
       <separator class="thin"/>
 
       <description>&autocompleteText.label;</description>
 
       <hbox align="center">
         <checkbox id="addressingAutocomplete" label="&addressingEnable.label;"
                   preference="mail.enable_autocomplete"
@@ -213,25 +213,25 @@
                control="defaultStartupDirList"/>
         <menulist is="menulist-addrbooks" id="defaultStartupDirList"
                   oncommand="gComposePane.setDefaultStartupDir(this.value);"
                   none="&showAsDefaultLast.label;"
                   alladdressbooks="true"
                   mailinglists="true"
                   flex="1"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <hbox id="compositionAttachmentsCategory"
           class="subcategory"
           data-category="paneCompose">
       <html:h1 data-l10n-id="composition-attachments-header"/>
     </hbox>
 
-    <groupbox data-category="paneCompose">
+    <html:fieldset data-category="paneCompose">
       <hbox align="center">
         <checkbox id="attachment_reminder_label"
                   label="&attachmentReminder.label;"
                   accesskey="&attachmentReminder.accesskey;"
                   preference="mail.compose.attachment_reminder"/>
         <spacer flex="1"/>
         <button id="attachment_reminder_button"
                 label="&attachmentReminderOptions.label;"
@@ -282,11 +282,11 @@
                 <description>&addCloudFileAccount.description;</description>
               </vbox>
               <vbox id="cloudFileSettingsWrapper" flex="1">
               </vbox>
             </deck>
           </vbox>
         </hbox>
       </vbox>
-    </groupbox>
+    </html:fieldset>
 
   </prefpane>
--- a/mail/components/preferences/connection.xhtml
+++ b/mail/components/preferences/connection.xhtml
@@ -3,16 +3,17 @@
 <!-- -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 4 -*-
    - 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/. -->
 
 <!DOCTYPE window SYSTEM "chrome://messenger/locale/preferences/connection.dtd">
 
 <?xml-stylesheet href="chrome://global/skin/"?>
+<?xml-stylesheet href="chrome://messenger/skin/messenger.css"?>
 <?xml-stylesheet href="chrome://messenger/skin/preferences/preferences.css"?>
 <?xml-stylesheet href="chrome://messenger/skin/input-fields.css"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"
         title="&connectionsDialog.title;"
         onbeforeaccept="return gConnectionsDialog.beforeAccept();"
         onload="gConnectionsDialog.checkForSystemProxy();"
@@ -29,18 +30,18 @@
     <html:link rel="localization" href="messenger/preferences/connection.ftl"/>
   </linkset>
 
   <script src="chrome://global/content/globalOverlay.js"/>
   <script src="chrome://global/content/editMenuOverlay.js"/>
   <script src="chrome://global/content/preferencesBindings.js"/>
   <script src="chrome://messenger/content/preferences/connection.js"/>
 
-  <groupbox>
-    <label><html:h2>&proxyTitle.label;</html:h2></label>
+  <html:fieldset>
+    <html:legend>&proxyTitle.label;</html:legend>
 
     <radiogroup id="networkProxyType" preference="network.proxy.type">
       <radio value="0" label="&noProxyTypeRadio.label;" accesskey="&noProxyTypeRadio.accesskey;"/>
       <radio value="4" label="&WPADTypeRadio.label;" accesskey="&WPADTypeRadio.accesskey;"/>
       <radio value="5" label="&systemTypeRadio.label;" accesskey="&systemTypeRadio.accesskey;"
               id="systemPref" hidden="true"/>
       <radio value="1" label="&manualTypeRadio.label;" accesskey="&manualTypeRadio.accesskey;"/>
       <grid class="indent" flex="1">
@@ -114,17 +115,17 @@
                     type="url"
                     preference="network.proxy.autoconfig_url"
                     oninput="gConnectionsDialog.updateReloadButton();"/>
         <button id="autoReload" label="&reload.label;" accesskey="&reload.accesskey;"
                 oncommand="gConnectionsDialog.reloadPAC();"
                 preference="pref.advanced.proxies.disable_button.reload"/>
       </hbox>
     </radiogroup>
-  </groupbox>
+  </html:fieldset>
   <separator class="thin"/>
   <label value="&noproxy.label;"
           accesskey="&noproxy.accesskey;"
           control="networkProxyNone"/>
   <html:textarea id="networkProxyNone" rows="2" preference="network.proxy.no_proxies_on"/>
   <label value="&noproxyExplain.label;" control="networkProxyNone"/>
   <label id="networkProxyNoneLocalhost" control="networkProxyNone" value="&noproxyLocalhostDesc.label;"/>
   <separator class="thin"/>
--- a/mail/components/preferences/dockoptions.xhtml
+++ b/mail/components/preferences/dockoptions.xhtml
@@ -19,31 +19,33 @@
 
   <prefpane id="DockOptionsDialogPane">
     <hbox orient="vertical">
       <checkbox id="newMailNotificationBounce"
                 label="&bounceSystemDockIcon.label;"
                 preference="mail.biff.animate_dock_icon"
                 accesskey="&bounceSystemDockIcon.accesskey;"/>
       <separator class="thin"/>
-      <groupbox flex="1">
-        <label><html:h2>&dockIconBadge.label;</html:h2></label>
+      <html:fieldset>
+        <html:legend>&dockIconBadge.label;</html:legend>
+        <vbox>
         <separator class="thin"/>
         <label value="&dockIconShow.label;"/>
         <radiogroup id="dockCount"
                     preference="mail.biff.use_new_count_in_mac_dock"
                     class="indent" orient="vertical">
           <radio id="dockCountAll" value="false"
                  label="&showAllUnreadMessagesCount.label;"
                  accesskey="showAllUnreadMessagesCount.accesskey"/>
           <radio id="dockCountNew" value="true"
                  label="&newMessagesCountDock.label;"
                  accesskey="&newMessagesCountDock.label;"/>
         </radiogroup>
-      </groupbox>
+        </vbox>
+      </html:fieldset>
       <separator/>
       <description class="bold">&directNotificationSettings.label;</description>
     </hbox>
   </prefpane>
 
   <script src="chrome://global/content/preferencesBindings.js"/>
   <script src="chrome://messenger/content/preferences/dockoptions.js"/>
 </dialog>
--- a/mail/components/preferences/fonts.xhtml
+++ b/mail/components/preferences/fonts.xhtml
@@ -1,14 +1,15 @@
 <?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 https://mozilla.org/MPL/2.0/. -->
 
 <?xml-stylesheet href="chrome://global/skin/"?>
+<?xml-stylesheet href="chrome://messenger/skin/messenger.css"?>
 <?xml-stylesheet href="chrome://messenger/skin/preferences/preferences.css"?>
 
 <!DOCTYPE window [
 <!ENTITY % fontsDTD SYSTEM "chrome://messenger/locale/preferences/fonts.dtd" >
 %fontsDTD;
 ]>
 
 <window class="prefwindow"
@@ -31,17 +32,17 @@
     <script src="chrome://global/content/preferencesBindings.js"/>
     <script src="chrome://mozapps/content/preferences/fontbuilder.js"/>
     <script src="chrome://messenger/content/preferences/fonts.js"/>
     <script src="chrome://messenger/content/menulist-charsetpicker.js"/>
     <linkset>
       <html:link rel="localization" href="messenger/preferences/fonts.ftl"/>
     </linkset>
 
-    <groupbox>
+    <html:fieldset>
       <hbox align="center">
         <label control="selectLangs">
           <html:h2 id="fontsTitle" accesskey="&language.accesskey;">&language.label;</html:h2>
         </label>
         <menulist id="selectLangs"
                   preference="font.language.group">
           <menupopup>
             <menuitem value="ar"              label="&font.langGroup.arabic;"/>
@@ -223,38 +224,38 @@
               <menuitem value="48" label="48"/>
               <menuitem value="56" label="56"/>
               <menuitem value="64" label="64"/>
               <menuitem value="72" label="72"/>
             </menupopup>
           </menulist>
         </hbox>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox>
-      <label><html:h2>&fontControl.label;</html:h2></label>
+    <html:fieldset>
+      <html:legend>&fontControl.label;</html:legend>
 
       <hbox>
         <checkbox id="useDocumentFonts"
                   label="&useDocumentFonts.label;"
                   accesskey="&useDocumentFonts.accesskey;"
                   preference="browser.display.use_document_fonts"/>
       </hbox>
 
       <hbox>
         <checkbox id="mailFixedWidthMessages"
                   label="&useFixedWidthForPlainText.label;"
                   accesskey="&fixedWidth.accesskey;"
                   preference="mail.fixed_width_messages"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox align="start">
-      <label><html:h2>&languagesTitle2.label;</html:h2></label>
+    <html:fieldset>
+      <html:legend>&languagesTitle2.label;</html:legend>
 
       <label value="&composingDescription2.label;"/>
 
       <separator class="thin"/>
       <hbox>
         <vbox pack="end">
           <hbox align="center" flex="1" class="indent">
             <label control="sendDefaultCharsetList"
@@ -275,13 +276,13 @@
         </vbox>
       </hbox>
 
       <separator class="thin"/>
 
       <checkbox id="replyInDefaultCharset" label="&replyInDefaultCharset3.label;"
                 preference="mailnews.reply_in_default_charset"
                 accesskey="&replyInDefaultCharset3.accesskey;"/>
-    </groupbox>
+    </html:fieldset>
     <separator/>
   </vbox>
 </dialog>
 </window>
--- a/mail/components/preferences/general.inc.xhtml
+++ b/mail/components/preferences/general.inc.xhtml
@@ -29,56 +29,59 @@
 #endif
 
     <hbox id="generalCategory"
           class="subcategory"
           data-category="paneGeneral">
       <html:h1 data-l10n-id="pane-general-title"/>
     </hbox>
 
-    <groupbox data-category="paneGeneral">
-      <label><html:h2>&messengerStartPage.label;</html:h2></label>
+    <html:fieldset data-category="paneGeneral">
+      <html:legend>&messengerStartPage.label;</html:legend>
+      <vbox>
         <hbox align="start">
           <checkbox id="mailnewsStartPageEnabled" label="&enableStartPage.label;"
                     preference="mailnews.start_page.enabled"
                     accesskey="&enableStartPage.accesskey;"/>
         </hbox>
         <hbox align="center" class="input-container">
           <label value="&location.label;" accesskey="&location1.accesskey;" control="mailnewsStartPageUrl"/>
           <html:input id="mailnewsStartPageUrl"
                       type="text"
                       preference="mailnews.start_page.url"/>
           <button id="browseForStartPageUrl"
                   label="&useDefault.label;"
                   accesskey="&useDefault.accesskey;"
                   oncommand="gGeneralPane.restoreDefaultStartPage();">
           </button>
         </hbox>
-    </groupbox>
+      </vbox>
+    </html:fieldset>
 
-    <groupbox data-category="paneGeneral">
-      <label><html:h2 >&defaultSearchEngine.label;</html:h2></label>
+    <html:fieldset data-category="paneGeneral">
+      <html:legend>&defaultSearchEngine.label;</html:legend>
       <hbox align="center">
         <menulist id="defaultWebSearch">
           <menupopup id="defaultWebSearchPopup"/>
         </menulist>
         <button id="addSearchEngine"
                 label="&addSearchEngine.label;"
                 accesskey="&addSearchEngine.accesskey;"
                 oncommand="gGeneralPane.addSearchEngine();"/>
         <button id="removeSearchEngine"
                 label="&removeSearchEngine.label;"
                 accesskey="&removeSearchEngine.accesskey;"
                 oncommand="gGeneralPane.removeSearchEngine();"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
 #ifdef HAVE_SHELL_SERVICE
-    <groupbox id="systemDefaultsGroup" data-category="paneGeneral" orient="vertical">
-      <label><html:h2>&systemIntegration.label;</html:h2></label>
+    <html:fieldset id="systemDefaultsGroup" data-category="paneGeneral">
+      <html:legend>&systemIntegration.label;</html:legend>
+      <vbox>
       <hbox id="checkDefaultBox" align="center">
         <checkbox id="alwaysCheckDefault"
                   preference="mail.shell.checkDefaultClient"
                   label="&alwaysCheckDefault.label;"
                   accesskey="&alwaysCheckDefault.accesskey;"/>
         <spacer flex="1"/>
         <button id="checkDefaultButton" label="&checkDefaultsNow.label;"
                 accesskey="&checkDefaultsNow.accesskey;"
@@ -86,28 +89,29 @@
                 preference="pref.general.disable_button.default_mail"/>
       </hbox>
       <hbox id="searchIntegrationContainer">
         <checkbox id="searchIntegration"
                   preference="searchintegration.enable"
                   label="&searchIntegration.label;"
                   accesskey="&searchIntegration.accesskey;"/>
       </hbox>
-    </groupbox>
+      </vbox>
+    </html:fieldset>
 #endif
 
     <hbox id="languageAndAppearanceCategory"
           class="subcategory"
           data-category="paneGeneral">
       <html:h1 data-l10n-id="general-language-and-appearance-header"/>
     </hbox>
 
     <!-- Fonts and Colors -->
-    <groupbox id="fontsGroup" data-category="paneGeneral">
-      <label><html:h2>&fontsAndColors1.label;</html:h2></label>
+    <html:fieldset id="fontsGroup" data-category="paneGeneral">
+      <html:legend>&fontsAndColors1.label;</html:legend>
 
       <hbox id="fontSettings" flex="1">
         <vbox id="fontRow" flex="1">
           <hbox align="center">
             <label accesskey="&defaultFont.accesskey;" control="defaultFont">&defaultFont.label;</label>
             <menulist id="defaultFont" flex="1" sizetopopup="pref" crop="center">
               <menupopup crop="center"/>
             </menulist>
@@ -146,17 +150,17 @@
         <vbox id="colorsRow">
           <button id="advancedFonts" flex="1" label="&fontOptions.label;" icon="select-font"
                   accesskey="&fontOptions.accesskey;" oncommand="gGeneralPane.configureFonts();"/>
           <button id="colors" flex="1" icon="select-color" label="&colorButton.label;"
                   accesskey="&colorButton.accesskey;" oncommand="gGeneralPane.configureColors();"/>
         </vbox>
       </hbox>
       <hbox>
-        <label><html:h2>&displayWidth.label;</html:h2></label>
+        <html:legend>&displayWidth.label;</html:legend>
       </hbox>
       <hbox>
         <checkbox id="displayGlyph"
                   label="&convertEmoticons.label;"
                   preference="mail.display_glyph"
                   accesskey="&convertEmoticons.accesskey;"/>
         <spacer flex="1"/>
       </hbox>
@@ -180,35 +184,35 @@
             <menuitem value="0" label="&regularSize.label;"/>
             <menuitem value="1" label="&bigger.label;"/>
             <menuitem value="2" label="&smaller.label;"/>
           </menupopup>
         </menulist>
         <label value="&quotedTextColor.label;" accesskey="&quotedTextColor.accesskey;" control="citationmenu"/>
         <html:input type="color" id="citationmenu" preference="mail.citation_color"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <!-- Date and time formatting -->
-    <groupbox data-category="paneGeneral">
-      <label><html:h2>&dateTimeFormatting.label;</html:h2></label>
+    <html:fieldset data-category="paneGeneral">
+      <html:legend>&dateTimeFormatting.label;</html:legend>
       <radiogroup id="formatLocale" align="start"
                   preference="intl.regional_prefs.use_os_locales"
                   orient="vertical">
         <radio id="appLocale"
                value="false"/>
                <!-- label and accesskey will be set dynamically -->
         <radio id="rsLocale"
                value="true"/>
                <!-- label and accesskey will be set dynamically -->
       </radiogroup>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox id="messengerLanguagesBox" data-category="paneGeneral" hidden="true">
-      <label><html:h2>&languageSelector.label;</html:h2></label>
+    <html:fieldset id="messengerLanguagesBox" data-category="paneGeneral" hidden="hidden">
+      <html:legend>&languageSelector.label;</html:legend>
         <vbox align="start">
         <description flex="1"
                      controls="chooseMessengerLanguage"
                      data-l10n-id="choose-messenger-language-description"/>
         <hbox>
           <menulist id="defaultMessengerLanguage"
                     oncommand="gGeneralPane.onMessengerLanguageChange(event)">
             <menupopup/>
@@ -221,46 +225,46 @@
       </vbox>
       <hbox id="confirmMessengerLanguage"
             class="message-bar"
             align="center"
             hidden="true">
         <image class="message-bar-icon"/>
         <vbox class="message-bar-content-container" align="stretch" flex="1"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <!-- Scrolling -->
-    <groupbox id="scrollingGroup" data-category="paneGeneral">
-      <label><html:h2>&scrolling.label;</html:h2></label>
+    <html:fieldset id="scrollingGroup" data-category="paneGeneral">
+      <html:legend>&scrolling.label;</html:legend>
       <hbox>
         <checkbox id="useAutoScroll"
                   label="&useAutoScroll.label;"
                   accesskey="&useAutoScroll.accesskey;"
                   preference="general.autoScroll"/>
         <spacer flex="1"/>
       </hbox>
       <hbox>
         <checkbox id="useSmoothScrolling"
                   label="&useSmoothScrolling.label;"
                   accesskey="&useSmoothScrolling.accesskey;"
                   preference="general.smoothScroll"/>
         <spacer flex="1"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
 
     <hbox id="incomingMailCategory"
           class="subcategory"
           data-category="paneGeneral">
       <html:h1 data-l10n-id="general-incoming-mail-header"/>
     </hbox>
 
-    <groupbox data-category="paneGeneral">
-      <label><html:h2>&newMessagesArrive.label;</html:h2></label>
+    <html:fieldset data-category="paneGeneral">
+      <html:legend>&newMessagesArrive.label;</html:legend>
 #ifdef XP_MACOSX
       <hbox align="center">
         <description flex="1">&changeDockIconOptions.label;</description>
         <button id="dockOptions" label="&dockOptions.label;"
                 accesskey="&dockOptions.accesskey;"
                 oncommand="gGeneralPane.configureDockOptions();"/>
       </hbox>
       <description class="bold">&notificationAlertSettings2.label;</description>
@@ -328,25 +332,25 @@
                     preference="mail.biff.play_sound.url"
                     preference-editable="true"
                     aria-labelledby="custom"/>
         <button id="browseForSound"
                 label="&browse.label;"
                 accesskey="&browse.accesskey;"
                 oncommand="gGeneralPane.browseForSoundFile();"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <hbox id="filesAttachmentCategory"
           class="subcategory"
           data-category="paneGeneral">
       <html:h1 data-l10n-id="general-files-and-attachment-header"/>
     </hbox>
 
-    <groupbox data-category="paneGeneral">
+    <html:fieldset data-category="paneGeneral">
       <hbox>
         <search-textbox id="filter"
                         flex="1"
                         placeholder="&filter.placeholder;"
                         aria-controls="handlersView"
                         oncommand="gGeneralPane._rebuildView();"/>
       </hbox>
 
@@ -391,25 +395,25 @@
           <hbox>
             <radio id="alwaysAsk"
                    value="false"
                    label="&alwaysAsk.label;"
                    accesskey="&alwaysAsk.accesskey;"/>
           </hbox>
         </radiogroup>
       </vbox>
-    </groupbox>
+    </html:fieldset>
 
     <hbox id="tagsCategory"
           class="subcategory"
           data-category="paneGeneral">
       <html:h1 data-l10n-id="general-tags-header"/>
     </hbox>
 
-    <groupbox data-category="paneGeneral">
+    <html:fieldset data-category="paneGeneral">
       <label control="tagList">&displayTagsText.label;</label>
       <hbox>
         <richlistbox id="tagList"
                      flex="1"
                      height="180px"
                      ondblclick="gGeneralPane.editTag();"
                      onselect="gGeneralPane.onSelectTag();"/>
         <vbox id="tagButtons">
@@ -420,26 +424,26 @@
                   accesskey="&editTagButton1.accesskey;"
                   oncommand="gGeneralPane.editTag();"/>
           <button id="removeTagButton" disabled="true"
                   label="&removeTagButton.label;"
                   accesskey="&removeTagButton.accesskey;"
                   oncommand="gGeneralPane.removeTag();"/>
         </vbox>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
 
     <hbox id="readingAndDisplayCategory"
           class="subcategory"
           data-category="paneGeneral">
       <html:h1 data-l10n-id="general-reading-and-display-header"/>
     </hbox>
 
-    <groupbox data-category="paneGeneral">
+    <html:fieldset data-category="paneGeneral">
       <vbox>
         <hbox>
           <checkbox id="automaticallyMarkAsRead"
                     preference="mailnews.mark_message_read.auto"
                     label="&autoMarkAsRead.label;"
                     accesskey="&autoMarkAsRead.accesskey;"/>
         </hbox>
 
@@ -508,28 +512,28 @@
 
       <hbox align="center">
         <description flex="1">&returnReceiptsInfo.label;</description>
         <button id="showReturnReceipts"
                 label="&showReturnReceipts.label;"
                 accesskey="&showReturnReceipts.accesskey;"
                 oncommand="gGeneralPane.showReturnReceipts();"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
 #ifdef MOZ_UPDATER
     <hbox id="updatesCategory"
           class="subcategory"
           data-category="paneGeneral">
       <html:h1 data-l10n-id="general-updates-header"/>
     </hbox>
 
     <!-- Update -->
-    <groupbox id="updateApp" data-category="paneGeneral">
-      <label><html:h2>&updateApp2.label;</html:h2></label>
+    <html:fieldset id="updateApp" data-category="paneGeneral">
+      <html:legend>&updateApp2.label;</html:legend>
       <hbox align="center">
         <vbox>
           <description>
             &updateApp.version.pre;<label id="version"/>&updateApp.version.post;
             <label is="text-link" id="releasenotes" hidden="true">&releaseNotes.link;</label>
           </description>
           <description id="distribution" class="text-blurb" hidden="true"/>
           <description id="distributionId" class="text-blurb" hidden="true"/>
@@ -642,48 +646,48 @@
 
 #ifdef MOZ_MAINTENANCE_SERVICE
       <separator class="thin"/>
       <checkbox id="useService"
                 label="&useService.label;"
                 accesskey="&useService.accesskey;"
                 preference="app.update.service.enabled"/>
 #endif
-    </groupbox>
+    </html:fieldset>
 #endif
 
     <hbox id="networkAndDiskspaceCategory"
           class="subcategory"
           data-category="paneGeneral">
       <html:h1 data-l10n-id="general-network-and-diskspace-header"/>
     </hbox>
 
     <!-- Networking & Disk Space -->
-    <groupbox data-category="paneGeneral">
-      <label><html:h2>&connectionsInfo.caption;</html:h2></label>
+    <html:fieldset data-category="paneGeneral">
+      <html:legend>&connectionsInfo.caption;</html:legend>
       <hbox align="center">
         <description flex="1" control="catProxiesButton">&proxiesConfigure.label;</description>
         <button id="catProxiesButton" icon="network" label="&showSettings.label;"
                 accesskey="&showSettings.accesskey;"
                 oncommand="gGeneralPane.showConnections();"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox data-category="paneGeneral">
-      <label><html:h2>&offlineInfo.caption;</html:h2></label>
+    <html:fieldset data-category="paneGeneral">
+      <html:legend>&offlineInfo.caption;</html:legend>
       <hbox align="center">
         <description flex="1" control="offlineSettingsButton">&offlineInfo.label;</description>
         <button id="offlineSettingsButton" label="&showOffline.label;"
                 accesskey="&showOffline.accesskey;"
                 oncommand="gGeneralPane.showOffline();"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox data-category="paneGeneral">
-      <label><html:h2>&Diskspace;</html:h2></label>
+    <html:fieldset data-category="paneGeneral">
+      <html:legend>&Diskspace;</html:legend>
       <hbox align="center">
         <label id="actualDiskCacheSize" flex="1"/>
         <button id="clearCacheButton" icon="clear"
                 label="&clearCacheNow.label;" accesskey="&clearCacheNow.accesskey;"
                 oncommand="gGeneralPane.clearCache();"/>
       </hbox>
       <hbox>
         <checkbox preference="browser.cache.disk.smart_size.enabled"
@@ -707,20 +711,20 @@
                     preference="mail.prompt_purge_threshhold"
                     oncommand="gGeneralPane.updateCompactOptions(this.checked);"/>
           <html:input id="offlineCompactFolderMin" type="number" class="size4"
                       min="1" max="2048" value="200"
                       preference="mail.purge_threshhold_mb"
                       aria-labelledby="offlineCompactFolder offlineCompactFolderMin compactFolderMB"/>
           <label id="compactFolderMB" value="&offlineCompactFoldersMB.label;"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox data-category="paneGeneral">
-      <label><html:h2 data-l10n-id="general-indexing-label"/></label>
+    <html:fieldset data-category="paneGeneral">
+      <html:legend data-l10n-id="general-indexing-label"></html:legend>
       <vbox>
         <hbox>
           <checkbox id="enableGloda"
                     preference="mailnews.database.global.indexer.enabled"
                     label="&enableGlodaSearch.label;"
                     accesskey="&enableGlodaSearch.accesskey;"/>
         </hbox>
         <hbox align="center">
@@ -743,21 +747,21 @@
           <checkbox id="allowHWAccel"
                     label="&allowHWAccel.label;"
                     accesskey="&allowHWAccel.accesskey;"
                     preference="layers.acceleration.disabled"/>
         </hbox>
       </vbox>
       <vbox>
       </vbox>
-    </groupbox>
+    </html:fieldset>
 
     <separator class="thin" data-category="paneGeneral"/>
 
-    <groupbox data-category="paneGeneral">
+    <html:fieldset data-category="paneGeneral">
       <hbox pack="end">
         <button id="configEditor" label="&configEdit.label;"
                 accesskey="&configEdit.accesskey;"
                 oncommand="gGeneralPane.showConfigEdit();"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
   </prefpane>
--- a/mail/components/preferences/privacy.inc.xhtml
+++ b/mail/components/preferences/privacy.inc.xhtml
@@ -8,39 +8,39 @@
 
     <hbox id="privacyCategory"
           class="subcategory"
           data-category="panePrivacy">
       <html:h1 data-l10n-id="privacy-main-header"/>
     </hbox>
 
     <!-- Mail Content -->
-    <groupbox id="mailContentGroup" data-category="panePrivacy">
-      <label><html:h2>&captionMailContent.label;</html:h2></label>
+    <html:fieldset id="mailContentGroup" data-category="panePrivacy">
+      <html:legend>&captionMailContent.label;</html:legend>
       <hbox id="remoteContentBox">
         <checkbox id="acceptRemoteContent"
                   preference="mailnews.message_display.disable_remote_image"
                   label="&acceptRemoteContent.label;"
                   accesskey="&acceptRemoteContent.accesskey;"/>
         <spacer flex="1"/>
         <button id="remoteContentExceptions"
                 oncommand="gPrivacyPane.showRemoteContentExceptions();"
                 label="&remoteContentExceptions.label;"
                 accesskey="&remoteContentExceptions.accesskey;"/>
       </hbox>
       <hbox>
         <label is="text-link" id="acceptRemoteContentInfo"
                href="https://support.mozilla.org/kb/remote-content-in-messages"
                value="&acceptRemoteContentInfo.label;"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <!-- Web Content -->
-    <groupbox id="webContentGroup" data-category="panePrivacy">
-      <label><html:h2>&captionWebContent.label;</html:h2></label>
+    <html:fieldset id="webContentGroup" data-category="panePrivacy">
+      <html:legend>&captionWebContent.label;</html:legend>
       <checkbox id="keepHistory"
                 preference="places.history.enabled"
                 label="&keepHistory.label;"
                 accesskey="&keepHistory.accesskey;"/>
       <hbox id="cookiesBox">
         <checkbox id="acceptCookies"
                   preference="network.cookie.cookieBehavior"
                   label="&acceptCookies.label;"
@@ -93,27 +93,27 @@
                   class="tail-with-learn-more"
                   label="&doNotTrackCheck.label;"
                   accesskey="&doNotTrackCheck.accesskey;"
                   preference="privacy.donottrackheader.enabled"/>
         <label is="text-link" id="doNotTrackInfo"
                href="https://www.mozilla.org/dnt"
                value="&doNotTrackLearnMore.label;"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <hbox id="privacyPasswordsCategory"
           class="subcategory"
           data-category="panePrivacy">
       <html:h1 data-l10n-id="privacy-passwords-header"/>
     </hbox>
 
     <separator data-category="panePrivacy"/>
 
-    <groupbox data-category="panePrivacy">
+    <html:fieldset data-category="panePrivacy">
       <hbox align="center">
         <description>&savedPasswords.intro;</description>
         <spacer flex="1"/>
         <button label="&savedPasswords.label;"
                 accesskey="&savedPasswords.accesskey;"
                 oncommand="gPrivacyPane.showPasswords();"
                 preference="pref.privacy.disable_button.view_passwords"/>
       </hbox>
@@ -128,27 +128,27 @@
                   accesskey="&useMasterPassword.accesskey;"
                   oncommand="gPrivacyPane.updateMasterPasswordButton();"/>
         <spacer flex="1"/>
         <button id="changeMasterPassword"
                 label="&changeMasterPassword.label;"
                 accesskey="&changeMasterPassword.accesskey;"
                 oncommand="gPrivacyPane.changeMasterPassword();"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <hbox id="privacyJunkCategory"
           class="subcategory"
           data-category="panePrivacy">
       <html:h1 data-l10n-id="privacy-junk-header"/>
     </hbox>
 
     <separator data-category="panePrivacy"/>
 
-    <groupbox data-category="panePrivacy">
+    <html:fieldset data-category="panePrivacy">
       <description>&junkMail.intro;</description>
       <separator class="thin"/>
       <hbox>
         <checkbox id="manualMark"
                   label="&manualMark.label;"
                   preference="mail.spam.manualMark"
                   oncommand="gPrivacyPane.updateManualMarkMode(this.checked);"
                   accesskey="&manualMark.accesskey;"/>
@@ -184,96 +184,96 @@
         <checkbox id="enableJunkLogging" label="&enableAdaptiveJunkLogging.label;"
                   oncommand="gPrivacyPane.updateJunkLogButton(this.checked);"
                   preference="mail.spam.logging.enabled"
                   accesskey="&enableAdaptiveJunkLogging.accesskey;"/>
         <spacer flex="1"/>
         <button id="openJunkLogButton" label="&openJunkLog.label;" accesskey="&openJunkLog.accesskey;"
                 oncommand="gPrivacyPane.openJunkLog();"/>
       </hbox>
-      <hbox align="start">
+      <hbox align="start" style="padding-bottom:2em;">
         <spacer flex="1"/>
         <button label="&resetTrainingData.label;" accesskey="&resetTrainingData.accesskey;"
                 oncommand="gPrivacyPane.resetTrainingData()"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
 #ifdef MOZ_DATA_REPORTING
     <hbox id="privacyDataCollectionCategory"
           class="subcategory"
           data-category="panePrivacy">
       <html:h1 data-l10n-id="privacy-data-collection-header"/>
     </hbox>
 
 #ifdef MOZ_TELEMETRY_REPORTING
-    <groupbox data-category="panePrivacy">
-      <label><html:h2>&telemetrySection.label;</html:h2></label>
+    <html:fieldset data-category="panePrivacy">
+      <html:legend>&telemetrySection.label;</html:legend>
       <description>&telemetryDesc.label;</description>
       <hbox align="center">
         <checkbox id="submitTelemetryBox"
                   class="tail-with-learn-more"
                   preference="toolkit.telemetry.enabled"
                   label="&enableTelemetry.label;"
                   accesskey="&enableTelemetry.accesskey;"/>
         <label is="text-link" id="telemetryLearnMore"
                value="&telemetryLearnMore.label;"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 #endif
 #ifdef MOZ_CRASHREPORTER
-    <groupbox data-category="panePrivacy">
-      <label><html:h2>&crashReporterSection.label;</html:h2></label>
+    <html:fieldset data-category="panePrivacy">
+      <html:legend>&crashReporterSection.label;</html:legend>
       <description>&crashReporterDesc.label;</description>
       <hbox align="center">
         <checkbox id="submitCrashesBox" class="tail-with-learn-more"
                   oncommand="gPrivacyPane.updateSubmitCrashes();"
                   label="&enableCrashReporter.label;"
                   accesskey="&enableCrashReporter.accesskey;"/>
         <label is="text-link" id="crashReporterLearnMore"
                value="&crashReporterLearnMore.label;"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 #endif
 #endif
 
     <hbox id="privacySecurityCategory"
           class="subcategory"
           data-category="panePrivacy">
       <html:h1 data-l10n-id="privacy-security-header"/>
     </hbox>
 
-    <groupbox data-category="panePrivacy">
-      <label><html:h2 data-l10n-id="privacy-scam-detection-title"/></label>
+    <html:fieldset data-category="panePrivacy">
+      <html:legend data-l10n-id="privacy-scam-detection-title"></html:legend>
       <description>&phishingDetector1.intro;</description>
       <separator class="thin"/>
       <hbox>
         <checkbox id="enablePhishingDetector"
                   label="&enablePhishingDetector1.label;"
                   accesskey="&enablePhishingDetector1.accesskey;"
                   preference="mail.phishing.detection.enabled"/>
         <spacer flex="1"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <!-- Anti Virus -->
-    <groupbox data-category="panePrivacy">
-      <label><html:h2 data-l10n-id="privacy-anti-virus-title"/></label>
+    <html:fieldset data-category="panePrivacy">
+      <html:legend data-l10n-id="privacy-anti-virus-title"></html:legend>
       <description>&antiVirus.intro;</description>
       <separator class="thin"/>
       <hbox>
         <checkbox id="enableAntiVirusQuaruntine"
                   label="&antiVirus.label;"
                   accesskey="&antiVirus.accesskey;"
                   preference="mailnews.downloadToTempFile"/>
         <spacer flex="1"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox data-category="panePrivacy">
-      <label><html:h2 data-l10n-id="privacy-certificates-title"/></label>
+    <html:fieldset data-category="panePrivacy">
+      <html:legend data-l10n-id="privacy-certificates-title"></html:legend>
       <description id="CertSelectionDesc" control="certSelection">&certSelection.description;</description>
 
       <!--
         The values on these radio buttons may look like l12y issues, but
         they're not - this preference uses *those strings* as its values.
         I KID YOU NOT.
       -->
       <radiogroup id="certSelection" class="indent"
@@ -305,11 +305,11 @@
                   preference="security.disable_button.openCertManager"/>
           <button id="viewSecurityDevicesButton"
                   label="&viewSecurityDevices2.label;"
                   accesskey="&viewSecurityDevices2.accesskey;"
                   oncommand="gPrivacyPane.showSecurityDevices();"
                   preference="security.disable_button.openDeviceManager"/>
         </vbox>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
   </prefpane>
--- a/mail/components/preferences/sendoptions.xhtml
+++ b/mail/components/preferences/sendoptions.xhtml
@@ -23,19 +23,19 @@
         dlgbuttons="accept,cancel">
 
   <prefpane id="SendOptionsDialogPane">
     <script src="chrome://global/content/preferencesBindings.js"/>
     <script src="chrome://messenger/content/preferences/sendoptions.js"/>
 
     <stringbundle id="bundlePreferences" src="chrome://messenger/locale/preferences/preferences.properties"/>
 
-    <groupbox>
-      <label><html:h2>&sendMail.title;</html:h2></label>
-
+    <html:fieldset style="padding-bottom:2em;">
+      <html:legend>&sendMail.title;</html:legend>
+      <vbox>
       <checkbox id="autoDowngrade"
                 label="&autoDowngrade.label;"
                 accesskey="&autoDowngrade.accesskey;"
                 preference="mailnews.sendformat.auto_downgrade"/>
 
       <label control="mailDefaultHTMLAction" width="1">&sendMaildesc.label;</label>
 
       <hbox class="indent" id="thenBox">
@@ -47,17 +47,18 @@
             <menuitem value="3" label="&sendBoth.label;" accesskey="&sendBoth.accesskey;"/>
           </menupopup>
         </menulist>
       </hbox>
 
       <separator class="thin"/>
 
       <description control="mailDefaultHTMLAction">&override.label;</description>
-    </groupbox>
+      </vbox>
+    </html:fieldset>
 
     <separator class="thin"/>
 
     <tabbox>
       <tabs id="sendOptionsTabs">
         <tab label="&HTMLTab.label;" accesskey="&HTMLTab.accesskey;"/>
         <tab label="&PlainTextTab.label;" accesskey="&PlainTextTab.accesskey;"/>
       </tabs>
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -832,15 +832,23 @@ findbar {
 
 :root:not([lwtheme-image]) findbar:-moz-lwtheme {
   background-color: var(--lwt-accent-color);
   background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
   border-top-color: var(--chrome-content-separator-color);
   color: var(--toolbar-color);
 }
 
-/* ::::: groupbox ::::: */
-
-groupbox {
-  -moz-appearance: groupbox;
+fieldset {
   margin: 5px;
   padding: 5px;
+  border: none;
 }
+
+legend {
+  font-weight: bold;
+}
+
+fieldset > hbox,
+fieldset > vbox,
+fieldset > radiogroup {
+  width: -moz-available;
+}
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -733,25 +733,29 @@ findbar {
   border-top-color: var(--chrome-content-separator-color);
   color: var(--toolbar-color);
 }
 
 .contentTabAddress * {
   text-shadow: none;
 }
 
-/* ::::: groupbox ::::: */
-
-groupbox {
-  -moz-appearance: groupbox;
+fieldset {
   padding: 0 8px 5px;
-  margin: 6px;
-  margin-top: 1.5em;
+  margin: 1.5em 6px 6px 6px;
+  border: none;
 }
 
-groupbox > .groupbox-title > .header {
+legend {
   font-size: 1.18em;
   font-weight: normal;
   margin-top: -1.3em;
   margin-bottom: 5px;
   margin-inline-start: -5px;
+  font-weight: bold;
 }
 
+fieldset > hbox,
+fieldset > vbox,
+fieldset > radiogroup {
+  width: -moz-available;
+}
+
--- a/mail/themes/shared/mail/EditorDialog.css
+++ b/mail/themes/shared/mail/EditorDialog.css
@@ -277,31 +277,33 @@ tree.list {
 #AddJSEAttributeNameList > menupopup > menuseparator,
 #AddHTMLAttributeNameInput > menupopup > menuseparator {
   -moz-appearance: none;
   margin-block: 3px;
   padding-block: 0;
   border-top-color: #d7d7d7;
 }
 
-/* ::::: groupbox ::::: */
-
-groupbox {
-  -moz-appearance: groupbox;
-  margin: 3px;
-  margin-top: 1em;
+html|fieldset {
+  margin: 1em 3px 3px 3px;
   padding: 3px 0 6px;
+  border: none;
 }
-
-groupbox > .groupbox-title > .header {
-  font-weight: normal;
+html|legend {
+  font-weight: bold;
   margin-top: -1em;
   margin-inline-start: 3px;
   padding-inline: 3px;
-  background-color: -moz-dialog;
+}
+
+html|fieldset > hbox,
+html|fieldset > vbox,
+html|fieldset > radiogroup,
+html|fieldset > menulist {
+  width: -moz-available;
 }
 
 html|table html|th {
   font-weight: normal;
   text-align: start;
 }
 
 *|*.display-flex {
--- a/mail/themes/shared/mail/accountManage.css
+++ b/mail/themes/shared/mail/accountManage.css
@@ -10,19 +10,17 @@
 @import url("chrome://global/skin/in-content/common.css");
 @import url("chrome://messenger/skin/preferences/preferences.css");
 
 window > vbox {
   padding-block: 40px;
   padding-inline: 25px 28px;
 }
 
-groupbox {
-  -moz-appearance: none;
-  border-style: none;
+fieldset {
   margin: 0 0 32px;
   padding: initial;
 }
 
 #accountTreeBox {
   margin-block: 28px;
   margin-inline: 28px 3px;
 }
--- a/mail/themes/shared/mail/incontentprefs/preferences.css
+++ b/mail/themes/shared/mail/incontentprefs/preferences.css
@@ -55,36 +55,35 @@
  */
 
 .subcategory:not([hidden]) ~ .subcategory {
   margin-top: 16px;
   padding-top: 16px;
   border-top: 1px solid var(--in-content-border-color);
 }
 
-groupbox[data-category] {
+fieldset[data-category] {
   margin: 0 0 32px;
 }
 
 html|h1 {
   margin: 0 0 8px;
   font-size: 1.46em;
   font-weight: 300;
   line-height: 1.3em;
 }
 
-html|h2 {
+html|legend {
   margin: 16px 0 4px;
   font-size: 1.1em;
 }
 
-html|h3 {
-  font-size: 1em;
-  font-weight: 600;
-  margin: 4px 0 !important;
+html|th {
+  font-weight: normal;
+  text-align: start;
 }
 
 description,
 label {
   line-height: 1.8em;
   margin: 0;
 }
 
@@ -405,22 +404,16 @@ html|input.indent {
 #monospace {
   min-width: 30ch;
 }
 
 /**
  * toolkit element overrides
  */
 
-groupbox 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),
-groupbox description {
-  /* !important needed to override toolkit !important rule */
-  margin-inline: 0 !important;
-}
-
 richlistbox {
   -moz-appearance: none;
   background-color: var(--in-content-box-background);
   color: var(--in-content-text-color);
 }
 
 richlistbox richlistitem {
   padding: 0.3em;
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -894,25 +894,30 @@ findbar {
   background-color: var(--lwt-accent-color);
   background-image: linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor));
   border-top-color: var(--chrome-content-separator-color);
   color: var(--toolbar-color);
 }
 
 /* ::::: groupbox ::::: */
 
-groupbox {
-  -moz-appearance: groupbox;
-  border: 2px groove ThreeDFace;
+fieldset {
+  border: 0.5px groove ThreeDLightShadow;
   border-radius: 3px;
-  margin: 3px;
-  margin-top: 1em;
+  margin: 1em 3px 3px 3px;
   padding: 3px 0 6px;
 }
 
-groupbox > .groupbox-title > .header {
+legend {
   font-weight: normal;
   margin-top: -1em;
   margin-inline-start: 3px;
   padding-right: 3px;
   padding-left: 3px;
   background-color: -moz-dialog;
+  font-weight: bold;
 }
+
+fieldset > hbox,
+fieldset > vbox,
+fieldset > radiogroup {
+  width: -moz-available;
+}
--- a/mailnews/base/content/folderProps.xhtml
+++ b/mailnews/base/content/folderProps.xhtml
@@ -77,31 +77,30 @@
                  accesskey="&folderCharsetFallback2.accesskey;"
                  control="folderCharsetList"/>
           <menulist is="menulist-charsetpicker-viewing" id="folderCharsetList"/>
         </hbox>
         <checkbox class="indent" id="folderCharsetOverride"
                   label="&folderCharsetEnforce2.label;"
                   accesskey="&folderCharsetEnforce2.accesskey;"/>
       </vbox>
-      <groupbox id="folderRebuildSummaryGroupBox" align="baseline">
-        <hbox>
-          <description id="folderRebuildSummaryExplanation" flex="1">
-            &folderRebuildSummaryFile.explanation;
-          </description>
-          <vbox>
-            <button id="folderRebuildSummaryButton"
-                    label="&folderRebuildSummaryFile2.label;"
-                    oncommand="RebuildSummaryInformation();"
-                    accesskey="&folderRebuildSummaryFile2.accesskey;"
-                    tooltiptext="&folderRebuildSummaryFileTip2.label;"
-                    align="center"/>
-          </vbox>
-        </hbox>
-      </groupbox>
+
+      <hbox>
+        <description id="folderRebuildSummaryExplanation" flex="1">
+          &folderRebuildSummaryFile.explanation;
+        </description>
+        <vbox>
+          <button id="folderRebuildSummaryButton"
+                  label="&folderRebuildSummaryFile2.label;"
+                  oncommand="RebuildSummaryInformation();"
+                  accesskey="&folderRebuildSummaryFile2.accesskey;"
+                  tooltiptext="&folderRebuildSummaryFileTip2.label;"
+                  align="center"/>
+        </vbox>
+      </hbox>
     </vbox>
 
     <vbox id="RetentionPanel" align="start">
     <description hidefor="imap,pop3" class="desc">&retentionCleanup.label;</description>
     <description hidefor="movemail,pop3,rss,none,nntp" class="desc">&retentionCleanupImap.label;</description>
     <description hidefor="movemail,imap,rss,none,nntp" class="desc">&retentionCleanupPop.label;</description>
 
         <hbox align="center" class="indent">
--- a/mailnews/base/prefs/content/SmtpServerEdit.xhtml
+++ b/mailnews/base/prefs/content/SmtpServerEdit.xhtml
@@ -21,18 +21,18 @@
   <stringbundle id="bundle_messenger"
                 src="chrome://messenger/locale/messenger.properties"/>
 
   <script src="chrome://global/content/globalOverlay.js"/>
   <script src="chrome://global/content/editMenuOverlay.js"/>
   <script src="chrome://messenger/content/SmtpServerEdit.js"/>
 
   <vbox id="smtpServerEditor">
-    <groupbox>
-      <label class="header">&settings.caption;</label>
+    <html:fieldset>
+      <html:legend>&settings.caption;</html:legend>
       <hbox flex="1">
         <vbox>
           <hbox flex="1" align="center">
             <label id="smtp.description.label"
                    value="&serverDescription.label;"
                    accesskey="&serverDescription.accesskey;"
                    control="smtp.description"/>
           </hbox>
@@ -67,22 +67,22 @@
                           min="0" max="65535"
                           preftype="int"
                           prefstring="mail.smtpserver.%serverkey%.port"/>
               <label value="&serverPortDefault.label;"/>
               <label id="smtp.defaultPort"/>
           </hbox>
         </vbox>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <separator class="thin"/>
 
-    <groupbox>
-      <label class="header">&security.caption;</label>
+    <html:fieldset>
+      <html:legend>&security.caption;</html:legend>
 
       <hbox flex="1">
         <vbox>
           <hbox flex="1" align="center">
             <label value="&connectionSecurity.label;"
                    accesskey="&connectionSecurity.accesskey;"
                    control="smtp.socketType"/>
           </hbox>
@@ -128,12 +128,12 @@
           <html:input id="smtp.username"
                       type="text"
                       class="input-inline"
                       preftype="string"
                       prefstring="mail.smtpserver.%serverkey%.username"
                       aria-labelledby="smtp.username.label"/>
         </vbox>
       </hbox>
-    </groupbox>
+    </html:fieldset>
   </vbox>
 </dialog>
 </window>
--- a/mailnews/base/prefs/content/am-addressing.inc.xhtml
+++ b/mailnews/base/prefs/content/am-addressing.inc.xhtml
@@ -1,17 +1,17 @@
 # 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/.
 
     <vbox flex="1" id="compositionAndAddressing">
       <stringbundle id="bundle_addressBook" src="chrome://messenger/locale/addressbook/addressBook.properties"/>
 
-      <groupbox>
-        <label class="header">&compositionGroupTitle.label;</label>
+      <html:fieldset>
+        <html:legend>&compositionGroupTitle.label;</html:legend>
         <hbox align="center">
           <checkbox wsm_persist="true" id="identity.composeHtml" label="&useHtml.label;"
                     accesskey="&useHtml.accesskey;"
                     prefattribute="value"
                     prefstring="mail.identity.%identitykey%.compose_html"/>
         </hbox>
 
         <separator class="thin"/>
@@ -61,22 +61,22 @@
         <separator class="thin"/>
 
         <hbox pack="start">
           <button id="globalComposingPrefsLink"
                   label="&globalComposingPrefs.label;"
                   accesskey="&globalComposingPrefs.accesskey;"
                   oncommand="showGlobalComposingPrefs();"/>
         </hbox>
-      </groupbox>
+      </html:fieldset>
 
       <separator class="thin"/>
 
-      <groupbox>
-        <label class="header">&addressingGroupTitle.label;</label>
+      <html:fieldset>
+        <html:legend>&addressingGroupTitle.label;</html:legend>
 #ifndef MOZ_THUNDERBIRD
         <hbox align="center">
           <checkbox wsm_persist="true" id="identity.autocompleteToMyDomain"
                     label="&autocompleteToMyDomain.label;"
                     accesskey="&autocompleteToMyDomain.accesskey;"
                     prefattribute="value"
                     prefstring="mail.identity.%identitykey%.autocompleteToMyDomain"/>
         </hbox>
@@ -112,10 +112,10 @@
         <separator class="thin"/>
 
         <hbox pack="start">
           <button id="globalAddressingPrefsLink"
                   label="&globalAddressingPrefs.label;"
                   accesskey="&globalAddressingPrefs.accesskey;"
                   oncommand="showGlobalAddressingPrefs();"/>
         </hbox>
-      </groupbox>
+      </html:fieldset>
     </vbox>
--- a/mailnews/base/prefs/content/am-archiveoptions.xhtml
+++ b/mailnews/base/prefs/content/am-archiveoptions.xhtml
@@ -27,19 +27,20 @@
              accesskey="&archiveYearly.accesskey;" class="indent"/>
       <radio label="&archiveMonthly.label;"
              accesskey="&archiveMonthly.accesskey;" class="indent"/>
     </radiogroup>
     <checkbox id="archiveKeepFolderStructure"
               label="&keepFolderStructure.label;"
               accesskey="&keepFolderStructure.accesskey;"/>
 
-    <groupbox flex="1">
-      <label class="header">&archiveExample.label;</label>
-      <tree id="archiveTree" hidecolumnpicker="true" disabled="true" flex="1">
+    <html:fieldset flex="1">
+      <html:legend>&archiveExample.label;</html:legend>
+      <hbox flex="1">
+      <tree id="archiveTree" hidecolumnpicker="true" disabled="true" flex="1" style="min-height:8em;">
         <treecols>
           <treecol primary="true" hideheader="true" flex="1"
                    id="folderNameCol"/>
         </treecols>
         <treechildren>
           <treeitem class="root">
             <treerow>
               <treecell properties="specialFolder-Archive"
@@ -88,12 +89,13 @@
                     <treechildren/>
                   </treeitem>
                 </treechildren>
               </treeitem>
             </treechildren>
           </treeitem>
         </treechildren>
       </tree>
-    </groupbox>
+      </hbox>
+    </html:fieldset>
   </vbox>
 </dialog>
 </window>
--- a/mailnews/base/prefs/content/am-copies.inc.xhtml
+++ b/mailnews/base/prefs/content/am-copies.inc.xhtml
@@ -25,18 +25,18 @@
            pref="true" preftype="int" prefattribute="value"
            prefstring="mail.identity.%identitykey%.drafts_folder_picker_mode"/>
     <label id="identity.archivesFolderPickerMode" hidden="true" wsm_persist="true"
            pref="true" preftype="int" prefattribute="value"
            prefstring="mail.identity.%identitykey%.archives_folder_picker_mode"/>
     <label id="identity.tmplFolderPickerMode" hidden="true" wsm_persist="true"
            pref="true" preftype="int" prefattribute="value"
            prefstring="mail.identity.%identitykey%.tmpl_folder_picker_mode"/>
-    <groupbox id="copiesGroup">
-      <label class="header">&sendingPrefix.label;</label>
+    <html:fieldset id="copiesGroup">
+      <html:legend>&sendingPrefix.label;</html:legend>
 
       <hbox align="center">
         <checkbox id="identity.doFcc" wsm_persist="true" label="&fccMailFolder.label;"
                   accesskey="&fccMailFolder.accesskey;"
                   prefattribute="value"
                   prefstring="mail.identity.%identitykey%.fcc"
                   oncommand="setupFccItems();"/>
       </hbox>
@@ -119,21 +119,20 @@
           <html:input id="identity.doBccList" wsm_persist="true"
                       type="text"
                       aria-labelledby="identity.doBcc"
                       prefstring="mail.identity.%identitykey%.doBccList"
                       class="uri-element input-inline"
                       placeholder="&bccAddressList.placeholder;"/>
         </vbox>
       </hbox>
-
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox id="archivesGroup">
-      <label class="header">&archivesTitle.label;</label>
+    <html:fieldset id="archivesGroup">
+      <html:legend>&archivesTitle.label;</html:legend>
 
       <hbox align="center">
         <checkbox id="identity.archiveEnabled" wsm_persist="true"
                   label="&keepArchives.label;"
                   accesskey="&keepArchives.accesskey;"
                   prefattribute="value"
                   prefstring="mail.identity.%identitykey%.archive_enabled"
                   oncommand="setupArchiveItems();"/>
@@ -180,20 +179,20 @@
                          mode="filing"
                          class="menulist-menupopup"
                          showFileHereLabel="true"
                          oncommand="noteSelectionChange('archive', 'Folder', event)"/>
             </menulist>
           </vbox>
         </hbox>
       </radiogroup>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox id="foldersGroup">
-      <label class="header">&specialFolders.label;</label>
+    <html:fieldset id="foldersGroup">
+      <html:legend>&specialFolders.label;</html:legend>
 
       <hbox align="center">
         <label value="&keepDrafts2.label;" control="messageDrafts"/>
       </hbox>
 
       <radiogroup id="messageDrafts">
         <hbox class="specialFolderPickerGrid">
           <vbox>
@@ -276,10 +275,10 @@
         </hbox>
       </radiogroup>
       <hbox align="center">
         <checkbox id="identity.showSaveMsgDlg" wsm_persist="true" label="&saveMessageDlg.label;"
                   accesskey="&saveMessageDlg.accesskey;"
                   prefattribute="value"
                   prefstring="mail.identity.%identitykey%.showSaveMsgDlg"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
   </vbox>
--- a/mailnews/base/prefs/content/am-identity-edit.xhtml
+++ b/mailnews/base/prefs/content/am-identity-edit.xhtml
@@ -53,18 +53,18 @@
       <tab label="&copiesFoldersTab.label;"/>
       <tab label="&addressingTab.label;"/>
       <tab label="&securityTab.label;"/>
     </tabs>
 
     <tabpanels id="identityTabsPanels" flex="1">
       <!-- Identity Settings Tab -->
       <vbox flex="1" name="settings">
-        <groupbox>
-          <label class="header">&publicData.label;</label>
+        <html:fieldset>
+          <html:legend>&publicData.label;</html:legend>
           <html:table class="identity-table">
             <html:tr>
               <html:th>
                 <label id="identity.fullName.label"
                        value="&name.label;"
                        control="identity.fullName"
                        accesskey="&name.accesskey;"/>
               </html:th>
@@ -158,20 +158,20 @@
 
           <hbox align="center">
             <checkbox id="identity.attachVCard" label="&attachVCard.label;"
                       flex="1" accesskey="&attachVCard.accesskey;"/>
             <button class="push" label="&editVCard.label;"
                     accesskey="&editVCard.accesskey;" oncommand="editVCard()"/>
             <label id="identity.escapedVCard" hidden="true"/>
           </hbox>
-        </groupbox>
+        </html:fieldset>
 
-        <groupbox>
-          <label class="header">&privateData.label;</label>
+        <html:fieldset>
+          <html:legend>&privateData.label;</html:legend>
 
           <label value="&smtpName.label;"
                  control="identity.smtpServerKey"
                  accesskey="&smtpName.accesskey;"/>
           <hbox align="center">
             <menulist id="identity.smtpServerKey" flex="1">
               <menupopup id="smtpPopup">
                 <menuitem id="useDefaultItem" value=""
@@ -193,17 +193,17 @@
             <label id="identity.input.label" value="&identityAlias.label;"
                    accesskey="&identityAlias.accesskey;"
                    control="identity.label"/>
             <html:input id="identity.label"
                         type="text"
                         class="input-inline"
                         aria-labelledby="identity.input.label"/>
           </hbox>
-        </groupbox>
+        </html:fieldset>
 
         <spacer flex="1"/>
       </vbox>
 
       <!-- Copies & Folders Tab -->
 #include am-copies.inc.xhtml
 
       <!-- Composition & Addressing Tab -->
--- a/mailnews/base/prefs/content/am-junk.xhtml
+++ b/mailnews/base/prefs/content/am-junk.xhtml
@@ -23,18 +23,18 @@
     <script src="chrome://messenger/content/am-prefs.js"/>
     <script src="chrome://messenger/content/amUtils.js"/>
     <stringbundle id="bundle_messenger" src="chrome://messenger/locale/messenger.properties"/>
 
     <hbox class="dialogheader">
       <label class="dialogheader-title" value="&junkSettings.label;"/>
     </hbox>
 
-    <groupbox>
-      <label class="header">&junkClassification.label;</label>
+    <html:fieldset>
+      <html:legend>&junkClassification.label;</html:legend>
 
       <label hidden="true"
              id="server.spamLevel"
              wsm_persist="true"
              pref="true"
              preftype="int"
              prefattribute="value"
              genericattr="true"
@@ -117,20 +117,23 @@
                     aria-labelledby="server.useServerFilter"/>
         </hbox>
       </vbox>
 
       <separator class="thin"/>
 
       <description width="1">&ispHeadersWarning.label;</description>
 
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox>
-      <label class="header">&junkActions.label;</label>
+    <separator/>
+    <separator/>
+
+    <html:fieldset>
+      <html:legend>&junkActions.label;</html:legend>
 
       <checkbox id="server.moveOnSpam"
                 label="&move.label;"
                 accesskey="&move.accesskey;"
                 oncommand="updateJunkTargetsAndRetention();"
                 wsm_persist="true"
                 pref="true"
                 preftype="bool"
@@ -202,17 +205,17 @@
                     preftype="int"
                     aria-labelledby="server.purgeSpam server.purgeSpamInterval purgeLabel"
                     prefstring="mail.server.%serverkey%.purgeSpamInterval"/>
         <label id="purgeLabel"
                value="&purge2.label;"
                control="server.purgeSpamInterval"/>
       </hbox>
 
-    </groupbox>
+    </html:fieldset>
 
     <separator class="thin"/>
 
     <hbox pack="start">
       <button id="globalJunkPrefsLink"
               label="&globalJunkPrefs.label;"
               accesskey="&globalJunkPrefs.accesskey;"
               oncommand="showGlobalJunkPrefs();"/>
--- a/mailnews/base/prefs/content/am-main.xhtml
+++ b/mailnews/base/prefs/content/am-main.xhtml
@@ -36,18 +36,18 @@
                   class="input-inline"
                   onblur="parent.setAccountLabel(gAccount.key, null, this.value);"
                   prefstring="mail.server.%serverkey%.name"
                   aria-labelledby="server.prettyName.label"/>
     </hbox>
 
     <separator class="thin"/>
 
-    <groupbox style="width: 20em !important;" flex="1">
-      <label class="header">&identityTitle.label;</label>
+    <html:fieldset style="width:20em !important;">
+      <html:legend>&identityTitle.label;</html:legend>
       <description>&identityDesc.label;</description>
       <separator class="thin"/>
       <html:table class="identity-table">
         <html:tr>
           <html:th>
             <label id="identity.fullName.label.label" value="&name.label;"
                    control="identity.fullName" accesskey="&name.accesskey;"/>
           </html:th>
@@ -113,17 +113,17 @@
               <checkbox id="identity.htmlSigFormat" wsm_persist="true" label="&signatureHtml.label;"
                         prefattribute="value" accesskey="&signatureHtml.accesskey;" style="width:100%;"
                         prefstring="mail.identity.%identitykey%.htmlSigFormat"/>
             </hbox>
           </html:td>
         </html:tr>
       </html:table>
 
-      <hbox class="indent" flex="1" style="min-height: 100px; display: flex; align-items: stretch;">
+      <hbox class="indent" flex="1" style="min-height:100px; display:flex;">
         <html:textarea id="identity.htmlSigText" wsm_persist="true" rows="4" style="flex-grow: 1;"
                        prefstring="mail.identity.%identitykey%.htmlSigText" class="signatureBox"/>
       </hbox>
 
       <hbox align="center">
         <checkbox id="identity.attachSignature"
                   wsm_persist="true"
                   label="&signatureFile.label;"
@@ -177,23 +177,22 @@
             <!-- list will be inserted here -->
           </menupopup>
         </menulist>
         <button id="editSmtp"
                 label="&smtpServerEdit.label;"
                 accesskey="&smtpServerEdit.accesskey;"
                 oncommand="editCurrentSMTP();"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <separator class="thin"/>
 
     <hbox align="center">
       <spacer flex="1"/>
       <button label="&manageIdentities.label;" oncommand="manageIdentities(event);"
               accesskey="&manageIdentities.accesskey;"
               wsm_persist="true" id="identity.manageIdentitiesbutton"/>
     </hbox>
 
     <spacer flex="1"/>
   </vbox>
-
 </window>
--- a/mailnews/base/prefs/content/am-offline.xhtml
+++ b/mailnews/base/prefs/content/am-offline.xhtml
@@ -21,42 +21,43 @@
     <label id="imap.autoSyncMaxAgeDays" hidden="true"
            wsm_persist="true" preftype="int"
            prefstring="mail.server.%serverkey%.autosync_max_age_days"/>
 
     <hbox id="headertitle" class="dialogheader">
       <label class="dialogheader-title"/>
     </hbox>
 
-    <groupbox id="offline.titlebox" hidefor="movemail,pop3,none,rss">
-      <label class="header">&syncGroupTitle.label;</label>
+    <html:fieldset id="offline.titlebox" hidefor="movemail,pop3,none,rss">
+      <html:legend>&syncGroupTitle.label;</html:legend>
 
-    <checkbox hidefor="movemail,pop3,nntp,none"
-              id="offline.folders" label="&allFoldersOffline2.label;"
-              oncommand="toggleOffline()"
-              accesskey="&allFoldersOffline2.accesskey;"/>
+      <vbox>
+        <checkbox hidefor="movemail,pop3,nntp,none"
+                  id="offline.folders" label="&allFoldersOffline2.label;"
+                  oncommand="toggleOffline()"
+                  accesskey="&allFoldersOffline2.accesskey;"/>
 
-    <description hidefor="pop3,nntp,movemail,none,rss">&allFoldersOfflineNote.label;</description>
+        <description hidefor="pop3,nntp,movemail,none,rss">&allFoldersOfflineNote.label;</description>
 
-    <separator class="thin" hidefor="movemail,pop3,nntp,none"/>
+        <separator class="thin" hidefor="movemail,pop3,nntp,none"/>
 
-    <hbox hidefor="movemail,pop3,nntp,none" pack="end">
-        <button label="&offlineImapAdvancedOffline.label;" accesskey="&offlineImapAdvancedOffline.accesskey;"
-                oncommand="onClickSelect()" id="selectImapFoldersButton" class="selectForOfflineUseButton"/>
-    </hbox>
+        <hbox hidefor="movemail,pop3,nntp,none" pack="end">
+          <button label="&offlineImapAdvancedOffline.label;" accesskey="&offlineImapAdvancedOffline.accesskey;"
+                  oncommand="onClickSelect()" id="selectImapFoldersButton" class="selectForOfflineUseButton"/>
+        </hbox>
 
-    <hbox hidefor="movemail,pop3,imap,none" pack="end">
-        <button label="&offlineSelectNntp.label;" accesskey="&offlineSelectNntp.accesskey;"
-                oncommand="onClickSelect()" id="selectNewsgroupsButton" class="selectForOfflineUseButton"/>
-    </hbox>
+        <hbox hidefor="movemail,pop3,imap,none" pack="end">
+          <button label="&offlineSelectNntp.label;" accesskey="&offlineSelectNntp.accesskey;"
+                  oncommand="onClickSelect()" id="selectNewsgroupsButton" class="selectForOfflineUseButton"/>
+        </hbox>
+      </vbox>
+    </html:fieldset>
 
-    </groupbox>
-
-    <groupbox id="diskspace.titlebox">
-      <label class="header" hidefor="movemail,pop3,none,rss">&diskspaceGroupTitle.label;</label>
+    <html:fieldset id="diskspace.titlebox">
+      <html:legend hidefor="movemail,pop3,none,rss">&diskspaceGroupTitle.label;</html:legend>
 
     <description hidefor="pop3,nntp,movemail,none,rss">&doNotDownloadImap.label;</description>
     <description hidefor="pop3,imap,movemail,none,rss">&doNotDownloadNntp.label;</description>
     <description hidefor="imap,nntp,none,rss">&doNotDownloadPop3Movemail.label;</description>
 
     <!-- IMAP Autosync Preference -->
     <radiogroup hidefor="pop3,nntp,movemail,none,rss" id="autosyncSelect" class="indent">
       <radio id="useAutosync.AllMsg" value="0" accesskey="&allAutosync.accesskey;"
@@ -157,11 +158,11 @@
         <checkbox id="nntp.removeBody" accesskey="&nntpRemoveMsgBody.accesskey;"
                   label="&nntpRemoveMsgBody.label;" oncommand="onCheckItem('nntp.removeBodyMin', 'nntp.removeBody');"/>
         <html:input id="nntp.removeBodyMin" type="number"
                     class="size2 input-inline" min="1" value="30"
                     aria-labelledby="nntp.removeBody nntp.removeBodyMin daysOldMsg"/>
         <label value="&daysOld.label;" control="nntp.removeBodyMin" id="daysOldMsg"/>
     </hbox>
     </vbox>
-    </groupbox>
+    </html:fieldset>
   </vbox>
 </window>
--- a/mailnews/base/prefs/content/am-server.xhtml
+++ b/mailnews/base/prefs/content/am-server.xhtml
@@ -89,18 +89,18 @@
                     class="input-flex input-inline"
                     prefstring="mail.server.%serverkey%.realusername"
                     aria-labelledby="fixedUserName"/>
       </div>
     </div>
 
     <separator class="thin"/>
 
-    <groupbox hidefor="movemail">
-      <label class="header">&securitySettings.label;</label>
+    <html:fieldset hidefor="movemail">
+      <html:legend>&securitySettings.label;</html:legend>
       <html:table>
         <html:tr>
           <html:td>
             <label value="&connectionSecurity.label;"
                    accesskey="&connectionSecurity.accesskey;"
                    control="server.socketType"/>
           </html:td>
           <html:td style="width:100%;">
@@ -143,20 +143,20 @@
                 <menuitem id="authMethod-oauth2" value="10"/>
                 <menuitem id="authMethod-anysecure" value="8"/>
                 <menuitem id="authMethod-any" value="9"/>
               </menupopup>
             </menulist>
           </html:td>
         </html:tr>
       </html:table>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox>
-      <label class="header">&serverSettings.label;</label>
+    <html:fieldset>
+      <html:legend>&serverSettings.label;</html:legend>
       <vbox align="start">
       <checkbox wsm_persist="true"
                 id="server.loginAtStartUp"
                 label="&loginAtStartup.label;"
                 accesskey="&loginAtStartup.accesskey;"
                 prefattribute="value"
                 prefstring="mail.server.%serverkey%.login_at_startup"/>
       </vbox>
@@ -346,20 +346,20 @@
                   prefstring="mail.server.%serverkey%.max_articles"/>
       <label control="nntp.maxArticles" value="&maxMessagesEnd.label;" id="maxMessagesEnd"/>
     </hbox>
     <checkbox hidefor="pop3,imap,movemail" wsm_persist="true" id="nntp.pushAuth"
               label="&alwaysAuthenticate.label;"
               accesskey="&alwaysAuthenticate.accesskey;"
               prefattribute="value"
               prefstring="mail.server.%serverkey%.always_authenticate"/>
-    </groupbox>
+    </html:fieldset>
 
-    <groupbox>
-      <label class="header">&messageStorage.label;</label>
+    <html:fieldset>
+      <html:legend>&messageStorage.label;</html:legend>
 
       <hbox align="end">
         <vbox align="start" flex="1" id="exitHandlingBox=">
           <checkbox hidefor="pop3,nntp,movemail"
                     wsm_persist="true"
                     id="imap.cleanupInboxOnExit"
                     label="&expungeOnExit.label;"
                     accesskey="&expungeOnExit.accesskey;"
@@ -435,17 +435,17 @@
           <button id="browseForLocalFolder"
                   label="&browseFolder.label;"
                   filepickertitle="&localFolderPicker.label;"
                   accesskey="&browseFolder.accesskey;"
                   oncommand="BrowseForLocalFolders();"/>
         </hbox>
       </vbox>
 
-    </groupbox>
+    </html:fieldset>
 
     <separator class="thin"/>
 
     <hbox hidefor="imap,pop3,movemail" align="center" valign="middle" iscontrolcontainer="true">
       <label value="&serverDefaultCharset2.label;" control="nntp.charset"/>
       <menulist is="menulist-charsetpicker-viewing" id="nntp.charset"
                 hidable="true"
                 hidefor="imap,pop3,movemail"
--- a/mailnews/base/prefs/content/am-serverwithnoidentities.xhtml
+++ b/mailnews/base/prefs/content/am-serverwithnoidentities.xhtml
@@ -42,18 +42,18 @@
                 size="30"
                 onblur="parent.setAccountLabel(gAccount.key, null, this.value);"
                 prefstring="mail.server.%serverkey%.name"
                 aria-labelledby="server.prettyName.label"/>
   </hbox>
 
   <separator class="thin"/>
 
-  <groupbox>
-    <label class="header">&messageStorage.label;</label>
+  <html:fieldset>
+    <html:legend>&messageStorage.label;</html:legend>
 
     <vbox align="start">
       <checkbox wsm_persist="true" id="server.emptyTrashOnExit"
                 label="&emptyTrashOnExit.label;"
                 accesskey="&emptyTrashOnExit.accesskey;"
                 prefattribute="value"
                 prefstring="mail.server.%serverkey%.empty_trash_on_exit"/>
       <hbox align="center">
@@ -87,11 +87,11 @@
                   prefstring="mail.server.%serverkey%.directory"
                   class="uri-element input-inline"
                   aria-labelledby="server.localPath.label"/>
       <button id="browseForLocalFolder" label="&browseFolder.label;"
               filepickertitle="&localFolderPicker.label;"
               accesskey="&browseFolder.accesskey;"
               oncommand="BrowseForLocalFolders()"/>
     </hbox>
-  </groupbox>
+  </html:fieldset>
   </vbox>
 </window>
--- a/mailnews/base/search/content/FilterEditor.xhtml
+++ b/mailnews/base/search/content/FilterEditor.xhtml
@@ -52,18 +52,18 @@
                   type="text"
                   class="input-inline"
                   aria-labelledby="filterNameLabel"/>
       <spacer class="spacer-inline"/>
     </hbox>
   </vbox>
 
   <vbox>
-    <groupbox>
-      <label class="header">&contextDesc.label;</label>
+    <html:fieldset>
+      <html:legend>&contextDesc.label;</html:legend>
       <vbox>
         <hbox flex="1" align="center">
           <checkbox id="runManual"
                     label="&contextManual.label;"
                     accesskey="&contextManual.accesskey;"
                     command="cmd_updateFilterType"/>
         </hbox>
         <hbox flex="1" align="center">
@@ -95,17 +95,17 @@
         </hbox>
         <hbox flex="1" align="center">
           <checkbox id="runPeriodic"
                     accesskey="&contextPeriodic.accesskey;"
                     command="cmd_updateFilterType"/>
           <label id="periodLength"/>
         </hbox>
       </vbox>
-    </groupbox>
+    </html:fieldset>
   </vbox>
 
     <vbox id="searchTermListBox" flex="1">
 #include searchTerm.inc.xhtml
 
   <splitter id="gray_horizontal_splitter" persist="state" orient="vertical"/>
 
   <vbox flex="1">
--- a/mailnews/extensions/dsn/content/am-dsn.xhtml
+++ b/mailnews/extensions/dsn/content/am-dsn.xhtml
@@ -16,19 +16,18 @@
   <stringbundle id="bundle_smime" src="chrome://messenger/locale/am-dsn.properties"/>
   <script src="chrome://messenger/content/AccountManager.js"/>
   <script src="chrome://messenger/content/am-dsn.js"/>
 
   <hbox class="dialogheader">
     <label class="dialogheader-title" value="&pane.title;"/>
   </hbox>
 
-  <groupbox>
-
-    <label class="header">&pane.title;</label>
+  <html:fieldset>
+    <html:legend>&pane.title;</html:legend>
 
     <hbox id="prefChoices" align="center">
       <radiogroup id="identity.dsn_use_custom_prefs"
                   wsm_persist="true"
                   genericattr="true"
                   preftype="bool"
                   prefstring="mail.identity.%identitykey%.dsn_use_custom_prefs"
                   oncommand="EnableDisableCustomSettings();">
@@ -50,10 +49,10 @@
                 label="&requestAlways.label;"
                 accesskey="&requestAlways.accesskey;"
                 wsm_persist="true"
                 genericattr="true"
                 iscontrolcontainer="true"
                 preftype="bool"
                 prefstring="mail.identity.%identitykey%.dsn_always_request_on"/>
     </vbox>
-  </groupbox>
+  </html:fieldset>
 </window>
--- a/mailnews/extensions/mdn/content/am-mdn.xhtml
+++ b/mailnews/extensions/mdn/content/am-mdn.xhtml
@@ -19,19 +19,18 @@
     <script src="chrome://messenger/content/AccountManager.js"/>
     <script src="chrome://messenger/content/amUtils.js"/>
     <script src="chrome://messenger/content/am-mdn.js"/>
 
     <hbox class="dialogheader">
       <label class="dialogheader-title" value="&pane.title;"/>
     </hbox>
 
-    <groupbox>
-
-      <label class="header">&pane.title;</label>
+    <html:fieldset>
+      <html:legend>&pane.title;</html:legend>
 
       <hbox id="prefChoices" align="center" flex="1">
         <radiogroup id="identity.use_custom_prefs" wsm_persist="true" genericattr="true"
                     preftype="bool" prefstring="mail.identity.%identitykey%.use_custom_prefs"
                     oncommand="EnableDisableCustomSettings();" flex="1">
           <radio id="identity.select_global_prefs"
                  value="false"
                  label="&useGlobalPrefs.label;"
@@ -121,17 +120,14 @@
                     <menuitem value="0" label="&neverSend.label;"/>
                     <menuitem value="1" label="&alwaysSend.label;"/>
                     <menuitem value="2" label="&askMe.label;"/>
                   </menupopup>
                 </menulist>
               </vbox>
             </hbox>
           </radiogroup>
-
         </vbox>
-
       </vbox>
-
-    </groupbox>
+    </html:fieldset>
   </vbox>
 
 </window>
--- a/mailnews/extensions/newsblog/content/am-newsblog.xhtml
+++ b/mailnews/extensions/newsblog/content/am-newsblog.xhtml
@@ -47,28 +47,28 @@
                   size="30"
                   aria-labelled-by="server.prettyNameLabel"
                   onblur="parent.setAccountLabel(gAccount.key, null, this.value);"
                   prefstring="mail.server.%serverkey%.name"/>
     </hbox>
 
     <separator class="thin"/>
 
-    <groupbox>
-      <label class="header">&serverSettings.label;</label>
+    <html:fieldset>
+      <html:legend>&serverSettings.label;</html:legend>
       <checkbox id="doBiff"
                 label="&biffAll.label;"
                 accesskey="&biffAll.accesskey;"
                 oncommand="setPrefs(this)"/>
-    </groupbox>
+    </html:fieldset>
 
     <separator class="thin"/>
 
-    <groupbox>
-      <label class="header">&newFeedSettings.label;</label>
+    <html:fieldset>
+      <html:legend>&newFeedSettings.label;</html:legend>
 
       <hbox align="center">
         <checkbox id="updateEnabled"
                   label="&biffStart.label;"
                   accesskey="&biffStart.accesskey;"
                   oncommand="setPrefs(this)"/>
         <html:input id="updateValue" type="number" class="size3" min="1"
                     aria-labelledby="updateEnabled updateValue biffMinutes biffDays"
@@ -102,31 +102,31 @@
                     accesskey="&autotagUsePrefix.accesskey;"
                     label="&autotagUsePrefix.label;"
                     oncommand="setPrefs(this)"/>
           <html:input id="autotagPrefix" type="text" class="input-inline"
                       aria-labelled-by="autotagUsePrefix"
                       placeholder="&autoTagPrefix.placeholder;"
                       onchange="setPrefs(this)"/>
       </hbox>
-    </groupbox>
+    </html:fieldset>
 
     <separator class="thin"/>
 
     <hbox align="center">
       <button label="&manageSubscriptions.label;"
               accesskey="&manageSubscriptions.accesskey;"
               oncommand="openSubscriptionsDialog(gAccount.incomingServer.rootFolder);"/>
       <spacer flex="1"/>
     </hbox>
 
     <separator class="thin"/>
 
-    <groupbox>
-      <label class="header">&messageStorage.label;</label>
+    <html:fieldset>
+      <html:legend>&messageStorage.label;</html:legend>
 
       <checkbox id="server.emptyTrashOnExit"
                 wsm_persist="true"
                 label="&emptyTrashOnExit.label;"
                 accesskey="&emptyTrashOnExit.accesskey;"
                 prefattribute="value"
                 prefstring="mail.server.%serverkey%.empty_trash_on_exit"/>
 
@@ -144,11 +144,11 @@
           <button id="browseForLocalFolder"
                   label="&browseFolder.label;"
                   filepickertitle="&localFolderPicker.label;"
                   accesskey="&browseFolder.accesskey;"
                   oncommand="BrowseForLocalFolders();"/>
         </hbox>
       </vbox>
 
-    </groupbox>
+    </html:fieldset>
   </vbox>
 </window>
--- a/mailnews/extensions/smime/content/am-smime.inc.xhtml
+++ b/mailnews/extensions/smime/content/am-smime.inc.xhtml
@@ -6,18 +6,18 @@
 
       <stringbundle id="bundle_smime" src="chrome://messenger/locale/am-smime.properties"/>
       <stringbundle id="bundle_brand" src="chrome://branding/locale/brand.properties"/>
 
       <label hidden="true" wsm_persist="true" id="identity.encryptionpolicy"/>
 
       <description>&securityHeading.label;</description>
 
-      <groupbox id="signing.titlebox">
-        <label class="header">&signingGroupTitle.label;</label>
+      <html:fieldset id="signing.titlebox">
+        <html:legend>&signingGroupTitle.label;</html:legend>
 
         <label id="identity.signing_cert_nameLabel"
                value="&signingCert.message;" control="identity.signing_cert_name"
                prefstring="mail.identity.%identitykey%.encryptionpolicy"/>
 
         <hbox align="center" class="input-container">
           <html:input id="identity.signing_cert_name" type="text"
                       class="input-inline"
@@ -38,20 +38,20 @@
                   oncommand="smimeClearCert('identity.signing_cert_name')"/>
         </hbox>
 
         <separator class="thin"/>
 
         <checkbox id="identity.sign_mail" wsm_persist="true"
                   prefstring="mail.identity.%identitykey%.sign_mail"
                   label="&signMessage.label;" accesskey="&signMessage.accesskey;"/>
-      </groupbox>
+      </html:fieldset>
 
-      <groupbox id="encryption.titlebox">
-        <label class="header">&encryptionGroupTitle.label;</label>
+      <html:fieldset id="encryption.titlebox">
+        <html:legend>&encryptionGroupTitle.label;</html:legend>
 
         <label value="&encryptionCert.message;"
                control="identity.encryption_cert_name"/>
 
         <hbox align="center" class="input-container">
           <html:input id="identity.encryption_cert_name" type="text"
                       class="input-inline"
                       readonly="readonly"
@@ -78,23 +78,23 @@
           <radio id="encrypt_mail_never" wsm_persist="true" value="0"
                  label="&neverEncrypt.label;"
                  accesskey="&neverEncrypt.accesskey;"/>
 
           <radio id="encrypt_mail_always" wsm_persist="true" value="2"
                  label="&alwaysEncryptMessage.label;"
                  accesskey="&alwaysEncryptMessage.accesskey;"/>
         </radiogroup>
-      </groupbox>
+      </html:fieldset>
 
       <!-- Certificate manager -->
-      <groupbox id="smimeCertificateManager">
-        <label class="header">&certificates.label;</label>
+      <html:fieldset id="smimeCertificateManager">
+        <html:legend>&certificates.label;</html:legend>
         <hbox>
           <button id="openCertManagerButton" oncommand="openCertManager();"
                   label="&manageCerts2.label;" accesskey="&manageCerts2.accesskey;"
                   prefstring="security.disable_button.openCertManager"/>
           <button id="openDeviceManagerButton" oncommand="openDeviceManager();"
                   label="&manageDevices.label;" accesskey="&manageDevices.accesskey;"
                   prefstring="security.disable_button.openDeviceManager"/>
         </hbox>
-      </groupbox>
+      </html:fieldset>
     </vbox>
--- a/mailnews/import/content/importDialog.xhtml
+++ b/mailnews/import/content/importDialog.xhtml
@@ -105,23 +105,23 @@
                  value="&acctName.label;"/>
           <html:input id="acctName" type="text" class="input-inline"
                       aria-labelledby="acctName"/>
         </hbox>
       </vbox>
     </vbox>
     <vbox class="wizard-box">
       <spacer flex="1"/>
-      <groupbox>
+      <html:fieldset>
         <label id="progressTitle" class="header">&title.label;</label>
         <label class="indent" id="progressStatus" value="&processing.label;"/>
         <vbox class="box-padded">
           <html:progress id="progressMeter" value="5" max="100"/>
         </vbox>
-      </groupbox>
+      </html:fieldset>
     </vbox>
     <vbox class="wizard-box">
       <description id="status"/>
       <hbox style="overflow: auto" class="inset" flex="1">
         <description id="results" flex="1"/>
       </hbox>
     </vbox>
   </deck>