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
Loading
Loading
Loading
Loading
+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() {
+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) {