Add support for modern flexbox layout

Flexbox model will replace old xul box as the default display model so
this patch adds support for that in a whole bunch of styles.

A lot of style rules are marked as "Fx < 112 compatibility" rules and
those can be removed when 112 hits release.

chrome/autohide_sidebar.css

@@ -34,14 +34,10 @@ See the above repository for updates as well as full license text. */
 #sidebar-header::before,
 #sidebar-header::after{
   content: "";
-  display: -moz-box;
+  display: flex;
   padding-left: 8px;
 }
 
-#sidebar-switcher-target{
-  -moz-box-pack: start !important;
-}
-
 #sidebar-header,
 #sidebar{
   transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;

chrome/centered_tab_label.css

@@ -3,12 +3,14 @@ See the above repository for updates as well as full license text. */
 
 .tab-label-container{
   display: grid;
-  justify-content: safe center;
+  justify-content: safe center; /* Fx <112 compatibility */
-  align-items: safe center;
+  align-items: safe center; /* Fx <112 compatibility */
+  align-content: center;
 }
 
 .tab-secondary-label{
-  -moz-box-pack: center;
+  -moz-box-pack: center; /* Fx <112 compatibility */
+  justify-content: center;
 }
 
 .tab-label,

chrome/classic_firefox_menu_button.css

@@ -13,9 +13,19 @@ See the above repository for updates as well as full license text. */
   --uc-fx-button-sec-color: #ffdfbf85;
 }
 
-#PanelUI-button{ -moz-box-ordinal-group: 0; margin-inline: 2px var(--uc-window-drag-space-pre,24px) !important; }
+#PanelUI-button{
-:root[tabsintitlebar] #nav-bar{ border-left-width: 0px; padding-left: 0px !important; }
+  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
-#PanelUI-menu-button{ -moz-box-align: start !important; }
+  order: -1;
+  margin-inline: 2px var(--uc-window-drag-space-pre,24px) !important;
+}
+:root[tabsintitlebar] #nav-bar{
+  border-left-width: 0px;
+  padding-left: 0px !important;
+}
+#PanelUI-menu-button{
+  -moz-box-align: start !important; /* Fx <112 compatibility */
+  align-items: start;
+}
 #PanelUI-menu-button > stack{
   background-color: var(--uc-fx-button-color);
   background-image: linear-gradient(var(--uc-fx-button-sec-color), transparent) !important;
@@ -24,7 +34,7 @@ See the above repository for updates as well as full license text. */
   border: 1px groove black;
   outline: 1px solid #cdd8e4;
   border-top: none;
-  display: -moz-box;
+  display: flex;
   padding: 4px 10px !important;
 }
 
@@ -35,7 +45,7 @@ See the above repository for updates as well as full license text. */
 }
 
 #PanelUI-menu-button > stack::before{
-  display: -moz-box;
+  display: flex;
   content: "Firefox"; /* Change text here */
   color: white;
   text-shadow: 0 0 2px black;

chrome/classic_grid_main_menu_popup.css

@@ -29,8 +29,13 @@ See the above repository for updates as well as full license text. */
   height: 76px;
   flex-grow:1;
 }
-#appMenu-protonMainView > .panel-subview-body > toolbarbutton > .toolbarbutton-icon{ -moz-box-flex: 1 }
+#appMenu-protonMainView > .panel-subview-body > toolbarbutton > .toolbarbutton-icon{
-#appMenu-protonMainView > .panel-subview-body > toolbarbutton{ -moz-box-orient: vertical }
+  -moz-box-flex: 1;
+}
+#appMenu-protonMainView > .panel-subview-body > toolbarbutton{
+  flex-direction: column;
+  -moz-box-orient: vertical; /* Fx <112 compatibility */
+}
 
 :where(#appMenu-protonMainView) > .panel-subview-body > toolbarbutton.subviewbutton{
   padding-inline: 4px !important;
@@ -38,20 +43,28 @@ See the above repository for updates as well as full license text. */
   fill: currentColor;
 }
 
+#appMenu-protonMainView > .panel-subview-body > .subviewbutton > .toolbarbutton-text{
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 70px;
+}
+
 /* Unique styling for Edit and Zoom controls */
 
-#appMenu-zoom-controls2,
+#appMenu-zoom-controls,
-#appMenu-zoom-controls2 + toolbarseparator{
+#appMenu-zoom-controls + toolbarseparator{
   order: -1;
   height: initial !important;
   margin: initial !important;
   flex-grow: 1;
 }
-#appMenu-zoom-controls2 + toolbarseparator{ margin-block: 0 4px !important; }
+#appMenu-zoom-controls + toolbarseparator{ margin-block: 0 4px !important; }
-#appMenu-zoom-controls2{ padding-block: 2px !important; }
+#appMenu-zoom-controls{ padding-block: 2px !important; }
-#appMenu-zoom-controls2 > :not(:last-child){
+#appMenu-zoom-controls > :not(:last-child){
-  -moz-box-flex: 1 !important;
+  -moz-box-flex: 1 !important; /* Fx <112 compatibility */
-  -moz-box-pack: center !important;
+  -moz-box-pack: center !important; /* Fx <112 compatibility */
+  flex-grow: 1 !important;
+  justify-content: center !important;
   border-radius: 0 !important;
 }
 #appMenu-zoomReset-button2{
@@ -102,9 +115,9 @@ See the above repository for updates as well as full license text. */
 #appMenu-proton-update-banner,
 #appMenu-quit-button2.subviewbutton{ order: 4 }
 
