Fix: Compatibility - -moz-box-ordinal-group at FF v112 #670

css/leptonChrome.css

@@ -3969,12 +3969,12 @@
     See the above repository for updates as well as full license text. */
     /*= Tabbar - Move to bottom ==================================================*/
     #titlebar {
-      order: 2; /* When userChrome.fullscreen.overlap */
+      order: 2;
       -moz-box-ordinal-group: 2;
       --tabs-navbar-shadow-size: 0px;
     }
     #tab-notification-deck {
-      order: 2; /* When userChrome.fullscreen.overlap */
+      order: 2;
       -moz-box-ordinal-group: 2;
     }
     #TabsToolbar .titlebar-spacer {
@@ -3985,7 +3985,7 @@
     }
     @supports -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") {
       #PersonalToolbar {
-        order: 2; /* When userChrome.fullscreen.overlap */
+        order: 2;
         -moz-box-ordinal-group: 2;
       }
     }
@@ -4081,12 +4081,12 @@
         See the above repository for updates as well as full license text. */
         /*= Tabbar - Move to bottom ==================================================*/
         #titlebar {
-          order: 2; /* When userChrome.fullscreen.overlap */
+          order: 2;
           -moz-box-ordinal-group: 2;
           --tabs-navbar-shadow-size: 0px;
         }
         #tab-notification-deck {
-          order: 2; /* When userChrome.fullscreen.overlap */
+          order: 2;
           -moz-box-ordinal-group: 2;
         }
         #TabsToolbar .titlebar-spacer {
@@ -4097,7 +4097,7 @@
         }
         @supports -moz-bool-pref("userChrome.tabbar.on_bottom.above_bookmark") {
           #PersonalToolbar {
-            order: 2; /* When userChrome.fullscreen.overlap */
+            order: 2;
             -moz-box-ordinal-group: 2;
           }
         }
@@ -7215,6 +7215,7 @@
     .tabbrowser-tab[pinned][visuallyselected]:not([style*="transform: translateX"]):hover:not([busy])
       .tab-close-button {
       display: -moz-box !important;
+      order: 0 !important;
       -moz-box-ordinal-group: 0 !important;
       /* Looks like hover */
       width: var(--uc-close-button-size) !important;
@@ -7233,6 +7234,7 @@
     @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.always") {
       .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button {
         display: -moz-box !important;
+        order: 0 !important;
         -moz-box-ordinal-group: 0 !important;
         /* Looks like hover */
         width: var(--uc-close-button-size) !important;
@@ -7252,6 +7254,7 @@
     @supports -moz-bool-pref("userChrome.tab.close_button_at_pinned.background") {
       .tabbrowser-tab[pinned]:not([style*="transform: translateX"]):hover:not([busy]) .tab-close-button {
         display: -moz-box !important;
+        order: 0 !important;
         -moz-box-ordinal-group: 0 !important;
         /* Looks like hover */
         width: var(--uc-close-button-size) !important;
@@ -7474,6 +7477,7 @@
     width: 14px;
     height: 14px;
     background-size: 14px;
+    order: 1 !important;
     -moz-box-ordinal-group: 1 !important;
     /* Color */
     fill: currentColor;
@@ -7487,6 +7491,7 @@
   }
   /* Close Button's position */
   .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
+    order: 2 !important;
     -moz-box-ordinal-group: 2 !important;
   }
   #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
@@ -8107,12 +8112,15 @@
     --uc-combined-circlebutton-active-background: color-mix(in srgb, currentColor 20%, transparent);
   }
   #nav-bar-customization-target > * {
+    order: 1;
     -moz-box-ordinal-group: 1;
   }
   #nav-bar-customization-target > #urlbar-container {
+    order: 5;
     -moz-box-ordinal-group: 5;
   }
   #nav-bar-customization-target > #urlbar-container ~ * {
+    order: 7;
     -moz-box-ordinal-group: 7;
   }
 }
@@ -8464,9 +8472,11 @@
 }
 @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") {
   #nav-bar-customization-target > #back-button {
+    order: 2;
     -moz-box-ordinal-group: 2;
   }
   #nav-bar-customization-target > #forward-button {
+    order: 4;
     -moz-box-ordinal-group: 4;
   }
   @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") {
