Merge branch 'dev'

src/leptonChrome.scss

@@ -5,6 +5,7 @@
 @use "utils/accent_color" as *;
 @use "utils/native_menu" as *;
 @use "utils/one_liner" as *;
+@use "utils/window_control" as *;
 @use "utils/proton_elements" as Proton;
 @use "sass:selector";
 

src/padding/_tabbar_width.scss

@@ -3,11 +3,21 @@
   --uc-title-pre-spacer: 30px; /* Original: 40px */
   --uc-title-post-spacer: 25px; /* Original: 40px */
 }
-.titlebar-spacer[type="pre-tabs"] {
+@include WindowControl_Left {
-  width: var(--uc-title-pre-spacer) !important;
+  .titlebar-spacer[type="pre-tabs"] {
+    width: var(--uc-title-pre-spacer) !important;
+  }
+  .titlebar-spacer[type="post-tabs"] {
+    width: var(--uc-title-post-spacer) !important;
+  }
 }
-.titlebar-spacer[type="post-tabs"] {
+@include WindowControl_Right {
-  width: var(--uc-title-post-spacer) !important;
+  .titlebar-spacer[type="pre-tabs"] {
+    width: var(--uc-title-post-spacer) !important;
+  }
+  .titlebar-spacer[type="post-tabs"] {
+    width: var(--uc-title-pre-spacer) !important;
+  }
 }
 
 /* Tabbar Buttons */

src/tabbar/layout/_navbar_padding.scss

@@ -2,39 +2,6 @@
 /* Customized https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/window_control_placeholder_support.css */
 
 //-- Mixin ---------------------------------------------------------------------
-@mixin _remove_spacer_pre() {
-  /* Don't need pre spacer */
-  --uc-window-drag-space-pre: 0px;
-}
-
-@mixin _remove_spacer_post() {
-  /* Don't need window control */
-  --uc-window-control-space: 0px;
-}
-
-@mixin _remove_spacer_oneLiner() {
-  @include Option("userChrome.tabbar.one_liner.tabbar_first") {
-    @include OS($win, $linux) {
-      @include _remove_spacer_pre;
-    }
-    @include OS($mac) {
-      @include _remove_spacer_post;
-    }
-    @include Option("userChrome.tabbar.as_titlebar") {
-      #tabbrowser-tabs {
-        @include _remove_spacer_post;
-      }
-    }
-  }
-  @include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
-    @include NotOption("userChrome.tabbar.as_titlebar") {
-      @include OS($win, $linux) {
-        @include _remove_spacer_post;
-      }
-    }
-  }
-}
-
 @mixin _oneLiner_navBar_borderPadding() {
   @include NotOption("userChrome.tabbar.one_liner") {
     @content;
@@ -68,30 +35,11 @@
 
 //------------------------------------------------------------------------------
 
-@include Option("userChrome.tabbar.one_liner") {
-  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
-    @include NotOption("userChrome.tabbar.one_liner.responsive") {
-      @include _remove_spacer_oneLiner;
-    }
-    @include Option("userChrome.tabbar.one_liner.responsive") {
-      @media screen and (max-width: 1100px) {
-        @include NotOption("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
-          @include _remove_spacer_pre;
-          @include _remove_spacer_post;
-        }
-      }
-      @media screen and (min-width: 1100px) {
-        @include _remove_spacer_oneLiner;
-      }
-    }
-  }
-}
-
 #nav-bar {
   border-inline-style: solid !important;
   border-inline-color: transparent;
 
-  @include OS($win, $linux) {
+  @include WindowControl_Right {
     @include _oneLiner_navBar_borderPadding {
       border-inline-start-width: var(--uc-window-drag-space-pre);
       border-inline-end-width: var(--uc-window-control-space);
@@ -110,15 +58,12 @@
   }
 }
 
-/* Use this pref to check Mac OS where window controls are on left */
+@include WindowControl_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 */
+  #nav-bar {
-@include OS($mac) {
-  :root[tabsintitlebar="true"]:not([inFullscreen]) #nav-bar {
     @include _oneLiner_navBar_borderPadding {
       border-inline-start-width: var(--uc-window-control-space);
       border-inline-end-width: var(--uc-window-drag-space-pre);
     }
-
     @include Option("userChrome.tabbar.one_liner") {
       @include _oneLiner_navBar_marginGap {
         @include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
@@ -130,7 +75,8 @@
       }
     }
   }
-  :root[tabsintitlebar="true"]:not([inFullscreen]) #TabsToolbar {
+
+  #TabsToolbar {
     @include Option("userChrome.tabbar.one_liner") {
       @include _oneLiner_navBar_marginGap {
         @include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
@@ -144,6 +90,9 @@
       }
     }
   }
+}
+
+@include OS($mac) {
   :root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container:last-child,
   :root[sizemode="fullscreen"] #window-controls {
     right: unset;

src/tabbar/layout/_window_control.scss

@@ -1,10 +1,51 @@
 /*= Windows Control - Move to toolbar ========================================*/
 /* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
 See the above repository for updates as well as full license text. */
+
+/* Titlebar Button Box */
 :root {
   --uc-titlebar-padding: 0px;
 }
 
+#navigator-toolbox {
+  padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important;
+}
+
+#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
+#TabsToolbar > .titlebar-buttonbox-container {
+  position: fixed;
+  display: block;
+  top: 0;
+  right:0;
+  z-index: 1;
+}
+
+#toolbar-menubar[autohide="true"] {
+  > .titlebar-buttonbox-container {
+    height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px));
+  }
+
+  @include OS($win10) {
+    &[inactive="true"] > > .titlebar-buttonbox-container .titlebar-button {
+      stroke: var(--toolbar-color, currentColor) !important;
+    }
+  }
+}
+
+.titlebar-buttonbox-container > .titlebar-buttonbox {
+  height: 100%;
+  @include OS($mac) {
+    margin-block: 10px;
+  }
+}
+
+@include WindowControl_Left {
+  .titlebar-buttonbox-container{
+    left:0;
+    right: unset !important;
+  }
+}
+
 @include OS($win) {
   :root[sizemode="maximized"][tabsintitlebar] {
     --uc-titlebar-padding: 8px;
@@ -22,50 +63,13 @@ See the above repository for updates as well as full license text. */
   }
 }
 
