Add hide controls option for hide-tabs-bar #144

Add the option for hiding the window controls when using the hide-tabs-bar tweak: `uc.tweak.hide-tabs-bar.no-window-controls`. This can be enabled on its own or along with the existing tweak.
bmFtZQ · Jul 10, 2024 · 4b8b32f · 4b8b32f
1 parent a68220f
commit 4b8b32f
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 96 deletions.
diff --git a/README.md b/README.md
@@ -60,6 +60,10 @@ Sidebery, Tree Style Tab or Tab Center Reborn.
 
 `uc.tweak.hide-tabs-bar`
 
+Optionally, the window controls can be hidden from the navbar by using:
+
+`uc.tweak.hide-tabs-bar.no-window-controls`
+
 ---
 
 ### Sidebery Theme

diff --git a/chrome/tweaks/hide-tabs-bar.css b/chrome/tweaks/hide-tabs-bar.css
@@ -4,7 +4,8 @@
 /*
   MARK: Hide tabs toolbar
 */
-@media (-moz-bool-pref: "uc.tweak.hide-tabs-bar") {
+@media (-moz-bool-pref: "uc.tweak.hide-tabs-bar"),
+(-moz-bool-pref: "uc.tweak.hide-tabs-bar.no-window-controls") {
   /* Only hide the tabs toolbar if one of the following sidebar extensions is
    * active: Sidebery, Tree Style Tab, or Tab Center Reborn. */
   :root:not([customizing]):has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])),
@@ -44,119 +45,122 @@
       visibility: collapse !important;
     }
 
-    /*
-      MARK: macOS styles
-    */
-    @media (-moz-platform: macos) {
-      /* Offset navbar contents to make space for the window controls */
-      &[tabsintitlebar]:not([inFullscreen]) #nav-bar {
-        padding-left: calc(70px + var(--uc-titlebar-drag-space)) !important;
-
-        /* Remove the padding from the side of the navbar */
-        #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
-          padding-inline-start: 0 !important;
+    /* Disable the replacement window controls if tweak is enabled. */
+    @media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.no-window-controls") {
+      /*
+        MARK: macOS styles
+      */
+      @media (-moz-platform: macos) {
+        /* Offset navbar contents to make space for the window controls */
+        &[tabsintitlebar]:not([inFullscreen]) #nav-bar {
+          padding-left: calc(70px + var(--uc-titlebar-drag-space)) !important;
+
+          /* Remove the padding from the side of the navbar */
+          #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
+            padding-inline-start: 0 !important;
+          }
         }
-      }
 
-      /* Positioning of the window controls */
-      #TabsToolbar .titlebar-buttonbox-container {
-        visibility: visible !important;
-        position: fixed !important;
-        height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px));
-        margin: 0 !important;
-        top: 0;
-        left: 0;
-
-        .titlebar-buttonbox {
-          margin-inline: calc((var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px) - 14px) / 2) !important;
+        /* Positioning of the window controls */
+        #TabsToolbar .titlebar-buttonbox-container {
+          visibility: visible !important;
+          position: fixed !important;
+          height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px));
+          margin: 0 !important;
+          top: 0;
+          left: 0;
+
+          .titlebar-buttonbox {
+            margin-inline: calc((var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px) - 14px) / 2) !important;
+          }
         }
       }
-    }
 
-    /*
-      MARK: Windows styles
-    */
-    @media (-moz-platform: windows) {
-      /* Offset navbar contents to make space for the window controls */
-      &:where([inFullscreen], [tabsintitlebar]) #nav-bar {
-        padding-inline-end: calc(140px + var(--uc-titlebar-drag-space)) !important;
-
-        /* Remove the padding from the side of the navbar */
-        #PanelUI-menu-button {
-          padding-inline-end: 0 !important;
+      /*
+        MARK: Windows styles
+      */
+      @media (-moz-platform: windows) {
+        /* Offset navbar contents to make space for the window controls */
+        &:where([inFullscreen], [tabsintitlebar]) #nav-bar {
+          padding-inline-end: calc(140px + var(--uc-titlebar-drag-space)) !important;
+
+          /* Remove the padding from the side of the navbar */
+          #PanelUI-menu-button {
+            padding-inline-end: 0 !important;
+          }
         }
-      }
 
