Skip to content

Commit 47604bd

Browse files
matthewpmatthewp
authoredDec 1, 2023
Rename Dev Overlay to Dev Toolbar (#9271)
* Add more dev overlay tests * Rename Dev Overlay to Dev Toolbar * Add config option and preferences * Fix build * Alias the event names * Add changeset
·
create-astro@4.11.1astro@4.0.0-beta.4
1 parent 5773e67 commit 47604bd

File tree

20 files changed

+275
-82
lines changed

20 files changed

+275
-82
lines changed
 

‎.changeset/lemon-crews-juggle.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'astro': major
3+
---
4+
5+
Renames Dev Overlay to Dev Toolbar
6+
7+
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.
8+
9+
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.

‎packages/astro/e2e/dev-overlay.test.js

+102-16
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@ test.describe('Dev Overlay', () => {
1919
test('dev overlay exists in the page', async ({ page, astro }) => {
2020
await page.goto(astro.resolveUrl('/'));
2121

22-
const devOVerlay = page.locator('astro-dev-overlay');
22+
const devOVerlay = page.locator('astro-dev-toolbar');
2323
await expect(devOVerlay).toHaveCount(1);
2424
});
2525

2626
test('shows plugin name on hover', async ({ page, astro }) => {
2727
await page.goto(astro.resolveUrl('/'));
2828

29-
const overlay = page.locator('astro-dev-overlay');
29+
const overlay = page.locator('astro-dev-toolbar');
3030
const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
3131
const pluginButtonTooltip = pluginButton.locator('.item-tooltip');
3232
await pluginButton.hover();
@@ -37,14 +37,14 @@ test.describe('Dev Overlay', () => {
3737
test('can open Astro plugin', async ({ page, astro }) => {
3838
await page.goto(astro.resolveUrl('/'));
3939

40-
const overlay = page.locator('astro-dev-overlay');
40+
const overlay = page.locator('astro-dev-toolbar');
4141
const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
4242
await pluginButton.click();
4343

4444
const astroPluginCanvas = overlay.locator(
45-
'astro-dev-overlay-plugin-canvas[data-plugin-id="astro"]'
45+
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]'
4646
);
47-
const astroWindow = astroPluginCanvas.locator('astro-dev-overlay-window');
47+
const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window');
4848
await expect(astroWindow).toHaveCount(1);
4949
await expect(astroWindow).toBeVisible();
5050

@@ -56,18 +56,18 @@ test.describe('Dev Overlay', () => {
5656
test('xray shows highlights and tooltips', async ({ page, astro }) => {
5757
await page.goto(astro.resolveUrl('/'));
5858

59-
const overlay = page.locator('astro-dev-overlay');
59+
const overlay = page.locator('astro-dev-toolbar');
6060
const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]');
6161
await pluginButton.click();
6262

6363
const xrayCanvas = overlay.locator(
64-
'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:xray"]'
64+
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]'
6565
);
66-
const xrayHighlight = xrayCanvas.locator('astro-dev-overlay-highlight');
66+
const xrayHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight');
6767
await expect(xrayHighlight).toBeVisible();
6868

6969
await xrayHighlight.hover();
70-
const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-overlay-tooltip');
70+
const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-toolbar-tooltip');
7171
await expect(xrayHighlightTooltip).toBeVisible();
7272

7373
// Toggle plugin off
@@ -76,21 +76,41 @@ test.describe('Dev Overlay', () => {
7676
await expect(xrayHighlightTooltip).not.toBeVisible();
7777
});
7878

79+
test('xray shows no islands message when there are none', async ({ page, astro }) => {
80+
await page.goto(astro.resolveUrl('/xray-no-islands'));
81+
82+
const overlay = page.locator('astro-dev-toolbar');
83+
const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]');
84+
await pluginButton.click();
85+
86+
const xrayCanvas = overlay.locator(
87+
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]'
88+
);
89+
const auditHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight');
90+
await expect(auditHighlight).not.toBeVisible();
91+
92+
const xrayWindow = xrayCanvas.locator('astro-dev-toolbar-window');
93+
await expect(xrayWindow).toHaveCount(1);
94+
await expect(xrayWindow).toBeVisible();
95+
96+
await expect(xrayWindow.locator('astro-dev-toolbar-icon[icon=lightbulb]')).toBeVisible();
97+
});
98+
7999
test('audit shows higlights and tooltips', async ({ page, astro }) => {
80100
await page.goto(astro.resolveUrl('/'));
81101

82-
const overlay = page.locator('astro-dev-overlay');
102+
const overlay = page.locator('astro-dev-toolbar');
83103
const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
84104
await pluginButton.click();
85105

86106
const auditCanvas = overlay.locator(
87-
'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:audit"]'
107+
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
88108
);
89-
const auditHighlight = auditCanvas.locator('astro-dev-overlay-highlight');
109+
const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight');
90110
await expect(auditHighlight).toBeVisible();
91111

92112
await auditHighlight.hover();
93-
const auditHighlightTooltip = auditHighlight.locator('astro-dev-overlay-tooltip');
113+
const auditHighlightTooltip = auditHighlight.locator('astro-dev-toolbar-tooltip');
94114
await expect(auditHighlightTooltip).toBeVisible();
95115

96116
// Toggle plugin off
@@ -99,22 +119,88 @@ test.describe('Dev Overlay', () => {
99119
await expect(auditHighlightTooltip).not.toBeVisible();
100120
});
101121

122+
test('audit shows no issues message when there are no issues', async ({ page, astro }) => {
123+
await page.goto(astro.resolveUrl('/audit-no-warning'));
124+
125+
const overlay = page.locator('astro-dev-toolbar');
126+
const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
127+
await pluginButton.click();
128+
129+
const auditCanvas = overlay.locator(
130+
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
131+
);
132+
const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight');
133+
await expect(auditHighlight).not.toBeVisible();
134+
135+
const auditWindow = auditCanvas.locator('astro-dev-toolbar-window');
136+
await expect(auditWindow).toHaveCount(1);
137+
await expect(auditWindow).toBeVisible();
138+
139+
await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible();
140+
});
141+
102142
test('can open Settings plugin', async ({ page, astro }) => {
103143
await page.goto(astro.resolveUrl('/'));
104144

105-
const overlay = page.locator('astro-dev-overlay');
145+
const overlay = page.locator('astro-dev-toolbar');
106146
const pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
107147
await pluginButton.click();
108148

109149
const settingsPluginCanvas = overlay.locator(
110-
'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:settings"]'
150+
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
111151
);
112-
const settingsWindow = settingsPluginCanvas.locator('astro-dev-overlay-window');
152+
const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
113153
await expect(settingsWindow).toHaveCount(1);
114154
await expect(settingsWindow).toBeVisible();
115155

116156
// Toggle plugin off
117157
await pluginButton.click();
118158
await expect(settingsWindow).not.toBeVisible();
119159
});
160+
161+
test('Opening a plugin closes the currently opened plugin', async ({ page, astro }) => {
162+
await page.goto(astro.resolveUrl('/'));
163+
164+
const overlay = page.locator('astro-dev-toolbar');
165+
let pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
166+
await pluginButton.click();
167+
168+
const settingsPluginCanvas = overlay.locator(
169+
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
170+
);
171+
const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
172+
await expect(settingsWindow).toHaveCount(1);
173+
await expect(settingsWindow).toBeVisible();
174+
175+
// Click the astro plugin
176+
pluginButton = overlay.locator('button[data-plugin-id="astro"]');
177+
await pluginButton.click();
178+
179+
const astroPluginCanvas = overlay.locator(
180+
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]'
181+
);
182+
const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window');
183+
await expect(astroWindow).toHaveCount(1);
184+
await expect(astroWindow).toBeVisible();
185+
186+
await expect(settingsWindow).not.toBeVisible();
187+
});
188+
189+
test('Settings plugin contains message on disabling the overlay', async ({ page, astro }) => {
190+
await page.goto(astro.resolveUrl('/'));
191+
192+
const overlay = page.locator('astro-dev-toolbar');
193+
let pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
194+
await pluginButton.click();
195+
196+
const settingsPluginCanvas = overlay.locator(
197+
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
198+
);
199+
const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
200+
await expect(settingsWindow).toHaveCount(1);
201+
await expect(settingsWindow).toBeVisible();
202+
203+
const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide overlay' });
204+
await expect(hideOverlay).toBeVisible();
205+
});
120206
});

‎packages/astro/e2e/fixtures/dev-overlay/src/pages/audit-no-warning.astro

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
3+
---
4+
5+
<img src="https://astro.build/assets/press/astro-logo-dark.svg" alt="Astro logo" />

‎packages/astro/e2e/fixtures/dev-overlay/src/pages/xray-no-islands.astro

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
3+
---
4+
5+
<div>no islands on this page</div>

‎packages/astro/src/@types/astro.ts

+46-1
Original file line numberDiff line numberDiff line change
@@ -1159,6 +1159,7 @@ export interface AstroUserConfig {
11591159
* @docs
11601160
* @kind heading
11611161
* @name Dev Overlay Options
1162+
* @deprecated Use `devToolbar` instead.
11621163
*/
11631164
devOverlay?: {
11641165
/**
@@ -1183,6 +1184,34 @@ export interface AstroUserConfig {
11831184
defaultState: 'minimized' | 'expanded';
11841185
};
11851186

1187+
/**
1188+
* @docs
1189+
* @kind heading
1190+
* @name Dev Toolbar Options
1191+
*/
1192+
devToolbar?: {
1193+
/**
1194+
* @docs
1195+
* @name devToolbar.enabled
1196+
* @type {boolean}
1197+
* @default `true`
1198+
* @description
1199+
* 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.
1200+
*
1201+
* 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`.
1202+
*/
1203+
enabled: boolean;
1204+
/**
1205+
* @docs
1206+
* @name devToolbar.defaultState
1207+
* @type {'minimized' | 'expanded'}
1208+
* @default `minimized`
1209+
* @description
1210+
* Whether the Dev Toolbar should be expanded or minimized by default.
1211+
*/
1212+
defaultState: 'minimized' | 'expanded';
1213+
};
1214+
11861215
/**
11871216
* @docs
11881217
* @kind heading
@@ -1716,7 +1745,7 @@ export interface AstroSettings {
17161745
* Map of directive name (e.g. `load`) to the directive script code
17171746
*/
17181747
clientDirectives: Map<string, string>;
1719-
devOverlayPlugins: string[];
1748+
devToolbarApps: string[];
17201749
middlewares: { pre: string[]; post: string[] };
17211750
tsConfig: TSConfig | undefined;
17221751
tsConfigPath: string | undefined;
@@ -2292,7 +2321,11 @@ export interface AstroIntegration {
22922321
injectScript: (stage: InjectedScriptStage, content: string) => void;
22932322
injectRoute: (injectRoute: InjectedRoute) => void;
22942323
addClientDirective: (directive: ClientDirectiveConfig) => void;
2324+
/**
2325+
* @deprecated Use `addDevToolbarApp` instead.
2326+
*/
22952327
addDevOverlayPlugin: (entrypoint: string) => void;
2328+
addDevToolbarApp: (entrypoint: string) => void;
22962329
addMiddleware: (mid: AstroIntegrationMiddleware) => void;
22972330
logger: AstroIntegrationLogger;
22982331
// TODO: Add support for `injectElement()` for full HTML element injection, not just scripts.
@@ -2563,6 +2596,18 @@ export type DevOverlayMetadata = Window &
25632596

25642597
declare global {
25652598
interface HTMLElementTagNameMap {
2599+
'astro-dev-toolbar': AstroDevOverlay;
2600+
'astro-dev-toolbar-window': DevOverlayWindow;
2601+
'astro-dev-toolbar-plugin-canvas': DevOverlayCanvas;
2602+
'astro-dev-toolbar-tooltip': DevOverlayTooltip;
2603+
'astro-dev-toolbar-highlight': DevOverlayHighlight;
2604+
'astro-dev-toolbar-toggle': DevOverlayToggle;
2605+
'astro-dev-toolbar-badge': DevOverlayBadge;
2606+
'astro-dev-toolbar-button': DevOverlayButton;
2607+
'astro-dev-toolbar-icon': DevOverlayIcon;
2608+
'astro-dev-toolbar-card': DevOverlayCard;
2609+
2610+
// Deprecated names
25662611
'astro-dev-overlay': AstroDevOverlay;
25672612
'astro-dev-overlay-window': DevOverlayWindow;
25682613
'astro-dev-overlay-plugin-canvas': DevOverlayCanvas;

‎packages/astro/src/core/config/schema.ts

+12
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ const ASTRO_CONFIG_DEFAULTS = {
4545
enabled: true,
4646
defaultState: 'minimized',
4747
},
48+
devToolbar: {
49+
enabled: true,
50+
defaultState: 'minimized',
51+
},
4852
compressHTML: true,
4953
server: {
5054
host: false,
@@ -236,6 +240,14 @@ export const AstroConfigSchema = z.object({
236240
.default(ASTRO_CONFIG_DEFAULTS.devOverlay.defaultState),
237241
})
238242
.default(ASTRO_CONFIG_DEFAULTS.devOverlay),
243+
devToolbar: z
244+
.object({
245+
enabled: z.boolean().default(ASTRO_CONFIG_DEFAULTS.devToolbar.enabled),
246+
defaultState: z
247+
.enum(['minimized', 'expanded'])
248+
.default(ASTRO_CONFIG_DEFAULTS.devToolbar.defaultState),
249+
})
250+
.default(ASTRO_CONFIG_DEFAULTS.devToolbar),
239251
markdown: z
240252
.object({
241253
syntaxHighlight: z

‎packages/astro/src/core/config/settings.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export function createBaseSettings(config: AstroConfig): AstroSettings {
102102
clientDirectives: getDefaultClientDirectives(),
103103
middlewares: { pre: [], post: [] },
104104
watchFiles: [],
105-
devOverlayPlugins: [],
105+
devToolbarApps: [],
106106
timer: new AstroTimer(),
107107
};
108108
}

‎packages/astro/src/integrations/index.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,11 @@ export async function runHookConfigSetup({
141141
updatedSettings.watchFiles.push(path instanceof URL ? fileURLToPath(path) : path);
142142
},
143143
addDevOverlayPlugin: (entrypoint) => {
144-
updatedSettings.devOverlayPlugins.push(entrypoint);
144+
// TODO add a deprecation warning in Astro 5.
145+
hooks.addDevToolbarApp(entrypoint);
146+
},
147+
addDevToolbarApp: (entrypoint) => {
148+
updatedSettings.devToolbarApps.push(entrypoint);
145149
},
146150
addClientDirective: ({ name, entrypoint }) => {
147151
if (updatedSettings.clientDirectives.has(name) || addedClientDirectives.has(name)) {

‎packages/astro/src/preferences/defaults.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const DEFAULT_PREFERENCES = {
2-
devOverlay: {
2+
devToolbar: {
33
/** Specifies whether the user has the Dev Overlay enabled */
44
enabled: true,
55
},

‎packages/astro/src/runtime/client/dev-overlay/entrypoint.ts

+31-14
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,31 @@ document.addEventListener('DOMContentLoaded', async () => {
3434
]);
3535

3636
// Register custom elements
37-
customElements.define('astro-dev-overlay', AstroDevOverlay);
38-
customElements.define('astro-dev-overlay-window', DevOverlayWindow);
39-
customElements.define('astro-dev-overlay-plugin-canvas', DevOverlayCanvas);
40-
customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip);
41-
customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight);
42-
customElements.define('astro-dev-overlay-card', DevOverlayCard);
43-
customElements.define('astro-dev-overlay-toggle', DevOverlayToggle);
44-
customElements.define('astro-dev-overlay-button', DevOverlayButton);
45-
customElements.define('astro-dev-overlay-badge', DevOverlayBadge);
46-
customElements.define('astro-dev-overlay-icon', DevOverlayIcon);
47-
48-
overlay = document.createElement('astro-dev-overlay');
37+
customElements.define('astro-dev-toolbar', AstroDevOverlay);
38+
customElements.define('astro-dev-toolbar-window', DevOverlayWindow);
39+
customElements.define('astro-dev-toolbar-plugin-canvas', DevOverlayCanvas);
40+
customElements.define('astro-dev-toolbar-tooltip', DevOverlayTooltip);
41+
customElements.define('astro-dev-toolbar-highlight', DevOverlayHighlight);
42+
customElements.define('astro-dev-toolbar-card', DevOverlayCard);
43+
customElements.define('astro-dev-toolbar-toggle', DevOverlayToggle);
44+
customElements.define('astro-dev-toolbar-button', DevOverlayButton);
45+
customElements.define('astro-dev-toolbar-badge', DevOverlayBadge);
46+
customElements.define('astro-dev-toolbar-icon', DevOverlayIcon);
47+
48+
// Add deprecated names
49+
const deprecated = (Parent: any) => class extends Parent{};
50+
customElements.define('astro-dev-overlay', deprecated(AstroDevOverlay));
51+
customElements.define('astro-dev-overlay-window', deprecated(DevOverlayWindow));
52+
customElements.define('astro-dev-overlay-plugin-canvas', deprecated(DevOverlayCanvas));
53+
customElements.define('astro-dev-overlay-tooltip', deprecated(DevOverlayTooltip));
54+
customElements.define('astro-dev-overlay-highlight', deprecated(DevOverlayHighlight));
55+
customElements.define('astro-dev-overlay-card', deprecated(DevOverlayCard));
56+
customElements.define('astro-dev-overlay-toggle', deprecated(DevOverlayToggle));
57+
customElements.define('astro-dev-overlay-button', deprecated(DevOverlayButton));
58+
customElements.define('astro-dev-overlay-badge', deprecated(DevOverlayBadge));
59+
customElements.define('astro-dev-overlay-icon', deprecated(DevOverlayIcon));
60+
61+
overlay = document.createElement('astro-dev-toolbar');
4962

5063
const preparePlugin = (
5164
pluginDefinition: DevOverlayPluginDefinition,
@@ -76,14 +89,18 @@ document.addEventListener('DOMContentLoaded', async () => {
7689
target.querySelector('.notification')?.toggleAttribute('data-active', newState);
7790
});
7891

79-
eventTarget.addEventListener('toggle-plugin', async (evt) => {
92+
const onToggleApp = async (evt: Event) => {
8093
let newState = undefined;
8194
if (evt instanceof CustomEvent) {
8295
newState = evt.detail.state ?? true;
8396
}
8497

8598
await overlay.setPluginStatus(plugin, newState);
86-
});
99+
};
100+
101+
eventTarget.addEventListener('toggle-app', onToggleApp);
102+
// Deprecated
103+
eventTarget.addEventListener('toggle-plugin', onToggleApp);
87104

88105
return plugin;
89106
};

‎packages/astro/src/runtime/client/dev-overlay/overlay.ts

+23-14
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ export type DevOverlayPlugin = DevOverlayPluginDefinition & {
1515
};
1616
eventTarget: EventTarget;
1717
};
18-
const WS_EVENT_NAME = 'astro-dev-overlay';
18+
const WS_EVENT_NAME = 'astro-dev-toolbar';
19+
const WS_EVENT_NAME_DEPRECATED = 'astro-dev-overlay';
1920
const HOVER_DELAY = 2 * 1000;
2021

2122
export class AstroDevOverlay extends HTMLElement {
@@ -43,12 +44,12 @@ export class AstroDevOverlay extends HTMLElement {
4344
/* Important! Reset all inherited styles to initial */
4445
all: initial;
4546
z-index: 999999;
46-
view-transition-name: astro-dev-overlay;
47+
view-transition-name: astro-dev-toolbar;
4748
display: contents;
4849
}
4950
50-
::view-transition-old(astro-dev-overlay),
51-
::view-transition-new(astro-dev-overlay) {
51+
::view-transition-old(astro-dev-toolbar),
52+
::view-transition-new(astro-dev-toolbar) {
5253
animation: none;
5354
}
5455
@@ -273,7 +274,7 @@ export class AstroDevOverlay extends HTMLElement {
273274
// Create plugin canvases
274275
this.plugins.forEach(async (plugin) => {
275276
if (settings.config.verbose) console.log(`Creating plugin canvas for ${plugin.id}`);
276-
const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas');
277+
const pluginCanvas = document.createElement('astro-dev-toolbar-plugin-canvas');
277278
pluginCanvas.dataset.pluginId = plugin.id;
278279
this.shadowRoot?.append(pluginCanvas);
279280
});
@@ -384,6 +385,7 @@ export class AstroDevOverlay extends HTMLElement {
384385

385386
if (import.meta.hot) {
386387
import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:initialized`);
388+
import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${plugin.id}:initialized`);
387389
}
388390
} catch (e) {
389391
console.error(`Failed to init plugin ${plugin.id}, error: ${e}`);
@@ -404,7 +406,7 @@ export class AstroDevOverlay extends HTMLElement {
404406

405407
getPluginCanvasById(id: string) {
406408
return this.shadowRoot.querySelector<HTMLElement>(
407-
`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`
409+
`astro-dev-toolbar-plugin-canvas[data-plugin-id="${id}"]`
408410
);
409411
}
410412

@@ -462,17 +464,24 @@ export class AstroDevOverlay extends HTMLElement {
462464
pluginCanvas.removeAttribute('data-active');
463465
}
464466

465-
plugin.eventTarget.dispatchEvent(
466-
new CustomEvent('plugin-toggled', {
467-
detail: {
468-
state: plugin.active,
469-
plugin,
470-
},
471-
})
472-
);
467+
[
468+
'app-toggled',
469+
// Deprecated
470+
'plugin-toggled'
471+
].forEach(eventName => {
472+
plugin.eventTarget.dispatchEvent(
473+
new CustomEvent(eventName, {
474+
detail: {
475+
state: plugin.active,
476+
plugin,
477+
},
478+
})
479+
);
480+
});
473481

474482
if (import.meta.hot) {
475483
import.meta.hot.send(`${WS_EVENT_NAME}:${plugin.id}:toggled`, { state: plugin.active });
484+
import.meta.hot.send(`${WS_EVENT_NAME_DEPRECATED}:${plugin.id}:toggled`, { state: plugin.active });
476485
}
477486

478487
return true;

‎packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts

+17-17
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default {
8787
justify-content: center;
8888
}
8989
90-
#buttons-container astro-dev-overlay-card {
90+
#buttons-container astro-dev-toolbar-card {
9191
flex: 1;
9292
}
9393
@@ -222,7 +222,7 @@ export default {
222222
height: 1px;
223223
}
224224
225-
#integration-list astro-dev-overlay-card, .integration-skeleton {
225+
#integration-list astro-dev-toolbar-card, .integration-skeleton {
226226
min-width: 240px;
227227
height: 160px;
228228
}
@@ -242,7 +242,7 @@ export default {
242242
}
243243
}
244244
245-
#integration-list astro-dev-overlay-card .integration-image {
245+
#integration-list astro-dev-toolbar-card .integration-image {
246246
width: 40px;
247247
height: 40px;
248248
background-color: var(--integration-image-background, white);
@@ -253,12 +253,12 @@ export default {
253253
margin-bottom: 8px;
254254
}
255255
256-
#integration-list astro-dev-overlay-card img {
256+
#integration-list astro-dev-toolbar-card img {
257257
width: 24px;
258258
height: 24px;
259259
}
260260
261-
#integration-list astro-dev-overlay-card astro-dev-overlay-icon {
261+
#integration-list astro-dev-toolbar-card astro-dev-toolbar-icon {
262262
width: 24px;
263263
height: 24px;
264264
color: #fff;
@@ -287,26 +287,26 @@ export default {
287287
color: rgba(145, 152, 173, 1);
288288
}
289289
290-
#links astro-dev-overlay-icon {
290+
#links astro-dev-toolbar-icon {
291291
width: 1.5em;
292292
height: 1.5em;
293293
display: block;
294294
}
295295
296-
#integration-list astro-dev-overlay-card svg {
296+
#integration-list astro-dev-toolbar-card svg {
297297
width: 24px;
298298
height: 24px;
299299
vertical-align: bottom;
300300
}
301301
302-
#integration-list astro-dev-overlay-card h3 {
302+
#integration-list astro-dev-toolbar-card h3 {
303303
margin: 0;
304304
margin-bottom: 8px;
305305
color: white;
306306
white-space: nowrap;
307307
}
308308
309-
#integration-list astro-dev-overlay-card p {
309+
#integration-list astro-dev-toolbar-card p {
310310
font-size: 14px;
311311
}
312312
@@ -320,11 +320,11 @@ export default {
320320
<header>
321321
<section>
322322
${astroLogo}
323-
<astro-dev-overlay-badge badge-style="gray" size="large">${
323+
<astro-dev-toolbar-badge badge-style="gray" size="large">${
324324
(window as DevOverlayMetadata).__astro_dev_overlay__.version
325-
}</astro-dev-overlay-badge>
325+
}</astro-dev-toolbar-badge>
326326
</section>
327-
<astro-dev-overlay-button id="copy-debug-button">Copy debug info <astro-dev-overlay-icon icon="copy" /></astro-dev-overlay-button>
327+
<astro-dev-toolbar-button id="copy-debug-button">Copy debug info <astro-dev-toolbar-icon icon="copy" /></astro-dev-toolbar-button>
328328
</header>
329329
<hr />
330330
@@ -345,9 +345,9 @@ export default {
345345
${links
346346
.map(
347347
(link) =>
348-
`<a href="${link.link}" target="_blank"><astro-dev-overlay-icon ${
348+
`<a href="${link.link}" target="_blank"><astro-dev-toolbar-icon ${
349349
isDefinedIcon(link.icon) ? `icon="${link.icon}">` : `>${link.icon}`
350-
}</astro-dev-overlay-icon>${link.name}</a>`
350+
}</astro-dev-toolbar-icon>${link.name}</a>`
351351
)
352352
.join('')}
353353
</section>
@@ -376,7 +376,7 @@ export default {
376376
const copyDebugButton = canvas.querySelector<HTMLButtonElement>('#copy-debug-button');
377377
if (!copyDebugButton) return;
378378

379-
copyDebugButton.innerHTML = 'Copy debug info <astro-dev-overlay-icon icon="copy" />';
379+
copyDebugButton.innerHTML = 'Copy debug info <astro-dev-toolbar-icon icon="copy" />';
380380
}
381381

382382
function refreshIntegrationList() {
@@ -387,7 +387,7 @@ export default {
387387

388388
const fragment = document.createDocumentFragment();
389389
for (const integration of integrationData.data) {
390-
const integrationComponent = document.createElement('astro-dev-overlay-card');
390+
const integrationComponent = document.createElement('astro-dev-toolbar-card');
391391
integrationComponent.link = integration.homepageUrl;
392392

393393
const integrationContainer = document.createElement('div');
@@ -402,7 +402,7 @@ export default {
402402
img.alt = integration.title;
403403
integrationImage.append(img);
404404
} else {
405-
const icon = document.createElement('astro-dev-overlay-icon');
405+
const icon = document.createElement('astro-dev-toolbar-icon');
406406
icon.icon = iconForIntegration(integration);
407407
integrationImage.append(icon);
408408
integrationImage.style.setProperty(

‎packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default {
7979
font-size: 22px;
8080
}
8181
82-
astro-dev-overlay-icon {
82+
astro-dev-toolbar-icon {
8383
width: 1em;
8484
height: 1em;
8585
padding: 8px;
@@ -89,7 +89,7 @@ export default {
8989
}
9090
</style>
9191
<header>
92-
<h1><astro-dev-overlay-icon icon="check-circle"></astro-dev-overlay-icon>No issues detected.</h1>
92+
<h1><astro-dev-toolbar-icon icon="check-circle"></astro-dev-toolbar-icon>No issues detected.</h1>
9393
</header>
9494
`
9595
);
@@ -106,7 +106,7 @@ export default {
106106
const noAuditBlock = canvas.getElementById('no-audit');
107107
if (noAuditBlock) {
108108
const devOverlayRect = document
109-
.querySelector('astro-dev-overlay')
109+
.querySelector('astro-dev-toolbar')
110110
?.shadowRoot.querySelector('#dev-overlay')
111111
?.getBoundingClientRect();
112112

@@ -145,7 +145,7 @@ export default {
145145
}
146146

147147
function buildAuditTooltip(rule: AuditRule, element: Element) {
148-
const tooltip = document.createElement('astro-dev-overlay-tooltip');
148+
const tooltip = document.createElement('astro-dev-toolbar-tooltip');
149149

150150
tooltip.sections = [
151151
{

‎packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const settingsRows = [
1818
settingKey: 'disablePluginNotification',
1919
changeEvent: (evt: Event) => {
2020
if (evt.currentTarget instanceof HTMLInputElement) {
21-
const devOverlay = document.querySelector('astro-dev-overlay');
21+
const devOverlay = document.querySelector('astro-dev-toolbar');
2222

2323
if (devOverlay) {
2424
devOverlay.setNotificationVisible(!evt.currentTarget.checked);
@@ -57,7 +57,7 @@ export default {
5757
function createSettingsWindow() {
5858
const windowElement = createWindowElement(
5959
`<style>
60-
:host astro-dev-overlay-window {
60+
:host astro-dev-toolbar-window {
6161
height: 480px;
6262
6363
--color-purple: rgba(224, 204, 250, 1);
@@ -98,7 +98,7 @@ export default {
9898
font-size: 22px;
9999
}
100100
101-
astro-dev-overlay-icon {
101+
astro-dev-toolbar-icon {
102102
width: 1em;
103103
height: 1em;
104104
display: block;
@@ -123,7 +123,7 @@ export default {
123123
}
124124
</style>
125125
<header>
126-
<h1><astro-dev-overlay-icon icon="gear"></astro-dev-overlay-icon> Settings</h1>
126+
<h1><astro-dev-toolbar-icon icon="gear"></astro-dev-toolbar-icon> Settings</h1>
127127
</header>
128128
129129
<hr />
@@ -150,7 +150,7 @@ export default {
150150

151151
switch (setting.input) {
152152
case 'checkbox': {
153-
const astroToggle = document.createElement('astro-dev-overlay-toggle');
153+
const astroToggle = document.createElement('astro-dev-toolbar-toggle');
154154
astroToggle.input.addEventListener('change', setting.changeEvent);
155155
astroToggle.input.checked = settings.config[setting.settingKey];
156156
label.append(astroToggle);

‎packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { DevOverlayHighlight } from '../../ui-library/highlight.js';
22
import type { Icon } from '../../ui-library/icons.js';
33

44
export function createHighlight(rect: DOMRect, icon?: Icon) {
5-
const highlight = document.createElement('astro-dev-overlay-highlight');
5+
const highlight = document.createElement('astro-dev-toolbar-highlight');
66
if (icon) highlight.icon = icon;
77

88
highlight.tabIndex = 0;

‎packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export function createWindowElement(content: string) {
2-
const windowElement = document.createElement('astro-dev-overlay-window');
2+
const windowElement = document.createElement('astro-dev-toolbar-window');
33
windowElement.innerHTML = content;
44
return windowElement;
55
}

‎packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default {
4848
font-size: 22px;
4949
}
5050
51-
astro-dev-overlay-icon {
51+
astro-dev-toolbar-icon {
5252
width: 1em;
5353
height: 1em;
5454
padding: 8px;
@@ -58,7 +58,7 @@ export default {
5858
}
5959
</style>
6060
<header>
61-
<h1><astro-dev-overlay-icon icon="lightbulb"></astro-dev-overlay-icon>No islands detected.</h1>
61+
<h1><astro-dev-toolbar-icon icon="lightbulb"></astro-dev-toolbar-icon>No islands detected.</h1>
6262
</header>
6363
`
6464
);
@@ -111,7 +111,7 @@ export default {
111111
}
112112

113113
function buildIslandTooltip(island: HTMLElement) {
114-
const tooltip = document.createElement('astro-dev-overlay-tooltip');
114+
const tooltip = document.createElement('astro-dev-toolbar-tooltip');
115115
tooltip.sections = [];
116116

117117
const islandProps = island.getAttribute('props')

‎packages/astro/src/runtime/client/dev-overlay/ui-library/button.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ export class DevOverlayButton extends HTMLElement {
7272
border-color: rgba(249, 196, 215, 0.33);
7373
}
7474
75-
::slotted(astro-dev-overlay-icon) {
75+
::slotted(astro-dev-overlay-icon),
76+
::slotted(astro-dev-toolbar-icon) {
7677
display: inline-block;
7778
height: 1em;
7879
width: 1em;

‎packages/astro/src/vite-plugin-astro-server/route.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -401,7 +401,7 @@ async function getScriptsAndStyles({ pipeline, filePath }: GetScriptsAndStylesPa
401401

402402
if (
403403
settings.config.devOverlay.enabled &&
404-
(await settings.preferences.get('devOverlay.enabled'))
404+
(await settings.preferences.get('devToolbar.enabled'))
405405
) {
406406
scripts.add({
407407
props: {

‎packages/astro/src/vite-plugin-dev-overlay/vite-plugin-dev-overlay.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default function astroDevOverlay({ settings }: AstroPluginOptions): vite.
1616
if (id === resolvedVirtualModuleId) {
1717
return `
1818
export const loadDevOverlayPlugins = async () => {
19-
return [${settings.devOverlayPlugins
19+
return [${settings.devToolbarApps
2020
.map((plugin) => `(await import('${plugin}')).default`)
2121
.join(',')}];
2222
};

0 commit comments

Comments
 (0)
Please sign in to comment.