-#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
-#TabsToolbar > .titlebar-buttonbox-container {
-  position: fixed;
-  display: block;
-  top: 0;
-  right:0;
-  z-index: 1;
-}
-#toolbar-menubar[autohide="true"] {
-  > .titlebar-buttonbox-container {
-    height: var(--uc-titlebar-buttonbox-height, var(--uc-navbar-height, 36px));
-  }
-
-  @include OS($win10) {
-    &[inactive="true"] > > .titlebar-buttonbox-container .titlebar-button {
-      stroke: var(--toolbar-color, currentColor) !important;
-    }
-  }
-}
-
-/* where window controls are on left */
 @include OS($mac) {
-  :root{
-    --uc-titlebar-padding: 0px !important;
-  }
-  .titlebar-buttonbox-container{
-    left:0;
-    right: unset !important;
-  }
-
   #toolbar-menubar:not([autohide="true"]) {
     visibility: visible !important;
     height: 0;
   }
 }
 
-#navigator-toolbox {
-  padding-top: calc(var(--uc-menubar-height, 0px) + var(--uc-titlebar-padding)) !important;
-}
-
-:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container {
-  height: 32px;
-}
-
 #toolbar-menubar[inactive] > .titlebar-buttonbox-container {
   @include NotOption("userChrome.hidden.tabbar") {
     opacity: 0;
@@ -81,6 +85,7 @@ See the above repository for updates as well as full license text. */
     }
   }
 }
+
 #navigator-toolbox:is(:hover, :focus-within) #toolbar-menubar[inactive]:not([customizing]) > .titlebar-buttonbox-container {
   @include Option("userChrome.hidden.tabbar") {
     @include Option("userChrome.autohide.navbar") {
@@ -89,6 +94,7 @@ See the above repository for updates as well as full license text. */
     }
   }
 }
+
 @include Animate {
   #toolbar-menubar[inactive] > .titlebar-buttonbox-container {
     transition: opacity 0.25s var(--animation-easing-function) var(--uc-autohide-toolbar-delay, 600ms),
@@ -99,25 +105,6 @@ See the above repository for updates as well as full license text. */
   }
 }
 