-
+#appMenu-more-button2 > .toolbarbutton-icon{
-#appMenu-more-button2{ min-width: 170px }
+  -moz-box-flex: 0 !important;
-#appMenu-more-button2 > .toolbarbutton-icon{ -moz-box-flex: 0 !important; }
+}
 /* Color styling for items */
 
 #appMenu-protonMainView > .panel-subview-body toolbarbutton:not([disabled]):hover{
@@ -118,9 +131,9 @@ See the above repository for updates as well as full license text. */
 #appMenu-fxa-text,
 #appMenu-help-button2 + toolbarseparator,
 #appMenu-new-private-window-button2 + toolbarseparator,
-#appMenu-zoom-controls2 > #appMenu-fullscreen-button > label,
+#appMenu-zoom-controls > #appMenu-fullscreen-button > label,
-#appMenu-zoom-controls2 > label,
+#appMenu-zoom-controls > label,
-#appMenu-zoom-controls2 > spacer,
+#appMenu-zoom-controls > spacer,
 #appMenu-edit-controls2 > label,
 #appMenu-edit-controls2 > spacer,
 #appMenu-protonMainView > .panel-subview-body > toolbarbutton::after{ display: none !important; }
@@ -135,6 +148,7 @@ See the above repository for updates as well as full license text. */
 #appMenu-fxa-status2{
   display: grid !important;
   padding-block: 0 !important;
+  justify-content: stretch !important;
 }
 #appMenu-fxa-status2 > *{ grid-area: 1/1 }
 #appMenu-fxa-status2 > toolbarbutton::before,
@@ -144,7 +158,7 @@ See the above repository for updates as well as full license text. */
 }
 
 #appMenu-fxa-status2 > toolbarbutton::before{
-  display: -moz-box;
+  display: flex;
   content: "";
   width: 16px;
   height: 16px;
@@ -165,11 +179,19 @@ See the above repository for updates as well as full license text. */
 #appMenu-quit-button2{
   background-color: var(--button-bgcolor) !important;
   border-radius: 0 !important;
-  -moz-box-orient: horizontal !important;
+  -moz-box-orient: horizontal !important; /* Fx <112 compatibility */
-  -moz-box-pack: center !important;
+  -moz-box-pack: center !important; /* Fx <112 compatibility */
+  flex-direction: row !important;
+  justify-content: center !important;
   padding-block: 12px !important;
   opacity: 0.8;
 }
+
+#appMenu-more-button2{
+  min-width: 170px;
+  justify-content: start !important;
+}
+
 #appMenu-proton-update-banner:hover,
 #appMenu-fxa-label2:hover,
 #appMenu-more-button2:hover,

chrome/combined_favicon_and_tab_close_button.css

@@ -14,7 +14,8 @@ See the above repository for updates as well as full license text. */
   visibility: hidden;
 }
 .tab-close-button{
-  -moz-box-ordinal-group: 0;
+  -moz-box-ordinal-group: 0; /* Firefox <112 compatibility */
+  order: -1;
   display: -moz-box !important;
   position: relative;
   margin-inline: -4px -20px !important;

chrome/combined_tabs_and_main_toolbars.css

@@ -25,7 +25,7 @@ See the above repository for updates as well as full license text. */
   @media (-moz-platform: windows-win10),(-moz-os-version: windows-win10){
     :root[tabsintitlebar="true"] #nav-bar{ padding-left: calc(var(--uc-hide-window-control-space,1) * 134px + 20px) !important; }
   }
-  #toolbar-menubar[autohide="true"] + #TabsToolbar .titlebar-buttonbox{ -moz-box-direction: reverse }
+  #toolbar-menubar[autohide="true"] + #TabsToolbar .titlebar-buttonbox{ -moz-box-direction: reverse; flex-direction: row-reverse }
 }
 
 #navigator-toolbox{ --tab-min-height: 40px }

chrome/curved_tabs.css

@@ -153,7 +153,7 @@ See the above repository for updates as well as full license text. */
 
 /* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */
 @supports -moz-bool-pref("userchrome.curved_tabs.flipped-curve.enabled"){
-  .tab-background{ -moz-box-direction: reverse }
+  .tab-background{ -moz-box-direction: reverse; flex-direction: column-reverse }
   .tabbrowser-tab:hover > .tab-stack > .tab-background,
   .tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) !important }
   .tabbrowser-tab > .tab-stack::before{ transform: scaleY(-1) !important; }

chrome/fake_statusbar_w_bookmarksbar.css

@@ -21,7 +21,7 @@ See the above repository for updates as well as full license text. */
 
 :root:not([inFullscreen]) > body::after{
   content: "";
-  display: -moz-box;
+  display: flex;
   margin-bottom: calc(1px + var(--uc-browser-base-padding)) !important;
 }
 
@@ -44,7 +44,10 @@ See the above repository for updates as well as full license text. */
 }
 
 #personal-toolbar-empty{ visibility: hidden; }
-#PersonalToolbar .toolbarbutton-1{ -moz-box-align: center !important; }
+#PersonalToolbar .toolbarbutton-1{
+  -moz-box-align: center !important; /* Fx <112 compatibility */
+  align-items: center !important;
+}
 
 #PersonalToolbar > toolbarspring{
   flex-grow: 1;
@@ -84,7 +87,7 @@ See the above repository for updates as well as full license text. */
 .browserStack > #statuspanel[inactive]::before,
 #statuspanel[inactive] > #statuspanel-inner::before{
   content: "Done";
-  display: -moz-box;
+  display: flex;
   margin-top: 2px;
   color: var(--toolbar-field-color, black) !important;
 }

chrome/floating_findbar_on_top.css

