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

feat: Improved tab transitions and fixed a couple of issues with glance, b=(no-bug), c=tabs, common, glance, split-view, workspaces

Browse Source
This commit is contained in:
Mr. M
2025-05-25 17:06:22 +02:00
parent dda1dab6f3
commit 09ca430b88
14 changed files with 374 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
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 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea9596403cef 100644
index 84d633471c89230b981d8a07babef4e0c76c0338..7cef57d99eca61f49968a128378d71c44f52556e 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -83,7 +83,7 @@
@@ -46,6 +46,15 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
expandGroupOnDrop = true;
}
}
@@ -868,7 +869,7 @@
? event.screenY - window.screenY - tabOffset
: event.screenY - window.screenY,
scrollPos:
- this.verticalMode && tab.pinned
+ this.verticalMode && tab.pinned && false
? this.verticalPinnedTabsContainer.scrollPosition
: this.arrowScrollbox.scrollPosition,
screenX: event.screenX,
@@ -921,6 +922,10 @@
}
@@ -76,31 +85,32 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
if (draggedTab && dropEffect == "copy") {
let duplicatedDraggedTab;
let duplicatedTabs = [];
@@ -1116,10 +1133,11 @@
@@ -1116,7 +1133,7 @@
}
} else {
let isPinned = draggedTab.pinned;
- let numPinned = gBrowser.pinnedTabCount;
+ let numPinned = gBrowser._numVisiblePinTabsWithoutCollapsed;
+ let essential = draggedTab.hasAttribute("zen-essential");
let tabs = this.ariaFocusableItems.slice(
- isPinned ? 0 : numPinned,
- isPinned ? numPinned : undefined
+ isPinned ? (essential ? 0 : gBrowser._numZenEssentials) : numPinned,
+ isPinned ? (essential ? gBrowser._numZenEssentials : numPinned) : undefined
);
let size = this.verticalMode ? "height" : "width";
let screenAxis = this.verticalMode ? "screenY" : "screenX";
@@ -1211,7 +1229,7 @@
item.removeAttribute("tabdrop-samewindow");
resolve();
};
- if (gReduceMotion) {
+ if (true || gReduceMotion) {
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
@@ -1337,6 +1355,7 @@
isPinned ? 0 : numPinned,
isPinned ? numPinned : undefined
@@ -1135,8 +1152,14 @@
(lastMovingTabScreen + tabSize);
if (this.verticalMode) {
+ if (oldTranslateY > 0 && translateOffsetY > tabHeight / 2) {
+ newTranslateY += tabHeight;
+ }
+ if (oldTranslateY < 0 && -translateOffsetY > tabHeight / 2) {
+ newTranslateY -= tabHeight;
+ }
newTranslateY = Math.min(
- Math.max(oldTranslateY, firstBound),
+ Math.max(newTranslateY, firstBound),
lastBound
);
} else {
@@ -1337,6 +1360,7 @@
let nextItem = this.ariaFocusableItems[newIndex];
let tabGroup = isTab(nextItem) && nextItem.group;
@@ -108,7 +118,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
gBrowser.loadTabs(urls, {
inBackground,
replace,
@@ -1369,6 +1388,17 @@
@@ -1369,6 +1393,17 @@
this.finishMoveTogetherSelectedTabs(draggedTab);
this.finishAnimateTabMove();
@@ -126,7 +136,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
this.#expandGroupOnDrop(draggedTab);
if (
@@ -1597,7 +1627,7 @@
@@ -1597,7 +1632,7 @@
}
get newTabButton() {
@@ -135,7 +145,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
}
get verticalMode() {
@@ -1621,29 +1651,54 @@
@@ -1621,29 +1656,54 @@
if (this.#allTabs) {
return this.#allTabs;
}
@@ -198,7 +208,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
}
/**
@@ -1698,23 +1753,18 @@
@@ -1698,23 +1758,18 @@
}
let elementIndex = 0;
@@ -226,7 +236,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
visibleTabsInGroup.forEach(tab => {
tab.elementIndex = elementIndex++;
@@ -1724,10 +1774,7 @@
@@ -1724,10 +1779,7 @@
}
}
@@ -238,7 +248,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
return this.#focusableItems;
}
@@ -1735,6 +1782,7 @@
@@ -1735,6 +1787,7 @@
_invalidateCachedTabs() {
this.#allTabs = null;
this._invalidateCachedVisibleTabs();
@@ -246,7 +256,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
}
_invalidateCachedVisibleTabs() {
@@ -1749,8 +1797,8 @@
@@ -1749,8 +1802,8 @@
#isContainerVerticalPinnedGrid(tab) {
return (
this.verticalMode &&
@@ -257,7 +267,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
!this.expandOnHover
);
}
@@ -1766,7 +1814,7 @@
@@ -1766,7 +1819,7 @@
if (node == null) {
// We have a container for non-tab elements at the end of the scrollbox.
@@ -266,7 +276,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
}
node.before(tab);
@@ -1861,7 +1909,7 @@
@@ -1861,7 +1914,7 @@
// There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
// for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
// Attach the long click popup to all of them.
@@ -275,7 +285,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
const newTab2 = this.newTabButton;
const newTabVertical = document.getElementById(
"vertical-tabs-newtab-button"
@@ -1956,10 +2004,12 @@
@@ -1956,10 +2009,12 @@
_handleTabSelect(aInstant) {
let selectedTab = this.selectedItem;
@@ -288,7 +298,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
selectedTab._notselectedsinceload = false;
}
@@ -2132,6 +2182,7 @@
@@ -2132,6 +2187,7 @@
}
_positionPinnedTabs() {
@@ -296,7 +306,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
let tabs = this.visibleTabs;
let numPinned = gBrowser.pinnedTabCount;
let absPositionHorizontalTabs =
@@ -2206,7 +2257,7 @@
@@ -2206,7 +2262,7 @@
return;
}
@@ -305,16 +315,25 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -2214,7 +2265,7 @@
dragData.animLastScreenX = screenX;
@@ -2215,6 +2271,8 @@
let { width: tabWidth, height: tabHeight } =
- draggedTab.getBoundingClientRect();
+ (draggedTab.group?.hasAttribute("split-view-group") ? draggedTab.group : draggedTab).getBoundingClientRect();
draggedTab.getBoundingClientRect();
+ tabWidth += 4; // Add 4px to account for the gap
+ tabHeight += 4;
let shiftSizeX = tabWidth * movingTabs.length;
let shiftSizeY = tabHeight;
dragData.tabWidth = tabWidth;
@@ -2389,12 +2440,16 @@
@@ -2244,7 +2302,7 @@
let translateX = screenX - dragData.screenX;
let translateY = screenY - dragData.screenY;
translateY +=
- this.verticalPinnedTabsContainer.scrollPosition - dragData.scrollPos;
+ dragData.scrollPos;
let firstBoundX = firstTabInRow.screenX - firstMovingTabScreenX;
let firstBoundY = firstTabInRow.screenY - firstMovingTabScreenY;
let lastBoundX =
@@ -2389,12 +2447,16 @@
this.#clearDragOverCreateGroupTimer();
@@ -335,7 +354,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
if (this.#rtlMode) {
tabs.reverse();
@@ -2408,7 +2463,7 @@
@@ -2408,7 +2470,7 @@
let size = this.verticalMode ? "height" : "width";
let translateAxis = this.verticalMode ? "translateY" : "translateX";
let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@@ -344,7 +363,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
let translateX = event.screenX - dragData.screenX;
let translateY = event.screenY - dragData.screenY;
@@ -2422,12 +2477,21 @@
@@ -2422,12 +2484,21 @@
let lastTab = tabs.at(-1);
let lastMovingTab = movingTabs.at(-1);
let firstMovingTab = movingTabs[0];
@@ -367,7 +386,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
translate +=
this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
} else if (isPinned && this.verticalMode) {
@@ -2446,6 +2510,9 @@
@@ -2446,6 +2517,9 @@
// Shift the `.tab-group-label-container` to shift the label element.
item = item.parentElement;
}
@@ -377,7 +396,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
item.style.transform = `${translateAxis}(${translate}px)`;
}
@@ -2583,6 +2650,9 @@
@@ -2583,6 +2657,9 @@
break;
}
let element = tabs[mid];
@@ -387,7 +406,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
let elementForSize = isTabGroupLabel(element)
? element.parentElement
: element;
@@ -2605,6 +2675,10 @@
@@ -2605,6 +2682,10 @@
if (!dropElement) {
dropElement = this.ariaFocusableItems[oldDropElementIndex];
}
@@ -398,7 +417,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
let newDropElementIndex = dropElement
? dropElement.elementIndex
: oldDropElementIndex;
@@ -2613,7 +2687,7 @@
@@ -2613,7 +2694,7 @@
let shouldCreateGroupOnDrop;
let dropBefore;
if (dropElement) {
@@ -407,7 +426,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
? dropElement.parentElement
: dropElement;
@@ -2675,12 +2749,12 @@
@@ -2675,12 +2756,12 @@
}
}
@@ -422,7 +441,16 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
dropElement != draggedTab &&
isTab(dropElement) &&
!dropElement?.group &&
@@ -2750,7 +2824,7 @@
@@ -2720,7 +2801,7 @@
// Dropping right before the tab group.
dropElement = dropElementGroup;
colorCode = undefined;
- } else if (dropElementGroup.collapsed) {
+ } else if (dropElement?.group?.hasAttribute("split-view-group")) {
// Dropping right after the collapsed tab group.
dropElement = dropElementGroup;
colorCode = undefined;
@@ -2750,7 +2831,7 @@
// Shift background tabs to leave a gap where the dragged tab
// would currently be dropped.
for (let item of tabs) {
@@ -431,7 +459,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
continue;
}
@@ -2759,6 +2833,9 @@
@@ -2759,6 +2840,9 @@
if (isTabGroupLabel(item)) {
// Shift the `.tab-group-label-container` to shift the label element.
item = item.parentElement;
@@ -441,7 +469,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
}
item.style.transform = transform;
}
@@ -2811,8 +2888,9 @@
@@ -2811,8 +2895,9 @@
);
}
@@ -453,7 +481,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
return;
}
@@ -2824,6 +2902,12 @@
@@ -2824,6 +2909,12 @@
item = item.parentElement;
}
item.style.transform = "";
@@ -466,7 +494,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
item.removeAttribute("dragover-createGroup");
}
this.removeAttribute("movingtab-createGroup");
@@ -2870,7 +2954,7 @@
@@ -2870,7 +2961,7 @@
let postTransitionCleanup = () => {
movingTab._moveTogetherSelectedTabsData.animate = false;
};
@@ -475,7 +503,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
@@ -3043,7 +3127,7 @@
@@ -3043,7 +3134,7 @@
}
_notifyBackgroundTab(aTab) {
@@ -484,7 +512,7 @@ index 84d633471c89230b981d8a07babef4e0c76c0338..1a9c56846ff27d68c16b939fb759ea95
return;
}
@@ -3169,6 +3253,9 @@
@@ -3169,6 +3260,9 @@
return null;
}
}