diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css index fb8969930..c92fa6216 100644 --- a/src/browser/base/content/zen-styles/zen-decks.css +++ b/src/browser/base/content/zen-styles/zen-decks.css @@ -44,7 +44,14 @@ } #tabbrowser-tabpanels[zen-split-view='true'] .browserSidebarContainer.deck-selected { - outline: 1px solid var(--zen-primary-color) !important; + &:not(.zen-glance-overlay) { + outline: 1px solid var(--zen-primary-color) !important; + } + + &.zen-glance-overlay { + flex: 1; + margin-top: calc(var(--zen-element-separation) / 2); + } } #tabbrowser-tabbox:has(#tabbrowser-tabpanels[zen-split-view='true']) { diff --git a/src/browser/base/zen-components/ZenGlanceManager.mjs b/src/browser/base/zen-components/ZenGlanceManager.mjs index f6865c5dd..80947e1a8 100644 --- a/src/browser/base/zen-components/ZenGlanceManager.mjs +++ b/src/browser/base/zen-components/ZenGlanceManager.mjs @@ -206,6 +206,14 @@ }); } + _clearContainerStyles(container) { + const inset = container.style.inset; + window.requestAnimationFrame(() => { + container.removeAttribute('style'); + container.style.inset = inset; + }); + } + closeGlance({ noAnimation = false, onTabClose = false, setNewID = null, isDifferent = false, hasFocused = false } = {}) { if (this._animating || !this.#currentBrowser || this.animatingOpen || this._duringOpening) { return; @@ -228,7 +236,7 @@ this.browserWrapper.removeAttribute('has-finished-animation'); if (noAnimation) { - this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style'); + this._clearContainerStyles(this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer')); this.quickCloseGlance({ closeCurrentTab: false }); return; } @@ -270,7 +278,7 @@ } ) .then(() => { - this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer').removeAttribute('style'); + this._clearContainerStyles(this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer')); }); this.browserWrapper.style.opacity = 1; gZenUIManager.motion @@ -510,7 +518,7 @@ ZenWorkspaces.updateTabsContainers(); this.browserWrapper.removeAttribute('animate-full'); this.overlay.classList.remove('zen-glance-overlay'); - this.browserWrapper.removeAttribute('style'); + this._clearContainerStyles(this.browserWrapper); this.animatingFullOpen = false; this.closeGlance({ noAnimation: true }); this.#glances.delete(this.#currentGlanceID); @@ -522,7 +530,7 @@ index: this.getTabPosition(this.#currentTab), }); - this.browserWrapper.removeAttribute('style'); + this._clearContainerStyles(this.browserWrapper); this.browserWrapper.removeAttribute('has-finished-animation'); this.browserWrapper.setAttribute('animate-full', true); this.#currentTab.removeAttribute('zen-glance-tab'); diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs index 5a1aa091f..dd6634747 100644 --- a/src/browser/base/zen-components/ZenViewSplitter.mjs +++ b/src/browser/base/zen-components/ZenViewSplitter.mjs @@ -914,7 +914,12 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { */ async onLocationChange(browser) { this.disableTabRearrangeView(); - const tab = window.gBrowser.getTabForBrowser(browser); + let tab = window.gBrowser.getTabForBrowser(browser); + if (tab.hasAttribute('zen-glance-tab')) { + // Extract from parent node so we are not selecting the wrong (current) tab + tab = tab.parentNode.closest('.tabbrowser-tab'); + console.assert(tab, 'Tab not found for zen-glance-tab'); + } this.updateSplitViewButton(!tab?.splitView); if (tab) { this.updateSplitView(tab);