@@ -8499,6 +8509,7 @@
 }
 @supports -moz-bool-pref("userChrome.combined.urlbar.home_button") {
   #nav-bar-customization-target > #home-button {
+    order: 3;
     -moz-box-ordinal-group: 3;
   }
   @supports not -moz-bool-pref("userChrome.combined.urlbar.nav_button") {
@@ -8546,6 +8557,7 @@
 }
 @supports -moz-bool-pref("userChrome.combined.urlbar.reload_button") {
   #nav-bar-customization-target > #stop-reload-button {
+    order: 6;
     -moz-box-ordinal-group: 6;
   }
   #urlbar {
@@ -8672,6 +8684,7 @@
   menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text,
   menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container,
   menupopup[placespopup="true"] > menu.bookmark-item > .menu-right {
+    order: 2;
     -moz-box-ordinal-group: 2;
   }
   menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item {
@@ -8686,6 +8699,7 @@
     z-index: 1;
   }
   findbar {
+    order: 0;
     -moz-box-ordinal-group: 0;
     position: relative;
     height: 0 !important;
@@ -9571,6 +9585,7 @@
 }
 @supports -moz-bool-pref("userChrome.autohide.fill_urlbar") {
   #nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
+    order: 0;
     -moz-box-ordinal-group: 0;
     min-width: calc(
       var(--uc-navbar-width, 100vw) -
@@ -10022,6 +10037,7 @@
     #appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon {
       display: -moz-inline-box !important;
       margin-inline-start: var(--arrowpanel-menuicon-padding);
+      order: 0 !important;
       -moz-box-ordinal-group: 0 !important;
     }
     #appMenu-proton-update-banner::before {
@@ -10154,6 +10170,7 @@
     }
     @supports -moz-bool-pref("userChrome.icon.account_image_to_right") {
       #fxa-manage-account-button::before {
+        order: 2 !important;
         -moz-box-ordinal-group: 2 !important;
       }
     }
@@ -10165,6 +10182,7 @@
     }
     .syncNowBtn {
       visibility: visible !important;
+      order: 1 !important;
       -moz-box-ordinal-group: 1 !important;
       margin-inline-end: var(--arrowpanel-menuicon-padding);
     }
@@ -10213,6 +10231,7 @@
       padding: 0;
     }
     #PanelUI-fxa-menu > :first-child {
+      order: 0;
       -moz-box-ordinal-group: 0;
     }
     #PanelUI-sign-out-separator {

src/autohide/_fill_urlbar.scss

@@ -1,5 +1,5 @@
 #nav-bar:not(:hover, :focus-within, [urlbar-exceeds-toolbar-bounds="true"]) #urlbar-container {
-  -moz-box-ordinal-group: 0;
+  @include BoxOrder(0);
   min-width: calc(var(--uc-navbar-width, 100vw) - ((2 * var(--urlbar-margin-inline)) + var(--uc-window-drag-space-pre, 0px) + var(--uc-navbar-gap, 0px))) !important;
 }
 

src/combined/_index.scss

@@ -30,18 +30,18 @@
   }
 
   #nav-bar-customization-target > * {
-    -moz-box-ordinal-group: 1;
+    @include BoxOrder(1);
   }
   // Preserve
   // `back`    -> 2
   // `home`    -> 3
   // `forward` -> 4
   #nav-bar-customization-target > #urlbar-container {
-    -moz-box-ordinal-group: 5;
+    @include BoxOrder(5);
   }
   // `reload`  -> 6
   #nav-bar-customization-target > #urlbar-container ~ * {
-    -moz-box-ordinal-group: 7;
+    @include BoxOrder(7);
   }
 }
 
@@ -97,10 +97,10 @@
 @include Option("userChrome.combined.urlbar.nav_button") {
   #nav-bar-customization-target > {
     #back-button {
-      -moz-box-ordinal-group: 2;
+      @include BoxOrder(2);
     }
     #forward-button {
-      -moz-box-ordinal-group: 4;
+      @include BoxOrder(4);
     }
 
     $button: ":is(toolbarbutton, toolbaritem)";
