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

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

browser/base/content/aboutDialog.css

@@ -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 {

browser/base/content/browser-sidebar.js

@@ -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;
+      let boxOrdinal = this._box.style.order;
-      this._box.style.MozBoxOrdinalGroup = appcontent.style.MozBoxOrdinalGroup;
+      this._box.style.order = appcontent.style.order;
-      appcontent.style.MozBoxOrdinalGroup = boxOrdinal;
+      appcontent.style.order = boxOrdinal;
       // Indicate we've switched ordering to the box
       this._box.setAttribute("positionend", true);
     } else {

browser/base/content/browser-siteProtections.js

@@ -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
+    // an html element here, so we can use CSS flex, which handles the label
-    // handles the label overflow in combination with the icon correctly.
+    // overflow in combination with the icon correctly.
     let listItem = document.createElementNS(
       "http://www.w3.org/1999/xhtml",
       "div"

browser/base/content/browser.css

@@ -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;
+  display: flex;
-  -moz-box-orient: vertical;
+  flex-direction: column;
-  -moz-box-flex: 1;
+  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;
 }

browser/base/content/navigator-toolbox.inc.xhtml

@@ -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>
 

browser/base/content/pageinfo/pageInfo.css

@@ -21,8 +21,8 @@
 }
 
 #viewGroup > radio > .radio-label-box {
-  -moz-box-orient: vertical;
+  flex-direction: column;
-  -moz-box-align: center;
+  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 */
 }

browser/base/content/pageinfo/pageInfo.xhtml

@@ -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>

browser/base/content/test/forms/browser_selectpopup.js

@@ -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;

browser/base/content/test/sidebar/browser_sidebar_move.js

@@ -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];
   });
 }
 

browser/components/contextualidentity/content/usercontext.css

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

browser/components/places/content/editBookmarkPanel.inc.xhtml

@@ -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>
 

browser/components/places/content/places.xhtml

@@ -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
+              persisting the CSS order attribute, which is the appropriate
-              appropriate replacement for the ordinal attribute but cannot yet
+              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

browser/components/places/tests/chrome/test_0_bug510634.xhtml

@@ -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>

browser/components/places/tests/chrome/test_bug1163447_selectItems_through_shortcut.xhtml

@@ -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>

browser/components/places/tests/chrome/test_bug549192.xhtml

@@ -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>

browser/components/places/tests/chrome/test_bug549491.xhtml

@@ -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>

browser/components/places/tests/chrome/test_selectItems_on_nested_tree.xhtml

@@ -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>

browser/components/places/tests/chrome/test_treeview_date.xhtml

@@ -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"/>

browser/components/preferences/dialogs/addEngine.css

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

browser/components/preferences/dialogs/blocklists.xhtml

@@ -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/>

browser/components/preferences/dialogs/connection.xhtml

@@ -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>

browser/components/preferences/dialogs/handlers.css

@@ -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;
 }
 

browser/components/preferences/dialogs/permissions.js

@@ -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);
     }

browser/components/preferences/dialogs/permissions.xhtml

@@ -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>

browser/components/preferences/dialogs/siteDataSettings.js

@@ -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) {

browser/components/preferences/dialogs/siteDataSettings.xhtml

@@ -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="flex: 4 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: 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="flex: 2 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-last-used" id="lastAccessedCol" />
     </listheader>
     <richlistbox seltype="multiple" id="sitesList" orient="vertical" flex="1"/>
   </vbox>

browser/components/preferences/dialogs/sitePermissions.css

@@ -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 {

browser/components/preferences/dialogs/sitePermissions.js

@@ -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) {

browser/components/preferences/dialogs/sitePermissions.xhtml

@@ -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>

browser/components/preferences/experimental.inc.xhtml

@@ -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"

browser/components/preferences/home.inc.xhtml

@@ -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" />

browser/extensions/formautofill/skin/windows/editDialog.css

@@ -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 {

browser/themes/linux/browser.css

@@ -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;
     }
   }
 }

browser/themes/linux/places/organizer.css

@@ -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");

browser/themes/linux/preferences/applications.css

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

browser/themes/osx/browser.css

@@ -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;

browser/themes/osx/pageInfo.css

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

browser/themes/osx/preferences/applications.css

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

browser/themes/shared/UITour.css

@@ -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;

browser/themes/shared/addons/unified-extensions.css

@@ -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;

browser/themes/shared/browser-shared.css

@@ -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;
 }
 

browser/themes/shared/contextmenu.css

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

browser/themes/shared/controlcenter/panel.css

@@ -332,8 +332,8 @@
 }
 
 #protections-popup-trackersView-list.empty {
-  -moz-box-align: center;
+  align-items: center;
-  -moz-box-pack: 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?'

browser/themes/shared/ctrlTab.css

@@ -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;
+  flex: 1;
-  -moz-box-pack: center;
+  justify-content: center;
   contain: inline-size;
 }

browser/themes/shared/customizableui/customizeMode.css