@@ -9,7 +9,8 @@ See the above repository for updates as well as full license text. */
  */
 
 findbar{
-  -moz-box-ordinal-group: 0;
+  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
+  order: -1;
   margin-bottom: -33px;
   position: relative;
   border-top: none !important;
@@ -43,10 +44,11 @@ findbar > .findbar-container{
 }
 
 .findbar-find-status{
-  display: -moz-box;
+  display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
-  -moz-box-flex: 1;
+  -moz-box-flex: 1; /* Fx <112 compatibility */
+  flex-grow: 1;
 }
  
 .findbar-closebutton{
@@ -54,7 +56,8 @@ findbar > .findbar-container{
   border-radius: 0 !important;
   padding: 5px !important;
   width: initial !important;
-  -moz-box-ordinal-group: 0;
+  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
+  order: -1;
 }
 .findbar-closebutton > image{ padding: 3px }
 .findbar-closebutton:hover > image{
@@ -65,16 +68,19 @@ findbar > .findbar-container > hbox{ margin: 0 5px }
  
 findbar::after{
   content:"";
-  display: -moz-box;
+  display: flex;
-  -moz-box-flex: 100;
+  -moz-box-flex: 100; /* Fx <112 compatibility */
+  flex-grow: 100;
 } 
 
 @supports -moz-bool-pref("userchrome.floating-findbar-on-right.enabled"){
   findbar{
-    -moz-box-direction: reverse;
+    -moz-box-direction: reverse; /* Fx <112 compatibility */
+    flex-direction: row-reverse;
   }
   findbar > .findbar-container{
     -moz-box-direction: reverse;
+    flex-direction: row-reverse;
     border-inline-width: 1px 0px;
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 4px;

chrome/hide_tabs_scrollbuttons.css

@@ -26,11 +26,13 @@ See the above repository for updates as well as full license text. */
   visibility: visible !important;
 }
 spacer[part="overflow-start-indicator"]{
-  -moz-box-ordinal-group: 0;
+  -moz-box-ordinal-group: 0; /* Fx < 112 compatibility */
+  order: -1;
   margin-inline-start: var(--uc-scrollbox-overflow-start-margin,-0.5px) !important;
 }
 spacer[part="overflow-end-indicator"]{
-  -moz-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
+  order: 2;
 }
 
 #scrollbutton-down[disabled="true"] > .toolbarbutton-icon,

chrome/hide_tabs_toolbar.css

@@ -39,8 +39,10 @@ Window controls will be all wrong without it
 }
 
 :root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
-  -moz-box-flex: 1;
+  -moz-box-flex: 1; /* Fx < 112 compatibility */
-  -moz-box-align: stretch;
+  flex-grow: 1;
+  -moz-box-align: stretch; /* Fx < 112 compatibility */
+  align-items: stretch;
   background-color: var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor);
   background-clip: padding-box;
   border-right: 30px solid transparent;

chrome/hide_tabs_with_one_tab.css

@@ -42,7 +42,8 @@ This will NOT work correctly if you have hidden tabs such as with tab groups ext
 }
 @media (-moz-platform: linux){
   #TabsToolbar .titlebar-buttonbox{
-    -moz-box-align: stretch !important;
+    -moz-box-align: stretch !important; /* Fx < 112 compatibility */
+    align-items: stretch !important;
   }
   #TabsToolbar > .titlebar-buttonbox-container > .titlebar-buttonbox > .titlebar-button{
     transform: scale(0.8);

chrome/hide_tabs_with_one_tab_w_window_controls.css

@@ -31,7 +31,8 @@ Window controls will be all wrong without it
 
 #TabsToolbar > .titlebar-spacer[type="post-tabs"]{
   width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) !important;
-  -moz-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
+  order: 2;
 }
 #toolbar-menubar > spacer{ pointer-events: none }
 

chrome/icon_only_tabs.css

@@ -5,10 +5,13 @@ See the above repository for updates as well as full license text. */
   display: none
 }
 .tab-icon-image:not([src]){
-  display: -moz-box !important;
+  display: block !important;
 }
 .tab-icon-stack > *{ margin-inline: 0 !important; }
-.tabbrowser-tab{ -moz-box-flex: 0 !important; }
+.tabbrowser-tab{
+  -moz-box-flex: 0 !important; /* Fx <112 compatibility */
+  flex-grow: 0 !important;
+}
 
 .tabbrowser-tab[fadein]{ min-width: calc(16px + 2 * 10px + 4px) !important; }
 :root[uidensity="compact"] .tabbrowser-tab[fadein]{

chrome/iconized_main_menu.css

@@ -25,7 +25,7 @@ See the above repository for updates as well as full license text. */
 #appMenu-quit-button2{ list-style-image: url("chrome://devtools/skin/images/search-clear.svg") }
 /* Use account-button icon for signed in sync item */
 #appMenu-fxa-status2[fxastatus] > toolbarbutton::before{
-  display: -moz-box;
+  display: flex;
   content: "";
   width: 16px;
   height: 16px;
@@ -34,11 +34,12 @@ See the above repository for updates as well as full license text. */
 /* Add somewhat hacky separator to zoom controls so it looks consistent */
 #appMenu-protonMainView > .panel-subview-body::after{
   content: "";
-  display: -moz-box;
+  display: flex;
   border-bottom: 1px solid var(--panel-separator-color);
   margin: var(--panel-separator-margin);
 }
 
 #appMenu-find-button2 ~ *{
-  -moz-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
+  order: 2;
 }

chrome/inline_tab_audio_icons.css

@@ -20,7 +20,7 @@ See the above repository for updates as well as full license text. */
 .tab-secondary-label{ display: none }
 
 /* show the secondary label when video is in PiP */
