diff --git a/l10n b/l10n index 1bcb131a4..9b84c28c9 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 1bcb131a45ea5e5f7ced55bffb5386156542278a +Subproject commit 9b84c28c9e46b188d93b98c38cf644acda59bdaa diff --git a/src/browser/base/content/zen-keysets.inc.xhtml b/src/browser/base/content/zen-keysets.inc.xhtml index 98f609e5a..c12d9820e 100644 --- a/src/browser/base/content/zen-keysets.inc.xhtml +++ b/src/browser/base/content/zen-keysets.inc.xhtml @@ -43,7 +43,7 @@ - + diff --git a/src/browser/base/content/zen-panels/popups.inc b/src/browser/base/content/zen-panels/popups.inc index 158a8b67e..8c93da29b 100644 --- a/src/browser/base/content/zen-panels/popups.inc +++ b/src/browser/base/content/zen-panels/popups.inc @@ -23,7 +23,7 @@ - + diff --git a/src/browser/base/content/zen-panels/workspaces-panel.inc b/src/browser/base/content/zen-panels/workspaces-panel.inc deleted file mode 100644 index ba42669d7..000000000 --- a/src/browser/base/content/zen-panels/workspaces-panel.inc +++ /dev/null @@ -1,23 +0,0 @@ -# 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/. - - - - - - -

