add new tweak: hide tabs bar

bmFtZQ · Nov 23, 2023 · 6c1efa7 · 6c1efa7
1 parent d841457
commit 6c1efa7
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -53,6 +53,13 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse
 | -------------------------- |
 | `uc.tweak.rounded-corners` |
 
+| Hide Tabs Bar (Useful when using vertical tabs extensions such as Sidebery, Tree Style Tab, etc.) |
+| ------------------------------------------------------------------------------------------------- |
+| **NOTE: At the moment, this only supports macOS and Windows.**                                    |
+| `uc.tweak.hide-tabs-bar`                                                                          |
+| **OPTIONAL: Only enable in fullscreen mode (currently: macOS Only!)**                             |
+| `uc.tweak.hide-tabs-bar.only-when-maximised`                                                      |
+
 | Use background image on newtab page                                                                |
 | -------------------------------------------------------------------------------------------------- |
 | **SETUP: Add an image named `background-0.(jpg/png)` to the `chrome` folder.**                     |

diff --git a/chrome/global/browser.css b/chrome/global/browser.css
@@ -26,9 +26,9 @@
 
   :root {
     --uc-tweak-rounded-corners-padding: 3px;
-    --uc-tweak-rounded-corners-border: 1px;
+    --uc-tweak-rounded-corners-border: 1px solid rgb(0 0 0 / .05);
     --uc-tweak-rounded-corners-radius: 8px;
-    --uc-tweak-rounded-corners-shadow: 0px 1px 2px rgb(0 0 0 / .1);
+    --uc-tweak-rounded-corners-shadow: 0px 1px 1px rgb(0 0 0 / .1);
 
     & #browser:not([style*="--sidebar-border-color"]) {
       --sidebar-border-color: light-dark(#bfbfbf80, #595959) !important;
@@ -39,28 +39,28 @@
   :root[inFullscreen] #navigator-toolbox:where([style*="margin-top"], [fullscreenShouldAnimate]) + #browser,
   :root[inDOMFullscreen] #browser {
     --uc-tweak-rounded-corners-padding: 0;
-    --uc-tweak-rounded-corners-border: 0;
+    --uc-tweak-rounded-corners-border: none;
     --uc-tweak-rounded-corners-radius: 0;
     --uc-tweak-rounded-corners-shadow: none;
   }
 
   #appcontent {
-    margin-inline: var(--uc-tweak-rounded-corners-padding);
-    margin-block-end: var(--uc-tweak-rounded-corners-padding);
-    border-radius: var(--uc-tweak-rounded-corners-radius);
-    overflow: hidden;
-    border: var(--uc-tweak-rounded-corners-border) solid rgb(0 0 0 / .1);
-    box-shadow: var(--uc-tweak-rounded-corners-shadow);
+    margin-inline: var(--uc-tweak-rounded-corners-padding) !important;
+    margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
+    border-radius: var(--uc-tweak-rounded-corners-radius) !important;
+    overflow: hidden !important;
+    border: var(--uc-tweak-rounded-corners-border) !important;
+    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
   }
-
-
+
   /* apply rounded corners to sidebar */
   #sidebar-box {
     margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
     margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
     border-radius: var(--uc-tweak-rounded-corners-radius) !important;
     overflow: hidden !important;
-    border: var(--uc-tweak-rounded-corners-border) solid rgb(0 0 0 / .1);
+    border: var(--uc-tweak-rounded-corners-border) !important;
+    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
 
     &[positionend] {
       margin-inline-start: 0 !important;

diff --git a/chrome/global/popup.css b/chrome/global/popup.css
@@ -403,7 +403,7 @@ panelview .toolbarbutton-1,
   panel[type="autocomplete-richlistbox"]>.autocomplete-richlistbox,
   .menupopup-arrowscrollbox {
     background: var(--arrowpanel-background) !important;
-    border: 1px solid var(--panel-separator-color) !important;
+    border: 1px solid light-dark(transparent, var(--panel-separator-color)) !important;
   }
 
   /* make room for menu shadow */

diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css
@@ -2,7 +2,7 @@
 
 /* disable drag space above tabs */
 @media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
-  :root #titlebar {
+  :root {
     --tab-block-margin: 0px !important;
   }
 }
@@ -85,17 +85,17 @@ bugs with certain themes eg. dark text on dark background.) */
 
   /* adjust spacing of area above tabs */
   @media not (-moz-platform: macos) {
-    :root[sizemode="maximized"] #titlebar {
+    :root[sizemode="maximized"] {
       --tab-block-margin: 4px !important;
     }
   }
 
-  :root:is([inFullscreen], :not([tabsintitlebar])) #titlebar {
+  :root:is([inFullscreen], :not([tabsintitlebar])) {
     --tab-block-margin: 4px !important;
   }
 
   @media (-moz-bool-pref: "uc.tweak.disable-drag-space") {
-    :root #titlebar {
+    :root {
       --tab-block-margin: 4px !important;
     }
   }
@@ -212,3 +212,92 @@ bugs with certain themes eg. dark text on dark background.) */
     display: flex !important;
   }
 }