-.tab-secondary-label[pictureinpicture]{ display: -moz-box }
+.tab-secondary-label[pictureinpicture]{ display: flex }
 
 /* These exist for compatibility with combined_favicon_and_tab_close_button.css */
 .tab-icon-overlay{ pointer-events: auto }

chrome/linux_gtk_window_control_patch.css

@@ -4,13 +4,17 @@ See the above repository for updates as well as full license text. */
 /* Overrides the appearance of the window controls with something that more closely matches "normal" buttons*/
 /* More importantly, this makes window controls to respect layout rules the other styles rely on */
 
-.titlebar-buttonbox{ -moz-box-align: stretch !important; }
+.titlebar-buttonbox{
+  -moz-box-align: stretch !important; /* Fx <112 compatibility */
+  align-items: stretch !important;
+}
 .titlebar-button {
   -moz-appearance: none !important;
   -moz-context-properties: fill, stroke, fill-opacity;
   fill: currentColor;
   padding: 4px 6px !important;
   -moz-box-flex: 1;
+  flex-grow: 1;
   overflow: -moz-hidden-unscrollable;
 }
 .titlebar-button:hover{ background-color: rgba(0,0,0,0.1) }

chrome/menubar_in_main_toolbar.css

@@ -6,7 +6,11 @@ See the above repository for updates as well as full license text. */
 #navigator-toolbox{ --uc-menubar-height: 34px; }
 :root[uidensity="compact"] #navigator-toolbox{ --uc-menubar-height: 30px }
 
-#titlebar{ -moz-box-direction: reverse; -moz-appearance: none !important; }
+#titlebar{
+  -moz-box-direction: reverse; /* Fx <112 compatibility */
+  flex-direction: column-reverse;
+  -moz-appearance: none !important;
+}
 
 #toolbar-menubar{
   margin-bottom: calc(0px - var(--uc-menubar-height));
@@ -17,13 +21,15 @@ See the above repository for updates as well as full license text. */
 }
 
 #menubar-items{
-  -moz-box-pack: center;
+  -moz-box-pack: center; /* Fx <112 compatibility */
+  justify-content: center;
   pointer-events: initial;
   margin-top: 3px;
+  color: var(--toolbar-color);
 }
 /* Adjust to fit menubar items - 300px works for English locale */
 #nav-bar{ padding-left: 300px; }
 
 #toolbar-menubar > .titlebar-buttonbox-container{ display: none }
 :root[tabsintitlebar][sizemode="normal"] .titlebar-spacer,
-:root[tabsintitlebar] #TabsToolbar > .titlebar-buttonbox-container{ display: -moz-box !important; }
+:root[tabsintitlebar] #TabsToolbar > .titlebar-buttonbox-container{ display: flex !important; }

chrome/menubar_in_tabs_toolbar.css

@@ -1,15 +1,21 @@
 /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/menubar_in_tabs_toolbar.css made available under Mozilla Public License v. 2.0
 See the above repository for updates as well as full license text. */
 
-:root:not([customizing]) #titlebar{ -moz-box-orient: horizontal }
+:root:not([customizing]) #titlebar{
+  -moz-box-orient: horizontal; /* Fx <112 compatibility */
+  flex-direction: row;
+}
 #toolbar-menubar > .titlebar-buttonbox-container,
 #toolbar-menubar > spacer{ display: none; }
 
-#toolbar-menubar{ -moz-box-align: center }
+#main-menubar{
+  -moz-box-flex: 1; /* Fx <112 compatibility */
+  flex-grow: 1 !important;
+}
 :root:not([customizing]) #toolbar-menubar[autohide][inactive]{ max-width: 0 }
 
 #TabsToolbar > .titlebar-buttonbox-container{
-  display: -moz-box !important;
+  display: flex !important;
   visibility: visible !important;
 }
 

chrome/multi-row_tabs.css

@@ -73,7 +73,8 @@ See the above repository for updates as well as full license text. */
 #tabs-newtab-button{ margin-bottom: 0 !important; }
 
 #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
-  display: -moz-box !important;
+  display: flex !important;
+  align-items: center; /* Fx <112 compatibility */
 }
 
 #alltabs-button,

chrome/multi-row_tabs_below_content.css

@@ -42,7 +42,8 @@ See the above repository for updates as well as full license text. */
   :root{ border-top-width: 0px !important }
 
   #navigator-toolbox-background{
-    -moz-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
+    order: 2;
     border-bottom: 0px !important;
   }
   #navigator-toolbox{
@@ -51,7 +52,10 @@ See the above repository for updates as well as full license text. */
   /* Re-order window and tab notification boxes */
   #navigator-toolbox > div{ display: contents }
   .global-notificationbox,
-  #tab-notification-deck{ -moz-box-ordinal-group: 0 }
+  #tab-notification-deck{
+    -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
+    order: -1;
+  }
 
   #titlebar{ -moz-appearance: none !important; } /* Try setting to "-moz-window-titlebar" if you face issues */
 
@@ -125,7 +129,6 @@ See the above repository for updates as well as full license text. */
   #menubar-items + spacer{ flex-grow: 1 }
 
   #toolbar-menubar > #menubar-items{
-    -moz-box-pack: center;
     height: 100%;
     visibility: hidden;
   }

chrome/multi-row_tabs_window_control_patch.css

@@ -8,7 +8,10 @@ See the above repository for updates as well as full license text. */
 /* 20px wide space on left and right to be able to drag the window */
 #TabsToolbar{ margin: 0 20px; }
 
