fe: move the window from the band above an open modal, its backdrop blocked the only place to grab

app/src/Assets/javascript/window-chrome.js

@@ -22,6 +22,44 @@
 	const CONTROLS =
 		"a, button, input, select, textarea, label, summary, [role=button], [tabindex], [contenteditable], dialog";
 
+	// A press on a modal's backdrop lands on the dialog itself, whose content is all inside its box.
+	const onBackdrop = (event) => {
+		const target = /** @type {Element} */ (event.target);
+		if (!target.matches("dialog")) {
+			return false;
+		}
+		const box = target.getBoundingClientRect();
+		return (
+			event.clientX < box.left ||
+			event.clientX > box.right ||
+			event.clientY < box.top ||
+			event.clientY > box.bottom
+		);
+	};
+
+	// The backdrop still closes the dialog on a click, and a window drag takes the release, so the
+	// drag waits for the pointer to really move. preventDefault() leaves the click alone.
+	const dragOnceMoved = (press) => {
+		press.preventDefault();
+		const stop = () => {
+			removeEventListener("mousemove", move);
+			removeEventListener("mouseup", stop);
+		};
+		const move = (event) => {
+			if (
+				Math.hypot(
+					event.clientX - press.clientX,
+					event.clientY - press.clientY,
+				) >= 3
+			) {
+				stop();
+				window.adminer.native?.dragWindow();
+			}
+		};
+		addEventListener("mousemove", move);
+		addEventListener("mouseup", stop);
+	};
+
 	// The toolbar's hairline shows only once the page scrolls under it, or while the window is not
 	// the active one, as Mail's does (window.css): two classes on <html> to draw it by.
 	if (window.adminer.native?.dragWindow) {
@@ -43,11 +81,17 @@
 	if (window.adminer.native?.dragWindow) {
 		document.addEventListener("mousedown", (event) => {
 			const target = /** @type {Element} */ (event.target);
+			// Full screen has no title bar to stand in for.
+			if (event.button !== 0 || root.classList.contains("ad-fullscreen")) {
+				return;
+			}
+			if (document.querySelector("dialog[open]")) {
+				if (event.clientY < band() && onBackdrop(event)) {
+					dragOnceMoved(event);
+				}
+				return;
+			}
 			if (
-				event.button !== 0 ||
-				// Full screen has no title bar to stand in for, and a dialog's backdrop closes it.
-				root.classList.contains("ad-fullscreen") ||
-				document.querySelector("dialog[open]") ||
 				!(target === document.body || event.clientY < band()) ||
 				target.closest(CONTROLS)
 			) {

tests/e2e/bootstrap/DesktopContext.php

@@ -3444,6 +3444,21 @@ public function pressEmptyToolbar(): void
 		$this->page->mouse()->click((float) $box['x'], (float) $box['y']);
 	}
 
+	#[When('I drag the mouse along the backdrop in the toolbar\'s band')]
+	public function dragBackdropInBand(): void
+	{
+		$this->page->mouse()->move(100, 10);
+		$this->page->mouse()->down();
+		$this->page->mouse()->move(140, 10);
+		$this->page->mouse()->up();
+	}
+
+	#[When('I click the backdrop in the toolbar\'s band')]
+	public function clickBackdropInBand(): void
+	{
+		$this->page->mouse()->click(100, 10);
+	}
+
 	#[When('I open the toolbar\'s sort menu')]
 	public function openSortMenu(): void
 	{

tests/e2e/features/shell/window.feature

@@ -50,6 +50,16 @@ Feature: The window without a title bar
     When I press the mouse on one of the toolbar's buttons
     Then the window was asked to move 1 time
 
+  Scenario: With a modal open the band above it still moves the window, and a click there does not
+    When I open the "users" table
+    And I open the settings dialog
+    And I drag the mouse along the backdrop in the toolbar's band
+    Then the window was asked to move 1 time
+    And the settings dialog is open
+    When I click the backdrop in the toolbar's band
+    Then the window was asked to move 1 time
+    And the settings dialog is open
+
   Scenario: The sidebar stays hidden across pages, its toggle beside the lights
     When I open the "users" table
     And I hide the sidebar