- - - - - - - - - - - - - \ No newline at end of file diff --git a/src/browser/base/content/zen-popupset.inc.xhtml b/src/browser/base/content/zen-popupset.inc.xhtml index a5743f286..df79aa395 100644 --- a/src/browser/base/content/zen-popupset.inc.xhtml +++ b/src/browser/base/content/zen-popupset.inc.xhtml @@ -3,7 +3,6 @@ # file, You can obtain one at http://mozilla.org/MPL/2.0/. #include zen-panels/gradient-generator.inc -#include zen-panels/workspaces-panel.inc #include zen-panels/emojis-picker.inc #include zen-panels/popups.inc diff --git a/src/browser/themes/shared/zen-icons/icons.css b/src/browser/themes/shared/zen-icons/icons.css index b48c96564..b0bccca63 100644 --- a/src/browser/themes/shared/zen-icons/icons.css +++ b/src/browser/themes/shared/zen-icons/icons.css @@ -185,16 +185,10 @@ #appMenu-zoomEnlarge-button2, #PanelUI-zen-profiles-newProfile, #zen-sidebar-add-panel-button, -#PanelUI-zen-workspaces-new image, #PanelUI-zen-gradient-generator-color-custom-add image { list-style-image: url('plus.svg') !important; } -#PanelUI-zen-workspaces-reorder-mode image { - list-style-image: url('move-tab.svg') !important; - rotate: 90deg; -} - #cut-button { list-style-image: url('edit-cut.svg') !important; } diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs index 9f99817a3..5b43d3b67 100644 --- a/src/zen/common/ZenUIManager.mjs +++ b/src/zen/common/ZenUIManager.mjs @@ -967,16 +967,22 @@ var gZenVerticalTabsManager = { gZenCompactModeManager.getAndApplySidebarWidth(); } gZenUIManager.updateTabsToolbar(); - - gURLBar._initCopyCutController(); - gURLBar._initPasteAndGo(); - gURLBar._initStripOnShare(); + this.rebuildURLBarMenus(); } catch (e) { console.error(e); } this._isUpdating = false; }, + rebuildURLBarMenus() { + if (document.getElementById('paste-and-go')) { + return; + } + gURLBar._initCopyCutController(); + gURLBar._initPasteAndGo(); + gURLBar._initStripOnShare(); + }, + rebuildAreas() { CustomizableUI.zenInternalCU._rebuildRegisteredAreas(/* zenDontRebuildCollapsed */ true); }, diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css index 71b41e0ad..ffab2d767 100644 --- a/src/zen/common/styles/zen-popup.css +++ b/src/zen/common/styles/zen-popup.css @@ -400,6 +400,8 @@ menuseparator { min-width: unset !important; margin: 0px !important; border-radius: calc(var(--zen-native-inner-radius) + 2px) !important; + background: light-dark(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)) !important; + border: 1px solid light-dark(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15)) !important; :root[zen-right-side='true'] & { order: -1; diff --git a/src/zen/common/styles/zen-single-components.css b/src/zen/common/styles/zen-single-components.css index 9371bb0a9..058c21890 100644 --- a/src/zen/common/styles/zen-single-components.css +++ b/src/zen/common/styles/zen-single-components.css @@ -40,15 +40,13 @@ body > #confetti { #PanelUI-zen-emojis-picker { --panel-width: 250px; - --panel-padding: 10px; - - &::part(content) { - gap: 15px; - } + --panel-padding: 0px; #PanelUI-zen-emojis-picker-header { gap: 10px; align-items: center; + padding: 10px; + padding-bottom: 5px; } #PanelUI-zen-emojis-picker-none label { @@ -57,6 +55,7 @@ body > #confetti { #PanelUI-zen-emojis-picker-search { padding: 4px; + width: 100%; } #PanelUI-zen-emojis-picker-list { @@ -65,6 +64,9 @@ body > #confetti { overflow-y: auto; overflow-x: hidden; + padding: 10px; + padding-top: 5px; + gap: 5px; display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); diff --git a/src/zen/common/zen-sets.js b/src/zen/common/zen-sets.js index 11e24556a..761f1583b 100644 --- a/src/zen/common/zen-sets.js +++ b/src/zen/common/zen-sets.js @@ -101,8 +101,10 @@ document.addEventListener( case 'cmd_zenChangeWorkspaceIcon': gZenWorkspaces.changeWorkspaceIcon(); break; - case 'cmd_zenOpenWorkspacePanel': - gZenWorkspaces.openWorkspacesDialog(event); + case 'cmd_zenReorderWorkspaces': + gZenUIManager.showToast('zen-workspaces-how-to-reorder', { + timeout: 10000, + }); break; case 'cmd_zenOpenWorkspaceCreation': gZenWorkspaces.openWorkspaceCreation(event); diff --git a/src/zen/workspaces/ZenWorkspace.mjs b/src/zen/workspaces/ZenWorkspace.mjs index c366649fb..6d2fa56db 100644 --- a/src/zen/workspaces/ZenWorkspace.mjs +++ b/src/zen/workspaces/ZenWorkspace.mjs @@ -72,6 +72,13 @@ .querySelector('.zen-workspaces-actions') .addEventListener('click', this.onActionsCommand.bind(this)); + this.indicator + .querySelector('.zen-current-workspace-indicator-icon') + .addEventListener('dblclick', (event) => { + event.stopPropagation(); + gZenWorkspaces.changeWorkspaceIcon(); + }); + this.scrollbox._getScrollableElements = () => { const children = [...this.pinnedTabsContainer.children, ...this.tabsContainer.children]; if (Services.prefs.getBoolPref('zen.view.show-newtab-button-top', false)) { diff --git a/src/zen/workspaces/ZenWorkspaceCreation.mjs b/src/zen/workspaces/ZenWorkspaceCreation.mjs index fc3214fad..991e2418c 100644 --- a/src/zen/workspaces/ZenWorkspaceCreation.mjs +++ b/src/zen/workspaces/ZenWorkspaceCreation.mjs @@ -61,6 +61,10 @@ return this.getAttribute('workspace-id'); } + get previousWorkspaceId() { + return this.getAttribute('previous-workspace-id'); + } + get elementsToAnimate() { return [ this.querySelector('.zen-workspace-creation-title'), @@ -150,9 +154,7 @@ .animate( [ gBrowser.tabContainer, - ...(gZenVerticalTabsManager._hasSetSingleToolbar - ? [document.getElementById('nav-bar')] - : []), + ...(gZenVerticalTabsManager._hasSetSingleToolbar ? [gURLBar.textbox] : []), ], { opacity: [1, 0], @@ -166,7 +168,7 @@ .then(() => { gBrowser.tabContainer.style.visibility = 'collapse'; if (gZenVerticalTabsManager._hasSetSingleToolbar) { - document.getElementById('nav-bar').style.visibility = 'collapse'; + gURLBar.textbox.style.visibility = 'collapse'; } gZenUIManager.motion.animate( this.elementsToAnimate, @@ -206,8 +208,7 @@ } async onCancelButtonCommand() { - const workspaces = await gZenWorkspaces._workspaces(); - await gZenWorkspaces.changeWorkspace(workspaces.workspaces[workspaces.workspaces.length - 2]); + await gZenWorkspaces.changeWorkspaceWithID(this.previousWorkspaceId); } onIconCommand(event) { @@ -294,8 +295,8 @@ gBrowser.tabContainer.style.visibility = ''; gBrowser.tabContainer.style.opacity = 0; if (gZenVerticalTabsManager._hasSetSingleToolbar) { - document.getElementById('nav-bar').style.visibility = ''; - document.getElementById('nav-bar').style.opacity = 0; + gURLBar.textbox.style.visibility = ''; + gURLBar.textbox.style.opacity = 0; } const workspace = await gZenWorkspaces.getActiveWorkspace(); @@ -305,9 +306,7 @@ await gZenUIManager.motion.animate( [ gBrowser.tabContainer, - ...(gZenVerticalTabsManager._hasSetSingleToolbar - ? [document.getElementById('nav-bar')] - : []), + ...(gZenVerticalTabsManager._hasSetSingleToolbar ? [gURLBar.textbox] : []), ], { opacity: [0, 1], @@ -320,7 +319,7 @@ ); gBrowser.tabContainer.style.opacity = ''; if (gZenVerticalTabsManager._hasSetSingleToolbar) { - document.getElementById('nav-bar').style.opacity = ''; + gURLBar.textbox.style.opacity = ''; } for (const element of this.#hiddenElements) { diff --git a/src/zen/workspaces/ZenWorkspaceIcons.mjs b/src/zen/workspaces/ZenWorkspaceIcons.mjs index c093f16e9..64e20900d 100644 --- a/src/zen/workspaces/ZenWorkspaceIcons.mjs +++ b/src/zen/workspaces/ZenWorkspaceIcons.mjs @@ -14,6 +14,74 @@ this._hasConnected = true; window.addEventListener('ZenWorkspacesUIUpdate', this, true); + + this.initDragAndDrop(); + } + + initDragAndDrop() { + let dragStart = 0; + let draggedTab = null; + + this.addEventListener('mousedown', (e) => { + const target = e.target.closest('toolbarbutton[zen-workspace-id]'); + if (!target) { + return; + } + + const isVertical = document.documentElement.getAttribute('zen-sidebar-expanded') != 'true'; + const clientPos = isVertical ? 'clientY' : 'clientX'; + + this.isReorderMode = false; + dragStart = e[clientPos]; + draggedTab = target; + draggedTab.setAttribute('dragged', 'true'); + + e.stopPropagation(); + + const mouseMoveHandler = (moveEvent) => { + if (Math.abs(moveEvent[clientPos] - dragStart) > 5) { + this.isReorderMode = true; + } + + if (this.isReorderMode) { + const tabs = [...this.children]; + const mouse = moveEvent[clientPos]; + + for (const tab of tabs) { + if (tab === draggedTab) continue; + const rect = tab.getBoundingClientRect(); + if ( + mouse > rect[isVertical ? 'top' : 'left'] && + mouse < rect[isVertical ? 'bottom' : 'right'] + ) { + if ( + mouse < + rect[isVertical ? 'top' : 'left'] + rect[isVertical ? 'height' : 'width'] / 2 + ) { + this.insertBefore(draggedTab, tab); + } else { + this.insertBefore(draggedTab, tab.nextSibling); + } + } + } + } + }; + + const mouseUpHandler = () => { + document.removeEventListener('mousemove', mouseMoveHandler); + document.removeEventListener('mouseup', mouseUpHandler); + + draggedTab.removeAttribute('dragged'); + + this.reorderWorkspaceToIndex(draggedTab, Array.from(this.children).indexOf(draggedTab)); + + draggedTab = null; + this.isReorderMode = false; + }; + + document.addEventListener('mousemove', mouseMoveHandler); + document.addEventListener('mouseup', mouseUpHandler); + }); } #createWorkspaceIcon(workspace) { @@ -91,6 +159,25 @@ } return null; } + + get isReorderMode() { + return this.hasAttribute('reorder-mode'); + } + + set isReorderMode(value) { + if (value) { + this.setAttribute('reorder-mode', 'true'); + } else { + this.removeAttribute('reorder-mode'); + this.style.removeProperty('--zen-workspace-icon-width'); + this.style.removeProperty('--zen-workspace-icon-height'); + } + } + + reorderWorkspaceToIndex(draggedTab, index) { + const workspaceId = draggedTab.getAttribute('zen-workspace-id'); + gZenWorkspaces.reorderWorkspace(workspaceId, index); + } } customElements.define('zen-workspace-icons', ZenWorkspaceIcons); diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index 0693e6f45..c2ab4d57d 100644 --- a/src/zen/workspaces/ZenWorkspaces.mjs +++ b/src/zen/workspaces/ZenWorkspaces.mjs @@ -1101,11 +1101,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { } addPopupListeners() { - const popup = document.getElementById('PanelUI-zen-workspaces'); - - popup.addEventListener('popuphidden', this.handlePanelHidden.bind(this)); - popup.addEventListener('command', this.handlePanelCommand.bind(this)); - const workspaceActions = document.getElementById('zenWorkspaceMoreActions'); workspaceActions.addEventListener('popupshowing', this.updateWorkspaceActionsMenu.bind(this)); @@ -1136,19 +1131,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { } } - handlePanelCommand(event) { - let target = event.target.closest('toolbarbutton'); - target ??= event.target.closest('button'); - if (!target) { - return; - } - switch (target.id) { - case 'PanelUI-zen-workspaces-reorder-mode': - this.toggleReorderMode(); - break; - } - } - updateWorkspaceActionsMenuContainer(event) { const workspace = this.getActiveWorkspaceFromCache(); let containerTabId = workspace.containerTabId; @@ -1227,208 +1209,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { } async _propagateWorkspaceDataForWindow(browser, { ignoreStrip = false, clearCache = true } = {}) { - let workspaceList = browser.document.getElementById('PanelUI-zen-workspaces-list'); - const createWorkspaceElement = (workspace) => { - let element = browser.document.createXULElement('toolbarbutton'); - element.className = 'subviewbutton zen-workspace-button'; - element.setAttribute('tooltiptext', workspace.name); - element.setAttribute('zen-workspace-id', workspace.uuid); - if (this.isWorkspaceActive(workspace)) { - element.setAttribute('active', 'true'); - } - let containerGroup = undefined; - try { - containerGroup = browser.ContextualIdentityService.getPublicIdentities().find( - (container) => container.userContextId === workspace.containerTabId - ); - } catch (e) { - console.warn('gZenWorkspaces: Error setting container color', e); - } - if (containerGroup) { - element.classList.add('identity-color-' + containerGroup.color); - element.setAttribute('data-usercontextid', containerGroup.userContextId); - } - // Set draggable attribute based on reorder mode - if (this.isReorderModeOn(browser)) { - element.setAttribute('draggable', 'true'); - } - element.addEventListener( - 'dragstart', - function (event) { - if (this.isReorderModeOn(browser)) { - this.draggedElement = element; - event.dataTransfer.effectAllowed = 'move'; - event.dataTransfer.setData('text/plain', element.getAttribute('zen-workspace-id')); - - // Create a transparent drag image for Linux - if (AppConstants.platform === 'linux') { - const dragImage = document.createElement('canvas'); - dragImage.width = 1; - dragImage.height = 1; - event.dataTransfer.setDragImage(dragImage, 0, 0); - } - - element.classList.add('dragging'); - } else { - event.preventDefault(); - } - }.bind(browser.gZenWorkspaces) - ); - - element.addEventListener( - 'dragover', - function (event) { - if (this.isReorderModeOn(browser) && this.draggedElement) { - event.preventDefault(); - event.dataTransfer.dropEffect = 'move'; - - // Ensure the dragover effect is visible on Linux - if (AppConstants.platform === 'linux') { - const targetId = element.getAttribute('zen-workspace-id'); - const draggedId = this.draggedElement.getAttribute('zen-workspace-id'); - if (targetId !== draggedId) { - element.classList.add('dragover'); - } - } - } - }.bind(browser.gZenWorkspaces) - ); - - element.addEventListener('dragenter', function (event) { - if (this.isReorderModeOn(browser) && this.draggedElement) { - element.classList.add('dragover'); - } - }); - - element.addEventListener('dragleave', function (event) { - element.classList.remove('dragover'); - }); - - element.addEventListener( - 'drop', - async function (event) { - event.preventDefault(); - element.classList.remove('dragover'); - if (this.isReorderModeOn(browser)) { - const draggedWorkspaceId = event.dataTransfer.getData('text/plain'); - const targetWorkspaceId = element.getAttribute('zen-workspace-id'); - if (draggedWorkspaceId !== targetWorkspaceId) { - await this.moveWorkspace(draggedWorkspaceId, targetWorkspaceId); - } - if (this.draggedElement) { - this.draggedElement.classList.remove('dragging'); - this.draggedElement = null; - } - } - }.bind(browser.gZenWorkspaces) - ); - - element.addEventListener( - 'dragend', - function (event) { - if (this.draggedElement) { - this.draggedElement.classList.remove('dragging'); - this.draggedElement = null; - } - const workspaceElements = browser.document.querySelectorAll('.zen-workspace-button'); - for (const elem of workspaceElements) { - elem.classList.remove('dragover'); - } - }.bind(browser.gZenWorkspaces) - ); - - let childs = browser.MozXULElement.parseXULToFragment(` -
-
- -
-
-
-
- - - `); - - // use text content instead of innerHTML to avoid XSS - childs.querySelector('.zen-workspace-icon').textContent = - browser.gZenWorkspaces.getWorkspaceIcon(workspace); - childs.querySelector('.zen-workspace-name').textContent = workspace.name; - if (containerGroup) { - childs.querySelector('.zen-workspace-container').textContent = - ContextualIdentityService.getUserContextLabel(containerGroup.userContextId); - } - - element.appendChild(childs); - element.onclick = (async () => { - if (this.isReorderModeOn(browser)) { - return; // Return early if reorder mode is on - } - const workspaceId = element.getAttribute('zen-workspace-id'); - const workspaces = await this._workspaces(); - const workspace = workspaces.workspaces.find((w) => w.uuid === workspaceId); - await this.changeWorkspace(workspace); - let panel = this.ownerWindow.document.getElementById('PanelUI-zen-workspaces'); - PanelMultiView.hidePopup(panel); - }).bind(browser.gZenWorkspaces); - return element; - }; - - const createLastPositionDropTarget = () => { - const element = browser.document.createXULElement('div'); - element.className = 'zen-workspace-last-place-drop-target'; - - element.addEventListener( - 'dragover', - function (event) { - if (this.isReorderModeOn(browser) && this.draggedElement) { - event.preventDefault(); - event.dataTransfer.dropEffect = 'move'; - - // Ensure the dragover effect is visible on Linux - if (AppConstants.platform === 'linux') { - element.classList.add('dragover'); - } - } - }.bind(browser.gZenWorkspaces) - ); - - element.addEventListener( - 'dragenter', - function (event) { - if (this.isReorderModeOn(browser) && this.draggedElement) { - element.classList.add('dragover'); - } - }.bind(browser.gZenWorkspaces) - ); - - element.addEventListener( - 'dragleave', - function (event) { - element.classList.remove('dragover'); - }.bind(browser.gZenWorkspaces) - ); - - element.addEventListener( - 'drop', - async function (event) { - event.preventDefault(); - element.classList.remove('dragover'); - - if (this.isReorderModeOn(browser)) { - const draggedWorkspaceId = event.dataTransfer.getData('text/plain'); - await this.moveWorkspaceToEnd(draggedWorkspaceId); - - if (this.draggedElement) { - this.draggedElement.classList.remove('dragging'); - this.draggedElement = null; - } - } - }.bind(browser.gZenWorkspaces) - ); - - return element; - }; - if (clearCache) { browser.gZenWorkspaces._workspaceCache = null; browser.gZenWorkspaces._workspaceBookmarksCache = null; @@ -1446,21 +1226,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { ); } await browser.gZenWorkspaces.workspaceBookmarks(); - workspaceList.innerHTML = ''; - workspaceList.parentNode.style.display = 'flex'; - if (workspaces.workspaces.length <= 0) { - workspaceList.innerHTML = 'No workspaces available'; - workspaceList.setAttribute('empty', 'true'); - } else { - workspaceList.removeAttribute('empty'); - } - - for (let workspace of workspaces.workspaces) { - let workspaceElement = createWorkspaceElement(workspace); - workspaceList.appendChild(workspaceElement); - } - - workspaceList.appendChild(createLastPositionDropTarget()); if (!ignoreStrip) { browser.gZenWorkspaces._fixIndicatorsNames(workspaces); } @@ -1491,55 +1256,33 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { }); } - handlePanelHidden() { - const workspacesList = document.getElementById('PanelUI-zen-workspaces-list'); - const reorderModeButton = document.getElementById('PanelUI-zen-workspaces-reorder-mode'); - - workspacesList?.removeAttribute('reorder-mode'); - reorderModeButton?.removeAttribute('active'); - } - - async moveWorkspaceToEnd(draggedWorkspaceId) { - const workspaces = (await this._workspaces()).workspaces; - const draggedIndex = workspaces.findIndex((w) => w.uuid === draggedWorkspaceId); - const draggedWorkspace = workspaces.splice(draggedIndex, 1)[0]; - workspaces.push(draggedWorkspace); - - await ZenWorkspacesStorage.updateWorkspacePositions(workspaces); - await this._propagateWorkspaceData(); - } - - isReorderModeOn(browser) { - return ( - browser.document - .getElementById('PanelUI-zen-workspaces-list') - .getAttribute('reorder-mode') === 'true' - ); - } - - toggleReorderMode() { - const workspacesList = document.getElementById('PanelUI-zen-workspaces-list'); - const reorderModeButton = document.getElementById('PanelUI-zen-workspaces-reorder-mode'); - const isActive = workspacesList.getAttribute('reorder-mode') === 'true'; - if (isActive) { - workspacesList.removeAttribute('reorder-mode'); - reorderModeButton.removeAttribute('active'); - } else { - workspacesList.setAttribute('reorder-mode', 'true'); - reorderModeButton.setAttribute('active', 'true'); + async reorderWorkspace(id, newPosition) { + if (this.privateWindowOrDisabled) { + return; } - - // Update draggable attribute - const workspaceElements = document.querySelectorAll('.zen-workspace-button'); - workspaceElements.forEach((elem) => { - // When reorder mode is toggled off, remove draggable attribute - // When reorder mode is toggled on, set draggable attribute - if (isActive) { - elem.removeAttribute('draggable'); - } else { - elem.setAttribute('draggable', 'true'); - } - }); + const workspaces = (await this._workspaces()).workspaces; + const workspace = workspaces.find((w) => w.uuid === id); + if (!workspace) { + console.warn(`Workspace with ID ${id} not found for reordering.`); + return; + } + // Remove the workspace from its current position + const currentIndex = workspaces.indexOf(workspace); + if (currentIndex === -1) { + console.warn(`Workspace with ID ${id} not found in the list.`); + return; + } + workspaces.splice(currentIndex, 1); + // Insert the workspace at the new position + if (newPosition < 0 || newPosition > workspaces.length) { + console.warn(`Invalid position ${newPosition} for reordering workspace with ID ${id}.`); + return; + } + workspaces.splice(newPosition, 0, workspace); + // Update the positions in the storage + await ZenWorkspacesStorage.updateWorkspacePositions(workspaces); + // Propagate the changes + await this._propagateWorkspaceData(); } async moveWorkspace(draggedWorkspaceId, targetWorkspaceId) { @@ -1553,28 +1296,14 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { await this._propagateWorkspaceData(); } - async openWorkspacesDialog(event) { - if (!this.workspaceEnabled || this.isPrivateWindow) { - return; - } - let target = this.activeWorkspaceIndicator || event.target; - let panel = document.getElementById('PanelUI-zen-workspaces'); - await this._propagateWorkspaceData({ - ignoreStrip: true, - clearCache: false, - }); - PanelMultiView.openPopup(panel, target, { - position: 'bottomright topright', - triggerEvent: event, - }).catch(console.error); - } - async openWorkspaceCreation(event) { let createForm; + const previousWorkspace = await this.getActiveWorkspace(); await this.createAndSaveWorkspace('Space', undefined, false, 0, { beforeChangeCallback: async (workspace) => { createForm = document.createXULElement('zen-workspace-creation'); createForm.setAttribute('workspace-id', workspace.uuid); + createForm.setAttribute('previous-workspace-id', previousWorkspace?.uuid || ''); gBrowser.tabContainer.after(createForm); await createForm.promiseInitialized; }, @@ -1582,11 +1311,6 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature { createForm.finishSetup(); } - closeWorkspacesSubView() { - let parentPanel = document.getElementById('PanelUI-zen-workspaces-multiview'); - parentPanel.goBack(parentPanel); - } - // Workspaces management _deleteAllTabsInWorkspace(workspaceID) { diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index 36be9f7b5..020b6a3a0 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -16,6 +16,7 @@ appearance: auto; position: relative; + -moz-window-dragging: no-drag; &[dont-show='true'] { display: none !important; @@ -52,10 +53,12 @@ transition: filter 0.2s, opacity 0.2s, - width 0.1s; + width 0.1s, + transform 0.1s; &[active='true'], - &:hover { + &:hover, + &[dragged='true'] { filter: grayscale(0); opacity: 1; } @@ -63,6 +66,15 @@ &:hover { background-color: var(--zen-toolbar-element-bg); } + + &[dragged='true'] { + transform: scale(1.05); + } + } + + &[reorder-mode='true'] toolbarbutton:not([dragged='true']) { + opacity: 0.2 !important; + filter: grayscale(1) !important; } &[icons-overflow] { @@ -122,222 +134,6 @@ } } -/* Workspaces Panel UI */ - -#PanelUI-zen-workspaces { - --panel-width: 320px; - --panel-padding: 0; -} - -#PanelUI-zen-workspaces > panelmultiview { - align-items: flex-start; - overflow-x: hidden; - overflow-y: auto; -} - -#PanelUI-zen-workspaces panelmultiview panelview { - position: relative; - padding: 10px; - width: var(--panel-width); -} - -#PanelUI-zen-workspaces-list { - display: flex; - flex-direction: column; - flex-shrink: 0; -} - -#PanelUI-zen-workspaces-list[empty='true'] { - font-weight: 600; - padding: 10px; - width: 100%; - text-align: start; - opacity: 0.5; -} - -.PanelUI-zen-workspaces-user-create { - height: 100%; - - .PanelUI-zen-workspaces-creation-wraper { - border-radius: 5px; - border: 1px solid var(--zen-colors-border); - - margin-top: 10px; - - & .PanelUI-zen-workspaces-icons-container { - padding: 10px 0; - min-width: 40px; - display: flex; - align-items: center; - justify-content: center; - border-right: 1px solid var(--zen-colors-border); - margin-right: 2px; - } - - & html|input { - border: none; - outline: none !important; - width: 100%; - } - } -} - -#PanelUI-zen-workspaces-list toolbarbutton { - padding: 5px; - border-radius: var(--zen-button-border-radius); - - margin-left: 0 !important; - margin-right: 0 !important; - - display: flex; - align-items: center; - position: relative; - - &:first-child { - margin-top: 10px; - } - - & .zen-workspace-icon { - position: relative; - width: 30px; - height: 30px; - border-radius: var(--zen-button-border-radius); - margin-right: 10px; - border: 1px solid var(--zen-colors-border); - display: flex; - justify-content: center; - align-items: center; - font-weight: 600; - flex-shrink: 0; - } - - &[data-usercontextid] .zen-workspace-icon { - border-color: color-mix(in srgb, var(--identity-tab-color) 40%, transparent 60%); - } - - & > vbox:has(> .zen-workspace-name) { - overflow: hidden; - } - - & .zen-workspace-name { - font-weight: 600; - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 100%; - } - - & .zen-workspace-container { - font-size: 12px; - opacity: 0.5; - font-weight: normal; - } - - .zen-workspace-actions-reorder-icon { - display: none; - margin: 0; - margin-left: auto !important; - } - - &.zen-workspace-button[active='true'] { - position: relative; - } - - &.zen-workspace-button[active='true'] .zen-workspace-icon::before { - content: ''; - position: absolute; - top: 50%; - transform: translateY(-50%); - left: -2px; - width: 2px; - height: 16px; - background-color: var(--toolbarbutton-icon-fill-attention); - border-radius: 5px; - } -} - -.zen-workspace-button.dragging { - opacity: 0.5; -} - -.zen-workspace-button.dragover::after { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 2px; - background-color: var(--toolbarbutton-icon-fill-attention); -} - -/* Enhanced visual feedback for Linux platform */ -@supports (-moz-gtk-csd-available) { - .zen-workspace-button.dragover { - background-color: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 15%, transparent); - } - - .zen-workspace-button.dragover::after { - height: 3px; - } -} - -.zen-workspace-last-place-drop-target.dragover { - background-color: var(--toolbarbutton-icon-fill-attention); -} - -/* Enhanced visual feedback for Linux platform */ -@supports (-moz-gtk-csd-available) { - .zen-workspace-last-place-drop-target { - height: 6px; - margin: 4px 0; - } - - .zen-workspace-last-place-drop-target.dragover { - background-color: var(--toolbarbutton-icon-fill-attention); - box-shadow: 0 0 4px var(--toolbarbutton-icon-fill-attention); - } -} - -#PanelUI-zen-workspaces-reorder-mode[active='true'] { - color: var(--toolbarbutton-icon-fill-attention) !important; -} - -#PanelUI-zen-workspaces-list[reorder-mode='true'] toolbarbutton { - .zen-workspace-actions-reorder-icon { - display: flex; - } -} - -#PanelUI-zen-workspaces-list[reorder-mode='true'] .zen-workspace-last-place-drop-target { - display: block; -} - -.zen-workspace-last-place-drop-target { - display: none; - height: 4px; - width: 100%; - border-radius: 5px; -} - -#PanelUI-zen-workspaces-view > vbox:nth-child(2) { - margin-top: 10px; -} - -#PanelUI-zen-workspaces-new, -#PanelUI-zen-workspaces-reorder-mode, -#PanelUI-zen-gradient-generator-color-custom-add { - min-height: 1px !important; - padding: 3px; - border-radius: 4px; - width: 24px; - height: 24px; -} - -#PanelUI-zen-workspaces-header { - margin-right: auto; -} - /* Mark workspaces indicator */ .zen-current-workspace-indicator { padding: calc(2px + var(--tab-inline-padding) + var(--zen-toolbox-padding));