feat: Small quality fixes for drag and drop, b=no-bug, c=common, compact-mode, split-view, tabs

src/toolkit/components/prompts/content/commonDialog-css.patch

@@ -1,13 +1,13 @@
 diff --git a/toolkit/components/prompts/content/commonDialog.css b/toolkit/components/prompts/content/commonDialog.css
-index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..0095175bce6fb4520aca357e5209e1ad7329bbdb 100644
+index d811fb62d502cf6fc0bf8163f11e1d264dee9e82..a34363a6a8bf5db6826738dbad0ec6b75b633474 100644
 --- a/toolkit/components/prompts/content/commonDialog.css
 +++ b/toolkit/components/prompts/content/commonDialog.css
-@@ -88,7 +88,7 @@ dialog[insecureauth] {
- 
-   /* Fix padding/spacing */
-   dialog {
--    --grid-padding: 16px;
-+    --grid-padding: 24px;
+@@ -91,7 +91,7 @@ dialog[insecureauth] {
+     --grid-padding: 16px;
      /* All the inner items should have 4px inline margin, leading to 1.16em spacing
       * between the dialog and its contents, and 8px horizontal spacing between items. */
-     padding: var(--grid-padding) calc(var(--grid-padding) - 4px);
+-    padding: var(--grid-padding) calc(var(--grid-padding) - 4px);
++    padding: 24px 20px;
+ 
+     &::part(dialog-button) {
+       /* Adjust vertical margins for buttons in subdialogs. */

src/zen/common/modules/ZenUIManager.mjs

@@ -1397,7 +1397,7 @@ window.gZenVerticalTabsManager = {
     ) {
       return;
     }
-    if (isTab && !target.closest(".tab-label-container")) {
+    if (isTab && !target.closest(".tab-label-container") && event.type === "dblclick") {
       return;
     }
     this._tabEdited =

src/zen/compact-mode/sidebar.inc.css

@@ -9,6 +9,11 @@
     display: none !important;
   }
 
+  #zen-dragover-background {
+    width: calc(100% - var(--zen-toolbox-padding) * 2 - 5px);
+    left: unset;
+  }
+
   #zen-tabbox-wrapper {
     /* Remove extra 1px of margine we have to add to the tabbox */
     margin-left: var(--zen-element-separation) !important;

src/zen/drag-and-drop/ZenDragAndDrop.js

@@ -142,7 +142,7 @@
         }
         // Apply a transform translate to the tab in order to center it within the drag image
         // based on the event coordinates.
-        if (movingTabs.length === 1) {
+        if (!movingTabs.length > 1) {
           tabClone.style.transform = `translate(${(tabRect.width - dragData.offsetX) / 2}px, ${(tabRect.height - dragData.offsetY) / 2}px)`;
         }
         tabClone.setAttribute("drag-image", "true");
@@ -864,7 +864,9 @@
         if (event.target.classList.contains("zen-workspace-empty-space")) {
           dropElement = this._tabbrowserTabs.ariaFocusableItems.at(-1);
           // Only if there are no normal tabs to drop after
-          showIndicatorUnderNewTabButton = !tabs.some((tab) => !(tab.group || tab).pinned);
+          showIndicatorUnderNewTabButton = !tabs.some(
+            (tab) => !(tab.group || tab).pinned || tab.hasAttribute("zen-essential")
+          );
         } else {
           const numEssentials = gBrowser._numZenEssentials;
           const numPinned = gBrowser.pinnedTabCount - numEssentials;
@@ -973,13 +975,16 @@
 
     // eslint-disable-next-line complexity
     #animateVerticalPinnedGridDragOver(event) {
+      let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
+      let dragData = draggedTab._dragData;
+      let movingTabs = dragData.movingTabs;
+      if (!gZenPinnedTabManager.canEssentialBeAdded(draggedTab)) {
+        return;
+      }
       let essentialsPromoStatus = this.createZenEssentialsPromo();
       if (essentialsPromoStatus === "shown") {
         return;
       }
-      let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
-      let dragData = draggedTab._dragData;
-      let movingTabs = dragData.movingTabs;
       this.clearDragOverVisuals();
       if (
         !draggedTab.hasAttribute("zen-essential") &&
@@ -1090,6 +1095,8 @@
         lastTabInRow.getBoundingClientRect().width -
         (lastMovingTabScreenX + tabWidth);
       let lastBoundY = lastTab.screenY - lastMovingTabScreenY;
+      lastBoundX += 4;
+      firstBoundY += 6;
       translateX = Math.min(Math.max(translateX, firstBoundX), lastBoundX);
       translateY = Math.min(Math.max(translateY, firstBoundY), lastBoundY);
 

src/zen/split-view/zen-decks.css

@@ -219,7 +219,7 @@
   background: black;
   justify-content: center;
   align-items: center;
-  padding: 10px;
+  padding: 20px;
   gap: 20px;
   position: relative;
 

src/zen/tabs/zen-essentials-promo.css

@@ -14,10 +14,11 @@ zen-essentials-promo {
   flex-direction: column;
   margin: 2px;
   text-align: center;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
 
   &:not([dragover="true"]) {
     background: color-mix(in srgb, var(--zen-primary-color) 60%, transparent);
-    outline: 1px dashed var(--zen-primary-color);
+    outline: 1px dashed currentColor;
   }
 
   :root:not([zen-sidebar-expanded="true"]) & {
@@ -28,6 +29,7 @@ zen-essentials-promo {
     -moz-context-properties: fill;
     fill: currentColor;
     width: 18px;
+    margin-bottom: 4px;
   }
 
   & > * {
@@ -42,5 +44,6 @@ zen-essentials-promo {
   & .zen-essentials-promo-sublabel {
     opacity: 0.8;
     font-size: smaller;
+    margin: 0;
   }
 }