-.titlebar-buttonbox-container > .titlebar-buttonbox {
-  height: 100%;
-  @include OS($mac) {
-    margin-block: 10px;
-  }
-}
-
-/* At Full Screen */
-:root[sizemode="fullscreen"] #window-controls {
-  position: fixed;
-  display: flex;
-  top: 0;
-  right: 0;
-  height: 40px;
-}
-:root[uidensity="compact"][sizemode="fullscreen"] #window-controls {
-  height: 32px;
-}
-
 @include Option("browser.fullscreen.autohide") {
   :root[sizemode="fullscreen"] #navigator-toolbox:not(:hover) .titlebar-buttonbox-container {
     visibility: hidden;

src/tabbar/layout/_window_control_size.scss

@@ -6,8 +6,41 @@
   --uc-window-control-space: calc(var(--uc-window-control-width) + var(--uc-window-drag-space-post));
 }
 
+//-- Mixin ---------------------------------------------------------------------
+@mixin _remove_spacer_pre() {
+  --uc-window-drag-space-pre: 0px; // Don't need pre spacer
+}
+
+@mixin _remove_spacer_post() {
+  --uc-window-control-space: 0px; // Don't need window control
+}
+
+@mixin _remove_spacer_oneLiner() {
+  @include Option("userChrome.tabbar.one_liner.tabbar_first") {
+    @include WindowControl_Right {
+      @include _remove_spacer_pre;
+    }
+    @include WindowControl_Left {
+      @include _remove_spacer_post;
+    }
+    @include Option("userChrome.tabbar.as_titlebar") {
+      #tabbrowser-tabs {
+        @include _remove_spacer_post;
+      }
+    }
+  }
+  @include NotOption("userChrome.tabbar.one_liner.tabbar_first") {
+    @include NotOption("userChrome.tabbar.as_titlebar") {
+      @include WindowControl_Right {
+        @include _remove_spacer_post;
+      }
+    }
+  }
+}
+
+//------------------------------------------------------------------------------
+
 :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
-  --uc-window-control-width: 84px; /* 84px is default value of linux */
   --uc-window-drag-space-pre: var(--uc-title-pre-spacer, 40px); // 30px
   --uc-window-drag-space-post: var(--uc-title-post-spacer, 40px); // 25px
 
@@ -17,16 +50,54 @@
   @include OS($win10) {
     --uc-window-control-width: 138px;
   }
+  @include OS($linux) {
+    $linuxWindowControlWidth: 84px / 3; /* 84px is default value of linux */
+
+    @media (-moz-gtk-csd-minimize-button),
+    (-moz-gtk-csd-maximize-button),
+    (-moz-gtk-csd-close-button) {
+      --uc-window-control-width: #{ $linuxWindowControlWidth };
+    }
+
+    @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button),
+    (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-close-button),
+    (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
+      --uc-window-control-width: #{ $linuxWindowControlWidth * 2 };
+    }
+
+    @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
+      --uc-window-control-width: #{ $linuxWindowControlWidth * 3  };
+    }
+  }
 }
 @include OS($mac) {
   :root[tabsintitlebar] {
     --uc-window-control-width: 72px;
   }
   :root[sizemode="fullscreen"] {
-    --uc-window-control-space: 0;
+    @include _remove_spacer_post;
   }
 }
 
 :root:is([tabsintitlebar][sizemode="maximized"], [sizemode="fullscreen"]) {
-  --uc-window-drag-space-pre: 0px; /* Remove pre space */
+  @include _remove_spacer_pre;
+}
+
+@include Option("userChrome.tabbar.one_liner") {
+  :root:is([tabsintitlebar], [sizemode="fullscreen"]) {
+    @include NotOption("userChrome.tabbar.one_liner.responsive") {
+      @include _remove_spacer_oneLiner;
+    }
+    @include Option("userChrome.tabbar.one_liner.responsive") {
+      @media screen and (max-width: 1100px) {
+        @include NotOption("userChrome.tabbar.on_bottom", "userChrome.hidden.tabbar") {
+          @include _remove_spacer_pre;
+          @include _remove_spacer_post;
+        }
+      }
+      @media screen and (min-width: 1100px) {
+        @include _remove_spacer_oneLiner;
+      }
+    }
+  }
 }

src/utils/_window_control.scss

@@ -0,0 +1,23 @@
+@use "os" as *;
+
+@mixin WindowControl_Right() {
+  @include OS($win) {
+    @content;
+  }
+  @include OS($linux) {
+    @media (-moz-gtk-csd-reversed-placement: 0) {
+      @content;
+    }
+  }
+}
+
+@mixin WindowControl_Left() {
+  @include OS($mac) {
+    @content;
+  }
+  @include OS($linux) {
+    @media (-moz-gtk-csd-reversed-placement) {
+      @content;
+    }
+  }
+}