From 95fbda27109fc108d3bcad51a6d634728452aa1e Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Fri, 23 Dec 2022 13:53:51 +0200 Subject: [PATCH] Improve support for gtk-csd-reversed-placement This patch changes how we deal with window control buttons on left layouts. Previously, we looked to a pref that was only set on macos but with this patch we use media queries to detect whether the system is macOS or gtk-csd buttons use left-side layout. To support old-style "override pref" this patch also introduces a new custom pref userchrome.force-window-controls-on-left.enabled which can be used e.g on Windows to move window controls to left side. This logic is currently only supported in styles that use window_control_placeholder_support.css --- chrome/navbar_tabs_oneliner.css | 26 +++++++++++++---- chrome/navbar_tabs_responsive_oneliner.css | 26 +++++++++++++---- chrome/overlay_menubar.css | 4 +-- chrome/tabs_on_bottom.css | 7 +++-- chrome/window_control_placeholder_support.css | 29 ++++++++++++++----- 5 files changed, 68 insertions(+), 24 deletions(-) diff --git a/chrome/navbar_tabs_oneliner.css b/chrome/navbar_tabs_oneliner.css index 932c931..13eae49 100644 --- a/chrome/navbar_tabs_oneliner.css +++ b/chrome/navbar_tabs_oneliner.css @@ -8,7 +8,9 @@ See the above repository for updates as well as full license text. */ /* urlbar_popup_full_width.css is VERY MUCH recommended for Firefox 71+ because of new urlbar popup */ - +:root[tabsintitlebar][sizemode="normal"]{ + --uc-window-drag-space-width: 24px; +} :root[uidensity="compact"]{ --tab-block-margin: 2px !important; } @@ -51,12 +53,24 @@ urlbar_popup_full_width.css is VERY MUCH recommended for Firefox 71+ because of } /* Window drag space */ -:root[tabsintitlebar="true"] #nav-bar{ padding-left: 24px !important } +:root[tabsintitlebar="true"] #nav-bar{ padding-left: var(--uc-window-drag-space-width) !important } -/* Rules specific to window controls on right layout */ -@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ - .titlebar-buttonbox-container{ position: fixed; display: block; left: 0px; z-index: 3; } - :root[tabsintitlebar="true"] #nav-bar{ padding-left: 96px !important; padding-right: 0px !important; } +/* Rules for window controls on left layout */ + +@media (-moz-gtk-csd-reversed-placement), + (-moz-platform: macos){ + .titlebar-buttonbox-container{ + position: fixed; + display: flex; + left: 0px; + z-index: 3; + height: var(--uc-toolbar-height); + align-items: center + } + :root[tabsintitlebar="true"] #nav-bar{ padding-inline: calc(var(--uc-window-drag-space-width,0px) + 84px) 0px !important; } +} +@media (-moz-platform: macos){ + :root[tabsintitlebar="true"] #nav-bar{ padding-inline: calc(var(--uc-window-drag-space-width,0px) + 72px) 0px !important; } } /* 1px margin on touch density causes tabs to be too high */ diff --git a/chrome/navbar_tabs_responsive_oneliner.css b/chrome/navbar_tabs_responsive_oneliner.css index 53b4235..8c9bed9 100644 --- a/chrome/navbar_tabs_responsive_oneliner.css +++ b/chrome/navbar_tabs_responsive_oneliner.css @@ -11,7 +11,9 @@ See the above repository for updates as well as full license text. */ /* Modify it to suit your needs */ @media screen and (min-width: 1100px){ - + :root[tabsintitlebar][sizemode="normal"]{ + --uc-window-drag-space-width: 24px; + } :root[uidensity="compact"]{ --tab-block-margin: 2px !important; } @@ -53,12 +55,24 @@ See the above repository for updates as well as full license text. */ } /* Window drag space */ - :root[tabsintitlebar="true"] #nav-bar{ padding-left: 24px !important } + :root[tabsintitlebar="true"] #nav-bar{ padding-left: var(--uc-window-drag-space-width) !important } -/* Rules specific to window controls on right layout */ - @supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ - .titlebar-buttonbox-container{ position: fixed; display: block; left: 0px; z-index: 3; } - :root[tabsintitlebar="true"] #nav-bar{ padding-left: 96px !important; padding-right: 0px !important; } + /* Rules for window controls on left layout */ + + @media (-moz-gtk-csd-reversed-placement), + (-moz-platform: macos){ + .titlebar-buttonbox-container{ + position: fixed; + display: flex; + left: 0px; + z-index: 3; + height: var(--uc-toolbar-height); + align-items: center + } + :root[tabsintitlebar="true"] #nav-bar{ padding-inline: calc(var(--uc-window-drag-space-width,0px) + 84px) 0px !important; } + } + @media (-moz-platform: macos){ + :root[tabsintitlebar="true"] #nav-bar{ padding-inline: calc(var(--uc-window-drag-space-width,0px) + 72px) 0px !important; } } /* 1px margin on touch density causes tabs to be too high */ diff --git a/chrome/overlay_menubar.css b/chrome/overlay_menubar.css index 7e6547e..8cad109 100644 --- a/chrome/overlay_menubar.css +++ b/chrome/overlay_menubar.css @@ -32,6 +32,6 @@ See the above repository for updates as well as full license text. */ background-image: linear-gradient(to right, var(--arrowpanel-background) 30%, transparent); } -@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ +@media (-moz-gtk-csd-reversed-placement){ #toolbar-menubar[autohide="true"]:not([inactive]) > .titlebar-buttonbox-container{ display: none } -} \ No newline at end of file +} diff --git a/chrome/tabs_on_bottom.css b/chrome/tabs_on_bottom.css index 11da065..7e37827 100644 --- a/chrome/tabs_on_bottom.css +++ b/chrome/tabs_on_bottom.css @@ -23,8 +23,11 @@ linux_gtk_window_control_patch.css right:0; height: 40px; } -/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */ -@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ +@media (-moz-gtk-csd-reversed-placement), + (-moz-platform: macos){ + .titlebar-buttonbox-container{ left:0; right: unset !important; } +} +@supports -moz-bool-pref("userchrome.window-controls-on-left.enabled"){ .titlebar-buttonbox-container{ left:0; right: unset !important; } } diff --git a/chrome/window_control_placeholder_support.css b/chrome/window_control_placeholder_support.css index bc45d11..3a78051 100644 --- a/chrome/window_control_placeholder_support.css +++ b/chrome/window_control_placeholder_support.css @@ -35,8 +35,12 @@ See the above repository for updates as well as full license text. */ --uc-window-control-width: 84px; } } +@media (-moz-platform: macos){ + :root:is([tabsintitlebar],[sizemode="fullscreen"]) { + --uc-window-control-width: 72px; + } +} -/* macOS settings are further below */ .titlebar-buttonbox, #window-controls{ color: var(--toolbar-color) } :root[sizemode="fullscreen"] .titlebar-buttonbox-container{ display: none } :root[sizemode="fullscreen"] #navigator-toolbox { position: relative; } @@ -59,15 +63,24 @@ See the above repository for updates as well as full license text. */ border-right-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)); } -/* Use this pref to check Mac OS where window controls are on left */ -/* This pref defaults to true on Mac and doesn't actually do anything on other platforms. So if your system has window controls on LEFT side you can set the pref to true */ -@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){ - :root:is([tabsintitlebar], [sizemode="fullscreen"]) { - --uc-window-control-width: 72px; - } - :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar{ +/* Rules for window controls on left layout */ +@media (-moz-gtk-csd-reversed-placement), + (-moz-platform: macos){ + :root[tabsintitlebar="true"] #nav-bar{ border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px) } :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child, :root[sizemode="fullscreen"] #window-controls{ right: unset } } + +/* This pref can be used to force window controls on left even if that is not normal behavior on your OS */ +@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){ + :root[tabsintitlebar="true"] #nav-bar{ + border-inline-width: calc(var(--uc-window-control-width,0px) + var(--uc-window-drag-space-post,0px)) var(--uc-window-drag-space-pre,0px) + } + :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 } +} +