@@ -133,7 +133,7 @@
 }
 @include Option("userChrome.combined.urlbar.home_button") {
   #nav-bar-customization-target > #home-button {
-    -moz-box-ordinal-group: 3;
+    @include BoxOrder(3);
 
     @include NotOption("userChrome.combined.urlbar.nav_button") {
       &:is(:first-child) + :is(toolbarbutton, toolbaritem) {
@@ -145,7 +145,7 @@
 }
 @include Option("userChrome.combined.urlbar.reload_button") {
   #nav-bar-customization-target > #stop-reload-button {
-    -moz-box-ordinal-group: 6;
+    @include BoxOrder(6);
   }
 
   @import "reload_button";

src/counter/_bookmark_menu.scss

@@ -9,7 +9,7 @@ menupopup[placespopup="true"] > menu.bookmark-item::after {
 menupopup[placespopup="true"] > menu.bookmark-item > .menu-iconic-highlightable-text,
 menupopup[placespopup="true"] > menu.bookmark-item > .menu-accel-container,
 menupopup[placespopup="true"] > menu.bookmark-item > .menu-right {
-  -moz-box-ordinal-group: 2;
+  @include BoxOrder(2);
 }
 
 menu.bookmark-item > menupopup[placespopup="true"] > .bookmark-item {

src/icons/_panel.scss

@@ -2,7 +2,7 @@
 #appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon {
   display: -moz-inline-box !important;
   margin-inline-start: var(--arrowpanel-menuicon-padding);
-  -moz-box-ordinal-group: 0 !important;
+  @include BoxOrder(0, true);
 }
 
 #appMenu-proton-update-banner::before {
@@ -142,7 +142,7 @@
   margin-inline-end: var(--arrowpanel-menuicon-padding);
 
   @include Option("userChrome.icon.account_image_to_right") {
-    -moz-box-ordinal-group: 2 !important;
+    @include BoxOrder(2, true);
   }
 }
 @include Option("userChrome.icon.account_label_to_right") {
@@ -153,7 +153,8 @@
 
 .syncNowBtn {
   visibility: visible !important;
-  -moz-box-ordinal-group: 1 !important;
+  @include BoxOrder(1, true);
+
   margin-inline-end: var(--arrowpanel-menuicon-padding);
 }
 #PanelUI-fxa-menu-setup-sync-button {
@@ -204,7 +205,7 @@
   padding: 0;
 }
 #PanelUI-fxa-menu > :first-child {
-  -moz-box-ordinal-group: 0;
+  @include BoxOrder(0);
 }
 #PanelUI-sign-out-separator {
   display: none;

src/leptonChrome.scss

@@ -4,6 +4,7 @@
 @use "utils/accent_color" as *;
 @use "utils/native_menu" as *;
 @use "utils/moz_document" as *;
+@use "utils/moz_box" as *;
 @use "utils/theme" as *;
 @use "utils/one_liner" as *;
 @use "utils/window_control" as *;

src/others/_findbar_floating_on_top.scss

@@ -9,7 +9,7 @@ See the above repository for updates as well as full license text. */
 }
 
 findbar {
-  -moz-box-ordinal-group: 0;
+  @include BoxOrder(0);
   position: relative;
 
   height: 0 !important;

src/tab/_picture_in_picture_tab.scss

@@ -8,7 +8,7 @@
   width: 14px;
   height: 14px;
   background-size: 14px;
-  -moz-box-ordinal-group: 1 !important;
+  @include BoxOrder(1, true);
 
   /* Color */
   fill: currentColor;
@@ -24,7 +24,7 @@
 
 /* Close Button's position */
 .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
-  -moz-box-ordinal-group: 2 !important;
+  @include BoxOrder(2, true);
 }
 #tabbrowser-tabs:not([closebuttons="activetab"]) .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
   margin-left: 7px !important;

src/tab/clipped_tab/_pinned_close_button.scss

@@ -12,7 +12,7 @@
 @mixin pinnedCloseButtonShow($prefix: "") {
   #{$prefix}:not([busy]) .tab-close-button {
     display: -moz-box !important;
-    -moz-box-ordinal-group: 0 !important;
+    @include BoxOrder(0, true);
 
     /* Looks like hover */
     width: var(--uc-close-button-size) !important;

src/tabbar/_on_bottom.scss

@@ -3,13 +3,11 @@ See the above repository for updates as well as full license text. */
 
 /*= Tabbar - Move to bottom ==================================================*/
 #titlebar {
-  order: 2; /* When userChrome.fullscreen.overlap */
-  -moz-box-ordinal-group: 2;
+  @include BoxOrder(2) /* When userChrome.fullscreen.overlap */;
   --tabs-navbar-shadow-size: 0px;
 }
 #tab-notification-deck {
