Bug 1498790 - Port bug 1496382 to TB: Don't use "groupbox" for Preferences subdialogs. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Sat, 13 Oct 2018 12:56:19 +0200
changeset 33365 d3153e99afae5c8ec62f70bf6b5184fffea35c8a
parent 33364 fe10a3a8d48e6395ff6456ee2bbffebb8bd024da
child 33366 33c8749ebc80aeb154c6718bea9692516e4b0ba8
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
reviewersjorgk
bugs1498790, 1496382
Bug 1498790 - Port bug 1496382 to TB: Don't use "groupbox" for Preferences subdialogs. r=jorgk
mail/components/preferences/aboutPreferences.xml
mail/components/preferences/subdialogs.js
mail/themes/shared/mail/incontentprefs/aboutPreferences.css
--- a/mail/components/preferences/aboutPreferences.xml
+++ b/mail/components/preferences/aboutPreferences.xml
@@ -38,32 +38,29 @@
         </xul:hbox>
         <xul:stack id="dialogStack" hidden="true"/>
         <xul:vbox id="dialogTemplate"
                   class="dialogOverlay"
                   align="center"
                   pack="center"
                   topmost="true"
                   hidden="true">
-            <xul:groupbox class="dialogBox"
-                          orient="vertical"
-                          pack="end"
-                          role="dialog"
-                          aria-labelledby="dialogTitle">
-              <xul:caption class="titlebar"
-                           flex="1"
-                           align="center">
-                <xul:label class="dialogTitle" flex="1"></xul:label>
-                <xul:button class="dialogClose close-icon"
-                            aria-label="&preferencesCloseButton.label;"/>
-              </xul:caption>
-              <xul:browser class="dialogFrame"
-                           autoscroll="false"
-                           disablehistory="true"/>
-            </xul:groupbox>
+          <xul:vbox class="dialogBox"
+                    pack="end"
+                    role="dialog"
+                    aria-labelledby="dialogTitle">
+            <xul:hbox class="dialogTitleBar" align="center">
+              <xul:label class="dialogTitle" flex="1"/>
+              <xul:button class="dialogClose close-icon"
+                          aria-label="&preferencesCloseButton.label;"/>
+            </xul:hbox>
+            <xul:browser class="dialogFrame"
+                         autoscroll="false"
+                         disablehistory="true"/>
+            </xul:vbox>
         </xul:vbox>
       </xul:stack>
       <xul:hbox anonid="dlg-buttons" class="prefWindow-dlgbuttons"
                 pack="end">
         <xul:button dlgtype="extra2" class="dialog-button" hidden="true"/>
         <xul:spacer anonid="spacer" flex="1"/>
         <xul:button dlgtype="accept" class="dialog-button" icon="accept"/>
         <xul:button dlgtype="extra1" class="dialog-button" hidden="true"/>