-#titlebar{ -moz-box-direction: reverse; }
+#titlebar{
+  -moz-box-direction: reverse; /* Fx <112 compatibility */
+  flex-direction: column-reverse;
+}
 #toolbar-menubar{
   height: 40px;
   margin-bottom: -40px;
@@ -18,8 +21,10 @@ See the above repository for updates as well as full license text. */
 :root[tabsintitlebar] #nav-bar{ padding-right: 138px; margin-left: 30px; }
 #toolbar-menubar > #menubar-items{
   position: relative;
-  -moz-box-pack: center;
+  -moz-box-pack: center; /* Fx <112 compatibility */
+  justify-content: center !important;
   background-image: linear-gradient( to left,transparent,var(--toolbar-bgcolor) 35px);
+  color: var(--toolbar-color);
 }
 
 #main-menubar:last-child{ padding-inline-end: 40px }

chrome/navbar_tabs_oneliner_menu_buttons_on_right.css

@@ -24,10 +24,10 @@ Window controls will be all wrong without it
 
 /* reserved space for overflow + menu buttons */
 #navigator-toolbox{
-  --uc-buttons-width: calc(56px + 4 * var(--toolbarbutton-outer-padding) + var(--uc-menubutton-padding,6px))
+  --uc-buttons-width: calc(96px + 5 * var(--toolbarbutton-outer-padding) + var(--uc-menubutton-padding,6px))
 }
-#nav-bar:not([overflowing]) > #nav-bar-customization-target{ 
+#nav-bar:not([nonemptyoverflow="true"]) > #nav-bar-customization-target{ 
-  --uc-buttons-width: calc(28px + 2 * var(--toolbarbutton-outer-padding) + 6px)
+  --uc-buttons-width: calc(64px + 4 * var(--toolbarbutton-outer-padding) + 6px)
 }
 /* Override for other densities */
 :root[uidensity="compact"] #navigator-toolbox{
@@ -55,6 +55,7 @@ Window controls will be all wrong without it
 #TabsToolbar{
   margin-left: var(--uc-navigationbar-width);
   --tabs-navbar-shadow-size: 0px;
+  color: var(--toolbar-color);
 }
 
 #tabbrowser-tabs{
@@ -87,7 +88,7 @@ Window controls will be all wrong without it
 }
 
 :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-spacer[type="post-tabs"]{
-  display: -moz-box !important;
+  display: flex !important;
 }
 
 .titlebar-spacer[type="post-tabs"]{

chrome/navbar_tabs_oneliner_tabs_on_left.css

@@ -86,16 +86,20 @@ Window controls will be all wrong without it
        (-moz-gtk-csd-reversed-placement){
   :root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{
     width: var(--uc-window-drag-space-post) !important;
-    display: -moz-box !important; 
+    display: flex !important; 
+  }
+  #TabsToolbar > .titlebar-buttonbox-container{
+    display: flex;
   }
-  #TabsToolbar > .titlebar-buttonbox-container{ display: -moz-box; }
 }
 @supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
   :root:not([inFullscreen]) #TabsToolbar-customization-target > .titlebar-spacer[type="pre-tabs"]{
     width: var(--uc-window-drag-space-post) !important;
-    display: -moz-box !important; 
+    display: flex !important; 
+  }
+  #TabsToolbar > .titlebar-buttonbox-container{
+    display: flex;
   }
-  #TabsToolbar > .titlebar-buttonbox-container{ display: -moz-box; }
 }
 
 /* 1px margin on touch density causes tabs to be too high */

chrome/newtab_button_always_on_hover.css

@@ -6,5 +6,6 @@ See the above repository for updates as well as full license text. */
   display: none;
 }
 #tabbrowser-tabs:hover #tabs-newtab-button{
-  display:-moz-box !important;
+  display: flex !important;
+  align-items: center; /* Fx < 112 compatibility */
 }

chrome/non_floating_sharp_tabs.css

@@ -42,7 +42,8 @@ See the above repository for updates as well as full license text. */
 /* tabs newtab button needs some special styling... */
 #tabs-newtab-button{
   padding-inline: 0 !important;
-  -moz-box-align: stretch !important;
+  -moz-box-align: stretch !important; /* Fx < 112 compatibility */
+  align-items: stretch !important;
 }
 /* We draw the icon as background-image to get correct scaling regardless of toolbar height */
 #tabs-newtab-button > .toolbarbutton-icon{
@@ -98,7 +99,7 @@ See the above repository for updates as well as full license text. */
 /* Line to mark selected tab */
 .tab-background[selected]::before,
 .tabbrowser-tab:hover > stack > .tab-background::before{
-  display: -moz-box;
+  display: flex;
   height: 2px;
   content: "";
 }
@@ -118,4 +119,8 @@ See the above repository for updates as well as full license text. */
 .tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
 
 /* moves context-line to the bottom */
-.tab-context-line{ -moz-box-ordinal-group: 2; margin-inline: 10px !important; }
+.tab-context-line{
+  -moz-box-ordinal-group: 2; /* Fx < 112 compatibility */
+  order: 2;
+  margin-inline: 10px !important;
+}

chrome/normal_pinned_tabs.css

@@ -6,16 +6,18 @@ See the above repository for updates as well as full license text. */
 #tabbrowser-tabs{ padding-inline-start: 0px !important }
 
 .tabbrowser-tab{
-  -moz-box-flex: 100;
+  flex-grow: 100;
+  -moz-box-flex: 100; /* Fx <112 compatibility */
   max-width: 225px;
   min-width: var(--tab-min-width);
   width: 0;
   transition: min-width 100ms ease-out, max-width 100ms ease-out;
   margin-inline-start: 0px !important;
   position: initial !important;
-  display: -moz-box !important
+  display: flex !important
 }
 
