Fix workspace position dragging on Linux (Fixes #7542)

This commit fixes an issue where dragging workspaces to change their position doesn't work on Linux platforms.

The main changes include:
1. Added Linux-specific drag and drop handling with a transparent drag image
2. Enhanced dragover event handling for better visual feedback on Linux
3. Improved CSS styles for drag and drop elements on Linux
4. Added clearer comments to explain the reorder mode behavior

The issue was that the drag and drop functionality wasn't working properly on Linux due to platform-specific behavior differences. This fix ensures that workspace reordering works consistently across all platforms.

Author: mbergo

src/zen/workspaces/ZenWorkspaces.mjs

@@ -1018,6 +1018,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
           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');
         }
@@ -1028,6 +1029,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
               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();
@@ -1041,6 +1051,15 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
             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.ZenWorkspaces)
         );
@@ -1150,6 +1169,11 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
             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.ZenWorkspaces)
         );
@@ -1259,6 +1283,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     // 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 {

src/zen/workspaces/zen-workspaces.css

@@ -365,10 +365,34 @@
   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;
 }