From 1c40b3e9f976a5c098778793a862107f5963ba5f Mon Sep 17 00:00:00 2001
From: Akshay Nair <phenax5@gmail.com>
Date: Wed, 30 Oct 2024 18:27:24 +0530
Subject: firefox tab style changes for vertical tabs

---
 .../firefox.home/chrome/globalKeybindings.uc.js    | 33 +++++-----
 modules/firefox.home/chrome/userChrome.css         | 73 ++++++++++++++--------
 2 files changed, 67 insertions(+), 39 deletions(-)

(limited to 'modules/firefox.home/chrome')

diff --git a/modules/firefox.home/chrome/globalKeybindings.uc.js b/modules/firefox.home/chrome/globalKeybindings.uc.js
index cd6a420..0544bb8 100644
--- a/modules/firefox.home/chrome/globalKeybindings.uc.js
+++ b/modules/firefox.home/chrome/globalKeybindings.uc.js
@@ -43,23 +43,28 @@
   const togglePassthrough = () => () => UC.globalKeybindings.updateMode(m => m !== MODE_PASSTHRU ? MODE_PASSTHRU : MODE_NORMAL)
 
   const sidetabs = {
-    getExtensionId: () => {
-      return [...SidebarController.sidebars].find(([_, p]) => p.label?.match(/sidetabs/i))?.[0];
-    },
+    // getExtensionId: () => {
+    //   return [...SidebarController.sidebars].find(([_, p]) => p.label?.match(/sidetabs/i))?.[0];
+    // },
     ensureReady: async () => {
-      for (let i = 0; i < 3; i++) {
-        if (sidetabs.getExtensionId()) {
-          return !SidebarController.isOpen && SidebarController.show(sidetabs.getExtensionId() ?? undefined)
-        } else {
-          console.log('sidebar retry...');
-          await new Promise(res => setTimeout(res), 100);
-        }
-      }
+      // Hide sidebar
+      SidebarController.hide();
+      // Close by default
+      SidebarController.toggleExpanded(false);
+      // for (let i = 0; i < 3; i++) {
+      //   if (sidetabs.getExtensionId()) {
+      //     return !SidebarController.isOpen && SidebarController.show(sidetabs.getExtensionId() ?? undefined)
+      //   } else {
+      //     console.log('sidebar retry...');
+      //     await new Promise(res => setTimeout(res), 100);
+      //   }
+      // }
     },
     toggle: () => async () => {
-      await sidetabs.ensureReady();
-      const sidebar = document.getElementById('sidebar-box');
-      sidebar?.classList.toggle('open');
+      SidebarController.toggleExpanded();
+      // await sidetabs.ensureReady();
+      // const sidebar = document.getElementById('sidebar-box');
+      // sidebar?.classList.toggle('open');
     },
   }
 
diff --git a/modules/firefox.home/chrome/userChrome.css b/modules/firefox.home/chrome/userChrome.css
index 7b647f6..8e057df 100644
--- a/modules/firefox.home/chrome/userChrome.css
+++ b/modules/firefox.home/chrome/userChrome.css
@@ -101,11 +101,15 @@ toolbarbutton#alltabs-button {
 #nav-bar {
   border-top: none !important;
   background-color: var(--toolbar-bgcolor) !important;
-  padding: 4px 2px !important;
+  padding: 6px 2px 3px !important;
+}
+#TabsToolbar {
+  visibility: collapse !important;
 }
 
 #urlbar-container {
   min-height: var(--ff-urlbar-height) !important;
+  --urlbar-container-height: unset !important;
 }
 
 #urlbar {
@@ -123,6 +127,8 @@ toolbarbutton#alltabs-button {
   border-color: transparent !important;
   min-height: 0 !important;
   padding-inline: 0 !important;
+  padding-block: 0 !important;
+  height: var(--ff-urlbar-height) !important;
 }
 
 #urlbar[breakout-extend] .urlbar-input-container {
@@ -140,35 +146,21 @@ toolbarbutton#alltabs-button {
 
 
 /* Sidebar + tab */
-#TabsToolbar {
-	visibility: collapse !important;
-}
-#sidebar-header {
-	display: none !important;
-}
-#sidebar-splitter {
-  display: none !important;
+#sidebar-main {
+  background: var(--ff-bg-color) !important;
 }
 #sidebar-box {
- --sidebar-hover-width: 36px;
- display: grid !important;
- min-width: var(--sidebar-hover-width) !important;
- max-width: var(--sidebar-hover-width) !important;
- overflow: visible !important;
- height: 100% !important;
- min-height: 100% !important;
- max-height: 100% !important;
+  background: var(--ff-bg-color) !important;
+  margin: 3px 0 !important;
 }
 #sidebar {
- height: 100% !important;
- width: 100% !important;
- min-width: 0 !important;
+  background: var(--ff-bg-color-2) !important;
 }
-#sidebar-box.open {
- --sidebar-visible-width: 240px;
- width: var(--sidebar-visible-width) !important;
- min-width: var(--sidebar-visible-width) !important;
- max-width: var(--sidebar-visible-width) !important;
+
+#tabbrowser-tabbox {
+  border-radius: 6px !important;
+  overflow: hidden !important;
+  margin: 4px !important;
 }
 
 
@@ -228,4 +220,35 @@ toolbarbutton#alltabs-button {
 #main-window[privatebrowsingmode="temporary"] #browser {
   background-color: var(--ff-bg-private) !important;
 }
+#main-window[privatebrowsingmode="temporary"] #sidebar-main {
+  background: var(--ff-bg-private) !important;
+}
+#main-window[privatebrowsingmode="temporary"] #sidebar-box {
+  background: var(--ff-bg-private) !important;
+}
+
+
+/* Tab counter */
+#tabbrowser-tabs {
+  counter-reset: section;
+}
 
+.tabbrowser-tab::before {
+  counter-increment: section;
+  content: counter(section);
+  position: absolute;
+  left: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-weight: bolder;
+  z-index: 1;
+  width: 1rem;
+  height: 1rem;
+  font-size: 0.6rem;
+  background: var(--ff-bg-color);
+  border: 1px solid #555;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
-- 
cgit v1.3.1