mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance pinned tab management with reset functionality and location change handling

Browse Source
This commit is contained in:
mr. M
2025-02-20 22:30:49 +01:00
parent 9712ced2bf
commit fbe81666bf
8 changed files with 211 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
l10n

Submodule l10n updated: ead5aeaac4...91b85bb11e

9
src/browser/base/content/browser-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..5225d0539aa7dabf81a8fd60af3e839f203d296c 100644
index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..26a5b896de61ce73b03d1b378487d0e84c6a0a5b 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -32,6 +32,7 @@ ChromeUtils.defineESModuleGetters(this, {
@@ -10,18 +10,19 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..5225d0539aa7dabf81a8fd60af3e839f
DevToolsSocketStatus:
"resource://devtools/shared/security/DevToolsSocketStatus.sys.mjs",
DownloadUtils: "resource://gre/modules/DownloadUtils.sys.mjs",
@@ -3440,6 +3441,10 @@ var XULBrowserWindow = {
@@ -3440,6 +3441,11 @@ var XULBrowserWindow = {
AboutReaderParent.updateReaderButton(gBrowser.selectedBrowser);
TranslationsParent.onLocationChange(gBrowser.selectedBrowser);
+ gZenViewSplitter.onLocationChange(gBrowser.selectedBrowser);
+ ZenWorkspaces.onLocationChange(gBrowser.selectedBrowser);
+ gZenTabUnloader.onLocationChange(gBrowser.selectedBrowser);
+ gZenPinnedTabManager.onLocationChange(gBrowser.selectedBrowser);
+
PictureInPicture.updateUrlbarToggle(gBrowser.selectedBrowser);
if (!gMultiProcessBrowser) {
@@ -4435,7 +4440,7 @@ nsBrowserAccess.prototype = {
@@ -4435,7 +4441,7 @@ nsBrowserAccess.prototype = {
// Passing a null-URI to only create the content window,
// and pass true for aSkipLoad to prevent loading of
// about:blank
@@ -30,7 +31,7 @@ index 019b168c1aeae7e1c97a3ae58c99a48a27f54134..5225d0539aa7dabf81a8fd60af3e839f
null,
aParams,
aWhere,
@@ -4443,6 +4448,10 @@ nsBrowserAccess.prototype = {
@@ -4443,6 +4449,10 @@ nsBrowserAccess.prototype = {
aName,
true
);

3
src/browser/base/content/zen-styles/zen-browser-container.css
View File

@@ -6,12 +6,11 @@
:root:not([inDOMFullscreen='true']):not([chromehidden~='location']):not([chromehidden~='toolbar']) {
& #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
width: -moz-available;
border-radius: var(--zen-native-inner-radius);
position: relative;
overflow: hidden;
:root:not([zen-no-padding='true']) & {
border-radius: var(--zen-native-inner-radius);
box-shadow: var(--zen-big-shadow);
}

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

@@ -306,7 +306,8 @@
}
& label { display: none !important; }
& .tab-close-button,
& .tab-reset-button {
& .tab-reset-button,
& .tab-reset-pin-button {
display: none !important;
}
@@ -400,6 +401,16 @@
}
}
.tab-reset-pin-label {
pointer-events: none;
transition: opacity 0.1s ease-in-out, margin 0.1s ease-in-out, max-height 0.1s ease-in-out;
max-height: 0px;
opacity: 0;
transform: translateY(-5px);
font-size: x-small;
margin: 0;
}
/* Mark: toolbox as expanded */
#navigator-toolbox[zen-sidebar-expanded='true'] {
--zen-toolbox-min-width: fit-content;
@@ -543,6 +554,40 @@
width: -moz-available;
}
&[zen-pinned-changed='true'] .tab-icon-image {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* -4px for the reset tab button extra margin */
left: calc(-1 * var(--toolbarbutton-inner-padding) - 16px);
margin: 0 !important;
pointer-events: none;
}
&[zen-pinned-changed='true'] .tab-reset-pin-button image {
opacity: 0;
}
&[zen-pinned-changed='true'] .tab-reset-pin-button:hover {
& ~ .tab-label-container .tab-reset-pin-label {
max-height: 10px;
opacity: 0.6;
}
& ~ .tab-label-container .tab-reset-pin-label {
max-height: 10px;
opacity: 0.6;
}
& ~ .tab-icon-stack .tab-icon-image {
opacity: 0;
}
& image {
opacity: 1;
}
}
&:is(:hover, [visuallyselected]) .tab-close-button {
display: block;
--tab-inline-padding: 0; /* Avoid weird padding */
@@ -647,7 +692,8 @@
& .tab-background {
margin-inline: auto !important;
}
& .tab-reset-button {
& .tab-reset-button,
& .tab-reset-pin-button {
display: none !important;
}
& .tab-content {
@@ -747,7 +793,12 @@
}
}
&[zen-essential] .tab-reset-button {
&:not([zen-pinned-changed='true']) .tab-reset-pin-button {
display: none;
}
&[zen-essential] .tab-reset-button,
&[zen-essential] .tab-reset-pin-button {
display: none;
}
@@ -761,7 +812,8 @@
}
}
.tab-reset-button {
.tab-reset-button,
.tab-reset-pin-button {
display: none;
-moz-context-properties: fill, fill-opacity;
border-radius: var(--tab-border-radius);
@@ -781,42 +833,83 @@
}
}
.reset-icon {
.tab-reset-pin-button {
display: flex;
position: relative;
height: calc(100% - var(--tab-block-margin) * 2);
margin-left: calc(-1 * var(--tab-inline-padding) + var(--tab-block-margin));
margin-right: 4px;
padding: 0 calc(var(--toolbarbutton-inner-padding) - 5px) 0 calc(var(--toolbarbutton-inner-padding) / 4 + var(--tab-inline-padding) - 2px);
border-radius: 0;
border-top-left-radius: var(--border-radius-medium);
width: unset;
border-bottom-left-radius: var(--border-radius-medium);
align-items: center;
justify-content: center;
& > image {
list-style-image: var(--zen-original-tab-icon);
width: 100%;
height: 100%;
pointer-events: none;
width: 16px;
height: 16px;
}
&::after {
content: '';
display: block;
width: 2px;
height: 16px;
background: light-dark(rgba(88, 79, 79, 0.02), rgba(255, 255, 255, 0.3));
position: absolute;
right: calc(var(--tab-inline-padding) / 1.5 - 4px);
top: 50%;
border-radius: 2px;
transform: rotate(15deg) translateY(-50%);
}
&:hover::after {
opacity: 0;
}
}
.reset-icon,
.tab-reset-pin-button {
appearance: none;
}
@media not (forced-colors) {
.tab-reset-button:hover {
.tab-reset-button:hover,
.tab-reset-pin-button:hover {
background-color: color-mix(in srgb, currentColor 10%, transparent);
}
.tab-reset-button:hover:active {
.tab-reset-button:hover:active,
.tab-reset-pin-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 {
.tab-reset-button > .toolbarbutton-icon,
.tab-reset-pin-button > .button-icon,
.tab-reset-pin-button > .button-box > .button-icon,
.tab-reset-pin-button > .toolbarbutton-icon {
margin: 0;
}
.tab-reset-button > .button-box > .button-text,
.tab-reset-button > .toolbarbutton-text {
.tab-reset-button > .toolbarbutton-text,
.tab-reset-pin-button > .button-box > .button-text,
.tab-reset-pin-button > .toolbarbutton-text {
display: none;
}
/* Customization mode */
/*:root[customizing] #TabsToolbar > *:not(#zen-sidebar-bottom-buttons) {
overflow: hidden;
max-width: 0 !important;
margin-right: var(--zen-element-separation);
padding: 0 !important;
opacity: 0;
display: none;
}*/
:root[customizing] #TabsToolbar > *,
:root[customizing] #TabsToolbar-customization-target {

64
src/browser/base/zen-components/ZenPinnedTabManager.mjs
View File

@@ -85,6 +85,35 @@
if (tab.hasAttribute('zen-essential')) {
tab.querySelector('.tab-background').style.setProperty('--zen-tab-icon', `url(${iconUrl})`);
}
// TODO: work on this
//if (tab.hasAttribute('zen-pinned-changed') || !this._pinsCache) {
// return;
//}
// Save if the url is the same as the pinned tab
//const pin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
//if (pin) {
// pin.iconUrl = iconUrl;
// ZenPinnedTabsStorage.savePin(pin);
//}
}
_onTabResetPinButton(event, tab) {
event.stopPropagation();
const pin = this._pinsCache?.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
if (!pin) {
return;
}
let userContextId;
if (tab.hasAttribute("usercontextid")) {
userContextId = tab.getAttribute("usercontextid");
}
const pinnedUrl = Services.io.newURI(pin.url);
const browser = tab.linkedBrowser;
browser.loadURI(pinnedUrl, {
triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({
userContextId
}),
});
}
get enabled() {
@@ -421,6 +450,7 @@
this.log(`Removing pinned attributes for tab ${tab.getAttribute('zen-pin-id')}`);
await ZenPinnedTabsStorage.removePin(tab.getAttribute('zen-pin-id'));
this.resetPinChangedUrl(tab);
if (!isClosing) {
tab.removeAttribute('zen-pin-id');
@@ -430,7 +460,6 @@
tab.setAttribute('zen-workspace-id', workspace.uuid);
}
}
const currentWorkspace = await ZenWorkspaces.getActiveWorkspace();
await this._refreshPinnedTabs();
}
@@ -711,6 +740,39 @@
return moved;
}
async onLocationChange(browser) {
const tab = gBrowser.getTabForBrowser(browser);
if (!tab || !tab.pinned || tab.hasAttribute('zen-esential') || !this._pinsCache) {
return;
}
const pin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
if (!pin) {
return;
}
// Add an indicator that the pin has been changed
if (pin.url === browser.currentURI.spec) {
this.resetPinChangedUrl(tab);
return;
}
this.pinHasChangedUrl(tab, pin);
}
resetPinChangedUrl(tab) {
if (!tab.hasAttribute('zen-pinned-changed')) {
return
}
tab.removeAttribute('zen-pinned-changed');
tab.style.removeProperty('--zen-original-tab-icon');
}
pinHasChangedUrl(tab, pin) {
if (tab.hasAttribute('zen-pinned-changed')) {
return;
}
tab.setAttribute('zen-pinned-changed', 'true');
tab.style.setProperty('--zen-original-tab-icon', `url(${pin.iconUrl})`);
}
removeTabContainersDragoverClass() {
this.dragIndicator.remove();
this._dragIndicator = null;

8
src/browser/base/zen-components/ZenWelcome.mjs
View File

@@ -45,7 +45,9 @@
const tab = window.gBrowser.addTrustedTab(url, {
inBackground: true,
});
gBrowser.pinTab(tab);
setTimeout((tab) => {
gBrowser.pinTab(tab);
}, 1000, tab);
}
}
@@ -425,7 +427,9 @@
const createdTab = window.gBrowser.addTrustedTab(url, {
inBackground: true,
});
gZenPinnedTabManager.addToEssentials(createdTab);
setTimeout((tab) => {
gZenPinnedTabManager.addToEssentials(tab);
}, 1000, createdTab);
}
openInitialPinTab();
openWelcomeTab();

1
src/browser/base/zen-components/ZenWorkspaces.mjs
View File

@@ -218,6 +218,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
defaultSelectedContainer.insertBefore(tab, defaultSelectedContainer.lastChild);
}
}
gBrowser.tabContainer._invalidateCachedTabs();
}
perifery.setAttribute('hidden', 'true');
this._hasInitializedTabsStrip = true;

33
src/browser/components/tabbrowser/content/tab-js.patch
View File

@@ -1,16 +1,27 @@
diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
index d41c486c02a6f09dcff5741a59ad8b617294c481..e2320d9dd27f3d0caadbc2294d200ff0c5ea2de6 100644
index d41c486c02a6f09dcff5741a59ad8b617294c481..5d3d4556ccb1fd28ada75df22f2c1ec8f56b05b1 100644
--- a/browser/components/tabbrowser/content/tab.js
+++ b/browser/components/tabbrowser/content/tab.js
@@ -37,6 +37,7 @@
@@ -16,6 +16,7 @@
<hbox class="tab-group-line"/>
</vbox>
<hbox class="tab-content" align="center">
+ <box class="tab-reset-pin-button" role="button" data-l10n-id="tabbrowser-reset-pin-button" data-l10n-args='{"tabCount": 1}' keyNav="false"><image/></box>
<stack class="tab-icon-stack">
<hbox class="tab-throbber"/>
<hbox class="tab-icon-pending"/>
@@ -35,8 +36,10 @@
<label class="tab-icon-sound-label tab-icon-sound-pip-label" data-l10n-id="browser-tab-audio-pip" role="presentation"/>
<label class="tab-icon-sound-label tab-icon-sound-tooltip-label" role="presentation"/>
</hbox>
+ <label class="tab-reset-pin-label" data-l10n-id="tab-reset-pin-label" role="presentation"/>
</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-unload-tab-button" data-l10n-args='{"tabCount": 1}' keyNav="false"/>
</hbox>
</stack>
`;
@@ -168,7 +169,7 @@
@@ -168,7 +171,7 @@
}
set _visuallySelected(val) {
@@ -19,7 +30,7 @@ index d41c486c02a6f09dcff5741a59ad8b617294c481..e2320d9dd27f3d0caadbc2294d200ff0
return;
}
@@ -204,7 +205,7 @@
@@ -204,7 +207,7 @@
}
get visible() {
@@ -28,7 +39,7 @@ index d41c486c02a6f09dcff5741a59ad8b617294c481..e2320d9dd27f3d0caadbc2294d200ff0
}
get hidden() {
@@ -266,7 +267,7 @@
@@ -266,7 +269,7 @@
return false;
}
@@ -37,15 +48,16 @@ index d41c486c02a6f09dcff5741a59ad8b617294c481..e2320d9dd27f3d0caadbc2294d200ff0
}
get lastAccessed() {
@@ -451,6 +452,7 @@
@@ -451,6 +454,8 @@
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-reset-pin-button") ||
event.target.classList.contains("tab-icon-overlay")
) {
eventMaySelectTab = false;
@@ -544,6 +546,7 @@
@@ -544,6 +549,7 @@
if (this.multiselected) {
gBrowser.removeMultiSelectedTabs();
} else {
@@ -53,12 +65,15 @@ index d41c486c02a6f09dcff5741a59ad8b617294c481..e2320d9dd27f3d0caadbc2294d200ff0
gBrowser.removeTab(this, {
animate: true,
triggeringEvent: event,
@@ -553,6 +556,11 @@
@@ -553,6 +559,14 @@
// (see tabbrowser-tabs 'click' handler).
gBrowser.tabContainer._blockDblClick = true;
}
+
+ if (event.target.classList.contains("tab-reset-button")) {
+ if (event.target.classList.contains("tab-reset-pin-button")) {
+ gZenPinnedTabManager._onTabResetPinButton(event, this);
+ gBrowser.tabContainer._blockDblClick = true;
+ } else if (event.target.classList.contains("tab-reset-button")) {
+ gZenPinnedTabManager._onCloseTabShortcut(event, this, 'unload-switch');
+ gBrowser.tabContainer._blockDblClick = true;
+ }