@@ -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 {

browser/themes/shared/customizableui/panelUI-shared.css

@@ -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;
+  align-items: center;
-  -moz-box-orient: horizontal;
+  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;
+  align-items: center;
-  -moz-box-orient: horizontal;
+  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;

browser/themes/shared/downloads/allDownloadsView.inc.css

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

browser/themes/shared/downloads/download-blockedStates.css

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

browser/themes/shared/downloads/progressmeter.css

@@ -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

browser/themes/shared/identity-block/identity-block.css

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

browser/themes/shared/notification-icons.css

@@ -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;
 }
 

browser/themes/shared/places/editBookmark.css

@@ -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;

browser/themes/shared/places/organizer-shared.css

@@ -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,

browser/themes/shared/places/sidebar.css

@@ -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;

browser/themes/shared/preferences/containers-dialog.css

@@ -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;
 }
 

browser/themes/shared/preferences/containers.css

@@ -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;

browser/themes/shared/preferences/dialog.css

@@ -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;
 }

browser/themes/shared/preferences/preferences.css

@@ -30,8 +30,8 @@
 
 #preferences-body {
   vertical-align: top; /* See bug 1606130 */
-  display: -moz-box;
+  display: flex;
-  -moz-box-orient: vertical;
+  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 {

browser/themes/shared/preferences/privacy.css

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

browser/themes/shared/preferences/search.css

@@ -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 {

browser/themes/shared/preferences/siteDataSettings.css

@@ -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;
 }
 

browser/themes/shared/searchbar.css

@@ -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;

browser/themes/shared/sidebar.css

@@ -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 {

browser/themes/shared/tabs.css

@@ -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) */

browser/themes/shared/toolbarbuttons.css

@@ -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,

browser/themes/shared/urlbar-searchbar.css

@@ -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;

browser/themes/shared/webRTC-legacy-indicator.css

@@ -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 {

browser/themes/windows/browser.css

@@ -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,

browser/themes/windows/preferences/applications.css

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

devtools/client/shared/sourceeditor/test/browser_css_getInfo.js

@@ -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,",

devtools/client/shared/sourceeditor/test/css_statemachine_testcases.css

@@ -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,

devtools/client/shared/toolbarbutton.css

@@ -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;

devtools/client/styleeditor/StyleEditorUI.sys.mjs

@@ -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;

devtools/client/themes/common.css

@@ -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;

devtools/client/themes/splitview.css

@@ -13,8 +13,8 @@
 
 box,
 .splitview-nav {
-  -moz-box-flex: 1;
+  flex: 1;
-  -moz-box-orient: vertical;
+  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;
   }
 }
 

devtools/client/themes/storage.css

@@ -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;
 }

devtools/client/themes/styleeditor.css

@@ -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;
+  display: flex;
-  -moz-box-orient: vertical;
+  flex-direction: column;
-  -moz-box-flex: 1;
+  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;
+    align-items: baseline;
-    -moz-box-orient: horizontal;
+    flex-direction: row;
-    -moz-box-flex: 1;
+    flex: 1;
   }
 
   .stylesheet-sidebar {
@@ -269,11 +269,11 @@ h3 {
   }
 
   .stylesheet-more {
-    -moz-box-flex: 1;
+    flex: 1;
-    -moz-box-pack: end;
+    justify-content: flex-end;
   }
 
   .stylesheet-more > spacer {
-    -moz-box-flex: 0;
+    flex: none;
   }
 }

devtools/client/themes/toolbars.css

@@ -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;

devtools/client/themes/toolbox.css

@@ -572,8 +572,8 @@
 /* Toolbox panels */
 
 .toolbox-panel {
-  display: -moz-box;
+  display: flex;
-  -moz-box-flex: 1;
+  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 {

devtools/client/themes/tooltips.css

@@ -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;
 }

devtools/client/themes/widgets.css

@@ -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] {

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

@@ -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");
   }
 

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -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="C" value="C" style="order: 2" />
-  <label id="A" value="A" style="-moz-box-ordinal-group: 2" />
+  <label id="A" value="A" style="order: 2" />
   <label id="B" value="B" />
 </window>

layout/reftests/box/flex-emulation-3-notref.xhtml

@@ -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>

layout/reftests/box/flex-emulation-3.xhtml

@@ -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>

layout/reftests/box/reftest.list

@@ -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

layout/style/crashtests/416461-1.xhtml

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

layout/style/res/ua.css

@@ -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;

layout/xul/nsSplitterFrame.cpp

@@ -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) {

layout/xul/nsSprocketLayout.cpp

@@ -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::ChildFilter::IncludeAll);
-                CSSOrderAwareFrameIterator::OrderState::Unknown,
-                CSSOrderAwareFrameIterator::OrderingProperty::BoxOrdinalGroup);
   }
   return ret;
 }

layout/xul/tree/nsTreeColumns.cpp

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

toolkit/components/alerts/alert.css

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

toolkit/components/normandy/skin/shared/Heartbeat.css

@@ -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 {

toolkit/components/prompts/content/tabprompts.css

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

toolkit/content/autocomplete.css

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

toolkit/content/tests/chrome/test_bug562554.xhtml

@@ -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"