ZenBrowserMirrors/components
1
0
Fork 0
mirror of https://github.com/zen-browser/components.git synced 2025-07-08 09:09:59 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Put resize splitters inside tabBrowser

Browse source
This commit is contained in:
brahim 2024-09-14 19:19:07 +02:00
parent 73dc9e79c2
commit 0daa12f762
1 changed files with 34 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/ZenViewSplitter.mjs
View file

@ -269,8 +269,8 @@ var gZenViewSplitter = new (class {
} }
} }
this.applySplitters(splitData);
this.activateSplitView(splitData, tab); this.activateSplitView(splitData, tab);
if (!splitData.sizes) this.applySplitters(splitData);
} }
/** /**
@ -284,6 +284,7 @@ var gZenViewSplitter = new (class {
} }
this.tabBrowserPanel.removeAttribute('zen-split-view'); this.tabBrowserPanel.removeAttribute('zen-split-view');
this.tabBrowserPanel.style.gridTemplateAreas = ''; this.tabBrowserPanel.style.gridTemplateAreas = '';
this.tabBrowserPanel.style.gridTemplateColumns = '';
this.setTabsDocShellState(this._data[this.currentView].tabs, false); this.setTabsDocShellState(this._data[this.currentView].tabs, false);
this.currentView = -1; this.currentView = -1;
} }
@ -303,6 +304,7 @@ var gZenViewSplitter = new (class {
this.setTabsDocShellState(splitData.tabs, true); this.setTabsDocShellState(splitData.tabs, true);
this.updateSplitViewButton(false); this.updateSplitViewButton(false);
this.updateGridSizes();
} }
/** /**
@ -325,22 +327,27 @@ var gZenViewSplitter = new (class {
applySplitters(splitData) { applySplitters(splitData) {
const tabs = splitData.tabs; const tabs = splitData.tabs;
for (let i = 0; i < tabs.length; i++) { const gridType = splitData.gridType;
const tab = tabs[0];
const container = tab.linkedBrowser.closest('.browserSidebarContainer');
if (splitData.gridType === 'vsep' && i != tabs.length - 1) { const vSplitters = gridType === 'vsep' ? (tabs.length - 1) : gridType === 'hsep' ? 0 : NaN;
let splitter = document.createXULElement('div');
splitter.className = 'zen-split-view-splitter'; const totalVsplitters = Math.max(...this._data.map(s => s.verticalSplitters || 0));
splitter.setAttribute('orient', 'vertical'); for (let i = totalVsplitters; i < vSplitters; i++) {
splitter.addEventListener('mousedown', this.handleSplitterMouseDown); let splitter = document.createXULElement('div');
container.insertAdjacentElement("beforeend", splitter); splitter.className = 'zen-split-view-splitter';
} splitter.setAttribute('orient', 'vertical');
splitter.setAttribute('idx', i + 1);
splitter.style = `grid-area: splitter${i + 1}`;
splitter.addEventListener('mousedown', this.handleSplitterMouseDown);
this.tabBrowserPanel.insertAdjacentElement("afterbegin", splitter);
} }
splitData.verticalSplitters = vSplitters;
if (splitData.gridType === 'vsep') { if (!splitData.sizes) {
const w = 100 / tabs.length; if (splitData.gridType === 'vsep') {
splitData.sizes = tabs.map(t => ({width: w})); const w = 100 / tabs.length;
splitData.sizes = tabs.map(t => ({width: w}));
}
} }
} }
@ -356,7 +363,7 @@ var gZenViewSplitter = new (class {
return this.calculateGridAreasForGrid(tabs); return this.calculateGridAreasForGrid(tabs);
} }
if (gridType === 'vsep') { if (gridType === 'vsep') {
return `'${tabs.map((_, j) => `tab${j + 1}`).join(' ')}'`; return `'${tabs.slice(0, -1).map((_, j) => `tab${j + 1} splitter${j + 1}`).join(' ')} tab${tabs.length}'`;
} }
if (gridType === 'hsep') { if (gridType === 'hsep') {
return tabs.map((_, j) => `'tab${j + 1}'`).join(' '); return tabs.map((_, j) => `'tab${j + 1}'`).join(' ');
@ -428,16 +435,16 @@ var gZenViewSplitter = new (class {
const tab = window.gBrowser.tabs.find((t) => t.linkedBrowser.closest('.browserSidebarContainer') === container); const tab = window.gBrowser.tabs.find((t) => t.linkedBrowser.closest('.browserSidebarContainer') === container);
const currentView = this._data[this.currentView]; const currentView = this._data[this.currentView];
const tabIdx = currentView.tabs.findIndex(t => t === tab); const tabIdx = event.target.getAttribute('idx');
let dragFunc; let dragFunc;
let prevX = event.clientX; let prevX = event.clientX;
dragFunc = (dEvent) => { dragFunc = (dEvent) => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
const movementX = dEvent.clientX - prevX; const movementX = dEvent.clientX - prevX;
const percentageChange = (movementX / this._tabBrowserPanel.getBoundingClientRect().width) * 100; const percentageChange = (movementX / this._tabBrowserPanel.getBoundingClientRect().width) * 100;
currentView.sizes[tabIdx].width += percentageChange; currentView.sizes[tabIdx - 1].width += percentageChange;
currentView.sizes[tabIdx + 1].width -= percentageChange; currentView.sizes[tabIdx].width -= percentageChange;
this._tabBrowserPanel.style['grid-template-columns'] = currentView.tabs.map((t, i) => `${currentView.sizes[i].width}%`).join(' '); this.updateGridSizes();
prevX = dEvent.clientX; prevX = dEvent.clientX;
}); });
} }
@ -449,6 +456,13 @@ var gZenViewSplitter = new (class {
addEventListener('mouseup', stopListeners); addEventListener('mouseup', stopListeners);
} }
updateGridSizes() {
const currentView = this._data[this.currentView];
this._tabBrowserPanel.style.gridTemplateColumns = currentView.tabs.slice(0, -1).map(
(t, i) => `calc(${currentView.sizes[i].width}% - 7px) 7px`
).join(' ');
}
/** /**
* Sets the docshell state for the tabs. * Sets the docshell state for the tabs.
* *