Bug 1792473 - Use modern flex emulation in devtools. r=devtools-reviewers,jdescottes

This shouldn't have any behavior change, other than avoiding XUL / CSS
interaction issues.

I had to tweak a bit a few of the webconsole split styles to preserve
behavior (even though without the styles it ends up working out because
the collapsed console would be out of view anyways).

The reason for the changes are:

 * visibility: collapse doesn't prevent min-height from applying on
   modern flexbox. So just collapse it using height properly. We need to
   use !important, at least on height, to override the style attribute
   set by the splitter.

 * Tweak the splitting setup of the console a bit more to match legacy
   behavior.

 * I need to contain: size on some scrollers and replaced elements so
   that they flex properly rather than taking as much space as they need
   (this kinda sucks but oh well). We could set min-width/height: 0
   instead if you think it's easier to understand but contain is more
   robust.

I needed to adjust the test since the fractional part of the container
wasn't getting rounded on my machine, but that's a pre-existing issue
that happens with my DPI settings both before and after the patch.

Differential Revision: https://phabricator.services.mozilla.com/D158183

devtools/client/framework/toolbox.js

@@ -1767,12 +1767,16 @@ Toolbox.prototype = {
 
     if (openedConsolePanel) {
       deck.collapsed = true;
+      deck.removeAttribute("expanded");
       splitter.hidden = true;
       webconsolePanel.collapsed = false;
+      webconsolePanel.setAttribute("expanded", "");
     } else {
       deck.collapsed = false;
+      deck.toggleAttribute("expanded", !this.splitConsole);
       splitter.hidden = !this.splitConsole;
       webconsolePanel.collapsed = !this.splitConsole;
+      webconsolePanel.removeAttribute("expanded");
     }
   },
 

devtools/client/themes/common.css

@@ -12,6 +12,7 @@
    * we're using the `font` shorthand. */
   font: message-box;
   font-size: var(--theme-body-font-size);
+  -moz-box-layout: flex;
 
   --tab-line-hover-color: rgba(0,0,0,.2);
   --tab-line-selected-color: var(--blue-50);

devtools/client/themes/storage.css

@@ -17,14 +17,9 @@ a {
   min-width: 220px;
   max-width: 500px;
   overflow: auto;
-}
-
-#storage-tree {
+  contain: size;
   background: var(--theme-sidebar-background);
-}
-
-/* Let the component gain focus when a click hits an empty area */
-#storage-tree {
+  /* Let the component gain focus when a click hits an empty area */
   -moz-user-focus: normal;
 }
 
@@ -86,7 +81,7 @@ a {
 
 /* Prevent all columns except for value from resizing with the panel */
 #storage-table .table-widget-column:not(#value) {
-  width: 0;
+  -moz-box-flex: 0;
 }
 
 /* Text input in storage table */

devtools/client/themes/toolbox.css

@@ -577,14 +577,31 @@
   -moz-box-flex: 1;
 }
 
+#toolbox-panel-webconsole[collapsed],
+#toolbox-deck[collapsed] {
+  height: 0 !important;
+  min-height: 0 !important;
+}
+
+#toolbox-deck:not([collapsed]),
+#toolbox-panel-webconsole[expanded] {
+  /* Override the splitter-set height and flex instead */
+  height: auto !important;
+}
+
 /**
- * Enrure that selected toolbox panel's contents are keyboard accessible as they
+ * Ensure that selected toolbox panel's contents are keyboard accessible as they
  * are explicitly made not to be when hidden (default).
  */
 .toolbox-panel[selected] * {
   -moz-user-focus: normal;
 }
 
+.toolbox-panel-iframe {
+  /* Allow toolbox frames to shrink under the default size and flex */
+  contain: size;
+}
+
 #toolbox-container {
   -moz-box-flex: 1;
   /* Let the component gain focus when a click hits an empty area */

devtools/client/themes/widgets.css

@@ -389,6 +389,7 @@
   width: 100%;
   height: 100%;
   overflow: auto;
+  contain: size;
 }
 
 .table-widget-body[empty="empty"] {

devtools/client/webconsole/test/browser/browser_webconsole_split.js

@@ -307,7 +307,7 @@ add_task(async function() {
           currentUIState.webconsoleHeight +
           currentUIState.splitterHeight
       ),
-      currentUIState.containerHeight,
+      Math.round(currentUIState.containerHeight),
       "Everything adds up to container height"
     );
     ok(

devtools/client/webconsole/test/browser/browser_webconsole_split_persist.js

@@ -68,12 +68,6 @@ add_task(async function() {
     "The actual height of the console is bound with a min height"
   );
 
-  toolbox.webconsolePanel.style.height = "10000px";
-  ok(
-    toolbox.webconsolePanel.clientHeight < 10000,
-    "The actual height of the console is bound with a max height"
-  );
-
   await toggleSplitConsoleWithEscape(toolbox);
   ok(!toolbox.splitConsole, "Split console is now hidden.");
   is(
@@ -87,7 +81,7 @@ add_task(async function() {
 
   is(
     getHeightPrefValue(),
-    10000,
+    1,
     "Height is set based on panel height after closing"
   );