-      /* Positioning of the window controls */
-      :where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox {
-        visibility: visible !important;
-        position: fixed !important;
-        top: 0;
-        inset-inline-end: 0;
-        height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0)) !important;
-        z-index: 100 !important;
-        color: var(--toolbar-color) !important;
+        /* Positioning of the window controls */
+        :where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox {
+          visibility: visible !important;
+          position: fixed !important;
+          top: 0;
+          inset-inline-end: 0;
+          height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0)) !important;
+          z-index: 100 !important;
+          color: var(--toolbar-color) !important;
+        }
       }
-    }
 
-    /*
-      MARK: Linux/GTK styles
-    */
-    @media (-moz-gtk-csd-minimize-button),
-    (-moz-gtk-csd-maximize-button),
-    (-moz-gtk-csd-close-button) {
-      /* Width of single window control button. */
-      --uc-window-control-btn: 34px;
-
-      /* Navbar space reserved for one button. */
-      --uc-window-controls-width: var(--uc-window-control-btn);
-
-      /* Navbar space reserved for two buttons. */
-      @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-controls-width: calc(var(--uc-window-control-btn) * 2);
-      }
+      /*
+        MARK: Linux/GTK styles
+      */
+      @media (-moz-gtk-csd-minimize-button),
+      (-moz-gtk-csd-maximize-button),
+      (-moz-gtk-csd-close-button) {
+        /* Width of single window control button. */
+        --uc-window-control-btn: 34px;
+
+        /* Navbar space reserved for one button. */
+        --uc-window-controls-width: var(--uc-window-control-btn);
+
+        /* Navbar space reserved for two buttons. */
+        @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-controls-width: calc(var(--uc-window-control-btn) * 2);
+        }
 
-      /* Navbar space reserved for three buttons. */
-      @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
-        --uc-window-controls-width: calc(var(--uc-window-control-btn) * 3);
-      }
+        /* Navbar space reserved for three buttons. */
+        @media (-moz-gtk-csd-minimize-button) and (-moz-gtk-csd-maximize-button) and (-moz-gtk-csd-close-button) {
+          --uc-window-controls-width: calc(var(--uc-window-control-btn) * 3);
+        }
 
-      /* Offset navbar contents to make space for the window controls */
-      &:where([inFullscreen], [tabsintitlebar]) #nav-bar {
-        /* Window controls on the right. */
-        @media not (-moz-gtk-csd-reversed-placement) {
-          padding-inline-end: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important;
+        /* Offset navbar contents to make space for the window controls */
+        &:where([inFullscreen], [tabsintitlebar]) #nav-bar {
+          /* Window controls on the right. */
+          @media not (-moz-gtk-csd-reversed-placement) {
+            padding-inline-end: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important;
 
-          /* Remove the padding from the side of the navbar */
-          #PanelUI-menu-button {
-            padding-inline-end: 0 !important;
+            /* Remove the padding from the side of the navbar */
+            #PanelUI-menu-button {
+              padding-inline-end: 0 !important;
+            }
           }
-        }
 
-        /* Window controls on the left. */
-        @media (-moz-gtk-csd-reversed-placement) {
-          padding-inline-start: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important;
+          /* Window controls on the left. */
+          @media (-moz-gtk-csd-reversed-placement) {
+            padding-inline-start: calc(var(--uc-window-controls-width, 0px) + var(--uc-titlebar-drag-space)) !important;
 
-          /* Remove the padding from the side of the navbar */
-          #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
-            padding-inline-start: 0 !important;
+            /* Remove the padding from the side of the navbar */
+            #nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child {
+              padding-inline-start: 0 !important;
+            }
           }
         }
-      }
 
-      /* Positioning of the window controls */
-      :where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox {
-        visibility: visible !important;
-        position: fixed !important;
-        top: 0;
-        height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0)) !important;
-        z-index: 100 !important;
-        inset-inline: auto 0;
-
-        @media (-moz-gtk-csd-reversed-placement) {
-          inset-inline: 0 auto !important;
+        /* Positioning of the window controls */
+        :where(#toolbar-menubar[inactive]) + #TabsToolbar .titlebar-buttonbox {
+          visibility: visible !important;
+          position: fixed !important;
+          top: 0;
+          height: calc(var(--uc-navbar-height) + var(--uc-tab-top-margin, 0)) !important;
+          z-index: 100 !important;
+          inset-inline: auto 0;
+
+          @media (-moz-gtk-csd-reversed-placement) {
+            inset-inline: 0 auto !important;
+          }
         }
       }
     }