diff options
10 files changed, 145 insertions, 5 deletions
diff --git a/.changeset/new-candles-beam.md b/.changeset/new-candles-beam.md new file mode 100644 index 000000000..e93d925d6 --- /dev/null +++ b/.changeset/new-candles-beam.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixed window component appearing over the dev overlay on small windows. Added a maximum length to sections of the tooltip component diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js new file mode 100644 index 000000000..f4efab141 --- /dev/null +++ b/packages/astro/e2e/dev-overlay.test.js @@ -0,0 +1,90 @@ +import { expect } from '@playwright/test'; +import { testFactory } from './test-utils.js'; + +const test = testFactory({ + root: './fixtures/dev-overlay/', +}); + +let devServer; + +test.beforeAll(async ({ astro }) => { + devServer = await astro.startDevServer(); +}); + +test.afterAll(async () => { + await devServer.stop(); +}); + +test.describe('Dev Overlay zzz', () => { + test('dev overlay exists in the page', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const devOVerlay = page.locator('astro-dev-overlay'); + await expect(devOVerlay).toHaveCount(1); + }); + + test('can open Astro plugin', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const overlay = page.locator('astro-dev-overlay'); + const pluginButton = overlay.locator('button[data-plugin-id="astro"]'); + await pluginButton.click(); + + const astroPluginCanvas = overlay.locator( + 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro"]' + ); + const astroWindow = astroPluginCanvas.locator('astro-dev-overlay-window'); + await expect(astroWindow).toHaveCount(1); + await expect(astroWindow).toBeVisible(); + + // Toggle plugin off + await pluginButton.click(); + await expect(astroWindow).not.toBeVisible(); + }); + + test('xray shows highlights and tooltips', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const overlay = page.locator('astro-dev-overlay'); + const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]'); + await pluginButton.click(); + + const xrayCanvas = overlay.locator( + 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:xray"]' + ); + const xrayHighlight = xrayCanvas.locator('astro-dev-overlay-highlight'); + await expect(xrayHighlight).toBeVisible(); + + await xrayHighlight.hover(); + const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-overlay-tooltip'); + await expect(xrayHighlightTooltip).toBeVisible(); + + // Toggle plugin off + await pluginButton.click(); + await expect(xrayHighlight).not.toBeVisible(); + await expect(xrayHighlightTooltip).not.toBeVisible(); + }); + + test('audit shows higlights and tooltips', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const overlay = page.locator('astro-dev-overlay'); + const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]'); + await pluginButton.click(); + + const auditCanvas = overlay.locator( + 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:audit"]' + ); + const auditHighlight = auditCanvas.locator('astro-dev-overlay-highlight'); + await expect(auditHighlight).toBeVisible(); + + await auditHighlight.hover(); + const auditHighlightTooltip = auditHighlight.locator('astro-dev-overlay-tooltip'); + await expect(auditHighlightTooltip).toBeVisible(); + + // Toggle plugin off + await pluginButton.click(); + await expect(auditHighlight).not.toBeVisible(); + await expect(auditHighlightTooltip).not.toBeVisible(); + }); +}); diff --git a/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs b/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs new file mode 100644 index 000000000..380a501ac --- /dev/null +++ b/packages/astro/e2e/fixtures/dev-overlay/astro.config.mjs @@ -0,0 +1,8 @@ +import preact from '@astrojs/preact'; + +export default { + integrations: [preact()], + experimental: { + devOverlay: true + } +}; diff --git a/packages/astro/e2e/fixtures/dev-overlay/package.json b/packages/astro/e2e/fixtures/dev-overlay/package.json new file mode 100644 index 000000000..707aa8718 --- /dev/null +++ b/packages/astro/e2e/fixtures/dev-overlay/package.json @@ -0,0 +1,10 @@ +{ + "name": "@e2e/dev-overlay", + "version": "0.0.0", + "private": true, + "dependencies": { + "@astrojs/preact": "workspace:*", + "astro": "workspace:*", + "preact": "^10.17.1" + } +} diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx b/packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx new file mode 100644 index 000000000..98f7d8bf4 --- /dev/null +++ b/packages/astro/e2e/fixtures/dev-overlay/src/components/HelloWorld.tsx @@ -0,0 +1,3 @@ +export function HelloWorld({ name }) { + return <div>Hello {name}! I'm a component!</div>; +} diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro b/packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro new file mode 100644 index 000000000..9c57b0b8d --- /dev/null +++ b/packages/astro/e2e/fixtures/dev-overlay/src/pages/index.astro @@ -0,0 +1,7 @@ +--- +import { HelloWorld } from "../components/HelloWorld"; +--- + +<HelloWorld name={"Dev Overlay"} client:load /> + +<img src="https://astro.build/assets/press/astro-logo-dark.svg" /> diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index 85bdf73e1..e93f3bcac 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', async () => { constructor() { super(); - this.shadowRoot = this.attachShadow({ mode: 'closed' }); + this.shadowRoot = this.attachShadow({ mode: 'open' }); } // connect component @@ -79,7 +79,7 @@ document.addEventListener('DOMContentLoaded', async () => { bottom: 7.5%; left: calc(50% + 32px); transform: translate(-50%, 0%); - z-index: 999999; + z-index: 9999999999; display: flex; gap: 8px; align-items: center; @@ -478,7 +478,7 @@ document.addEventListener('DOMContentLoaded', async () => { constructor() { super(); - this.shadowRoot = this.attachShadow({ mode: 'closed' }); + this.shadowRoot = this.attachShadow({ mode: 'open' }); } // connect component diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts index 63244ab6b..0671fff0c 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/tooltip.ts @@ -57,6 +57,11 @@ export class DevOverlayTooltip extends HTMLElement { padding: 8px; } + .section-content { + max-height: 250px; + overflow-y: scroll; + } + .modal-title { display: flex; justify-content: space-between; @@ -126,7 +131,7 @@ export class DevOverlayTooltip extends HTMLElement { }</div>` : '' } - ${section.content ? `<div>${section.content}</div>` : ''} + ${section.content ? `<div class="section-content">${section.content}</div>` : ''} ${section.clickDescription ? `<span class="modal-cta">${section.clickDescription}</span>` : ''} `; fragment.append(sectionElement); diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts index cc483b227..11c7b06f9 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts @@ -30,7 +30,7 @@ export class DevOverlayWindow extends HTMLElement { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; color: rgba(204, 206, 216, 1); position: fixed; - z-index: 9999999999; + z-index: 999999999; top: 55%; left: 50%; transform: translate(-50%, -50%); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bdc87fe98..74f736d62 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -928,6 +928,18 @@ importers: specifier: ^18.0.0 version: 18.2.0(react@18.2.0) + packages/astro/e2e/fixtures/dev-overlay: + dependencies: + '@astrojs/preact': + specifier: workspace:* + version: link:../../../../integrations/preact + astro: + specifier: workspace:* + version: link:../../.. + preact: + specifier: ^10.17.1 + version: 10.18.1 + packages/astro/e2e/fixtures/error-cyclic: dependencies: '@astrojs/preact': |