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.
2023-03-11 12:26:07 +02:00 · 2023-03-11 12:26:07 +02:00 · 0ff12e01fe
commit 0ff12e01fe
parent 0db37c5d77
47 changed files with 262 additions and 137 deletions
--- a/chrome/autohide_sidebar.css
+++ b/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;
--- a/chrome/centered_tab_label.css
+++ b/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;
-  align-items: safe center;
+  justify-content: safe center; /* Fx <112 compatibility */
+  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,
--- a/chrome/classic_firefox_menu_button.css
+++ b/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; }
-:root[tabsintitlebar] #nav-bar{ border-left-width: 0px; padding-left: 0px !important; }
-#PanelUI-menu-button{ -moz-box-align: start !important; }
+#PanelUI-button{
+  -moz-box-ordinal-group: 0; /* Fx <112 compatibility */
+  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;
--- a/chrome/classic_grid_main_menu_popup.css
+++ b/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{ -moz-box-orient: vertical }
+#appMenu-protonMainView > .panel-subview-body > toolbarbutton > .toolbarbutton-icon{
+  -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-controls2 + toolbarseparator{
+#appMenu-zoom-controls,
+#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-controls2{ padding-block: 2px !important; }
-#appMenu-zoom-controls2 > :not(:last-child){
-  -moz-box-flex: 1 !important;
-  -moz-box-pack: center !important;
+#appMenu-zoom-controls + toolbarseparator{ margin-block: 0 4px !important; }
+#appMenu-zoom-controls{ padding-block: 2px !important; }
+#appMenu-zoom-controls > :not(:last-child){
+  -moz-box-flex: 1 !important; /* Fx <112 compatibility */
+  -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{ min-width: 170px }
-#appMenu-more-button2 > .toolbarbutton-icon{ -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-controls2 > label,
-#appMenu-zoom-controls2 > spacer,
+#appMenu-zoom-controls > #appMenu-fullscreen-button > label,
+#appMenu-zoom-controls > label,
+#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-pack: center !important;
+  -moz-box-orient: horizontal !important; /* Fx <112 compatibility */
+  -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,
--- a/chrome/combined_favicon_and_tab_close_button.css
+++ b/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;
--- a/chrome/combined_tabs_and_main_toolbars.css
+++ b/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 }
--- a/chrome/curved_tabs.css
+++ b/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; }
--- a/chrome/fake_statusbar_w_bookmarksbar.css
+++ b/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;
 }
--- a/chrome/floating_findbar_on_top.css
+++ b/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;
-  -moz-box-flex: 100;
+  display: flex;
+  -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;
--- a/chrome/hide_tabs_scrollbuttons.css
+++ b/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,
--- a/chrome/hide_tabs_toolbar.css
+++ b/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-align: stretch;
+  -moz-box-flex: 1; /* Fx < 112 compatibility */
+  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;
--- a/chrome/hide_tabs_with_one_tab.css
+++ b/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);
--- a/chrome/hide_tabs_with_one_tab_w_window_controls.css
+++ b/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 }

--- a/chrome/icon_only_tabs.css
+++ b/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]{
--- a/chrome/iconized_main_menu.css
+++ b/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;
 }
--- a/chrome/inline_tab_audio_icons.css
+++ b/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 }
--- a/chrome/linux_gtk_window_control_patch.css
+++ b/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) }
--- a/chrome/menubar_in_main_toolbar.css
+++ b/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; }
--- a/chrome/menubar_in_tabs_toolbar.css
+++ b/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;
 }

--- a/chrome/multi-row_tabs.css
+++ b/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,
--- a/chrome/multi-row_tabs_below_content.css
+++ b/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;
  }
--- a/chrome/multi-row_tabs_window_control_patch.css
+++ b/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 }
--- a/chrome/navbar_tabs_oneliner_menu_buttons_on_right.css
+++ b/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{ 
-  --uc-buttons-width: calc(28px + 2 * var(--toolbarbutton-outer-padding) + 6px)
+#nav-bar:not([nonemptyoverflow="true"]) > #nav-bar-customization-target{ 
+  --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"]{
--- a/chrome/navbar_tabs_oneliner_tabs_on_left.css
+++ b/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 */
--- a/chrome/newtab_button_always_on_hover.css
+++ b/chrome/newtab_button_always_on_hover.css
@ -3,8 +3,9 @@ See the above repository for updates as well as full license text. */

 /* Always show tab close button on hover and never otherwise */
 #tabbrowser-tabs #tabs-newtab-button{
-  display:none;
+  display: none;
 }
 #tabbrowser-tabs:hover #tabs-newtab-button{
-  display:-moz-box !important;
+  display: flex !important;
+  align-items: center; /* Fx < 112 compatibility */
 }
--- a/chrome/non_floating_sharp_tabs.css
+++ b/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;
+}
--- a/chrome/normal_pinned_tabs.css
+++ b/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; }
--- a/chrome/overlay_menubar.css
+++ b/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);
--- a/chrome/selected_tab_gradient_border.css
+++ b/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;
--- a/chrome/show_toolbars_in_popup_windows.css
+++ b/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 }
--- a/chrome/status_inside_urlbar.css
+++ b/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; }
 */
--- a/chrome/status_inside_urlbar_v2.css
+++ b/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; }
 */
--- a/chrome/tab_close_button_always_on_hover.css
+++ b/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;
 }
--- a/chrome/tab_line_loading_indicator.css
+++ b/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 }
--- a/chrome/tab_loading_progress_bar.css
+++ b/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; }
--- a/chrome/tab_loading_progress_throbber.css
+++ b/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);
--- a/chrome/tabs_animated_gradient_border.css
+++ b/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;
-  -moz-box-flex: 1 !important;
+  display: flex;
+  flex-grow: 1 !important;
  position: relative;
  background-color: var(--lwt-accent-color);
  margin-bottom: 1px;
--- a/chrome/tabs_below_content.css
+++ b/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));
--- a/chrome/tabs_on_bottom.css
+++ b/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;
+}
 */
--- a/chrome/textual_context_navigation.css
+++ b/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; }
--- a/chrome/textual_searchbar_one-offs.css
+++ b/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;
-  -moz-box-orient: vertical;
+  display: flex !important;
+  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;
-  -moz-box-align: center;
+  align-items: 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;
-  -moz-box-flex: 1;
+  display: inline-flex;
+  flex-grow: 1;
 }
--- a/chrome/toolbarbuttons_icon+label.css
+++ b/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-align: center !important;
+  -moz-box-orient: vertical; /* Fx <112 compatibility */
+  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;
--- a/chrome/toolbars_below_content.css
+++ b/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 */
-  #titlebar{ -moz-box-direction: normal; }
+  /* set to "column-reverse" (without quotes) if you want tabs above menubar with the above option */
+  #titlebar{ flex-direction: column }
 }
--- a/chrome/urlbar_popup_full_width.css
+++ b/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; }
--- a/chrome/vertical_menubar.css
+++ b/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);
  }
--- a/chrome/vertical_popup_menubar.css
+++ b/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{
--- a/chrome/window_control_placeholder_support.css
+++ b/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{ -moz-box-direction: reverse }
+  .titlebar-buttonbox-container{
+    -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;
+  }
 }
-