Merge branch 'next' into feat/next-unflag-forms

.changeset/spicy-starfishes-shake.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Ensure overlay x-ray z-index is higher than the island

.changeset/tricky-dragons-explain.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a number of small user experience bugs with the dev overlay

.changeset/weak-wolves-bow.md

@@ -0,0 +1,5 @@
+---
+'astro': major
+---
+
+Removes deprecated `app.match()` option, `matchNotFound`

packages/astro/src/core/app/index.ts

@@ -35,9 +35,6 @@ const responseSentSymbol = Symbol.for('astro.responseSent');
 
 const STATUS_CODES = new Set([404, 500]);
 
-export interface MatchOptions {
-	matchNotFound?: boolean | undefined;
-}
 export interface RenderErrorOptions {
 	routeData?: RouteData;
 	response?: Response;
@@ -133,7 +130,7 @@ export class App {
 		return pathname;
 	}
 
-	match(request: Request, _opts: MatchOptions = {}): RouteData | undefined {
+	match(request: Request): RouteData | undefined {
 		const url = new URL(request.url);
 		// ignore requests matching public assets
 		if (this.#manifest.assets.has(url.pathname)) return undefined;

packages/astro/src/core/app/node.ts

@@ -5,7 +5,7 @@ import * as fs from 'node:fs';
 import { IncomingMessage } from 'node:http';
 import { TLSSocket } from 'node:tls';
 import { deserializeManifest } from './common.js';
-import { App, type MatchOptions } from './index.js';
+import { App } from './index.js';
 export { apply as applyPolyfills } from '../polyfill.js';
 
 const clientAddressSymbol = Symbol.for('astro.clientAddress');
@@ -108,13 +108,13 @@ class NodeIncomingMessage extends IncomingMessage {
 }
 
 export class NodeApp extends App {
-	match(req: NodeIncomingMessage | Request, opts: MatchOptions = {}) {
+	match(req: NodeIncomingMessage | Request) {
 		if (!(req instanceof Request)) {
 			req = createRequestFromNodeRequest(req, {
 				emptyBody: true,
 			});
 		}
-		return super.match(req, opts);
+		return super.match(req);
 	}
 	render(req: NodeIncomingMessage | Request, routeData?: RouteData, locals?: object) {
 		if (!(req instanceof Request)) {

packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts

@@ -324,13 +324,13 @@ export default {
 					(window as DevOverlayMetadata).__astro_dev_overlay__.version
 				}</astro-dev-overlay-badge>
 				</section>
-				<astro-dev-overlay-button id="copy-debug-button">Get debug info <astro-dev-overlay-icon icon="copy" /></astro-dev-overlay-button>
+				<astro-dev-overlay-button id="copy-debug-button">Copy debug info <astro-dev-overlay-icon icon="copy" /></astro-dev-overlay-button>
 			</header>
 			<hr />
 
 			<div id="main-container">
 				<div>
-					<header><h2>Top integrations</h2><a href="https://astro.build/integrations/">View all</a></header>
+					<header><h2>Top integrations</h2><a href="https://astro.build/integrations/" target="_blank">View all</a></header>
 						<div id="integration-list-wrapper">
 							<section id="integration-list">
 								<div class="integration-skeleton" style="--i:0;"></div>
@@ -345,7 +345,7 @@ export default {
 				${links
 					.map(
 						(link) =>
-							`<a href="${link.link}"><astro-dev-overlay-icon ${
+							`<a href="${link.link}" target="_blank"><astro-dev-overlay-icon ${
 								isDefinedIcon(link.icon) ? `icon="${link.icon}">` : `>${link.icon}`
 							}</astro-dev-overlay-icon>${link.name}</a>`
 					)
@@ -362,7 +362,11 @@ export default {
 				navigator.clipboard.writeText(
 					'```\n' + (window as DevOverlayMetadata).__astro_dev_overlay__.debugInfo + '\n```'
 				);
-				copyDebugButton.textContent = 'Copied to clipboard';
+				copyDebugButton.textContent = 'Copied to clipboard!';
+
+				setTimeout(() => {
+					resetDebugButton();
+				}, 3500);
 			});
 
 			canvas.append(windowComponent);
@@ -372,7 +376,7 @@ export default {
 			const copyDebugButton = canvas.querySelector<HTMLButtonElement>('#copy-debug-button');
 			if (!copyDebugButton) return;
 
-			copyDebugButton.innerHTML = 'Get debug info <astro-dev-overlay-icon icon="copy" />';
+			copyDebugButton.innerHTML = 'Copy debug info <astro-dev-overlay-icon icon="copy" />';
 		}
 
 		function refreshIntegrationList() {

packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts

@@ -15,6 +15,19 @@ export function createHighlight(rect: DOMRect, icon?: Icon) {
 	return highlight;
 }
 
+export function getHighlightZIndex(el: Element) {
+	let highestZIndex = 0;
+	let current: Element | ParentNode | null = el;
+	while(current instanceof Element) {
+		let zIndex = Number(getComputedStyle(current).zIndex);
+		if(!Number.isNaN(zIndex) && zIndex > highestZIndex) {
+			highestZIndex = zIndex;
+		}
+		current = current.parentNode;
+	}
+	return highestZIndex + 1;
+}
+
 export function positionHighlight(highlight: DevOverlayHighlight, rect: DOMRect) {
 	highlight.style.display = 'block';
 	// Make an highlight that is 10px bigger than the element on all sides

packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts

@@ -1,6 +1,6 @@
 import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js';
 import type { DevOverlayHighlight } from '../ui-library/highlight.js';
-import { attachTooltipToHighlight, createHighlight, positionHighlight } from './utils/highlight.js';
+import { attachTooltipToHighlight, createHighlight, getHighlightZIndex, positionHighlight } from './utils/highlight.js';
 
 const icon =
 	'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z"/></svg>';
@@ -41,6 +41,10 @@ export default {
 				const tooltip = buildIslandTooltip(island);
 				attachTooltipToHighlight(highlight, tooltip, islandElement);
 
+				// Set the z-index to be 1 higher than the greatest z-index in the stack.
+				const zIndex = getHighlightZIndex(islandElement);
+				tooltip.style.zIndex = highlight.style.zIndex = zIndex+'';
+
 				canvas.append(highlight);
 				islandsOverlays.push({ highlightElement: highlight, island: islandElement });
 			});

packages/astro/test/middleware.test.js

@@ -251,7 +251,7 @@ describe('Middleware API in PROD mode, SSR', () => {
 
 	it('should correctly call the middleware function for 404', async () => {
 		const request = new Request('http://example.com/funky-url');
-		const routeData = app.match(request, { matchNotFound: true });
+		const routeData = app.match(request);
 		const response = await app.render(request, routeData);
 		const text = await response.text();
 		expect(text.includes('Error')).to.be.true;
@@ -260,7 +260,7 @@ describe('Middleware API in PROD mode, SSR', () => {
 
 	it('should render 500.astro when the middleware throws an error', async () => {
 		const request = new Request('http://example.com/throw');
-		const routeData = app.match(request, { matchNotFound: true });
+		const routeData = app.match(request);
 
 		const response = await app.render(request, routeData);
 		expect(response).to.deep.include({ status: 500 });

packages/astro/test/ssr-404-500-pages.test.js

@@ -56,7 +56,7 @@ describe('404 and 500 pages', () => {
 		it('404 page returned when a route does not match and passing routeData', async () => {
 			const app = await fixture.loadTestAdapterApp();
 			const request = new Request('http://example.com/some/fake/route');
-			const routeData = app.match(request, { matchNotFound: true });
+			const routeData = app.match(request);
 			const response = await app.render(request, routeData);
 			expect(response.status).to.equal(404);
 			const html = await response.text();