// This Source Code Form is subject to the terms of the Mozilla Public // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at http://mozilla.org/MPL/2.0/. class nsSplitLeafNode { /** * The percentage of the size of the parent the node takes up, dependent on parent direction this is either * width or height. * @type {number} */ sizeInParent; /** * @type {Object} */ positionToRoot; // position relative to root node /** * @type {nsSplitNode} */ parent; constructor(tab, sizeInParent) { this.tab = tab; this.sizeInParent = sizeInParent; } get heightInParent() { return this.parent.direction === 'column' ? this.sizeInParent : 100; } get widthInParent() { return this.parent.direction === 'row' ? this.sizeInParent : 100; } } class nsSplitNode extends nsSplitLeafNode { /** * @type {string} */ direction; _children = []; constructor(direction, sizeInParent) { super(null, sizeInParent); this.sizeInParent = sizeInParent; this.direction = direction; // row or column } set children(children) { if (children) children.forEach((c) => (c.parent = this)); this._children = children; } get children() { return this._children; } addChild(child, prepend = true) { child.parent = this; if (prepend) { this._children.unshift(child); } else { this._children.push(child); } } } class nsZenViewSplitter extends nsZenDOMOperatedFeature { currentView = -1; _data = []; _tabBrowserPanel = null; __hasSetMenuListener = false; overlay = null; _splitNodeToSplitters = new Map(); _tabToSplitNode = new Map(); dropZone; _edgeHoverSize; minResizeWidth; _lastOpenedTab = null; MAX_TABS = 4; init() { this.handleTabEvent = this._handleTabEvent.bind(this); XPCOMUtils.defineLazyPreferenceGetter( this, 'minResizeWidth', 'zen.splitView.min-resize-width', 7 ); XPCOMUtils.defineLazyPreferenceGetter( this, '_edgeHoverSize', 'zen.splitView.rearrange-edge-hover-size', 24 ); ChromeUtils.defineLazyGetter(this, 'overlay', () => document.getElementById('zen-splitview-overlay') ); ChromeUtils.defineLazyGetter(this, 'dropZone', () => document.getElementById('zen-splitview-dropzone') ); window.addEventListener('TabClose', this.handleTabClose.bind(this)); window.addEventListener('TabBrowserDiscarded', this.handleTabBrowserDiscarded.bind(this)); window.addEventListener('TabSelect', this.onTabSelect.bind(this)); this.initializeContextMenu(); this.insertIntoContextMenu(); window.addEventListener( 'AfterWorkspacesSessionRestore', this.onAfterWorkspaceSessionRestore.bind(this), { once: true, } ); // Add drag over listener to the browser view if (Services.prefs.getBoolPref('zen.splitView.enable-tab-drop')) { const tabBox = document.getElementById('tabbrowser-tabbox'); tabBox.addEventListener('dragover', this.onBrowserDragOverToSplit.bind(this)); this.onBrowserDragEndToSplit = this.onBrowserDragEndToSplit.bind(this); } } insertIntoContextMenu() { const sibling = document.getElementById('context-sep-open'); const menuitem = document.createXULElement('menuitem'); menuitem.setAttribute('id', 'context-zenSplitLink'); menuitem.setAttribute('hidden', 'true'); menuitem.setAttribute('command', 'cmd_zenSplitViewLinkInNewTab'); menuitem.setAttribute('data-l10n-id', 'zen-split-link'); sibling.insertAdjacentElement('beforebegin', menuitem); } /** * @param {Event} event - The event that triggered the tab close. * @description Handles the tab close event.7 */ handleTabClose(event) { const tab = event.target; if (tab === this._lastOpenedTab) { this._lastOpenedTab = null; } const groupIndex = this._data.findIndex((group) => group.tabs.includes(tab)); if (groupIndex < 0) { return; } this.removeTabFromGroup(tab, groupIndex, { forUnsplit: true }); } /** * @param {Event} event - The event that triggered the tab browser discard. * @description Handles the tab browser discard event. */ async handleTabBrowserDiscarded(event) { const tab = event.target; if (tab.group?.hasAttribute('split-view-group')) { gBrowser.explicitUnloadTabs(tab.group.tabs); for (const t of tab.group.tabs) { if (t.glanceTab) { gBrowser.explicitUnloadTabs([t.glanceTab]); } } } } /** * @param {Event} event - The event that triggered the tab select. * @description Handles the tab select event. * @returns {void} */ onTabSelect(event) { const previousTab = event.detail.previousTab; if (previousTab && !previousTab.hasAttribute('zen-empty-tab')) { this._lastOpenedTab = previousTab; } this.onLocationChange(event.target.linkedBrowser); } /** * Removes a tab from a group. * * @param {Tab} tab - The tab to remove. * @param {number} groupIndex - The index of the group. * @param {boolean} [forUnsplit=false] - Whether the removal is for unsplitting. * @param {boolean} [dontRebuildGrid=false] - Whether to skip rebuilding the grid layout. */ removeTabFromGroup( tab, groupIndex, { forUnsplit = false, dontRebuildGrid = false, changeTab = true } = {} ) { const group = this._data[groupIndex]; const tabIndex = group.tabs.indexOf(tab); group.tabs.splice(tabIndex, 1); this.resetTabState(tab, forUnsplit); if (tab.group && tab.group.hasAttribute('split-view-group')) { gBrowser.ungroupTab(tab); } if (group.tabs.length < 2) { // We need to remove all remaining tabs from the group when unsplitting let remainingTabs = [...group.tabs]; // Copy array since we'll modify it if (!dontRebuildGrid) { for (let remainingTab of remainingTabs) { this.resetTabState(remainingTab, forUnsplit); } } this.removeGroup(groupIndex); if (changeTab) { gBrowser.selectedTab = remainingTabs[remainingTabs.length - 1]; document.getElementById('cmd_zenNewEmptySplit').removeAttribute('disabled'); } } else { const node = this.getSplitNodeFromTab(tab); const toUpdate = this.removeNode(node); this.applyGridLayout(toUpdate); // Select next tab if the removed tab was selected if (gBrowser.selectedTab === tab) { gBrowser.selectedTab = group.tabs[0]; } } } onBrowserDragOverToSplit(event) { if (this.fakeBrowser) { this.onBrowserDragEndToSplit(event); return; } var dt = event.dataTransfer; var draggedTab; if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { // tab copy or move draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); // not our drop then if (!draggedTab || gBrowser.selectedTab.hasAttribute('zen-empty-tab')) { return; } draggedTab.container.finishMoveTogetherSelectedTabs(draggedTab); } if ( !draggedTab || this._canDrop || this._hasAnimated || this.fakeBrowser || !this._lastOpenedTab || (this._lastOpenedTab && this._lastOpenedTab.getAttribute('zen-workspace-id') !== draggedTab.getAttribute('zen-workspace-id') && !this._lastOpenedTab.hasAttribute('zen-essential')) || draggedTab === this._lastOpenedTab ) { return; } if (draggedTab.splitView) { return; } const currentView = this._data[this._lastOpenedTab.splitViewValue]; if (currentView?.tabs.length >= this.MAX_TABS) { return; } const panelsRect = gBrowser.tabbox.getBoundingClientRect(); const panelsWidth = panelsRect.width; if ( event.clientX > panelsRect.left + panelsWidth - 10 || event.clientX < panelsRect.left + 10 || event.clientY < panelsRect.top + 10 || event.clientY > panelsRect.bottom - 10 ) { return; } // first quarter or last quarter of the screen, but not the middle if ( !( event.clientX < panelsRect.left + panelsWidth / 4 || event.clientX > panelsRect.left + (panelsWidth / 4) * 3 ) ) { return; } dt.mozCursor = 'default'; const oldTab = this._lastOpenedTab; this._canDrop = true; { this._draggingTab = draggedTab; gBrowser.selectedTab = oldTab; this._hasAnimated = true; this.tabBrowserPanel.setAttribute('dragging-split', 'true'); for (const tab of gBrowser.tabs) { tab.style.removeProperty('transform'); if (tab.group) { tab.group.style.removeProperty('transform'); } } // Add a min width to all the browser elements to prevent them from resizing const panelsWidth = gBrowser.tabbox.getBoundingClientRect().width; const halfWidth = panelsWidth / 2; let threshold = gNavToolbox.getBoundingClientRect().width * (gZenVerticalTabsManager._prefsRightSide ? 0 : 1); if (gZenCompactModeManager.preference) { threshold = 0; } const side = event.clientX - threshold > halfWidth ? 'right' : 'left'; for (const browser of gBrowser.browsers) { const width = browser.getBoundingClientRect().width; // Only apply it to the left side because if we add it to the right side, // we wont be able to move the element to the left. // FIXME: This is a workaround, we should find a better way to do this if (side === 'left') { browser.style.minWidth = `${width}px`; } } this.fakeBrowser = document.createXULElement('vbox'); window.addEventListener('dragend', this.onBrowserDragEndToSplit, { once: true }); const padding = ZenThemeModifier.elementSeparation; this.fakeBrowser.setAttribute('flex', '1'); this.fakeBrowser.id = 'zen-split-view-fake-browser'; if (oldTab.splitView) { this.fakeBrowser.setAttribute('has-split-view', 'true'); } gBrowser.tabbox.appendChild(this.fakeBrowser); this.fakeBrowser.style.setProperty( '--zen-split-view-fake-icon', `url(${draggedTab.getAttribute('image')})` ); draggedTab._visuallySelected = true; this.fakeBrowser.setAttribute('side', side); this._finishAllAnimatingPromise = Promise.all([ gZenUIManager.motion.animate( gBrowser.tabbox, side === 'left' ? { paddingLeft: [0, `${halfWidth}px`], paddingRight: 0, } : { paddingRight: [0, `${halfWidth}px`], paddingLeft: 0, }, { duration: 0.1, easing: 'ease-out', } ), gZenUIManager.motion.animate( this.fakeBrowser, { width: [0, `${halfWidth - padding}px`], ...(side === 'left' ? { marginLeft: [0, `${-halfWidth}px`], } : {}), }, { duration: 0.1, easing: 'ease-out', } ), ]); if (this._finishAllAnimatingPromise) { this._finishAllAnimatingPromise.then(() => { draggedTab.linkedBrowser.docShellIsActive = false; draggedTab.linkedBrowser .closest('.browserSidebarContainer') .classList.remove('deck-selected'); this.fakeBrowser.addEventListener('dragleave', this.onBrowserDragEndToSplit); this._canDrop = true; draggedTab._visuallySelected = true; }); } } } onBrowserDragEndToSplit(event) { if (!this._canDrop) { return; } const panelsRect = gBrowser.tabbox.getBoundingClientRect(); const fakeBrowserRect = this.fakeBrowser && this.fakeBrowser.getBoundingClientRect(); if ( (event.target.closest('#tabbrowser-tabbox') && event.target != this.fakeBrowser) || (fakeBrowserRect && event.clientX > fakeBrowserRect.left && event.clientX < fakeBrowserRect.left + fakeBrowserRect.width && event.clientY > fakeBrowserRect.top && event.clientY < fakeBrowserRect.top + fakeBrowserRect.height) || (event.screenX === 0 && event.screenY === 0) // It's equivalent to 0 if the event has been dropped ) { return; } if (!this._hasAnimated || !this.fakeBrowser) { return; } const panelsWidth = panelsRect.width; const halfWidth = panelsWidth / 2; const padding = ZenThemeModifier.elementSeparation; if (!this.fakeBrowser) { return; } this.fakeBrowser.classList.add('fade-out'); const side = this.fakeBrowser.getAttribute('side'); if (this._draggingTab) this._draggingTab.setAttribute('zen-has-splitted', 'true'); this._lastOpenedTab = gBrowser.selectedTab; this._draggingTab = null; try { this._canDrop = false; Promise.all([ gZenUIManager.motion.animate( gBrowser.tabbox, side === 'left' ? { paddingLeft: [`${halfWidth}px`, 0], } : { paddingRight: [`${halfWidth}px`, 0], }, { duration: 0.1, easing: 'ease-out', } ), gZenUIManager.motion.animate( this.fakeBrowser, { width: [`${halfWidth - padding * 2}px`, 0], ...(side === 'left' ? { marginLeft: [`${-halfWidth}px`, 0], } : {}), }, { duration: 0.1, easing: 'ease-out', } ), ]).then(() => { this._maybeRemoveFakeBrowser(); }); } catch { this._canDrop = false; this._maybeRemoveFakeBrowser(); } } /** * Remove a nsSplitNode from its tree and the view * @param {nsSplitNode} toRemove * @return {nsSplitNode} that has to be updated */ removeNode(toRemove) { this._removeNodeSplitters(toRemove, true); const parent = toRemove.parent; const childIndex = parent.children.indexOf(toRemove); parent.children.splice(childIndex, 1); if (parent.children.length !== 1) { const otherNodeIncrease = 100 / (100 - toRemove.sizeInParent); parent.children.forEach((c) => (c.sizeInParent *= otherNodeIncrease)); return parent; } // node that is not a leaf cannot have less than 2 children, this makes for better resizing // node takes place of parent const leftOverChild = parent.children[0]; leftOverChild.sizeInParent = parent.sizeInParent; if (parent.parent) { const idx = parent.parent.children.indexOf(parent); if (parent.parent.direction !== leftOverChild.direction) { leftOverChild.parent = parent.parent; parent.parent.children[idx] = leftOverChild; } else { // node cannot have same direction as it's parent leftOverChild.children.forEach((c) => { c.sizeInParent *= leftOverChild.sizeInParent / 100; c.parent = parent.parent; }); parent.parent.children.splice(idx, 1, ...leftOverChild.children); this._removeNodeSplitters(leftOverChild, false); } this._removeNodeSplitters(parent, false); return parent.parent; } else { const viewData = Object.values(this._data).find((s) => s.layoutTree === parent); viewData.layoutTree = leftOverChild; leftOverChild.positionToRoot = null; leftOverChild.parent = null; return leftOverChild; } } /** * @param node * @param {boolean} recursive * @private */ _removeNodeSplitters(node, recursive) { this.getSplitters(node)?.forEach((s) => s.remove()); this._splitNodeToSplitters.delete(node); if (!recursive) return; if (node && node.children) node.children.forEach((c) => this._removeNodeSplitters(c)); } get rearangeActionTarget() { return document.getElementById('urlbar-container'); } afterRearangeAction() { document.getElementById('zenSplitViewModifier').hidePopup(); gZenUIManager.showToast('zen-split-view-modifier-enabled-toast', { descriptionId: 'zen-split-view-modifier-enabled-toast-description', }); } afterRearangeRemove() { gZenUIManager.showToast('zen-split-view-modifier-disabled-toast'); } toggleWrapperDisplay(value) { const wrapper = this.overlay?.parentNode; if (!wrapper) return; if (!value) { wrapper.setAttribute('hidden', 'true'); } else { wrapper.removeAttribute('hidden'); } } enableTabRearrangeView(tabDrag = false) { if (this.rearrangeViewEnabled) return; this.rearrangeViewEnabled = true; this.rearrangeViewView = this.currentView; if (!this._thumnailCanvas) { this._thumnailCanvas = document.createElement('canvas'); this._thumnailCanvas.width = 280 * devicePixelRatio; this._thumnailCanvas.height = 140 * devicePixelRatio; } const browsers = this._data[this.currentView].tabs.map((t) => t.linkedBrowser); browsers.forEach((b) => { b.style.pointerEvents = 'none'; b.style.opacity = '.85'; }); if (!tabDrag) { this.tabBrowserPanel.addEventListener('dragstart', this.onBrowserDragStart); this.tabBrowserPanel.addEventListener('dragend', this.onBrowserDragEnd); } this.tabBrowserPanel.addEventListener('dragover', this.onBrowserDragOver); this.tabBrowserPanel.addEventListener('drop', this.onBrowserDrop); this.tabBrowserPanel.addEventListener('click', this.disableTabRearrangeView); window.addEventListener('keydown', this.disableTabRearrangeView); if (!tabDrag) { this.afterRearangeAction(); } } disableTabRearrangeView = (event = null) => { if (!this.rearrangeViewEnabled) return; if (event) { // Click or "ESC" key if ( (event.type === 'click' && event.button !== 0) || (event.type === 'keydown' && event.key !== 'Escape') ) { return; } } if ( !this.rearrangeViewEnabled || (event && event.target.classList.contains('zen-split-view-splitter')) ) { return; } this.tabBrowserPanel.removeEventListener('dragstart', this.onBrowserDragStart); this.tabBrowserPanel.removeEventListener('dragover', this.onBrowserDragOver); this.tabBrowserPanel.removeEventListener('drop', this.onBrowserDrop); this.tabBrowserPanel.removeEventListener('click', this.disableTabRearrangeView); window.removeEventListener('keydown', this.disableTabRearrangeView); const browsers = this._data[this.rearrangeViewView].tabs.map((t) => t.linkedBrowser); browsers.forEach((b) => { b.style.pointerEvents = ''; b.style.opacity = ''; }); this.rearrangeViewEnabled = false; this.rearrangeViewView = null; if (!event?.type === 'dragend') { // Don't show toast if exiting from drag this.afterRearangeRemove(); } }; onBrowserDragStart = (event) => { if (!this.splitViewActive) return; let browser; let isSplitHeaderDrag = false; const container = event.target.closest('.browserSidebarContainer[zen-split]'); if (container && event.target.closest('.zen-tab-rearrange-button')) { // Split tab header drag case const containerRect = container.getBoundingClientRect(); const clickX = event.clientX - containerRect.left; // Only allow drag if click is NOT in right 20px (close button area) if (clickX > containerRect.width - 22) { return; } browser = container.querySelector('browser'); isSplitHeaderDrag = true; } else { // Regular browser drag case browser = event.target.querySelector('browser'); } if (!browser) return; const tab = gBrowser.getTabForBrowser(browser); if (!tab) return; // Store the necessary state for drag end this._dragState = { tab, browser, isSplitHeaderDrag, }; if (isSplitHeaderDrag) { this.enableTabRearrangeView(true); } browser.style.opacity = '.2'; event.dataTransfer.setData('text/plain', browser.closest('.browserSidebarContainer').id); this._draggingTab = tab; // Canvas setup for drag image let scale = window.devicePixelRatio; let canvas = this._dndCanvas; if (!canvas) { this._dndCanvas = canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas'); canvas.style.width = '100%'; canvas.style.height = '100%'; } canvas.width = 160 * scale; canvas.height = 90 * scale; let toDrag = canvas; let dragImageOffset = -16; if (gMultiProcessBrowser) { var context = canvas.getContext('2d'); context.fillStyle = 'white'; context.fillRect(0, 0, canvas.width, canvas.height); let captureListener; let platform = AppConstants.platform; // On Windows and Mac we can update the drag image during a drag // using updateDragImage. On Linux, we can use a panel. if (platform === 'win' || platform === 'macosx') { captureListener = () => { event.dataTransfer.updateDragImage(canvas, dragImageOffset, dragImageOffset); }; } else { // Create a panel to use it in setDragImage // which will tell xul to render a panel that follows // the pointer while a dnd session is on. if (!this._dndPanel) { this._dndCanvas = canvas; this._dndPanel = document.createXULElement('panel'); this._dndPanel.className = 'dragfeedback-tab'; this._dndPanel.setAttribute('type', 'drag'); let wrapper = document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); wrapper.style.width = '160px'; wrapper.style.height = '90px'; wrapper.appendChild(canvas); this._dndPanel.appendChild(wrapper); document.documentElement.appendChild(this._dndPanel); } toDrag = this._dndPanel; } // PageThumb is async with e10s but that's fine // since we can update the image during the dnd. PageThumbs.captureToCanvas(browser, canvas) .then(captureListener) .catch((e) => console.error(e)); } else { // For the non e10s case we can just use PageThumbs // sync, so let's use the canvas for setDragImage. PageThumbs.captureToCanvas(browser, canvas).catch((e) => console.error(e)); dragImageOffset = dragImageOffset * scale; } event.dataTransfer.setDragImage(toDrag, dragImageOffset, dragImageOffset); return true; }; onBrowserDragOver = (event) => { event.preventDefault(); const browser = event.target.querySelector('browser'); if (!browser) return; const tab = gBrowser.getTabForBrowser(browser); if (tab === this._draggingTab) { if (this.dropZone.hasAttribute('enabled')) { this.dropZone.removeAttribute('enabled'); } return; } if (!this.dropZone.hasAttribute('enabled')) { this.dropZone.setAttribute('enabled', true); } const splitNode = this.getSplitNodeFromTab(tab); if (!splitNode) return; const posToRoot = { ...splitNode.positionToRoot }; const browserRect = browser.getBoundingClientRect(); const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserRect); if (hoverSide !== 'center') { const isVertical = hoverSide === 'top' || hoverSide === 'bottom'; const browserSize = 100 - (isVertical ? posToRoot.top + posToRoot.bottom : posToRoot.right + posToRoot.left); const reduce = browserSize * 0.5; posToRoot[this._oppositeSide(hoverSide)] += reduce; } const newInset = `${posToRoot.top}% ${posToRoot.right}% ${posToRoot.bottom}% ${posToRoot.left}%`; if (this.dropZone.style.inset !== newInset) { window.requestAnimationFrame(() => (this.dropZone.style.inset = newInset)); } }; onBrowserDragEnd = (event) => { this.dropZone?.removeAttribute('enabled'); // If we don't have drag state, just clean up what we can if (!this._dragState) { this._draggingTab = null; return; } const { browser, isSplitHeaderDrag } = this._dragState; if (browser) { browser.style.opacity = isSplitHeaderDrag ? '1' : '.85'; } // Handle split view specific cleanup if (isSplitHeaderDrag) { this.disableTabRearrangeView(event); } // Clear state this._draggingTab = null; this._dragState = null; }; _oppositeSide(side) { if (side === 'top') return 'bottom'; if (side === 'bottom') return 'top'; if (side === 'left') return 'right'; if (side === 'right') return 'left'; } calculateHoverSide(x, y, elementRect) { const hPixelHoverSize = ((elementRect.right - elementRect.left) * this._edgeHoverSize) / 100; const vPixelHoverSize = ((elementRect.bottom - elementRect.top) * this._edgeHoverSize) / 100; if (x <= elementRect.left + hPixelHoverSize) return 'left'; if (x > elementRect.right - hPixelHoverSize) return 'right'; if (y <= elementRect.top + vPixelHoverSize) return 'top'; if (y > elementRect.bottom - vPixelHoverSize) return 'bottom'; return 'center'; } onBrowserDrop = (event) => { const browserDroppedOn = event.target.querySelector('browser'); if (!browserDroppedOn) return; const droppedTab = this._draggingTab; if (!droppedTab) return; const droppedOnTab = gBrowser.getTabForBrowser(event.target.querySelector('browser')); if (droppedTab === droppedOnTab) return; const hoverSide = this.calculateHoverSide( event.clientX, event.clientY, browserDroppedOn.getBoundingClientRect() ); const droppedSplitNode = this.getSplitNodeFromTab(droppedTab); const droppedOnSplitNode = this.getSplitNodeFromTab(droppedOnTab); if (hoverSide === 'center') { this.swapNodes(droppedSplitNode, droppedOnSplitNode); this.applyGridLayout(this._data[this.currentView].layoutTree); return; } this.removeNode(droppedSplitNode); this.splitIntoNode(droppedOnSplitNode, droppedSplitNode, hoverSide, 0.5); this.activateSplitView(this._data[this.currentView], true); }; /** * * @param node1 * @param node2 */ swapNodes(node1, node2) { this._swapField('sizeInParent', node1, node2); const node1Idx = node1.parent.children.indexOf(node1); const node2Idx = node2.parent.children.indexOf(node2); node1.parent.children[node1Idx] = node2; node2.parent.children[node2Idx] = node1; this._swapField('parent', node1, node2); } /** * * @param node * @param nodeToInsert * @param side * @param sizeOfInsertedNode percentage of node width or height that nodeToInsert will take */ splitIntoNode(node, nodeToInsert, side, sizeOfInsertedNode) { const splitDirection = side === 'left' || side === 'right' ? 'row' : 'column'; const splitPosition = side === 'left' || side === 'top' ? 0 : 1; let nodeSize; let newParent; if (splitDirection === node.parent?.direction) { newParent = node.parent; nodeSize = node.sizeInParent; } else { nodeSize = 100; newParent = new nsSplitNode(splitDirection, node.sizeInParent); if (node.parent) { newParent.parent = node.parent; const nodeIndex = node.parent.children.indexOf(node); node.parent.children[nodeIndex] = newParent; } else { const viewData = Object.values(this._data).find((s) => s.layoutTree === node); viewData.layoutTree = newParent; } newParent.addChild(node); } node.sizeInParent = (1 - sizeOfInsertedNode) * nodeSize; nodeToInsert.sizeInParent = nodeSize * sizeOfInsertedNode; const index = newParent.children.indexOf(node); newParent.children.splice(index + splitPosition, 0, nodeToInsert); nodeToInsert.parent = newParent; } _swapField(fieldName, obj1, obj2) { const swap = obj1[fieldName]; obj1[fieldName] = obj2[fieldName]; obj2[fieldName] = swap; } /** * Resets the state of a tab. * * @param {Tab} tab - The tab to reset. * @param {boolean} forUnsplit - Indicates if the tab is being reset for unsplitting. */ resetTabState(tab, forUnsplit) { tab.splitView = false; delete tab.splitViewValue; tab.removeAttribute('split-view'); tab.linkedBrowser.zenModeActive = false; const container = tab.linkedBrowser.closest('.browserSidebarContainer'); this._removeHeader(container); this.resetContainerStyle(container); container.removeEventListener('mousedown', this.handleTabEvent); if (!forUnsplit) { tab.linkedBrowser.docShellIsActive = false; } } /** * Removes a group. * * @param {number} groupIndex - The index of the group to remove. */ removeGroup(groupIndex) { const group = this._data[groupIndex]; for (const tab of group.tabs.reverse()) { if (tab.group?.hasAttribute('split-view-group')) { gBrowser.ungroupTab(tab); } } if (this.currentView === groupIndex) { this.deactivateCurrentSplitView(); } for (const tab of this._data[groupIndex].tabs) { this.resetTabState(tab, true); } this._data.splice(groupIndex, 1); } /** * context menu item display update */ insetUpdateContextMenuItems() { const contentAreaContextMenu = document.getElementById('tabContextMenu'); contentAreaContextMenu.addEventListener('popupshowing', () => { const tabCountInfo = JSON.stringify({ tabCount: window.gBrowser.selectedTabs.length, }); document.getElementById('context_zenSplitTabs').setAttribute('data-l10n-args', tabCountInfo); const splitTabs = document.getElementById('context_zenSplitTabs'); if (!this.contextCanSplitTabs()) { splitTabs.setAttribute('hidden', 'true'); } else { splitTabs.removeAttribute('hidden'); } }); } /** * Inserts the split view tab context menu item. */ insertSplitViewTabContextMenu() { const element = window.MozXULElement.parseXULToFragment(` `); document.getElementById('context_duplicateTab').before(element); } /** * Initializes the context menu. */ initializeContextMenu() { this.insertSplitViewTabContextMenu(); this.insetUpdateContextMenuItems(); } /** * Gets the tab browser panel. * * @returns {Element} The tab browser panel. */ get tabBrowserPanel() { if (!this._tabBrowserPanel) { this._tabBrowserPanel = document.getElementById('tabbrowser-tabpanels'); } return this._tabBrowserPanel; } get splitViewActive() { return this.currentView >= 0; } /** * Splits a link in a new tab. */ splitLinkInNewTab() { const url = window.gContextMenu.linkURL || window.gContextMenu.mediaURL || window.gContextMenu.contentData.docLocation || window.gContextMenu.target.ownerDocument.location.href; const currentTab = gZenGlanceManager.getTabOrGlanceParent(window.gBrowser.selectedTab); const newTab = this.openAndSwitchToTab(url, { inBackground: false }); this.splitTabs([currentTab, newTab], undefined, 1); } /** * Splits the selected tabs. */ contextSplitTabs() { const tabs = window.gBrowser.selectedTabs; this.splitTabs(tabs); } /** * Checks if the selected tabs can be split. * * @returns {boolean} True if the tabs can be split, false otherwise. */ contextCanSplitTabs() { if ( window.gBrowser.selectedTabs.length < 2 || window.gBrowser.selectedTabs.length > this.MAX_TABS ) { return false; } for (const tab of window.gBrowser.selectedTabs) { if (tab.splitView || tab.hasAttribute('zen-empty-tab')) { return false; } } return true; } /** * Handles the location change event. * * @param {Browser} browser - The browser instance. */ async onLocationChange(browser) { this.disableTabRearrangeView(); let tab = window.gBrowser.getTabForBrowser(browser); const ignoreSplit = tab.hasAttribute('zen-dont-split-glance'); tab.removeAttribute('zen-dont-split-glance'); if (tab.hasAttribute('zen-glance-tab') && !ignoreSplit) { // 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'); } if (tab) { this.updateSplitView(tab); tab.linkedBrowser.docShellIsActive = true; } this._maybeRemoveFakeBrowser(); { const shouldDisableEmptySplits = tab.hasAttribute('zen-empty-tab') || tab.splitView; const command = document.getElementById('cmd_zenNewEmptySplit'); if (shouldDisableEmptySplits) { command.setAttribute('disabled', 'true'); } else { command.removeAttribute('disabled'); } } } /** * @param {Tab} tab */ _moveTabsToContainer(tabs, relativeTab) { const relativeTabIsPinned = relativeTab.pinned; const relativeTabIsEssential = relativeTab.hasAttribute('zen-essential'); if (relativeTabIsEssential) { gZenPinnedTabManager.addToEssentials(tabs); } else { for (const tab of tabs) { if (relativeTabIsPinned) { gBrowser.pinTab(tab); } else { gBrowser.unpinTab(tab); } } } } /** * Splits the given tabs. * * @param {Tab[]} tabs - The tabs to split. * @param {string|undefined} gridType - The type of grid layout. */ splitTabs(tabs, gridType, initialIndex = 0) { // TODO: Add support for splitting essential tabs tabs = tabs.filter((t) => !t.hidden && !t.hasAttribute('zen-empty-tab')); if (tabs.length < 2 || tabs.length > this.MAX_TABS) { return; } const existingSplitTab = tabs.find((tab) => tab.splitView); if (existingSplitTab) { this._moveTabsToContainer(tabs, tabs[initialIndex]); const groupIndex = this._data.findIndex((group) => group.tabs.includes(existingSplitTab)); const group = this._data[groupIndex]; const gridTypeChange = gridType && group.gridType !== gridType; const newTabsAdded = tabs.find((t) => !group.tabs.includes(t)); if (gridTypeChange || !newTabsAdded) { // reset layout group.gridType = gridType; group.layoutTree = this.calculateLayoutTree( [...new Set(group.tabs.concat(tabs))], gridType ); } else { // Add any tabs that are not already in the group for (let i = 0; i < tabs.length; i++) { const tab = tabs[i]; if (!group.tabs.includes(tab)) { gBrowser.moveTabToGroup(tab, this._getSplitViewGroup(tabs)); group.tabs.push(tab); this.addTabToSplit(tab, group.layoutTree); } } } if (this._sessionRestoring) { return; } this.activateSplitView(group, true); return; } // We are here if none of the tabs have been previously split // If there's ANY pinned tab on the list, we clone the pinned tab // state to all the tabs const allArePinned = tabs.every((tab) => tab.pinned); const thereIsOnePinned = tabs.some((tab) => tab.pinned); const thereIsOneEssential = tabs.some((tab) => tab.hasAttribute('zen-essential')); if (thereIsOneEssential || (thereIsOnePinned && !allArePinned)) { for (let i = 0; i < tabs.length; i++) { const tab = tabs[i]; if (tab.pinned) { tabs[i] = gBrowser.duplicateTab(tab, true); } } } gridType ??= 'grid'; const splitData = { tabs, gridType, layoutTree: this.calculateLayoutTree(tabs, gridType), }; this._data.push(splitData); if (!this._sessionRestoring) { window.gBrowser.selectedTab = tabs[initialIndex] ?? tabs[0]; } // Add tabs to the split view group let splitGroup = this._getSplitViewGroup(tabs); if (splitGroup) { for (const tab of tabs) { if (!tab.group || tab.group !== splitGroup) { gBrowser.moveTabToGroup(tab, splitGroup); } } } if (this._sessionRestoring) { return; } this.activateSplitView(splitData); } addTabToSplit(tab, splitNode, prepend = true) { const reduce = splitNode.children.length / (splitNode.children.length + 1); splitNode.children.forEach((c) => (c.sizeInParent *= reduce)); splitNode.addChild(new nsSplitLeafNode(tab, (1 - reduce) * 100), prepend); } /** * Updates the split view. * * @param {Tab} tab - The tab to update the split view for. */ updateSplitView(tab) { const oldView = this.currentView; const newView = this._data.findIndex((group) => group.tabs.includes(tab)); if (oldView === newView) return; if (newView < 0 && oldView >= 0) { this.deactivateCurrentSplitView(); return; } this.disableTabRearrangeView(); this.activateSplitView(this._data[newView]); } /** * Deactivates the split view. */ deactivateCurrentSplitView({ removeDeckSelected = false } = {}) { if (this.currentView < 0) return; this.setTabsDocShellState(this._data[this.currentView].tabs, false); for (const tab of this._data[this.currentView].tabs) { const container = tab.linkedBrowser.closest('.browserSidebarContainer'); this.resetContainerStyle(container, removeDeckSelected); } this.removeSplitters(); this.tabBrowserPanel.removeAttribute('zen-split-view'); document.getElementById('tabbrowser-tabbox').removeAttribute('zen-split-view'); this.currentView = -1; this.toggleWrapperDisplay(false); this.maybeDisableOpeningTabOnSplitView(); } /** * Activates the split view. * * @param {object} splitData - The split data. */ activateSplitView(splitData, reset = false) { const oldView = this.currentView; const newView = this._data.indexOf(splitData); if (oldView >= 0 && oldView !== newView) this.deactivateCurrentSplitView(); this.currentView = newView; if (reset) this.removeSplitters(); splitData.tabs.forEach((tab) => { if (tab.hasAttribute('pending')) { gBrowser.getBrowserForTab(tab).reload(); } }); this.tabBrowserPanel.setAttribute('zen-split-view', 'true'); document.getElementById('tabbrowser-tabbox').setAttribute('zen-split-view', 'true'); this.applyGridToTabs(splitData.tabs); this.applyGridLayout(splitData.layoutTree); this.setTabsDocShellState(splitData.tabs, true); this.toggleWrapperDisplay(true); window.dispatchEvent(new CustomEvent('ZenViewSplitter:SplitViewActivated')); } calculateLayoutTree(tabs, gridType) { let rootNode; if (gridType === 'vsep' || (tabs.length === 2 && gridType === 'grid')) { rootNode = new nsSplitNode('row'); rootNode.children = tabs.map((tab) => new nsSplitLeafNode(tab, 100 / tabs.length)); } else if (gridType === 'hsep') { rootNode = new nsSplitNode('column'); rootNode.children = tabs.map((tab) => new nsSplitLeafNode(tab, 100 / tabs.length)); } else if (gridType === 'grid') { rootNode = new nsSplitNode('row'); const rowWidth = 100 / Math.ceil(tabs.length / 2); for (let i = 0; i < tabs.length - 1; i += 2) { const columnNode = new nsSplitNode('column', rowWidth, 100); columnNode.children = [ new nsSplitLeafNode(tabs[i], 50), new nsSplitLeafNode(tabs[i + 1], 50), ]; rootNode.addChild(columnNode); } if (tabs.length % 2 !== 0) { rootNode.addChild(new nsSplitLeafNode(tabs[tabs.length - 1], rowWidth)); } } return rootNode; } /** * Applies the grid layout to the tabs. * * @param {Tab[]} tabs - The tabs to apply the grid layout to. * @param {Tab} activeTab - The active tab. */ applyGridToTabs(tabs) { tabs.forEach((tab) => { tab.splitView = true; tab.splitViewValue = this.currentView; tab.setAttribute('split-view', 'true'); const container = tab.linkedBrowser?.closest('.browserSidebarContainer'); if (!container?.querySelector('.zen-tab-rearrange-button')) { // insert a header into the container const header = this._createHeader(container); container.insertBefore(header, container.firstChild); } this.styleContainer(container); }); } /** * Creates a header for the tab. * @param container * @returns {*|!Element|HTMLElement|HTMLUnknownElement|HTMLDirectoryElement|HTMLFontElement|HTMLFrameElement|HTMLFrameSetElement|HTMLPreElement|HTMLMarqueeElement|HTMLParamElement} * @private */ _createHeader(container) { const headerContainer = document.createElement('div'); headerContainer.classList.add('zen-view-splitter-header-container'); const header = document.createElement('div'); header.classList.add('zen-view-splitter-header'); const removeButton = document.createXULElement('toolbarbutton'); removeButton.classList.add('zen-tab-unsplit-button'); removeButton.addEventListener('click', () => { this.removeTabFromSplit(container); }); const rearrangeButton = document.createXULElement('toolbarbutton'); rearrangeButton.classList.add('zen-tab-rearrange-button'); header.appendChild(rearrangeButton); header.appendChild(removeButton); headerContainer.appendChild(header); return headerContainer; } _removeHeader(container) { const header = container.querySelector('.zen-view-splitter-header-container'); if (header) { header.remove(); } } /** * Apply grid layout to tabBrowserPanel * * @param {nsSplitNode} splitNode nsSplitNode */ applyGridLayout(splitNode) { if (!splitNode.positionToRoot) { splitNode.positionToRoot = { top: 0, bottom: 0, left: 0, right: 0 }; } 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}%`; }); this._tabToSplitNode.set(splitNode.tab, splitNode); return; } const rootToNodeWidthRatio = (100 - nodeRootPosition.right - nodeRootPosition.left) / 100; const rootToNodeHeightRatio = (100 - nodeRootPosition.bottom - nodeRootPosition.top) / 100; const splittersNeeded = splitNode.children.length - 1; const currentSplitters = this.getSplitters(splitNode, splittersNeeded); let leftOffset = nodeRootPosition.left; let topOffset = nodeRootPosition.top; splitNode.children.forEach((childNode, i) => { const childRootPosition = { top: topOffset, right: 100 - (leftOffset + childNode.widthInParent * rootToNodeWidthRatio), bottom: 100 - (topOffset + childNode.heightInParent * rootToNodeHeightRatio), left: leftOffset, }; childNode.positionToRoot = childRootPosition; this.applyGridLayout(childNode); if (splitNode.direction === 'column') { topOffset += childNode.sizeInParent * rootToNodeHeightRatio; } else { leftOffset += childNode.sizeInParent * rootToNodeWidthRatio; } 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}%`; } }); } }); this.maybeDisableOpeningTabOnSplitView(); } /** * * @param {String} orient * @param {nsSplitNode} parentNode * @param {Number} idx */ createSplitter(orient, parentNode, idx) { const splitter = document.createElement('div'); splitter.className = 'zen-split-view-splitter'; splitter.setAttribute('orient', orient); splitter.setAttribute('gridIdx', idx); this.overlay.insertAdjacentElement('afterbegin', splitter); splitter.addEventListener('mousedown', this.handleSplitterMouseDown); return splitter; } /** * @param {nsSplitNode} parentNode * @param {number|undefined} splittersNeeded if provided the amount of splitters for node will be adjusted to match */ getSplitters(parentNode, splittersNeeded) { let currentSplitters = this._splitNodeToSplitters.get(parentNode) || []; if (!splittersNeeded || currentSplitters.length === splittersNeeded) return currentSplitters; for (let i = currentSplitters?.length || 0; i < splittersNeeded; i++) { currentSplitters.push( this.createSplitter( parentNode.direction === 'column' ? 'horizontal' : 'vertical', parentNode, i ) ); currentSplitters[i].parentSplitNode = parentNode; } if (currentSplitters.length > splittersNeeded) { currentSplitters.slice(splittersNeeded - currentSplitters.length).forEach((s) => s.remove()); currentSplitters = currentSplitters.slice(0, splittersNeeded); } this._splitNodeToSplitters.set(parentNode, currentSplitters); return currentSplitters; } removeSplitters() { [...this.overlay.children] .filter((c) => c.classList.contains('zen-split-view-splitter')) .forEach((s) => s.remove()); this._splitNodeToSplitters.clear(); } /** * @param {Tab} tab * @return {nsSplitNode} splitNode */ getSplitNodeFromTab(tab) { return this._tabToSplitNode.get(tab); } /** * Styles the container for a tab. * * @param {Element} container - The container element. */ styleContainer(container) { container.addEventListener('mousedown', this.handleTabEvent); } /** * Handles tab events. * * @param {Event} event - The event. */ _handleTabEvent = (event) => { if (this.rearrangeViewEnabled) { return; } const container = event.currentTarget.closest('.browserSidebarContainer'); const tab = window.gBrowser.tabs.find( (t) => t.linkedBrowser?.closest('.browserSidebarContainer') === container ); if (tab) { window.gBrowser.selectedTab = tab; } }; handleSplitterMouseDown = (event) => { this.tabBrowserPanel.setAttribute('zen-split-resizing', true); const isVertical = event.target.getAttribute('orient') === 'vertical'; const dimension = isVertical ? 'width' : 'height'; const clientAxis = isVertical ? 'clientX' : 'clientY'; const gridIdx = parseInt(event.target.getAttribute('gridIdx')); const startPosition = event[clientAxis]; const splitNode = event.target.parentSplitNode; let rootToNodeSize; if (isVertical) rootToNodeSize = 100 / (100 - splitNode.positionToRoot.right - splitNode.positionToRoot.left); else rootToNodeSize = 100 / (100 - splitNode.positionToRoot.bottom - splitNode.positionToRoot.top); const originalSizes = splitNode.children.map((c) => c.sizeInParent); const dragFunc = (dEvent) => { requestAnimationFrame(() => { originalSizes.forEach((s, i) => (splitNode.children[i].sizeInParent = s)); // reset changes const movement = dEvent[clientAxis] - startPosition; let movementPercent = (movement / this.tabBrowserPanel.getBoundingClientRect()[dimension]) * rootToNodeSize * 100; let reducingMovement = Math.max(movementPercent, -movementPercent); for ( let i = gridIdx + (movementPercent < 0 ? 0 : 1); 0 <= i && i < originalSizes.length; i += movementPercent < 0 ? -1 : 1 ) { const current = originalSizes[i]; const newSize = Math.max(this.minResizeWidth, current - reducingMovement); splitNode.children[i].sizeInParent = newSize; const amountReduced = current - newSize; reducingMovement -= amountReduced; if (reducingMovement <= 0) break; } const increasingMovement = Math.max(movementPercent, -movementPercent) - reducingMovement; const increaseIndex = gridIdx + (movementPercent < 0 ? 1 : 0); splitNode.children[increaseIndex].sizeInParent = originalSizes[increaseIndex] + increasingMovement; this.applyGridLayout(splitNode); }); }; window.setCursor(isVertical ? 'ew-resize' : 'ns-resize'); document.addEventListener('mousemove', dragFunc); document.addEventListener( 'mouseup', () => { document.removeEventListener('mousemove', dragFunc); window.setCursor('auto'); this.tabBrowserPanel.removeAttribute('zen-split-resizing'); }, { once: true } ); }; /** * Sets the docshell state for the tabs. * * @param {Tab[]} tabs - The tabs. * @param {boolean} active - Indicates if the tabs are active. */ setTabsDocShellState(tabs, active) { for (const tab of tabs) { // zenModeActive allow us to avoid setting docShellisActive to false later on, // see browser-custom-elements.js's patch tab.linkedBrowser.zenModeActive = active; if (!active && tab === gBrowser.selectedTab) continue; try { tab.linkedBrowser.docShellIsActive = active; } catch (e) { console.error(e); } const browser = tab.linkedBrowser.closest('.browserSidebarContainer'); if (active) { tab.removeAttribute('pending'); browser.setAttribute('zen-split', 'true'); browser.addEventListener('dragstart', this.onBrowserDragStart); browser.addEventListener('dragend', this.onBrowserDragEnd); } else { // browser.removeAttribute('zen-split'); // browser.removeAttribute('style'); browser.removeEventListener('dragstart', this.onBrowserDragStart); browser.removeEventListener('dragend', this.onBrowserDragEnd); } } } /** * Resets the container style. * * @param {Element} container - The container element. * @param {boolean} [removeDeckSelected=false] - Whether to remove the 'deck-selected' attribute. */ resetContainerStyle(container, removeDeckSelected = false) { container.removeAttribute('zen-split'); container.style.inset = ''; if (removeDeckSelected) { container.classList.remove('deck-selected'); } } /** * Updates the UI of the panel. * * @param {Element} panel - The panel element. */ updatePanelUI(panel) { for (const gridType of ['hsep', 'vsep', 'grid', 'unsplit']) { const selector = panel.querySelector(`.zen-split-view-modifier-preview.${gridType}`); selector.classList.remove('active'); if (this.currentView >= 0 && this._data[this.currentView].gridType === gridType) { selector.classList.add('active'); } } } /** * @description unsplit the current view.] */ unsplitCurrentView() { if (this.currentView < 0) return; this.removeGroup(this.currentView); const currentTab = window.gBrowser.selectedTab; window.gBrowser.selectedTab = currentTab; } /** * @description opens a new tab and switches to it. * @param {string} url - The url to open * @param {object} options - The options for the tab * @returns {tab} The tab that was opened */ openAndSwitchToTab(url, options) { const parentWindow = window.ownerGlobal.parent; const targetWindow = parentWindow || window; const tab = targetWindow.gBrowser.addTrustedTab(url, options); targetWindow.gBrowser.selectedTab = tab; return tab; } toggleShortcut(gridType) { if (gridType === 'unsplit') { this.unsplitCurrentView(); return; } const tabs = gBrowser.visibleTabs; if (tabs.length < 2 || this.currentView >= 0) { return; } let nextTabIndex = tabs.indexOf(gBrowser.selectedTab) + 1; if (nextTabIndex >= tabs.length) { // Find the first non-hidden tab nextTabIndex = tabs.findIndex((tab) => !tab.hidden); } else if (nextTabIndex < 0) { // reverse find the first non-hidden tab nextTabIndex = tabs .slice() .reverse() .findIndex((tab) => !tab.hidden); } const selected_tabs = gBrowser.selectedTab.multiselected ? gBrowser.selectedTabs : [gBrowser.selectedTab, tabs[nextTabIndex]]; this.splitTabs(selected_tabs, gridType); } /** * @description removes the tab from the split * @param container - The container element */ removeTabFromSplit = (container) => { const browser = container.querySelector('browser'); if (browser) { const tab = gBrowser.getTabForBrowser(browser); if (tab) { const groupIndex = this._data.findIndex((group) => group.tabs.includes(tab)); this.deactivateCurrentSplitView(); if (groupIndex >= 0) { this.removeTabFromGroup(tab, groupIndex, { forUnsplit: true }); } gBrowser.selectedTab = tab; tab._selected = true; } } }; _maybeRemoveFakeBrowser(select = true) { gBrowser.tabbox.removeAttribute('style'); this.tabBrowserPanel.removeAttribute('dragging-split'); if (this.fakeBrowser) { delete this._hasAnimated; this.fakeBrowser.remove(); this.fakeBrowser = null; if (this._draggingTab) this._draggingTab._visuallySelected = false; if (select) { gBrowser.selectedTab = this._draggingTab; this._draggingTab = null; } for (const browser of gBrowser.browsers) { browser.removeAttribute('style'); } } } /** * @description moves the tab to the split view if dragged on a browser * @param event - The event * @param draggedTab - The dragged tab * @returns {boolean} true if the tab was moved to the split view */ moveTabToSplitView(event, draggedTab) { const canDrop = this._canDrop; this._canDrop = false; if (!canDrop || !this.fakeBrowser) { this._maybeRemoveFakeBrowser(false); return false; } // CHeck if it's inside the tabbox const tabboxRect = gBrowser.tabbox.getBoundingClientRect(); const elementSeparation = ZenThemeModifier.elementSeparation; if ( event.clientX < tabboxRect.left || event.clientX > tabboxRect.right - elementSeparation || event.clientY < tabboxRect.top || event.clientY > tabboxRect.bottom - elementSeparation ) { this._maybeRemoveFakeBrowser(false); return false; } const dropSide = this.fakeBrowser?.getAttribute('side'); const containerRect = this.fakeBrowser.getBoundingClientRect(); const padding = ZenThemeModifier.elementSeparation; const dropTarget = document.elementFromPoint( dropSide === 'left' ? containerRect.left + containerRect.width + padding + 5 : containerRect.left - padding - 5, event.clientY ); const browser = dropTarget?.closest('browser') ?? dropTarget?.closest('.browserSidebarContainer')?.querySelector('browser'); if (!browser) { this._maybeRemoveFakeBrowser(false); return false; } gBrowser.selectedTab = this._draggingTab; this._draggingTab = null; const browserContainer = draggedTab.linkedBrowser?.closest('.browserSidebarContainer'); if (browserContainer) { browserContainer.style.opacity = '0'; } const droppedOnTab = gZenGlanceManager.getTabOrGlanceParent(gBrowser.getTabForBrowser(browser)); if (droppedOnTab && droppedOnTab !== draggedTab) { // Calculate which side of the target browser the drop occurred // const browserRect = browser.getBoundingClientRect(); // const hoverSide = this.calculateHoverSide(event.clientX, event.clientY, browserRect); const hoverSide = dropSide; if (droppedOnTab.splitView) { // Add to existing split view const groupIndex = this._data.findIndex((group) => group.tabs.includes(droppedOnTab)); const group = this._data[groupIndex]; 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)) { this._moveTabsToContainer([draggedTab], droppedOnTab); gBrowser.moveTabToGroup(draggedTab, splitGroup); if (hoverSide === 'left' || hoverSide === 'top') { try { splitGroup.tabs[0].before(draggedTab); } catch (e) { console.warn( `Failed to move tab ${draggedTab.id} before ${splitGroup.tabs[0].id}: ${e}` ); } } } const droppedOnSplitNode = this.getSplitNodeFromTab(droppedOnTab); const parentNode = droppedOnSplitNode.parent; // Then add the tab to the split view group.tabs.push(draggedTab); // If dropping on a side, create a new split in that direction if (hoverSide !== 'center') { const splitDirection = hoverSide === 'left' || hoverSide === 'right' ? 'row' : 'column'; if (parentNode.direction !== splitDirection) { this.splitIntoNode( droppedOnSplitNode, new nsSplitLeafNode(draggedTab, 50), hoverSide, 0.5 ); } else { this.addTabToSplit( draggedTab, parentNode, /* prepend = */ hoverSide === 'left' || hoverSide === 'top' ); } } else { this.addTabToSplit(draggedTab, group.layoutTree); } this.activateSplitView(group, true); } } else { // Create new split view with layout based on drop position let gridType = 'vsep'; //switch (hoverSide) { // case 'left': // case 'right': // gridType = 'vsep'; // break; // case 'top': // case 'bottom': // gridType = 'hsep'; // break; // default: // gridType = 'grid'; //} // Put tabs always as if it was dropped from the left this.splitTabs( dropSide == 'left' ? [draggedTab, droppedOnTab] : [droppedOnTab, draggedTab], gridType, 1 ); } } if (this._finishAllAnimatingPromise) { this._finishAllAnimatingPromise.then(() => { this._maybeRemoveFakeBrowser(false); }); } if (browserContainer) { this.animateBrowserDrop(browserContainer, () => { this._maybeRemoveFakeBrowser(false); this._finishAllAnimatingPromise = null; }); } return true; } animateBrowserDrop(browserContainer, callback = () => {}) { gZenUIManager.motion .animate( browserContainer, { scale: [0.97, 1], opacity: [0, 1], }, { type: 'spring', bounce: 0.4, duration: 0.2, delay: 0.1, } ) .then(callback); } handleTabDrop(event, urls, replace) { if (replace || urls.length !== 1) { return false; } const url = urls[0]; if (!url.startsWith('panel-')) { return false; } const browserContainer = document.getElementById(url); const browser = browserContainer?.querySelector('browser'); if (!browser) { return false; } const tab = gBrowser.getTabForBrowser(browser); if (!tab) { return false; } if (tab.splitView) { // Unsplit the tab and exit from the drag view this.dropZone?.removeAttribute('enabled'); this.disableTabRearrangeView(event); this.removeTabFromSplit(browserContainer); return true; } return false; } /** * Gets or creates a tab group for split view tabs * @param {Array} tabs Initial tabs to add to the group if creating new * @returns {TabGroup} The tab group for split view tabs */ _getSplitViewGroup(tabs) { if (tabs.some((tab) => tab.hasAttribute('zen-essential'))) { return null; } // Try to find an existing split view group let splitGroup = gBrowser.tabGroups.find( (group) => group.getAttribute('split-view-group') && group.tabs.some((tab) => tabs.includes(tab) && tab.splitView) ); if (splitGroup) { return splitGroup; } // We can't create an empty group, so only create if we have tabs if (tabs?.length) { // Create a new group with the initial tabs gBrowser.addTabGroup(tabs, { label: '', showCreateUI: false, insertBefore: tabs[0], forSplitView: true, }); } return null; } storeDataForSessionStore() { // We cant store any tab or browser elements in the session store // so we need to store the tab indexes and group indexes const data = this._data.map((group) => { return { groupId: group.tabs[0].group?.id, gridType: group.gridType, }; }); return data; } restoreDataFromSessionStore(data) { if (!data) { return; } this._sessionRestoring = true; // We can just get the tab group with document.getElementById(group.groupId) // and add the tabs to it for (const group of data) { const groupElement = document.getElementById(group.groupId); if (groupElement) { const tabs = groupElement.tabs; this.splitTabs(tabs, group.gridType); } } delete this._sessionRestoring; } onAfterWorkspaceSessionRestore() { if ( gBrowser.selectedTab.group?.hasAttribute('split-view-group') && !gBrowser.selectedTab.pinned ) { // Activate all browsers in the split view this.currentView = -1; this.onLocationChange(gBrowser.selectedTab.linkedBrowser); } } maybeDisableOpeningTabOnSplitView() { const shouldBeDisabled = !this.canOpenLinkInSplitView(); document .getElementById('cmd_zenSplitViewLinkInNewTab') .setAttribute('disabled', shouldBeDisabled); const splitGlanceCommand = document.getElementById('cmd_zenGlanceSplit'); if (shouldBeDisabled) { splitGlanceCommand.setAttribute('disabled', true); } else { splitGlanceCommand.removeAttribute('disabled'); } } canOpenLinkInSplitView() { const currentView = this.currentView; if (currentView < 0) { return true; } const group = this._data[currentView]; if (!group || group.tabs.length >= this.MAX_TABS) { return false; } return true; } createEmptySplit() { const selectedTab = gBrowser.selectedTab; const emptyTab = gZenWorkspaces._emptyTab; const data = { tabs: [selectedTab, emptyTab], gridType: 'grid', layoutTree: this.calculateLayoutTree([selectedTab, emptyTab], 'grid'), }; this._data.push(data); this.activateSplitView(data); gBrowser.selectedTab = emptyTab; window.addEventListener( 'ZenURLBarClosed', (event) => { const { onElementPicked, onSwitch } = event.detail; const groupIndex = this._data.findIndex((group) => group.tabs.includes(emptyTab)); const newSelectedTab = gBrowser.selectedTab; const cleanup = () => { this.removeTabFromGroup(emptyTab, groupIndex, { changeTab: !onSwitch, forUnsplit: true }); const command = document.getElementById('cmd_zenNewEmptySplit'); command.removeAttribute('disabled'); }; if (onElementPicked) { if ( newSelectedTab === emptyTab || newSelectedTab === selectedTab || selectedTab.getAttribute('zen-workspace-id') !== newSelectedTab.getAttribute('zen-workspace-id') ) { cleanup(); return; } this.removeTabFromGroup(emptyTab, groupIndex, { forUnsplit: true }); gBrowser.selectedTab = selectedTab; this.resetTabState(emptyTab, false); this.splitTabs([selectedTab, newSelectedTab], 'grid', 1); } else { cleanup(); } }, { once: true } ); setTimeout(() => { gZenUIManager.handleNewTab(false, false, 'tab', true); }, 0); } } window.gZenViewSplitter = new nsZenViewSplitter();