From 8d5b4b05552d61fc0a9463a2faac6c889522b746 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Tue, 14 Mar 2023 12:22:11 +0000
Subject: [PATCH] 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
---
 .../test/browser_hidden_widget_overflow.js    |  2 +-
 dom/events/test/bug602962.xhtml               |  2 +-
 .../tests/chrome/printpreview_helper.xhtml    |  9 ++---
 layout/generic/test/test_bug469613.xhtml      |  2 +-
 .../reftests/invalidation/540247-1-ref.xhtml  |  8 ++--
 layout/reftests/invalidation/540247-1.xhtml   |  8 ++--
 layout/xul/test/test_splitter.xhtml           |  2 +-
 .../tests/chrome/test_hiddenpaging.xhtml      |  2 +-
 .../tests/chrome/test_mousescroll.xhtml       | 40 +++++++++----------
 toolkit/content/xul.css                       |  4 --
 10 files changed, 37 insertions(+), 42 deletions(-)

diff --git a/browser/components/customizableui/test/browser_hidden_widget_overflow.js b/browser/components/customizableui/test/browser_hidden_widget_overflow.js
index 665a8fa74b88c..5e0555e29a45c 100644
--- a/browser/components/customizableui/test/browser_hidden_widget_overflow.js
+++ b/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({
diff --git a/dom/events/test/bug602962.xhtml b/dom/events/test/bug602962.xhtml
index 0d54b7ad5260b..43affd6b60017 100644
--- a/dom/events/test/bug602962.xhtml
+++ b/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>
diff --git a/layout/base/tests/chrome/printpreview_helper.xhtml b/layout/base/tests/chrome/printpreview_helper.xhtml
index 15c56d83c81de..055f75c8f54b5 100644
--- a/layout/base/tests/chrome/printpreview_helper.xhtml
+++ b/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="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);
diff --git a/layout/generic/test/test_bug469613.xhtml b/layout/generic/test/test_bug469613.xhtml
index 9a4588f88bc87..94ab163afa4ac 100644
--- a/layout/generic/test/test_bug469613.xhtml
+++ b/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[
diff --git a/layout/reftests/invalidation/540247-1-ref.xhtml b/layout/reftests/invalidation/540247-1-ref.xhtml
index 0ae54a1233e1e..b42ae5185c2af 100644
--- a/layout/reftests/invalidation/540247-1-ref.xhtml
+++ b/layout/reftests/invalidation/540247-1-ref.xhtml
@@ -7,7 +7,7 @@
 document.addEventListener("MozReftestInvalidate", runtest, false);
 
 function runtest() {
-  document.getElementById('b').style.height = '100px';
+  document.getElementById('b').style.minHeight = '100px';
 
   var scrollbox = document.getElementById('s');
   scrollbox.scrollTo(0, 1000);
@@ -19,9 +19,9 @@ function runtest() {
 
   <scrollbox id="s" style="height: 200px; overflow: scroll;">
     <vbox>
-      <vbox style="height: 150px; width: 200px; background: red;" id="b"/>
-      <vbox style="height: 150px; width: 200px; background: green;"/>
-      <vbox style="height: 150px; width: 200px; background: blue;"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: red;" id="b"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: green;"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: blue;"/>
       <label value="a"/>
     </vbox>
   </scrollbox>
diff --git a/layout/reftests/invalidation/540247-1.xhtml b/layout/reftests/invalidation/540247-1.xhtml
index cc12dec71de74..0e3cdb0f452b1 100644
--- a/layout/reftests/invalidation/540247-1.xhtml
+++ b/layout/reftests/invalidation/540247-1.xhtml
@@ -15,7 +15,7 @@ function runtest() {
 }
 
 function finish() {
-  document.getElementById('b').style.height = '100px';
+  document.getElementById('b').style.minHeight = '100px';
   document.documentElement.className = "";
 }
 ]]>
@@ -23,9 +23,9 @@ function finish() {
 
   <scrollbox id="s" style="height: 200px; overflow: scroll;">
     <vbox>
-      <vbox style="height: 150px; width: 200px; background: red;" id="b"/>
-      <vbox style="height: 150px; width: 200px; background: green;"/>
-      <vbox style="height: 150px; width: 200px; background: blue;"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: red;" id="b"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: green;"/>
+      <vbox style="min-height: 150px; min-width: 200px; background: blue;"/>
       <label value="a"/>
     </vbox>
   </scrollbox>
diff --git a/layout/xul/test/test_splitter.xhtml b/layout/xul/test/test_splitter.xhtml
index 8ee74177e9567..1de58c16bca85 100644
--- a/layout/xul/test/test_splitter.xhtml
+++ b/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
 -->
diff --git a/toolkit/content/tests/chrome/test_hiddenpaging.xhtml b/toolkit/content/tests/chrome/test_hiddenpaging.xhtml
index 45dc7ea8bc541..59bcd0e4327bc 100644
--- a/toolkit/content/tests/chrome/test_hiddenpaging.xhtml
+++ b/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;
diff --git a/toolkit/content/tests/chrome/test_mousescroll.xhtml b/toolkit/content/tests/chrome/test_mousescroll.xhtml
index e67cc4663e737..42e7df883657f 100644
--- a/toolkit/content/tests/chrome/test_mousescroll.xhtml
+++ b/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="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 -->
diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css
index 7e36249daadd8..f681666b4e487 100644
--- a/toolkit/content/xul.css
+++ b/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 */