Bug 1496382 - Don't use "groupbox" for Preferences subdialogs. r=jaws
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Thu, 04 Oct 2018 12:21:03 +0100
changeset 496718 80983dcd1180daeaaf7da3201b48c63506b6f6c7
parent 496607 fbf50f6e40718aa2c8e1e1116e858ac5a3d3e26e
child 496719 9340d1867b1f4785bb3e6b2f1b97a969d7846632
push id9984
push userffxbld-merge
push dateMon, 15 Oct 2018 21:07:35 +0000
treeherdermozilla-beta@183d27ea8570 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1496382
milestone64.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1496382 - Don't use "groupbox" for Preferences subdialogs. r=jaws This is required to remove the "groupbox" and "caption" elements, and simplifies the code as well. Differential Revision: https://phabricator.services.mozilla.com/D7707
browser/components/preferences/in-content/preferences.xul
browser/components/preferences/in-content/subdialogs.js
browser/themes/shared/incontentprefs/preferences.inc.css
--- a/browser/components/preferences/in-content/preferences.xul
+++ b/browser/components/preferences/in-content/preferences.xul
@@ -191,25 +191,24 @@
 #include sync.xul
         </vbox>
       </vbox>
     </vbox>
   </hbox>
 
   <stack id="dialogStack" hidden="true"/>
   <vbox id="dialogTemplate" class="dialogOverlay" align="center" pack="center" topmost="true" hidden="true">
-    <groupbox class="dialogBox"
-              orient="vertical"
-              pack="end"
-              role="dialog"
-              aria-labelledby="dialogTitle">
-      <caption flex="1" align="center">
-        <label class="dialogTitle" flex="1"></label>
+    <vbox class="dialogBox"
+          pack="end"
+          role="dialog"
+          aria-labelledby="dialogTitle">
+      <hbox class="dialogTitleBar" align="center">
+        <label class="dialogTitle" flex="1"/>
         <button class="dialogClose close-icon"
                 data-l10n-id="close-button"/>
-      </caption>
+      </hbox>
       <browser class="dialogFrame"
                autoscroll="false"
                disablehistory="true"/>
-    </groupbox>
+    </vbox>
   </vbox>
   </stack>
 </page>
--- a/browser/components/preferences/in-content/subdialogs.js
+++ b/browser/components/preferences/in-content/subdialogs.js
@@ -13,20 +13,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);
@@ -276,26 +277,24 @@ SubDialog.prototype = {
     // until the promise is fulfilled.
     if (aEvent.target.contentDocument.mozSubdialogReady) {
       await aEvent.target.contentDocument.mozSubdialogReady;
     }
 
     // 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;
@@ -307,17 +306,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;
@@ -347,17 +346,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/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -502,42 +502,39 @@ button > hbox > label {
 
 .dialogBox[resizable="true"] {
   resize: both;
   overflow: hidden;
   min-height: 20em;
   min-width: 66ch;
 }
 
-.dialogBox > .groupbox-title {
+.dialogTitleBar {
   margin-top: 0;
   padding: 3.5px 0;
   background-color: #F1F1F1;
   border-bottom: 1px solid #C1C1C1;
 }
 
 .dialogTitle {
   font-size: .9em;
+  font-weight: 600;
   text-align: center;
   -moz-user-select: none;
 }
 
 .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 */
   width: 66ch;
 }
 
 .largeDialogContainer.doScroll {
   overflow-y: auto;
   -moz-box-flex: 1;