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 tab drag-and-drop functionality and enhance drag indicator styling

Browse Source
This commit is contained in:
mr. M
2025-01-31 23:02:13 +01:00
parent 00de303335
commit 7b41eb753d
4 changed files with 88 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -285,7 +285,6 @@
padding: 0 !important;
position: relative;
border-radius: var(--border-radius-medium);
& .tab-background {
overflow: hidden;
@@ -1072,21 +1071,32 @@
}
}
#vertical-pinned-tabs-container .tabbrowser-tab,
#tabbrowser-arrowscrollbox .tabbrowser-tab,
#zen-essentials-container .tabbrowser-tab {
transition: box-shadow 0.2s ease-in-out;
}
/* Vertical tabs reordering indicators */
#vertical-pinned-tabs-container .tabbrowser-tab.drag-over-before,
#tabbrowser-arrowscrollbox .tabbrowser-tab.drag-over-before {
box-shadow: 0 3px 6px -2px var(--toolbarbutton-active-background, rgba(0, 0, 255, 0.2));
}
#zen-drag-indicator {
--zen-drag-indicator-height: 2px;
--zen-drag-indicator-bg: color-mix(in srgb, var(--zen-primary-color) 50%, light-dark(rgba(0, 0, 0, .85), rgba(255, 255, 255, .95)) 50%);
width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px);
height: var(--zen-drag-indicator-height);
position: fixed;
z-index: 1000;
background: var(--zen-drag-indicator-bg);
transition: top 0.1s ease;
pointer-events: none;
left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
border-radius: 5px;
#vertical-pinned-tabs-container .tabbrowser-tab.drag-over-after,
#tabbrowser-arrowscrollbox .tabbrowser-tab.drag-over-after {
box-shadow: 0 -3px 6px -2px var(--toolbarbutton-active-background, rgba(0, 0, 255, 0.2));
&::before {
content: "";
position: absolute;
left: calc(-2 * var(--zen-drag-indicator-height));
top: 50%;
height: calc(2 * var(--zen-drag-indicator-height));
width: calc(2 * var(--zen-drag-indicator-height));
border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg);
border-radius: 50%;
transform: translate(calc(-1 * var(--zen-drag-indicator-height)), -50%);
background: transparent;
}
}
/* Horizontal tabs reordering indicators */

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

