nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1820534 - Move front-end to modern flexbox. r=Gijs,dao,settings-reviewers,credential-management-reviewers,sgalich,devtools-reviewers,nchevobbe

Browse source 
Done mostly automatically via find/replace following the conversions
specified here:

  https://groups.google.com/a/mozilla.org/g/firefox-dev/c/9sGpF1TNbLk/m/QpU3oTUuAgAJ

For the most part I think the "flex: N N" usage could be simplified to
just "flex: N", but I wanted to preserve behavior (-moz-box-flex sets
both flex-grow and flex-shrink).

I changed legacy layout to also look at the order property rather than
-moz-box-ordinal-group because it made splitters and treecols easier (we
don't need to deal with both orders).

Differential Revision: https://phabricator.services.mozilla.com/D171715
This commit is contained in:
Emilio Cobos Álvarez 2023-03-08 16:13:57 +00:00
parent 111231d6db
commit 097eb3703e
139 changed files with 461 additions and 497 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

4
browser/base/content/aboutDialog.css
View file

@ -11,7 +11,7 @@
}
#aboutDialogContainer {
-moz-box-flex: 1;
flex: 1;
}
#rightBox {
@ -81,7 +81,7 @@
* the dialog, so set the width to a reasonable size, but let it flex to take
* all available space. */
width: 430px;
-moz-box-flex: 1;
flex: 1 auto;
}
.update-throbber {

8
browser/base/content/browser-sidebar.js
View file

@ -284,7 +284,7 @@ var SidebarUI = {
// First reset all ordinals to match DOM ordering.
let browser = document.getElementById("browser");
[...browser.children].forEach((node, i) => {
node.style.MozBoxOrdinalGroup = i + 1;
node.style.order = i + 1;
});
if (!this._positionStart) {
@ -292,9 +292,9 @@ var SidebarUI = {
// Want to display as: | appcontent | splitter | sidebar-box |
// So we just swap box and appcontent ordering
let appcontent = document.getElementById("appcontent");
let boxOrdinal = this._box.style.MozBoxOrdinalGroup;
this._box.style.MozBoxOrdinalGroup = appcontent.style.MozBoxOrdinalGroup;
appcontent.style.MozBoxOrdinalGroup = boxOrdinal;
let boxOrdinal = this._box.style.order;
this._box.style.order = appcontent.style.order;
appcontent.style.order = boxOrdinal;
// Indicate we've switched ordering to the box
this._box.setAttribute("positionend", true);
} else {

4
browser/base/content/browser-siteProtections.js
View file

@ -235,8 +235,8 @@ class ProtectionCategory {
}
// Create an item to hold the origin label and shim allow indicator. Using
// an html element here, so we can use CSS flex rather than -moz-box, which
// handles the label overflow in combination with the icon correctly.
// an html element here, so we can use CSS flex, which handles the label
// overflow in combination with the icon correctly.
let listItem = document.createElementNS(
"http://www.w3.org/1999/xhtml",
"div"

66
browser/base/content/browser.css
View file

@ -57,22 +57,22 @@ body {
* it's on the side it's a sibling of browserContainer.
*/
.browserContainer {
-moz-box-flex: 10000;
flex: 10000 10000;
/* To contain the status panel */
position: relative;
}
.browserStack {
-moz-box-flex: 10000;
flex: 10000 10000;
/* Prevent shrinking the page content to 0 height and width */
min-height: 25px;
min-width: 25px;
}
body {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
display: flex;
flex-direction: column;
flex: 1;
}
#navigator-toolbox:-moz-lwtheme {
@ -145,7 +145,7 @@ body {
}
panelmultiview {
-moz-box-align: start;
align-items: flex-start;
min-width: 0;
min-height: 0;
}
@ -155,7 +155,7 @@ panelmultiview[transitioning] {
}
panelview {
-moz-box-orient: vertical;
flex-direction: column;
}
panelview:not([visible]) {
@ -190,7 +190,7 @@ panelview:not([visible]) {
}
#tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
/* temporary space to keep a tab's close button under the cursor */
display: -moz-box;
display: flex;
visibility: hidden;
}
}
@ -203,7 +203,7 @@ panelview:not([visible]) {
}
.tabbrowser-tab:not([pinned]) {
-moz-box-flex: 100;
flex: 100 100;
max-width: 225px;
min-width: var(--tab-min-width);
width: 0;
@ -307,7 +307,7 @@ toolbar[customizing] #whats-new-menu-button {
:root:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button,
#nav-bar[customizing] > .overflow-button {
display: -moz-box;
display: flex;
}
/* The ids are ugly, but this should be reasonably performant, and
@ -385,23 +385,23 @@ toolbar[customizing] #whats-new-menu-button {
toolbarpaletteitem {
-moz-window-dragging: no-drag;
-moz-box-pack: start;
justify-content: flex-start;
}
.titlebar-buttonbox-container {
-moz-box-ordinal-group: 1000;
order: 1000;
}
@media (-moz-platform: macos) {
@media not (-moz-mac-rtl) {
.titlebar-buttonbox-container:-moz-locale-dir(ltr) {
-moz-box-ordinal-group: 0;
order: -1;
}
}
@media (-moz-mac-rtl) {
.titlebar-buttonbox-container:-moz-locale-dir(rtl) {
-moz-box-ordinal-group: 0;
order: -1;
}
}
}
@ -513,7 +513,7 @@ toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button,
#personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #bookmarks-toolbar-button {
display: -moz-box;
display: flex;
}
#personal-bookmarks {
@ -549,11 +549,11 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-b
#nav-bar-customization-target > #personal-bookmarks,
toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks,
toolbar:not(#TabsToolbar) > #personal-bookmarks {
-moz-box-flex: 1;
flex: 1;
}
#zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
display: -moz-box;
display: flex;
}
#reload-button:not([displaystop]) + #stop-button,
@ -571,7 +571,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
/* Ensure stop-button and reload-button are displayed correctly when in the overflow menu */
.widget-overflow-list > #stop-reload-button > .toolbarbutton-1 {
-moz-box-flex: 1;
flex: 1;
}
@media (-moz-platform: macos) {
@ -708,7 +708,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
}
#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] {
-moz-box-pack: center;
justify-content: center;
color: FieldText;
min-height: 2.6666em;
border-top: 1px solid rgba(38,38,38,.15);
@ -863,14 +863,14 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
/* Flexible spacer sizing (gets overridden in the navbar) */
toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring],
toolbarspring {
-moz-box-flex: 1;
flex: 1;
min-width: 28px;
max-width: 112px;
}
#nav-bar toolbarpaletteitem[id^=wrapper-customizableui-special-spring],
#nav-bar toolbarspring {
-moz-box-flex: 80;
flex: 80 80;
/* We shrink the flexible spacers, but not to nothing so they can be
* manipulated in customize mode; the next rule shrinks them further
* outside customize mode. */
@ -1076,7 +1076,7 @@ browser[tabmodalPromptShowing], browser[tabDialogShowing] {
}
toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-stack > image.toolbarbutton-icon {
display: -moz-box;
display: flex;
}
toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor {
@ -1170,7 +1170,7 @@ toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-s
}
#customization-container {
-moz-box-orient: horizontal;
flex-direction: row;
flex-direction: column;
min-height: 0;
}
@ -1216,7 +1216,7 @@ toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-s
#customization-panelWrapper,
#customization-panelWrapper > .panel-arrowcontent {
-moz-box-flex: 1;
flex: 1;
}
#customization-panel-container {
@ -1233,7 +1233,7 @@ toolbarpaletteitem[dragover] {
#customization-palette-container {
display: flex;
flex-direction: column;
flex-grow: 1;
flex: 1;
}
#customization-palette:not([hidden]) {
@ -1256,16 +1256,16 @@ toolbarpaletteitem[dragover] {
}
#customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
display: -moz-box;
display: flex;
}
#customization-lwtheme-button > .box-inherit > .button-menu-dropmarker,
#customization-uidensity-button > .box-inherit > .button-menu-dropmarker {
display: -moz-box;
display: flex;
}
toolbarpaletteitem[place="palette"] {
-moz-box-orient: vertical;
flex-direction: column;
width: 7em;
max-width: 7em;
/* icon (16) + margin (9 + 12) + 3 lines of text: */
@ -1273,7 +1273,7 @@ toolbarpaletteitem[place="palette"] {
margin-bottom: 5px;
margin-inline-end: 24px;
overflow: visible;
display: -moz-inline-box;
display: inline-flex;
vertical-align: top;
}
@ -1285,11 +1285,11 @@ toolbarpaletteitem > toolbarbutton,
toolbarpaletteitem > toolbaritem {
/* Prevent children from getting events */
pointer-events: none;
-moz-box-pack: center;
justify-content: center;
}
toolbarpaletteitem:not([place="palette"]) > #stop-reload-button {
-moz-box-pack: inherit;
justify-content: inherit;
}
:root[customizing=true] .addon-banner-item,
@ -1541,7 +1541,7 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
.dialogBox {
background-clip: content-box;
display: -moz-box;
display: flex;
margin: 0 3vw;
padding: 0;
overflow-x: auto;
@ -1667,7 +1667,7 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
.dialogFrame {
margin: 0;
-moz-box-flex: 1;
flex: 1;
/* Default dialog dimensions */
width: 34em;
}

2
browser/base/content/navigator-toolbox.inc.xhtml
View file

@ -22,7 +22,7 @@
# shared with other top level windows in macWindow.inc.xhtml.
#include browser-menubar.inc
</toolbaritem>
<spacer flex="1" skipintoolbarset="true" style="-moz-box-ordinal-group: 1000;"/>
<spacer flex="1" skipintoolbarset="true" style="order: 1000;"/>
#include titlebar-items.inc.xhtml
</toolbar>

6
browser/base/content/pageinfo/pageInfo.css
View file

@ -21,8 +21,8 @@
}
#viewGroup > radio > .radio-label-box {
-moz-box-orient: vertical;
-moz-box-align: center;
flex-direction: column;
align-items: center;
}
/* Hide the radio button for the section headers */
@ -82,6 +82,6 @@ td > input,
}
#hostText {
-moz-box-flex: 1;
flex: 1;
margin-top: 1px; /* same margin as adjacent label */
}

