From a9335df10d7360afa5165389d4c51e5fb0c9f728 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Tue, 12 Nov 2019 19:49:48 +0000 Subject: [PATCH] Bug 1576946 - Implement using CSS Grid. r=bgrins Differential Revision: https://phabricator.services.mozilla.com/D46226 --HG-- extra : moz-landing-system : lando --- browser/base/content/browser.css | 1 - .../content/protectionsPanel.inc.xul | 3 +-- .../preferences/in-content/preferences.xul | 2 +- .../themes/shared/controlcenter/panel.inc.css | 1 + .../shared/incontentprefs/preferences.inc.css | 13 +++++++++ .../themes/shared/notification-icons.inc.css | 6 ++++- .../test/browser_perf-tree-abstract-05.js | 8 +++++- toolkit/content/widgets/toolbarbutton.js | 2 +- toolkit/content/widgets/tree.js | 27 +++++++------------ toolkit/content/xul.css | 8 +++++- toolkit/themes/linux/global/toolbarbutton.css | 1 - toolkit/themes/osx/global/toolbarbutton.css | 3 ++- toolkit/themes/shared/tree.inc.css | 3 +++ .../themes/windows/global/toolbarbutton.css | 1 - 14 files changed, 50 insertions(+), 29 deletions(-) diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css index 04bbf26cab08..64c99a8f7c3d 100644 --- a/browser/base/content/browser.css +++ b/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] { diff --git a/browser/components/controlcenter/content/protectionsPanel.inc.xul b/browser/components/controlcenter/content/protectionsPanel.inc.xul index 2d56d96f79d0..932bb878b58b 100644 --- a/browser/components/controlcenter/content/protectionsPanel.inc.xul +++ b/browser/components/controlcenter/content/protectionsPanel.inc.xul @@ -149,8 +149,7 @@ + align="center"> diff --git a/browser/components/preferences/in-content/preferences.xul b/browser/components/preferences/in-content/preferences.xul index 62707aefdf5c..4437d4d23e7d 100644 --- a/browser/components/preferences/in-content/preferences.xul +++ b/browser/components/preferences/in-content/preferences.xul @@ -68,7 +68,7 @@ - + diff --git a/browser/themes/shared/controlcenter/panel.inc.css b/browser/themes/shared/controlcenter/panel.inc.css index ce767ea4c0e2..16048fcf29bd 100644 --- a/browser/themes/shared/controlcenter/panel.inc.css +++ b/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] { diff --git a/browser/themes/shared/incontentprefs/preferences.inc.css b/browser/themes/shared/incontentprefs/preferences.inc.css index 7a0b152f18f5..de2b6c8bed69 100644 --- a/browser/themes/shared/incontentprefs/preferences.inc.css +++ b/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; } diff --git a/browser/themes/shared/notification-icons.inc.css b/browser/themes/shared/notification-icons.inc.css index 2dda87d1b758..1d1f752e88d6 100644 --- a/browser/themes/shared/notification-icons.inc.css +++ b/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. */ diff --git a/devtools/client/performance/test/browser_perf-tree-abstract-05.js b/devtools/client/performance/test/browser_perf-tree-abstract-05.js index 54203f6e8d8f..55cdb39224a1 100644 --- a/devtools/client/performance/test/browser_perf-tree-abstract-05.js +++ b/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", diff --git a/toolkit/content/widgets/toolbarbutton.js b/toolkit/content/widgets/toolbarbutton.js index cc7ddab2fd8a..3f46d64b5e38 100644 --- a/toolkit/content/widgets/toolbarbutton.js +++ b/toolkit/content/widgets/toolbarbutton.js @@ -61,7 +61,7 @@ MozXULElement.parseXULToFragment(` - - + @@ -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"); } diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css index cab6de383999..6f875da9421e 100644 --- a/toolkit/content/xul.css +++ b/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 *********/ diff --git a/toolkit/themes/linux/global/toolbarbutton.css b/toolkit/themes/linux/global/toolbarbutton.css index 4bcedf36f3a0..a9a8b59c462b 100644 --- a/toolkit/themes/linux/global/toolbarbutton.css +++ b/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; } diff --git a/toolkit/themes/osx/global/toolbarbutton.css b/toolkit/themes/osx/global/toolbarbutton.css index 74549ffa9a88..c1f3d927fec3 100644 --- a/toolkit/themes/osx/global/toolbarbutton.css +++ b/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 { diff --git a/toolkit/themes/shared/tree.inc.css b/toolkit/themes/shared/tree.inc.css index 5a5171856f35..acfff53caf63 100644 --- a/toolkit/themes/shared/tree.inc.css +++ b/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; diff --git a/toolkit/themes/windows/global/toolbarbutton.css b/toolkit/themes/windows/global/toolbarbutton.css index d7b304c814b5..1bfd48a90a6b 100644 --- a/toolkit/themes/windows/global/toolbarbutton.css +++ b/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; }