Improve hide tabs toolbar tweak

Now the hide tabs toolbar tweak is only applied when a vertical tabs sidebar extension is active, this requires the :has() selector.
bmFtZQ · Jan 17, 2024 · bc13b59 · bc13b59
1 parent a0e0889
commit bc13b59
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -55,17 +55,13 @@ redesign of Edge.
 ---
 
 ### Hide tabs toolbar
-This hides the tabs toolbar, useful for when using vertical tab addons such as
+This hides the tabs toolbar when using a vertical tabs extension such as
 Sidebery, Tree Style Tab or Tab Center Reborn.
 
 **Note: Only works on Windows or macOS.**
 
 `uc.tweak.hide-tabs-bar`
 
-**Optional: Only enable when in fullscreen mode (macOS only).**
-
-`uc.tweak.hide-tabs-bar.only-when-maximised`
-
 ---
 
 ### Remove extra space at the top of the window
@@ -166,6 +162,15 @@ Disable the custom Edge-themed context menu and use the default Firefox menus.
 
 ---
 
+### Use system accent colours
+Uses the system titlebar colours for the tabs toolbar, this can be useful if you
+use the Windows option: 'Show accent colour on title bars and windows borders',
+as the Firefox titlebar will match other windows.
+
+`uc.tweak.colors.system-accent-color`
+
+---
+
 ## Acknowledgements
 [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox)
 

diff --git a/chrome/tweaks/hide-tabs-bar.css b/chrome/tweaks/hide-tabs-bar.css
@@ -1,56 +1,52 @@
 /* Edge-Frfox - tweaks/hide-tabs-bar.css
  * https://github.com/bmFtZQ/edge-frfox */
 
-:root:not([customizing]) {
+/* Only hide the tabs toolbar if one of the following sidebar extensions is
+ * active: */
+/* Sidebery */
+:root:not([customizing]):has(#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not([hidden])),
+/* Tree Style Tab */
+:root:not([customizing]):has(#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:not([hidden])),
+/* Tab Center Reborn */
+:root:not([customizing]):has(#sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"]:not([hidden])) {
   /* 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") {
-    /* Hide the tabs */
-    & #TabsToolbar {
-      visibility: collapse !important;
-    }
+  /* Hide the tabs */
+  & #TabsToolbar {
+    visibility: collapse !important;
+  }
 
-    /* Add some padding to the top of the navbar */
-    &[tabsintitlebar] #nav-bar {
-      padding-top: var(--uc-tab-top-margin, 0) !important;
-    }
+  /* Add some padding to the top of the navbar */
+  &[tabsintitlebar] #nav-bar {
+    padding-top: var(--uc-tab-top-margin, 0) !important;
   }
 
   /* macOS specific positioning */
   @media (-moz-platform: macos) {
-    &[inFullscreen] {
-      /* Hide the tabs */
-      & #TabsToolbar {
-        visibility: collapse !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(70px + var(--uc-titlebar-drag-space)) !important;
+    /* Offset navbar contents to make space for the window controls */
+    &[tabsintitlebar] #nav-bar:not([inFullscreen]) {
+      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;
-        }
+      /* 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;
+    /* 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;
-        }
+      & .titlebar-buttonbox {
+        margin-inline: calc((var(--uc-navbar-height) + var(--uc-tab-top-margin, 0px) - 14px) / 2) !important;
       }
     }
   }

diff --git a/user.js b/user.js
@@ -10,3 +10,5 @@ user_pref("svg.context-properties.content.enabled", true);
 user_pref("layout.css.color-mix.enabled", true);
 // Allows theme to use different colours for light/dark mode.
 user_pref("layout.css.light-dark.enabled", true);
+// Enables the CSS :has() selector, required for hide tabs toolbar tweak.
+user_pref("layout.css.has-selector.enabled", true);