14
browser/base/content/pageinfo/pageInfo.xhtml
View file

@ -152,11 +152,11 @@
<tree id="metatree" flex="1" hidecolumnpicker="true" contextmenu="picontext">
<treecols>
<treecol id="meta-name" data-l10n-id="general-meta-name"
persist="width" style="-moz-box-flex: 1"
persist="width" style="flex: 1 1;"
onclick="gMetaView.onPageMediaSort('meta-name');"/>
<splitter class="tree-splitter"/>
<treecol id="meta-content" data-l10n-id="general-meta-content"
persist="width" style="-moz-box-flex: 4"
persist="width" style="flex: 4 4"
onclick="gMetaView.onPageMediaSort('meta-content');"/>
</treecols>
<treechildren id="metatreechildren" flex="1"/>
@ -172,23 +172,23 @@
<tree id="imagetree" onselect="onImageSelect();" contextmenu="picontext"
ondragstart="onBeginLinkDrag(event, 'image-address', 'image-alt')">
<treecols>
<treecol primary="true" persist="width" style="-moz-box-flex: 10"
<treecol primary="true" persist="width" style="flex: 10 10"
width="10" id="image-address" data-l10n-id="media-address"
onclick="gImageView.onPageMediaSort('image-address');"/>
<splitter class="tree-splitter"/>
<treecol persist="hidden width" style="-moz-box-flex: 2"
<treecol persist="hidden width" style="flex: 2 2"
width="2" id="image-type" data-l10n-id="media-type"
onclick="gImageView.onPageMediaSort('image-type');"/>
<splitter class="tree-splitter"/>
<treecol hidden="true" persist="hidden width" style="-moz-box-flex: 2"
<treecol hidden="true" persist="hidden width" style="flex: 2 2"
width="2" id="image-size" data-l10n-id="media-size" value="size"
onclick="gImageView.onPageMediaSort('image-size');"/>
<splitter class="tree-splitter"/>
<treecol hidden="true" persist="hidden width" style="-moz-box-flex: 4"
<treecol hidden="true" persist="hidden width" style="flex: 4 4"
width="4" id="image-alt" data-l10n-id="media-alt-header"
onclick="gImageView.onPageMediaSort('image-alt');"/>
<splitter class="tree-splitter"/>
<treecol hidden="true" persist="hidden width" style="-moz-box-flex: 1"
<treecol hidden="true" persist="hidden width" style="flex: 1 1"
width="1" id="image-count" data-l10n-id="media-count"
onclick="gImageView.onPageMediaSort('image-count');"/>
</treecols>

2
browser/base/content/test/forms/browser_selectpopup.js
View file

