Bug 1822131 - Allow XUL elements to shrink-by-default. r=dholbert

Bug 1821920 and bug 1821871 are instances of an interesting behavior
change from bug 1820534.

The default flex-basis of old XUL was auto instead of max-content,
because of this code:

  https://searchfox.org/mozilla-central/rev/af78418c4b5f2c8721d1a06486cf4cf0b33e1e8d/layout/generic/nsFlexContainerFrame.cpp#1327

So stuff that used to wrap now no longer does, in an horizontal flex
container, since xul.css prevents XUL elements from shrinking.

Per the comment, a few tests relied on this, but I believe it should
generally be safe to shrink the items. This only causes to shrink if
they have an explicit width but no min-width (including min-width:
auto).

Some tests like test_mousescroll.xhtml hit this, because they have
explicit sizes but min-width: auto ends up being 0 effectively, but I
believe we should tweak those tests instead.

Differential Revision: https://phabricator.services.mozilla.com/D172462
This commit is contained in:
Emilio Cobos Álvarez 2023-03-13 20:43:34 +00:00
Родитель 48a1a76d0e
Коммит f60d745bc2
8 изменённых файлов: 29 добавлений и 34 удалений

Просмотреть файл

@ -49,7 +49,7 @@ add_setup(async function() {
// of the hidden widget) get overflowed.
for (let webExtID of [kWebExtensionButtonID1, kWebExtensionButtonID2]) {
let webExtNode = CustomizableUI.getWidget(webExtID).forWindow(gWin).node;
webExtNode.style.width = "100px";
webExtNode.style.minWidth = "100px";
}
CustomizableUI.createWidget({

Просмотреть файл

@ -3,6 +3,6 @@
<window onload="window.opener.doTest()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<scrollbox id="page-scrollbox" style="border: 1px solid red; background-color: black;overflow: auto" flex="1">
<box id="page-box" style="border: 1px solid green;"/>
<box id="page-box" style="flex-shrink: 0; border: 1px solid green;"/>
</scrollbox>
</window>

Просмотреть файл

@ -4,8 +4,8 @@
type="text/css"?>
<window onload="runTests()"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<iframe style="height: 200px; width: 600px" type="content"></iframe>
<iframe style="height: 200px; width: 600px" type="content"></iframe>
<iframe style="min-height: 200px; min-width: 600px" type="content"></iframe>
<iframe style="min-height: 200px; min-width: 600px" type="content"></iframe>
<script type="application/javascript">
<![CDATA[
// Note: We can't use window.frames directly here because the type="content"
@ -86,9 +86,8 @@ function printpreview(options = {}) {
let bc = frameElts[0].contentWindow.browsingContext;
let browser = document.createXULElement("browser");
browser.setAttribute("type", "content");
browser.style.width = "800px";
browser.style.height = "800px";
browser.style.maxWidth = "800px"; // Deal with XUL silliness.
browser.style.minHeight = "800px";
browser.style.maxWidth = browser.style.minWidth = "800px";
browser.setAttribute("initialBrowsingContextGroupId", bc.group.id);
browser.setAttribute("nodefaultsrc", "true");
document.documentElement.appendChild(browser);

Просмотреть файл

@ -18,7 +18,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=469613
</body>
<vbox style="height: 100px; overflow: auto;" id="scrollbox">
<hbox style="height: 200px;"/>
<hbox style="min-height: 200px;"/>
</vbox>
<script class="testbody" type="application/javascript"><![CDATA[

Просмотреть файл

@ -1,7 +1,7 @@
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
<?xml-stylesheet href="data:text/css, hbox { border: 1px solid red; } vbox { border: 1px solid green }" type="text/css"?>
<?xml-stylesheet href="data:text/css, * { flex-shrink: 0 } hbox { border: 1px solid red; } vbox { border: 1px solid green }" type="text/css"?>
<!--
XUL <splitter> collapsing tests
-->

Просмотреть файл

@ -12,7 +12,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=317422
<style xmlns="http://www.w3.org/1999/xhtml">
/* This makes the richlistbox about 4.5 rows high */
richlistitem:not([collapsed]) {
height: 30px;
min-height: 30px;
}
richlistbox {
height: 135px;

Просмотреть файл

@ -34,31 +34,31 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=378028
<box orient="horizontal">
<arrowscrollbox id="hscrollbox" clicktoscroll="true" orient="horizontal"
smoothscroll="false" style="max-width:80px;" flex="1">
<hbox style="width:40px; height:20px; background:black;" hidden="true"/>
<hbox style="width:40px; height:20px; background:white;"/>
<hbox style="width:40px; height:20px; background:black;"/>
<hbox style="width:40px; height:20px; background:white;"/>
<hbox style="width:40px; height:20px; background:black;"/>
<hbox style="width:40px; height:20px; background:white;"/>
<hbox style="width:40px; height:20px; background:black;"/>
<hbox style="width:40px; height:20px; background:white;"/>
<hbox style="width:40px; height:20px; background:black;"/>
<hbox style="min-width:40px; min-height:20px; background:black;" hidden="true"/>
<hbox style="min-width:40px; min-height:20px; background:white;"/>
<hbox style="min-width:40px; min-height:20px; background:black;"/>
<hbox style="min-width:40px; min-height:20px; background:white;"/>
<hbox style="min-width:40px; min-height:20px; background:black;"/>
<hbox style="min-width:40px; min-height:20px; background:white;"/>
<hbox style="min-width:40px; min-height:20px; background:black;"/>
<hbox style="min-width:40px; min-height:20px; background:white;"/>
<hbox style="min-width:40px; min-height:20px; background:black;"/>
</arrowscrollbox>
</box>
<arrowscrollbox id="vscrollbox" clicktoscroll="true" orient="vertical"
smoothscroll="false" style="max-height:80px;" flex="1">
<vbox style="width:100px; height:40px; background:black;" hidden="true"/>
<vbox style="width:100px; height:40px; background:white;"/>
<vbox style="width:100px; height:40px; background:black;"/>
<vbox style="width:100px; height:40px; background:white;"/>
<vbox style="width:100px; height:40px; background:black;"/>
<vbox style="width:100px; height:40px; background:white;"/>
<vbox style="width:100px; height:40px; background:black;"/>
<vbox style="width:100px; height:40px; background:white;"/>
<vbox style="width:100px; height:40px; background:black;"/>
<vbox style="width:100px; height:40px; background:white;"/>
<vbox style="width:100px; height:40px; background:black;"/>
<vbox style="min-width:100px; min-height:40px; background:black;" hidden="true"/>
<vbox style="min-width:100px; min-height:40px; background:white;"/>
<vbox style="min-width:100px; min-height:40px; background:black;"/>
<vbox style="min-width:100px; min-height:40px; background:white;"/>
<vbox style="min-width:100px; min-height:40px; background:black;"/>
<vbox style="min-width:100px; min-height:40px; background:white;"/>
<vbox style="min-width:100px; min-height:40px; background:black;"/>
<vbox style="min-width:100px; min-height:40px; background:white;"/>
<vbox style="min-width:100px; min-height:40px; background:black;"/>
<vbox style="min-width:100px; min-height:40px; background:white;"/>
<vbox style="min-width:100px; min-height:40px; background:black;"/>
</arrowscrollbox>
<!-- test code goes here -->

Просмотреть файл

@ -19,10 +19,6 @@
-moz-user-focus: ignore;
display: flex;
box-sizing: border-box;
/* By default XUL content isn't allowed to shrink. This is legacy (result of
* -moz-box-flex defaulting to zero) and could be removed with some amount of
* effort. */
flex-shrink: 0;
}
/* hide the content and destroy the frame */