-  order: 2; /* When userChrome.fullscreen.overlap */
-  -moz-box-ordinal-group: 2;
+  @include BoxOrder(2);
 }
 
 #TabsToolbar .titlebar-spacer {
@@ -22,8 +20,7 @@ See the above repository for updates as well as full license text. */
 
 @include Option("userChrome.tabbar.on_bottom.above_bookmark") {
   #PersonalToolbar {
-    order: 2; /* When userChrome.fullscreen.overlap */
-    -moz-box-ordinal-group: 2;
+    @include BoxOrder(2);
   }
 }
 @include NotOption("userChrome.tabbar.on_bottom.above_bookmark") {

src/utils/_moz_box.scss

@@ -0,0 +1,107 @@
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1820534
+// https://groups.google.com/a/mozilla.org/g/firefox-dev/c/9sGpF1TNbLk/m/QpU3oTUuAgAJ
+// https://github.com/MrOtherGuy/firefox-csshacks/commit/0ff12e01fe18bc86ca68291c88c6dcf027cb9d83
+
+@function _important($important) {
+  @if $important {
+    @return !important;
+  }
+  @return null;
+}
+
+@mixin BoxFlex($num, $important: false) {
+  $important: _important($important);
+
+  flex: $num $important;
+  -moz-box-flex: $num $important;
+}
+
+@mixin BoxOrder($num, $important: false) {
+  $important: _important($important);
+
+  // -moz-box-ordinal-group is always positive
+  order: $num $important;
+  -moz-box-ordinal-group: $num $important;
+}
+
+@mixin BoxAlign($align, $important: false) {
+  $important: _important($important);
+
+  @if $align == "start" {
+    align-items: flex-start $important;
+    -moz-box-align: start $important;
+  }
+  @if $align == "center" {
+    align-items: center $important;
+    -moz-box-align: center $important;
+  }
+  @if $align == "end" {
+    align-items: flex-end $important;
+    -moz-box-align: end $important;
+  }
+
+  @if $align == "baseline" {
+    align-items: baseline $important;
+    -moz-box-align: baseline $important;
+  }
+  @if $align == "stretch" {
+    align-items: stretch $important;
+    -moz-box-align: stretch $important;
+  }
+}
+
+@mixin BoxPack($align, $important: false) {
+  $important: _important($important);
+
+  @if $align == "start" {
+    justify-content: flex-start $important;
+    -moz-box-pack: start $important;
+  }
+  @if $align == "center" {
+    justify-content: center $important;
+    -moz-box-pack: center $important;
+  }
+  @if $align == "end" {
+    justify-content: flex-end $important;
+    -moz-box-pack: end $important;
+  }
+
+  @if $align == "justify" {
+    justify-content: space-between $important;
+    -moz-box-pack: justify $important;
+  }
+}
+
+@mixin BoxDirection($direction, $important: false) {
+  $important: _important($important);
+
+  @if $direction == "row" {
+    flex-direction: row $important;
+    -moz-box-orient: horizontal $important;
+    -moz-box-direction: normal $important;
+  }
+  @if $direction == "row-reverse" {
+    flex-direction: row-reverse $important;
+    -moz-box-orient: horizontal $important;
+    -moz-box-direction: reverse $important;
+  }
+  @if $direction == "column" {
+    flex-direction: column $important;
+    -moz-box-orient: vertical $important;
+    -moz-box-direction: normal $important;
+  }
+  @if $direction == "column-reverse" {
+    flex-direction: column-reverse $important;
+    -moz-box-orient: vertical $important;
+    -moz-box-direction: reverse $important;
+  }
+  @if $direction == "revert" {
+    flex-direction: revert $important;
+    -moz-box-direction: revert $important;
+  }
+
+  @if $direction == "reverse" {
+    flex-direction: row-reverse $important;
+    -moz-box-direction: reverse $important;
+  }
+}