Bug 1576946 - Implement <stack> using CSS Grid. r=bgrins

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

--HG--
extra : moz-landing-system : lando

browser/base/content/browser.css

@@ -944,7 +944,6 @@ menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
   /* should occupy space but not be visible */
   opacity: 0;
   pointer-events: none;
-  -moz-stack-sizing: ignore;
 }
 
 browser[tabmodalPromptShowing] {

browser/components/controlcenter/content/protectionsPanel.inc.xul

@@ -149,8 +149,7 @@
             <label class="protections-popup-footer-button-label" flex="1">&protections.showreport.label;</label>
           </toolbarbutton>
           <hbox id="protections-popup-trackers-blocked-counter-box"
-                align="center"
-                end="0">
+                align="center">
             <description id="protections-popup-trackers-blocked-counter-description"
                          onclick="gProtectionsHandler.openProtections(true);"/>
           </hbox>

browser/components/preferences/in-content/preferences.xul

@@ -68,7 +68,7 @@
   <stringbundle id="browserBundle"
                 src="chrome://browser/locale/browser.properties"/>
 
-  <stack flex="1">
+  <stack id="preferences-stack" flex="1">
   <hbox flex="1">
 
     <vbox class="navigation">

browser/themes/shared/controlcenter/panel.inc.css

@@ -1095,6 +1095,7 @@ description#identity-popup-content-verifier,
   visibility: hidden;
   opacity: 0;
   transition: opacity 200ms linear;
+  justify-self: end;
 }
 
 #protections-popup-trackers-blocked-counter-box[showing] {

browser/themes/shared/incontentprefs/preferences.inc.css

@@ -21,6 +21,19 @@
   -moz-user-select: text;
 }
 
+/*
+  The default min-height:auto value makes grid items (and XUL flex items) refuse
+  to be smaller than their content. In this case, we have some tall very content
+  inside of us, and yet we don't want to be taller than the viewport (and we know
+  the tall content will still be accessible via scrollbars regardless if we're a
+  shorter height). So we use min-height:0 to allow ourselves to be smaller than
+  our content height so we can fit the viewport size.
+*/
+#preferences-stack,
+#preferences-stack > * {
+  min-height: 0;
+}
+
 .main-content {
   padding-top: 0;
 }

browser/themes/shared/notification-icons.inc.css

@@ -178,7 +178,7 @@
 }
 
 #webRTC-preview:not([hidden]) {
-  display: -moz-stack;
+  display: grid;
   border-radius: 4px;
   border: 1px solid var(--panel-separator-color);
   overflow: hidden;
@@ -186,6 +186,10 @@
   min-height: 10em;
 }
 
+#webRTC-preview > *|* {
+  grid-area: 1 / 1;
+}
+
 html|*#webRTC-previewVideo {
   width: 300px;
   /* If we don't set the min-width, width is ignored. */

devtools/client/performance/test/browser_perf-tree-abstract-05.js