@ -739,7 +739,7 @@ add_task(async function test_somehidden() {
while (child) {
is(
getComputedStyle(child).display,
child.label.indexOf("Visible") > 0 ? "-moz-box" : "none",
child.label.indexOf("Visible") > 0 ? "flex" : "none",
"Item " + idx++ + " is visible"
);
child = child.nextElementSibling;

2
browser/base/content/test/sidebar/browser_sidebar_move.js
View file

@ -18,7 +18,7 @@ const EXPECTED_END_ORDINALS = [
function getBrowserChildrenWithOrdinals() {
let browser = document.getElementById("browser");
return [...browser.children].map(node => {
return [node.id, node.style.MozBoxOrdinalGroup];
return [node.id, node.style.order];
});
}

2
browser/components/contextualidentity/content/usercontext.css
View file

@ -111,7 +111,7 @@
}
#userContext-icons {
-moz-box-align: center;
align-items: center;
}
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {

4
browser/components/places/content/editBookmarkPanel.inc.xhtml
View file

@ -71,7 +71,7 @@
<html:input id="editBMPanel_tagsField"
type="text"
is="autocomplete-input"
style="-moz-box-flex: 1;"
style="flex: 1;"
autocompletesearch="places-tag-autocomplete"
autocompletepopup="editBMPanel_tagsAutocomplete"
completedefaultindex="true"
@ -107,7 +107,7 @@
class="hideable"
hidden="true">
<richlistbox id="editBMPanel_tagsSelector"
style="-moz-box-flex: 1"
style="flex: 1;"
styled="true"/>
</div>

22
browser/components/places/content/places.xhtml
View file

@ -360,31 +360,31 @@
<!--
The below code may suggest that 'ordinal' is still a supported XUL
attribute. It is not. This is a crutch so that we can continue
persisting the CSS -moz-box-ordinal-group attribute, which is the
appropriate replacement for the ordinal attribute but cannot yet
persisting the CSS order attribute, which is the appropriate
replacement for the ordinal attribute but cannot yet
be easily persisted. The code that synchronizes the attribute with
the CSS lives in toolkit/content/widget/tree.js and is specific to
tree elements.
-->
<treecol data-l10n-id="places-view-sort-col-name" id="placesContentTitle" anonid="title" style="-moz-box-flex: 5" primary="true" ordinal="1"
<treecol data-l10n-id="places-view-sort-col-name" id="placesContentTitle" anonid="title" style="flex: 5 5" primary="true" ordinal="1"
persist="width hidden ordinal sortActive sortDirection"/>
<splitter class="tree-splitter"/>
<treecol data-l10n-id="places-view-sort-col-tags" id="placesContentTags" anonid="tags" style="-moz-box-flex: 2"
<treecol data-l10n-id="places-view-sort-col-tags" id="placesContentTags" anonid="tags" style="flex: 2 2"
persist="width hidden ordinal sortActive sortDirection"/>
<splitter class="tree-splitter"/>
<treecol data-l10n-id="places-view-sort-col-url" id="placesContentUrl" anonid="url" style="-moz-box-flex: 5"
<treecol data-l10n-id="places-view-sort-col-url" id="placesContentUrl" anonid="url" style="flex: 5 5"
persist="width hidden ordinal sortActive sortDirection"/>
<splitter class="tree-splitter"/>
<treecol data-l10n-id="places-view-sort-col-most-recent-visit" id="placesContentDate" anonid="date" style="-moz-box-flex: 1" hidden="true"
<treecol data-l10n-id="places-view-sort-col-most-recent-visit" id="placesContentDate" anonid="date" style="flex: 1" hidden="true"
persist="width hidden ordinal sortActive sortDirection"/>
<splitter class="tree-splitter"/>
<treecol data-l10n-id="places-view-sort-col-visit-count" id="placesContentVisitCount" anonid="visitCount" style="-moz-box-flex: 1" hidden="true"
<treecol data-l10n-id="places-view-sort-col-visit-count" id="placesContentVisitCount" anonid="visitCount" style="flex: 1" hidden="true"
persist="width hidden ordinal sortActive sortDirection"/>
<splitter class="tree-splitter"/>
<treecol data-l10n-id="places-view-sort-col-date-added" id="placesContentDateAdded" anonid="dateAdded" style="-moz-box-flex: 1" hidden="true"
<treecol data-l10n-id="places-view-sort-col-date-added" id="placesContentDateAdded" anonid="dateAdded" style="flex: 1" hidden="true"
persist="width hidden ordinal sortActive sortDirection"/>
<splitter class="tree-splitter"/>
<treecol data-l10n-id="places-view-sort-col-last-modified" id="placesContentLastModified" anonid="lastModified" style="-moz-box-flex: 1" hidden="true"
<treecol data-l10n-id="places-view-sort-col-last-modified" id="placesContentLastModified" anonid="lastModified" style="flex: 1" hidden="true"
persist="width hidden ordinal sortActive sortDirection"/>
</treecols>
<treechildren flex="1" onclick="ContentTree.onClick(event);"/>
@ -398,12 +398,12 @@
</vbox>
<vbox id="detailsPane">
<vbox id="itemsCountBox" align="center" flex="1" hidden="true">
<spacer style="-moz-box-flex: 3"/>
<spacer style="flex: 3 3"/>
<label id="itemsCountText"/>
<spacer flex="1"/>
<description id="selectItemDescription" data-l10n-id="places-details-pane-select-an-item-description">
</description>
<spacer style="-moz-box-flex: 3"/>
<spacer style="flex: 3 3"/>
</vbox>
<vbox id="infoBox">
#include editBookmarkPanel.inc.xhtml

2
browser/components/places/tests/chrome/test_0_bug510634.xhtml
View file

@ -26,7 +26,7 @@
is="places-tree"
flex="1">
<treecols>
<treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
<treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
</treecols>
<treechildren flex="1"/>
</tree>

2
browser/components/places/tests/chrome/test_bug1163447_selectItems_through_shortcut.xhtml
View file

@ -27,7 +27,7 @@
is="places-tree"
flex="1">
<treecols>
<treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
<treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
</treecols>
<treechildren flex="1"/>
</tree>

2
browser/components/places/tests/chrome/test_bug549192.xhtml
View file

@ -28,7 +28,7 @@
flatList="true"
flex="1">
<treecols>
<treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
<treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
</treecols>
<treechildren flex="1"/>
</tree>

2
browser/components/places/tests/chrome/test_bug549491.xhtml
View file

@ -28,7 +28,7 @@
flatList="true"
flex="1">
<treecols>
<treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
<treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
<splitter class="tree-splitter"/>
<treecol label="Date" anonid="date" flex="1"/>
</treecols>

2
browser/components/places/tests/chrome/test_selectItems_on_nested_tree.xhtml
View file

@ -27,7 +27,7 @@
is="places-tree"
flex="1">
<treecols>
<treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
<treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
</treecols>
<treechildren flex="1"/>
</tree>

2
browser/components/places/tests/chrome/test_treeview_date.xhtml
View file

@ -27,7 +27,7 @@
flatList="true"
flex="1">
<treecols>
<treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
<treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
<splitter class="tree-splitter"/>
<treecol label="Tags" id="tags" anonid="tags" flex="1"/>
<splitter class="tree-splitter"/>

2
browser/components/preferences/dialogs/addEngine.css
View file

@ -3,7 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
input {
-moz-box-flex: 1;
flex: 1;
}
hbox {

4
browser/components/preferences/dialogs/blocklists.xhtml
View file

@ -41,9 +41,9 @@
hidecolumnpicker="true"
onselect="gBlocklistManager.onListSelected();">
<treecols>
<treecol id="selectionCol" label="" style="-moz-box-flex: 1" sortable="false"
<treecol id="selectionCol" label="" style="flex: 1" sortable="false"
type="checkbox"/>
<treecol id="listCol" data-l10n-id="blocklist-treehead-list" style="-moz-box-flex: 80"
<treecol id="listCol" data-l10n-id="blocklist-treehead-list" style="flex: 80 80"
sortable="false"/>
</treecols>
<treechildren/>

10
browser/components/preferences/dialogs/connection.xhtml
View file

@ -57,7 +57,7 @@
<label data-l10n-id="connection-proxy-http" control="networkProxyHTTP" />
</hbox>
<hbox align="center">
<html:input id="networkProxyHTTP" type="text" style="-moz-box-flex: 1;"
<html:input id="networkProxyHTTP" type="text" style="flex: 1;"
preference="network.proxy.http"/>
<label data-l10n-id="connection-proxy-http-port" control="networkProxyHTTP_Port" />
<html:input id="networkProxyHTTP_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535"
@ -76,7 +76,7 @@
<label data-l10n-id="connection-proxy-https" control="networkProxySSL"/>
</hbox>
<hbox align="center">
<html:input id="networkProxySSL" type="text" style="-moz-box-flex: 1;" preference="network.proxy.ssl"/>
<html:input id="networkProxySSL" type="text" style="flex: 1;" preference="network.proxy.ssl"/>
<label data-l10n-id="connection-proxy-ssl-port" control="networkProxySSL_Port" />
<html:input id="networkProxySSL_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
preference="network.proxy.ssl_port"/>
@ -88,7 +88,7 @@
<label data-l10n-id="connection-proxy-socks" control="networkProxySOCKS"/>
</hbox>
<hbox align="center">
<html:input id="networkProxySOCKS" type="text" style="-moz-box-flex: 1;" preference="network.proxy.socks"/>
<html:input id="networkProxySOCKS" type="text" style="flex: 1;" preference="network.proxy.socks"/>
<label data-l10n-id="connection-proxy-socks-port" control="networkProxySOCKS_Port"/>
<html:input id="networkProxySOCKS_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
preference="network.proxy.socks_port"/>
@ -107,7 +107,7 @@
</box>
<radio value="2" data-l10n-id="connection-proxy-autotype" />
<hbox class="indent" flex="1" align="center">
<html:input id="networkProxyAutoconfigURL" type="text" style="-moz-box-flex: 1;" preference="network.proxy.autoconfig_url"
<html:input id="networkProxyAutoconfigURL" type="text" style="flex: 1;" preference="network.proxy.autoconfig_url"
oninput="gConnectionsDialog.updateReloadButton();"/>
<button id="autoReload"
data-l10n-id="connection-proxy-reload"
@ -150,7 +150,7 @@
data-l10n-id="connection-dns-over-https-custom-label"
control="networkCustomDnsOverHttpsInput"/>
</hbox>
<html:input id="networkCustomDnsOverHttpsInput" type="text" style="-moz-box-flex: 1;"
<html:input id="networkCustomDnsOverHttpsInput" type="text" style="flex: 1;"
preference="network.trr.custom_uri"/>
</html:div>
</box>

2
browser/components/preferences/dialogs/handlers.css
View file

@ -8,7 +8,7 @@
* so the labels of all the items align vertically.
*/
.actionsMenu > menupopup > menuitem > .menu-iconic-left {
display: -moz-box;
display: flex;
min-width: 16px;
}

6
browser/components/preferences/dialogs/permissions.js
View file

@ -378,7 +378,7 @@ var gPermissionManager = {
let richlistitem = document.createXULElement("richlistitem");
richlistitem.setAttribute("origin", permission.origin);
let row = document.createXULElement("hbox");
row.setAttribute("style", "-moz-box-flex: 1");
row.setAttribute("style", "flex: 1");
let hbox = document.createXULElement("hbox");
let website = document.createXULElement("label");
@ -386,7 +386,7 @@ var gPermissionManager = {
website.setAttribute("class", "website-name-value");
website.setAttribute("value", permission.origin);
hbox.setAttribute("class", "website-name");
hbox.setAttribute("style", "-moz-box-flex: 3; width: 0");
hbox.setAttribute("style", "flex: 3 3; width: 0");
hbox.appendChild(website);
row.appendChild(hbox);
@ -400,7 +400,7 @@ var gPermissionManager = {
this._getCapabilityL10nId(permission.capability)
);
hbox.setAttribute("class", "website-name");
hbox.setAttribute("style", "-moz-box-flex: 1; width: 0");
hbox.setAttribute("style", "flex: 1; width: 0");
hbox.appendChild(capability);
row.appendChild(hbox);
}

6
browser/components/preferences/dialogs/permissions.xhtml
View file

@ -40,7 +40,7 @@
<label id="urlLabel" control="url" data-l10n-id="permissions-address"/>
<hbox align="start">
<html:input id="url" type="text"
style="-moz-box-flex: 1;"
style="flex: 1;"
oninput="gPermissionManager.onHostInput(event.target);"
onkeypress="gPermissionManager.onHostKeyPress(event);"/>
</hbox>
@ -60,9 +60,9 @@
</hbox>
<separator class="thin"/>
<listheader>
<treecol id="siteCol" data-l10n-id="permissions-site-name" style="-moz-box-flex: 3; width: 0"
<treecol id="siteCol" data-l10n-id="permissions-site-name" style="flex: 3 3; width: 0"
onclick="gPermissionManager.buildPermissionsList(event.target)"/>
<treecol id="statusCol" data-l10n-id="permissions-status" style="-moz-box-flex: 1; width: 0"
<treecol id="statusCol" data-l10n-id="permissions-status" style="flex: 1; width: 0"
data-isCurrentSortCol="true"
onclick="gPermissionManager.buildPermissionsList(event.target);"/>
</listheader>

2
browser/components/preferences/dialogs/siteDataSettings.js
View file

@ -41,7 +41,7 @@ let gSiteDataSettings = {
function addColumnItem(l10n, flexWidth, tooltipText) {
let box = document.createXULElement("hbox");
box.className = "item-box";
box.setAttribute("style", `-moz-box-flex: ${flexWidth}`);
box.setAttribute("style", `flex: ${flexWidth} ${flexWidth};`);
let label = document.createXULElement("label");
label.setAttribute("crop", "end");
if (l10n) {

8
browser/components/preferences/dialogs/siteDataSettings.xhtml
View file

@ -42,11 +42,11 @@
<separator class="thin"/>
<listheader>
<treecol style="-moz-box-flex: 4; width: 50px" data-l10n-id="site-data-column-host" id="hostCol"/>
<treecol style="-moz-box-flex: 1; width: 50px" data-l10n-id="site-data-column-cookies" id="cookiesCol"/>
<treecol style="flex: 4 4; width: 50px" data-l10n-id="site-data-column-host" id="hostCol"/>
<treecol style="flex: 1; width: 50px" data-l10n-id="site-data-column-cookies" id="cookiesCol"/>
<!-- Sorted by usage so the user can quickly see which sites use the most data. -->
<treecol style="-moz-box-flex: 2; width: 50px" data-l10n-id="site-data-column-storage" id="usageCol" data-isCurrentSortCol="true"/>
<treecol style="-moz-box-flex: 2; width: 50px" data-l10n-id="site-data-column-last-used" id="lastAccessedCol" />
<treecol style="flex: 2 2; width: 50px" data-l10n-id="site-data-column-storage" id="usageCol" data-isCurrentSortCol="true"/>
<treecol style="flex: 2 2; width: 50px" data-l10n-id="site-data-column-last-used" id="lastAccessedCol" />
</listheader>
<richlistbox seltype="multiple" id="sitesList" orient="vertical" flex="1"/>
</vbox>

2
browser/components/preferences/dialogs/sitePermissions.css
View file

@ -5,7 +5,7 @@
.website-name {
overflow: hidden; /* Allows equal sizing combined with width="0" */
padding-inline-start: 7px;
-moz-box-align: center;
align-items: center;
}
#permissionsBox {

6
browser/components/preferences/dialogs/sitePermissions.js
View file

@ -353,7 +353,7 @@ var gSitePermissionsManager = {
let richlistitem = document.createXULElement("richlistitem");
richlistitem.setAttribute("origin", permission.origin);
let row = document.createXULElement("hbox");
row.setAttribute("style", "-moz-box-flex: 1");
row.setAttribute("style", "flex: 1");
let hbox = document.createXULElement("hbox");
let website = document.createXULElement("label");
@ -361,11 +361,11 @@ var gSitePermissionsManager = {
// TODO(bug 1802993): Seems this could be on the hbox instead or something?
website.setAttribute("style", `width: ${width}`);
hbox.setAttribute("class", "website-name");
hbox.setAttribute("style", `-moz-box-flex: 3`);
hbox.setAttribute("style", `flex: 3 3`);
hbox.appendChild(website);
let menulist = document.createXULElement("menulist");
menulist.setAttribute("style", `-moz-box-flex: 1; width: ${width}`);
menulist.setAttribute("style", `flex: 1; width: ${width}`);
menulist.setAttribute("class", "website-status");
let states = SitePermissions.getAvailableStates(permission.type);
for (let state of states) {

4
browser/components/preferences/dialogs/sitePermissions.xhtml
View file

@ -49,9 +49,9 @@
</hbox>
<separator class="thin"/>
<listheader>
<treecol id="siteCol" data-l10n-id="permissions-site-name" style="-moz-box-flex: 3; width: 75px"
<treecol id="siteCol" data-l10n-id="permissions-site-name" style="flex: 3 3; width: 75px"
onclick="gSitePermissionsManager.buildPermissionsList(event.target)"/>
<treecol id="statusCol" data-l10n-id="permissions-status" style="-moz-box-flex: 1; width: 75px"
<treecol id="statusCol" data-l10n-id="permissions-status" style="flex: 1; width: 75px"
data-isCurrentSortCol="true"
onclick="gSitePermissionsManager.buildPermissionsList(event.target);"/>
</listheader>

2
browser/components/preferences/experimental.inc.xhtml
View file

@ -10,7 +10,7 @@
class="subcategory"
hidden="true"
data-category="paneExperimental">
<html:h1 style="-moz-box-flex: 1;" data-l10n-id="pane-experimental-title"/>
<html:h1 style="flex: 1;" data-l10n-id="pane-experimental-title"/>
<label><html:h2 id="pane-experimental-subtitle" data-l10n-id="pane-experimental-subtitle"/></label>
<hbox pack="end">
<button id="experimentalCategory-reset"

4
browser/components/preferences/home.inc.xhtml
View file

@ -10,7 +10,7 @@
class="subcategory"
hidden="true"
data-category="paneHome">
<html:h1 style="-moz-box-flex: 1;" data-l10n-id="pane-home-title"/>
<html:h1 style="flex: 1;" data-l10n-id="pane-home-title"/>
<button id="restoreDefaultHomePageBtn"
is="highlightable-button"
class="homepage-button check-home-page-controlled"
@ -45,7 +45,7 @@
type="text"
is="autocomplete-input"
class="uri-element check-home-page-controlled"
style="-moz-box-flex: 1;"
style="flex: 1;"
data-preference-related="browser.startup.homepage"
data-l10n-id="home-homepage-custom-url"
autocompletepopup="homePageUrlAutocomplete" />

2
browser/extensions/formautofill/skin/windows/editDialog.css
View file

@ -4,7 +4,7 @@
/* The save button should be on the left and cancel on the right for Windows */
#controlsContainer > #save {
order: 0;
order: -1;
}
#controlsContainer > #cancel {

14
browser/themes/linux/browser.css
View file

@ -31,7 +31,7 @@
}
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
flex-direction: column; /* for flex hack */
}
#navigator-toolbox {
@ -332,7 +332,7 @@ menuitem.bookmark-item {
* can swallow those events. */
.titlebar-buttonbox {
z-index: 1;
-moz-box-align: center;
align-items: center;
}
/* Render titlebar command buttons according to system config.
@ -340,22 +340,22 @@ menuitem.bookmark-item {
.titlebar-min {
appearance: auto;
-moz-default-appearance: -moz-window-button-minimize;
-moz-box-ordinal-group: env(-moz-gtk-csd-minimize-button-position);
order: env(-moz-gtk-csd-minimize-button-position);
}
.titlebar-max {
appearance: auto;
-moz-default-appearance: -moz-window-button-maximize;
-moz-box-ordinal-group: env(-moz-gtk-csd-maximize-button-position);
order: env(-moz-gtk-csd-maximize-button-position);
}
.titlebar-restore {
appearance: auto;
-moz-default-appearance: -moz-window-button-restore;
-moz-box-ordinal-group: env(-moz-gtk-csd-maximize-button-position);
order: env(-moz-gtk-csd-maximize-button-position);
}
.titlebar-close {
appearance: auto;
-moz-default-appearance: -moz-window-button-close;
-moz-box-ordinal-group: env(-moz-gtk-csd-close-button-position);
order: env(-moz-gtk-csd-close-button-position);
}
/* When using lightweight themes, use our own buttons since native ones might
@ -414,7 +414,7 @@ menuitem.bookmark-item {
@media (-moz-gtk-csd-reversed-placement) {
.titlebar-buttonbox-container {
-moz-box-ordinal-group: 0;
order: -1;
}
}
}

2
browser/themes/linux/places/organizer.css
View file

@ -84,7 +84,7 @@
#placesMenu > menu::after {
content: "";
display: -moz-box;
display: flex;
width: 12px;
height: 12px;
content: url("chrome://global/skin/icons/arrow-down-12.svg");

2
browser/themes/linux/preferences/applications.css
View file

@ -27,7 +27,7 @@ menuitem[appHandlerIcon="plugin"] {
}
#appList > richlistitem {
-moz-box-align: center;
align-items: center;
}
#appList > richlistitem > image {

10
browser/themes/osx/browser.css
View file

@ -54,7 +54,7 @@
*/
#navigator-toolbox::after {
content: "";
display: -moz-box;
display: flex;
appearance: auto;
-moz-default-appearance: toolbox;
height: 1px;
@ -66,7 +66,7 @@
#titlebar {
/* Centrally align content items vertically */
-moz-box-pack: center;
justify-content: center;
}
.titlebar-button {
@ -74,7 +74,7 @@
}
.titlebar-buttonbox-container {
-moz-box-align: center;
align-items: center;
}
/* Hide window controls in fullscreen */
@ -135,7 +135,7 @@
#nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {
min-height: 32px;
-moz-box-align: center;
align-items: center;
}
/* Workaround for native menubar inheritance */
@ -333,7 +333,7 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
#tabbrowser-tabs {
/* overriding tabbox.css */
-moz-box-align: stretch;
align-items: stretch;
margin-bottom: 0;
position: static;
z-index: auto;

8
browser/themes/osx/pageInfo.css
View file

@ -9,8 +9,8 @@
appearance: auto;
-moz-default-appearance: toolbar;
-moz-window-dragging: drag;
-moz-box-align: center;
-moz-box-pack: center;
align-items: center;
justify-content: center;
}
#viewGroup {
@ -19,8 +19,8 @@
#viewGroup > radio,
#viewGroup > toolbarbutton {
-moz-box-orient: vertical;
-moz-box-align: center;
flex-direction: column;
align-items: center;
appearance: auto;
-moz-default-appearance: toolbarbutton;
font: menu;

2
browser/themes/osx/preferences/applications.css
View file

@ -45,7 +45,7 @@ menuitem[appHandlerIcon] > .menu-iconic-left > .menu-iconic-icon {
}
#appList > richlistitem {
-moz-box-align: center;
align-items: center;
}
#appList > richlistitem > image {

6
browser/themes/shared/UITour.css
View file

@ -34,11 +34,11 @@
}
#UITourTooltipBody {
-moz-box-align: start;
align-items: flex-start;
}
#UITourTooltipTitleContainer {
-moz-box-align: start;
align-items: flex-start;
margin-bottom: 10px;
}
@ -81,7 +81,7 @@
}
#UITourTooltipButtons {
-moz-box-pack: end;
justify-content: flex-end;
background-color: var(--arrowpanel-dimmed);
border-top: 1px solid var(--panel-separator-color);
margin: 10px -16px -16px;

2
browser/themes/shared/addons/unified-extensions.css
View file

@ -142,7 +142,7 @@ unified-extensions-item {
}
toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton {
-moz-box-flex: 0;
flex: none;
margin-inline-start: var(--arrowpanel-menuitem-margin-inline);
padding: 8px;
border: 1px solid transparent;

4
browser/themes/shared/browser-shared.css
View file

@ -265,7 +265,7 @@ menupopup::part(drop-indicator-container) {
* probably simplify this substantially, by making the indicator position:
* absolute or so (which was never properly supported in XUL). The container
* should become completely unnecessary then. */
-moz-box-flex: 1;
flex: 1;
min-width: 0;
min-height: 0;
}
@ -339,7 +339,7 @@ menupopup::part(drop-indicator) {
/* New Private Browsing Indicator */
#private-browsing-indicator-with-label {
-moz-box-align: center;
align-items: center;
margin-inline: 7px;
}

6
browser/themes/shared/contextmenu.css
View file

@ -5,9 +5,9 @@
@namespace html url("http://www.w3.org/1999/xhtml");
#context-navigation > .menuitem-iconic {
-moz-box-flex: 1;
-moz-box-pack: center;
-moz-box-align: center;
flex: 1;
justify-content: center;
align-items: center;
}
#context-navigation > .menuitem-iconic > .menu-iconic-left {

6
browser/themes/shared/controlcenter/panel.css
View file

@ -332,8 +332,8 @@
}
#protections-popup-trackersView-list.empty {
-moz-box-align: center;
-moz-box-pack: center;
align-items: center;
justify-content: center;
}
.protections-popup-empty-label {
@ -566,7 +566,7 @@
.protections-popup-tp-switch-label-box,
.protections-popup-tp-switch-box {
min-height: 40px;
-moz-box-pack: center;
justify-content: center;
}
/* This is needed in order to show a correct height if the 'Site not working?'

6
browser/themes/shared/ctrlTab.css
View file

@ -52,7 +52,7 @@
.ctrlTab-favicon-container {
position: relative;
-moz-box-pack: end;
justify-content: flex-end;
}
.ctrlTab-favicon[src] {
@ -117,7 +117,7 @@
}
.ctrlTab-label {
-moz-box-flex: 1;
-moz-box-pack: center;
flex: 1;
justify-content: center;
contain: inline-size;
}

6
browser/themes/shared/customizableui/customizeMode.css
View file

@ -286,15 +286,15 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-out-button,
#wrapper-edit-controls[place="palette"] > #edit-controls > #cut-button,
#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-button {
-moz-box-align: end;
align-items: flex-end;
}
#wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-in-button,
#wrapper-edit-controls[place="palette"] > #edit-controls > #paste-button,
#wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-dropmarker {
-moz-box-align: start;
align-items: flex-start;
}
#wrapper-edit-controls[place="palette"] > #edit-controls > #copy-button {
-moz-box-flex: 0;
flex: none;
}
#customization-uidensity-touch-spacer {

54
browser/themes/shared/customizableui/panelUI-shared.css
View file

@ -52,7 +52,7 @@
}
#PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
display: -moz-box;
display: flex;
height: 10px;
width: 10px;
background-size: contain;
@ -139,7 +139,7 @@
}
panelview {
-moz-box-orient: vertical;
flex-direction: column;
background: var(--arrowpanel-background);
padding: 0;
}
@ -155,7 +155,7 @@ panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelv
.panel-subview-body {
overflow-y: auto;
overflow-x: hidden;
-moz-box-flex: 1;
flex: 1;
padding: var(--panel-subview-body-padding);
}
@ -169,7 +169,7 @@ toolbarseparator + .panel-subview-body {
.panel-view-body-unscrollable {
overflow: hidden;
-moz-box-flex: 1;
flex: 1;
}
.panel-info-button {
@ -322,7 +322,7 @@ toolbarbutton menupopup[placespopup] menuseparator::before {
}
#confirmation-hint::part(content) {
-moz-box-align: center;
align-items: center;
}
#confirmation-hint-checkmark-animation-container {
@ -473,7 +473,7 @@ panelview[id^=PanelUI-webext-] {
}
toolbarpaletteitem[place="panel"] > .toolbarbutton-1 {
-moz-box-flex: 1;
flex: 1;
}
/* Help webextension buttons fit in. */
@ -487,7 +487,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
#customization-palette .toolbarbutton-1 {
appearance: none;
-moz-box-orient: vertical;
flex-direction: column;
padding: 12px 0 9px;
margin: 0;
}
@ -514,7 +514,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
#appMenu-popup .panel-banner-item,
#appMenu-popup .addon-banner-item {
-moz-box-align: start;
align-items: flex-start;
color: var(--panel-banner-item-color);
background-color: var(--panel-banner-item-background-color);
margin-bottom: 4px;
@ -548,7 +548,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
width: 16px;
height: 16px;
/* Move the icon to appear after the text label. */
-moz-box-ordinal-group: 2;
order: 2;
}
.addon-banner-item > .toolbarbutton-icon {
@ -559,7 +559,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
added to put their generic notification in. */
.addon-banner-item::after {
content: "";
display: -moz-box;
display: flex;
background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
width: 16px;
height: 16px;
@ -665,7 +665,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
.syncNowBtn {
visibility: collapse;
-moz-box-ordinal-group: 2;
order: 2;
}
.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
@ -981,7 +981,7 @@ panelview .toolbarbutton-1,
.subviewbutton {
/* toolbarbuttons default to centered, but we don't want that for subviews. */
-moz-box-pack: start;
justify-content: flex-start;
}
.subviewbutton[disabled="true"] {
@ -1097,7 +1097,7 @@ panelview .toolbarbutton-1,
.subviewbutton[shortcut]::after {
content: attr(shortcut);
display: -moz-box;
display: flex;
color: var(--panel-shortcut-color);
}
@ -1108,7 +1108,7 @@ panelview .toolbarbutton-1,
content: url(chrome://global/skin/icons/arrow-right.svg);
fill: currentColor;
fill-opacity: 0.6;
display: -moz-box;
display: flex;
}
#protections-popup-mainView .subviewbutton-nav:not(.notFound):-moz-locale-dir(rtl)::after,
@ -1139,7 +1139,7 @@ panelview .toolbarbutton-1,
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.6;
display: -moz-box;
display: flex;
height: 12px;
width: 12px;
}
@ -1165,8 +1165,8 @@ panelview .toolbarbutton-1,
.toolbaritem-combined-buttons,
.toolbaritem-menu-buttons {
-moz-box-align: center;
-moz-box-orient: horizontal;
align-items: center;
flex-direction: row;
border: 0;
border-radius: 0;
}
@ -1177,13 +1177,13 @@ panelview .toolbarbutton-1,
}
panelmultiview .toolbaritem-combined-buttons > label {
-moz-box-flex: 1;
flex: 1;
margin: 0;
padding: 4px 0;
}
.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
-moz-box-flex: 0;
flex: none;
height: auto;
margin-inline-start: 18px;
min-width: auto;
@ -1309,14 +1309,14 @@ toolbarpaletteitem[place="palette"] > #search-container {
) > toolbarbutton {
border: 0;
margin: 0;
-moz-box-flex: 1;
flex: 1;
padding-block: var(--arrowpanel-menuitem-padding-block);
-moz-box-orient: horizontal;
flex-direction: row;
}
toolbarpaletteitem[place="panel"],
toolbarpaletteitem[place="panel"] > toolbaritem {
-moz-box-flex: 1;
flex: 1;
}
.toolbaritem-combined-buttons[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker,
@ -1343,7 +1343,7 @@ toolbarpaletteitem[place="panel"] > toolbaritem {
[overflowedItem=true]
) > separator {
appearance: none;
-moz-box-align: stretch;
align-items: stretch;
margin: .5em 0;
width: 1px;
height: auto;
@ -1361,8 +1361,8 @@ toolbarpaletteitem[place="panel"] > toolbaritem {
}
.widget-overflow-list .toolbarbutton-1 {
-moz-box-align: center;
-moz-box-orient: horizontal;
align-items: center;
flex-direction: row;
}
toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
@ -1402,7 +1402,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
}
#panic-button-success-header {
-moz-box-align: center;
align-items: center;
margin-bottom: 5px;
}
@ -1412,7 +1412,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
.subviewradio {
appearance: none;
-moz-box-align: center;
align-items: center;
padding: 3px;
margin: 0 0 2px;
background-color: transparent;

2
browser/themes/shared/downloads/allDownloadsView.inc.css
View file

@ -42,7 +42,7 @@
.downloadButton {
appearance: none;
-moz-box-align: center;
align-items: center;
background: transparent;
min-width: 0;
min-height: 0;

2
browser/themes/shared/downloads/download-blockedStates.css
View file

@ -49,7 +49,7 @@
}
#downloadsPanel-blockedSubview-title {
-moz-box-flex: 1;
flex: 1;
}
#downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image,

