mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-14 05:46:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Revamped the sidebar for complete stability over future releases, b=(no-bug), c=common, tabs, workspaces

Browse Source
This commit is contained in:
Mr. M
2025-05-15 21:25:54 +02:00
parent 086d1633df
commit 1d8e0fc3d7
9 changed files with 221 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/browser/base/content/navigator-toolbox-inc-xhtml.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index 00c8976d3e258c0875d7da2f3ec823d8907a84c9..b5735712aaa7c2ae2baa4b858e735413b130ca94 100644
index 00c8976d3e258c0875d7da2f3ec823d8907a84c9..191598ed701514ca7207cd64c3da46960a5d0e82 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -22,27 +22,24 @@ index 00c8976d3e258c0875d7da2f3ec823d8907a84c9..b5735712aaa7c2ae2baa4b858e735413
<toolbar id="TabsToolbar"
class="browser-toolbar browser-titlebar"
fullscreentoolbar="true"
@@ -50,6 +50,10 @@
@@ -50,6 +50,8 @@
tooltip="tabbrowser-tab-tooltip"
orient="horizontal"
stopwatchid="tabClick">
+<html:div id="zen-essentials-wrapper" skipintoolbarset="true"></html:div>
+<hbox id="zen-current-workspace-indicator-container"></hbox>
+<html:div id="zen-tabs-wrapper">
+<html:div id="zen-browser-tabs-container">
<hbox class="tab-drop-indicator" hidden="true"/>
<html:span id="tab-drag-empty-feedback" role="presentation"/>
# If the name (tabbrowser-arrowscrollbox) or structure of this changes
@@ -76,6 +80,8 @@
@@ -76,6 +78,7 @@
tooltip="dynamic-shortcut-tooltip"
data-l10n-id="tabs-toolbar-new-tab"/>
<html:span id="tabbrowser-tab-a11y-desc" hidden="true"/>
+</html:div>
+</html:div>
</tabs>
<toolbarbutton id="new-tab-button"
@@ -101,9 +107,10 @@
@@ -101,9 +104,10 @@
#include private-browsing-indicator.inc.xhtml
<toolbarbutton class="content-analysis-indicator toolbarbutton-1 content-analysis-indicator-icon"/>

1
src/browser/base/content/zen-assets.jar.inc.mn
View File

@@ -39,6 +39,7 @@
content/browser/zen-components/actors/ZenThemeMarketplaceParent.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceParent.sys.mjs)
content/browser/zen-components/actors/ZenThemeMarketplaceChild.sys.mjs (../../zen/mods/actors/ZenThemeMarketplaceChild.sys.mjs)
content/browser/zen-components/ZenWorkspace.mjs (../../zen/workspaces/ZenWorkspace.mjs)
content/browser/zen-components/ZenWorkspaces.mjs (../../zen/workspaces/ZenWorkspaces.mjs)
content/browser/zen-components/ZenWorkspacesStorage.mjs (../../zen/workspaces/ZenWorkspacesStorage.mjs)
content/browser/zen-components/ZenWorkspacesSync.mjs (../../zen/workspaces/ZenWorkspacesSync.mjs)

1
src/browser/base/content/zen-preloaded.inc.xhtml
View File

@@ -5,6 +5,7 @@
Services.scriptloader.loadSubScript("chrome://browser/content/zen-sets.js", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCommonUtils.mjs", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspace.mjs", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspacesSync.mjs", this);
Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenActorsManager.mjs", this);

4
src/zen/common/styles/zen-urlbar.css
View File

@@ -178,7 +178,9 @@
--zen-urlbar-background-transparent,
var(--zen-urlbar-background-base)
) !important;
box-shadow: 0px 0px 90px -10px rgba(0, 0, 0, 0.6) !important;
box-shadow:
0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
backdrop-filter: none !important;
border-radius: 12px !important;
outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.15)) !important;

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

