Fix: Compatibility - -moz-box, -moz-inline-box to flex, inline-flex #696

src/contents/_activity_stream.scss

@@ -159,7 +159,7 @@
 
     #contentSearchSettingsButton::before {
       content: url("chrome://global/skin/icons/settings.svg") !important;
-      display: -moz-inline-box;
+      @include InlineBox;
 
       /* Color */
       -moz-context-properties: fill, fill-opacity !important;

src/counter/_bookmark_menu.scss

@@ -2,7 +2,7 @@ menupopup[placespopup="true"] > menu.bookmark-item > .menu-right {
   counter-reset: bookmark-counts 0;
 }
 menupopup[placespopup="true"] > menu.bookmark-item::after {
-  display: -moz-inline-box;
+  @include InlineBox;
   content: "(" counter(bookmark-counts) ")";
 }
 

src/decoration/_animate.scss

@@ -115,7 +115,7 @@ xul|search-textbox.tabsFilter,
     will-change: margin-inline-start, opacity, visibility;
 
     &[hidden="true"] {
-      display: -moz-box !important;
+      @include Box(true);
       margin-inline-start: -18em;
       opacity: 0;
       visibility: collapse;

src/icons/_panel.scss

@@ -1,6 +1,6 @@
 /*= Panel - Main =============================================================*/
 #appMenu-proton-addon-banners > .addon-banner-item > .toolbarbutton-icon {
-  display: -moz-inline-box !important;
+  @include InlineBox(true);
   margin-inline-start: var(--arrowpanel-menuicon-padding);
   @include BoxOrder(0, true);
 }
@@ -133,7 +133,7 @@
 /* Default */
 #fxa-manage-account-button::before {
   content: "";
-  display: -moz-inline-box;
+  @include InlineBox;
   width: 32px !important;
   height: 32px !important;
   border-radius: 50%;
@@ -199,7 +199,7 @@
 /* Change Separator */
 #PanelUI-fxa-menu::before {
   content: "";
-  display: -moz-box;
+  @include Box;
   border-bottom: 1px solid var(--panel-separator-color);
   margin: var(--panel-separator-margin);
   padding: 0;
@@ -362,7 +362,7 @@ panelMenuBookmarkThisPage[starred] {
   list-style-image: url("chrome://browser/skin/downloads/downloads.svg");
 }
 #downloadsHistory .box-inherit.button-box {
-  display: -moz-inline-box !important;
+  @include InlineBox(true);
 }
 
 /*= Toolbar - Overflow Menu ==================================================*/
@@ -412,7 +412,7 @@ panelMenuBookmarkThisPage[starred] {
     list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg") !important;
   }
   #BMB_bookmarksShowAllTop > .menu-iconic-left {
-    display: -moz-box !important;
+    @include Box(true);
   }
 }
 

src/icons/layout/_panel.scss

@@ -44,7 +44,7 @@
 
 #appMenu-multiView .subviewbutton::before,
 #appMenu-proton-update-banner::before {
-  display: -moz-inline-box;
+  @include InlineBox;
   margin-inline-end: var(--arrowpanel-menuicon-padding);
   width: 16px;
   height: 16px;

src/leptonContent.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/proton_elements" as Proton;
 @use "sass:selector";
 

src/library/_menubar.scss

@@ -24,7 +24,7 @@
   list-style-image: url("chrome://global/skin/icons/delete.svg") !important;
 }
 #clearDownloadsButton > .toolbarbutton-icon {
-  display: -moz-inline-box !important;
+  @include InlineBox(true);
   margin-top: 0;
   margin-bottom: 0;
   margin-inline-start: 0;

src/others/_findbar_floating_on_top.scss

