mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-29 14:38:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Kristijan Ribarić
2024-11-11 15:48:50 +01:00
parent 3277e06740
commit 38898ab45e
3 changed files with 109 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -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%);
}
}
}
}
}
}