Bug 1549146 - Resize the subdialog after showing/hiding the Custom DoH textbox to make sure scrollbars appear if necessary. r=sfoster
authorJared Wein <jwein@mozilla.com>
Wed, 08 May 2019 15:49:25 +0000
changeset 534966 9f6d0100dec9ef0b8dc7ff7a4dc9f81364812ebc
parent 534965 a371ed7348b66078d451235a233f4966a0332f8f
child 534967 37883d51ffd1e3809cfda2b9efd11df72878f20d
push id2082
push userffxbld-merge
push dateMon, 01 Jul 2019 08:34:18 +0000
treeherdermozilla-release@2fb19d0466d2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssfoster
bugs1549146
milestone68.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 1549146 - Resize the subdialog after showing/hiding the Custom DoH textbox to make sure scrollbars appear if necessary. r=sfoster Differential Revision: https://phabricator.services.mozilla.com/D30068
browser/components/preferences/connection.js
browser/components/preferences/in-content/subdialogs.js
--- a/browser/components/preferences/connection.js
+++ b/browser/components/preferences/connection.js
@@ -401,16 +401,25 @@ var gConnectionsDialog = {
     if (!menu.disabled && isCustom) {
       customContainer.hidden = false;
       customInput.disabled = false;
       customContainer.scrollIntoView();
     } else {
       customContainer.hidden = true;
       customInput.disabled = true;
     }
+
+    // The height has likely changed, find our SubDialog and tell it to resize.
+    requestAnimationFrame(() => {
+      let dialogs = window.opener.gSubDialog._dialogs;
+      let dialog = dialogs.find(d => d._frame.contentDocument == document);
+      if (dialog) {
+        dialog.resizeVertically();
+      }
+    });
   },
 
   getDnsOverHttpsControls() {
     return [
       document.getElementById("networkDnsOverHttpsResolverChoices"),
       document.getElementById("networkCustomDnsOverHttpsInput"),
       document.getElementById("networkDnsOverHttpsResolverChoicesLabel"),
       document.getElementById("networkCustomDnsOverHttpsInputLabel"),
--- a/browser/components/preferences/in-content/subdialogs.js
+++ b/browser/components/preferences/in-content/subdialogs.js
@@ -281,29 +281,19 @@ SubDialog.prototype = {
 
     await this.resizeDialog();
   },
 
   async resizeDialog() {
     // Do this on load to wait for the CSS to load and apply before calculating the size.
     let docEl = this._frame.contentDocument.documentElement;
 
-    let titleBarHeight = this._titleBar.clientHeight +
-                         parseFloat(getComputedStyle(this._titleBar).borderBottomWidth);
-
     // These are deduced from styles which we don't change, so it's safe to get them now:
     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;
     if (!frameMinWidth) {
       if (docEl.ownerDocument.body) {
         // HTML documents have a body but XUL documents don't
         frameMinWidth = docEl.ownerDocument.body.scrollWidth;
       } else {
@@ -313,16 +303,61 @@ SubDialog.prototype = {
     }
     let frameWidth = docEl.getAttribute("width") ? docEl.getAttribute("width") + "px" :
                      frameMinWidth;
     this._frame.style.width = frameWidth;
     this._box.style.minWidth = "calc(" +
                                (boxHorizontalBorder + frameHorizontalMargin) +
                                "px + " + frameMinWidth + ")";
 
+    this.resizeVertically();
+
+    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
+
+    if (this._box.getAttribute("resizable") == "true") {
+      this._onResize = this._onResize.bind(this);
+      this._resizeObserver = new MutationObserver(this._onResize);
+      this._resizeObserver.observe(this._box, {attributes: true});
+    }
+
+    this._trapFocus();
+
+    // Search within main document and highlight matched keyword.
+    gSearchResultsPane.searchWithinNode(this._titleElement, gSearchResultsPane.query);
+
+    // Search within sub-dialog document and highlight matched keyword.
+    gSearchResultsPane.searchWithinNode(this._frame.contentDocument.firstElementChild,
+      gSearchResultsPane.query);
+
+    // Creating tooltips for all the instances found
+    for (let node of gSearchResultsPane.listSearchTooltips) {
+      if (!node.tooltipNode) {
+        gSearchResultsPane.createSearchTooltip(node, gSearchResultsPane.query);
+      }
+    }
+  },
+
+  resizeVertically() {
+    let docEl = this._frame.contentDocument.documentElement;
+
+    let titleBarHeight = this._titleBar.clientHeight +
+                         parseFloat(getComputedStyle(this._titleBar).borderBottomWidth);
+    let boxVerticalBorder = 2 * parseFloat(getComputedStyle(this._box).borderTopWidth);
+    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);
+
     // 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;
 
     // Now check if the frame height we calculated is possible at this window size,
@@ -355,45 +390,16 @@ SubDialog.prototype = {
           this._frame.contentDocument.documentElement;
       contentPane.classList.add("doScroll");
     }
 
     this._frame.style.height = frameHeight;
     this._box.style.minHeight = "calc(" +
                                 (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
-
-    if (this._box.getAttribute("resizable") == "true") {
-      this._onResize = this._onResize.bind(this);
-      this._resizeObserver = new MutationObserver(this._onResize);
-      this._resizeObserver.observe(this._box, {attributes: true});
-    }
-
-    this._trapFocus();
-
-    // Search within main document and highlight matched keyword.
-    gSearchResultsPane.searchWithinNode(this._titleElement, gSearchResultsPane.query);
-
-    // Search within sub-dialog document and highlight matched keyword.
-    gSearchResultsPane.searchWithinNode(this._frame.contentDocument.firstElementChild,
-      gSearchResultsPane.query);
-
-    // Creating tooltips for all the instances found
-    for (let node of gSearchResultsPane.listSearchTooltips) {
-      if (!node.tooltipNode) {
-        gSearchResultsPane.createSearchTooltip(node, gSearchResultsPane.query);
-      }
-    }
   },
 
   _onResize(mutations) {
     let frame = this._frame;
     // The width and height styles are needed for the initial
     // layout of the frame, but afterward they need to be removed
     // or their presence will restrict the contents of the <browser>
     // from resizing to a smaller size.