mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 01:16:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor zen-glance styles and improve tab handling in ZenGlanceManager

Browse Source
This commit is contained in:
mr. M
2025-02-01 23:46:35 +01:00
parent b8aa560d52
commit 07b70efd19
4 changed files with 80 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/browser/base/content/zen-styles/zen-glance.css
View File

@@ -9,12 +9,6 @@
visibility: inherit;
}
.zen-glance-background {
transform: scale(0.98);
backdrop-filter: blur(5px);
opacity: 0.6;
}
#zen-glance-sidebar-container {
display: none;

32
src/browser/base/zen-components/ZenGlanceManager.mjs
View File

@@ -93,9 +93,6 @@
browser: newTab.linkedBrowser,
});
this.#currentGlanceID = newUUID;
setTimeout(() => {
gBrowser.tabContainer._invalidateCachedTabs(); // remove tiny tab from the tabstrip
}, 0);
return this.#currentBrowser;
}
@@ -152,6 +149,21 @@
window.requestAnimationFrame(() => {
this.quickOpenGlance();
gZenUIManager.motion
.animate(
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
{
scale: 0.98,
backdropFilter: 'blur(5px)',
opacity: 0.6,
},
{
duration: 0.4,
type: 'spring',
bounce: 0.2,
}
);
this.overlay.removeAttribute('fade-out');
this.browserWrapper.setAttribute('animate', true);
const top = initialY + initialHeight / 2;
@@ -203,6 +215,7 @@
this.browserWrapper.removeAttribute('has-finished-animation');
if (noAnimation) {
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style');
this.quickCloseGlance({ closeCurrentTab: false });
return;
}
@@ -228,6 +241,7 @@
this.overlay.style.pointerEvents = 'none';
this.quickCloseGlance({ justAnimateParent: true, clearID: false });
const originalPosition = this.#glances.get(this.#currentGlanceID).originalPosition;
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style');
gZenUIManager.motion
.animate(
this.browserWrapper,
@@ -269,6 +283,7 @@
this.lastCurrentTab._closingGlance = true;
gBrowser.tabContainer._invalidateCachedTabs();
gBrowser.selectedTab = this.#currentParentTab;
gBrowser.removeTab(this.lastCurrentTab, { animate: false });
this.#currentBrowser.remove();
@@ -295,6 +310,8 @@
this._duringOpening = true;
this.showSidebarButtons();
gBrowser.selectedTab = this.#currentTab;
const parentBrowserContainer = this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer');
parentBrowserContainer.classList.add('deck-selected');
parentBrowserContainer.classList.add('zen-glance-background');
@@ -362,6 +379,11 @@
}
this.#currentGlanceID = tab.getAttribute('glance-id');
if (gBrowser.selectedTab === this.#currentParentTab && this.#currentBrowser) {
const curTab = this.#currentTab;
setTimeout(() => {
gBrowser.selectedTab = curTab;
}, 0);
} else if (gBrowser.selectedTab === this.#currentTab && this.#currentParentTab) {
setTimeout(this.quickOpenGlance.bind(this), 0);
}
}
@@ -505,6 +527,10 @@
return false;
}
getFocusedTab(aDir) {
return aDir< 0 ? this.#currentParentTab : this.#currentTab;
}
}
window.gZenGlanceManager = new ZenGlanceManager();

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