2
browser/themes/shared/downloads/progressmeter.css
View file

@ -41,7 +41,7 @@ toolbar[brighttext]:-moz-lwtheme {
.downloadProgress {
appearance: none;
display: -moz-box;
display: flex;
margin-block: 5px 1px;
/* This value is kinda odd, it's used to align with the edge of the badge,
* if shown, which is inside the edge of the image (the image gets 16px

2
browser/themes/shared/identity-block/identity-block.css
View file

@ -203,7 +203,7 @@
#identity-permission-box[open=true],
#identity-permission-box[hasPermissions],
#identity-permission-box[hasSharingIcon] {
display: -moz-box;
display: flex;
}
/* SHARING ICON */

4
browser/themes/shared/notification-icons.css
View file

@ -207,7 +207,7 @@
}
#webRTC-preview:not([hidden]) {
-moz-box-orient: vertical;
flex-direction: column;
}
#webRTC-previewVideo {
@ -348,7 +348,7 @@
#notification-popup-box[hidden] {
/* Override display:none to make the pluginBlockedNotification animation work
when showing the notification repeatedly. */
display: -moz-box;
display: flex;
visibility: collapse;
}

4
browser/themes/shared/places/editBookmark.css
View file

@ -34,7 +34,7 @@
}
.folder-icon > .menu-iconic-left {
display: -moz-box;
display: flex;
}
.folder-icon {
@ -46,7 +46,7 @@
#editBMPanel_tagsSelector > richlistitem > image {
appearance: auto;
-moz-default-appearance: checkbox;
-moz-box-align: center;
align-items: center;
margin: 0 2px;
min-width: 13px;
min-height: 13px;

2
browser/themes/shared/places/organizer-shared.css
View file

@ -3,7 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#contentView {
-moz-box-flex: 4;
flex: 4 4;
}
#contentView,

