From 4b6068e13b7334bcbb177fcdaa3e38a0a8327605 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Mon, 11 Nov 2024 22:59:52 +0100
Subject: [PATCH] Hide reset button in vertical tabs and adjust CSS for better
 styling

---
 .../zen-styles/zen-tabs/vertical-tabs.css     | 12 ++++++--
 .../themes/shared/tabbrowser/tabs-css.patch   | 29 +++++++++++++++----
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 0edd5fa8f..76a54a5e7 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -149,7 +149,8 @@
           box-shadow: none !important;
         }
         & label { display: none !important; }
-        & .tab-close-button { 
+        & .tab-close-button,
+        & .tab-reset-button { 
           display: none !important; 
         }
 
@@ -498,6 +499,10 @@
           }
         }
 
+        & .tab-reset-button {
+          display: none !important;
+        }
+
         & .tab-content {
           display: flex;
           align-content: center;
@@ -686,7 +691,8 @@
         display: none !important;
       }
 
-      &[pinned]:not([zen-essential]):hover .tab-reset-button {
+      &[pinned]:not([zen-essential]):hover .tab-reset-button,
+      &[pinned][visuallyselected]:not([zen-essential]) .tab-reset-button {
         display: block;
       }
 
@@ -707,7 +713,7 @@
   .tab-reset-button {
     display: none;
     -moz-context-properties: fill, fill-opacity;
-    border-radius: 4px;
+    border-radius: var(--tab-border-radius);
     color: inherit;
     fill: currentColor;
     padding: 6px;
diff --git a/src/browser/themes/shared/tabbrowser/tabs-css.patch b/src/browser/themes/shared/tabbrowser/tabs-css.patch
index 42fcfa50d..172648815 100644
--- a/src/browser/themes/shared/tabbrowser/tabs-css.patch
+++ b/src/browser/themes/shared/tabbrowser/tabs-css.patch
@@ -1,8 +1,8 @@
 diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
-index 9f7331f2f00a8b0de6ce28a7029358a86eeb8873..2dc56a8455df9009bd1f524b377b8fdf09e124ca 100644
+index d48aad3a397909056ee43be4e65797875e80b772..89d2b381153d137ccfd080844bdb9abbbd90e1d5 100644
 --- a/browser/themes/shared/tabbrowser/tabs.css
 +++ b/browser/themes/shared/tabbrowser/tabs.css
-@@ -15,7 +15,7 @@
+@@ -26,7 +26,7 @@
    --tab-icon-end-margin: 5.5px;
    --tab-icon-overlay-fill: light-dark(black, white);
    --tab-icon-overlay-stroke: light-dark(white, black);
@@ -11,7 +11,7 @@ index 9f7331f2f00a8b0de6ce28a7029358a86eeb8873..2dc56a8455df9009bd1f524b377b8fdf
    --tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
    --tab-selected-textcolor: var(--toolbar-color);
    --tab-selected-bgcolor: var(--toolbar-bgcolor);
-@@ -132,8 +132,7 @@
+@@ -145,8 +145,7 @@
    }
  
    #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > &[pinned] {
@@ -21,7 +21,26 @@ index 9f7331f2f00a8b0de6ce28a7029358a86eeb8873..2dc56a8455df9009bd1f524b377b8fdf
    }
  
    #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > &:is([selected], [multiselected]) {
-@@ -952,7 +951,7 @@ sidebar-main[expanded] > #vertical-tabs > #tabbrowser-tabs[orient="vertical"] >
+@@ -498,14 +497,14 @@
+   }
+ 
+   &[textoverflow] {
+-    &[labeldirection=ltr]:not([pinned]),
+-    &:not([labeldirection], [pinned]):-moz-locale-dir(ltr) {
++    &[labeldirection=ltr],
++    &:not([labeldirection]):-moz-locale-dir(ltr) {
+       direction: ltr;
+       mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
+     }
+ 
+-    &[labeldirection=rtl]:not([pinned]),
+-    &:not([labeldirection], [pinned]):-moz-locale-dir(rtl) {
++    &[labeldirection=rtl],
++    &:not([labeldirection]):-moz-locale-dir(rtl) {
+       direction: rtl;
+       mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
+     }
+@@ -1052,7 +1051,7 @@ tab-group {
    toolbarbutton:not(#firefox-view-button),
    toolbarpaletteitem:not(#wrapper-firefox-view-button)
  ) ~ #tabbrowser-tabs {
@@ -30,7 +49,7 @@ index 9f7331f2f00a8b0de6ce28a7029358a86eeb8873..2dc56a8455df9009bd1f524b377b8fdf
    padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
    margin-inline-start: 2px;
  }
-@@ -987,7 +986,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
+@@ -1087,7 +1086,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
    list-style-image: url(chrome://global/skin/icons/plus.svg);
  }