(feat) Add reset to pinned URL button to pinned tabs

This commit introduces a "Reset" button to pinned tabs, allowing users to quickly revert a tab to its stored base URL. The button is visible on hover for non-essential pinned tabs and hidden for essentials. Clicking the button triggers a reset action managed by `gZenPinnedTabManager`. The visual style of the button is defined using the "reload" icon and follows the styling of other tab buttons.
zen-browser · Nov 11, 2024 · 38898ab · 38898ab
1 parent 3277e06
commit 38898ab
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 14 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
@@ -683,6 +683,18 @@
   #tabbrowser-tabs {
     & .tabbrowser-tab {
       &[pinned] .tab-close-button {
+        display: none !important;
+      }
+
+      &[pinned]:not([zen-essential]):hover .tab-reset-button {
+        display: block;
+      }
+
+      &[zen-essential] .tab-reset-button {
+        display: none;
+      }
+
+      &:not([pinned]) .tab-reset-button {
         display: none;
       }
 
@@ -692,6 +704,53 @@
     }
   }
 
+  .tab-reset-button {
+    display: none;
+    -moz-context-properties: fill, fill-opacity;
+    border-radius: 4px;
+    color: inherit;
+    fill: currentColor;
+    padding: 6px;
+    width: 24px;
+    height: 24px;
+    outline: var(--toolbarbutton-outline);
+
+    &:hover {
+      outline-color: var(--toolbarbutton-hover-outline-color);
+    }
+
+    &:hover:active {
+      outline-color: var(--toolbarbutton-active-outline-color);
+    }
+  }
+
+  .reset-icon {
+    appearance: none;
+
+  }
+
+  @media not (forced-colors) {
+    .tab-reset-button:hover {
+      background-color: color-mix(in srgb, currentColor 10%, transparent);
+    }
+
+    .tab-reset-button:hover:active {
+      background-color: color-mix(in srgb, currentColor 20%, transparent);
+    }
+  }
+
+  .tab-reset-button> .button-icon,
+  .tab-reset-button > .button-box > .button-icon,
+  .tab-reset-button > .toolbarbutton-icon {
+    margin: 0;
+  }
+
+  .tab-reset-button > .button-box > .button-text,
+  .tab-reset-button > .toolbarbutton-text {
+    display: none;
+  }
+
+
   /* Customization mode */
   /*:root[customizing] #TabsToolbar > *:not(#zen-sidebar-icons-wrapper) {
     overflow: hidden;
@@ -760,23 +819,23 @@
       }
 
       @media (-moz-bool-pref: 'zen.view.show-newtab-button-border-top') and (not (-moz-bool-pref: 'zen.view.show-newtab-button-top')) {
-        #tabbrowser-arrowscrollbox:has(tab:not([hidden])) & {
-          margin-top: 15px;
-          position: relative;
-          &::before {
-            content: '';
-            display: block;
-            height: 1px;
-            background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
-            width: 98%;
-            position: absolute;
-            top: -8px;
-            left: 50%;
-            transform: translateX(-50%);
-          }
+      #tabbrowser-arrowscrollbox:has(tab:not([hidden])) & {
+        margin-top: 15px;
+        position: relative;
+        &::before {
+          content: '';
+          display: block;
+          height: 1px;
+          background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
+          width: 98%;
+          position: absolute;
+          top: -8px;
+          left: 50%;
+          transform: translateX(-50%);
         }
       }
     }
+    }
   }
 }
 

diff --git a/src/browser/components/tabbrowser/content/tab-js.patch b/src/browser/components/tabbrowser/content/tab-js.patch
@@ -0,0 +1,32 @@
+diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
+index 60061540d79843281f3ee2ce905824b224da6f46..c01f8a7f18921588ecdc635c281cf01041ef627b 100644
+--- a/browser/components/tabbrowser/content/tab.js
++++ b/browser/components/tabbrowser/content/tab.js
+@@ -39,6 +39,7 @@
+             </hbox>
+           </vbox>
+           <image class="tab-close-button close-icon" role="button" data-l10n-id="tabbrowser-close-tabs-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
++          <image class="tab-reset-button reset-icon" role="button" data-l10n-id="tabbrowser-reset-tabs-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
+         </hbox>
+       </stack>
+       `;
+@@ -447,6 +448,7 @@
+         this.style.MozUserFocus = "ignore";
+       } else if (
+         event.target.classList.contains("tab-close-button") ||
++        event.target.classList.contains("tab-reset-button") ||
+         event.target.classList.contains("tab-icon-overlay")
+       ) {
+         eventMaySelectTab = false;
+@@ -549,6 +551,11 @@
+         // (see tabbrowser-tabs 'click' handler).
+         gBrowser.tabContainer._blockDblClick = true;
+       }
++
++      if (event.target.classList.contains("tab-reset-button")) {
++        gZenPinnedTabManager._resetTabToStoredState(this);
++        gBrowser.tabContainer._blockDblClick = true;
++      }
+     }
+
+     on_dblclick(event) {
diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css
@@ -49,6 +49,10 @@
   list-style-image: url('close.svg') !important;
 }
 
+.reset-icon {
+  list-style-image: url('reload.svg') !important;
+}
+
 #sidebar-button {
   list-style-image: url('sidebars-right.svg') !important;
 }