+.tab-stack{ flex-grow: 1 } /* Fx <112 compatibility */
 .tabbrowser-tab[pinned] > .tab-stack{ border: none !important; }
 .tabbrowser-tab[pinned]::after{ position: static !important; margin-block: 0px 1px !important; }
 
@@ -31,4 +33,4 @@ See the above repository for updates as well as full license text. */
 #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button:not([selected="true"]){ display: none !important; }
 
 /* Comment out or remove this if you want pinned tabs to never have close-button */
-.tab-close-button{ display: -moz-box !important; }
+.tab-close-button{ display: flex !important; }

chrome/overlay_menubar.css

@@ -23,10 +23,13 @@ See the above repository for updates as well as full license text. */
   color: var(--arrowpanel-color);
 }
 
-#menubar-items{ -moz-box-orient: horizontal !important; }
+#menubar-items{
+  -moz-box-orient: horizontal !important; /* Fx <112 compatibility */
+  flex-direction: row !important;
+}
 #menubar-items::after{
   content: "";
-  display: -moz-box;
+  display: flex;
   width: 30px;
   height: calc(var(--tab-min-height) +  2 * var(--tab-block-margin,0px));
   background-image: linear-gradient(to right, var(--arrowpanel-background) 30%, transparent);

chrome/selected_tab_gradient_border.css

@@ -12,7 +12,7 @@ See the above repository for updates as well as full license text. */
 .tab-background[selected] > .tab-context-line{ margin: -5px 0 0 !important; }
 .tabbrowser-tab[selected] > .tab-stack::before{
   content: "";
-  display: -moz-box;
+  display: flex;
   min-height: inherit;
   border-radius: var(--tab-border-radius);
   grid-area: 1/1;

chrome/show_toolbars_in_popup_windows.css

@@ -1,5 +1,5 @@
 /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/show_toolbars_in_popup_windows.css made available under Mozilla Public License v. 2.0
 See the above repository for updates as well as full license text. */
 
-:root[chromehidden~="toolbar"] :is(.browser-toolbar,.chromeclass-toolbar-additional) { display: -moz-box }
+:root[chromehidden~="toolbar"] :is(.browser-toolbar,.chromeclass-toolbar-additional) { display: flex }
 :root[chromehidden~="toolbar"] .browser-toolbar { visibility: visible }

chrome/status_inside_urlbar.css

@@ -26,7 +26,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi
 .urlbar-input-box::after{
   z-index: 2;
   content: "";
-  display: -moz-box;
+  display: flex;
   width: 100%;
   height: 100%;
   pointer-events:none;
@@ -111,6 +111,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi
 #statuspanel-label{
   text-align: center;
   -moz-box-pack: center;
+  justify-content: center;
 }
 .urlbar-input-box::after{ background-position-x: center !important; }
 */

chrome/status_inside_urlbar_v2.css

@@ -73,6 +73,7 @@ As a workaround, the -moz-element background image is removed somewhat often whi
 #statuspanel-label{
   text-align: center;
   -moz-box-pack: center;
+  justify-content: center;
 }
 .urlbar-input-box::after{ background-position-x: center !important; }
 */

chrome/tab_close_button_always_on_hover.css

@@ -6,5 +6,6 @@ See the above repository for updates as well as full license text. */
   display:none;
 }
 .tabbrowser-tab:not([pinned]):hover .tab-close-button{
-  display:-moz-box !important;
+  display: flex !important;
+  align-items: center;
 }

chrome/tab_line_loading_indicator.css

@@ -7,7 +7,7 @@ See the above repository for updates as well as full license text. */
 .tabbrowser-tab[busy] > .tab-stack >  .tab-background::before,
 .tab-background[selected]::before{
   content: "";
-  display: -moz-box;
+  display: flex;
   height: 2px;
   background-color:transparent;
   background-repeat: no-repeat;
@@ -23,4 +23,4 @@ See the above repository for updates as well as full license text. */
 }
 
 .tab-throbber{ display: none }
-.tab-icon-image[src]{ display: -moz-box }
+.tab-icon-image[src]{ display: block }

chrome/tab_loading_progress_bar.css

@@ -9,7 +9,7 @@ See the above repository for updates as well as full license text. */
 }
 .tabbrowser-tab:is([busy],[bursting]) > .tab-stack > .tab-background::after{
   content: "";
-  display: -moz-box;
+  display: flex;
   height: 2px;
   background-color:transparent;
   background-repeat: no-repeat;
@@ -30,4 +30,4 @@ See the above repository for updates as well as full license text. */
   opacity: 0;
 }
 .tab-throbber{ display: none !important; }
-.tab-icon-image[src]{ display: -moz-box !important; }
+.tab-icon-image[src]{ display: block !important; }

chrome/tab_loading_progress_throbber.css

@@ -10,7 +10,7 @@ See the above repository for updates as well as full license text. */
   display: none !important;
 }
 .tab-icon-stack::before{
-  display: -moz-box;
+  display: flex;
   grid-area: 1/1;
   content: "";
   width:var(--tab-loader-size);

chrome/tabs_animated_gradient_border.css

@@ -41,8 +41,8 @@ Thanks to /u/skenera on reddit for suggesting animating background position and
 }
 .scrollbox-clip[orient="horizontal"] > scrollbox::after{
   content: "";
-  display: -moz-box;
+  display: flex;
-  -moz-box-flex: 1 !important;
+  flex-grow: 1 !important;
   position: relative;
   background-color: var(--lwt-accent-color);
   margin-bottom: 1px;

chrome/tabs_below_content.css

@@ -38,7 +38,7 @@ linux_gtk_window_control_patch.css
 /* Move tabs below content */
 #main-window > body::after{
   content: "";
-  display: -moz-box;
+  display: flex;
 }
 #main-window:not([inFullscreen]) > body::after{
   margin-bottom: calc(var(--tab-min-height) + 2 * var(--tab-block-margin,0px));

