@ryuu-64/dsh-find-all 0.1.8 → 0.1.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.1.10
+
+- Keep the find bar below the conversation header and allow moving it within the conversation body with a drag handle or directional buttons.
+- Preserve its manual position while the same conversation stays open, with a control to restore the default position; reset it when the bar reopens or the conversation changes.
+- Constrain the bar to the available conversation area as the window, sidebar or input area changes, and reduce unused space in its default layout.
+- Keep the current search match clear of the find bar, including matches in nested scrolling areas and when navigation feedback expands the bar.
+
+The supported host-version list and return-to-reading-position behavior are unchanged.
+
+## 0.1.9
+
+- Reveal host-owned `hidden="until-found"` content before scrolling to a search match, instead of treating its layout geometry as proof that the match is visible.
+- Wait for concealed matches to become visible before marking navigation as successful.
+
+The supported host-version list is unchanged.
+
 ## 0.1.8
 
 - Keep Ctrl+F and the header search button bound to the current main conversation across sidebar focus changes and main-view navigation.

package/lib/client.js

@@ -76,6 +76,7 @@ window.__ModuleLoader__.load({
 			prev: "上一个匹配",
 			next: "下一个匹配",
 			close: "关闭查找",
+			move: "拖动查找栏；点击展开移动按钮", moveLeft: "向左移动", moveRight: "向右移动", moveUp: "向上移动", moveDown: "向下移动", resetPosition: "恢复默认位置",
 			cap: "仅显示前 {n} 处匹配",
 			resultCount: "{n} 个结果",
 			scopeWhole: "包含更早内容",
@@ -106,6 +107,7 @@ window.__ModuleLoader__.load({
 			prev: "Previous match",
 			next: "Next match",
 			close: "Close find",
+			move: "Drag find bar; click for move controls", moveLeft: "Move left", moveRight: "Move right", moveUp: "Move up", moveDown: "Move down", resetPosition: "Reset position",
 			cap: "Showing only the first {n} matches",
 			resultCount: "{n} results",
 			scopeWhole: "Include earlier content",
@@ -234,14 +236,19 @@ window.__ModuleLoader__.load({
 
 		function cssText() {
 			return "" +
-				"#" + BAR_ID + "{--dsh-find-all-anchor-gap:4px;--dsh-find-all-panel-inset:16px;--dsh-find-all-max-width:760px;position:fixed;top:calc(var(--dsh-find-all-header-bottom) + var(--dsh-find-all-anchor-gap));right:calc(var(--dsh-find-all-panel-right-space) + var(--dsh-find-all-panel-inset));z-index:2147483000;visibility:hidden;isolation:isolate;box-sizing:border-box;align-items:stretch;gap:4px;padding:6px 8px;display:flex;flex-direction:column;width:min(var(--dsh-find-all-max-width),calc(var(--dsh-find-all-panel-width) - var(--dsh-find-all-panel-inset) - var(--dsh-find-all-panel-inset)));max-width:calc(100vw - var(--dsh-find-all-panel-inset) - var(--dsh-find-all-panel-inset));background:transparent;--dsw-elevation-stroke-color:var(--dsw-alias-border-l1);border:0;border-radius:var(--dsw-radius-md,8px);box-shadow:var(--dsw-elevation-panel,var(--dsw-shadow-lv2))}" +
+				"#" + BAR_ID + "{--dsh-find-all-max-width:600px;position:fixed;top:var(--dsh-find-all-bar-top);right:var(--dsh-find-all-bar-right);z-index:2147483000;visibility:hidden;isolation:isolate;box-sizing:border-box;align-items:stretch;gap:4px;padding:6px 8px;display:flex;flex-direction:column;width:min(var(--dsh-find-all-max-width),var(--dsh-find-all-panel-width));max-width:calc(100vw - 16px);max-height:var(--dsh-find-all-max-height);overflow:auto;background:transparent;--dsw-elevation-stroke-color:var(--dsw-alias-border-l1);border:0;border-radius:var(--dsw-radius-md,8px);box-shadow:var(--dsw-elevation-panel,var(--dsw-shadow-lv2))}" +
 				"#" + BAR_ID + "[data-positioned]{visibility:visible}" +
 				"#" + BAR_ID + ":before{content:\"\";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:var(--dsw-specific-menu,var(--dsw-alias-bg-layer-2));-webkit-backdrop-filter:var(--dsw-menu-backdrop-filter,blur(40px) saturate(150%));backdrop-filter:var(--dsw-menu-backdrop-filter,blur(40px) saturate(150%))}" +
 				"#" + BAR_ID + " .controls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}" +
-				"#" + BAR_ID + " input{flex:1 1 210px;min-width:120px;width:auto;height:28px;color:var(--dsw-alias-label-primary);font:13px/1 var(--dsw-font-family);background:var(--dsw-alias-bg-base);border:.5px solid var(--dsw-alias-border-l4);border-radius:var(--dsw-radius-sm,6px);outline:none;padding:0 8px}" +
+				"#" + BAR_ID + " input{box-sizing:border-box;flex:1 1 160px;min-width:0;max-width:100%;width:auto;height:28px;color:var(--dsw-alias-label-primary);font:13px/1 var(--dsw-font-family);background:var(--dsw-alias-bg-base);border:.5px solid var(--dsw-alias-border-l4);border-radius:var(--dsw-radius-sm,6px);outline:none;padding:0 8px}" +
 				"#" + BAR_ID + " input:focus-visible{border-color:var(--dsw-alias-state-business-primary)}" +
 				"#" + BAR_ID + " .count{min-width:52px;color:var(--dsw-alias-label-tertiary);font:12px/1 var(--dsw-font-family);font-variant-numeric:tabular-nums;text-align:center}" +
-				"#" + BAR_ID + " .status{width:100%;min-height:15px;color:var(--dsw-alias-label-tertiary);font:12px/1.25 var(--dsw-font-family);text-align:left;white-space:normal;overflow-wrap:anywhere}" +
+				"#" + BAR_ID + " .status{width:100%;color:var(--dsw-alias-label-tertiary);font:12px/1.25 var(--dsw-font-family);text-align:left;white-space:normal;overflow-wrap:anywhere}" +
+				"#" + BAR_ID + " .status:empty{display:none}" +
+				"#" + BAR_ID + " .position-controls{display:flex;flex-wrap:wrap;align-items:center;gap:4px}" +
+				"#" + BAR_ID + " .position-controls[hidden]{display:none}" +
+				"#" + BAR_ID + " button.drag-handle{touch-action:none;user-select:none;cursor:grab;flex:none}" +
+				"#" + BAR_ID + "[data-dragging] button.drag-handle{cursor:grabbing}" +
 				"#" + BAR_ID + " .status[data-busy]{cursor:pointer;color:var(--dsw-alias-state-business-primary)}" +
 				"#" + BAR_ID + " .scope{width:auto;padding:0 9px;color:var(--dsw-alias-label-secondary);font:12px/1 var(--dsw-font-family);background:0 0;border:1px solid var(--dsw-alias-border-l2);border-radius:999px}" +
 				"#" + BAR_ID + " .scope[data-whole]{color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-state-business-primary)}" +
@@ -423,13 +430,78 @@ window.__ModuleLoader__.load({
 			return highlight;
 		}
 
+		function matchBarRect() {
+			return isOpen() && state.bar.hasAttribute("data-positioned") ? state.bar.getBoundingClientRect() : null;
+		}
+
+		// Match visibility is deliberately independent of reading-origin capture
+		// and return. Range geometry alone does not account for floating UI.
+		function visibleMatchRect(range, viewport) {
+			if (!viewport || !rangeRect(range, viewport)) return null;
+			var clip = clippedViewport(range.startContainer.parentElement, viewport), bar = matchBarRect();
+			var rects = range.getClientRects();
+			for (var i = 0; i < rects.length; i++) {
+				var rect = rects[i], left = Math.max(rect.left, clip.left), right = Math.min(rect.right, clip.right);
+				var top = Math.max(rect.top, clip.top), bottom = Math.min(rect.bottom, clip.bottom);
+				if (right <= left || bottom <= top) continue;
+				if (!bar || right <= bar.left || left >= bar.right || bottom <= bar.top || top >= bar.bottom) return rect;
+			}
+			return null;
+		}
+
+		function scrollRangeWithin(range, scroll, viewport, bar) {
+			var rect = rangeRect(range);
+			if (!rect) return;
+			var current = scroll.scrollTop, maximum = Math.max(0, scroll.scrollHeight - scroll.clientHeight);
+			var bands = [[viewport.top, viewport.bottom]];
+			if (bar && rect.right > bar.left && rect.left < bar.right && bar.bottom > viewport.top && bar.top < viewport.bottom) {
+				bands = [[viewport.top, Math.min(viewport.bottom, bar.top - 8)],
+					[Math.max(viewport.top, bar.bottom + 8), viewport.bottom]];
+			}
+			var best = null;
+			bands.forEach(function (band) {
+				if (band[1] <= band[0]) return;
+				var delta = rect.top < band[0] ? rect.top - band[0] :
+					rect.bottom > band[1] ? Math.min(rect.top - band[0], rect.bottom - band[1]) : 0;
+				delta = Math.max(0, Math.min(maximum, current + delta)) - current;
+				var shown = Math.max(0, Math.min(rect.bottom - delta, band[1]) - Math.max(rect.top - delta, band[0]));
+				// At either history boundary, prefer the region actually reachable
+				// after clamping rather than assuming the larger region is reachable.
+				if (!best || shown > best.shown || (shown === best.shown && Math.abs(delta) < Math.abs(best.delta))) best = { delta: delta, shown: shown };
+			});
+			var x = rect.left < viewport.left ? rect.left - viewport.left :
+				rect.right > viewport.right ? Math.min(rect.left - viewport.left, rect.right - viewport.right) : 0;
+			if ((best && best.delta) || x) {
+				try { scroll.scrollBy({ top: best ? best.delta : 0, left: x, behavior: "instant" }); } catch (error) {}
+			}
+		}
+
 		function scrollToRange(range) {
 			var viewport = readingViewport(state.target);
-			if (viewport && rangeRect(range, viewport)) return;
-			var el = range.startContainer.parentElement;
-			if (el && el.scrollIntoView) {
-				try { el.scrollIntoView({ block: "center", behavior: "instant" }); } catch (error) {}
+			if (!viewport || visibleMatchRect(range, viewport)) return;
+			// Reveal the exact Range, not its potentially very tall <pre>/<p>.
+			// Work from inner scroll clips outwards, without scrolling the window
+			// or unrelated panels. Re-read geometry after every scroll.
+			for (var node = range.startContainer.parentElement; node && node !== viewport.scroll; node = node.parentElement) {
+				var style = window.getComputedStyle(node);
+				var clipsY = /^(auto|scroll|hidden)$/.test(style.overflowY) && node.scrollHeight > node.clientHeight;
+				var clipsX = /^(auto|scroll|hidden)$/.test(style.overflowX) && node.scrollWidth > node.clientWidth;
+				if (!clipsX && !clipsY) continue;
+				var box = node.getBoundingClientRect(), top = box.top + node.clientTop, left = box.left + node.clientLeft;
+				var rect = rangeRect(range);
+				if (!rect) return;
+				var clip = clippedViewport(node, viewport);
+				var safeTop = Math.max(top, clip.top), safeBottom = Math.min(top + node.clientHeight, clip.bottom);
+				var shown = safeBottom > safeTop;
+				// A code scroller may still have room when the conversation is at
+				// its boundary. Let it avoid the overlay within its visible clip.
+				scrollRangeWithin(range, node, { top: clipsY ? (shown ? safeTop : top) : rect.top,
+					bottom: clipsY ? (shown ? safeBottom : top + node.clientHeight) : rect.bottom,
+					left: clipsX ? left : rect.left, right: clipsX ? left + node.clientWidth : rect.right },
+					clipsY && shown ? matchBarRect() : null);
 			}
+			viewport = readingViewport(state.target);
+			if (viewport && !visibleMatchRect(range, viewport)) scrollRangeWithin(range, viewport.scroll, viewport, matchBarRect());
 		}
 
 		//#region host adapter
@@ -727,6 +799,16 @@ window.__ModuleLoader__.load({
 			return null;
 		}
 
+		function hiddenUntilFoundAncestor(node, root) {
+			var element = node && (node.nodeType === 1 ? node : node.parentElement);
+			for (; element && root && root.contains(element); element = element.parentElement) {
+				var hidden = element.getAttribute && element.getAttribute('hidden');
+				if (typeof hidden === 'string' && hidden.toLowerCase() === 'until-found') return element;
+				if (element === root) break;
+			}
+			return null;
+		}
+
 		function captureReadingOrigin() {
 			var target = state.target, viewport = readingViewport(target);
 			var store = state.adapter && state.adapter.nodes(target);
@@ -844,19 +926,22 @@ window.__ModuleLoader__.load({
 				if (state.target !== target || !state.adapter.valid(target) || state.adapter.face(target) !== face) return;
 			}
 			var origin = state.origin, token = state.navigationToken, started = Date.now();
-			var activated = new Set(), scrolledRange = null;
+			var activated = new Set(), announceReturn = false;
 			function check() {
 				state.navigationTimer = 0;
 				if (token !== state.navigationToken || !originValid(origin)) return;
+				positionBar();
 				var viewport = readingViewport(origin.target);
 				var current = state.ranges[state.index];
-				var geometry = current && origin.target.root.contains(current.startContainer) && rangeRect(current);
-				if (current && !geometry) revealMatchRange(origin.target, current, activated);
-				if (geometry && scrolledRange !== current) {
-					scrollToRange(current);
-					scrolledRange = current;
-				}
-				if (viewport && current && origin.target.root.contains(current.startContainer) && rangeRect(current, viewport)) {
+				var attached = current && origin.target.root.contains(current.startContainer);
+				// hidden=until-found uses content-visibility:hidden, so Chromium may
+				// report layout geometry for descendants that are not painted. Reveal
+				// the host-owned disclosure before trusting Range geometry.
+				var concealed = attached && hiddenUntilFoundAncestor(current.startContainer, origin.target.root);
+				var geometry = attached && !concealed && rangeRect(current);
+				if (current && (!geometry || concealed)) revealMatchRange(origin.target, current, activated);
+				if (geometry && !visibleMatchRect(current, viewport)) scrollToRange(current);
+				if (viewport && attached && !concealed && visibleMatchRect(current, viewport)) {
 					var firstNavigation = !origin.navigated;
 					origin.navigated = true;
 					updateReturnButton();
@@ -866,8 +951,13 @@ window.__ModuleLoader__.load({
 							var priorStatus = state.jumpStatus;
 							setStatus(priorStatus, false);
 						} else setStatus(L.returnAvailable, false);
-						if (state.announcement) state.announcement.textContent = L.returnAvailable;
+						announceReturn = true;
+						// Return/status controls can wrap and grow the overlay. Verify
+						// the resulting layout before declaring the match visible.
+						state.navigationTimer = setTimeout(check, 0);
+						return;
 					}
+					if (announceReturn && state.announcement) state.announcement.textContent = L.returnAvailable;
 					return;
 				}
 				if (Date.now() - started < 1500) {
@@ -1098,7 +1188,8 @@ window.__ModuleLoader__.load({
 			origin: null, restoring: null, returnBtn: null, announcement: null, navigationTimer: 0, navigationToken: 0,
 			jumpStatus: null,
 			positionObserver: null,
-			positionFrame: 0
+			positionFrame: null,
+			positionOwner: null, manualPosition: null, drag: null, dragHandle: null, positionControls: null, suppressMoveClick: false
 		};
 
 		function barAnchor(target) {
@@ -1114,39 +1205,115 @@ window.__ModuleLoader__.load({
 
 		function positionBar() {
 			if (!isOpen() || !state.bar) return false;
-			if (!state.target) { state.bar.removeAttribute("data-positioned"); return false; }
-			var header = barAnchor(state.target);
-			if (!header || !header.isConnected || !state.target.panel.isConnected) {
+			var target = state.target, header = barAnchor(target), viewport = readingViewport(target);
+			if (!target || !header || !header.isConnected || !target.panel.isConnected || !viewport) {
+				state.bar.removeAttribute("data-positioned");
+				return false;
+			}
+			var panel = target.panel.getBoundingClientRect(), headerRect = header.getBoundingClientRect();
+			var leftEdge = Math.max(panel.left, viewport.left) + 8;
+			var rightEdge = Math.min(panel.right, viewport.right) - 8;
+			var topEdge = Math.max(panel.top, viewport.top, headerRect.bottom) + 8;
+			var bottomEdge = Math.min(panel.bottom, viewport.bottom) - 8;
+			if (rightEdge <= leftEdge || bottomEdge <= topEdge) {
 				state.bar.removeAttribute("data-positioned");
 				return false;
 			}
-			var headerRect = header.getBoundingClientRect();
-			var panelRect = state.target.panel.getBoundingClientRect();
-			var viewportWidth = document.documentElement.clientWidth || window.innerWidth;
-			var panelLeft = Math.max(0, panelRect.left);
-			var panelRight = Math.min(viewportWidth, panelRect.right);
 			var dpr = window.devicePixelRatio || 1;
 			function cssPixel(value) { return Math.round(value * dpr) / dpr + "px"; }
-			state.bar.style.setProperty("--dsh-find-all-header-bottom", cssPixel(headerRect.bottom));
-			state.bar.style.setProperty("--dsh-find-all-panel-right-space", cssPixel(Math.max(0, viewportWidth - panelRight)));
-			state.bar.style.setProperty("--dsh-find-all-panel-width", cssPixel(Math.max(0, panelRight - panelLeft)));
+			// This is the only position writer, including pointer, resize, scroll
+			// and polling updates. Manual placement never falls back to the anchor.
+			state.bar.style.setProperty("--dsh-find-all-panel-width", cssPixel(rightEdge - leftEdge));
+			state.bar.style.setProperty("--dsh-find-all-max-height", cssPixel(bottomEdge - topEdge));
+			var box = state.bar.getBoundingClientRect(), manual = state.manualPosition;
+			var left = manual ? manual.left : rightEdge - box.width;
+			var top = manual ? manual.top : topEdge;
+			left = Math.max(leftEdge, Math.min(left, rightEdge - box.width));
+			top = Math.max(topEdge, Math.min(top, bottomEdge - box.height));
+			if (manual) { manual.left = left; manual.top = top; }
+			state.bar.style.setProperty("--dsh-find-all-bar-top", cssPixel(top));
+			state.bar.style.setProperty("--dsh-find-all-bar-right", cssPixel(window.innerWidth - left - box.width));
 			state.bar.setAttribute("data-positioned", "");
 			return true;
 		}
 
+		function finishBarDrag(event) {
+			var drag = state.drag;
+			if (!drag || (event && event.pointerId !== drag.id)) return;
+			state.drag = null;
+			state.bar.removeAttribute("data-dragging");
+			try { if (drag.handle.hasPointerCapture(drag.id)) drag.handle.releasePointerCapture(drag.id); } catch (error) {}
+		}
+
+		function resetBarPosition() {
+			finishBarDrag();
+			state.manualPosition = null;
+			scheduleBarPosition();
+		}
+
+		function moveBarBy(x, y) {
+			if (!positionBar()) return;
+			var box = state.bar.getBoundingClientRect();
+			state.manualPosition = { left: box.left + x, top: box.top + y };
+			scheduleBarPosition();
+		}
+
+		function buildPositionControls(controls, bar) {
+			var moves = document.createElement("div");
+			moves.className = "position-controls"; moves.id = BAR_ID + "-position"; moves.hidden = true;
+			var handle = button(L.move, "M9 5h.01M15 5h.01M9 12h.01M15 12h.01M9 19h.01M15 19h.01", function (event) {
+				if (event.detail && state.suppressMoveClick) { state.suppressMoveClick = false; return; }
+				moves.hidden = !moves.hidden;
+				handle.setAttribute("aria-expanded", String(!moves.hidden));
+				scheduleBarPosition();
+			});
+			handle.className = "drag-handle";
+			handle.setAttribute("aria-expanded", "false"); handle.setAttribute("aria-controls", moves.id);
+			handle.addEventListener("pointerdown", function (event) {
+				if (!event.isPrimary || event.button !== 0 || state.drag || !positionBar()) return;
+				state.suppressMoveClick = false;
+				try { handle.setPointerCapture(event.pointerId); } catch (error) { return; }
+				var box = state.bar.getBoundingClientRect();
+				state.drag = { id: event.pointerId, handle: handle, x: event.clientX, y: event.clientY, left: box.left, top: box.top };
+				// Dragging the handle must not steal focus/selection from the query.
+				event.preventDefault();
+			});
+			handle.addEventListener("pointermove", function (event) {
+				var drag = state.drag;
+				if (!drag || event.pointerId !== drag.id) return;
+				var x = event.clientX - drag.x, y = event.clientY - drag.y;
+				if (!state.suppressMoveClick && Math.abs(x) + Math.abs(y) < 4) return;
+				state.suppressMoveClick = true;
+				state.bar.setAttribute("data-dragging", "");
+				state.manualPosition = { left: drag.left + x, top: drag.top + y };
+				scheduleBarPosition();
+			});
+			["pointerup", "pointercancel", "lostpointercapture"].forEach(function (type) { handle.addEventListener(type, finishBarDrag); });
+			moves.appendChild(button(L.moveLeft, "m14 6-6 6 6 6", function () { moveBarBy(-32, 0); }));
+			moves.appendChild(button(L.moveRight, "m10 6 6 6-6 6", function () { moveBarBy(32, 0); }));
+			moves.appendChild(button(L.moveUp, "m6 14 6-6 6 6", function () { moveBarBy(0, -32); }));
+			moves.appendChild(button(L.moveDown, "m6 10 6 6 6-6", function () { moveBarBy(0, 32); }));
+			var reset = button(L.resetPosition, "M3 10a9 9 0 1 1 2 8M3 4v6h6", resetBarPosition);
+			moves.appendChild(reset);
+			state.dragHandle = handle; state.positionControls = moves;
+			controls.appendChild(handle);
+			bar.appendChild(moves);
+		}
+
 		function scheduleBarPosition() {
-			if (!isOpen() || state.positionFrame) return;
+			if (!isOpen() || state.positionFrame !== null) return;
 			if (typeof requestAnimationFrame !== "function") { positionBar(); return; }
 			state.positionFrame = requestAnimationFrame(function () {
-				state.positionFrame = 0;
+				state.positionFrame = null;
 				positionBar();
 			});
 		}
 
 		function stopBarPositioning() {
+			finishBarDrag();
 			if (state.positionObserver) { state.positionObserver.disconnect(); state.positionObserver = null; }
-			if (state.positionFrame && typeof cancelAnimationFrame === "function") cancelAnimationFrame(state.positionFrame);
-			state.positionFrame = 0;
+			if (state.positionFrame !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(state.positionFrame);
+			state.positionFrame = null;
 		}
 
 		function startBarPositioning() {
@@ -1156,6 +1323,13 @@ window.__ModuleLoader__.load({
 			if (!header || typeof ResizeObserver === "undefined") return;
 			state.positionObserver = new ResizeObserver(scheduleBarPosition);
 			state.positionObserver.observe(header);
+			var viewport = readingViewport(state.target);
+			if (viewport) {
+				state.positionObserver.observe(viewport.scroll);
+				var composer = viewport.scroll.querySelector("[data-composer-seat]");
+				if (composer) state.positionObserver.observe(composer);
+			}
+			state.positionObserver.observe(state.bar);
 			if (state.target.panel !== header) state.positionObserver.observe(state.target.panel);
 		}
 
@@ -1438,6 +1612,15 @@ window.__ModuleLoader__.load({
 		function syncTarget(target, passive) {
 			if (!state.adapter) return;
 			var selected = passive ? state.adapter.refresh(state.target) : state.adapter.select(target || document.activeElement, state.target);
+			if (selected) {
+				var owner = state.positionOwner;
+				if (owner && (owner.id !== selected.id || owner.panel !== selected.panel)) {
+					resetBarPosition();
+					if (state.positionControls) state.positionControls.hidden = true;
+					if (state.dragHandle) state.dragHandle.setAttribute("aria-expanded", "false");
+				}
+				state.positionOwner = { id: selected.id, panel: selected.panel };
+			}
 			if (selected && state.target && selected.id === state.target.id && selected.anchor === state.target.anchor && selected.root === state.target.root && selected.panel === state.target.panel && selected.registration === state.target.registration) {
 				if (state.origin && !originValid(state.origin)) { discardOrigin(); setStatus(returnFailure('unavailable'), false); }
 				scheduleBarPosition();
@@ -1554,6 +1737,7 @@ window.__ModuleLoader__.load({
 				setStatus(L.incomplete, false);
 			});
 
+			buildPositionControls(controls, bar);
 			controls.appendChild(input);
 			controls.appendChild(scopeBtn);
 			controls.appendChild(count);
@@ -1566,7 +1750,7 @@ window.__ModuleLoader__.load({
 			state.returnBtn = returnBtn;
 			controls.appendChild(returnBtn);
 			controls.appendChild(button(L.close, "M18 6 6 18M6 6l12 12", close));
-			bar.appendChild(controls);
+			bar.insertBefore(controls, bar.firstChild);
 			bar.appendChild(status);
 
 			state.bar = bar;
@@ -1616,6 +1800,10 @@ window.__ModuleLoader__.load({
 			cancelPageIn();
 			stopWatchingSession();
 			stopBarPositioning();
+			state.manualPosition = state.positionOwner = null;
+			state.suppressMoveClick = false;
+			if (state.positionControls) state.positionControls.hidden = true;
+			if (state.dragHandle) state.dragHandle.setAttribute("aria-expanded", "false");
 			if (state.bar) { state.bar.style.display = "none"; state.bar.removeAttribute("data-positioned"); }
 			state.ranges = [];
 			state.index = -1;
@@ -1692,6 +1880,8 @@ window.__ModuleLoader__.load({
 				window.addEventListener("focusin", focus, true);
 				window.addEventListener("pointerdown", focus, true);
 				window.addEventListener("wheel", readingFocus, true);
+				function blur() { finishBarDrag(); }
+				window.addEventListener("blur", blur);
 				window.addEventListener("resize", scheduleBarPosition);
 				window.addEventListener("scroll", scheduleBarPosition, true);
 				return function () {
@@ -1700,13 +1890,14 @@ window.__ModuleLoader__.load({
 					window.removeEventListener("focusin", focus, true);
 					window.removeEventListener("pointerdown", focus, true);
 					window.removeEventListener("wheel", readingFocus, true);
+					window.removeEventListener("blur", blur);
 					window.removeEventListener("resize", scheduleBarPosition);
 					window.removeEventListener("scroll", scheduleBarPosition, true);
 					close();
 					state.query = "";
 					if (state.bar) state.bar.remove();
 					if (state.announcement) state.announcement.remove();
-					state.announcement = state.returnBtn = null;
+					state.announcement = state.returnBtn = state.dragHandle = state.positionControls = null;
 					var style = document.querySelector('style[data-plugin-css="dsh-find-all/bar.css"]');
 					if (style) style.remove();
 					state.bar = state.input = state.count = state.status = state.scopeBtn = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryuu-64/dsh-find-all",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Ctrl+F find bar for the DSH desktop app: it searches the whole conversation, not just the messages already on screen.",
   "type": "module",
   "license": "MIT",