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

browser/components/customizableui/test/browser_hidden_widget_overflow.js

@@ -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({

dom/events/test/bug602962.xhtml

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

layout/base/tests/chrome/printpreview_helper.xhtml

@@ -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="min-height: 200px; min-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>
 <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.minHeight = "800px";
-    browser.style.height = "800px";
+    browser.style.maxWidth = browser.style.minWidth = "800px";
-    browser.style.maxWidth = "800px"; // Deal with XUL silliness.
     browser.setAttribute("initialBrowsingContextGroupId", bc.group.id);
     browser.setAttribute("nodefaultsrc", "true");
     document.documentElement.appendChild(browser);

layout/generic/test/test_bug469613.xhtml

@@ -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[

layout/xul/test/test_splitter.xhtml

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

toolkit/content/tests/chrome/test_hiddenpaging.xhtml

@@ -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;

toolkit/content/tests/chrome/test_mousescroll.xhtml

@@ -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="min-width:40px; min-height:20px; background:black;" hidden="true"/>
-      <hbox style="width:40px; height:20px; background:white;"/>
+      <hbox style="min-width:40px; min-height:20px; background:white;"/>
-      <hbox style="width:40px; height:20px; background:black;"/>
+      <hbox style="min-width:40px; min-height:20px; background:black;"/>
-      <hbox style="width:40px; height:20px; background:white;"/>
+      <hbox style="min-width:40px; min-height:20px; background:white;"/>
-      <hbox style="width:40px; height:20px; background:black;"/>
+      <hbox style="min-width:40px; min-height:20px; background:black;"/>
-      <hbox style="width:40px; height:20px; background:white;"/>
+      <hbox style="min-width:40px; min-height:20px; background:white;"/>
-      <hbox style="width:40px; height:20px; background:black;"/>
+      <hbox style="min-width:40px; min-height:20px; background:black;"/>
-      <hbox style="width:40px; height:20px; background:white;"/>
+      <hbox style="min-width:40px; min-height:20px; background:white;"/>
-      <hbox style="width:40px; height:20px; background:black;"/>
+      <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="min-width:100px; min-height:40px; background:black;" hidden="true"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
-      <vbox style="width:100px; height:40px; background:white;"/>
+      <vbox style="min-width:100px; min-height:40px; background:white;"/>
-      <vbox style="width:100px; height:40px; background:black;"/>
+      <vbox style="min-width:100px; min-height:40px; background:black;"/>
   </arrowscrollbox>
 
   <!-- test code goes here -->

toolkit/content/xul.css

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