chrome/tabs_on_bottom.css

@@ -34,7 +34,8 @@ have menubar permanently enabled and want it on top
 .titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }
 
 #titlebar{
-  -moz-box-ordinal-group: 2;
+  -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
+  order: 2;
   -moz-appearance: none !important;
   --tabs-navbar-shadow-size: 0px;
   --uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
@@ -42,13 +43,21 @@ have menubar permanently enabled and want it on top
 /* Re-order window and tab notification boxes */
 #navigator-toolbox > div{ display: contents }
 .global-notificationbox,
-#tab-notification-deck{ -moz-box-ordinal-group: 2 }
+#tab-notification-deck{
+  -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
+  order: 2;
+}
 
 #TabsToolbar .titlebar-spacer{ display: none; }
 /* Also hide the toolbox bottom border which isn't at bottom with this setup */
 #navigator-toolbox::after{ display: none !important; }
 
-@media (-moz-gtk-csd-close-button){ .titlebar-button{ -moz-box-orient: vertical } }
+@media (-moz-gtk-csd-close-button){
+  .titlebar-button{
+    -moz-box-orient: vertical; /* Fx <112 compatibility */
+    flex-direction: column;
+  }
+}
 
 /* At Activated Menubar */
 :root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
@@ -66,5 +75,8 @@ toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
 
 /* Uncomment the following if you want bookmarks toolbar to be below tabs */
 /*
-#PersonalToolbar{ -moz-box-ordinal-group: 2 }
+#PersonalToolbar{
+  -moz-box-ordinal-group: 2;
+  order: 2;
+}
 */

chrome/textual_context_navigation.css

@@ -9,6 +9,7 @@ See the above repository for updates as well as full license text. */
   padding-block: 0.5em;
   padding-inline-start: 1em;
   -moz-box-pack: start !important;
+  justify-content: start !important;
   width: auto !important;
 }
 #context-navigation > menuitem[_moz-menuactive="true"]:not([disabled]){ background-color: -moz-menuhover !important; }

chrome/textual_searchbar_one-offs.css

@@ -4,8 +4,8 @@ See the above repository for updates as well as full license text. */
 /* Makes the one-off search buttons in the searchbar popup show vertically with a label */
 
 #PopupSearchAutoComplete .search-panel-one-offs{
-  display: -moz-box !important;
+  display: flex !important;
-  -moz-box-orient: vertical;
+  flex-direction: column;
 }
 
 #PopupSearchAutoComplete .search-panel-one-offs-container{
@@ -13,10 +13,9 @@ See the above repository for updates as well as full license text. */
 }
 
 #PopupSearchAutoComplete .searchbar-engine-one-off-item{
-  display: -moz-box !important;
+  display: flex !important;
   margin-inline: 8px !important;
-  -moz-box-orient: horizontal;
+  align-items: center;
-  -moz-box-align: center;
   align-self: unset !important; 
 }
 
@@ -26,6 +25,6 @@ See the above repository for updates as well as full license text. */
 
 #PopupSearchAutoComplete .searchbar-engine-one-off-item::after{
   content: attr(tooltiptext);
-  display: -moz-inline-box;
+  display: inline-flex;
-  -moz-box-flex: 1;
+  flex-grow: 1;
 }

chrome/toolbarbuttons_icon+label.css

@@ -4,8 +4,10 @@ See the above repository for updates as well as full license text. */
 /* Shows both icon and label for toolbarbuttons */
 
 toolbar .toolbarbutton-1[label]{
-  -moz-box-orient: vertical;
+  -moz-box-orient: vertical; /* Fx <112 compatibility */
-  -moz-box-align: center !important;
+  flex-direction: column;
+  -moz-box-align: center !important; /* Fx <112 compatibility */
+  align-items: center !important;
 }
 
 toolbar .toolbarbutton-1[label]:not([disabled]):hover{ background-color: var(--toolbarbutton-hover-background) !important; }
@@ -21,12 +23,12 @@ toolbar .toolbarbutton-1[label] > .toolbarbutton-badge-stack{
 }
 
 toolbar .toolbarbutton-1[label] > .toolbarbutton-text {
-  display: -moz-box !important;
+  display: flex !important;
   min-height: 16px !important;
   padding-top: 0px !important;
   background-color: transparent !important;
   overflow: hidden;
-  width: 12ch;
+  width: 11ch;
 }
 toolbar .toolbarbutton-1[label] > .toolbarbutton-text::before{
   margin-inline: auto;

chrome/toolbars_below_content.css

@@ -15,11 +15,15 @@ See the above repository for updates as well as full license text. */
   #browser,
   #customization-container,
   #tab-notification-deck{
-    -moz-box-ordinal-group: 0
+    -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
+    order: -1;
   }
 
   /* Remove the next row if you want tabs to be the top-most row */
-  #titlebar{ -moz-box-ordinal-group: 2 } 
+  #titlebar{
+    -moz-box-ordinal-group: 2; /* Fx <112 compatibility */
+    order: 2;
+  } 
 
   #toolbar-menubar{
     position: fixed;
@@ -70,12 +74,12 @@ See the above repository for updates as well as full license text. */
   #browser,#customization-container{ padding-top: var(--uc-menubar-spacer,28px) }
   */
   
