Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 11:25:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1822578 - Make flex="1" on XUL set a zero flex basis like the flex shorthand does. r=Gijs,mconley,settings-reviewers,desktop-theme-reviewers,dao

Browse Source 
In a setup with:

<hbox>
 <something flex="1"/>
 <something-else/>
</hbox>

Before bug 1822131 <something flex="1"> ended up with flex-basis: auto,
but was the only thing able to shrink, so <something-else> stayed the
same size.

After that bug however <something-else> is able to shrink too, so both
elements shrink. This wouldn't happen if flex="1" actually worked like
flex: 1 does.

However flex: 1 causes stuff like explicit main sizes to be
(effectively) ignored, so we need to fix up a few cases where now we'd
start flexing too much. For that, add a debug assert to
nsFlexContainerFrame to catch the would-be behavior changes here.

For the most part they're actually no-op since they're setting tiny
sizes, but preferences and devtools needed a couple real fixes.

The profile selection spacer is useless (zero-size).

Hopefully the last xul.css change I need to do :')

Differential Revision: https://phabricator.services.mozilla.com/D172704
This commit is contained in:
Emilio Cobos Álvarez 2023-03-16 00:06:29 +00:00
parent 703b1846fd
commit 9900adffa0
13 changed files with 23 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
browser/base/content/browser.css
View File

@ -206,7 +206,6 @@ panelview:not([visible]) {
flex: 100 100;
max-width: 225px;
min-width: var(--tab-min-width);
width: 0;
transition: min-width 100ms ease-out,
max-width 100ms ease-out;
}
@ -589,9 +588,8 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
#urlbar,
#searchbar {
/* Setting a width and min-width to let the location & search bars maintain
a constant width in case they haven't been resized manually. (bug 965772) */
width: 1px;
/* Setting a min-width to let the location & search bars maintain a constant
* width in case they haven't been resized manually. (bug 965772) */
min-width: 1px;
}
@ -1209,7 +1207,6 @@ toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-s
#customization-panelWrapper {
flex: 1;
height: 0; /* Don't let my contents affect ancestors' content-based sizing */
align-items: end; /* align to the end on the cross-axis (affects arrow) */
}

6
browser/components/preferences/main.inc.xhtml
View File

@ -215,7 +215,7 @@
<hbox id="fontSettings">
<hbox align="center" flex="1">
<label control="defaultFont" data-l10n-id="default-font"/>
<menulist id="defaultFont" flex="1" delayprefsave="true"/>
<menulist id="defaultFont" delayprefsave="true"/>
<label id="defaultFontSizeLabel" control="defaultFontSize" data-l10n-id="default-font-size"></label>
<menulist id="defaultFontSize" delayprefsave="true">
<menupopup>
@ -429,10 +429,10 @@
<listheader id="handlersViewHeader">
<treecol id="typeColumn" data-l10n-id="applications-type-column" value="type"
persist="sortDirection"
flex="1" sortDirection="ascending"/>
style="flex: 1 50%" sortDirection="ascending"/>
<treecol id="actionColumn" data-l10n-id="applications-action-column" value="action"
persist="sortDirection"
flex="1"/>
style="flex: 1 50%"/>
</listheader>
<richlistbox id="handlersView"
preference="pref.downloads.disable_button.edit_actions"/>

2
browser/components/preferences/main.js
View File

@ -1062,7 +1062,7 @@ var gMainPane = {
for (let i = 0; i < messages.length; i++) {
let messageContainer = document.createXULElement("hbox");
messageContainer.classList.add("message-bar-content");
messageContainer.setAttribute("flex", "1");
messageContainer.style.flex = "1 50%";
messageContainer.setAttribute("align", "center");
let description = document.createXULElement("description");

2
browser/components/preferences/privacy.inc.xhtml
View File

@ -927,7 +927,7 @@
</hbox>
</vbox>
<separator flex="1"/>
<separator />
<hbox data-subcategory="permissions-block-popups">
<checkbox id="popupPolicy" preference="dom.disable_open_during_load"

7
browser/themes/shared/preferences/preferences.css
View File

@ -371,11 +371,6 @@ checkbox {
min-height: 30px;
}
#handlersViewHeader > treecol,
#handlersView > richlistitem > hbox {
width: 50%;
}
#handlersView .actionsMenu {
margin: 0;
min-height: 0;
@ -676,7 +671,7 @@ html|dialog,
}
#defaultFont {
width: 25ch;
flex: 1 25ch;
}
#defaultFontType,

2
devtools/client/framework/toolbox-hosts.js
View File

