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

mr-cheffy · mr-cheffy · commit e8c43f597993 · 2025-06-11T14:45:00.000+02:00
diff --git 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
@@ -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" />
diff --git a/src/browser/base/content/zen-panels/popups.inc b/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>
diff --git a/src/browser/base/content/zen-panels/workspaces-panel.inc b/src/browser/base/content/zen-panels/workspaces-panel.inc
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css
