diff --git a/.changeset/spicy-starfishes-shake.md b/.changeset/spicy-starfishes-shake.md new file mode 100644 index 000000000000..a283f4d37911 --- /dev/null +++ b/.changeset/spicy-starfishes-shake.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Ensure overlay x-ray z-index is higher than the island diff --git a/.changeset/tricky-dragons-explain.md b/.changeset/tricky-dragons-explain.md new file mode 100644 index 000000000000..78ecb1e95752 --- /dev/null +++ b/.changeset/tricky-dragons-explain.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes a number of small user experience bugs with the dev overlay diff --git a/.changeset/weak-wolves-bow.md b/.changeset/weak-wolves-bow.md new file mode 100644 index 000000000000..484544cd12b7 --- /dev/null +++ b/.changeset/weak-wolves-bow.md @@ -0,0 +1,5 @@ +--- +'astro': major +--- + +Removes deprecated `app.match()` option, `matchNotFound` diff --git a/packages/astro/src/core/app/index.ts b/packages/astro/src/core/app/index.ts index 3e72c3810e21..aa89c8286804 100644 --- a/packages/astro/src/core/app/index.ts +++ b/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; diff --git a/packages/astro/src/core/app/node.ts b/packages/astro/src/core/app/node.ts index 1df931eca22e..a127b9831c1a 100644 --- a/packages/astro/src/core/app/node.ts +++ b/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)) { diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts index 951101bae8b2..53fbc6502e45 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -324,13 +324,13 @@ export default { (window as DevOverlayMetadata).__astro_dev_overlay__.version } - Get debug info + Copy debug info
-

Top integrations

View all
+

Top integrations

View all
@@ -345,7 +345,7 @@ export default { ${links .map( (link) => - `` : `>${link.icon}` }${link.name}` ) @@ -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('#copy-debug-button'); if (!copyDebugButton) return; - copyDebugButton.innerHTML = 'Get debug info '; + copyDebugButton.innerHTML = 'Copy debug info '; } function refreshIntegrationList() { diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts index 3af467ecdc15..31c70b724e44 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts +++ b/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 diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts index ab927bacc235..aff02fc9c11a 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts +++ b/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 = ''; @@ -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 }); }); diff --git a/packages/astro/test/middleware.test.js b/packages/astro/test/middleware.test.js index 5b033ca4dc02..a6745f176543 100644 --- a/packages/astro/test/middleware.test.js +++ b/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 }); diff --git a/packages/astro/test/ssr-404-500-pages.test.js b/packages/astro/test/ssr-404-500-pages.test.js index 253f9bc1ca99..1c735e88995d 100644 --- a/packages/astro/test/ssr-404-500-pages.test.js +++ b/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();