@@ -20,7 +20,13 @@ add_task(async function() {
   const container = document.createXULElement("vbox");
   container.style.height = "100%";
   container.style.overflow = "scroll";
-  await appendAndWaitForPaint(gBrowser.selectedBrowser.parentNode, container);
+  const browserStack = gBrowser.selectedBrowser.parentNode;
+  // Allow the browser stack to shrink since it will have really long content
+  browserStack.style.minHeight = "0";
+  registerCleanupFunction(() => {
+    browserStack.style.removeProperty("min-height");
+  });
+  await appendAndWaitForPaint(browserStack, container);
 
   const myDataSrc = {
     label: "root",

toolkit/content/widgets/toolbarbutton.js

@@ -61,7 +61,7 @@
         MozXULElement.parseXULToFragment(`
         <stack class="toolbarbutton-badge-stack">
           <image class="toolbarbutton-icon"/>
-          <label class="toolbarbutton-badge" top="0" end="0" crop="none"/>
+          <label class="toolbarbutton-badge" crop="none"/>
         </stack>
         <label class="toolbarbutton-text" crop="right" flex="1"/>
         <label class="toolbarbutton-multiline-text" flex="1"/>

toolkit/content/widgets/tree.js

@@ -602,9 +602,7 @@
                        class="hidevscroll-scrollbar scrollbar-topmost"
                        ></scrollbar>
           </hbox>
-          <box class="tree-input-wrapper" left="0" top="0" hidden="true">
-            <html:input class="tree-input" type="text"/>
-          </box>
+          <html:input class="tree-input" type="text" hidden="true"/>
         </stack>
         <hbox class="hidehscroll-box">
           <scrollbar orient="horizontal" flex="1" increment="16" class="scrollbar-topmost" ></scrollbar>
@@ -1304,11 +1302,6 @@
 
       var input = this.inputField;
 
-      // XUL positioning doesn't work with HTML elements and CSS absolute
-      // positioning doesn't work well with XUL elements, which is why we need
-      // this wrapper
-      var inputWrapper = this.shadowRoot.querySelector(".tree-input-wrapper");
-
       this.ensureCellIsVisible(row, column);
 
       // Get the coordinates of the text inside the cell.
@@ -1318,9 +1311,9 @@
       var cellRect = this.getCoordsForCellItem(row, column, "cell");
 
       // Calculate the top offset of the textbox.
-      var style = window.getComputedStyle(inputWrapper);
+      var style = window.getComputedStyle(input);
       var topadj = parseInt(style.borderTopWidth) + parseInt(style.paddingTop);
-      inputWrapper.top = textRect.y - topadj;
+      input.style.top = `${textRect.y - topadj}px`;
 
       // The leftside of the textbox is aligned to the left side of the text
       // in LTR mode, and left side of the cell in RTL mode.
@@ -1333,14 +1326,13 @@
         widthdiff = textRect.x - cellRect.x;
       }
 
-      inputWrapper.left = left;
-      inputWrapper.height =
-        textRect.height +
+      input.style.left = `${left}px`;
+      input.style.height = `${textRect.height +
         topadj +
         parseInt(style.borderBottomWidth) +
-        parseInt(style.paddingBottom);
-      inputWrapper.width = cellRect.width - widthdiff;
-      inputWrapper.hidden = false;
+        parseInt(style.paddingBottom)}px`;
+      input.style.width = `${cellRect.width - widthdiff}px`;
+      input.hidden = false;
 
       input.value = this.view.getCellText(row, column);
 
@@ -1371,8 +1363,7 @@
         var value = input.value;
         this.view.setCellText(editingRow, editingColumn, value);
       }
-      var inputWrapper = this.shadowRoot.querySelector(".tree-input-wrapper");
-      inputWrapper.hidden = true;
+      input.hidden = true;
       input.value = "";
       this.removeAttribute("editing");
     }

toolkit/content/xul.css

@@ -369,7 +369,13 @@ deck {
 }
 
 stack {
-  display: -moz-stack;
+  display: grid;
+  position: relative;
+}
+
+stack > *|* {
+  grid-area: 1 / 1;
+  z-index: 0;
 }
 
 /********** tabbox *********/

toolkit/themes/linux/global/toolbarbutton.css

@@ -79,5 +79,4 @@ toolbarbutton:-moz-lwtheme:not(:hover):not([checked="true"]):not([open="true"]):
   max-width: 28px;
   line-height: 10px;
   text-align: center;
-  -moz-stack-sizing: ignore;
 }

toolkit/themes/osx/global/toolbarbutton.css

@@ -52,7 +52,8 @@ toolbarbutton[disabled="true"] {
   max-width: 28px;
   line-height: 10px;
   text-align: center;
-  -moz-stack-sizing: ignore;
+  align-self: start;
+  justify-self: end;
 }
 
 toolbar[mode="icons"] > *|* > .toolbarbutton-badge {

toolkit/themes/shared/tree.inc.css

@@ -191,6 +191,9 @@ treechildren::-moz-tree-cell-text(selected, editing) {
 }
 
 html|input.tree-input {
+  position: absolute;
+  top: 0;
+  left: 0;
   -moz-appearance: none;
   -moz-box-flex: 1;
   border: 1px solid Highlight;

toolkit/themes/windows/global/toolbarbutton.css

@@ -94,5 +94,4 @@ toolbarbutton[disabled="true"] {
   max-width: 28px;
   line-height: 10px;
   text-align: center;
-  -moz-stack-sizing: ignore;
 }