feat: Added workspace rearrange inline with the icons, b=no-bug, c=workspaces, common

src/browser/base/content/zen-keysets.inc.xhtml

@@ -43,7 +43,7 @@
   <command id="cmd_zenCtxDeleteWorkspace" />
   <command id="cmd_zenChangeWorkspaceName" />
   <command id="cmd_zenChangeWorkspaceIcon" />
-  <command id="cmd_zenOpenWorkspacePanel" />
+  <command id="cmd_zenReorderWorkspaces" />
   <command id="cmd_zenOpenWorkspaceCreation" />
 
   <command id="cmd_zenPinnedTabReset" />

src/browser/base/content/zen-panels/popups.inc

@@ -23,7 +23,7 @@
     <menupopup />
   </menu>
   <menuseparator/>
-  <menuitem id="context_zenOpenWorkspacePanel" data-l10n-id="zen-workspaces-panel-context-manage" command="cmd_zenOpenWorkspacePanel"/>
+  <menuitem id="context_zenReorderWorkspaces" data-l10n-id="zen-workspaces-panel-context-reorder" command="cmd_zenReorderWorkspaces"/>
   <menuseparator/>
   <menuitem id="context_zenDeleteWorkspace" data-l10n-id="zen-workspaces-panel-context-delete" command="cmd_zenCtxDeleteWorkspace"/>
 </menupopup>

src/browser/base/content/zen-panels/workspaces-panel.inc

@@ -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/.
-
-<panel flip="slide" type="arrow" orient="vertical" id="PanelUI-zen-workspaces" position="bottomright topright" mainview="true" side="left">
-  <panelmultiview id="PanelUI-zen-workspaces-multiview" mainViewId="PanelUI-zen-workspaces-view">
-    <panelview id="PanelUI-zen-workspaces-view" class="PanelUI-subView" role="document" mainview-with-header="true" has-custom-header="true" closemenu="none">
-      <vbox>
-        <hbox>
-          <h3 data-l10n-id="zen-panel-ui-workspaces-text" id="PanelUI-zen-workspaces-header"></h3>
-          <toolbarbutton id="PanelUI-zen-workspaces-reorder-mode" class="subviewbutton">
-            <image></image>
-          </toolbarbutton>
-          <toolbarbutton id="PanelUI-zen-workspaces-new" class="subviewbutton" command="cmd_zenOpenWorkspaceCreation">
-            <image></image>
-          </toolbarbutton>
-        </hbox>
-      </vbox>
-      <html:div id="PanelUI-zen-workspaces-list">
-      </html:div>
-    </panelview>
-  </panelmultiview>
-</panel>

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

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;
 }

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);
   },

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;

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));

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);

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)) {

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) {

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);

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(`
-          <div class="zen-workspace-icon">
-          </div>
-          <vbox>
-            <div class="zen-workspace-name">
-            </div>
-            <div class="zen-workspace-container" ${containerGroup ? '' : 'hidden="true"'}>
-            </div>
-          </vbox>
-            <image class="toolbarbutton-icon zen-workspace-actions-reorder-icon" ></image>
-        `);
-
-      // 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) {

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));