From 18601f04a298eaf7db666df98e2ccd53f7c74adf Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Wed, 14 Jan 2026 14:14:46 +0100 Subject: [PATCH] feat: Small quality fixes for drag and drop, b=no-bug, c=common, compact-mode, split-view, tabs --- .../prompts/content/commonDialog-css.patch | 16 ++++++++-------- src/zen/common/modules/ZenUIManager.mjs | 2 +- src/zen/compact-mode/sidebar.inc.css | 5 +++++ src/zen/drag-and-drop/ZenDragAndDrop.js | 17 ++++++++++++----- src/zen/split-view/zen-decks.css | 2 +- src/zen/tabs/zen-essentials-promo.css | 5 ++++- 6 files changed, 31 insertions(+), 16 deletions(-) diff --git a/src/toolkit/components/prompts/content/commonDialog-css.patch b/src/toolkit/components/prompts/content/commonDialog-css.patch index d5e3bc8bf..c9aaeec87 100644 --- a/src/toolkit/components/prompts/content/commonDialog-css.patch +++ b/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. */ diff --git a/src/zen/common/modules/ZenUIManager.mjs b/src/zen/common/modules/ZenUIManager.mjs index b7e05a197..0f3f1a96b 100644 --- a/src/zen/common/modules/ZenUIManager.mjs +++ b/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 = diff --git a/src/zen/compact-mode/sidebar.inc.css b/src/zen/compact-mode/sidebar.inc.css index 30110fd0d..58adaaee7 100644 --- a/src/zen/compact-mode/sidebar.inc.css +++ b/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; diff --git a/src/zen/drag-and-drop/ZenDragAndDrop.js b/src/zen/drag-and-drop/ZenDragAndDrop.js index 0d15828cc..22518d759 100644 --- a/src/zen/drag-and-drop/ZenDragAndDrop.js +++ b/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); diff --git a/src/zen/split-view/zen-decks.css b/src/zen/split-view/zen-decks.css index 57813c0ce..2821c9feb 100644 --- a/src/zen/split-view/zen-decks.css +++ b/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; diff --git a/src/zen/tabs/zen-essentials-promo.css b/src/zen/tabs/zen-essentials-promo.css index cc64e30f0..a5bd9449b 100644 --- a/src/zen/tabs/zen-essentials-promo.css +++ b/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; } }