2
browser/themes/shared/places/sidebar.css
View file

@ -80,7 +80,7 @@
#viewButton > .button-box > .button-menu-dropmarker {
appearance: none !important;
display: -moz-box;
display: flex;
list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
width: 12px;
height: 12px;

4
browser/themes/shared/preferences/containers-dialog.css
View file

@ -5,11 +5,11 @@
@import url("chrome://browser/content/usercontext/usercontext.css");
#name {
-moz-box-flex: 1;
flex: 1;
}
.radio-buttons {
-moz-box-orient: horizontal;
flex-direction: row;
margin-inline-start: 0.35rem;
}

2
browser/themes/shared/preferences/containers.css
View file

@ -37,7 +37,7 @@
* by the prefs' find-in-page feature.
*/
.userContext-label-inprefs {
display: -moz-box;
display: flex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

2
browser/themes/shared/preferences/dialog.css
View file

@ -18,7 +18,7 @@ dialog {
.contentPane,
dialog::part(content-box) {
-moz-box-flex: 1;
flex: 1;
/* This allows the focus ring to display fully when scrolling is enabled. */
padding: 4px;
}

28
browser/themes/shared/preferences/preferences.css
View file

@ -30,8 +30,8 @@
#preferences-body {
vertical-align: top; /* See bug 1606130 */
display: -moz-box;
-moz-box-orient: vertical;
display: flex;
flex-direction: column;
--main-pane-width: 664px;
}
@ -174,7 +174,7 @@ checkbox {
}
.ac-site-icon {
display: -moz-box;
display: flex;
}
/* Subcategory title */
@ -309,7 +309,7 @@ checkbox {
}
#saveWhere {
-moz-box-align: center;
align-items: center;
}
#saveTo {
@ -317,7 +317,7 @@ checkbox {
}
#downloadFolder {
-moz-box-flex: 1;
flex: 1;
margin-block: 4px;
margin-inline-start: 0;
padding-inline-start: 30px;
@ -346,7 +346,7 @@ checkbox {
}
#updateDeck > hbox > label {
-moz-box-flex: 1;
flex: 1;
}
.manualLink {
@ -597,7 +597,7 @@ html|dialog,
color: var(--in-content-page-color);
/* `transparent` will use the dialogText color in high-contrast themes and
when page colors are disabled */
display: -moz-box;
display: flex;
margin: 0;
padding: 0;
overflow-x: auto;
@ -657,7 +657,7 @@ html|dialog,
.dialogFrame {
margin: 10px;
-moz-box-flex: 1;
flex: 1;
/* Default dialog dimensions */
min-width: 66ch;
}
@ -723,7 +723,7 @@ html|dialog,
}
#fxaSyncComputerName {
-moz-box-flex: 1;
flex: 1;
margin-block: 4px;
margin-inline-start: 0;
}
@ -830,7 +830,7 @@ dialog > .sync-engines-list + hbox {
}
.sync-engines-list .checkbox-label-box {
-moz-box-align: center;
align-items: center;
}
.sync-engines-list {
@ -1001,7 +1001,7 @@ dialog > .sync-engines-list + hbox {
}
.sticky-inner-container {
-moz-box-flex: 1;
flex: 1;
max-width: var(--main-pane-width);
}
@ -1056,7 +1056,7 @@ dialog > .sync-engines-list + hbox {
}
menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
display: -moz-box;
display: flex;
min-width: auto; /* Override the min-width defined in menu.css */
margin-inline-end: 6px;
}
@ -1193,11 +1193,11 @@ richlistitem .text-link:hover {
.featureGateCheckbox {
font-size: 1.14em;
-moz-box-align: center;
align-items: center;
}
.featureGateCheckbox > .checkbox-label-box {
-moz-box-align: center;
align-items: center;
}
.featureGateDescription {

2
browser/themes/shared/preferences/privacy.css
View file

@ -302,7 +302,7 @@
}
#submitHealthReportBox {
display: -moz-inline-box;
display: inline-flex;
}
/* Address bar */