@@ -27,7 +27,7 @@ findbar {
 
   &::before {
     content:"";
-    display: -moz-box;
+    @include Box;
     position: absolute;
     @include BoxFlex(200);
   }
@@ -52,7 +52,7 @@ findbar {
     margin: 0 !important;
   }
   > .findbar-find-status {
-    display: -moz-box;
+    @include Box;
     overflow: hidden;
     text-overflow: ellipsis;
     @include BoxFlex(1);

src/tab/_picture_in_picture_tab.scss

@@ -4,7 +4,7 @@
 }
 .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-content::after {
   /* Shape */
-  display: -moz-inline-box !important;
+  @include InlineBox(true);
   width: 14px;
   height: 14px;
   background-size: 14px;

src/tab/clipped_tab/_always_show_tab_icon.scss

@@ -1,3 +1,3 @@
 .tab-icon-image:not([src], [pinned], [crashed], [busy]) {
-  display: -moz-inline-box !important;
+  @include InlineBox(true);
 }

src/tab/clipped_tab/_pinned_close_button.scss

@@ -11,7 +11,7 @@
 //-- Mixin ---------------------------------------------------------------------
 @mixin pinnedCloseButtonShow($prefix: "") {
   #{$prefix}:not([busy]) .tab-close-button {
-    display: -moz-box !important;
+    @include Box(true);
     @include BoxOrder(0, true);
 
     /* Looks like hover */

src/tab/clipped_tab/_show_close_button_at_hover.scss

@@ -24,7 +24,7 @@
   > .tab-stack
   > .tab-content
   > .tab-close-button:not([selected="true"]) {
-    display: -moz-inline-box !important;
+    @include InlineBox(true);
   }
 
   @include _closeButtonAtHover;

src/tab/selected_tab/_photon_like_contextline.scss

@@ -1,5 +1,5 @@
 .tab-context-line {
-  display: -moz-inline-box !important;
+  @include InlineBox(true);
   height: 2px !important;
   border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
 }

src/tab/sound_tab/_show_label.scss

@@ -1,3 +1,3 @@
 .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){
-  display: -moz-box !important;
+  @include Box(true);
 }

src/tabbar/_as_titlebar.scss

@@ -82,6 +82,6 @@ spacer:is([part="overflow-start-indicator"], [part="overflow-end-indicator"]),
 @include Option("browser.tabs.tabmanager.enabled") {
   :root:not([tabsintitlebar="true"]) #tabbrowser-tabs:not([overflow="true"], [hashiddentabs]) ~ #alltabs-button,
   :root:not([tabsintitlebar="true"]) #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow="true"]) ~ #new-tab-button {
-    display: -moz-box !important;
+    @include Box(true);
   }
 }

src/tabbar/_multi_row.scss

@@ -65,7 +65,7 @@ See the above repository for updates as well as full license text. */
   margin-bottom: 0 !important;
 }
 #tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
-  display: -moz-box !important;
+  @include Box(true);
 }
 
 #alltabs-button,

src/theme/proton_chrome/_proton_commons.scss

@@ -284,7 +284,7 @@
   }
 
   dropmarker {
-    display: -moz-box !important;
+    @include Box(true);
     appearance: none !important;
     width: 12px !important;
     height: 12px !important;
@@ -486,7 +486,7 @@
       font-size: inherit !important;
     }
     xul|menulist::part(dropmarker) {
-      display: -moz-box;
+      @include Box;
       margin-block: 6px !important;
     }
     xul|menulist:-moz-focusring::part(label-box) {
@@ -501,7 +501,7 @@
     }
 
     xul|menulist::part(dropmarker) {
-      display: -moz-box !important;
+      @include Box(true);
       margin-block: 1px !important;
     }
 

src/utils/_moz_box.scss

@@ -110,3 +110,17 @@
     -moz-box-direction: reverse $important;
   }
 }
+
+@mixin Box($important: false) {
+  $important: _important($important);
+
+  display: flex $important;
+  display: -moz-box $important;
+}
+
+@mixin InlineBox($important: false) {
+  $important: _important($important);
+
+  display: inline-flex $important;
+  display: -moz-inline-box $important;
+}