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

@@ -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 */

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 */

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 }  
 }

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; }
 }
 

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 }
+}
+