@@ -328,7 +328,7 @@
const actualPin = this._pinsCache.find((pin) => pin.uuid === tab.getAttribute('zen-pin-id'));
if(!actualPin) {
if (!actualPin) {
return;
}
actualPin.position = tab.position;
@@ -646,9 +646,9 @@
}
moveToAnotherTabContainerIfNecessary(event, draggedTab) {
const pinnedTabsTarget = event.target.closest("#vertical-pinned-tabs-container");
const essentialTabsTarget = event.target.closest("#zen-essentials-container");
const tabsTarget = event.target.closest("#tabbrowser-arrowscrollbox");
const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
const essentialTabsTarget = event.target.closest('#zen-essentials-container');
const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
let moved = false;
let isVertical = true;
@@ -658,7 +658,7 @@
if (!draggedTab.pinned) {
gBrowser.pinTab(draggedTab);
moved = true;
} else if (draggedTab.hasAttribute("zen-essential")) {
} else if (draggedTab.hasAttribute('zen-essential')) {
this.removeEssentials(draggedTab);
gBrowser.pinTab(draggedTab);
moved = true;
@@ -666,7 +666,7 @@
}
// Check for essentials container
else if (essentialTabsTarget) {
if (!draggedTab.hasAttribute("zen-essential")) {
if (!draggedTab.hasAttribute('zen-essential')) {
this.addToEssentials(draggedTab);
moved = true;
isVertical = false;
@@ -674,11 +674,11 @@
}
// Check for normal tabs container
else if (tabsTarget) {
if (draggedTab.pinned && !draggedTab.hasAttribute("zen-essential")) {
if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
gBrowser.unpinTab(draggedTab);
moved = true;
isRegularTabs = true;
} else if (draggedTab.hasAttribute("zen-essential")) {
} else if (draggedTab.hasAttribute('zen-essential')) {
this.removeEssentials(draggedTab);
moved = true;
isRegularTabs = true;
@@ -687,19 +687,18 @@
// If the tab was moved, adjust its position relative to the target tab
if (moved) {
const targetTab = event.target.closest(".tabbrowser-tab");
const targetTab = event.target.closest('.tabbrowser-tab');
if (targetTab) {
const rect = targetTab.getBoundingClientRect();
let newIndex = targetTab._tPos;
if (isVertical) {
const middleY = targetTab.screenY + rect.height / 2;
if(!isRegularTabs && event.screenY > middleY) {
if (!isRegularTabs && event.screenY > middleY) {
newIndex++;
} else if(isRegularTabs && event.screenY < middleY) {
} else if (isRegularTabs && event.screenY < middleY) {
newIndex--;
}
} else {
const middleX = targetTab.screenX + rect.width / 2;
if (event.screenX > middleX) {
@@ -714,20 +713,24 @@
}
removeTabContainersDragoverClass() {
document
.querySelectorAll(".tabbrowser-tab.drag-over-before, .tabbrowser-tab.drag-over-after")
.forEach(tab => {
tab.classList.remove("drag-over-before", "drag-over-after");
});
this.dragIndicator.remove();
this._dragIndicator = null;
}
get dragIndicator() {
if (!this._dragIndicator) {
this._dragIndicator = document.createElement('div');
this._dragIndicator.id = 'zen-drag-indicator';
document.body.appendChild(this._dragIndicator);
}
return this._dragIndicator;
}
applyDragoverClass(event, draggedTab) {
this.removeTabContainersDragoverClass();
const pinnedTabsTarget = event.target.closest("#vertical-pinned-tabs-container");
const essentialTabsTarget = event.target.closest("#zen-essentials-container");
const tabsTarget = event.target.closest("#tabbrowser-arrowscrollbox");
const targetTab = event.target.closest(".tabbrowser-tab");
const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
const essentialTabsTarget = event.target.closest('#zen-essentials-container');
const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
const targetTab = event.target.closest('.tabbrowser-tab');
// If there's no valid target tab, nothing to do
if (!targetTab) {
@@ -739,16 +742,16 @@
// Decide whether we should show a dragover class for the given target
if (pinnedTabsTarget) {
if (!draggedTab.pinned || draggedTab.hasAttribute("zen-essential")) {
if (!draggedTab.pinned || draggedTab.hasAttribute('zen-essential')) {
shouldAddDragOverElement = true;
}
} else if (essentialTabsTarget) {
if (!draggedTab.hasAttribute("zen-essential")) {
if (!draggedTab.hasAttribute('zen-essential')) {
shouldAddDragOverElement = true;
isVertical = false;
}
} else if (tabsTarget) {
if (draggedTab.pinned || draggedTab.hasAttribute("zen-essential")) {
if (draggedTab.pinned || draggedTab.hasAttribute('zen-essential')) {
shouldAddDragOverElement = true;
}
}
@@ -761,19 +764,20 @@
const rect = targetTab.getBoundingClientRect();
if (isVertical) {
const separation = 8;
const middleY = targetTab.screenY + rect.height / 2;
const indicator = this.dragIndicator;
let top=0;
if (event.screenY > middleY) {
targetTab.classList.add("drag-over-before");
top = rect.top + rect.height + 'px';
} else {
targetTab.classList.add("drag-over-after");
top = rect.top + 'px';
}
indicator.style.setProperty('--indicator-left', rect.left + (separation/2) + 'px');
indicator.style.setProperty('--indicator-width', rect.width - separation + 'px');
indicator.style.top = top;
} else {
const middleX = targetTab.screenX + rect.width / 2;
if (event.screenX > middleX) {
targetTab.classList.add("drag-over-before");
} else {
targetTab.classList.add("drag-over-after");
}
// SUPPORT FOR ESSENTIALS
}
}
}

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

@@ -1815,9 +1815,13 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (matchingWorkspaces.length === 1) {
const workspace = matchingWorkspaces[0];
if (workspace.uuid !== this.getActiveWorkspaceFromCache().uuid) {
window.addEventListener('TabSelected', (event) => {
this.changeWorkspace(workspace, { alwaysChange: true });
}, { once: true });
window.addEventListener(
'TabSelected',
(event) => {
this.changeWorkspace(workspace, { alwaysChange: true });
},
{ once: true }
);
return [userContextId, true, workspace.uuid];
}
}

45
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..aa672d49e5d3e8e0ce4747187becbc790e25a5f1 100644
index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96eccdd9bbbc4 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -94,7 +94,7 @@
@@ -39,15 +39,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
if (
(effects == "move" || effects == "copy") &&
this == draggedTab.container &&
@@ -955,6 +958,7 @@
// eslint-disable-next-line complexity
on_drop(event) {
+ gZenPinnedTabManager.removeTabContainersDragoverClass();
var dt = event.dataTransfer;
var dropEffect = dt.dropEffect;
var draggedTab;
@@ -972,6 +976,14 @@
@@ -972,6 +975,14 @@
this._tabDropIndicator.hidden = true;
event.stopPropagation();
@@ -62,7 +54,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
if (draggedTab && dropEffect == "copy") {
// copy the dropped tab (wherever it's from)
let newIndex = this._getDropIndex(event);
@@ -1010,7 +1022,7 @@
@@ -1010,7 +1021,7 @@
}
} else {
let pinned = draggedTab.pinned;
@@ -71,7 +63,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
let tabs = this.visibleTabs.slice(
pinned ? 0 : numPinned,
pinned ? numPinned : undefined
@@ -1090,7 +1102,7 @@
@@ -1090,7 +1101,7 @@
let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow");
@@ -80,7 +72,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex);
if (!directionForward) {
@@ -1100,7 +1112,7 @@
@@ -1100,7 +1111,7 @@
gBrowser.syncThrobberAnimations(tab);
};
@@ -89,7 +81,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
@@ -1263,7 +1275,8 @@
@@ -1263,7 +1274,8 @@
if (
dt.mozUserCancelled ||
dt.dropEffect != "none" ||
@@ -99,7 +91,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
) {
delete draggedTab._dragData;
return;
@@ -1512,7 +1525,7 @@
@@ -1512,7 +1524,7 @@
}
this.#allTabs = [
@@ -108,7 +100,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
...children,
];
return this.#allTabs;
@@ -1593,6 +1606,7 @@
@@ -1593,6 +1605,7 @@
}
this.#focusableItems = [
@@ -116,7 +108,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
...verticalPinnedTabsContainer.children,
...focusableItems,
];
@@ -1617,8 +1631,8 @@
@@ -1617,8 +1630,8 @@
#isContainerVerticalPinnedExpanded(tab) {
return (
this.verticalMode &&
@@ -127,7 +119,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
);
}
@@ -1816,7 +1830,7 @@
@@ -1816,7 +1829,7 @@
let rect = ele => {
return window.windowUtils.getBoundsWithoutFlushing(ele);
};
@@ -136,7 +128,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
if (tab && rect(tab).width <= this._tabClipWidth) {
this.setAttribute("closebuttons", "activetab");
} else {
@@ -1832,6 +1846,7 @@
@@ -1832,6 +1845,7 @@
this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
}
@@ -144,7 +136,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
selectedTab._notselectedsinceload = false;
}
@@ -1879,7 +1894,7 @@
@@ -1879,7 +1893,7 @@
if (isEndTab && !this._hasTabTempMaxWidth) {
return;
}
@@ -153,7 +145,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
// 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 +1908,7 @@
let tabsToReset = [];
for (let i = numPinned; i < tabs.length; i++) {
let tab = tabs[i];
@@ -162,7 +154,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
if (!isEndTab) {
// keep tabs the same width
tab.style.transition = "none";
@@ -1963,13 +1978,13 @@
@@ -1963,13 +1977,13 @@
let verticalTabsContainer = document.getElementById(
"vertical-pinned-tabs-container"
);
@@ -179,7 +171,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
}
}
@@ -1993,7 +2008,7 @@
@@ -1993,7 +2007,7 @@
_positionPinnedTabs() {
let tabs = this.visibleTabs;
@@ -188,7 +180,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -2074,7 +2089,7 @@
@@ -2074,7 +2088,7 @@
return;
}
@@ -197,7 +189,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -2257,9 +2272,9 @@
@@ -2257,9 +2271,9 @@
}
let pinned = draggedTab.pinned;
@@ -209,13 +201,14 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
pinned ? numPinned : undefined
);
@@ -2502,8 +2517,8 @@
@@ -2502,8 +2516,9 @@
);
}
- _finishAnimateTabMove() {
- if (!this.hasAttribute("movingtab")) {
+ _finishAnimateTabMove(always = false) {
+ gZenPinnedTabManager.removeTabContainersDragoverClass();
+ if (!this.hasAttribute("movingtab") && !always) {
return;
}