Commit d6ebc8b7 authored by Jared Wein's avatar Jared Wein
Browse files

Bug 1549146 - Resize the subdialog after showing/hiding the Custom DoH textbox... 

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

--HG--
extra : moz-landing-system : lando
parent 0380dc12

browser/components/preferences/connection.js

+9 −0
Original line number Original line Diff line number Diff line
@@ -406,6 +406,15 @@ var gConnectionsDialog = { 
      customContainer.hidden = true;

      customContainer.hidden = true;

      customInput.disabled = 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() {

  getDnsOverHttpsControls() {

browser/components/preferences/in-content/subdialogs.js

+45 −39
Original line number Original line Diff line number Diff line
@@ -286,19 +286,9 @@ SubDialog.prototype = { 
    // Do this on load to wait for the CSS to load and apply before calculating the size.

    // Do this on load to wait for the CSS to load and apply before calculating the size.

    let docEl = this._frame.contentDocument.documentElement;

    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:

    // 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 boxHorizontalBorder = 2 * parseFloat(getComputedStyle(this._box).borderLeftWidth);

    let boxVerticalBorder = 2 * parseFloat(getComputedStyle(this._box).borderTopWidth);

    let frameHorizontalMargin = 2 * parseFloat(getComputedStyle(this._frame).marginLeft);

    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:

    // Then determine and set a bunch of width stuff:

    let frameMinWidth = docEl.style.width;

    let frameMinWidth = docEl.style.width;
@@ -318,6 +308,51 @@ SubDialog.prototype = { 
                               (boxHorizontalBorder + frameHorizontalMargin) +

                               (boxHorizontalBorder + frameHorizontalMargin) +

                               "px + " + frameMinWidth + ")";

                               "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

    // 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

    // XUL assumes we'll optimize for height and gives us "wrong" values which then are no

    // longer correct after we set the width:

    // longer correct after we set the width:
@@ -360,35 +395,6 @@ SubDialog.prototype = { 
    this._box.style.minHeight = "calc(" +

    this._box.style.minHeight = "calc(" +

                                (boxVerticalBorder + titleBarHeight + frameVerticalMargin) +

                                (boxVerticalBorder + titleBarHeight + frameVerticalMargin) +

                                "px + " + frameMinHeight + ")";

                                "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) {

  _onResize(mutations) {