diff --git a/.changeset/lemon-crews-juggle.md b/.changeset/lemon-crews-juggle.md
new file mode 100644
index 000000000000..b404f7348415
--- /dev/null
+++ b/.changeset/lemon-crews-juggle.md
@@ -0,0 +1,9 @@
+---
+'astro': major
+---
+
+Renames Dev Overlay to Dev Toolbar
+
+The previously named Dev Overlay is now known as the Astro Dev Toolbar. Additionally what were called Plugins are now Toolbar Apps. This updates our references to reflect.
+
+As there were a lot of APIs that used these names, the existing APIs are left in place, and aliases for the new Toolbar based names are included as well, which is what will be documented.
diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js
index 1a358487cb27..a5e3560e905a 100644
--- a/packages/astro/e2e/dev-overlay.test.js
+++ b/packages/astro/e2e/dev-overlay.test.js
@@ -19,14 +19,14 @@ test.describe('Dev Overlay', () => {
test('dev overlay exists in the page', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
- const devOVerlay = page.locator('astro-dev-overlay');
+ const devOVerlay = page.locator('astro-dev-toolbar');
await expect(devOVerlay).toHaveCount(1);
});
test('shows plugin name on hover', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
- const overlay = page.locator('astro-dev-overlay');
+ const overlay = page.locator('astro-dev-toolbar');
const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
const pluginButtonTooltip = pluginButton.locator('.item-tooltip');
await pluginButton.hover();
@@ -37,14 +37,14 @@ test.describe('Dev Overlay', () => {
test('can open Astro plugin', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
- const overlay = page.locator('astro-dev-overlay');
+ const overlay = page.locator('astro-dev-toolbar');
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"]'
+ 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]'
);
- const astroWindow = astroPluginCanvas.locator('astro-dev-overlay-window');
+ const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window');
await expect(astroWindow).toHaveCount(1);
await expect(astroWindow).toBeVisible();
@@ -56,18 +56,18 @@ test.describe('Dev Overlay', () => {
test('xray shows highlights and tooltips', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
- const overlay = page.locator('astro-dev-overlay');
+ const overlay = page.locator('astro-dev-toolbar');
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"]'
+ 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]'
);
- const xrayHighlight = xrayCanvas.locator('astro-dev-overlay-highlight');
+ const xrayHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight');
await expect(xrayHighlight).toBeVisible();
await xrayHighlight.hover();
- const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-overlay-tooltip');
+ const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-toolbar-tooltip');
await expect(xrayHighlightTooltip).toBeVisible();
// Toggle plugin off
@@ -76,21 +76,41 @@ test.describe('Dev Overlay', () => {
await expect(xrayHighlightTooltip).not.toBeVisible();
});
+ test('xray shows no islands message when there are none', async ({ page, astro }) => {
+ await page.goto(astro.resolveUrl('/xray-no-islands'));
+
+ const overlay = page.locator('astro-dev-toolbar');
+ const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]');
+ await pluginButton.click();
+
+ const xrayCanvas = overlay.locator(
+ 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]'
+ );
+ const auditHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight');
+ await expect(auditHighlight).not.toBeVisible();
+
+ const xrayWindow = xrayCanvas.locator('astro-dev-toolbar-window');
+ await expect(xrayWindow).toHaveCount(1);
+ await expect(xrayWindow).toBeVisible();
+
+ await expect(xrayWindow.locator('astro-dev-toolbar-icon[icon=lightbulb]')).toBeVisible();
+ });
+
test('audit shows higlights and tooltips', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
- const overlay = page.locator('astro-dev-overlay');
+ const overlay = page.locator('astro-dev-toolbar');
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"]'
+ 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
);
- const auditHighlight = auditCanvas.locator('astro-dev-overlay-highlight');
+ const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight');
await expect(auditHighlight).toBeVisible();
await auditHighlight.hover();
- const auditHighlightTooltip = auditHighlight.locator('astro-dev-overlay-tooltip');
+ const auditHighlightTooltip = auditHighlight.locator('astro-dev-toolbar-tooltip');
await expect(auditHighlightTooltip).toBeVisible();
// Toggle plugin off
@@ -99,17 +119,37 @@ test.describe('Dev Overlay', () => {
await expect(auditHighlightTooltip).not.toBeVisible();
});
+ test('audit shows no issues message when there are no issues', async ({ page, astro }) => {
+ await page.goto(astro.resolveUrl('/audit-no-warning'));
+
+ const overlay = page.locator('astro-dev-toolbar');
+ const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
+ await pluginButton.click();
+
+ const auditCanvas = overlay.locator(
+ 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
+ );
+ const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight');
+ await expect(auditHighlight).not.toBeVisible();
+
+ const auditWindow = auditCanvas.locator('astro-dev-toolbar-window');
+ await expect(auditWindow).toHaveCount(1);
+ await expect(auditWindow).toBeVisible();
+
+ await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible();
+ });
+
test('can open Settings plugin', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
- const overlay = page.locator('astro-dev-overlay');
+ const overlay = page.locator('astro-dev-toolbar');
const pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
await pluginButton.click();
const settingsPluginCanvas = overlay.locator(
- 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:settings"]'
+ 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
);
- const settingsWindow = settingsPluginCanvas.locator('astro-dev-overlay-window');
+ const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
await expect(settingsWindow).toHaveCount(1);
await expect(settingsWindow).toBeVisible();
@@ -117,4 +157,50 @@ test.describe('Dev Overlay', () => {
await pluginButton.click();
await expect(settingsWindow).not.toBeVisible();
});
+
+ test('Opening a plugin closes the currently opened plugin', async ({ page, astro }) => {
+ await page.goto(astro.resolveUrl('/'));
+
+ const overlay = page.locator('astro-dev-toolbar');
+ let pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
+ await pluginButton.click();
+
+ const settingsPluginCanvas = overlay.locator(
+ 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
+ );
+ const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
+ await expect(settingsWindow).toHaveCount(1);
+ await expect(settingsWindow).toBeVisible();
+
+ // Click the astro plugin
+ pluginButton = overlay.locator('button[data-plugin-id="astro"]');
+ await pluginButton.click();
+
+ const astroPluginCanvas = overlay.locator(
+ 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]'
+ );
+ const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window');
+ await expect(astroWindow).toHaveCount(1);
+ await expect(astroWindow).toBeVisible();
+
+ await expect(settingsWindow).not.toBeVisible();
+ });
+
+ test('Settings plugin contains message on disabling the overlay', async ({ page, astro }) => {
+ await page.goto(astro.resolveUrl('/'));
+
+ const overlay = page.locator('astro-dev-toolbar');
+ let pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
+ await pluginButton.click();
+
+ const settingsPluginCanvas = overlay.locator(
+ 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
+ );
+ const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
+ await expect(settingsWindow).toHaveCount(1);
+ await expect(settingsWindow).toBeVisible();
+
+ const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide overlay' });
+ await expect(hideOverlay).toBeVisible();
+ });
});
diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro b/packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro
new file mode 100644
index 000000000000..9d0c2858777b
--- /dev/null
+++ b/packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro
@@ -0,0 +1,5 @@
+---
+
+---
+
+
diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro b/packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro
new file mode 100644
index 000000000000..f408d45cb050
--- /dev/null
+++ b/packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro
@@ -0,0 +1,5 @@
+---
+
+---
+
+no islands on this page
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
index 82d44d5e58ac..025bac516476 100644
--- a/packages/astro/src/@types/astro.ts
+++ b/packages/astro/src/@types/astro.ts
@@ -1159,6 +1159,7 @@ export interface AstroUserConfig {
* @docs
* @kind heading
* @name Dev Overlay Options
+ * @deprecated Use `devToolbar` instead.
*/
devOverlay?: {
/**
@@ -1183,6 +1184,34 @@ export interface AstroUserConfig {
defaultState: 'minimized' | 'expanded';
};
+ /**
+ * @docs
+ * @kind heading
+ * @name Dev Toolbar Options
+ */
+ devToolbar?: {
+ /**
+ * @docs
+ * @name devToolbar.enabled
+ * @type {boolean}
+ * @default `true`
+ * @description
+ * Whether to enable the Astro Dev Toolbar. This toolbar allows you to inspect your page islands, see helpful audits on performance and accessibility, and more.
+ *
+ * This option is scoped to the entire project, to only disable the toolbar for yourself, run `npm run astro preferences disable devToolbar`. To disable the toolbar for all your Astro projects, run `npm run astro preferences disable devToolbar --global`.
+ */
+ enabled: boolean;
+ /**
+ * @docs
+ * @name devToolbar.defaultState
+ * @type {'minimized' | 'expanded'}
+ * @default `minimized`
+ * @description
+ * Whether the Dev Toolbar should be expanded or minimized by default.
+ */
+ defaultState: 'minimized' | 'expanded';
+ };
+
/**
* @docs
* @kind heading
@@ -1716,7 +1745,7 @@ export interface AstroSettings {
* Map of directive name (e.g. `load`) to the directive script code
*/
clientDirectives: Map;
- devOverlayPlugins: string[];
+ devToolbarApps: string[];
middlewares: { pre: string[]; post: string[] };
tsConfig: TSConfig | undefined;
tsConfigPath: string | undefined;
@@ -2296,7 +2325,11 @@ export interface AstroIntegration {
injectScript: (stage: InjectedScriptStage, content: string) => void;
injectRoute: (injectRoute: InjectedRoute) => void;
addClientDirective: (directive: ClientDirectiveConfig) => void;
+ /**
+ * @deprecated Use `addDevToolbarApp` instead.
+ */
addDevOverlayPlugin: (entrypoint: string) => void;
+ addDevToolbarApp: (entrypoint: string) => void;
addMiddleware: (mid: AstroIntegrationMiddleware) => void;
logger: AstroIntegrationLogger;
// TODO: Add support for `injectElement()` for full HTML element injection, not just scripts.
@@ -2567,6 +2600,18 @@ export type DevOverlayMetadata = Window &
declare global {
interface HTMLElementTagNameMap {
+ 'astro-dev-toolbar': AstroDevOverlay;
+ 'astro-dev-toolbar-window': DevOverlayWindow;
+ 'astro-dev-toolbar-plugin-canvas': DevOverlayCanvas;
+ 'astro-dev-toolbar-tooltip': DevOverlayTooltip;
+ 'astro-dev-toolbar-highlight': DevOverlayHighlight;
+ 'astro-dev-toolbar-toggle': DevOverlayToggle;
+ 'astro-dev-toolbar-badge': DevOverlayBadge;
+ 'astro-dev-toolbar-button': DevOverlayButton;
+ 'astro-dev-toolbar-icon': DevOverlayIcon;
+ 'astro-dev-toolbar-card': DevOverlayCard;
+
+ // Deprecated names
'astro-dev-overlay': AstroDevOverlay;
'astro-dev-overlay-window': DevOverlayWindow;
'astro-dev-overlay-plugin-canvas': DevOverlayCanvas;
diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
index 855bad4615bc..95e3964b43f6 100644
--- a/packages/astro/src/core/config/schema.ts
+++ b/packages/astro/src/core/config/schema.ts
@@ -45,6 +45,10 @@ const ASTRO_CONFIG_DEFAULTS = {
enabled: true,
defaultState: 'minimized',
},
+ devToolbar: {
+ enabled: true,
+ defaultState: 'minimized',
+ },
compressHTML: true,
server: {
host: false,
@@ -236,6 +240,14 @@ export const AstroConfigSchema = z.object({
.default(ASTRO_CONFIG_DEFAULTS.devOverlay.defaultState),
})
.default(ASTRO_CONFIG_DEFAULTS.devOverlay),
+ devToolbar: z
+ .object({
+ enabled: z.boolean().default(ASTRO_CONFIG_DEFAULTS.devToolbar.enabled),
+ defaultState: z
+ .enum(['minimized', 'expanded'])
+ .default(ASTRO_CONFIG_DEFAULTS.devToolbar.defaultState),
+ })
+ .default(ASTRO_CONFIG_DEFAULTS.devToolbar),
markdown: z
.object({
syntaxHighlight: z
diff --git a/packages/astro/src/core/config/settings.ts b/packages/astro/src/core/config/settings.ts
index 4dc4beca8926..ef92d6e7d9be 100644
--- a/packages/astro/src/core/config/settings.ts
+++ b/packages/astro/src/core/config/settings.ts
@@ -102,7 +102,7 @@ export function createBaseSettings(config: AstroConfig): AstroSettings {
clientDirectives: getDefaultClientDirectives(),
middlewares: { pre: [], post: [] },
watchFiles: [],
- devOverlayPlugins: [],
+ devToolbarApps: [],
timer: new AstroTimer(),
};
}
diff --git a/packages/astro/src/integrations/index.ts b/packages/astro/src/integrations/index.ts
index 2f5bc675b273..9031eeb2dfe2 100644
--- a/packages/astro/src/integrations/index.ts
+++ b/packages/astro/src/integrations/index.ts
@@ -141,7 +141,11 @@ export async function runHookConfigSetup({
updatedSettings.watchFiles.push(path instanceof URL ? fileURLToPath(path) : path);
},
addDevOverlayPlugin: (entrypoint) => {
- updatedSettings.devOverlayPlugins.push(entrypoint);
+ // TODO add a deprecation warning in Astro 5.
+ hooks.addDevToolbarApp(entrypoint);
+ },
+ addDevToolbarApp: (entrypoint) => {
+ updatedSettings.devToolbarApps.push(entrypoint);
},
addClientDirective: ({ name, entrypoint }) => {
if (updatedSettings.clientDirectives.has(name) || addedClientDirectives.has(name)) {
diff --git a/packages/astro/src/preferences/defaults.ts b/packages/astro/src/preferences/defaults.ts
index db9cfde876d6..f1c4d78135cb 100644
--- a/packages/astro/src/preferences/defaults.ts
+++ b/packages/astro/src/preferences/defaults.ts
@@ -1,5 +1,5 @@
export const DEFAULT_PREFERENCES = {
- devOverlay: {
+ devToolbar: {
/** Specifies whether the user has the Dev Overlay enabled */
enabled: true,
},
diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
index 70b310fd0bda..119da70316c2 100644
--- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts
@@ -34,18 +34,31 @@ document.addEventListener('DOMContentLoaded', async () => {
]);
// Register custom elements
- customElements.define('astro-dev-overlay', AstroDevOverlay);
- customElements.define('astro-dev-overlay-window', DevOverlayWindow);
- customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas);
- customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip);
- customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight);
- customElements.define('astro-dev-overlay-card', DevOverlayCard);
- customElements.define('astro-dev-overlay-toggle', DevOverlayToggle);
- customElements.define('astro-dev-overlay-button', DevOverlayButton);
- customElements.define('astro-dev-overlay-badge', DevOverlayBadge);
- customElements.define('astro-dev-overlay-icon', DevOverlayIcon);
-
- overlay = document.createElement('astro-dev-overlay');
+ customElements.define('astro-dev-toolbar', AstroDevOverlay);
+ customElements.define('astro-dev-toolbar-window', DevOverlayWindow);
+ customElements.define('astro-dev-toolbar-plugin-canvas', DevOverlayCanvas);
+ customElements.define('astro-dev-toolbar-tooltip', DevOverlayTooltip);
+ customElements.define('astro-dev-toolbar-highlight', DevOverlayHighlight);
+ customElements.define('astro-dev-toolbar-card', DevOverlayCard);
+ customElements.define('astro-dev-toolbar-toggle', DevOverlayToggle);
+ customElements.define('astro-dev-toolbar-button', DevOverlayButton);
+ customElements.define('astro-dev-toolbar-badge', DevOverlayBadge);
+ customElements.define('astro-dev-toolbar-icon', DevOverlayIcon);
+
+ // Add deprecated names
+ const deprecated = (Parent: any) => class extends Parent{};
+ customElements.define('astro-dev-overlay', deprecated(AstroDevOverlay));
+ customElements.define('astro-dev-overlay-window', deprecated(DevOverlayWindow));
+ customElements.define('astro-dev-overlay-plugin-canvas', deprecated(DevOverlayCanvas));
+ customElements.define('astro-dev-overlay-tooltip', deprecated(DevOverlayTooltip));
+ customElements.define('astro-dev-overlay-highlight', deprecated(DevOverlayHighlight));
+ customElements.define('astro-dev-overlay-card', deprecated(DevOverlayCard));
+ customElements.define('astro-dev-overlay-toggle', deprecated(DevOverlayToggle));
+ customElements.define('astro-dev-overlay-button', deprecated(DevOverlayButton));
+ customElements.define('astro-dev-overlay-badge', deprecated(DevOverlayBadge));
+ customElements.define('astro-dev-overlay-icon', deprecated(DevOverlayIcon));
+
+ overlay = document.createElement('astro-dev-toolbar');
const preparePlugin = (
pluginDefinition: DevOverlayPluginDefinition,
@@ -76,14 +89,18 @@ document.addEventListener('DOMContentLoaded', async () => {
target.querySelector('.notification')?.toggleAttribute('data-active', newState);
});
- eventTarget.addEventListener('toggle-plugin', async (evt) => {
+ const onToggleApp = async (evt: Event) => {
let newState = undefined;
if (evt instanceof CustomEvent) {
newState = evt.detail.state ?? true;
}
await overlay.setPluginStatus(plugin, newState);
- });
+ };
+
+ eventTarget.addEventListener('toggle-app', onToggleApp);
+ // Deprecated
+ eventTarget.addEventListener('toggle-plugin', onToggleApp);
return plugin;
};
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 798be5e7d8d8..7cd92d160a62 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -15,7 +15,8 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & {
};
eventTarget: EventTarget;
};
-const WS_EVENT_NAME = 'astro-dev-overlay';
+const WS_EVENT_NAME = 'astro-dev-toolbar';
+const WS_EVENT_NAME_DEPRECATED = 'astro-dev-overlay';
const HOVER_DELAY = 2 * 1000;
export class AstroDevOverlay extends HTMLElement {
@@ -43,12 +44,12 @@ export class AstroDevOverlay extends HTMLElement {
/* Important! Reset all inherited styles to initial */
all: initial;
z-index: 999999;
- view-transition-name: astro-dev-overlay;
+ view-transition-name: astro-dev-toolbar;
display: contents;
}
- ::view-transition-old(astro-dev-overlay),
- ::view-transition-new(astro-dev-overlay) {
+ ::view-transition-old(astro-dev-toolbar),
+ ::view-transition-new(astro-dev-toolbar) {
animation: none;
}
@@ -273,7 +274,7 @@ export class AstroDevOverlay extends HTMLElement {
// Create plugin canvases
this.plugins.forEach(async (plugin) => {
if (settings.config.verbose) console.log(`Creating plugin canvas for ${plugin.id}`);
- const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas');
+ const pluginCanvas = document.createElement('astro-dev-toolbar-plugin-canvas');
pluginCanvas.dataset.pluginId = plugin.id;
this.shadowRoot?.append(pluginCanvas);
});
@@ -384,6 +385,7 @@ export class AstroDevOverlay extends HTMLElement {
if (import.meta.hot) {
import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:initialized`);
+ import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${plugin.id}:initialized`);
}
} catch (e) {
console.error(`Failed to init plugin ${plugin.id}, error: ${e}`);
@@ -404,7 +406,7 @@ export class AstroDevOverlay extends HTMLElement {
getPluginCanvasById(id: string) {
return this.shadowRoot.querySelector(
- `astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`
+ `astro-dev-toolbar-plugin-canvas[data-plugin-id="${id}"]`
);
}
@@ -462,17 +464,24 @@ export class AstroDevOverlay extends HTMLElement {
pluginCanvas.removeAttribute('data-active');
}
- plugin.eventTarget.dispatchEvent(
- new CustomEvent('plugin-toggled', {
- detail: {
- state: plugin.active,
- plugin,
- },
- })
- );
+ [
+ 'app-toggled',
+ // Deprecated
+ 'plugin-toggled'
+ ].forEach(eventName => {
+ plugin.eventTarget.dispatchEvent(
+ new CustomEvent(eventName, {
+ detail: {
+ state: plugin.active,
+ plugin,
+ },
+ })
+ );
+ });
if (import.meta.hot) {
import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active });
+ import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${plugin.id}:toggled`, { state: plugin.active });
}
return true;
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 15f7205bdd38..d3f0d03e6789 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
@@ -87,7 +87,7 @@ export default {
justify-content: center;
}
- #buttons-container astro-dev-overlay-card {
+ #buttons-container astro-dev-toolbar-card {
flex: 1;
}
@@ -222,7 +222,7 @@ export default {
height: 1px;
}
- #integration-list astro-dev-overlay-card, .integration-skeleton {
+ #integration-list astro-dev-toolbar-card, .integration-skeleton {
min-width: 240px;
height: 160px;
}
@@ -242,7 +242,7 @@ export default {
}
}
- #integration-list astro-dev-overlay-card .integration-image {
+ #integration-list astro-dev-toolbar-card .integration-image {
width: 40px;
height: 40px;
background-color: var(--integration-image-background, white);
@@ -253,12 +253,12 @@ export default {
margin-bottom: 8px;
}
- #integration-list astro-dev-overlay-card img {
+ #integration-list astro-dev-toolbar-card img {
width: 24px;
height: 24px;
}
- #integration-list astro-dev-overlay-card astro-dev-overlay-icon {
+ #integration-list astro-dev-toolbar-card astro-dev-toolbar-icon {
width: 24px;
height: 24px;
color: #fff;
@@ -287,26 +287,26 @@ export default {
color: rgba(145, 152, 173, 1);
}
- #links astro-dev-overlay-icon {
+ #links astro-dev-toolbar-icon {
width: 1.5em;
height: 1.5em;
display: block;
}
- #integration-list astro-dev-overlay-card svg {
+ #integration-list astro-dev-toolbar-card svg {
width: 24px;
height: 24px;
vertical-align: bottom;
}
- #integration-list astro-dev-overlay-card h3 {
+ #integration-list astro-dev-toolbar-card h3 {
margin: 0;
margin-bottom: 8px;
color: white;
white-space: nowrap;
}
- #integration-list astro-dev-overlay-card p {
+ #integration-list astro-dev-toolbar-card p {
font-size: 14px;
}
@@ -320,11 +320,11 @@ export default {
${astroLogo}
- ${
+ ${
(window as DevOverlayMetadata).__astro_dev_overlay__.version
- }
+ }
- Copy debug info
+ Copy debug info
@@ -345,9 +345,9 @@ export default {
${links
.map(
(link) =>
- `` : `>${link.icon}`
- }${link.name}`
+ }${link.name}`
)
.join('')}
@@ -376,7 +376,7 @@ export default {
const copyDebugButton = canvas.querySelector('#copy-debug-button');
if (!copyDebugButton) return;
- copyDebugButton.innerHTML = 'Copy debug info ';
+ copyDebugButton.innerHTML = 'Copy debug info ';
}
function refreshIntegrationList() {
@@ -387,7 +387,7 @@ export default {
const fragment = document.createDocumentFragment();
for (const integration of integrationData.data) {
- const integrationComponent = document.createElement('astro-dev-overlay-card');
+ const integrationComponent = document.createElement('astro-dev-toolbar-card');
integrationComponent.link = integration.homepageUrl;
const integrationContainer = document.createElement('div');
@@ -402,7 +402,7 @@ export default {
img.alt = integration.title;
integrationImage.append(img);
} else {
- const icon = document.createElement('astro-dev-overlay-icon');
+ const icon = document.createElement('astro-dev-toolbar-icon');
icon.icon = iconForIntegration(integration);
integrationImage.append(icon);
integrationImage.style.setProperty(
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 515b85b71d93..51d63f7ab42c 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
@@ -79,7 +79,7 @@ export default {
font-size: 22px;
}
- astro-dev-overlay-icon {
+ astro-dev-toolbar-icon {
width: 1em;
height: 1em;
padding: 8px;
@@ -89,7 +89,7 @@ export default {
}
- No issues detected.
+ No issues detected.
`
);
@@ -106,7 +106,7 @@ export default {
const noAuditBlock = canvas.getElementById('no-audit');
if (noAuditBlock) {
const devOverlayRect = document
- .querySelector('astro-dev-overlay')
+ .querySelector('astro-dev-toolbar')
?.shadowRoot.querySelector('#dev-overlay')
?.getBoundingClientRect();
@@ -145,7 +145,7 @@ export default {
}
function buildAuditTooltip(rule: AuditRule, element: Element) {
- const tooltip = document.createElement('astro-dev-overlay-tooltip');
+ const tooltip = document.createElement('astro-dev-toolbar-tooltip');
tooltip.sections = [
{
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 15d18d161544..3a36daf41f7f 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts
@@ -18,7 +18,7 @@ const settingsRows = [
settingKey: 'disablePluginNotification',
changeEvent: (evt: Event) => {
if (evt.currentTarget instanceof HTMLInputElement) {
- const devOverlay = document.querySelector('astro-dev-overlay');
+ const devOverlay = document.querySelector('astro-dev-toolbar');
if (devOverlay) {
devOverlay.setNotificationVisible(!evt.currentTarget.checked);
@@ -53,7 +53,7 @@ export default {
function createSettingsWindow() {
const windowElement = createWindowElement(
`
@@ -146,7 +146,7 @@ export default {
switch (setting.input) {
case 'checkbox': {
- const astroToggle = document.createElement('astro-dev-overlay-toggle');
+ const astroToggle = document.createElement('astro-dev-toolbar-toggle');
astroToggle.input.addEventListener('change', setting.changeEvent);
astroToggle.input.checked = settings.config[setting.settingKey];
label.append(astroToggle);
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 218ad310c0fd..9dad2b0f597c 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
@@ -2,7 +2,7 @@ import type { DevOverlayHighlight } from '../../ui-library/highlight.js';
import type { Icon } from '../../ui-library/icons.js';
export function createHighlight(rect: DOMRect, icon?: Icon) {
- const highlight = document.createElement('astro-dev-overlay-highlight');
+ const highlight = document.createElement('astro-dev-toolbar-highlight');
if (icon) highlight.icon = icon;
highlight.tabIndex = 0;
diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts
index 7b152cc5514a..fb107e19c802 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts
@@ -1,5 +1,5 @@
export function createWindowElement(content: string) {
- const windowElement = document.createElement('astro-dev-overlay-window');
+ const windowElement = document.createElement('astro-dev-toolbar-window');
windowElement.innerHTML = content;
return 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 56934d4e7e24..ed1be3edead5 100644
--- a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
@@ -48,7 +48,7 @@ export default {
font-size: 22px;
}
- astro-dev-overlay-icon {
+ astro-dev-toolbar-icon {
width: 1em;
height: 1em;
padding: 8px;
@@ -58,7 +58,7 @@ export default {
}
- No islands detected.
+ No islands detected.
`
);
@@ -111,7 +111,7 @@ export default {
}
function buildIslandTooltip(island: HTMLElement) {
- const tooltip = document.createElement('astro-dev-overlay-tooltip');
+ const tooltip = document.createElement('astro-dev-toolbar-tooltip');
tooltip.sections = [];
const islandProps = island.getAttribute('props')
diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts
index 7c39fdc1d64e..f2bd75d70269 100644
--- a/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts
@@ -72,7 +72,8 @@ export class DevOverlayButton extends HTMLElement {
border-color: rgba(249, 196, 215, 0.33);
}
- ::slotted(astro-dev-overlay-icon) {
+ ::slotted(astro-dev-overlay-icon),
+ ::slotted(astro-dev-toolbar-icon) {
display: inline-block;
height: 1em;
width: 1em;
diff --git a/packages/astro/src/vite-plugin-astro-server/route.ts b/packages/astro/src/vite-plugin-astro-server/route.ts
index 510658345ea1..e677a81a745d 100644
--- a/packages/astro/src/vite-plugin-astro-server/route.ts
+++ b/packages/astro/src/vite-plugin-astro-server/route.ts
@@ -401,7 +401,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
if (
settings.config.devOverlay.enabled &&
- (await settings.preferences.get('devOverlay.enabled'))
+ (await settings.preferences.get('devToolbar.enabled'))
) {
scripts.add({
props: {
diff --git a/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts b/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts
index 5c3aabe5ac6d..201e6aac63f5 100644
--- a/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts
+++ b/packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts
@@ -16,7 +16,7 @@ export default function astroDevOverlay({ settings }: AstroPluginOptions): vite.
if (id === resolvedVirtualModuleId) {
return `
export const loadDevOverlayPlugins = async () => {
- return [${settings.devOverlayPlugins
+ return [${settings.devToolbarApps
.map((plugin) => `(await import('${plugin}')).default`)
.join(',')}];
};