2
browser/themes/shared/preferences/search.css
View file

@ -45,7 +45,7 @@
/* work around a display: none in Linux's menu.css, see bug 1112310 */
.searchengine-menuitem > .menu-iconic-left {
display: -moz-box;
display: flex;
}
#engineList {

4
browser/themes/shared/preferences/siteDataSettings.css
View file

@ -16,12 +16,12 @@
#sitesList > richlistitem > hbox,
.item-box > label {
-moz-box-flex: 1;
flex: 1;
}
.item-box {
padding: 5px 8px;
-moz-box-align: center;
align-items: center;
width: 50px;
}

8
browser/themes/shared/searchbar.css
View file

@ -49,7 +49,7 @@
*/
.search-panel-current-engine {
-moz-box-align: center;
align-items: center;
border-top: none !important;
padding-inline: 8px;
}
@ -58,7 +58,7 @@
.search-panel-one-offs-container {
display: flex;
flex-direction: row;
flex-grow: 1;
flex: 1;
}
.search-panel-one-offs {
@ -70,7 +70,7 @@
.searchbar-engine-one-off-item {
appearance: none;
display: -moz-inline-box;
display: inline-flex;
background-color: transparent;
border: none;
min-width: 32px;
@ -124,7 +124,7 @@
}
.search-panel-tree > .autocomplete-richlistitem > .ac-type-icon {
display: -moz-box;
display: flex;
width: 14px;
height: 14px;
margin-inline-end: 7px;

8
browser/themes/shared/sidebar.css
View file

@ -21,11 +21,11 @@
#sidebar-spacer {
/* To ensure the button doesn't expand unnecessarily for short labels, the
spacer should significantly out-flex the button. */
-moz-box-flex: 1000;
flex: 1000 1000;
}
#sidebar {
-moz-box-flex: 1;
flex: 1;
}
@media not (-moz-platform: linux) {
@ -65,7 +65,7 @@
margin: 0;
padding: 0;
padding-inline: 8px 4px;
-moz-box-flex: 1;
flex: 1;
}
#sidebar-switcher-arrow {
@ -87,7 +87,7 @@
border-radius: var(--toolbarbutton-border-radius);
border: 1px solid transparent;
padding: 2px 4px;
-moz-box-flex: 1;
flex: 1;
}
#sidebar-switcher-target:hover {

6
browser/themes/shared/tabs.css
View file

@ -53,7 +53,7 @@
padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
/* Use a bigger flex value than the searchbar to prevent it from
* taking all the toolbar space. */
-moz-box-flex: 1000;
flex: 1000 1000;
}
#tabbrowser-tabpanels {
@ -95,11 +95,11 @@
border-width: 0;
margin: 0;
padding: 0 2px;
-moz-box-align: stretch;
align-items: stretch;
/* Needed so that overflowing content overflows towards the end rather than
getting centered. That prevents tab opening animation from looking off at
the start, see bug 1759221. */
-moz-box-pack: start;
justify-content: flex-start;
overflow: clip;
/* Needed to avoid clipping the tab-background shadow, which has a 4px blur
* (we only have 2px padding in the inline direction) */

8
browser/themes/shared/toolbarbuttons.css
View file

@ -70,7 +70,7 @@ toolbar .toolbarbutton-1 {
appearance: none;
margin: 0;
padding: 0 var(--toolbarbutton-outer-padding);
-moz-box-pack: center;
justify-content: center;
}
#TabsToolbar .toolbarbutton-1 {
@ -144,7 +144,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
toolbar .toolbaritem-combined-buttons:not(:hover) > separator {
content: "";
display: -moz-box;
display: flex;
width: 1px;
height: 16px;
margin-inline-end: -1px;
@ -227,7 +227,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
* how e.g. combined items work, and maybe we should just remove this.
*/
#PersonalToolbar .toolbarbutton-1 {
-moz-box-align: stretch;
align-items: stretch;
}
#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon {
height: auto;
@ -264,7 +264,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
/* Force the display of the label for bookmarks */
.bookmark-item > .toolbarbutton-text {
display: -moz-box !important;
display: flex !important;
}
#personal-bookmarks,

18
browser/themes/shared/urlbar-searchbar.css
View file

@ -75,7 +75,7 @@
#urlbar-input,
#urlbar-scheme,
.searchbar-textbox {
-moz-box-flex: 1;
flex: 1;
background-color: transparent;
color: inherit;
border: none;
@ -264,12 +264,12 @@
}
#urlbar-container {
-moz-box-align: center;
align-items: center;
}
#urlbar-container,
#wrapper-urlbar-container {
-moz-box-flex: 400;
flex: 400 400;
}
#urlbar-search-splitter {
@ -513,7 +513,7 @@
transition-property: background-color, mask-position-x, width, margin-inline-end;
transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
transition-duration: var(--cfr-animation-duration);
-moz-box-align: center;
align-items: center;
margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 24px) / 2);
}
#cfr-label-container:-moz-locale-dir(rtl) {
@ -626,7 +626,7 @@
}
#urlbar-zoom-button > .toolbarbutton-text {
display: -moz-box;
display: flex;
}
#urlbar-zoom-button > .toolbarbutton-icon {
@ -641,12 +641,12 @@
#search-container,
#wrapper-search-container {
-moz-box-flex: 175;
flex: 175 175;
}
#search-container[width] {
/* Take something closer to the explicit width when requested */
-moz-box-flex: 1;
flex: 1;
}
#search-container[cui-areatype="panel"] > #searchbar:-moz-lwtheme {
@ -663,7 +663,7 @@
}
.searchbar-search-button {
-moz-box-align: center;
align-items: center;
fill: currentColor;
}
@ -720,7 +720,7 @@ moz-input-box > menupopup .context-menu-add-engine:not([image]) {
moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
content: "";
position: relative;
display: -moz-box;
display: flex;
background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
height: 11px;
width: 11px;

6
browser/themes/shared/webRTC-legacy-indicator.css
View file

@ -44,7 +44,7 @@ window {
}
window[sharingscreen] > #screenShareButton {
display: -moz-box;
display: flex;
}
#audioVideoButton {
@ -60,7 +60,7 @@ window[sharingscreen] > #audioVideoButton {
/* Single icon button: */
window[sharingvideo] > #audioVideoButton,
window[sharingaudio] > #audioVideoButton {
display: -moz-box;
display: flex;
background-position: center center;
background-size: 16px;
min-width: 26px;
@ -113,7 +113,7 @@ window[sharingaudio][sharingvideo] > #audioVideoButton {
window[sharingscreen][sharingvideo] > #shareSeparator,
window[sharingscreen][sharingaudio] > #shareSeparator {
display: -moz-box;
display: flex;
}
:is(#audioVideoButton, #screenShareButton, #firefoxButton):-moz-focusring {

10
browser/themes/windows/browser.css
View file

@ -26,7 +26,7 @@
}
#menubar-items {
-moz-box-orient: vertical; /* for flex hack */
flex-direction: column; /* for flex hack */
}
#main-menubar > menu {
@ -212,14 +212,14 @@
}
.titlebar-buttonbox-container {
-moz-box-align: stretch;
align-items: stretch;
}
@media (-moz-platform: windows-win7),
(-moz-platform: windows-win8) {
/* Preserve window control buttons position at the top of the button box. */
.titlebar-buttonbox-container {
-moz-box-align: start;
align-items: flex-start;
}
}
@ -524,11 +524,11 @@ menupopup[touchmode] :is(menu, menuitem, menucaption) {
* will stretch to pick up the extra space. In that case, the outer icons
* should align to the start/end of their containing <menuitem>: */
#context-navigation > .menuitem-iconic:first-child {
-moz-box-pack: start;
justify-content: flex-start;
}
#context-navigation > .menuitem-iconic:last-child {
-moz-box-pack: end;
justify-content: flex-end;
}
#context-navigation > .menuitem-iconic:last-child,

2
browser/themes/windows/preferences/applications.css
View file

@ -27,7 +27,7 @@ menuitem[appHandlerIcon="plugin"] {
}
#appList > richlistitem {
-moz-box-align: center;
align-items: center;
}
#appList > richlistitem > image {

4
devtools/client/shared/sourceeditor/test/browser_css_getInfo.js
View file

