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

Add tab icon change handling and enhance tab background styles

Browse Source
This commit is contained in:
mr. M
2025-01-11 22:54:04 +01:00
parent 619f979232
commit e26ff172c8
4 changed files with 167 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/browser/base/content/zen-styles/zen-compact-mode.css
View File

@@ -131,10 +131,112 @@
*:is([panelopen='true'], [open='true'], #nav-bar:focus-within):not(tab):not(.zen-compact-mode-ignore)
) {
&:not([animate='true']) {
--zen-compact-mode-func: cubic-bezier(.53,1.28,.43,1.03);
--zen-compact-mode-func: linear(
0 0%,
0.003726 1%,
0.014319 2%,
0.030937 3%,
0.052788 4%,
0.079129 5%,
0.109269 6%,
0.142564 7.000000000000001%,
0.17842 8%,
0.21629 9%,
0.255672 10%,
0.296112 11%,
0.337194 12%,
0.378548 13%,
0.419841 14.000000000000002%,
0.460779 15%,
0.501101 16%,
0.540581 17%,
0.579024 18%,
0.616265 19%,
0.652166 20%,
0.686613 21%,
0.719517 22%,
0.750808 23%,
0.780437 24%,
0.808374 25%,
0.834601 26%,
0.859118 27%,
0.881936 28.000000000000004%,
0.903077 28.999999999999996%,
0.922574 30%,
0.940466 31%,
0.956802 32%,
0.971635 33%,
0.985025 34%,
0.997033 35%,
1.007727 36%,
1.017174 37%,
1.025444 38%,
1.032608 39%,
1.038736 40%,
1.043899 41%,
1.048166 42%,
1.051606 43%,
1.054286 44%,
1.056272 45%,
1.057625 46%,
1.058406 47%,
1.058673 48%,
1.058482 49%,
1.057884 50%,
1.056931 51%,
1.055667 52%,
1.054137 53%,
1.052381 54%,
1.050438 55.00000000000001%,
1.048343 56.00000000000001%,
1.046128 56.99999999999999%,
1.043822 57.99999999999999%,
1.041452 59%,
1.039044 60%,
1.036618 61%,
1.034194 62%,
1.03179 63%,
1.029422 64%,
1.027102 65%,
1.024842 66%,
1.022652 67%,
1.020541 68%,
1.018514 69%,
1.016577 70%,
1.014735 71%,
1.01299 72%,
1.011345 73%,
1.0098 74%,
1.008355 75%,
1.00701 76%,
1.005763 77%,
1.004613 78%,
1.003557 79%,
1.002593 80%,
1.001717 81%,
1.000926 82%,
1.000217 83%,
0.999584 84%,
0.999026 85%,
0.998536 86%,
0.998112 87%,
0.997748 88%,
0.997442 89%,
0.997188 90%,
0.996984 91%,
0.996824 92%,
0.996705 93%,
0.996623 94%,
0.996575 95%,
0.996558 96%,
0.996567 97%,
0.996601 98%,
0.996656 99%,
0.996729 100%
);
transition:
left 0.35s var(--zen-compact-mode-func),
right 0.35s var(--zen-compact-mode-func);
left 0.25s var(--zen-compact-mode-func),
right 0.25s var(--zen-compact-mode-func);
opacity: 1;
left: -1px;

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

@@ -947,6 +947,37 @@
& .tab-icon-overlay {
margin-inline-end: 0 !important;
}
&[selected] .tab-background {
&::after {
content: "";
inset: -50%;
filter: blur(15px);
position: absolute;
background-size: 100% 100%;
background-clip: padding-box;
background-image: var(--zen-tab-icon);
z-index: -1;
}
background: transparent;
overflow: hidden;
&::before {
background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.80));
margin: 2px;
border-radius: calc(var(--tab-border-radius) - 2px);
position: absolute;
inset: 0;
z-index: 0;
content: "";
transition: background 0.2s ease-in-out;
}
}
&[selected]:hover .tab-background::before {
background: light-dark(rgba(255, 255, 255, 0.8), rgba(68, 64, 64, 0.85));
}
}

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

@@ -68,6 +68,13 @@
await this._refreshPinnedTabs(newWorkspace, { init: onInit });
}
onTabIconChanged(tab, url = null) {
const iconUrl = url ?? tab.iconImage.src;
if (tab.hasAttribute('zen-essential')) {
tab.querySelector('.tab-background').style.setProperty('--zen-tab-icon', `url(${iconUrl})`);
}
}
get enabled() {
if (typeof this._enabled === 'undefined') {
this._enabled = !(
@@ -544,6 +551,7 @@
gBrowser.unpinTab(tab);
}
gBrowser.pinTab(tab);
this.onTabIconChanged(tab);
}
}

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