@@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c45dd02404 100644
index 8aeb244ffca9f48661805f5b7d860b5896055562..e07019130c199401702889c6765434de0bd708a2 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -94,7 +94,7 @@
@@ -99,7 +99,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
) {
delete draggedTab._dragData;
return;
@@ -1512,7 +1525,7 @@
@@ -1512,9 +1525,18 @@
}
this.#allTabs = [
@@ -107,8 +107,19 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
+ ...document.getElementById("zen-essentials-container").children, ...this.verticalPinnedTabsContainer.children,
...children,
];
+ for (let i = 0; i < this.#allTabs.length; i++) {
+ // add glance tabs (tabs inside tabs) to the list
+ const glanceTab = this.#allTabs[i].querySelector("tab[zen-glance-tab]");
+ if (glanceTab) {
+ // insert right after the parent tab
+ this.#allTabs.splice(i + 1, 0, glanceTab);
+ i++;
+ }
+ }
return this.#allTabs;
@@ -1593,6 +1606,7 @@
}
@@ -1593,6 +1615,7 @@
}
this.#focusableItems = [
@@ -116,7 +127,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
...verticalPinnedTabsContainer.children,
...focusableItems,
];
@@ -1617,8 +1631,8 @@
@@ -1617,8 +1640,8 @@
#isContainerVerticalPinnedExpanded(tab) {
return (
this.verticalMode &&
@@ -127,7 +138,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
);
}
@@ -1816,7 +1830,7 @@
@@ -1816,7 +1839,7 @@
let rect = ele => {
return window.windowUtils.getBoundsWithoutFlushing(ele);
};
@@ -136,7 +147,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
if (tab && rect(tab).width <= this._tabClipWidth) {
this.setAttribute("closebuttons", "activetab");
} else {
@@ -1832,6 +1846,7 @@
@@ -1832,6 +1855,7 @@
this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
}
@@ -144,7 +155,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
selectedTab._notselectedsinceload = false;
}
@@ -1879,7 +1894,7 @@
@@ -1879,7 +1903,7 @@
if (isEndTab && !this._hasTabTempMaxWidth) {
return;
}
@@ -153,7 +164,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
// Force tabs to stay the same width, unless we're closing the last tab,
// which case we need to let them expand just enough so that the overall
// tabbar width is the same.
@@ -1894,7 +1909,7 @@
@@ -1894,7 +1918,7 @@
let tabsToReset = [];
for (let i = numPinned; i < tabs.length; i++) {
let tab = tabs[i];
@@ -162,7 +173,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
if (!isEndTab) {
// keep tabs the same width
tab.style.transition = "none";
@@ -1963,13 +1978,13 @@
@@ -1963,13 +1987,13 @@
let verticalTabsContainer = document.getElementById(
"vertical-pinned-tabs-container"
);
@@ -179,7 +190,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
}
}
@@ -1993,7 +2008,7 @@
@@ -1993,7 +2017,7 @@
_positionPinnedTabs() {
let tabs = this.visibleTabs;
@@ -188,7 +199,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -2074,7 +2089,7 @@
@@ -2074,7 +2098,7 @@
return;
}
@@ -197,7 +208,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -2257,9 +2272,9 @@
@@ -2257,9 +2281,9 @@
}
let pinned = draggedTab.pinned;
@@ -209,7 +220,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
pinned ? numPinned : undefined
);
@@ -2502,8 +2517,9 @@
@@ -2502,8 +2526,9 @@
);
}
@@ -221,7 +232,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
return;
}
@@ -2668,9 +2684,9 @@
@@ -2668,9 +2693,9 @@
function newIndex(aTab, index) {
// Don't allow mixing pinned and unpinned tabs.
if (aTab.pinned) {
@@ -233,7 +244,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
}
}
@@ -2754,7 +2770,7 @@
@@ -2754,7 +2779,7 @@
}
_notifyBackgroundTab(aTab) {
@@ -242,7 +253,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
return;
}
@@ -2772,12 +2788,14 @@
@@ -2772,12 +2797,14 @@
selectedTab = {
left: selectedTab.left,
right: selectedTab.right,
@@ -258,7 +269,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
selectedTab,
];
})
@@ -2794,8 +2812,11 @@
@@ -2794,8 +2821,11 @@
delete this._lastTabToScrollIntoView;
// Is the new tab already completely visible?
if (
@@ -272,7 +283,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..a36fc2cb5761323fd40d367fd04234c4
) {
return;
}
@@ -2803,21 +2824,29 @@
@@ -2803,21 +2833,29 @@
if (this.arrowScrollbox.smoothScroll) {
// Can we make both the new tab and the selected tab completely visible?
if (

22
src/toolkit/content/widgets/tabbox-js.patch Normal file
View File

@@ -0,0 +1,22 @@
diff --git a/toolkit/content/widgets/tabbox.js b/toolkit/content/widgets/tabbox.js
index 033582a3badb65d50f58a11f8a259e28eaa04ef3..a2f655f2444bcf638434f39278e1a3de725de4d6 100644
--- a/toolkit/content/widgets/tabbox.js
+++ b/toolkit/content/widgets/tabbox.js
@@ -820,7 +820,7 @@
if (tab == startTab) {
return null;
}
- if (filter(tab)) {
+ if (filter(tab) && !tab.hasAttribute("zen-glance-tab")) {
return tab;
}
}
@@ -883,7 +883,7 @@
let { ariaFocusedItem } = this;
let startTab = ariaFocusedItem;
if (!ariaFocusedItem || !this.allTabs.includes(ariaFocusedItem)) {
- startTab = this.selectedItem;
+ startTab = gZenGlanceManager.getFocusedTab(aDir) || this.selectedItem;
}
let newTab = null;