-  /* OR, if uncomment the following if you want menubar to appear below content, above tabs toolbar */
+  /* OR, uncomment the following if you want menubar to appear below content, above tabs toolbar */
   
   /*
-  #toolbar-menubar{ position: static; display: -moz-box; margin-top: 0px !important; background-color: transparent }
+  #toolbar-menubar{ position: static; display: flex; margin-top: 0px !important; background-color: transparent }
   */
 
-  /* set to "reverse" (without quotes) if you want tabs above menubar with the above option */
+  /* set to "column-reverse" (without quotes) if you want tabs above menubar with the above option */
-  #titlebar{ -moz-box-direction: normal; }
+  #titlebar{ flex-direction: column }
 }

chrome/urlbar_popup_full_width.css

@@ -20,7 +20,7 @@ See the above repository for updates as well as full license text. */
 #urlbar-container,
 #urlbar{
   position: static !important;
-  display: -moz-box !important;
+  display: flex !important;
 }
 #urlbar{
   height: auto !important;
@@ -31,6 +31,13 @@ See the above repository for updates as well as full license text. */
   --uc-urlbar-min-width: none; /* navbar_tabs_oneliner.css compatibility */
 }
 
+#urlbar,
+#urlbar-background,
+#urlbar-input-container,
+.urlbarView{
+  flex-grow: 1; /* Fx <112 compatibility */
+}
+
 #urlbar[focused]{ box-shadow: inset 0 0 0 1px var(--toolbar-field-focus-border-color, highlight); }
 
 .urlbarView{
@@ -50,4 +57,4 @@ See the above repository for updates as well as full license text. */
 
 /* This may seem pretty weird, but it gets around an issue where the height of urlbar may suddenly change when one starts typing into it */
 /* If you are otherwise modifying the urlbar height then you might need to modify the height of this too */
-#urlbar > #urlbar-input-container::before{ content: ""; display: -moz-box; height: 24px; }
+#urlbar > #urlbar-input-container::before{ content: ""; display: flex; height: 24px; }

chrome/vertical_menubar.css

@@ -30,18 +30,19 @@ See the above repository for updates as well as full license text. */
     left: 0px;
     width: 100vw;
   }
-  .titlebar-spacer{ flex-grow: 1; }
-  :root[sizemode="normal"] :where(.titlebar-spacer){ display: -moz-box !important; }
 
-  #TabsToolbar > .toolbar-items{ max-width: calc(100vw - 138px) }
+  :root[sizemode="normal"] :where(.titlebar-spacer){ display: flex !important; }
+  
+  #TabsToolbar > .toolbar-items{ max-width: calc(100vw - 138px); flex-grow: 1 }
   #TabsToolbar > .titlebar-buttonbox-container{
-    display: -moz-box !important;
+    display: flex !important;
   }
 
   #toolbar-menubar:not([customizing]){
     margin-top: 40px; /* This needs to be bigger if bookmarks toolbar is shown */
     width: var(--uc-vertical-menubar-width);
     -moz-box-orient: vertical;
+    flex-direction: column;
     flex-grow: 1;
     background-color: var(--lwt-accent-color);
   }
@@ -56,6 +57,7 @@ See the above repository for updates as well as full license text. */
 
   #toolbar-menubar:not([customizing]) #main-menubar{
     -moz-box-orient: vertical;
+    flex-direction: column;
     margin-left: -40px;
     background-color: var(--lwt-accent-color);
   }

chrome/vertical_popup_menubar.css

@@ -16,22 +16,21 @@ menubar > menu{visibility: collapse; transition: visibility 0ms linear 0.1s}
 menubar:hover > menu,    
 #toolbar-menubar[autohide="true"]:not([inactive]) > #menubar-items > menubar > menu{visibility: visible}
 
-#menubar-items{
+:root:not([customizing]) #menubar-items{
   display: block;
   position: fixed;
   z-index: 10;
   background-color: var(--lwt-accent-color);
   inset-inline-start: 0;
 }
-menubar{ -moz-box-orient: vertical; }
+:root:not([customizing]) menubar{
+  -moz-box-orient: vertical; /* Fx <112 compatibility */
+  flex-direction: column;
+}
 menubar > menu { padding: 3px }
-
 menubar > menu > menupopup{ margin: calc(0px - var(--uc-menubaritem-height)) 0 0 var(--uc-menubaritem-width) }
-#toolbar-menubar[autohide="true"][inactive] > #menubar-items{ max-height: 0px; overflow: -moz-hidden-unscrollable }
+#toolbar-menubar[autohide="true"][inactive] > #menubar-items{ max-height: 0px; overflow: hidden }
-
-
 #toolbar-menubar[autohide="true"]:not([inactive]){ margin-bottom: -32px }
-
 #toolbar-menubar > .titlebar-buttonbox-container + :is(toolbarbutton,toolbaritem){ margin-inline-start: var(--uc-menubaritem-width) }
 
 #file-menu{

chrome/window_control_placeholder_support.css

@@ -80,7 +80,12 @@ See the above repository for updates as well as full license text. */
   }
   :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
   :root[sizemode="fullscreen"] #window-controls{ right: unset; }
-  .titlebar-buttonbox-container{ -moz-box-ordinal-group: 0 !important; }
+  .titlebar-buttonbox-container{
-  .titlebar-buttonbox{ -moz-box-direction: reverse }
+    -moz-box-ordinal-group: 0 !important; /* Fx <112 compatibility */
+    order: -1 !important;
+  }
+  .titlebar-buttonbox{
+    -moz-box-direction: reverse; /* Fx <112 compatibility */
+    flex-direction: row-reverse;
+  }
 }
-