From 60cfa49e445c926288612a6b1a30113ab988011c Mon Sep 17 00:00:00 2001 From: "Fred K. Schott" Date: Wed, 29 Nov 2023 14:18:01 -0800 Subject: [PATCH] Overlay look-and-feel polish (#9230) * dev overlay polish * increase size a bit --- .changeset/mighty-rats-flow.md | 5 + .../runtime/client/dev-overlay/entrypoint.ts | 38 +- .../src/runtime/client/dev-overlay/overlay.ts | 435 ++++++++---------- .../client/dev-overlay/plugins/astro.ts | 33 +- .../client/dev-overlay/plugins/audit.ts | 96 ++-- .../client/dev-overlay/plugins/settings.ts | 28 +- .../dev-overlay/plugins/utils/window.ts | 41 +- .../client/dev-overlay/plugins/xray.ts | 65 +-- .../client/dev-overlay/ui-library/badge.ts | 4 +- .../client/dev-overlay/ui-library/window.ts | 15 +- 10 files changed, 318 insertions(+), 442 deletions(-) create mode 100644 .changeset/mighty-rats-flow.md diff --git a/.changeset/mighty-rats-flow.md b/.changeset/mighty-rats-flow.md new file mode 100644 index 000000000000..8fbec88bafc3 --- /dev/null +++ b/.changeset/mighty-rats-flow.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Update the look and feel of the dev overlay diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts index 0649b0cf3422..9daccc3612ba 100644 --- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts +++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts @@ -88,7 +88,7 @@ document.addEventListener('DOMContentLoaded', async () => { newState = evt.detail.state ?? true; } - await overlay.togglePluginStatus(plugin, newState); + await overlay.setPluginStatus(plugin, newState); }); return plugin; @@ -113,9 +113,13 @@ document.addEventListener('DOMContentLoaded', async () => { border: 1px solid rgba(52, 56, 65, 1); border-radius: 12px; box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01); - width: 180px; + width: 192px; padding: 8px; z-index: 9999999999; + transform: translate(-50%, 0%); + position: fixed; + bottom: 72px; + left: 50%; } .notification { @@ -139,20 +143,19 @@ document.addEventListener('DOMContentLoaded', async () => { background: transparent; color: white; font-family: system-ui, sans-serif; - font-size: 16px; - line-height: 1.2; + font-size: 14px; white-space: nowrap; text-decoration: none; margin: 0; display: flex; - align-items: center; + align-items: center; width: 100%; padding: 8px; border-radius: 8px; } #dropdown button:hover, #dropdown button:focus-visible { - background: rgba(27, 30, 36, 1); + background: #FFFFFF20; cursor: pointer; } @@ -162,8 +165,9 @@ document.addEventListener('DOMContentLoaded', async () => { #dropdown .icon { position: relative; - height: 24px; - width: 24px; + height: 20px; + width: 20px; + padding: 1px; margin-right: 0.5em; } @@ -202,9 +206,6 @@ document.addEventListener('DOMContentLoaded', async () => { dropdown.append(buttonContainer); - eventTarget.addEventListener('plugin-toggled', positionDropdown); - window.addEventListener('resize', positionDropdown); - plugin.eventTarget.addEventListener('toggle-notification', (evt) => { if (!(evt instanceof CustomEvent)) return; @@ -231,21 +232,6 @@ document.addEventListener('DOMContentLoaded', async () => { return icon; } - - function positionDropdown() { - const moreButtonRect = overlay.shadowRoot - .querySelector('[data-plugin-id="astro:more"]') - ?.getBoundingClientRect(); - const dropdownRect = dropdown.getBoundingClientRect(); - - if (moreButtonRect && dropdownRect) { - dropdown.style.position = 'absolute'; - dropdown.style.top = `${moreButtonRect.top - dropdownRect.height - 12}px`; - dropdown.style.left = `${ - moreButtonRect.left + moreButtonRect.width - dropdownRect.width - }px`; - } - } } }, } satisfies DevOverlayPluginDefinition; diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index 040efb953342..348e62717fa0 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -1,6 +1,5 @@ /* eslint-disable no-console */ import type { - DevOverlayMetadata, DevOverlayPlugin as DevOverlayPluginDefinition, } from '../../../@types/astro.js'; import { settings } from './settings.js'; @@ -15,16 +14,14 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & { }; eventTarget: EventTarget; }; - const WS_EVENT_NAME = 'astro-dev-overlay'; +const HOVER_DELAY = 2 * 1000; export class AstroDevOverlay extends HTMLElement { shadowRoot: ShadowRoot; - hoverTimeout: number | undefined; - isHidden: () => boolean = () => this.devOverlay?.hasAttribute('data-hidden') ?? true; + delayedHideTimeout: number | undefined; devOverlay: HTMLDivElement | undefined; plugins: DevOverlayPlugin[] = []; - HOVER_DELAY = 750; hasBeenInitialized = false; // TODO: This should be dynamic based on the screen size or at least configurable, erika - 2023-11-29 customPluginsToShow = 3; @@ -34,12 +31,13 @@ export class AstroDevOverlay extends HTMLElement { this.shadowRoot = this.attachShadow({ mode: 'open' }); } - // Happens whenever the component is connected to the DOM - // When view transitions are enabled, this happens every time the view changes - async connectedCallback() { - if (!this.hasBeenInitialized) { - this.shadowRoot.innerHTML = ` - - -
+
+
${this.plugins @@ -297,38 +258,45 @@ export class AstroDevOverlay extends HTMLElement { )}
- +
`; - this.devOverlay = this.shadowRoot.querySelector('#dev-overlay')!; - this.attachEvents(); - } + + this.devOverlay = this.shadowRoot.querySelector('#dev-overlay')!; + this.attachEvents(); // Create plugin canvases this.plugins.forEach(async (plugin) => { - if (!this.hasBeenInitialized) { - if (settings.config.verbose) console.log(`Creating plugin canvas for ${plugin.id}`); - - const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas'); - pluginCanvas.dataset.pluginId = plugin.id; - this.shadowRoot?.append(pluginCanvas); - } - - await this.togglePluginStatus(plugin, plugin.active); + if (settings.config.verbose) console.log(`Creating plugin canvas for ${plugin.id}`); + const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas'); + pluginCanvas.dataset.pluginId = plugin.id; + this.shadowRoot?.append(pluginCanvas); }); - // Init plugin lazily - This is safe to do here because only plugins that are not initialized yet will be affected + // Init plugin lazily, so that the page can load faster. + // Fallback to setTimeout for Safari (sad!) if ('requestIdleCallback' in window) { window.requestIdleCallback(async () => { - await this.initAllPlugins(); + this.plugins.map((plugin) => this.initPlugin(plugin)); }); } else { - // Fallback to setTimeout for.. Safari... setTimeout(async () => { - await this.initAllPlugins(); - }, 200); + this.plugins.map((plugin) => this.initPlugin(plugin)); + }, 300); } + } - this.hasBeenInitialized = true; + // This is called whenever the component is connected to the DOM. + // This happens on first page load, and on each page change when + // view transitions are used. + connectedCallback() { + if (!this.hasBeenInitialized) { + this.init(); + this.hasBeenInitialized = true; + } + // Run this every time to make sure the correct plugin is open. + this.plugins.forEach(async (plugin) => { + await this.setPluginStatus(plugin, plugin.active); + }); } attachEvents() { @@ -337,95 +305,70 @@ export class AstroDevOverlay extends HTMLElement { item.addEventListener('click', async (e) => { const target = e.currentTarget; if (!target || !(target instanceof HTMLElement)) return; - const id = target.dataset.pluginId; if (!id) return; - const plugin = this.getPluginById(id); if (!plugin) return; - - if (plugin.status === 'loading') { - await this.initPlugin(plugin); - } - await this.togglePluginStatus(plugin); }); }); - const minimizeButton = this.shadowRoot.querySelector('#minimize-button'); - if (minimizeButton && this.devOverlay) { - minimizeButton.addEventListener('click', () => { - this.toggleOverlay(false); - this.toggleMinimizeButton(false); - }); - } - - const devBar = this.shadowRoot.querySelector('#dev-bar'); - if (devBar) { - // On hover: - // - If the overlay is hidden, show it after the hover delay - // - If the overlay is visible, show the minimize button after the hover delay - (['mouseenter', 'focusin'] as const).forEach((event) => { - devBar.addEventListener(event, () => { - if (this.hoverTimeout) { - window.clearTimeout(this.hoverTimeout); - } - - if (this.isHidden()) { - this.hoverTimeout = window.setTimeout(() => { - this.toggleOverlay(true); - }, this.HOVER_DELAY + 200); // Slightly higher delay here to prevent users opening the overlay by accident - } else { - this.hoverTimeout = window.setTimeout(() => { - this.toggleMinimizeButton(true); - }, this.HOVER_DELAY); - } - }); - }); - - // On unhover: - // - Reset every timeout, as to avoid showing the overlay/minimize button when the user didn't really want to hover - // - If the overlay is visible, hide the minimize button after the hover delay - devBar.addEventListener('mouseleave', () => { - if (this.hoverTimeout) { - window.clearTimeout(this.hoverTimeout); + (['mouseenter', 'focusin'] as const).forEach((event) => { + this.devOverlay!.addEventListener(event, () => { + this.clearDelayedHide(); + if (this.isHidden()) { + this.setOverlayVisible(true); } + }); + }); - if (!this.isHidden()) { - this.hoverTimeout = window.setTimeout(() => { - this.toggleMinimizeButton(false); - }, this.HOVER_DELAY); + (['mouseleave', 'focusout'] as const).forEach((event) => { + this.devOverlay!.addEventListener(event, () => { + this.clearDelayedHide(); + if (this.getActivePlugin() || this.isHidden()) { + return; } + this.triggerDelayedHide(); }); + }); - // On click, show the overlay if it's hidden, it's likely the user wants to interact with it - devBar.addEventListener('click', () => { - if (!this.isHidden()) return; - this.toggleOverlay(true); - }); + // 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); + }); - devBar.addEventListener('keyup', (event) => { - if (event.code === 'Space' || event.code === 'Enter') { - if (!this.isHidden()) return; - this.toggleOverlay(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; + this.setOverlayVisible(false); + } + }); - async initAllPlugins() { - await Promise.all( - this.plugins - .filter((plugin) => plugin.status === 'loading') - .map((plugin) => this.initPlugin(plugin)) - ); + 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) { - if (plugin.status === 'ready') return; - const shadowRoot = this.getPluginCanvasById(plugin.id)!.shadowRoot!; - + plugin.status = 'loading'; try { if (settings.config.verbose) console.info(`Initializing plugin ${plugin.id}`); @@ -466,11 +409,23 @@ export class AstroDevOverlay extends HTMLElement { ); } - /** - * @param plugin The plugin to toggle the status of - * @param newStatus Optionally, force the plugin into a specific state - */ - async togglePluginStatus(plugin: DevOverlayPlugin, newStatus?: boolean) { + async togglePluginStatus(plugin: DevOverlayPlugin) { + const activePlugin = this.getActivePlugin(); + if (activePlugin) { + await this.setPluginStatus(activePlugin, false); + } + // TODO(fks): Handle a plugin that hasn't loaded yet. + // Currently, this will just do nothing. + if (plugin.status !== 'ready') return; + // Open the selected plugin. If the selected plugin was + // already the active plugin then the desired outcome + // was to close that plugin, so no action needed. + if (plugin !== activePlugin) { + await this.setPluginStatus(plugin, true); + } + } + + async setPluginStatus(plugin: DevOverlayPlugin, newStatus: boolean) { const pluginCanvas = this.getPluginCanvasById(plugin.id); if (!pluginCanvas) return; @@ -495,68 +450,58 @@ export class AstroDevOverlay extends HTMLElement { moreBarButton.classList.toggle('active', plugin.active); } - pluginCanvas.style.display = plugin.active ? 'block' : 'none'; - - window.requestAnimationFrame(() => { - pluginCanvas.toggleAttribute('data-active', plugin.active); - plugin.eventTarget.dispatchEvent( - new CustomEvent('plugin-toggled', { - detail: { - state: plugin.active, - plugin, - }, - }) - ); - }); + if (plugin.active) { + pluginCanvas.style.display = 'block'; + pluginCanvas.setAttribute('data-active', ''); + } else { + pluginCanvas.style.display = 'none'; + pluginCanvas.removeAttribute('data-active'); + } + + plugin.eventTarget.dispatchEvent( + new CustomEvent('plugin-toggled', { + detail: { + state: plugin.active, + plugin, + }, + }) + ); if (import.meta.hot) { import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active }); } } - - /** - * @param newStatus Optionally, force the minimize button into a specific state - */ - toggleMinimizeButton(newStatus?: boolean) { - const minimizeButton = this.shadowRoot.querySelector('#minimize-button'); - if (!minimizeButton) return; - - if (newStatus !== undefined) { - if (newStatus === true) { - minimizeButton.removeAttribute('inert'); - minimizeButton.style.opacity = '1'; - } else { - minimizeButton.setAttribute('inert', ''); - minimizeButton.style.opacity = '0'; - } - } else { - minimizeButton.toggleAttribute('inert'); - minimizeButton.style.opacity = minimizeButton.hasAttribute('inert') ? '0' : '1'; - } + isHidden(): boolean { + return this.devOverlay?.hasAttribute('data-hidden') ?? true; } - - toggleOverlay(newStatus?: boolean) { + getActivePlugin(): DevOverlayPlugin | undefined { + return this.plugins.find((plugin) => plugin.active); + } + clearDelayedHide() { + window.clearTimeout(this.delayedHideTimeout); + this.delayedHideTimeout = undefined; + } + triggerDelayedHide() { + this.clearDelayedHide(); + this.delayedHideTimeout = window.setTimeout(() => { + this.setOverlayVisible(false); + this.delayedHideTimeout = undefined; + }, HOVER_DELAY); + } + setOverlayVisible(newStatus: boolean) { const barContainer = this.shadowRoot.querySelector('#bar-container'); const devBar = this.shadowRoot.querySelector('#dev-bar'); - - if (newStatus !== undefined) { - if (newStatus === true) { - this.devOverlay?.removeAttribute('data-hidden'); - barContainer?.removeAttribute('inert'); - devBar?.removeAttribute('tabindex'); - } else { - this.devOverlay?.setAttribute('data-hidden', ''); - barContainer?.setAttribute('inert', ''); - devBar?.setAttribute('tabindex', '0'); - } - } else { - this.devOverlay?.toggleAttribute('data-hidden'); - barContainer?.toggleAttribute('inert'); - if (this.isHidden()) { - devBar?.setAttribute('tabindex', '0'); - } else { - devBar?.removeAttribute('tabindex'); - } + if (newStatus === true) { + this.devOverlay?.removeAttribute('data-hidden'); + barContainer?.removeAttribute('inert'); + devBar?.removeAttribute('tabindex'); + return; + } + if (newStatus === false) { + this.devOverlay?.setAttribute('data-hidden', ''); + barContainer?.setAttribute('inert', ''); + devBar?.setAttribute('tabindex', '0'); + return; } } } 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 6707459f4c31..15f7205bdd38 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -1,7 +1,7 @@ import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js'; import { isDefinedIcon, type Icon } from '../ui-library/icons.js'; import { colorForIntegration, iconForIntegration } from './utils/icons.js'; -import { createWindowWithTransition, waitForTransition } from './utils/window.js'; +import { createWindowElement } from './utils/window.js'; const astroLogo = ''; @@ -28,12 +28,12 @@ let integrationData: IntegrationData; export default { id: 'astro', - name: 'Astro', + name: 'Menu', icon: 'astro:logo', async init(canvas, eventTarget) { - createWindow(); + createCanvas(); - document.addEventListener('astro:after-swap', createWindow); + document.addEventListener('astro:after-swap', createCanvas); eventTarget.addEventListener('plugin-toggled', async (event) => { resetDebugButton(); @@ -55,36 +55,31 @@ export default { } }); - function createWindow() { + function createCanvas() { const links: { icon: Icon; name: string; link: string }[] = [ { icon: 'bug', - name: 'Report a bug', + name: 'Report a Bug', link: 'https://github.com/withastro/astro/issues/new/choose', }, { icon: 'lightbulb', - name: 'Suggestions', + name: 'Feedback', link: 'https://github.com/withastro/roadmap/discussions/new/choose', }, { icon: 'file-search', - name: 'Docs', + name: 'Documentation', link: 'https://docs.astro.build', }, - { - icon: 'star', - name: 'Star on GitHub', - link: 'https://github.com/withastro/astro', - }, { icon: '', - name: 'Our Discord', + name: 'Community', link: 'https://astro.build/chat', }, ]; - const windowComponent = createWindowWithTransition( + const windowComponent = createWindowElement( ` +
+

No issues detected.

+
+ ` + ); - canvas.append(noAuditBlock); + canvas.append(window); } (['scroll', 'resize'] as const).forEach((event) => { @@ -163,51 +179,5 @@ export default { return tooltip; } - - function initStyle() { - const devOverlayRect = document - .querySelector('astro-dev-overlay') - ?.shadowRoot.querySelector('#dev-overlay') - ?.getBoundingClientRect(); - - const style = document.createElement('style'); - style.textContent = ` - :host { - opacity: 0; - transition: opacity 0.1s ease-in-out; - } - - :host([data-active]) { - opacity: 1; - } - - #no-audit { - border: 1px solid rgba(113, 24, 226, 1); - background-color: #310A65; - box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01); - color: white; - text-align: center; - border-radius: 4px; - padding: 8px; - 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"; - position: fixed; - transform: translate(-50%, 0); - top: ${(devOverlayRect?.top ?? 0) - (devOverlayRect?.height ?? 0) - 16}px; - left: calc(50% + 12px); - width: 200px; - } - `; - - canvas.append(style); - } - }, - async beforeTogglingOff(canvas) { - canvas.host?.removeAttribute('data-active'); - - await new Promise((resolve) => { - canvas.host.addEventListener('transitionend', resolve); - }); - - return true; }, } satisfies DevOverlayPlugin; 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 9f1a279007e2..72fb65f97623 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts @@ -1,6 +1,6 @@ import type { DevOverlayPlugin } from '../../../../@types/astro.js'; import { settings, type Settings } from '../settings.js'; -import { createWindowWithTransition, waitForTransition } from './utils/window.js'; +import { createWindowElement } from './utils/window.js'; interface SettingRow { name: string; @@ -13,7 +13,7 @@ interface SettingRow { const settingsRows = [ { name: 'Disable notifications', - description: 'Notification bubbles will not be shown when this is enabled.', + description: 'Hide notification badges in the toolbar.', input: 'checkbox', settingKey: 'disablePluginNotification', changeEvent: (evt: Event) => { @@ -37,7 +37,7 @@ const settingsRows = [ export default { id: 'astro:settings', - name: 'Overlay settings', + name: 'Settings', icon: 'gear', init(canvas) { createSettingsWindow(); @@ -45,8 +45,11 @@ export default { document.addEventListener('astro:after-swap', createSettingsWindow); function createSettingsWindow() { - const window = createWindowWithTransition( + const windowElement = createWindowElement( ` - ${windowContent} - `; - - windowElement.append(...addedNodes); - + windowElement.innerHTML = content; return windowElement; } - -export async function waitForTransition(canvas: ShadowRoot): Promise { - canvas.host?.removeAttribute('data-active'); - - await new Promise((resolve) => { - canvas.host.addEventListener('transitionend', resolve); - }); - - return true; -} 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 08a510d98411..782ede4d2ab8 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts @@ -6,13 +6,14 @@ import { getHighlightZIndex, positionHighlight, } from './utils/highlight.js'; +import { createWindowElement } from './utils/window.js'; const icon = ''; export default { id: 'astro:xray', - name: 'Xray', + name: 'Inspect', icon: icon, init(canvas) { let islandsOverlays: { highlightElement: DevOverlayHighlight; island: HTMLElement }[] = []; @@ -23,7 +24,6 @@ export default { document.addEventListener('astro:page-load', refreshIslandsOverlayPositions); function addIslandsOverlay() { - initStyle(); islandsOverlays.forEach(({ highlightElement }) => { highlightElement.remove(); }); @@ -31,6 +31,42 @@ export default { const islands = document.querySelectorAll('astro-island'); + if (islands.length === 0) { + const window = createWindowElement( + ` +
+

No islands detected.

+
+ ` + ); + + canvas.append(window); + return; + } + islands.forEach((island) => { const computedStyle = window.getComputedStyle(island); const islandElement = (island.children[0] as HTMLElement) || island; @@ -120,30 +156,5 @@ export default { const [_, value] = prop; return JSON.stringify(value, null, 2); } - - function initStyle() { - const style = document.createElement('style'); - style.textContent = ` - :host { - opacity: 0; - transition: opacity 0.1s ease-in-out; - } - - :host([data-active]) { - opacity: 1; - } - `; - - canvas.append(style); - } - }, - async beforeTogglingOff(canvas) { - canvas.host?.removeAttribute('data-active'); - - await new Promise((resolve) => { - canvas.host.addEventListener('transitionend', resolve); - }); - - return true; }, } satisfies DevOverlayPlugin; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/badge.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/badge.ts index 06d1e5031536..5a8eea07ed9f 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/badge.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/badge.ts @@ -38,8 +38,8 @@ export class DevOverlayBadge extends HTMLElement { } .badge--gray { - color: rgba(233, 234, 238, 1); - border-color: rgba(145, 152, 173, 1); + color: rgba(191, 193, 201, 1); + border-color: rgba(191, 193, 201, 1); } .badge--purple { 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 00a4ace86989..0873d888d8a9 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 @@ -16,17 +16,16 @@ export class DevOverlayWindow extends HTMLElement { background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841); border: 1px solid rgba(52, 56, 65, 1); width: min(640px, 100%); - height: 480px; + max-height: 480px; border-radius: 12px; padding: 24px; 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); + color: rgba(191, 193, 201, 1); position: fixed; z-index: 999999999; - /* -7.5em is a magic number that seems to keep it anchored with the dev bar */ - bottom: calc(7.5% + -150px); + bottom: 72px; left: 50%; - transform: translate(-50%, -50%); + transform: translateX(-50%); box-shadow: 0px 0px 0px 0px rgba(19, 21, 26, 0.30), 0px 1px 2px 0px rgba(19, 21, 26, 0.29), 0px 4px 4px 0px rgba(19, 21, 26, 0.26), 0px 10px 6px 0px rgba(19, 21, 26, 0.15), 0px 17px 7px 0px rgba(19, 21, 26, 0.04), 0px 26px 7px 0px rgba(19, 21, 26, 0.01); } @@ -35,6 +34,12 @@ export class DevOverlayWindow extends HTMLElement { background: white; } } + + @media (max-width: 640px) { + :host { + border-radius: 0; + } + } ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4), ::slotted(h5) { font-weight: 600;