+
+@media (-moz-bool-pref: "uc.tweak.hide-tabs-bar") {
+  :root:not([customizing]) {
+    /* Height of navbar, used for determining height and position of window controls */
+    --uc-navbar-height: 38px;
+    /* Drag space next to the window controls, allows you to move the window more easily */
+    --uc-titlebar-drag-space: 40px;
+
+    @media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.only-when-maximised") {
+      /* Set containing block for the window buttons */
+      & #titlebar {
+        position: relative !important;
+      }
+
+      /* Hide the tabs */
+      & #TabsToolbar {
+        visibility: collapse !important;
+        padding-inline-start: 0 !important;
+      }
+
+      /* Add some padding to the top of the navbar */
+      & #nav-bar {
+        padding-top: var(--tab-block-margin) !important;
+      }
+    }
+
+    /* macOS specific positioning */
+    @media (-moz-platform: macos) {
+      &[inFullscreen] {
+        /* Hide the tabs */
+        & #TabsToolbar {
+          visibility: collapse !important;
+          padding-inline-start: 0 !important;
+        }
+      }
+
+      @media not (-moz-bool-pref: "uc.tweak.hide-tabs-bar.only-when-maximised") {
+        /* Offset navbar contents to make space for the window controls */
+        &[tabsintitlebar] #nav-bar:not([inFullscreen]) {
+          padding-left: calc(84px + var(--uc-titlebar-drag-space));
+
+          /* 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 {
+          --uc-position: calc((var(--uc-navbar-height) + var(--tab-block-margin)) / 2 - 8px);
+          visibility: visible !important;
+          position: absolute;
+          top: var(--uc-position);
+          left: var(--uc-position);
+          margin: 0 !important;
+        }
+      }
+    }
+
+    /* Windows specific positioning */
+    @media (-moz-platform: windows) {
+      /* Offset navbar contents to make space for the window controls */
+      &:where([inFullscreen], [tabsintitlebar]) #nav-bar {
+        padding-right: calc(140px + var(--uc-titlebar-drag-space));
+
+        /* Remove the padding from the side of the navbar */
+        & #PanelUI-menu-button {
+          padding-inline-end: 0 !important;
+        }
+      }
+
+      /* Positioning of the window controls */
+      & #toolbar-menubar[inactive] + #TabsToolbar .titlebar-buttonbox {
+        visibility: visible !important;
+        position: absolute !important;
+        top: 0;
+        right: 0;
+        height: calc(var(--uc-navbar-height) + var(--tab-block-margin)) !important;
+      }
+
+      /* Set background colour of the menu bar to maintain consistency with the navbar */
+      @media not (-moz-bool-pref: "uc.tweak.floating-tabs") {
+        #toolbar-menubar {
+          background-color: var(--toolbar-bgcolor) !important;
+        }
+      }
+    }
+  }
+}
diff --git a/chrome/toolbar/tabbar.css b/chrome/toolbar/tabbar.css
@@ -1,29 +1,25 @@
 /* Edge-Frfox - tabbar.css */
 
-@media (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin") and (-moz-bool-pref: "uc.tweak.floating-tabs") {
-  :root #titlebar {
-    --tab-block-margin: 5px !important;
+:root {
+  --tab-block-margin: 8px !important;
+
+  & #titlebar {
+    --tab-min-height: 32px !important;
+    --inline-tab-padding: 11px !important;
+    --tab-border-radius: 8px !important;
+
+    --uc-toolbarbutton-inner-padding: 6px !important;
+    --toolbarbutton-border-radius: 4px !important;
+    --toolbarbutton-tabsline-border-radius: 8px !important;
+    --tabs-navbar-shadow-size: 0 !important;
+    --tab-shadow-max-size: 0 !important;
   }
-}
 
-@media (not (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin")) or (not (-moz-bool-pref: "uc.tweak.floating-tabs")) {
-  :root #titlebar {
-    --tab-block-margin: 8px !important;
+  @media (-moz-bool-pref: "uc.tweak.floating-tabs.equal-margin") and (-moz-bool-pref: "uc.tweak.floating-tabs") {
+    --tab-block-margin: 5px !important;
   }
 }
 
-:root #titlebar {
-  --tab-min-height: 32px !important;
-  --inline-tab-padding: 11px !important;
-  --tab-border-radius: 8px !important;
-
-  --uc-toolbarbutton-inner-padding: 6px !important;
-  --toolbarbutton-border-radius: 4px !important;
-  --toolbarbutton-tabsline-border-radius: 8px !important;
-  --tabs-navbar-shadow-size: 0 !important;
-  --tab-shadow-max-size: 0 !important;
-}
-
 /* tab open/close transition */
 .tabbrowser-tab:not([pinned]) {
   transition-property: min-width, max-width !important;
@@ -37,13 +33,13 @@
   transition: transform 200ms cubic-bezier(0, .75, .25, 1) !important;
 }
 
-:root:is([inFullscreen], :not([tabsintitlebar])) #titlebar {
+:root:is([inFullscreen], :not([tabsintitlebar])) {
   --tab-block-margin: 0px !important;
 }
 
 /* hide space above tabs when maximised for non-macOS versions of Firefox */
 @media not (-moz-platform: macos) {
-  :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]) #titlebar,
+  :root:is([inFullscreen], :not([tabsintitlebar]), [sizemode="maximized"]),
   #toolbar-menubar:not([inactive])+#TabsToolbar {
     --tab-block-margin: 0px !important;
   }