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

fix: more small fixes after twilight feedback, b=(no-bug), c=tabs, common, compact-mode, workspaces

Browse Source
This commit is contained in:
mr. m
2025-04-23 13:23:10 +02:00
parent 6de445eaa1
commit aae3ed0872
7 changed files with 85 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/browser/base/content/zen-keysets.inc.xhtml
View File

@@ -2,6 +2,9 @@
<command id="cmd_zenCompactModeToggle" />
<command id="cmd_zenCompactModeShowSidebar" />
<command id="cmd_zenCompactModeShowToolbar" />
<command id="cmd_zenCompactModeHideSidebar" />
<command id="cmd_zenCompactModeHideToolbar" />
<command id="cmd_zenCompactModeHideBoth" />
<command id="cmd_zenWorkspaceForward" />
<command id="cmd_zenWorkspaceBackward" />
@@ -11,6 +14,7 @@
<command id="cmd_zenSplitViewHorizontal" />
<command id="cmd_zenSplitViewUnsplit" />
<command id="cmd_zenSplitViewLinkInNewTab" />
<command id="cmd_zenSplitViewContextMenu" />
<!-- Workspace commands -->
<command id="cmd_zenWorkspaceSwitch1" />

75
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 ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2dfc167e6 100644
index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..691c5435cd27236f6374ab702be1ab66a0a26543 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -83,7 +83,7 @@
@@ -109,10 +109,11 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
gBrowser.loadTabs(urls, {
inBackground,
replace,
@@ -1357,6 +1376,16 @@
return;
}
@@ -1359,6 +1378,17 @@
this.finishMoveTogetherSelectedTabs(draggedTab);
this.finishAnimateTabMove();
+
+ if (!dt.mozUserCancelled && dt.dropEffect == "none" && !this._isCustomizing) {
+ const moved = gZenViewSplitter.moveTabToSplitView(event, draggedTab);
+ if (moved) {
@@ -123,10 +124,10 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
+ if (gZenViewSplitter._lastOpenedTab) gZenViewSplitter._lastOpenedTab._visuallySelected = false;
+ }
+
this.finishMoveTogetherSelectedTabs(draggedTab);
this.finishAnimateTabMove();
this.#expandGroupOnDrop(draggedTab);
@@ -1582,7 +1611,7 @@
if (
@@ -1582,7 +1612,7 @@
}
get newTabButton() {
@@ -135,7 +136,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
}
get verticalMode() {
@@ -1606,29 +1635,41 @@
@@ -1606,29 +1636,41 @@
if (this.#allTabs) {
return this.#allTabs;
}
@@ -185,7 +186,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
}
/**
@@ -1648,7 +1689,7 @@
@@ -1648,7 +1690,7 @@
*/
get visibleTabs() {
if (!this.#visibleTabs) {
@@ -194,7 +195,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
}
return this.#visibleTabs;
}
@@ -1683,23 +1724,18 @@
@@ -1683,23 +1725,18 @@
}
let elementIndex = 0;
@@ -222,7 +223,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
visibleTabsInGroup.forEach(tab => {
tab.elementIndex = elementIndex++;
@@ -1709,10 +1745,7 @@
@@ -1709,10 +1746,7 @@
}
}
@@ -234,7 +235,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
return this.#focusableItems;
}
@@ -1720,6 +1753,7 @@
@@ -1720,6 +1754,7 @@
_invalidateCachedTabs() {
this.#allTabs = null;
this._invalidateCachedVisibleTabs();
@@ -242,7 +243,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
}
_invalidateCachedVisibleTabs() {
@@ -1734,8 +1768,8 @@
@@ -1734,8 +1769,8 @@
#isContainerVerticalPinnedGrid(tab) {
return (
this.verticalMode &&
@@ -253,7 +254,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
!this.expandOnHover
);
}
@@ -1751,7 +1785,7 @@
@@ -1751,7 +1786,7 @@
if (node == null) {
// We have a container for non-tab elements at the end of the scrollbox.
@@ -262,7 +263,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
}
node.before(tab);
@@ -1846,7 +1880,7 @@
@@ -1846,7 +1881,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.
@@ -271,7 +272,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
const newTab2 = this.newTabButton;
const newTabVertical = document.getElementById(
"vertical-tabs-newtab-button"
@@ -1941,10 +1975,12 @@
@@ -1941,10 +1976,12 @@
_handleTabSelect(aInstant) {
let selectedTab = this.selectedItem;
@@ -284,7 +285,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
selectedTab._notselectedsinceload = false;
}
@@ -2085,16 +2121,15 @@
@@ -2085,16 +2122,15 @@
// 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.
@@ -307,7 +308,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
}
}
@@ -2102,9 +2137,7 @@
@@ -2102,9 +2138,7 @@
}
_resetVerticalPinnedTabs() {
@@ -318,7 +319,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
if (!verticalTabsContainer.children.length) {
return;
@@ -2117,7 +2150,7 @@
@@ -2117,7 +2151,7 @@
}
_positionPinnedTabs() {
@@ -327,7 +328,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
let numPinned = gBrowser.pinnedTabCount;
let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -2127,7 +2160,7 @@
@@ -2127,7 +2161,7 @@
if (this.verticalMode) {
this._updateVerticalPinnedTabs();
@@ -336,7 +337,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
let layoutData = this._pinnedTabsLayoutCache;
let uiDensity = document.documentElement.getAttribute("uidensity");
if (!layoutData || layoutData.uiDensity != uiDensity) {
@@ -2191,7 +2224,7 @@
@@ -2191,7 +2225,7 @@
return;
}
@@ -345,7 +346,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY;
@@ -2199,7 +2232,7 @@
@@ -2199,7 +2233,7 @@
dragData.animLastScreenX = screenX;
let { width: tabWidth, height: tabHeight } =
@@ -354,7 +355,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
let shiftSizeX = tabWidth * movingTabs.length;
let shiftSizeY = tabHeight;
dragData.tabWidth = tabWidth;
@@ -2374,12 +2407,16 @@
@@ -2374,12 +2408,16 @@
this.#clearDragOverCreateGroupTimer();
@@ -376,7 +377,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
if (this.#rtlMode) {
tabs.reverse();
@@ -2393,7 +2430,7 @@
@@ -2393,7 +2431,7 @@
let size = this.verticalMode ? "height" : "width";
let translateAxis = this.verticalMode ? "translateY" : "translateX";
let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@@ -385,7 +386,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
let translateX = event.screenX - dragData.screenX;
let translateY = event.screenY - dragData.screenY;
@@ -2407,10 +2444,19 @@
@@ -2407,10 +2445,19 @@
let lastTab = tabs.at(-1);
let lastMovingTab = movingTabs.at(-1);
let firstMovingTab = movingTabs[0];
@@ -405,7 +406,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
let translate = screen - dragData[screenAxis];
if (!isPinned) {
translate +=
@@ -2431,6 +2477,9 @@
@@ -2431,6 +2478,9 @@
// Shift the `.tab-group-label-container` to shift the label element.
item = item.parentElement;
}
@@ -415,7 +416,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
item.style.transform = `${translateAxis}(${translate}px)`;
}
@@ -2568,6 +2617,9 @@
@@ -2568,6 +2618,9 @@
break;
}
let element = tabs[mid];
@@ -425,7 +426,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
let elementForSize = isTabGroupLabel(element)
? element.parentElement
: element;
@@ -2590,6 +2642,10 @@
@@ -2590,6 +2643,10 @@
if (!dropElement) {
dropElement = this.ariaFocusableItems[oldDropElementIndex];
}
@@ -436,7 +437,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
let newDropElementIndex = dropElement
? dropElement.elementIndex
: oldDropElementIndex;
@@ -2598,7 +2654,7 @@
@@ -2598,7 +2655,7 @@
let shouldCreateGroupOnDrop;
let dropBefore;
if (dropElement) {
@@ -445,7 +446,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
? dropElement.parentElement
: dropElement;
@@ -2660,12 +2716,12 @@
@@ -2660,12 +2717,12 @@
}
}
@@ -460,7 +461,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
dropElement != draggedTab &&
isTab(dropElement) &&
!dropElement?.group &&
@@ -2735,7 +2791,7 @@
@@ -2735,7 +2792,7 @@
// Shift background tabs to leave a gap where the dragged tab
// would currently be dropped.
for (let item of tabs) {
@@ -469,7 +470,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
continue;
}
@@ -2744,6 +2800,9 @@
@@ -2744,6 +2801,9 @@
if (isTabGroupLabel(item)) {
// Shift the `.tab-group-label-container` to shift the label element.
item = item.parentElement;
@@ -479,7 +480,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
}
item.style.transform = transform;
}
@@ -2796,8 +2855,9 @@
@@ -2796,8 +2856,9 @@
);
}
@@ -491,7 +492,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
return;
}
@@ -2809,6 +2869,12 @@
@@ -2809,6 +2870,12 @@
item = item.parentElement;
}
item.style.transform = "";
@@ -504,7 +505,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
item.removeAttribute("dragover-createGroup");
}
this.removeAttribute("movingtab-createGroup");
@@ -2855,7 +2921,7 @@
@@ -2855,7 +2922,7 @@
let postTransitionCleanup = () => {
movingTab._moveTogetherSelectedTabsData.animate = false;
};
@@ -513,7 +514,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
@@ -3028,7 +3094,7 @@
@@ -3028,7 +3095,7 @@
}
_notifyBackgroundTab(aTab) {
@@ -522,7 +523,7 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..37870bfe9e0d9605907515fd17c437c2
return;
}
@@ -3154,6 +3220,9 @@
@@ -3154,6 +3221,9 @@
return null;
}
}

