From 29fa5044672988393878f1b7ba8eeb3acca7b270 Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Mon, 4 Dec 2023 05:26:34 -0800 Subject: [PATCH] [Toolbar] Final style polish and code cleanup (#9282) Co-authored-by: Princesseuh <3019731+Princesseuh@users.noreply.github.com> --- packages/astro/e2e/dev-overlay.test.js | 2 +- .../src/runtime/client/dev-overlay/overlay.ts | 38 +++++------------- .../client/dev-overlay/plugins/audit.ts | 26 ++++++++++++- .../client/dev-overlay/plugins/settings.ts | 27 ++++++++----- .../client/dev-overlay/plugins/xray.ts | 39 ++++++++++++++----- .../client/dev-overlay/ui-library/tooltip.ts | 9 ++++- .../client/dev-overlay/ui-library/window.ts | 4 ++ 7 files changed, 93 insertions(+), 52 deletions(-) diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js index a5e3560e90..b4188b1e78 100644 --- a/packages/astro/e2e/dev-overlay.test.js +++ b/packages/astro/e2e/dev-overlay.test.js @@ -200,7 +200,7 @@ test.describe('Dev Overlay', () => { await expect(settingsWindow).toHaveCount(1); await expect(settingsWindow).toBeVisible(); - const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide overlay' }); + const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide toolbar' }); await expect(hideOverlay).toBeVisible(); }); }); diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index 2def988020..1a3457ceb1 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -71,7 +71,7 @@ export class AstroDevOverlay extends HTMLElement { } #dev-overlay[data-hidden] #dev-bar .item { - opacity: 0; + opacity: 0.2; } #dev-bar-hitbox-above, @@ -340,38 +340,18 @@ export class AstroDevOverlay extends HTMLElement { }); }); - // On click, show the overlay if it's hidden, it's likely the user wants to interact with it - this.shadowRoot.addEventListener('click', () => { - if (!this.isHidden()) return; - this.setOverlayVisible(true); - }); - - this.devOverlay!.addEventListener('keyup', (event) => { - if (event.code === 'Space' || event.code === 'Enter') { - if (!this.isHidden()) return; - this.setOverlayVisible(true); - } - if (event.key === 'Escape') { - if (this.isHidden()) return; - if (this.getActivePlugin()) return; + document.addEventListener('keyup', (event) => { + if (event.key !== 'Escape') return; + if (this.isHidden()) return; + const activePlugin = this.getActivePlugin(); + if (activePlugin) { + this.togglePluginStatus(activePlugin); + } else { this.setOverlayVisible(false); } }); - document.addEventListener('keyup', (event) => { - if (event.key !== 'Escape') { - return; - } - if (this.isHidden()) { - return; - } - const activePlugin = this.getActivePlugin(); - if (activePlugin) { - this.setPluginStatus(activePlugin, false); - return; - } - this.setOverlayVisible(false); - }); + } async initPlugin(plugin: DevOverlayPlugin) { diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts index 51d63f7ab4..08c8b6434f 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts @@ -31,6 +31,27 @@ export default { document.addEventListener('astro:after-swap', async () => lint()); document.addEventListener('astro:page-load', async () => refreshLintPositions); + function onPageClick(event: MouseEvent) { + const target = event.target as Element | null; + if (!target) return; + if (!target.closest) return; + if (target.closest('astro-dev-toolbar')) return; + eventTarget.dispatchEvent( + new CustomEvent('toggle-plugin', { + detail: { + state: false, + }, + }) + ); + } + eventTarget.addEventListener('plugin-toggled', (event: any) => { + if (event.detail.state === true) { + document.addEventListener('click', onPageClick, true); + } else { + document.removeEventListener('click', onPageClick, true); + } + }); + async function lint() { audits.forEach(({ highlightElement }) => { highlightElement.remove(); @@ -89,8 +110,11 @@ export default { }
-

No issues detected.

+

No accessibility issues detected.

+

+ Nice work! This app scans the page and highlights common accessibility issues for you, like a missing "alt" attribute on an image. +

` ); diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts index daf1cae000..672b7bbda3 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts @@ -80,7 +80,7 @@ export default { font-size: 16px; font-weight: 400; color: white; - margin-bottom: 0; + margin-bottom: 4px; } label { @@ -114,30 +114,37 @@ export default { padding: .3em; } - p { - line-height: 2em; + label > section { + max-width: 67%; + } + p { + line-height: 1.5em; } - a, a:visited { color: var(--color-purple); } + a:hover { + color: #f4ecfd; + }

Settings

-
+
-

General

-
-

Hide overlay

-

Run astro preferences disable devOverlay in your terminal to disable this dev overlay in this project. Learn more.

+ ` ); const general = windowElement.querySelector('#general')!; for (const settingsRow of settingsRows) { - general.after(getElementForSettingAsString(settingsRow)); general.after(document.createElement('hr')); + general.after(getElementForSettingAsString(settingsRow)); } canvas.append(windowElement); 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 8ce16f7c4f..a460e2a3b0 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts @@ -15,7 +15,7 @@ export default { id: 'astro:xray', name: 'Inspect', icon: icon, - init(canvas) { + init(canvas, eventTarget) { let islandsOverlays: { highlightElement: DevOverlayHighlight; island: HTMLElement }[] = []; addIslandsOverlay(); @@ -23,6 +23,30 @@ export default { document.addEventListener('astro:after-swap', addIslandsOverlay); document.addEventListener('astro:page-load', refreshIslandsOverlayPositions); + function onPageClick(event: MouseEvent) { + const target = event.target as Element | null; + if (!target) return; + if (!target.closest) return; + if (target.closest('astro-dev-toolbar')) return; + event.preventDefault(); + event.stopPropagation(); + eventTarget.dispatchEvent( + new CustomEvent('toggle-plugin', { + detail: { + state: false, + }, + }) + ); + } + + eventTarget.addEventListener('plugin-toggled', (event: any) => { + if (event.detail.state === true) { + document.addEventListener('click', onPageClick, true); + } else { + document.removeEventListener('click', onPageClick, true); + } + }); + function addIslandsOverlay() { islandsOverlays.forEach(({ highlightElement }) => { highlightElement.remove(); @@ -60,6 +84,9 @@ export default {

No islands detected.

+

+ It looks like there are no interactive component islands on this page. Did you forget to add a client directive to your interactive UI component? +

` ); @@ -131,9 +158,8 @@ export default { if (Object.keys(islandProps).length > 0) { tooltip.sections.push({ title: 'Props', - content: `${Object.entries(islandProps) - .map((prop) => `${prop[0]}=${getPropValue(prop[1] as any)}`) - .join(', ')}`, + content: `
${JSON.stringify(Object.fromEntries(Object.entries(islandProps)
+						.map((prop: any) =>([prop[0], prop[1][1]]))), undefined, 2)}
`, }); } @@ -159,10 +185,5 @@ export default { return tooltip; } - - function getPropValue(prop: [number, any]) { - const [_, value] = prop; - return JSON.stringify(value, null, 2); - } }, } satisfies DevOverlayPlugin; 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 dbd7add5dd..d535865cf7 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 @@ -101,13 +101,18 @@ export class DevOverlayTooltip extends HTMLElement { cursor: pointer; } - code { - background: rgba(136, 58, 234, 0.33); + pre, code { + background: rgb(78, 27, 145); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; border-radius: 2px; font-size: 14px; padding: 2px; } + pre { + padding: 1em; + margin: 0 0; + overflow: auto; + } `; const fragment = new DocumentFragment(); 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 0873d888d8..bab936d4bb 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 @@ -70,6 +70,10 @@ export class DevOverlayWindow extends HTMLElement { border: 1px solid rgba(27, 30, 36, 1); margin: 1em 0; } + + p, ::slotted(p) { + line-height: 1.5em; + }