@ -436,7 +436,7 @@ function focusTab(tab) {
function createDevToolsFrame(doc, className) {
const frame = doc.createXULElement("browser");
frame.setAttribute("type", "content");
frame.setAttribute("flex", "1"); // Required to be able to shrink when the window shrinks
frame.style.flex = "1 auto"; // Required to be able to shrink when the window shrinks
frame.className = className;
const inXULDocument = doc.documentElement.namespaceURI === XUL_NS;

16
layout/xul/test/test_splitter.xhtml
View File

@ -105,27 +105,27 @@ XUL <splitter> collapsing tests
]]></script>
<hbox style="display: none; width: 200px; height: 300px; direction: ltr;">
<vbox style="height: 300px;" flex="1"/>
<vbox style="height: 300px; flex: 1 auto"/>
<splitter id="ltr-splitter" width="5"/>
<vbox style="height: 300px;" flex="1"/>
<vbox style="height: 300px; flex: 1 auto;"/>
</hbox>
<hbox style="display: none; width: 200px; height: 300px; direction: rtl;">
<vbox style="height: 300px;" flex="1"/>
<vbox style="height: 300px; flex: 1 auto" />
<splitter id="rtl-splitter" width="5"/>
<vbox style="height: 300px;" flex="1"/>
<vbox style="height: 300px; flex: 1 auto" />
</hbox>
<hbox style="display: none; width: 200px; height: 300px; direction: ltr; -moz-box-layout: flex">
<vbox style="height: 300px;" flex="1"/>
<vbox style="height: 300px; flex: 1 auto" />
<splitter id="ltr-flex-splitter" width="5"/>
<vbox style="height: 300px;" flex="1"/>
<vbox style="height: 300px; flex: 1 auto" />
</hbox>
<hbox style="display: none; width: 200px; height: 300px; direction: rtl; -moz-box-layout: flex">
<vbox style="height: 300px;" flex="1"/>
<vbox style="height: 300px; flex: 1 auto" />
<splitter id="rtl-flex-splitter" width="5"/>
<vbox style="height: 300px;" flex="1"/>
<vbox style="height: 300px; flex: 1 auto" />
</hbox>
</window>

2
layout/xul/test/test_windowminmaxsize.xhtml
View File

@ -22,7 +22,7 @@
<panel id="panel" onpopupshown="doPanelTest(this)" onpopuphidden="nextPopupTest(this)"
orient="vertical"
align="start" pack="start" style="appearance: none; margin: 0; border: 0; padding: 0;">
<hbox id="popupresizer" dir="bottomright" flex="1"
<hbox id="popupresizer" dir="bottomright"
style="width: 60px; height: 60px; appearance: none; margin: 0; border: 0; padding: 0;"/>
</panel>

4
toolkit/content/tests/mochitest/test_mousecapture.xhtml
View File

@ -283,9 +283,9 @@ SimpleTest.waitForFocus(runTests);
</tooltip>
<hbox id="splitterbox" style="margin-top: 5px;" onmousedown="this.setCapture()">
<hbox id="leftbox" style="width: 100px" flex="1"/>
<hbox id="leftbox" style="width: 100px; flex: 1 auto"/>
<splitter id="splitter" style="width: 5px; height: 5px"/>
<hbox id="rightbox" style="width: 100px" flex="1"/>
<hbox id="rightbox" style="width: 100px; flex: 1 auto"/>
</hbox>
<vbox id="custom" style="width: 10px; height: 10px" onmousedown="this.setCapture(); cachedMouseDown = event;"/>

2
toolkit/content/widgets/popupnotification.js
View File

@ -75,7 +75,7 @@
<hbox class="popup-notification-header-container"></hbox>
<hbox align="start" class="popup-notification-body-container">
<image class="popup-notification-icon"/>
<vbox flex="1" pack="start" class="popup-notification-body">
<vbox pack="start" class="popup-notification-body">
<hbox align="start">
<vbox flex="1">
<label class="popup-notification-origin header" crop="center"></label>

2
toolkit/content/xul.css
View File

@ -786,4 +786,4 @@ button, image {
[pack="end"] { justify-content: flex-end !important; }
[flex="0"] { flex: none !important; }
[flex="1"] { flex-grow: 1 !important; flex-shrink: 1 !important }
[flex="1"] { flex: 1 !important; }

2
toolkit/profile/content/profileSelection.xhtml
View File

@ -53,8 +53,6 @@
oncommand="ConfirmDelete();"/>
</vbox>
<separator flex="1"/>
<vbox flex="1">
<richlistbox id="profiles" class="theme-listbox" seltype="single"
ondblclick="onProfilesDblClick(event)"

1
toolkit/themes/shared/popupnotification.css
View File

@ -49,6 +49,7 @@ popupnotificationcontent {
.popup-notification-body {
width: var(--popup-notification-body-width);
flex: 1 auto;
}
.popup-notification-closebutton {