1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-07 21:49:58 +02:00

chore: Continued working on containerized essentials, b=(no-bug), c=common, compact-mode, tabs, workspaces

This commit is contained in:
Mr. M 2025-04-20 23:33:57 +02:00
parent 5bfb55a27d
commit 5dfc6a663f
No known key found for this signature in database
GPG key ID: 6292C4C8F8652B18
6 changed files with 60 additions and 19 deletions

View file

@ -35,7 +35,7 @@ export var ZenCustomizableUI = new (class {
}
_addSidebarButtons(window) {
const toolbox = window.document.getElementById('navigator-toolbox');
const toolbox = window.gNavToolbox;
// Set a splitter to navigator-toolbox
const splitter = window.document.createXULElement('splitter');

View file

@ -117,8 +117,7 @@
const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
const browser = document.getElementById('browser');
const toolbox = document.getElementById('navigator-toolbox');
browser.prepend(toolbox);
browser.prepend(gNavToolbox);
const sidebarPanelWrapper = document.getElementById('tabbrowser-tabbox');
for (let id of kElementsToAppend) {

View file

@ -28,7 +28,7 @@ var gZenUIManager = {
gZenCompactModeManager.getAndApplySidebarWidth.bind(gZenCompactModeManager),
this.sidebarHeightThrottle
)
).observe(document.getElementById('navigator-toolbox'));
).observe(gNavToolbox);
SessionStore.promiseAllWindowsRestored.then(() => {
this._hasLoadedDOM = true;
@ -322,11 +322,7 @@ var gZenVerticalTabsManager = {
},
get navigatorToolbox() {
if (this._navigatorToolbox) {
return this._navigatorToolbox;
}
this._navigatorToolbox = document.getElementById('navigator-toolbox');
return this._navigatorToolbox;
return gNavToolbox;
},
initRightSideOrderContextMenu() {
@ -678,7 +674,7 @@ var gZenVerticalTabsManager = {
_updateMaxWidth() {
const maxWidth = Services.prefs.getIntPref('zen.view.sidebar-expanded.max-width');
const toolbox = document.getElementById('navigator-toolbox');
const toolbox = gNavToolbox;
if (!this._prefsCompactMode) {
toolbox.style.maxWidth = `${maxWidth}px`;
} else {

View file

@ -88,10 +88,7 @@ var gZenCompactModeManager = {
},
get sidebar() {
if (!this._sidebar) {
this._sidebar = document.getElementById('navigator-toolbox');
}
return this._sidebar;
return gNavToolbox;
},
flashSidebarIfNecessary(aInstant = false) {

View file

@ -1062,7 +1062,6 @@
min-width: calc(100% + var(--zen-toolbox-padding) * 2);
padding: 0 var(--zen-toolbox-padding);
transform: none !important; /* TODO: Animate essentials transition */
display: grid;
&[hidden='true'] {
opacity: 0;

View file

@ -343,11 +343,12 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
get _hoveringSidebar() {
return document.getElementById('navigator-toolbox').hasAttribute('zen-has-hover');
return gNavToolbox.hasAttribute('zen-has-hover');
}
_handleAppCommand(event) {
if (!this.workspaceEnabled || !this._hoveringSidebar) {
// note: Dont use this._hoveringSidebar as it's not as reliable as checking for :hover
if (!this.workspaceEnabled || !gNavToolbox.matches(':hover')) {
return;
}
@ -368,7 +369,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
_setupSidebarHandlers() {
const toolbox = document.getElementById('navigator-toolbox');
const toolbox = gNavToolbox;
const scrollCooldown = 200; // Milliseconds to wait before allowing another scroll
const scrollThreshold = 2; // Minimum scroll delta to trigger workspace change
@ -419,7 +420,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
initializeGestureHandlers() {
const elements = [
document.getElementById('navigator-toolbox'),
gNavToolbox,
// event handlers do not work on elements inside shadow DOM so we need to attach them directly
document.getElementById('tabbrowser-arrowscrollbox').shadowRoot.querySelector('scrollbox'),
];
@ -1739,6 +1740,26 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const animations = [];
const workspaces = await this._workspaces();
const newWorkspaceIndex = workspaces.workspaces.findIndex((w) => w.uuid === newWorkspace.uuid);
const clonedEssentials = [];
const essentialsContainerMap = {};
if (shouldAnimate) {
for (const workspace of workspaces.workspaces) {
const essentialsContainer = this.getEssentialsSection(workspace.containerTabId);
essentialsContainer.setAttribute('hidden', 'true');
const essentialsClone = essentialsContainer.cloneNode(true);
essentialsClone.removeAttribute('hidden');
clonedEssentials.push({
container: essentialsClone,
workspaceId: workspace.uuid,
contextId: workspace.containerTabId,
originalContainer: essentialsContainer,
repeat: 0
});
essentialsContainer.parentNode.appendChild(essentialsClone);
// +0 to convert null to 0
essentialsContainerMap[workspace.containerTabId + 0] = essentialsContainer;
}
}
for (const element of document.querySelectorAll('.zen-workspace-tabs-section')) {
if (element.classList.contains('zen-essentials-container')) {
continue;
@ -1763,6 +1784,26 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
)
);
if (element.parentNode.id === 'zen-current-workspace-indicator-container') {
// Get essential container clone for this workspace
const clonedEssential = clonedEssentials.find((cloned) => cloned.workspaceId === elementWorkspaceId);
if (clonedEssential && !clonedEssential.animating) {
clonedEssential.animating = true; // Avoid motion hanging due to animating the same element twice
animations.push(
gZenUIManager.motion.animate(
clonedEssential.container,
{
transform: existingTransform ? [existingTransform, newTransform] : newTransform,
},
{
type: 'spring',
bounce: 0,
duration: kGlobalAnimationDuration,
}
)
);
}
}
}
if (offset === 0) {
element.setAttribute('active', 'true');
@ -1774,6 +1815,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
await Promise.all(animations);
if (shouldAnimate) {
for (const cloned of clonedEssentials) {
cloned.container.remove();
}
}
const essentialsContainer = this.getEssentialsSection(newWorkspace.containerTabId);
essentialsContainer.removeAttribute('hidden');
essentialsContainer.style.transform = 'none';
gBrowser.tabContainer._invalidateCachedTabs();
this._animatingChange = false;
}