ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 05:35:29 +02:00
Code Releases Wiki Activity

Started working on nested groups

Browse source
This commit is contained in:
mr. m 2025-04-08 15:48:36 +02:00
parent 225d17eb88
commit 6a23d198a4
No known key found for this signature in database
GPG key ID: 419302196C23B258
4 changed files with 77 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/browser/base/content/zen-styles/zen-folders.css
View file

@ -1,5 +1,10 @@
tab-group[split-view-group] {
display: flex;
}
tab-group[split-view-group] > .tab-group-container {
display: flex;
flex: 1;
flex-wrap: nowrap;
border-radius: var(--border-radius-medium);
padding: 0 2px;
@ -147,7 +152,7 @@ tab-group:not([split-view-group]) {
margin: var(--tab-block-margin) auto !important;
}
& .tab-group-container {
& > .tab-group-container {
padding-top: var(--tab-block-margin);
padding-left: var(--zen-folder-indent, 0.5em);
@ -158,7 +163,7 @@ tab-group:not([split-view-group]) {
margin: var(--tab-block-margin);
& .tab-group-label-container {
& > .tab-group-label-container {
flex: 0 0 auto !important;
position: sticky !important;
top: 0 !important;
@ -208,11 +213,11 @@ tab-group:not([split-view-group]) {
}
&[collapsed] {
& .tabbrowser-tab:not([hidden]) {
& > .tabbrowser-tab:not([hidden]) {
display: flex;
}
& .tab-group-container {
& > .tab-group-container {
overflow-y: hidden;
}
}

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

@ -176,7 +176,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
get tabboxChildren() {
console.log(new Error().stack);
return Array.from(this.activeWorkspaceStrip?.children || []);
}

31
src/browser/components/tabbrowser/content/tabgroup-js.patch
View file

@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js
index 670fe2b309863102f63246e26194c8958e28bbb7..9585c7b8a2e35b29a7630fd6bd2e4a972a1700c7 100644
index 670fe2b309863102f63246e26194c8958e28bbb7..ba99c89d0aba16e8f77ed8493f0a97d151b02cb3 100644
--- a/browser/components/tabbrowser/content/tabgroup.js
+++ b/browser/components/tabbrowser/content/tabgroup.js
@@ -9,10 +9,13 @@
@ -10,11 +10,12 @@ index 670fe2b309863102f63246e26194c8958e28bbb7..9585c7b8a2e35b29a7630fd6bd2e4a97
+ <hbox class="tab-group-label-container" pack="center">
+ <image class="tab-group-folder-icon"/>
<label class="tab-group-label" role="button"/>
+ </hbox>
+ <vbox class="tab-group-container">
+ <html:div class="zen-tab-group-start" />
</vbox>
- </vbox>
- <html:slot/>
+ </hbox>
+ <html:div class="tab-group-container">
+ <html:div class="zen-tab-group-start" />
+ </html:div>
`;
/** @type {string} */
@ -27,16 +28,30 @@ index 670fe2b309863102f63246e26194c8958e28bbb7..9585c7b8a2e35b29a7630fd6bd2e4a97
this.#updateLabelAriaAttributes();
this.#updateCollapsedAriaAttributes();
@@ -213,7 +216,7 @@
@@ -213,7 +216,21 @@
}
get tabs() {
- return Array.from(this.children).filter(node => node.matches("tab"));
+ return Array.from(this.querySelector('.tab-group-container').children).filter(node => node.matches("tab"));
+ // add other group tabs if they are under this group
+ let childs = Array.from(this.querySelector('.tab-group-container').children);
+ for (let item of childs) {
+ if (item.tagName == "tab-group") {
+ childs = childs.concat(item.tabs);
+ }
+ }
+ return childs.filter(node => node.matches("tab"));
+ }
+
+ get group() {
+ if (this.parentElement?.parentElement?.tagName == "tab-group") {
+ return this.parentElement.parentElement;
+ }
+ return null;
}
/**
@@ -270,7 +273,7 @@
@@ -270,7 +287,7 @@
* @param {PointerEvent} event
*/
on_click(event) {

94
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 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500869e6c1a 100644
index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..c89077bcd00cf33267934e5a020728e311cc0a18 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -93,7 +93,7 @@
@ -144,7 +144,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
}
get verticalMode() {
@@ -1524,29 +1553,52 @@
@@ -1524,29 +1553,47 @@
if (this.#allTabs) {
return this.#allTabs;
}
@ -169,20 +169,15 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
...children,
];
+ let pinnedTabIdx = 0;
+ let hasFoundGroup = true;
+ while (hasFoundGroup) {
+ hasFoundGroup = false;
+ for (let i = 0; i < allTabs.length; i++) {
+ if (allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
+ // remove the separator from the list
+ allTabs.splice(i, 1);
+ i--;
+ } else if (allTabs[i].tagName == "tab-group") {
+ allTabs.splice(i, 1, ...allTabs[i].tabs);
+ hasFoundGroup = true; // Recursively explode tab groups
+ } else if (allTabs[i].pinned) {
+ pinnedTabIdx++;
+ }
+ for (let i = 0; i < allTabs.length; i++) {
+ if (allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
+ // remove the separator from the list
+ allTabs.splice(i, 1);
+ i--;
+ } else if (allTabs[i].tagName == "tab-group") {
+ allTabs.splice(i, 1, ...allTabs[i].tabs);
+ } else if (allTabs[i].pinned) {
+ pinnedTabIdx++;
+ }
+ }
+ for (let i = 0; i < allTabs.length; i++) {
@ -206,7 +201,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
}
/**
@@ -1566,7 +1618,7 @@
@@ -1566,7 +1613,7 @@
*/
get visibleTabs() {
if (!this.#visibleTabs) {
@ -215,7 +210,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
}
return this.#visibleTabs;
}
@@ -1601,23 +1653,18 @@
@@ -1601,23 +1648,18 @@
}
let elementIndex = 0;
@ -243,7 +238,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
visibleTabsInGroup.forEach(tab => {
tab.elementIndex = elementIndex++;
@@ -1627,10 +1674,7 @@
@@ -1627,10 +1669,7 @@
}
}
@ -255,7 +250,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
return this.#focusableItems;
}
@@ -1638,6 +1682,7 @@
@@ -1638,6 +1677,7 @@
_invalidateCachedTabs() {
this.#allTabs = null;
this._invalidateCachedVisibleTabs();
@ -263,7 +258,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
}
_invalidateCachedVisibleTabs() {
@@ -1652,8 +1697,8 @@
@@ -1652,8 +1692,8 @@
#isContainerVerticalPinnedExpanded(tab) {
return (
this.verticalMode &&
@ -274,7 +269,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
);
}
@@ -1668,7 +1713,7 @@
@@ -1668,7 +1708,7 @@
if (node == null) {
// We have a container for non-tab elements at the end of the scrollbox.
@ -283,7 +278,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
}
node.before(tab);
@@ -1763,7 +1808,7 @@
@@ -1763,7 +1803,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.
@ -292,7 +287,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
const newTab2 = this.newTabButton;
const newTabVertical = document.getElementById(
"vertical-tabs-newtab-button"
@@ -1846,7 +1891,7 @@
@@ -1846,7 +1886,7 @@
let rect = ele => {
return window.windowUtils.getBoundsWithoutFlushing(ele);
};
@ -301,7 +296,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
if (tab && rect(tab).width <= this._tabClipWidth) {
this.setAttribute("closebuttons", "activetab");
} else {
@@ -1858,10 +1903,12 @@
@@ -1858,10 +1898,12 @@
_handleTabSelect(aInstant) {
let selectedTab = this.selectedItem;
@ -314,7 +309,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
selectedTab._notselectedsinceload = false;
}
@@ -1873,7 +1920,7 @@
@@ -1873,7 +1915,7 @@
return;
}
@ -323,7 +318,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
if (!tabs.length) {
return;
}
@@ -1909,7 +1956,7 @@
@@ -1909,7 +1951,7 @@
if (isEndTab && !this._hasTabTempMaxWidth) {
return;
}
@ -332,7 +327,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
// 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.
@@ -1924,7 +1971,7 @@
@@ -1924,7 +1966,7 @@
let tabsToReset = [];
for (let i = numPinned; i < tabs.length; i++) {
let tab = tabs[i];
@ -341,7 +336,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
if (!isEndTab) {
// keep tabs the same width
tab.style.transition = "none";
@@ -1990,16 +2037,15 @@
@@ -1990,16 +2032,16 @@
// Move pinned tabs to another container when the tabstrip is toggled to vertical
// and when session restore code calls _positionPinnedTabs; update styling whenever
// the number of pinned tabs changes.
@ -358,13 +353,14 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
+ if (gBrowser.pinnedTabCount !== (verticalTabsContainer.children.length - count - 1 + document.getElementById("zen-essentials-container").children.length)) {
+ let tabs = this.allTabs.filter(tab => !tab.hasAttribute("zen-glance-tab"));
for (let i = 0; i < numPinned; i++) {
+ if (tabs[i].group) continue;
tabs[i].style.marginInlineStart = "";
- verticalTabsContainer.appendChild(tabs[i]);
+ tabs[i].hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(tabs[i].group ?? tabs[i]) : verticalTabsContainer.insertBefore(tabs[i].group ?? tabs[i], verticalTabsContainer.lastChild);
+ tabs[i].hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(tabs[i]) : verticalTabsContainer.insertBefore(tabs[i], verticalTabsContainer.lastChild);
}
}
@@ -2007,9 +2053,7 @@
@@ -2007,9 +2049,7 @@
}
_resetVerticalPinnedTabs() {
@ -375,7 +371,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
if (!verticalTabsContainer.children.length) {
return;
@@ -2022,8 +2066,8 @@
@@ -2022,8 +2062,8 @@
}
_positionPinnedTabs() {
@ -386,7 +382,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -2032,7 +2076,7 @@
@@ -2032,7 +2072,7 @@
if (this.verticalMode) {
this._updateVerticalPinnedTabs();
@ -395,7 +391,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
let layoutData = this._pinnedTabsLayoutCache;
let uiDensity = document.documentElement.getAttribute("uidensity");
if (!layoutData || layoutData.uiDensity != uiDensity) {
@@ -2104,7 +2148,7 @@
@@ -2104,7 +2144,7 @@
return;
}
@ -404,7 +400,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -2112,7 +2156,7 @@
@@ -2112,7 +2152,7 @@
dragData.animLastScreenX = screenX;
let { width: tabWidth, height: tabHeight } =
@ -413,7 +409,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
let shiftSizeX = tabWidth * movingTabs.length;
let shiftSizeY = tabHeight;
dragData.tabWidth = tabWidth;
@@ -2296,11 +2340,15 @@
@@ -2296,11 +2336,15 @@
this.#clearDragOverCreateGroupTimer();
let isPinned = draggedTab.pinned;
@ -433,7 +429,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
if (this.#rtlMode) {
tabs.reverse();
@@ -2314,7 +2362,7 @@
@@ -2314,7 +2358,7 @@
let size = this.verticalMode ? "height" : "width";
let translateAxis = this.verticalMode ? "translateY" : "translateX";
let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@ -442,7 +438,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
let translateX = event.screenX - dragData.screenX;
let translateY = event.screenY - dragData.screenY;
@@ -2328,6 +2376,12 @@
@@ -2328,6 +2372,12 @@
let lastTab = tabs.at(-1);
let lastMovingTab = movingTabs.at(-1);
let firstMovingTab = movingTabs[0];
@ -455,7 +451,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
let endEdge = ele => ele[screenAxis] + bounds(ele)[size];
let lastMovingTabScreen = endEdge(lastMovingTab);
let firstMovingTabScreen = firstMovingTab[screenAxis];
@@ -2348,7 +2402,11 @@
@@ -2348,7 +2398,11 @@
translate = Math.min(Math.max(translate, firstBound), lastBound);
for (let tab of movingTabs) {
@ -468,7 +464,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
}
dragData.translatePos = translate;
@@ -2485,6 +2543,9 @@
@@ -2485,6 +2539,9 @@
break;
}
let element = tabs[mid];
@ -478,7 +474,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
let elementForSize = isTabGroupLabel(element)
? element.parentElement
: element;
@@ -2507,6 +2568,10 @@
@@ -2507,6 +2564,10 @@
if (!dropElement) {
dropElement = this.ariaFocusableItems[oldDropElementIndex];
}
@ -489,7 +485,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
let newDropElementIndex = dropElement
? dropElement.elementIndex
: oldDropElementIndex;
@@ -2515,7 +2580,7 @@
@@ -2515,7 +2576,7 @@
let shouldCreateGroupOnDrop;
let dropBefore;
if (dropElement) {
@ -498,7 +494,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
? dropElement.parentElement
: dropElement;
@@ -2566,12 +2631,12 @@
@@ -2566,12 +2627,12 @@
}
}
@ -513,7 +509,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
dropElement != draggedTab &&
isTab(dropElement) &&
!dropElement?.group &&
@@ -2639,7 +2704,7 @@
@@ -2639,7 +2700,7 @@
// Shift background tabs to leave a gap where the dragged tab
// would currently be dropped.
for (let item of tabs) {
@ -522,7 +518,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
continue;
}
@@ -2648,6 +2713,9 @@
@@ -2648,6 +2709,9 @@
if (isTabGroupLabel(item)) {
// Shift the `.tab-group-label-container` to shift the label element.
item = item.parentElement;
@ -532,7 +528,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
}
item.style.transform = transform;
}
@@ -2697,8 +2765,9 @@
@@ -2697,8 +2761,9 @@
);
}
@ -544,7 +540,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
return;
}
@@ -2711,6 +2780,12 @@
@@ -2711,6 +2776,12 @@
item = item.parentElement;
}
item.style.transform = "";
@ -557,7 +553,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
item.removeAttribute("dragover-createGroup");
}
this.removeAttribute("movingtab-createGroup");
@@ -2754,7 +2829,7 @@
@@ -2754,7 +2825,7 @@
let postTransitionCleanup = () => {
movingTab._moveTogetherSelectedTabsData.animate = false;
};
@ -566,7 +562,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
@@ -2924,7 +2999,7 @@
@@ -2924,7 +2995,7 @@
}
_notifyBackgroundTab(aTab) {