diff --git a/src/browser/base/content/zen-styles/zen-folders.css b/src/browser/base/content/zen-styles/zen-folders.css index d84a160b0..06c516840 100644 --- a/src/browser/base/content/zen-styles/zen-folders.css +++ b/src/browser/base/content/zen-styles/zen-folders.css @@ -1,29 +1,54 @@ tab-group[split-view-group] { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(calc(var(--tab-pinned-min-width-expanded) + 20px), auto)); - gap: 1px; + display: flex; + flex-wrap: nowrap; border-radius: var(--border-radius-medium); - padding: 0; + padding: 0 2px; margin-inline: var(--tab-block-margin); margin-block: var(--tab-block-margin); min-height: var(--tab-min-height); outline: var(--tab-outline); outline-offset: var(--tab-outline-offset); outline-color: var(--tab-selected-outline-color); - padding: 1px; transition: scale 0.1s ease; + align-items: center; + --zen-split-view-active-tab-bg: color-mix(in srgb, var(--zen-toolbar-element-bg), transparent 40%); - & > * { - --tab-min-height: 32px; - --tab-selected-bgcolor: var(--zen-toolbar-element-bg); + & > .tabbrowser-tab { + --tab-min-height: 28px; + --tab-selected-bgcolor: var(--zen-split-view-active-tab-bg); + --tab-hover-background-color: transparent; --tab-selected-shadow: none; --border-radius-medium: var(--tab-border-radius); --zen-active-tab-scale: 1; + + flex: 1 !important; + + &:not(:last-child)::after { + content: ''; + width: 1px; + height: 16px; + background-color: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.2)); + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); + } } - &:has(tab[visuallyselected]) { + &:has(> tab[visuallyselected]) { background-color: var(--tab-selected-bgcolor); box-shadow: var(--tab-selected-shadow); + + & > .tabbrowser-tab { + --tab-hover-background-color: var(--zen-split-view-active-tab-bg); + & .tab-background { + background-color: var(--zen-split-view-active-tab-bg); + } + + &::after { + display: none; + } + } } &:active { diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css index ed93624a2..d15c7eef0 100644 --- a/src/browser/base/content/zen-styles/zen-theme.css +++ b/src/browser/base/content/zen-styles/zen-theme.css @@ -104,7 +104,7 @@ --zen-button-border-radius: 5px; --zen-button-padding: 0.6rem 1.2rem; - --zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.125)); + --zen-toolbar-element-bg: light-dark(rgba(89, 89, 89, 0.1), rgba(255, 255, 255, 0.1)); /* Toolbar */ --zen-toolbar-height: 38px; diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs index e45b3eda6..d9577d093 100644 --- a/src/browser/base/zen-components/ZenViewSplitter.mjs +++ b/src/browser/base/zen-components/ZenViewSplitter.mjs @@ -69,6 +69,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { _edgeHoverSize; minResizeWidth; + MAX_TABS = 4; + init() { XPCOMUtils.defineLazyPreferenceGetter(this, 'canChangeTabOnHover', 'zen.splitView.change-on-hover', false); XPCOMUtils.defineLazyPreferenceGetter(this, 'minResizeWidth', 'zen.splitView.min-resize-width', 7); @@ -673,7 +675,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { * @returns {boolean} True if the tabs can be split, false otherwise. */ contextCanSplitTabs() { - if (window.gBrowser.selectedTabs.length < 2) { + if (window.gBrowser.selectedTabs.length < 2 || window.gBrowser.selectedTabs.length > this.MAX_TABS) { return false; } for (const tab of window.gBrowser.selectedTabs) { @@ -707,8 +709,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { */ splitTabs(tabs, gridType) { const firstisPinned = tabs[0].pinned; - tabs = tabs.filter((t) => t.pinned === firstisPinned); - if (tabs.length < 2) { + tabs = tabs.filter((t) => t.pinned === firstisPinned && !t.hidden && !t.hasAttribute('zen-empty-tab')); + if (tabs.length < 2 || tabs.length > this.MAX_TABS) { return; } @@ -724,9 +726,10 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { group.layoutTree = this.calculateLayoutTree([...new Set(group.tabs.concat(tabs))], gridType); } else { // Add any tabs that are not already in the group - for (const tab of tabs) { - if (!group.tabs.includes(tab) && tab.pinned === group.pinned) { - group.tabs.push(tab); + for (let i = 0; i < tabs.length; i++) { + const tab = tabs[i]; + if (!group.tabs.includes(tab) && tab.pinned === !!group.pinned) { + gBrowser.moveTabToGroup(tab, this._getSplitViewGroup(tabs)); this.addTabToSplit(tab, group.layoutTree); } } @@ -1302,7 +1305,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { const groupIndex = this._data.findIndex((group) => group.tabs.includes(droppedOnTab)); const group = this._data[groupIndex]; - if (!group.tabs.includes(draggedTab)) { + if (!group.tabs.includes(draggedTab) && group.tabs.length < this.MAX_TABS) { // First move the tab to the split view group let splitGroup = droppedOnTab.group; if (splitGroup && (!draggedTab.group || draggedTab.group !== splitGroup)) {