diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch index d6f3a8475..7b6fcafee 100644 --- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch +++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch @@ -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 + -+ + -+ + diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 04f14da29..2f1fca0b4 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -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) diff --git a/src/browser/base/content/zen-preloaded.inc.xhtml b/src/browser/base/content/zen-preloaded.inc.xhtml index 3578e38db..86789cd0d 100644 --- a/src/browser/base/content/zen-preloaded.inc.xhtml +++ b/src/browser/base/content/zen-preloaded.inc.xhtml @@ -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); diff --git a/src/zen/common/styles/zen-urlbar.css b/src/zen/common/styles/zen-urlbar.css index af9e806ae..65a25877a 100644 --- a/src/zen/common/styles/zen-urlbar.css +++ b/src/zen/common/styles/zen-urlbar.css @@ -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; diff --git a/src/zen/tabs/ZenPinnedTabManager.mjs b/src/zen/tabs/ZenPinnedTabManager.mjs index af479f49d..e3752ea7d 100644 --- a/src/zen/tabs/ZenPinnedTabManager.mjs +++ b/src/zen/tabs/ZenPinnedTabManager.mjs @@ -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'); diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index f4b44e11e..7b6257d77 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -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 */ - } } /* ========================================================================== diff --git a/src/zen/workspaces/ZenWorkspace.mjs b/src/zen/workspaces/ZenWorkspace.mjs new file mode 100644 index 000000000..4c734a12c --- /dev/null +++ b/src/zen/workspaces/ZenWorkspace.mjs @@ -0,0 +1,69 @@ +{ + class ZenWorkspace extends MozXULElement { + static get markup() { + return ` + + + + + + + + + + + + + + + + + + `; + } + + 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); +} diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 06ffab3c7..54ef0ada4 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -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(` - - `) - ); - 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) { diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index 89c16d3a8..6bcc4da48 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -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; + } + } }