@ -15,7 +15,7 @@ const source = [
"#devtools-menu.devtools-menulist,",
".devtools-toolbarbutton#devtools-menu {",
" -moz-appearance: none;",
" -moz-box-align: center;",
" align-items: center;",
" min-width: 78px;",
" min-height: 22px;",
" text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);",
@ -28,7 +28,7 @@ const source = [
"}",
"",
".devtools-toolbarbutton > hbox.toolbarbutton-menubutton-button {",
" -moz-box-orient: horizontal;",
" flex-direction: row;",
"}",
"",
".devtools-menulist:active,",

4
devtools/client/shared/sourceeditor/test/css_statemachine_testcases.css
View file

@ -11,7 +11,7 @@
#devtools-menu.devtools-menulist,
.devtools-toolbarbutton#devtools-menu {
-moz-appearance: none;
-moz-box-align: center;
align-items: center;
min-width: 78px;
min-height: 22px;
text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
@ -24,7 +24,7 @@
}
.devtools-toolbarbutton > hbox.toolbarbutton-menubutton-button {
-moz-box-orient: horizontal;
flex-direction: row;
}
.devtools-menulist:active,

1
devtools/client/shared/toolbarbutton.css
View file

@ -14,7 +14,6 @@
border: none;
border-radius: 2px;
color: var(--theme-body-color);
-moz-box-align: center;
text-shadow: none;
padding: 2px;
margin: 1px;

4
devtools/client/styleeditor/StyleEditorUI.sys.mjs
View file

@ -416,7 +416,7 @@ export class StyleEditorUI extends EventEmitter {
const visibleElements = Array.from(
this.#nav.querySelectorAll(`li:not(.${FILTERED_CLASSNAME})`)
);
// Elements have a different visual order (due to the use of MozBoxOrdinalGroup), so
// Elements have a different visual order (due to the use of order), so
// we need to sort them by their data-ordinal attribute
visibleElements.sort(
(a, b) => a.getAttribute("data-ordinal") - b.getAttribute("data-ordinal")
@ -863,7 +863,7 @@ export class StyleEditorUI extends EventEmitter {
let ordinal = editor.styleSheet.styleSheetIndex;
ordinal = ordinal == -1 ? Number.MAX_SAFE_INTEGER : ordinal;
summary.style.MozBoxOrdinalGroup = ordinal;
summary.style.order = ordinal;
summary.setAttribute("data-ordinal", ordinal);
const isSystem = !!editor.styleSheet.system;

2
devtools/client/themes/common.css
View file

@ -311,7 +311,7 @@ checkbox:-moz-focusring {
border-radius: 2px;
color: var(--theme-body-color);
transition: background-color 0.05s ease-in-out;
-moz-box-align: center;
align-items: center;
text-shadow: none;
padding: 2px;
margin: 1px;

22
devtools/client/themes/splitview.css
View file

@ -13,8 +13,8 @@
box,
.splitview-nav {
-moz-box-flex: 1;
-moz-box-orient: vertical;
flex: 1;
flex-direction: column;
min-width: 0;
min-height: 0;
}
@ -25,21 +25,21 @@ box,
margin: 0;
background-color: var(--theme-sidebar-background);
display: -moz-box;
display: flex;
overflow-x: hidden;
overflow-y: auto;
}
.splitview-nav > li {
padding-inline-end: 8px;
-moz-box-align: center;
align-items: center;
outline: 0;
vertical-align: bottom;
border-bottom: 1px solid var(--theme-splitter-color);
}
.placeholder {
-moz-box-flex: 1;
flex: 1;
text-align: center;
}
@ -72,7 +72,7 @@ box,
}
.splitview-nav-container {
-moz-box-pack: center;
justify-content: center;
}
.loading .splitview-nav-container > .placeholder {
@ -81,7 +81,7 @@ box,
.splitview-controller,
.splitview-main {
-moz-box-flex: 0;
flex: none;
}
.splitview-controller {
@ -99,7 +99,7 @@ box,
/* only the active details pane is shown */
.splitview-side-details > .splitview-active {
display: -moz-box;
display: flex;
}
/* filtered items are hidden */
@ -115,12 +115,12 @@ ol.splitview-nav > li.splitview-filtered {
}
.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
display: -moz-box;
display: flex;
}
@media (width >= 700px) {
.splitview-root {
-moz-box-orient: horizontal;
flex-direction: row;
}
.splitview-controller {
max-height: none;
@ -131,7 +131,7 @@ ol.splitview-nav > li.splitview-filtered {
display: none;
}
.splitview-details.splitview-active {
display: -moz-box;
display: flex;
}
}

6
devtools/client/themes/storage.css
View file

@ -91,7 +91,7 @@ a {
/* Text input in storage table */
#storage-table input {
appearance: none;
-moz-box-flex: 1;
flex: 1;
/* make sure the outline is not cut off */
position: relative;
box-sizing: border-box;
@ -123,11 +123,11 @@ a {
properly with XUL. Force XUL flexbox instead.
*/
#storage-toolbar {
display: -moz-box;
display: flex;
}
#storage-searchbox {
-moz-box-flex: 1;
flex: 1;
margin-inline-start: -3px;
margin-inline-end: 1px;
}

36
devtools/client/themes/styleeditor.css
View file

@ -3,7 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#style-editor-chrome {
-moz-box-flex: 1;
flex: 1;
}
.splitview-nav > li,
@ -12,11 +12,11 @@
.stylesheet-rule-count,
li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
display: -moz-box;
display: flex;
}
.devtools-toolbar > spacer {
-moz-box-flex: 1;
flex: 1;
}
.style-editor-newButton {
@ -28,7 +28,7 @@ li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
}
.stylesheet-details-container {
-moz-box-flex: 1;
flex: 1;
min-width: 0;
min-height: 0;
}
@ -63,15 +63,15 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
}
.stylesheet-info > h1 {
-moz-box-flex: 1;
flex: 1;
}
.splitview-nav > li > hgroup.stylesheet-info {
-moz-box-pack: center;
justify-content: center;
}
.stylesheet-more > spacer {
-moz-box-flex: 1;
flex: 1;
}
.stylesheet-title,
@ -103,13 +103,13 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
}
.splitview-nav > li {
-moz-box-orient: horizontal;
flex-direction: row;
}
.splitview-nav > li > hgroup {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
display: flex;
flex-direction: column;
flex: 1;
}
.splitview-nav > li.unsaved > hgroup .stylesheet-name {
@ -159,7 +159,7 @@ li.error > .stylesheet-info > .stylesheet-more > .stylesheet-error-message {
}
.stylesheet-toggle {
display: -moz-box;
display: flex;
cursor: pointer;
padding: 8px 0;
margin: 0 8px;
@ -259,9 +259,9 @@ h3 {
}
.splitview-nav > li > hgroup.stylesheet-info {
-moz-box-align: baseline;
-moz-box-orient: horizontal;
-moz-box-flex: 1;
align-items: baseline;
flex-direction: row;
flex: 1;
}
.stylesheet-sidebar {
@ -269,11 +269,11 @@ h3 {
}
.stylesheet-more {
-moz-box-flex: 1;
-moz-box-pack: end;
flex: 1;
justify-content: flex-end;
}
.stylesheet-more > spacer {
-moz-box-flex: 0;
flex: none;
}
}

2
devtools/client/themes/toolbars.css
View file

@ -119,7 +119,7 @@
text-align: center;
background-color: transparent;
color: inherit;
-moz-box-flex: 1;
flex: 1;
border-width: 0;
border-inline-start-width: 1px;
border-style: solid;

10
devtools/client/themes/toolbox.css
View file

@ -572,8 +572,8 @@
/* Toolbox panels */
.toolbox-panel {
display: -moz-box;
-moz-box-flex: 1;
display: flex;
flex: 1;
visibility: collapse;
}
@ -594,7 +594,7 @@
#toolbox-panel-webconsole {
min-height: 75px;
-moz-box-flex: 1;
flex: 1 auto;
}
#toolbox-panel-webconsole[collapsed],
@ -623,7 +623,7 @@
}
#toolbox-container {
-moz-box-flex: 1;
flex: 1;
/* Let the component gain focus when a click hits an empty area */
-moz-user-focus: normal;
}
@ -634,7 +634,7 @@
height set to a small value without flexing to fill up extra
space. There must be a flex on both to ensure that the console
panel itself is sized properly */
-moz-box-flex: 10000;
flex: 10000 10000;
}
#toolbox-container:focus {

2
devtools/client/themes/tooltips.css
View file

@ -503,7 +503,7 @@ strong {
}
.tooltip-container[type="doorhanger"] .tooltip-panel ul {
/* Override the display: -moz-box declaration in xul.css
/* Override the display: flex declaration in xul.css
* or else menu items won't stack. */
display: block;
}

18
devtools/client/themes/widgets.css
View file