@@ -304,9 +304,9 @@
this.log(`Created new pinned tab for pin ${pin.uuid} (isEssential: ${pin.isEssential})`);
gBrowser.pinTab(newTab);
if (!pin.isEssential) {
const container = document.querySelector(
`#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${pin.workspaceUuid}"]`
);
const container = ZenWorkspaces.workspaceElement(
pin.workspaceUuid
)?.pinnedTabsContainer;
if (container) {
container.insertBefore(newTab, container.lastChild);
}
@@ -809,7 +809,7 @@
moveToAnotherTabContainerIfNecessary(event, movingTabs) {
try {
const pinnedTabsTarget =
event.target.closest('#vertical-pinned-tabs-container') ||
event.target.closest('.zen-workspace-pinned-tabs-section') ||
event.target.closest('.zen-current-workspace-indicator');
const essentialTabsTarget = event.target.closest('.zen-essentials-container');
const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');

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

@@ -93,6 +93,10 @@
/* ==========================================================================
Toolbox Padding & Variables
========================================================================== */
#tabbrowser-arrowscrollbox {
height: 100%;
}
#browser {
/* Define base padding with platform-specific overrides */
--zen-min-toolbox-padding: 0.4rem;
@@ -169,7 +173,7 @@
max-height 0.2s ease-in-out;
/* Hide separator when specified by parent container attribute */
#vertical-pinned-tabs-container .zen-workspace-tabs-section[hide-separator] & {
.zen-workspace-pinned-tabs-section[hide-separator] & {
max-height: 0;
margin: 0 auto; /* Collapse margins */
}
@@ -452,40 +456,11 @@
}
}
/* Container for browser tabs within the sidebar */
#zen-browser-tabs-container {
overflow-x: clip !important; /* Force horizontal clipping */
position: relative; /* Positioning context */
}
/* ==========================================================================
Pinned Tabs Container Specific Styles
========================================================================== */
#vertical-pinned-tabs-container {
padding-inline-end: 0 !important; /* Remove end padding */
display: flex !important; /* Use flex layout */
flex-direction: column; /* Stack pinned tabs vertically */
min-height: fit-content !important;
overflow-x: clip; /* Clip horizontal overflow */
overflow-y: visible; /* Allow vertical overflow (for menus etc.) */
max-height: unset !important; /* Allow it to grow */
/* Make non-selected, non-hovered pinned tab backgrounds transparent */
& .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
background: transparent;
}
/* Center content within pinned tabs */
& .tabbrowser-tab .tab-content {
display: flex;
align-items: center;
justify-content: center;
}
/* Ensure glance tabs within pinned container fit their content */
.tabbrowser-tab[zen-glance-tab='true'] {
width: fit-content !important;
}
:root[zen-workspace-id] #vertical-pinned-tabs-container {
display: none;
}
/* Styling for the label shown when hovering the reset-pin button */
@@ -567,16 +542,6 @@
}
}
/* Style pinned tabs container when it has visible tabs */
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
position: relative;
/* Make pinned tabs take full width */
& .tabbrowser-tab {
width: 100%;
}
}
/* Style bottom buttons area when expanded */
& #zen-sidebar-bottom-buttons {
display: flex;
@@ -831,15 +796,6 @@
display: none !important;
}
/* Style pinned tabs container */
& #vertical-pinned-tabs-container:has(tab:not([hidden])) {
position: relative;
/* Constrain pinned tab width */
& .tabbrowser-tab {
max-width: var(--tab-min-width);
}
}
/* Adjust customization target padding and separator */
& #TabsToolbar-customization-target {
padding-bottom: var(--zen-toolbox-padding);
@@ -1305,12 +1261,23 @@
padding: 0 var(--zen-toolbox-padding);
display: grid;
position: absolute;
&[hidden='true'] {
--hidden-essentials-width: var(--zen-sidebar-width);
max-width: var(
--hidden-essentials-width
) !important; /* To still allow essentials to grid the tabs */
min-width: var(--hidden-essentials-width) !important;
/* Hide section visually and disable interaction when hidden attribute is present */
visibility: hidden;
pointer-events: none;
position: fixed; /* Fix position to prevent scrolling */
}
&[cloned] {
pointer-events: none;
}
}
@@ -1486,9 +1453,6 @@
========================================================================== */
.zen-workspace-tabs-section {
position: absolute;
transform: translateX(-100%);
&:not(.zen-essentials-container) {
display: flex;
min-width: calc(100% - var(--zen-toolbox-padding) * 2); /* Set width based on padding */
@@ -1498,13 +1462,6 @@
padding: 0 var(--zen-toolbox-padding);
width: 100%;
}
/* Hide section visually and disable interaction when hidden attribute is present */
&[hidden='true'] {
visibility: hidden;
pointer-events: none;
position: fixed; /* Fix position to prevent scrolling */
}
}
/* ==========================================================================

69
src/zen/workspaces/ZenWorkspace.mjs Normal file
View File

@@ -0,0 +1,69 @@
{
class ZenWorkspace extends MozXULElement {
static get markup() {
return `
<vbox class="zen-workspace-tabs-section zen-current-workspace-indicator" flex="1">
<hbox class="zen-current-workspace-indicator-icon"></hbox>
<hbox class="zen-current-workspace-indicator-name"></hbox>
</vbox>
<arrowscrollbox orient="vertical" tabindex="-1">
<vbox class="zen-workspace-tabs-section zen-workspace-pinned-tabs-section">
<html:div class="vertical-pinned-tabs-container-separator"></html:div>
</vbox>
<vbox class="zen-workspace-tabs-section zen-workspace-normal-tabs-section">
<!-- Let it me as an ID to mantain compatibility with firefox's tabbrowser -->
<hbox id="tabbrowser-arrowscrollbox-periphery">
<toolbartabstop/>
<toolbarbutton id="tabs-newtab-button"
class="toolbarbutton-1"
command="cmd_newNavigatorTab"
tooltip="dynamic-shortcut-tooltip"
data-l10n-id="tabs-toolbar-new-tab"/>
<spacer class="closing-tabs-spacer" style="width: 0;"/>
</hbox>
</vbox>
</arrowscrollbox>
`;
}
static get inheritedAttributes() {
return {
'.zen-workspace-tabs-section': 'zen-workspace-id=id',
};
}
constructor() {
super();
}
connectedCallback() {
if (this.delayConnectedCallback()) {
return;
}
this.appendChild(this.constructor.fragment);
this.tabsContainer = this.querySelector('.zen-workspace-normal-tabs-section');
this.indicator = this.querySelector('.zen-current-workspace-indicator');
this.pinnedTabsContainer = this.querySelector('.zen-workspace-pinned-tabs-section');
this.initializeAttributeInheritance();
this.scrollbox = this.querySelector('arrowscrollbox');
// Add them manually since attribute inheritance doesn't work
// for multiple layers of shadow DOM.
this.tabsContainer.setAttribute('zen-workspace-id', this.id);
this.pinnedTabsContainer.setAttribute('zen-workspace-id', this.id);
this.dispatchEvent(
new CustomEvent('ZenWorkspaceAttached', {
bubbles: true,
composed: true,
detail: { workspace: this },
})
);
}
}
customElements.define('zen-workspace', ZenWorkspace);
}

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

@@ -68,9 +68,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!this.shouldHaveWorkspaces) {
this._resolveInitialized();
document
.getElementById('zen-current-workspace-indicator-container')
.setAttribute('hidden', 'true');
console.warn('ZenWorkspaces: !!! ZenWorkspaces is disabled in hidden windows !!!');
return; // We are in a hidden window, don't initialize ZenWorkspaces
}
@@ -318,10 +315,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
return;
}
this._pinnedTabsResizeObserver.disconnect();
for (let element of document.getElementById('vertical-pinned-tabs-container').children) {
if (element.classList.contains('tabbrowser-tab')) {
continue;
}
for (let element of document.querySelectorAll('.zen-workspace-pinned-tabs-section')) {
this._pinnedTabsResizeObserver.observe(element, { box: 'border-box' });
}
for (let element of document.getElementById('zen-essentials-wrapper').children) {
@@ -336,16 +330,18 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!this._hasInitializedTabsStrip) {
return gBrowser.tabContainer.arrowScrollbox;
}
const activeWorkspace = this.activeWorkspace;
return document.querySelector(
`#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${activeWorkspace}"]`
);
return document.querySelector(`zen-workspace[active]`)?.tabsContainer;
}
get pinnedTabsContainer() {
if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
return document.getElementById('vertical-pinned-tabs-container');
}
return document.querySelector(`zen-workspace[active]`)?.pinnedTabsContainer;
}
get activeWorkspaceIndicator() {
return document.querySelector(
`#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
);
return document.querySelector(`zen-workspace[active]`)?.indicator;
}
get tabboxChildren() {
@@ -356,31 +352,30 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
return this.tabboxChildren.filter((child) => !child.hasAttribute('zen-empty-tab'));
}
get pinnedTabsContainer() {
if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
return document.getElementById('vertical-pinned-tabs-container');
workspaceElement(workspaceId) {
if (typeof workspaceId !== 'string') {
workspaceId = workspaceId?.uuid;
}
return document.querySelector(
`#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
);
return document.getElementById(workspaceId);
}
async initializeTabsStripSections() {
const perifery = document.getElementById('tabbrowser-arrowscrollbox-periphery');
perifery.setAttribute('hidden', 'true');
const tabs = gBrowser.tabContainer.allTabs;
const workspaces = await this._workspaces();
for (const workspace of workspaces.workspaces) {
await this._createWorkspaceTabsSection(workspace, tabs, perifery);
await this._createWorkspaceTabsSection(workspace, tabs);
}
if (tabs.length) {
const defaultSelectedContainer = document.querySelector(
`#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
const defaultSelectedContainer = this.workspaceElement(this.activeWorkspace).querySelector(
'.zen-workspace-normal-tabs-section'
);
const pinnedContainer = this.workspaceElement(this.activeWorkspace).querySelector(
'.zen-workspace-pinned-tabs-section'
);
// New profile with no workspaces does not have a default selected container
if (defaultSelectedContainer) {
const pinnedContainer = document.querySelector(
`#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${this.activeWorkspace}"]`
);
for (const tab of tabs) {
if (tab.hasAttribute('zen-essential')) {
this.getEssentialsSection(tab).appendChild(tab);
@@ -427,41 +422,31 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
return this.getEssentialsSection(currentWorkspace?.containerTabId);
}
#createWorkspaceSection(workspace) {
const section = document.createXULElement('vbox');
section.className = 'zen-workspace-tabs-section';
section.setAttribute('flex', '1');
section.setAttribute('zen-workspace-id', workspace.uuid);
return section;
}
async _createWorkspaceTabsSection(workspace, tabs, perifery) {
async _createWorkspaceTabsSection(workspace, tabs) {
const workspaceWrapper = document.createXULElement('zen-workspace');
const container = gBrowser.tabContainer.arrowScrollbox;
const section = this.#createWorkspaceSection(workspace);
section.classList.add('zen-workspace-normal-tabs-section');
container.appendChild(section);
workspaceWrapper.id = workspace.uuid;
if (this.activeWorkspace === workspace.uuid) {
workspaceWrapper.setAttribute('active', 'true');
}
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(
window.MozXULElement.parseXULToFragment(`
<html:div class="vertical-pinned-tabs-container-separator"></html:div>
`)
);
pinnedContainer.appendChild(pinnedSection);
const workspaceIndicator = this.#createWorkspaceSection(workspace);
workspaceIndicator.classList.add('zen-current-workspace-indicator');
workspaceIndicator.appendChild(
window.MozXULElement.parseXULToFragment(this.workspaceIndicatorXUL)
);
document
.getElementById('zen-current-workspace-indicator-container')
.appendChild(workspaceIndicator);
this.initIndicatorContextMenu(workspaceIndicator);
await new Promise((resolve) => {
workspaceWrapper.addEventListener(
'ZenWorkspaceAttached',
(event) => {
this._organizeTabsToWorkspaceSections(
workspace,
workspaceWrapper.tabsContainer,
workspaceWrapper.pinnedTabsContainer,
tabs
);
this.initIndicatorContextMenu(workspaceWrapper.indicator);
resolve();
},
{ once: true }
);
container.appendChild(workspaceWrapper);
});
}
_organizeTabsToWorkspaceSections(workspace, section, pinnedSection, tabs) {
@@ -477,7 +462,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
tabs.splice(tabs.indexOf(tab), 1);
tab = tab.group ?? tab;
if (tab.pinned) {
pinnedSection.insertBefore(tab, pinnedSection.nextSibling);
pinnedSection.nextSibling.before(tab);
} else {
if (!firstNormalTab) {
firstNormalTab = tab;
@@ -639,9 +624,6 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
_handleSwipeStart(event) {
if (!this.workspaceEnabled) return;
gZenUIManager.tabsWrapper.style.scrollbarWidth = 'none';
gZenUIManager.tabsWrapper.scrollTop = 0;
event.preventDefault();
event.stopPropagation();
this._swipeState = {
@@ -1840,13 +1822,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
moveTabsToWorkspace(tabs, workspaceID, justChangeId = false) {
for (let tab of tabs) {
const parent = tab.pinned
? '#vertical-pinned-tabs-container '
: '#tabbrowser-arrowscrollbox ';
const container = document.querySelector(
parent + `.zen-workspace-tabs-section[zen-workspace-id="${workspaceID}"]`
);
const workspaceContainer = this.workspaceElement(workspaceID);
const container = tab.pinned
? workspaceContainer?.pinnedTabsContainer
: workspaceContainer?.tabsContainer;
if (container?.contains(tab)) {
continue;
}
@@ -1979,6 +1958,14 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const workspaces = await this._workspaces();
// Refresh tab cache
for (const otherWorkspace of workspaces.workspaces) {
const container = this.workspaceElement(otherWorkspace.uuid);
if (otherWorkspace.uuid === workspace.uuid) {
container.setAttribute('active', 'true');
} else {
container.removeAttribute('active');
}
}
gBrowser.verticalPinnedTabsContainer =
this.pinnedTabsContainer || gBrowser.verticalPinnedTabsContainer;
gBrowser.tabContainer.verticalPinnedTabsContainer =
@@ -2029,39 +2016,23 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
}
_updateMarginTopPinnedTabs(
arrowscrollbox,
pinnedContainer,
_updatePaddingTopOnTabs(
workspaceElement,
essentialContainer,
workspaceIndicator,
forAnimation = false,
animateContainer = false
) {
if (
arrowscrollbox &&
!(this._inChangingWorkspace && !forAnimation && !this._alwaysAnimateMarginTop)
workspaceElement &&
!(this._inChangingWorkspace && !forAnimation && !this._alwaysAnimatePaddingTop)
) {
delete this._alwaysAnimateMarginTop;
delete this._alwaysAnimatePaddingTop;
const essentialsHeight = essentialContainer.getBoundingClientRect().height;
workspaceIndicator.style.marginTop = essentialsHeight + 'px';
let arrowMarginTop = pinnedContainer.getBoundingClientRect().height;
const isActive = arrowscrollbox.getAttribute('active') === 'true';
if ((isActive || !this.containerSpecificEssentials) && !forAnimation) {
document.getElementById('zen-tabs-wrapper').style.marginTop = essentialsHeight + 'px';
pinnedContainer.style.marginTop = '';
} else {
arrowMarginTop += essentialsHeight;
pinnedContainer.style.marginTop = essentialsHeight + 'px';
if (forAnimation) {
document.getElementById('zen-tabs-wrapper').style.marginTop = '';
gZenUIManager.tabsWrapper.scrollTop = 0;
}
}
if (!forAnimation && animateContainer) {
gZenUIManager.motion.animate(
arrowscrollbox,
workspaceElement,
{
marginTop: [arrowscrollbox.style.marginTop, arrowMarginTop + 'px'],
paddingTop: [workspaceElement.style.paddingTop, essentialsHeight + 'px'],
},
{
type: 'spring',
@@ -2070,7 +2041,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
);
} else {
arrowscrollbox.style.marginTop = arrowMarginTop + 'px';
workspaceElement.style.paddingTop = essentialsHeight + 'px';
}
}
}
@@ -2088,26 +2059,10 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const workspaceContextId = workspace.containerTabId;
const nextWorkspaceContextId =
workspaces.workspaces[workspaceIndex + (offsetPixels > 0 ? -1 : 1)]?.containerTabId;
if (this.containerSpecificEssentials && justMove) {
const waitForContainers = [];
for (const element of document.querySelectorAll(
'.zen-workspace-tabs-section.zen-workspace-pinned-tabs-section'
)) {
waitForContainers.push(this.updateTabsContainers(element, true));
}
await Promise.all(waitForContainers);
}
for (const otherWorkspace of workspaces.workspaces) {
const selector = `.zen-workspace-tabs-section[zen-workspace-id="${otherWorkspace.uuid}"]`;
const element = this.workspaceElement(otherWorkspace.uuid);
const newTransform = -(workspaceIndex - workspaces.workspaces.indexOf(otherWorkspace)) * 100;
for (const container of document.querySelectorAll(selector)) {
container.style.transform = `translateX(${newTransform + offsetPixels / 2}%)`;
if (!offsetPixels && !container.hasAttribute('active')) {
container.setAttribute('hidden', 'true');
} else {
container.removeAttribute('hidden');
}
}
element.style.transform = `translateX(${newTransform + offsetPixels / 2}%)`;
}
// Hide other essentials with different containerTabId
for (const container of otherContainersEssentials) {
@@ -2159,9 +2114,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
_fixIndicatorsNames(workspaces) {
for (const workspace of workspaces.workspaces) {
const workspaceIndicator = document.querySelector(
`#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${workspace.uuid}"]`
);
const workspaceIndicator = this.workspaceElement(workspace.uuid)?.indicator;
this.updateWorkspaceIndicator(workspace, workspaceIndicator);
}
}
@@ -2202,38 +2155,23 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
essentialsContainer.parentNode.appendChild(essentialsClone);
}
}
if (shouldAnimate && this.containerSpecificEssentials) {
const waitForContainers = [];
for (const element of document.querySelectorAll(
'.zen-workspace-tabs-section.zen-workspace-pinned-tabs-section'
)) {
waitForContainers.push(this.updateTabsContainers(element, true));
}
await Promise.all(waitForContainers);
}
for (const element of document.querySelectorAll('.zen-workspace-tabs-section')) {
for (const element of document.querySelectorAll('zen-workspace')) {
if (element.classList.contains('zen-essentials-container')) {
continue;
}
const existingTransform = element.style.transform;
const elementWorkspaceId = element.getAttribute('zen-workspace-id');
const elementWorkspaceId = element.id;
const elementWorkspaceIndex = workspaces.workspaces.findIndex(
(w) => w.uuid === elementWorkspaceId
);
const offset = -(newWorkspaceIndex - elementWorkspaceIndex) * 100;
const newTransform = `translateX(${offset}%)`;
if (shouldAnimate) {
element.removeAttribute('hidden');
// For some reason, motion seems to reset the margin top randomly
// so we explicitly set it to the current value
const marginTop = element.style.marginTop;
animations.push(
gZenUIManager.motion.animate(
element,
{
transform: existingTransform ? [existingTransform, newTransform] : newTransform,
marginTop: existingTransform ? [marginTop, marginTop] : marginTop,
},
{
type: 'spring',
@@ -2395,7 +2333,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
for (const cloned of clonedEssentials) {
cloned.container.remove();
}
this._alwaysAnimateMarginTop = true;
this._alwaysAnimatePaddingTop = true;
await this.updateTabsContainers();
}
const essentialsContainer = this.getEssentialsSection(newWorkspace.containerTabId);
@@ -2627,10 +2565,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
};
if (moveTabs) {
this._prepareNewWorkspace(window);
const perifery = document.querySelector('#tabbrowser-arrowscrollbox-periphery[hidden]');
perifery?.removeAttribute('hidden');
this._createWorkspaceTabsSection(window, tabs, perifery);
perifery.setAttribute('hidden', 'true');
this._createWorkspaceTabsSection(window, tabs);
}
return window;
}
@@ -2723,15 +2658,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
workspacesIds.push(originalWorkspaceId);
}
for (const workspaceId of workspacesIds) {
const arrowScrollbox = document.querySelector(
`#tabbrowser-arrowscrollbox .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
);
const pinnedContainer = document.querySelector(
`#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
);
const workspaceIndicator = document.querySelector(
`#zen-current-workspace-indicator-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
);
const workspaceElement = this.workspaceElement(workspaceId);
const arrowScrollbox = workspaceElement.tabsContainer;
const pinnedContainer = workspaceElement.pinnedTabsContainer;
const workspaceObject = this.getWorkspaceFromId(workspaceId);
const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
const essentialNumChildren = essentialContainer.children.length;
@@ -2748,11 +2677,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
} else {
essentialContainer.removeAttribute('data-hack-type');
}
this._updateMarginTopPinnedTabs(
arrowScrollbox,
pinnedContainer,
this._updatePaddingTopOnTabs(
workspaceElement,
essentialContainer,
workspaceIndicator,
forAnimation,
animateContainer
);
@@ -2853,9 +2780,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (!workspaceId) {
continue;
}
const contaienr = document.querySelector(
`#vertical-pinned-tabs-container .zen-workspace-tabs-section[zen-workspace-id="${workspaceId}"]`
);
const contaienr = this.workspaceElement(workspaceId).pinnedTabsContainer;
contaienr.insertBefore(tab, contaienr.lastChild);
changed = true;
}
@@ -3143,15 +3068,19 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
const essentialsContainer = document.querySelectorAll(
'#zen-essentials-wrapper .zen-workspace-tabs-section'
);
let pinnedContainers = document.querySelectorAll(
'#vertical-pinned-tabs-container .zen-workspace-tabs-section'
);
let normalContainers = document.querySelectorAll(
'#tabbrowser-arrowscrollbox .zen-workspace-tabs-section'
);
let pinnedContainers = [];
let normalContainers = [];
if (!this._hasInitializedTabsStrip) {
pinnedContainers = [document.getElementById('vertical-pinned-tabs-container')];
normalContainers = [this.activeWorkspaceStrip];
} else {
for (const workspace of this._workspaceCache.workspaces) {
const container = this.workspaceElement(workspace.uuid);
if (container) {
pinnedContainers.push(container.pinnedTabsContainer);
normalContainers.push(container.tabsContainer);
}
}
}
const containers = [...essentialsContainer, ...pinnedContainers, ...normalContainers];
for (const container of containers) {
@@ -3185,12 +3114,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
let children = this.tabboxChildren;
return children.filter((node) => node.tagName == 'tab-group');
}
const pinnedContainers = document.querySelectorAll(
'#vertical-pinned-tabs-container .zen-workspace-tabs-section'
);
const normalContainers = document.querySelectorAll(
'#tabbrowser-arrowscrollbox .zen-workspace-tabs-section'
);
const pinnedContainers = [];
const normalContainers = [];
for (const workspace of this._workspaceCache.workspaces) {
const container = this.workspaceElement(workspace.uuid);
if (container) {
pinnedContainers.push(container.pinnedTabsContainer);
normalContainers.push(container.tabsContainer);
}
}
const containers = [...pinnedContainers, ...normalContainers];
const tabGroups = [];
for (const container of containers) {

32
src/zen/workspaces/zen-workspaces.css
View File

@@ -454,16 +454,11 @@
}
/* Mark workspaces indicator */
#zen-current-workspace-indicator-container {
position: relative;
margin-bottom: var(--zen-workspace-indicator-height);
}
.zen-current-workspace-indicator {
padding: calc(15px + var(--zen-toolbox-padding))
calc(4px + var(--tab-inline-padding) + var(--zen-toolbox-padding));
font-weight: 600;
position: absolute;
position: relative;
max-height: var(--zen-workspace-indicator-height);
min-height: var(--zen-workspace-indicator-height);
gap: var(--tab-icon-end-margin);
@@ -508,6 +503,27 @@
}
}
#zen-current-workspace-indicator-container[hidden='true'] {
display: none !important;
/* mark: workspace element */
zen-workspace {
flex-direction: column;
width: calc(100% + var(--zen-toolbox-padding) * 2);
position: absolute;
height: 100%;
overflow: hidden;
& > arrowscrollbox {
max-height: 100%;
overflow: hidden;
&::part(scrollbutton-up),
&::part(scrollbutton-down) {
display: none;
}
&::part(scrollbox) {
scrollbar-width: thin;
scrollbar-color: var(--vertical-tabs-scrollbar-color);
overflow-y: auto;
}
}
}