3
src/zen/common/ZenUIManager.mjs
View File

@@ -70,6 +70,9 @@ var gZenUIManager = {
} catch (error) {
console.error('Error updating layout breakout:', error);
}
setTimeout(() => {
ZenWorkspaces.updateTabsContainers();
}, 0);
},
get tabsWrapper() {

4
src/zen/compact-mode/zen-compact-mode.css
View File

@@ -91,6 +91,10 @@
}
}
&:not([zen-single-toolbar='true']) .zen-essentials-container {
padding: 0;
}
&[zen-right-side='true'] {
& #navigator-toolbox {
--zen-compact-float: calc(var(--zen-element-separation) + 1px);

22
src/zen/tabs/ZenPinnedTabManager.mjs
View File

@@ -645,13 +645,14 @@
}
this._onTabMove(tab);
this.onTabIconChanged(tab);
// Dispatch the event to update the UI
const event = new CustomEvent('TabAddedToEssentials', {
detail: { tab },
});
tab.dispatchEvent(event);
}
gZenUIManager.updateTabsToolbar();
// Dispatch the event to update the UI
const event = new CustomEvent('TabAddedToEssentials', {
detail: { tab },
});
tab.dispatchEvent(event);
}
removeEssentials(tab, unpin = true) {
@@ -670,13 +671,14 @@
gBrowser.tabContainer._invalidateCachedTabs();
this._onTabMove(tab);
}
// Dispatch the event to update the UI
const event = new CustomEvent('TabRemovedFromEssentials', {
detail: { tab },
});
tab.dispatchEvent(event);
}
gZenUIManager.updateTabsToolbar();
// Dispatch the event to update the UI
const event = new CustomEvent('TabRemovedFromEssentials', {
detail: { tab },
});
tab.dispatchEvent(event);
}
_insertItemsIntoTabContextMenu() {

1
src/zen/tabs/zen-tabs/vertical-tabs.css
View File

@@ -1267,7 +1267,6 @@
transform: translateX(-100%);
&:not(.zen-essentials-container) {
display: flex;
min-width: calc(100% - var(--zen-toolbox-padding) * 2);
}

33
src/zen/workspaces/ZenWorkspaces.mjs
View File

@@ -368,7 +368,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!this.containerSpecificEssentials) {
container = 0;
}
let essentialsContainer = document.querySelector(`.zen-essentials-container[container="${container}"]:not([clone])`);
let essentialsContainer = document.querySelector(`.zen-essentials-container[container="${container}"]:not([cloned])`);
if (!essentialsContainer) {
essentialsContainer = document.createXULElement('vbox');
essentialsContainer.className = 'zen-essentials-container zen-workspace-tabs-section';
@@ -395,10 +395,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
async _createWorkspaceTabsSection(workspace, tabs, perifery) {
const container = gBrowser.tabContainer.arrowScrollbox;
const section = this.#createWorkspaceSection(workspace);
section.classList.add('zen-workspace-normal-tabs-section');
container.appendChild(section);
const pinnedContainer = document.getElementById('vertical-pinned-tabs-container');
const pinnedSection = this.#createWorkspaceSection(workspace);
pinnedSection.classList.add('zen-workspace-pinned-tabs-section');
this._organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs);
section.appendChild(perifery.cloneNode(true));
pinnedSection.appendChild(
@@ -1836,14 +1838,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
_updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer, essentialContainer, workspaceIndicator) {
_updateMarginTopPinnedTabs(arrowscrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation = false) {
if (arrowscrollbox) {
const essentialsHeight = essentialContainer.getBoundingClientRect().height;
pinnedContainer.style.marginTop = essentialsHeight + 'px';
workspaceIndicator.style.marginTop = essentialsHeight + 'px';
let arrowMarginTop = pinnedContainer.getBoundingClientRect().height;
const isActive = arrowscrollbox.getAttribute('active') === 'true';
if (isActive || !this.containerSpecificEssentials) {
if ((isActive || !this.containerSpecificEssentials) && !forAnimation) {
document.getElementById('zen-tabs-wrapper').style.marginTop = essentialsHeight + 'px';
pinnedContainer.style.marginTop = '';
} else {
@@ -1935,7 +1937,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const newWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === newWorkspace.uuid);
const isGoingLeft = newWorkspaceIndex <= previousWorkspaceIndex;
const clonedEssentials = [];
if (shouldAnimate && this.containerSpecificEssentials) {
if (shouldAnimate && this.containerSpecificEssentials && previousWorkspace) {
for (const workspace of workspaces.workspaces) {
const essentialsContainer = this.getEssentialsSection(workspace.containerTabId);
if (clonedEssentials[clonedEssentials.length - 1]?.contextId == workspace.containerTabId) {
@@ -1957,6 +1959,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
essentialsContainer.parentNode.appendChild(essentialsClone);
}
}
if (shouldAnimate) {
document.getElementById('zen-tabs-wrapper').style.marginTop = '';
}
for (const element of document.querySelectorAll('.zen-workspace-tabs-section')) {
if (element.classList.contains('zen-essentials-container')) {
continue;
@@ -1967,6 +1972,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const offset = -(newWorkspaceIndex - elementWorkspaceIndex) * 100;
const newTransform = `translateX(${offset}%)`;
if (shouldAnimate) {
if (element.classList.contains('zen-workspace-pinned-tabs-section')) {
await this.updateTabsContainers(element, true);
}
element.removeAttribute('hidden');
animations.push(
gZenUIManager.motion.animate(
@@ -1991,7 +1999,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
element.removeAttribute('active');
}
}
if (this.containerSpecificEssentials) {
if (this.containerSpecificEssentials && previousWorkspace) {
// Animate essentials
const newWorkspaceEssentialsContainer = clonedEssentials.find((cloned) =>
cloned.workspaces.some((w) => w.uuid === newWorkspace.uuid)
@@ -2093,11 +2101,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
}
if (shouldAnimate) {
gZenUIManager.updateTabsToolbar();
}
await Promise.all(animations);
if (shouldAnimate) {
for (const cloned of clonedEssentials) {
cloned.container.remove();
}
this.updateTabsContainers();
}
const essentialsContainer = this.getEssentialsSection(newWorkspace.containerTabId);
essentialsContainer.removeAttribute('hidden');
@@ -2283,8 +2295,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
return workspaceData;
}
updateTabsContainers() {
this.onPinnedTabsResize([{ target: this.pinnedTabsContainer }]);
async updateTabsContainers(target = undefined, forAnimation = false) {
if (target && !(target instanceof HTMLElement)) {
target = null;
}
await this.onPinnedTabsResize([{ target: target ?? this.pinnedTabsContainer }], forAnimation);
}
updateShouldHideSeparator(arrowScrollbox, pinnedContainer) {
@@ -2301,7 +2316,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
async onPinnedTabsResize(entries) {
async onPinnedTabsResize(entries, forAnimation = false) {
if (!this._hasInitializedTabsStrip) {
return;
}
@@ -2331,7 +2346,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
);
const workspaceObject = this._workspaceCache.workspaces.find((w) => w.uuid === workspaceId);
const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator);
this._updateMarginTopPinnedTabs(arrowScrollbox, pinnedContainer, essentialContainer, workspaceIndicator, forAnimation);
this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
}
}