@@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b6878d4d394 100644
index ce68c339f35416574b7bc7ebf8c93378f653242b..ceb292dd9939bd9db12b00673f0c3d54da793e76 100644
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -409,11 +409,39 @@
@@ -53,15 +53,16 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
);
} else {
this.moveTabTo(aTab, this.pinnedTabCount);
@@ -1052,6 +1080,7 @@
@@ -1052,6 +1080,8 @@
let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
+ try {
+ gZenPinnedTabManager.onTabIconChanged(aTab, aIconURL);
if (
aIconURL &&
!aLoadingPrincipal &&
@@ -1062,6 +1091,9 @@
@@ -1062,6 +1092,9 @@
);
return;
}
@@ -71,7 +72,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
let browser = this.getBrowserForTab(aTab);
browser.mIconURL = aIconURL;
@@ -1291,6 +1323,7 @@
@@ -1291,6 +1324,7 @@
if (!this._previewMode) {
newTab.recordTimeFromUnloadToReload();
newTab.updateLastAccessed();
@@ -79,7 +80,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
oldTab.updateLastAccessed();
// if this is the foreground window, update the last-seen timestamps.
if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
@@ -2374,7 +2407,7 @@
@@ -2374,7 +2408,7 @@
let panel = this.getPanel(browser);
let uniqueId = this._generateUniquePanelID();
@@ -88,7 +89,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
aTab.linkedPanel = uniqueId;
// Inject the <browser> into the DOM if necessary.
@@ -2434,7 +2467,7 @@
@@ -2434,7 +2468,7 @@
// hasSiblings=false on both the existing browser and the new browser.
if (this.tabs.length == 2) {
this.tabs[0].linkedBrowser.browsingContext.hasSiblings = true;
@@ -97,7 +98,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
} else {
aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
}
@@ -2666,6 +2699,12 @@
@@ -2666,6 +2700,12 @@
);
}
@@ -110,7 +111,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
if (!UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.start("browser.tabs.opening", "initting", window);
}
@@ -2735,6 +2774,12 @@
@@ -2735,6 +2775,12 @@
noInitialLabel,
skipBackgroundNotify,
});
@@ -123,7 +124,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
if (insertTab) {
// insert the tab into the tab container in the correct position
this._insertTabAtIndex(t, {
@@ -2878,6 +2923,13 @@
@@ -2878,6 +2924,13 @@
}
}
@@ -137,7 +138,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
// Additionally send pinned tab events
if (pinned) {
this._notifyPinnedStatus(t);
@@ -3389,6 +3441,23 @@
@@ -3389,6 +3442,23 @@
) {
tabWasReused = true;
tab = this.selectedTab;
@@ -161,7 +162,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
if (!tabData.pinned) {
this.unpinTab(tab);
} else {
@@ -3402,6 +3471,9 @@
@@ -3402,6 +3472,9 @@
restoreTabsLazily && !select && !tabData.pinned;
let url = "about:blank";
@@ -171,7 +172,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
if (tabData.entries?.length) {
let activeIndex = (tabData.index || tabData.entries.length) - 1;
// Ensure the index is in bounds.
@@ -3438,6 +3510,21 @@
@@ -3438,6 +3511,21 @@
preferredRemoteType,
});
@@ -193,7 +194,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
if (select) {
tabToSelect = tab;
}
@@ -3491,7 +3578,6 @@
@@ -3491,7 +3579,6 @@
this.tabContainer._invalidateCachedTabs();
}
}
@@ -201,7 +202,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
tab.initialize();
}
@@ -4070,6 +4156,10 @@
@@ -4070,6 +4157,10 @@
return;
}
@@ -212,7 +213,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
this.removeTabs(selectedTabs);
}
@@ -4389,6 +4479,13 @@
@@ -4389,6 +4480,13 @@
TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab);
}
@@ -226,7 +227,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
// Handle requests for synchronously removing an already
// asynchronously closing tab.
if (!animate && aTab.closing) {
@@ -4404,6 +4501,10 @@
@@ -4404,6 +4502,10 @@
// state).
let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -237,7 +238,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
if (
!this._beginRemoveTab(aTab, {
closeWindowFastpath: true,
@@ -4556,14 +4657,14 @@
@@ -4556,14 +4658,14 @@
!!this.tabsInCollapsedTabGroups.length;
if (
aTab.visible &&
@@ -254,7 +255,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
if (closeWindow) {
// We've already called beforeunload on all the relevant tabs if we get here,
@@ -5411,10 +5512,10 @@
@@ -5411,10 +5513,10 @@
SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
}
@@ -267,7 +268,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
aTab.selected ||
aTab.closing ||
// Tabs that are sharing the screen, microphone or camera cannot be hidden.
@@ -7384,6 +7485,7 @@
@@ -7384,6 +7486,7 @@
aWebProgress.isTopLevel
) {
this.mTab.setAttribute("busy", "true");
@@ -275,7 +276,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
gBrowser._tabAttrModified(this.mTab, ["busy"]);
this.mTab._notselectedsinceload = !this.mTab.selected;
gBrowser.syncThrobberAnimations(this.mTab);
@@ -8344,7 +8446,7 @@ var TabContextMenu = {
@@ -8344,7 +8447,7 @@ var TabContextMenu = {
);
contextUnpinSelectedTabs.hidden =
!this.contextTab.pinned || !multiselectionContext;
@@ -284,7 +285,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
// Move Tab items
let contextMoveTabOptions = document.getElementById(
"context_moveTabOptions"
@@ -8378,7 +8480,7 @@ var TabContextMenu = {
@@ -8378,7 +8481,7 @@ var TabContextMenu = {
let contextMoveTabToStart = document.getElementById("context_moveToStart");
let isFirstTab =
tabsToMove[0] == visibleTabs[0] ||
@@ -293,7 +294,7 @@ index ce68c339f35416574b7bc7ebf8c93378f653242b..07e3f7fcdb3e219c523201929cf07b68
contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
document.getElementById("context_openTabInWindow").disabled =
@@ -8607,6 +8709,7 @@ var TabContextMenu = {
@@ -8607,6 +8710,7 @@ var TabContextMenu = {
if (this.contextTab.multiselected) {
gBrowser.removeMultiSelectedTabs();
} else {