diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css index 2ecf54fab..f90b7f747 100644 --- a/src/zen/common/styles/zen-browser-ui.css +++ b/src/zen/common/styles/zen-browser-ui.css @@ -26,6 +26,10 @@ } } +:root:not([zen-single-toolbar='true']) #zen-navigator-toolbox #zen-sidebar-top-buttons { + --zen-toolbar-height: 42px; +} + :root[zen-before-loaded='true'] #browser > *:not(#zen-toast-container), :root[zen-before-loaded='true'] #urlbar { opacity: 0 !important; diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css index b837c0fd2..3b528b05f 100644 --- a/src/zen/common/styles/zen-single-components.css +++ b/src/zen/common/styles/zen-single-components.css @@ -173,7 +173,10 @@ body > #confetti { .toolbarbutton-1:not(#tabs-newtab-button) { --tab-border-radius: 6px; --toolbarbutton-border-radius: var(--tab-border-radius); - --toolbarbutton-inner-padding: 7px; + --toolbarbutton-inner-padding: 6px; + @media (-moz-platform: macos) { + --toolbarbutton-inner-padding: 8px; + } --toolbarbutton-outer-padding: 2px; transition: diff --git a/src/zen/glance/ZenGlanceManager.mjs b/src/zen/glance/ZenGlanceManager.mjs index 1990a1d77..88cf9caff 100644 --- a/src/zen/glance/ZenGlanceManager.mjs +++ b/src/zen/glance/ZenGlanceManager.mjs @@ -320,6 +320,9 @@ // we see flashing and if we do it directly, the animation does not play at all. // eslint-disable-next-line no-async-promise-executor return new Promise(async (resolve) => { + // Recalculate location. When opening from pinned tabs, + // view splitter doesn't catch if the tab is a glance tab or not. + gZenViewSplitter.onLocationChange(browserElement); this.#prepareGlanceAnimation(data, browserElement); if (data.width && data.height) { data.elementData = await this.#getElementPreviewData(data); diff --git a/src/zen/split-view/ZenViewSplitter.mjs b/src/zen/split-view/ZenViewSplitter.mjs index 9e8436691..3fe62d6c1 100644 --- a/src/zen/split-view/ZenViewSplitter.mjs +++ b/src/zen/split-view/ZenViewSplitter.mjs @@ -883,6 +883,8 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { tab.removeAttribute('split-view'); tab.linkedBrowser.zenModeActive = false; const container = tab.linkedBrowser.closest('.browserSidebarContainer'); + container.removeAttribute('is-zen-split'); + container.style.inset = ''; this._removeHeader(container); this.resetContainerStyle(container); container.removeEventListener('mousedown', this.handleTabEvent); @@ -1012,7 +1014,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { * * @param {Browser} browser - The browser instance. */ - async onLocationChange(browser) { + onLocationChange(browser) { this.disableTabRearrangeView(); let tab = window.gBrowser.getTabForBrowser(browser); const ignoreSplit = tab.hasAttribute('zen-dont-split-glance'); @@ -1256,6 +1258,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { tab.splitViewValue = this.currentView; tab.setAttribute('split-view', 'true'); const container = tab.linkedBrowser?.closest('.browserSidebarContainer'); + container.setAttribute('is-zen-split', 'true'); if (!container?.querySelector('.zen-tab-rearrange-button')) { // insert a header into the container const header = this._createHeader(container); @@ -1308,9 +1311,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { const nodeRootPosition = splitNode.positionToRoot; if (!splitNode.children) { const browserContainer = splitNode.tab.linkedBrowser.closest('.browserSidebarContainer'); - window.requestAnimationFrame(() => { - browserContainer.style.inset = `${nodeRootPosition.top}% ${nodeRootPosition.right}% ${nodeRootPosition.bottom}% ${nodeRootPosition.left}%`; - }); + browserContainer.style.inset = `${nodeRootPosition.top}% ${nodeRootPosition.right}% ${nodeRootPosition.bottom}% ${nodeRootPosition.left}%`; this._tabToSplitNode.set(splitNode.tab, splitNode); return; } @@ -1341,13 +1342,11 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { if (i < splittersNeeded) { const splitter = currentSplitters[i]; - window.requestAnimationFrame(() => { - if (splitNode.direction === 'column') { - splitter.style.inset = `${100 - childRootPosition.bottom}% ${childRootPosition.right}% 0% ${childRootPosition.left}%`; - } else { - splitter.style.inset = `${childRootPosition.top}% 0% ${childRootPosition.bottom}% ${100 - childRootPosition.right}%`; - } - }); + if (splitNode.direction === 'column') { + splitter.style.inset = `${100 - childRootPosition.bottom}% ${childRootPosition.right}% 0% ${childRootPosition.left}%`; + } else { + splitter.style.inset = `${childRootPosition.top}% 0% ${childRootPosition.bottom}% ${100 - childRootPosition.right}%`; + } } }); this.maybeDisableOpeningTabOnSplitView(); @@ -1539,7 +1538,6 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature { */ resetContainerStyle(container, removeDeckSelected = false) { container.removeAttribute('zen-split'); - container.style.inset = ''; if (removeDeckSelected) { container.classList.remove('deck-selected'); } diff --git a/src/zen/split-view/zen-decks.css b/src/zen/split-view/zen-decks.css index 40b6c7b62..bc88c016f 100644 --- a/src/zen/split-view/zen-decks.css +++ b/src/zen/split-view/zen-decks.css @@ -18,6 +18,7 @@ flex: 0; margin: 0; } + #zen-splitview-dropzone { border-radius: var(--zen-native-inner-radius); transition: inset ease-out 0.08s; @@ -31,10 +32,6 @@ #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'], #zen-splitview-dropzone { flex: 1; - margin: var(--zen-split-column-gap) var(--zen-split-row-gap) !important; - margin-bottom: 0 !important; - margin-left: 0 !important; - position: absolute !important; overflow: hidden; & .dialogStack { @@ -43,6 +40,20 @@ } } +.browserSidebarContainer[is-zen-split='true'], +#zen-splitview-dropzone { + position: absolute !important; + + margin: var(--zen-split-column-gap) var(--zen-split-row-gap) !important; + margin-bottom: 0 !important; + margin-left: 0 !important; + + &.browserSidebarContainer:not([zen-split='true']) { + margin-top: 0 !important; + visibility: hidden; + } +} + #zen-splitview-dropzone { margin-top: 0 !important; } @@ -66,13 +77,15 @@ } } +#tabbrowser-tabbox { + --zen-split-row-gap: var(--zen-element-separation); + --zen-split-column-gap: calc(var(--zen-element-separation) + 1px); +} + #tabbrowser-tabbox[zen-split-view='true'] { :root[zen-no-padding='true'] & { --zen-element-separation: 8px; } - - --zen-split-row-gap: var(--zen-element-separation); - --zen-split-column-gap: calc(var(--zen-element-separation) + 1px); margin-right: calc(-1 * var(--zen-split-column-gap)); } diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index 90901c862..a28fcebd2 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -115,7 +115,7 @@ } & #zen-sidebar-top-buttons { - margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0; + margin: calc(var(--zen-toolbox-padding) / 2) 0; :root[zen-right-side='true']:not([zen-window-buttons-reversed='true']) & { margin-top: 0; } @@ -961,7 +961,10 @@ } :root[zen-single-toolbar='true'] & { - --toolbarbutton-inner-padding: calc(var(--zen-toolbar-button-inner-padding) - 2px) !important; + --zen-toolbar-height: 36px; + @media (-moz-platform: macos) { + --zen-toolbar-height: 42px; + } & #PanelUI-button { order: -2; diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 7cb7685f1..3f8f614e4 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -3048,7 +3048,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature { parent.removeAttribute('icons-overflow'); return; } - const maxButtonSize = 30; // IMPORTANT: This should match the CSS size of the icons + const maxButtonSize = 32; // IMPORTANT: This should match the CSS size of the icons const minButtonSize = 15; const separation = 3; // Space between icons diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index eb1044835..0cc3092ee 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -239,7 +239,7 @@ --toolbarbutton-inner-padding: 6px; & image { - border-radius: calc(var(--border-radius-medium) - 4px) !important; + border-radius: max(calc(var(--border-radius-medium) - 4px), 4px) !important; width: 26px; height: 26px; margin-right: -1px;