mirror of
https://github.com/zen-browser/components.git
synced 2025-07-08 18:50:01 +02:00
Fix split update logic, fix add tab to split
This commit is contained in:
parent
e349aee50c
commit
422adbb896
1 changed files with 49 additions and 67 deletions
|
@ -309,7 +309,7 @@ var gZenViewSplitter = new class {
|
||||||
|
|
||||||
currentData.tabs[startIdx] = endTab;
|
currentData.tabs[startIdx] = endTab;
|
||||||
currentData.tabs[endIdx] = startTab;
|
currentData.tabs[endIdx] = startTab;
|
||||||
this.applyGridToTabs(currentData.tabs, currentData.gridType, gBrowser.selectedTab);
|
this.applyGridToTabs(currentData.tabs, currentData.gridType);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -323,7 +323,8 @@ var gZenViewSplitter = new class {
|
||||||
tab.linkedBrowser.zenModeActive = false;
|
tab.linkedBrowser.zenModeActive = false;
|
||||||
const container = tab.linkedBrowser.closest('.browserSidebarContainer');
|
const container = tab.linkedBrowser.closest('.browserSidebarContainer');
|
||||||
this.resetContainerStyle(container);
|
this.resetContainerStyle(container);
|
||||||
|
container.removeEventListener('click', this.handleTabEvent);
|
||||||
|
container.removeEventListener('mouseover', this.handleTabEvent);
|
||||||
if (!forUnsplit) {
|
if (!forUnsplit) {
|
||||||
tab.linkedBrowser.docShellIsActive = false;
|
tab.linkedBrowser.docShellIsActive = false;
|
||||||
}
|
}
|
||||||
|
@ -336,7 +337,8 @@ var gZenViewSplitter = new class {
|
||||||
*/
|
*/
|
||||||
removeGroup(groupIndex) {
|
removeGroup(groupIndex) {
|
||||||
if (this.currentView === groupIndex) {
|
if (this.currentView === groupIndex) {
|
||||||
this.resetSplitView();
|
this.deactivateCurrentSplitView();
|
||||||
|
gBrowser.selectedBrowser.closest('.browserSidebarContainer').classList.add('deck-selected');
|
||||||
}
|
}
|
||||||
for (const tab of this._data[groupIndex].tabs) {
|
for (const tab of this._data[groupIndex].tabs) {
|
||||||
this.resetTabState(tab, true);
|
this.resetTabState(tab, true);
|
||||||
|
@ -344,21 +346,6 @@ var gZenViewSplitter = new class {
|
||||||
this._data.splice(groupIndex, 1);
|
this._data.splice(groupIndex, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Resets the split view.
|
|
||||||
*/
|
|
||||||
resetSplitView(resetTabState = true) {
|
|
||||||
if (resetTabState) {
|
|
||||||
for (const tab of this._data[this.currentView].tabs) {
|
|
||||||
this.resetTabState(tab, true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.removeSplitters();
|
|
||||||
this.tabBrowserPanel.removeAttribute('zen-split-view');
|
|
||||||
|
|
||||||
this.currentView = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* context menu item display update
|
* context menu item display update
|
||||||
*/
|
*/
|
||||||
|
@ -471,15 +458,8 @@ var gZenViewSplitter = new class {
|
||||||
async onLocationChange(browser) {
|
async onLocationChange(browser) {
|
||||||
const tab = window.gBrowser.getTabForBrowser(browser);
|
const tab = window.gBrowser.getTabForBrowser(browser);
|
||||||
this.updateSplitViewButton(!tab?.splitView);
|
this.updateSplitViewButton(!tab?.splitView);
|
||||||
if (tab && this.splitViewActive) {
|
if (tab) {
|
||||||
this._data[this.currentView].tabs.forEach(t => {
|
this.updateSplitView(tab);
|
||||||
const container = t.linkedBrowser.closest('.browserSidebarContainer');
|
|
||||||
if (t === tab) {
|
|
||||||
container.setAttribute('zen-split-active', true);
|
|
||||||
} else if (container.hasAttribute('zen-split-active')) {
|
|
||||||
container.removeAttribute('zen-split-active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
tab.linkedBrowser.docShellIsActive = true;
|
tab.linkedBrowser.docShellIsActive = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -503,21 +483,36 @@ var gZenViewSplitter = new class {
|
||||||
for (const tab of tabs) {
|
for (const tab of tabs) {
|
||||||
if (!this._data[groupIndex].tabs.includes(tab)) {
|
if (!this._data[groupIndex].tabs.includes(tab)) {
|
||||||
this._data[groupIndex].tabs.push(tab);
|
this._data[groupIndex].tabs.push(tab);
|
||||||
|
this.addTabToSplit(tab, this._data[groupIndex].layoutTree);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this._data[groupIndex].gridType = gridType;
|
this._data[groupIndex].gridType = gridType;
|
||||||
this.updateSplitView(existingSplitTab);
|
this.applyGridLayout(this._data[groupIndex].layoutTree);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const splitData = {
|
const splitData = {
|
||||||
tabs,
|
tabs,
|
||||||
gridType
|
gridType,
|
||||||
|
layoutTree: this.calculateLayoutTree(tabs, gridType),
|
||||||
}
|
}
|
||||||
this._data.push(splitData);
|
this._data.push(splitData);
|
||||||
window.gBrowser.selectedTab = tabs[0];
|
window.gBrowser.selectedTab = tabs[0];
|
||||||
this.activateSplitView(splitData, tabs[0]);
|
this.activateSplitView(splitData);
|
||||||
|
}
|
||||||
|
|
||||||
|
addTabToSplit(tab, splitNode) {
|
||||||
|
const tabContainer = tab.linkedBrowser.closest('.browserSidebarContainer');
|
||||||
|
if (splitNode.direction === 'row') {
|
||||||
|
const reduce = splitNode.children.length / (splitNode.children.length + 1);
|
||||||
|
splitNode.children.forEach(c => c.widthInParent *= reduce);
|
||||||
|
splitNode.addChild(new SplitLeafNode(tabContainer.id, (1 - reduce) * 100, 100));
|
||||||
|
} else if (splitNode.direction === 'column') {
|
||||||
|
const reduce = splitNode.children.length / (splitNode.children.length + 1);
|
||||||
|
splitNode.children.forEach(c => c.heightInParent *= reduce);
|
||||||
|
splitNode.addChild(new SplitLeafNode(tabContainer.id, (1 - reduce) * 100, 100));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -526,31 +521,27 @@ var gZenViewSplitter = new class {
|
||||||
* @param {Tab} tab - The tab to update the split view for.
|
* @param {Tab} tab - The tab to update the split view for.
|
||||||
*/
|
*/
|
||||||
updateSplitView(tab) {
|
updateSplitView(tab) {
|
||||||
const splitData = this._data.find((group) => group.tabs.includes(tab));
|
const oldView = this.currentView;
|
||||||
if (!splitData || (this.currentView >= 0 && !this._data[this.currentView].tabs.includes(tab))) {
|
const newView = this._data.findIndex((group) => group.tabs.includes(tab));
|
||||||
this.updateSplitViewButton(true);
|
|
||||||
if (this.currentView >= 0) {
|
|
||||||
this.deactivateSplitView();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!splitData) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.activateSplitView(splitData, tab);
|
if (oldView === newView) return;
|
||||||
|
if (newView < 0 && oldView >= 0) {
|
||||||
|
this.updateSplitViewButton(true);
|
||||||
|
this.deactivateCurrentSplitView();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.activateSplitView(this._data[newView]);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Deactivates the split view.
|
* Deactivates the split view.
|
||||||
*/
|
*/
|
||||||
deactivateSplitView() {
|
deactivateCurrentSplitView() {
|
||||||
for (const tab of this._data[this.currentView].tabs) {
|
for (const tab of this._data[this.currentView].tabs) {
|
||||||
const container = tab.linkedBrowser.closest('.browserSidebarContainer');
|
const container = tab.linkedBrowser.closest('.browserSidebarContainer');
|
||||||
this.resetContainerStyle(container);
|
this.resetContainerStyle(container);
|
||||||
container.removeEventListener('click', this.handleTabEvent);
|
|
||||||
container.removeEventListener('mouseover', this.handleTabEvent);
|
|
||||||
}
|
}
|
||||||
|
this.removeSplitters();
|
||||||
this.tabBrowserPanel.removeAttribute('zen-split-view');
|
this.tabBrowserPanel.removeAttribute('zen-split-view');
|
||||||
this.setTabsDocShellState(this._data[this.currentView].tabs, false);
|
this.setTabsDocShellState(this._data[this.currentView].tabs, false);
|
||||||
this.currentView = -1;
|
this.currentView = -1;
|
||||||
|
@ -560,22 +551,19 @@ var gZenViewSplitter = new class {
|
||||||
* Activates the split view.
|
* Activates the split view.
|
||||||
*
|
*
|
||||||
* @param {object} splitData - The split data.
|
* @param {object} splitData - The split data.
|
||||||
* @param {Tab} activeTab - The active tab.
|
|
||||||
*/
|
*/
|
||||||
activateSplitView(splitData, activeTab) {
|
activateSplitView(splitData) {
|
||||||
this.tabBrowserPanel.setAttribute('zen-split-view', 'true');
|
const oldView = this.currentView;
|
||||||
this.currentView = this._data.indexOf(splitData);
|
const newView = this._data.indexOf(splitData);
|
||||||
|
if (oldView >= 0 && oldView !== newView) this.deactivateCurrentSplitView();
|
||||||
|
this.currentView = newView;
|
||||||
|
|
||||||
const gridType = splitData.gridType || 'grid';
|
this.tabBrowserPanel.setAttribute('zen-split-view', 'true');
|
||||||
|
|
||||||
this.setTabsDocShellState(splitData.tabs, true);
|
this.setTabsDocShellState(splitData.tabs, true);
|
||||||
this.updateSplitViewButton(false);
|
this.updateSplitViewButton(false);
|
||||||
|
this.applyGridToTabs(splitData.tabs);
|
||||||
this.applyGridToTabs(splitData.tabs, activeTab);
|
this.applyGridLayout(splitData.layoutTree);
|
||||||
|
|
||||||
const layout = this.calculateLayoutTree(splitData.tabs, gridType);
|
|
||||||
splitData.layoutTree = layout;
|
|
||||||
this.applyGridLayout(layout);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
calculateLayoutTree(tabs, gridType) {
|
calculateLayoutTree(tabs, gridType) {
|
||||||
|
@ -609,11 +597,11 @@ var gZenViewSplitter = new class {
|
||||||
* @param {Tab[]} tabs - The tabs to apply the grid layout to.
|
* @param {Tab[]} tabs - The tabs to apply the grid layout to.
|
||||||
* @param {Tab} activeTab - The active tab.
|
* @param {Tab} activeTab - The active tab.
|
||||||
*/
|
*/
|
||||||
applyGridToTabs(tabs,activeTab) {
|
applyGridToTabs(tabs) {
|
||||||
tabs.forEach((tab, index) => {
|
tabs.forEach((tab, index) => {
|
||||||
tab.splitView = true;
|
tab.splitView = true;
|
||||||
const container = tab.linkedBrowser.closest('.browserSidebarContainer');
|
const container = tab.linkedBrowser.closest('.browserSidebarContainer');
|
||||||
this.styleContainer(container, tab === activeTab, index);
|
this.styleContainer(container);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -703,7 +691,7 @@ var gZenViewSplitter = new class {
|
||||||
}
|
}
|
||||||
|
|
||||||
removeSplitters() {
|
removeSplitters() {
|
||||||
Array.from(this._splitNodeToSplitters.values())[0].forEach(e => e.remove());
|
Array.from(this._splitNodeToSplitters.values()).forEach(e => e[0].remove())
|
||||||
this._splitNodeToSplitters.clear();
|
this._splitNodeToSplitters.clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -711,14 +699,8 @@ var gZenViewSplitter = new class {
|
||||||
* Styles the container for a tab.
|
* Styles the container for a tab.
|
||||||
*
|
*
|
||||||
* @param {Element} container - The container element.
|
* @param {Element} container - The container element.
|
||||||
* @param {boolean} isActive - Indicates if the tab is active.
|
|
||||||
* @param {number} index - The index of the tab.
|
|
||||||
*/
|
*/
|
||||||
styleContainer(container, isActive, index) {
|
styleContainer(container) {
|
||||||
container.removeAttribute('zen-split-active');
|
|
||||||
if (isActive) {
|
|
||||||
container.setAttribute('zen-split-active', 'true');
|
|
||||||
}
|
|
||||||
container.setAttribute('zen-split-anim', 'true');
|
container.setAttribute('zen-split-anim', 'true');
|
||||||
container.addEventListener('click', this.handleTabEvent);
|
container.addEventListener('click', this.handleTabEvent);
|
||||||
container.addEventListener('mouseover', this.handleTabEvent);
|
container.addEventListener('mouseover', this.handleTabEvent);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue