From feda613e5f6bdfe6f40e4d57f26407cf0856d66c Mon Sep 17 00:00:00 2001 From: alstjr7375 Date: Sun, 19 Mar 2023 00:16:05 +0900 Subject: [PATCH] Fix: Compatibility - `-moz-box-ordinal-group` at FF v112 #670 --- css/leptonChrome.css | 31 ++++- src/autohide/_fill_urlbar.scss | 2 +- src/combined/_index.scss | 14 +-- src/counter/_bookmark_menu.scss | 2 +- src/icons/_panel.scss | 9 +- src/leptonChrome.scss | 1 + src/others/_findbar_floating_on_top.scss | 2 +- src/tab/_picture_in_picture_tab.scss | 4 +- src/tab/clipped_tab/_pinned_close_button.scss | 2 +- src/tabbar/_on_bottom.scss | 9 +- src/utils/_moz_box.scss | 107 ++++++++++++++++++ 11 files changed, 154 insertions(+), 29 deletions(-) create mode 100644 src/utils/_moz_box.scss diff --git a/css/leptonChrome.css b/css/leptonChrome.css index 2e4c903..4eb71d2 100644 --- a/css/leptonChrome.css +++ b/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 { diff --git a/src/autohide/_fill_urlbar.scss b/src/autohide/_fill_urlbar.scss index b1cca3f..8b26dd4 100644 --- a/src/autohide/_fill_urlbar.scss +++ b/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; } diff --git a/src/combined/_index.scss b/src/combined/_index.scss index 216b4b5..77f1fec 100644 --- a/src/combined/_index.scss +++ b/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"; diff --git a/src/counter/_bookmark_menu.scss b/src/counter/_bookmark_menu.scss index 62359f8..0714b55 100644 --- a/src/counter/_bookmark_menu.scss +++ b/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 { diff --git a/src/icons/_panel.scss b/src/icons/_panel.scss index 254f0a3..172381d 100644 --- a/src/icons/_panel.scss +++ b/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; diff --git a/src/leptonChrome.scss b/src/leptonChrome.scss index 000d72e..ea1aca0 100644 --- a/src/leptonChrome.scss +++ b/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 *; diff --git a/src/others/_findbar_floating_on_top.scss b/src/others/_findbar_floating_on_top.scss index 69a033c..6a07309 100644 --- a/src/others/_findbar_floating_on_top.scss +++ b/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; diff --git a/src/tab/_picture_in_picture_tab.scss b/src/tab/_picture_in_picture_tab.scss index 9ae0581..9bf4b06 100644 --- a/src/tab/_picture_in_picture_tab.scss +++ b/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; diff --git a/src/tab/clipped_tab/_pinned_close_button.scss b/src/tab/clipped_tab/_pinned_close_button.scss index 7f49852..8bcb3b2 100644 --- a/src/tab/clipped_tab/_pinned_close_button.scss +++ b/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; diff --git a/src/tabbar/_on_bottom.scss b/src/tabbar/_on_bottom.scss index b8095b0..489bb49 100644 --- a/src/tabbar/_on_bottom.scss +++ b/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") { diff --git a/src/utils/_moz_box.scss b/src/utils/_moz_box.scss new file mode 100644 index 0000000..87aa276 --- /dev/null +++ b/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; + } +}