--- a/mail/components/preferences/subdialogs.js
+++ b/mail/components/preferences/subdialogs.js
@@ -10,20 +10,21 @@
  * @param {DOMNode} template: The template is copied to create a new dialog.
  * @param {DOMNode} parentElement: New dialog is appended onto parentElement.
  * @param {String}  id: A unique identifier for the dialog.
  */
 function SubDialog({template, parentElement, id}) {
   this._id = id;
 
   this._overlay = template.cloneNode(true);
+  this._box = this._overlay.querySelector(".dialogBox");
+  this._titleBar = this._overlay.querySelector(".dialogTitleBar");
+  this._titleElement = this._overlay.querySelector(".dialogTitle");
+  this._closeButton = this._overlay.querySelector(".dialogClose");
   this._frame = this._overlay.querySelector(".dialogFrame");
-  this._box = this._overlay.querySelector(".dialogBox");
-  this._closeButton = this._overlay.querySelector(".dialogClose");
-  this._titleElement = this._overlay.querySelector(".dialogTitle");
 
   this._overlay.id = `dialogOverlay-${id}`;
   this._frame.setAttribute("name", `dialogFrame-${id}`);
   this._frameCreated = new Promise(resolve => {
     this._frame.addEventListener("load", resolve, {once: true});
   });
 
   parentElement.appendChild(this._overlay);
@@ -270,26 +271,24 @@ SubDialog.prototype = {
     // ensure that all of the l10n is done.
     if (aEvent.target.contentDocument.l10n) {
       await aEvent.target.contentDocument.l10n.ready;
     }
 
     // Do this on load to wait for the CSS to load and apply before calculating the size.
     let docEl = this._frame.contentDocument.documentElement;
 
-    let groupBoxTitle = document.getAnonymousElementByAttribute(this._box, "class", "groupbox-title");
-    let groupBoxTitleHeight = groupBoxTitle.clientHeight +
-                              parseFloat(getComputedStyle(groupBoxTitle).borderBottomWidth);
+    let titleBarHeight = this._titleBar.clientHeight +
+                         parseFloat(getComputedStyle(this._titleBar).borderBottomWidth);
 
-    let groupBoxBody = document.getAnonymousElementByAttribute(this._box, "class", "groupbox-body");
     // These are deduced from styles which we don't change, so it's safe to get them now:
-    let boxVerticalPadding = 2 * parseFloat(getComputedStyle(groupBoxBody).paddingTop);
-    let boxHorizontalPadding = 2 * parseFloat(getComputedStyle(groupBoxBody).paddingLeft);
     let boxHorizontalBorder = 2 * parseFloat(getComputedStyle(this._box).borderLeftWidth);
     let boxVerticalBorder = 2 * parseFloat(getComputedStyle(this._box).borderTopWidth);
+    let frameHorizontalMargin = 2 * parseFloat(getComputedStyle(this._frame).marginLeft);
+    let frameVerticalMargin = 2 * parseFloat(getComputedStyle(this._frame).marginTop);
 
     // The difference between the frame and box shouldn't change, either:
     let boxRect = this._box.getBoundingClientRect();
     let frameRect = this._frame.getBoundingClientRect();
     let frameSizeDifference = (frameRect.top - boxRect.top) + (boxRect.bottom - frameRect.bottom);
 
     // Then determine and set a bunch of width stuff:
     let frameMinWidth = docEl.style.width;
@@ -301,17 +300,17 @@ SubDialog.prototype = {
         frameMinWidth = docEl.scrollWidth;
       }
       frameMinWidth += "px";
     }
     let frameWidth = docEl.getAttribute("width") ? docEl.getAttribute("width") + "px" :
                      frameMinWidth;
     this._frame.style.width = frameWidth;
     this._box.style.minWidth = "calc(" +
-                               (boxHorizontalBorder + boxHorizontalPadding) +
+                               (boxHorizontalBorder + frameHorizontalMargin) +
                                "px + " + frameMinWidth + ")";
 
     // Now do the same but for the height. We need to do this afterwards because otherwise
     // XUL assumes we'll optimize for height and gives us "wrong" values which then are no
     // longer correct after we set the width:
     let frameMinHeight = docEl.style.height || docEl.scrollHeight + "px";
     let frameHeight = docEl.getAttribute("height") ? docEl.getAttribute("height") + "px" :
                                                      frameMinHeight;
@@ -341,17 +340,17 @@ SubDialog.prototype = {
       let containers = this._frame.contentDocument.querySelectorAll(".largeDialogContainer");
       for (let container of containers) {
         container.classList.add("doScroll");
       }
     }
 
     this._frame.style.height = frameHeight;
     this._box.style.minHeight = "calc(" +
-                                (boxVerticalBorder + groupBoxTitleHeight + boxVerticalPadding) +
+                                (boxVerticalBorder + titleBarHeight + frameVerticalMargin) +
                                 "px + " + frameMinHeight + ")";
 
     this._overlay.dispatchEvent(new CustomEvent("dialogopen", {
       bubbles: true,
       detail: { dialog: this },
     }));
     this._overlay.style.visibility = "visible";
     this._overlay.style.opacity = ""; // XXX: focus hack continued from _onContentLoaded
--- a/mail/themes/shared/mail/incontentprefs/aboutPreferences.css
+++ b/mail/themes/shared/mail/incontentprefs/aboutPreferences.css
@@ -457,40 +457,37 @@ richlistbox:focus > richlistitem[selecte
 
 .dialogBox[resizable="true"] {
   resize: both;
   overflow: hidden;
   min-height: 20em;
   min-width: 66ch;
 }
 
-.dialogBox > .groupbox-title {
+.dialogTitleBar {
   padding: 3.5px 0;
   background-color: #f1f1f1;
   border-bottom: 1px solid #c1c1c1;
 }
 
 .dialogTitle {
-  font-size: .9em;
+  font-size: 1.026em;
+  font-weight: 600;
   text-align: center;
 }
 
 .close-icon {
   border: none;
   background: none !important;
   min-width: 0;
   min-height: auto;
 }
 
-.dialogBox > .groupbox-body {
-  -moz-appearance: none;
-  padding: 20px;
-}
-
 .dialogFrame {
+  margin: 20px;
   -moz-box-flex: 1;
   /* Default dialog dimensions */
   height: 12em;
   width: 40ch;
 }
 
 .largeDialogContainer.doScroll {
   overflow-y: auto;