@ -36,7 +36,7 @@
.devtools-responsive-container {
min-width: 0;
min-height: 0;
-moz-box-orient: horizontal;
flex-direction: row;
}
.devtools-main-content {
@ -62,7 +62,7 @@
@media (max-width: 700px) {
.devtools-responsive-container {
-moz-box-orient: vertical;
flex-direction: column;
}
.devtools-responsive-container > .devtools-side-splitter {
@ -237,11 +237,11 @@
/* Aligned values */
.variables-view-container[aligned-values] .title > .separator {
-moz-box-flex: 1;
flex: 1;
}
.variables-view-container[aligned-values] .title > .value {
-moz-box-flex: 0;
flex: none;
width: 70vw;
}
@ -252,29 +252,29 @@
/* Actions first */
.variables-view-open-inspector {
-moz-box-ordinal-group: 1;
order: 1;
}
.variables-view-edit,
.variables-view-add-property {
-moz-box-ordinal-group: 2;
order: 2;
}
.variable-or-property-frozen-label,
.variable-or-property-sealed-label,
.variable-or-property-non-extensible-label,
.variable-or-property-non-writable-icon {
-moz-box-ordinal-group: 3;
order: 3;
}
.variables-view-delete {
-moz-box-ordinal-group: 4;
order: 4;
}
.variables-view-container[actions-first] .variables-view-delete,
.variables-view-container[actions-first] .variables-view-add-property,
.variables-view-container[actions-first] .variables-view-open-inspector {
-moz-box-ordinal-group: 0;
order: 0;
}
.variables-view-container[actions-first] [invisible] {

2
layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml
View file

@ -6,7 +6,7 @@
function run() {
var c = document.getElementById("C");
getComputedStyle(c, "").width; // flush
c.style.MozBoxOrdinalGroup = "2";
c.style.order = "2";
document.documentElement.removeAttribute("class");
}

4
layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml
View file

@ -6,12 +6,12 @@
function run() {
var c = document.getElementById("C");
getComputedStyle(c, "").width; // flush
c.style.MozBoxOrdinalGroup = "2";
c.style.order = "2";
document.documentElement.removeAttribute("class");
}
]]></script>
<label id="B" value="B" style="-moz-box-ordinal-group: 2" />
<label id="B" value="B" style="order: 2" />
<label id="C" value="C" />
<label id="A" value="A" />
</window>

4
layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml
View file

@ -6,12 +6,12 @@
function run() {
var b = document.getElementById("B");
getComputedStyle(b, "").width; // flush
b.style.MozBoxOrdinalGroup = "2";
b.style.order = "2";
document.documentElement.removeAttribute("class");
}
]]></script>
<label id="B" value="B" />
<label id="C" value="C" style="-moz-box-ordinal-group: 2" />
<label id="C" value="C" style="order: 2" />
<label id="A" value="A" />
</window>

4
layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml
View file

@ -6,12 +6,12 @@
function run() {
var b = document.getElementById("B");
getComputedStyle(b, "").width; // flush
b.style.MozBoxOrdinalGroup = "";
b.style.order = "";
document.documentElement.removeAttribute("class");
}
]]></script>
<label id="A" value="A" />
<label id="B" value="B" style="-moz-box-ordinal-group: 2" />
<label id="B" value="B" style="order: 2" />
<label id="C" value="C" />
</window>

6
layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml
View file

@ -6,12 +6,12 @@
function run() {
var b = document.getElementById("B");
getComputedStyle(b, "").width; // flush
b.style.MozBoxOrdinalGroup = "";
b.style.order = "";
document.documentElement.removeAttribute("class");
}
]]></script>
<label id="C" value="C" style="-moz-box-ordinal-group: 2" />
<label id="C" value="C" style="order: 2" />
<label id="A" value="A" />
<label id="B" value="B" style="-moz-box-ordinal-group: 2" />
<label id="B" value="B" style="order: 2" />
</window>

6
layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml
View file

@ -6,12 +6,12 @@
function run() {
var a = document.getElementById("A");
getComputedStyle(a, "").width; // flush
a.style.MozBoxOrdinalGroup = "";
a.style.order = "";
document.documentElement.removeAttribute("class");
}
]]></script>
<label id="C" value="C" style="-moz-box-ordinal-group: 2" />
<label id="A" value="A" style="-moz-box-ordinal-group: 2" />
<label id="C" value="C" style="order: 2" />
<label id="A" value="A" style="order: 2" />
<label id="B" value="B" />
</window>

23
layout/reftests/box/flex-emulation-3-notref.xhtml
View file

@ -1,23 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head>
<style>
:root {
/* Handling of hypothetical positions differ between moz-box and flex
emulation */
-moz-box-layout: flex;
}
</style>
</head>
<body>
<xul:vbox>
<xul:description>X</xul:description>
<xul:description style="position: absolute">Y</xul:description>
<xul:description>Z</xul:description>
</xul:vbox>
</body>
</html>

19
layout/reftests/box/flex-emulation-3.xhtml
View file

@ -1,19 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<head>
<style>
:root { -moz-box-layout: legacy; }
</style>
</head>
<body>
<xul:vbox>
<xul:description>X</xul:description>
<xul:description style="position: absolute">Y</xul:description>
<xul:description>Z</xul:description>
</xul:vbox>
</body>
</html>

1
layout/reftests/box/reftest.list
View file

@ -1,7 +1,6 @@
== chrome://reftest/content/box/box-as-grid-or-flex-item-1.html chrome://reftest/content/box/box-as-grid-or-flex-item-1-ref.html
== chrome://reftest/content/box/flex-emulation-1.xhtml chrome://reftest/content/box/flex-emulation-1-ref.xhtml
== chrome://reftest/content/box/flex-emulation-2.xhtml chrome://reftest/content/box/flex-emulation-2-ref.xhtml
!= chrome://reftest/content/box/flex-emulation-3.xhtml chrome://reftest/content/box/flex-emulation-3-notref.xhtml
== chrome://reftest/content/box/flex-emulation-4.xhtml chrome://reftest/content/box/flex-emulation-4-ref.xhtml
== chrome://reftest/content/box/flex-emulation-5.xhtml chrome://reftest/content/box/flex-emulation-5-ref.xhtml
== chrome://reftest/content/box/flex-emulation-5.xhtml chrome://reftest/content/box/flex-emulation-5-ref2.xhtml

4
layout/style/crashtests/416461-1.xhtml
View file

@ -2,5 +2,5 @@
<wizard>
<msqrt xmlns="http://www.w3.org/1998/Math/MathML"/>
</wizard>
<menupopup style="display: inline; -moz-box-ordinal-group: 2147483646;"/>
</window>
<menupopup style="display: inline; order: 2147483646;"/>
</window>

1
layout/style/res/ua.css
View file

@ -193,7 +193,6 @@
mask: inherit;
opacity: inherit;
text-decoration: inherit;
-moz-box-ordinal-group: inherit;
overflow-clip-box: inherit;
unicode-bidi: inherit;
user-select: inherit;

2
layout/xul/nsSplitterFrame.cpp
View file

@ -570,7 +570,7 @@ nsresult nsSplitterFrameInner::MouseDown(Event* aMouseEvent) {
mParentBox, FrameChildListID::Principal,
CSSOrderAwareFrameIterator::ChildFilter::IncludeAll,
CSSOrderAwareFrameIterator::OrderState::Unknown,
CSSOrderAwareFrameIterator::OrderingProperty::BoxOrdinalGroup);
CSSOrderAwareFrameIterator::OrderingProperty::Order);
for (; !iter.AtEnd(); iter.Next()) {
nsIFrame* childBox = iter.get();
if (childBox == mOuter) {

4
layout/xul/nsSprocketLayout.cpp
View file

@ -32,9 +32,7 @@ static Maybe<CSSOrderAwareFrameIterator> IterFor(nsIFrame* aBoxFrame) {
Maybe<CSSOrderAwareFrameIterator> ret;
if (aBoxFrame->IsXULBoxFrame()) {
ret.emplace(aBoxFrame, FrameChildListID::Principal,
CSSOrderAwareFrameIterator::ChildFilter::IncludeAll,
CSSOrderAwareFrameIterator::OrderState::Unknown,
CSSOrderAwareFrameIterator::OrderingProperty::BoxOrdinalGroup);
CSSOrderAwareFrameIterator::ChildFilter::IncludeAll);
}
return ret;
}

4
layout/xul/tree/nsTreeColumns.cpp
View file

@ -440,9 +440,7 @@ void nsTreeColumns::EnsureColumns() {
// Enumerate the columns in visible order
CSSOrderAwareFrameIterator iter(
colFrame, FrameChildListID::Principal,
CSSOrderAwareFrameIterator::ChildFilter::IncludeAll,
CSSOrderAwareFrameIterator::OrderState::Unknown,
CSSOrderAwareFrameIterator::OrderingProperty::BoxOrdinalGroup);
CSSOrderAwareFrameIterator::ChildFilter::IncludeAll);
for (; !iter.AtEnd(); iter.Next()) {
nsIFrame* colFrame = iter.get();
nsIContent* colContent = colFrame->GetContent();

4
toolkit/components/alerts/alert.css
View file

@ -19,8 +19,8 @@
}
#alertTitleBox {
-moz-box-pack: center;
-moz-box-align: center;
justify-content: center;
align-items: center;
}
.alertText {

10
toolkit/components/normandy/skin/shared/Heartbeat.css
View file

@ -72,24 +72,24 @@
/* Heartbeat UI Rating Star Classes */
#star-rating-container {
display: -moz-box;
display: flex;
margin-bottom: 4px;
}
#star-rating-container > #star5 {
-moz-box-ordinal-group: 5;
order: 5;
}
#star-rating-container > #star4 {
-moz-box-ordinal-group: 4;
order: 4;
}
#star-rating-container > #star3 {
-moz-box-ordinal-group: 3;
order: 3;
}
#star-rating-container > #star2 {
-moz-box-ordinal-group: 2;
order: 2;
}
#star-rating-container > .star-x {

4
toolkit/components/prompts/content/tabprompts.css
View file

@ -5,8 +5,8 @@
/* Tab Modal Prompt boxes */
.tabModalBackground {
-moz-box-pack: center;
-moz-box-orient: vertical;
justify-content: center;
flex-direction: column;
}
.tabModalBackground,

2
toolkit/content/autocomplete.css
View file

@ -13,7 +13,7 @@
}
.autocomplete-richlistbox > richlistitem {
-moz-box-orient: horizontal;
flex-direction: row;
overflow: hidden;
}

2
toolkit/content/tests/chrome/test_bug562554.xhtml
View file

@ -9,7 +9,7 @@
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<toolbarbutton type="menu" id="toolbarmenu" style="height: 200px; -moz-box-pack: start; -moz-box-align: start">
<toolbarbutton type="menu" id="toolbarmenu" style="height: 200px; justify-content: flex-start; align-items: flex-start">
<menupopup id="menupopup" onpopupshowing="eventReceived('popupshowing'); return false;"/>
<stack style="pointer-events: none">
<button style="pointer-events: auto; width: 100px; height: 30px; margin-left: 0; margin-top: 0;" allowevents="true"

Some files were not shown because too many files have changed in this diff Show more