зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1784054 - Enable full height scrolling in Colorway Closet modal in small windows r=dao
Updated SubDialog.jsm's sizeTo=available to have better support for responsive layouts with the ability to specify max height and widths on the dialog. Differential Revision: https://phabricator.services.mozilla.com/D155014
This commit is contained in:
Bernard Igiri
Родитель
0f84338a77
Коммит
ae6f7157e4
|
|
@ -1572,8 +1572,11 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
|
|||
--box-max-height-margin: calc(100vh - var(--box-top-px) - var(--box-block-margin));
|
||||
--box-max-width-ratio: 70vw;
|
||||
--box-max-height-ratio: calc(var(--box-ideal-height) / var(--box-ideal-width) * var(--box-max-width-ratio));
|
||||
max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin));
|
||||
max-height: min(max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), var(--box-max-height-margin));
|
||||
--box-max-height-requested: 100vh;
|
||||
--box-max-width-requested: 100vw;
|
||||
--box-max-height-remaining: calc(100vh - var(--box-top-px));
|
||||
max-width: min(max(var(--box-ideal-width) * 1px, var(--box-max-width-ratio)), var(--box-max-width-margin), var(--box-max-width-requested));
|
||||
max-height: min(max(var(--box-ideal-height) * 1px, var(--box-max-height-ratio)), var(--box-max-height-margin), var(--box-max-height-requested), var(--box-max-height-remaining));
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -9091,7 +9091,8 @@ class TabDialogBox {
|
|||
* showing multiple dialogs with aURL at the same time. If false calls for
|
||||
* duplicate dialogs will be dropped.
|
||||
* @param {String} [aOptions.sizeTo] - Pass "available" to stretch dialog to
|
||||
* roughly content size.
|
||||
* roughly content size. Any max-width or max-height style values on the document root
|
||||
* will also be applied to the dialog box.
|
||||
* @param {Boolean} [aOptions.keepOpenSameOriginNav] - By default dialogs are
|
||||
* aborted on any navigation.
|
||||
* Set to true to keep the dialog open for same origin navigation.
|
||||
|
|
|
|||
|
|
@ -20,24 +20,13 @@ let ColorwayClosetOpener = {
|
|||
openModal: ({ source = "unknown" } = {}) => {
|
||||
let { gBrowser } = BrowserWindowTracker.getTopWindow();
|
||||
let dialogBox = gBrowser.getTabDialogBox(gBrowser.selectedBrowser);
|
||||
let rv = dialogBox.open(
|
||||
return dialogBox.open(
|
||||
"chrome://browser/content/colorways/colorwaycloset.html",
|
||||
{
|
||||
features: "resizable=no",
|
||||
sizeTo: "available",
|
||||
},
|
||||
{ source }
|
||||
);
|
||||
let { dialog } = rv;
|
||||
dialog._dialogReady.then(() => {
|
||||
// The modal document had a width set so `SubDialog` could use it to
|
||||
// determine the initial frame size. We'll now remove that width because
|
||||
// the modal document's layout is responsive and we don't want to scroll
|
||||
// horizontally when resizing the browser window such that the frame
|
||||
// becomes narrower than its initial width.
|
||||
dialog._frame.contentDocument.documentElement.style.removeProperty(
|
||||
"width"
|
||||
);
|
||||
});
|
||||
return rv;
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html style="width: 67em; height: 40em;">
|
||||
<html style="max-width: 67em; max-height: 40em;">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Security-Policy"
|
||||
|
|
|
|||
|
|
@ -241,6 +241,8 @@ SubDialog.prototype = {
|
|||
// Clear the sizing attributes
|
||||
this._box.removeAttribute("width");
|
||||
this._box.removeAttribute("height");
|
||||
this._box.style.removeProperty("--box-max-height-requested");
|
||||
this._box.style.removeProperty("--box-max-width-requested");
|
||||
this._box.style.removeProperty("min-height");
|
||||
this._box.style.removeProperty("min-width");
|
||||
this._overlay.parentNode.style.removeProperty("--inner-height");
|
||||
|
|
@ -476,6 +478,15 @@ SubDialog.prototype = {
|
|||
let frameWidth = docEl.getAttribute("width")
|
||||
? docEl.getAttribute("width") + "px"
|
||||
: frameMinWidth;
|
||||
if (
|
||||
this._box.getAttribute("sizeto") == "available" &&
|
||||
docEl.style.maxWidth
|
||||
) {
|
||||
this._box.style.setProperty(
|
||||
"--box-max-width-requested",
|
||||
this._emToPx(docEl.style.maxWidth)
|
||||
);
|
||||
}
|
||||
|
||||
if (this._box.getAttribute("sizeto") != "available") {
|
||||
this._frame.style.width = frameWidth;
|
||||
|
|
@ -557,6 +568,12 @@ SubDialog.prototype = {
|
|||
this._overlay.style.setProperty("--doc-height-px", getDocHeight());
|
||||
contentPane?.classList.add("sizeDetermined");
|
||||
} else {
|
||||
if (docEl.style.maxHeight) {
|
||||
this._box.style.setProperty(
|
||||
"--box-max-height-requested",
|
||||
this._emToPx(docEl.style.maxHeight)
|
||||
);
|
||||
}
|
||||
// Inform the CSS of the toolbar height so the bottom padding can be
|
||||
// correctly calculated.
|
||||
this._box.style.setProperty("--box-top-px", `${boxRect.top}px`);
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче