refactor(toolbar): Rename every internal reference of overlay/plugins…

… to toolbar/apps

packages/astro/e2e/dev-overlay.test.js → packages/astro/e2e/dev-toolbar.test.js

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
 import { testFactory } from './test-utils.js';
 
 const test = testFactory({
-	root: './fixtures/dev-overlay/',
+	root: './fixtures/dev-toolbar/',
 });
 
 let devServer;
@@ -15,77 +15,71 @@ test.afterAll(async () => {
 	await devServer.stop();
 });
 
-test.describe('Dev Overlay', () => {
-	test('dev overlay exists in the page', async ({ page, astro }) => {
+test.describe('Dev Toolbar', () => {
+	test('dev toolbar exists in the page', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
 		const devToolbar = page.locator('astro-dev-toolbar');
 		await expect(devToolbar).toHaveCount(1);
 	});
 
-	test('shows plugin name on hover', async ({ page, astro }) => {
+	test('shows app name on hover', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
-		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();
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro"]');
+		const appButtonTooltip = appButton.locator('.item-tooltip');
+		await appButton.hover();
 
-		await expect(pluginButtonTooltip).toBeVisible();
+		await expect(appButtonTooltip).toBeVisible();
 	});
 
-	test('can open Astro plugin', async ({ page, astro }) => {
+	test('can open Astro app', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
-		const overlay = page.locator('astro-dev-toolbar');
-		const pluginButton = overlay.locator('button[data-plugin-id="astro"]');
-		await pluginButton.click();
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro"]');
+		await appButton.click();
 
-		const astroPluginCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]'
-		);
-		const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window');
+		const astroAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro"]');
+		const astroWindow = astroAppCanvas.locator('astro-dev-toolbar-window');
 		await expect(astroWindow).toHaveCount(1);
 		await expect(astroWindow).toBeVisible();
 
-		// Toggle plugin off
-		await pluginButton.click();
+		// Toggle app off
+		await appButton.click();
 		await expect(astroWindow).not.toBeVisible();
 	});
 
 	test('xray shows highlights and tooltips', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
-		const overlay = page.locator('astro-dev-toolbar');
-		const pluginButton = overlay.locator('button[data-plugin-id="astro:xray"]');
-		await pluginButton.click();
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:xray"]');
+		await appButton.click();
 
-		const xrayCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]'
-		);
+		const xrayCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:xray"]');
 		const xrayHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight');
 		await expect(xrayHighlight).toBeVisible();
 
 		await xrayHighlight.hover();
 		const xrayHighlightTooltip = xrayHighlight.locator('astro-dev-toolbar-tooltip');
 		await expect(xrayHighlightTooltip).toBeVisible();
 
-		// Toggle plugin off
-		await pluginButton.click();
+		// Toggle app off
+		await appButton.click();
 		await expect(xrayHighlight).not.toBeVisible();
 		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 toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:xray"]');
+		await appButton.click();
 
-		const xrayCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:xray"]'
-		);
+		const xrayCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:xray"]');
 		const auditHighlight = xrayCanvas.locator('astro-dev-toolbar-highlight');
 		await expect(auditHighlight).not.toBeVisible();
 
@@ -99,36 +93,32 @@ test.describe('Dev Overlay', () => {
 	test('audit shows higlights and tooltips', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
-		const overlay = page.locator('astro-dev-toolbar');
-		const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
-		await pluginButton.click();
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:audit"]');
+		await appButton.click();
 
-		const auditCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
-		);
+		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
 		const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight');
 		await expect(auditHighlight).toBeVisible();
 
 		await auditHighlight.hover();
 		const auditHighlightTooltip = auditHighlight.locator('astro-dev-toolbar-tooltip');
 		await expect(auditHighlightTooltip).toBeVisible();
 
-		// Toggle plugin off
-		await pluginButton.click();
+		// Toggle app off
+		await appButton.click();
 		await expect(auditHighlight).not.toBeVisible();
 		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 toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:audit"]');
+		await appButton.click();
 
-		const auditCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
-		);
+		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
 		const auditHighlight = auditCanvas.locator('astro-dev-toolbar-highlight');
 		await expect(auditHighlight).not.toBeVisible();
 
@@ -142,13 +132,11 @@ test.describe('Dev Overlay', () => {
 	test('adjusts tooltip position if off-screen', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/tooltip-position'));
 
-		const overlay = page.locator('astro-dev-toolbar');
-		const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
-		await pluginButton.click();
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:audit"]');
+		await appButton.click();
 
-		const auditCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
-		);
+		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
 		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
 		for (const highlight of await auditHighlights.all()) {
 			await expect(highlight).toBeVisible();
@@ -165,68 +153,66 @@ test.describe('Dev Overlay', () => {
 		}
 	});
 
-	test('can open Settings plugin', async ({ page, astro }) => {
+	test('can open Settings app', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
-		const overlay = page.locator('astro-dev-toolbar');
-		const pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]');
-		await pluginButton.click();
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:settings"]');
+		await appButton.click();
 
-		const settingsPluginCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
+		const settingsAppCanvas = toolbar.locator(
+			'astro-dev-toolbar-app-canvas[data-app-id="astro:settings"]'
 		);
-		const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
+		const settingsWindow = settingsAppCanvas.locator('astro-dev-toolbar-window');
 		await expect(settingsWindow).toHaveCount(1);
 		await expect(settingsWindow).toBeVisible();
 
-		// Toggle plugin off
-		await pluginButton.click();
+		// Toggle app off
+		await appButton.click();
 		await expect(settingsWindow).not.toBeVisible();
 	});
 
-	test('Opening a plugin closes the currently opened plugin', async ({ page, astro }) => {
+	test('Opening a app closes the currently opened app', 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 toolbar = page.locator('astro-dev-toolbar');
+		let appButton = toolbar.locator('button[data-app-id="astro:settings"]');
+		await appButton.click();
 
-		const settingsPluginCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
+		const settingsAppCanvas = toolbar.locator(
+			'astro-dev-toolbar-app-canvas[data-app-id="astro:settings"]'
 		);
-		const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
+		const settingsWindow = settingsAppCanvas.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();
+		// Click the astro app
+		appButton = toolbar.locator('button[data-app-id="astro"]');
+		await appButton.click();
 
-		const astroPluginCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro"]'
-		);
-		const astroWindow = astroPluginCanvas.locator('astro-dev-toolbar-window');
+		const astroAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro"]');
+		const astroWindow = astroAppCanvas.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 }) => {
+	test('Settings app contains message on disabling the toolbar', 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 toolbar = page.locator('astro-dev-toolbar');
+		let appButton = toolbar.locator('button[data-app-id="astro:settings"]');
+		await appButton.click();
 
-		const settingsPluginCanvas = overlay.locator(
-			'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:settings"]'
+		const settingsAppCanvas = toolbar.locator(
+			'astro-dev-toolbar-app-canvas[data-app-id="astro:settings"]'
 		);
-		const settingsWindow = settingsPluginCanvas.locator('astro-dev-toolbar-window');
+		const settingsWindow = settingsAppCanvas.locator('astro-dev-toolbar-window');
 		await expect(settingsWindow).toHaveCount(1);
 		await expect(settingsWindow).toBeVisible();
 
-		const hideOverlay = settingsWindow.getByRole('heading', { name: 'Hide toolbar' });
-		await expect(hideOverlay).toBeVisible();
+		const hideToolbar = settingsWindow.getByRole('heading', { name: 'Hide toolbar' });
+		await expect(hideToolbar).toBeVisible();
 	});
 });

packages/astro/e2e/fixtures/dev-overlay/package.json → packages/astro/e2e/fixtures/dev-toolbar/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@e2e/dev-overlay",
+  "name": "@e2e/dev-toolbar",
   "version": "0.0.0",
   "private": true,
   "dependencies": {

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

@@ -21,18 +21,18 @@ import type { TSConfig } from '../core/config/tsconfig.js';
 import type { AstroCookies } from '../core/cookies/index.js';
 import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger/core.js';
 import type { AstroPreferences } from '../preferences/index.js';
-import type { AstroDevOverlay, DevOverlayCanvas } from '../runtime/client/dev-overlay/overlay.js';
-import type { Icon } from '../runtime/client/dev-overlay/ui-library/icons.js';
+import type { AstroDevToolbar, DevToolbarCanvas } from '../runtime/client/dev-toolbar/toolbar.js';
+import type { Icon } from '../runtime/client/dev-toolbar/ui-library/icons.js';
 import type {
-	DevOverlayBadge,
-	DevOverlayButton,
-	DevOverlayCard,
-	DevOverlayHighlight,
-	DevOverlayIcon,
-	DevOverlayToggle,
-	DevOverlayTooltip,
-	DevOverlayWindow,
-} from '../runtime/client/dev-overlay/ui-library/index.js';
+	DevToolbarBadge,
+	DevToolbarButton,
+	DevToolbarCard,
+	DevToolbarHighlight,
+	DevToolbarIcon,
+	DevToolbarToggle,
+	DevToolbarTooltip,
+	DevToolbarWindow,
+} from '../runtime/client/dev-toolbar/ui-library/index.js';
 import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js';
 import type { DeepPartial, OmitIndexSignature, Simplify } from '../type-utils.js';
 import type { SUPPORTED_MARKDOWN_FILE_EXTENSIONS } from './../core/constants.js';
@@ -2331,6 +2331,7 @@ export interface AstroIntegration {
 			addClientDirective: (directive: ClientDirectiveConfig) => void;
 			/**
 			 * @deprecated Use `addDevToolbarApp` instead.
+			 * TODO: Fully remove in Astro 5.0
 			 */
 			addDevOverlayPlugin: (entrypoint: string) => void;
 			addDevToolbarApp: (entrypoint: string) => void;
@@ -2598,11 +2599,12 @@ export interface DevToolbarApp {
 	beforeTogglingOff?(canvas: ShadowRoot): boolean | Promise<boolean>;
 }
 
+// TODO: Remove in Astro 5.0
 export type DevOverlayPlugin = DevToolbarApp;
 
-export type DevOverlayMetadata = Window &
+export type DevToolbarMetadata = Window &
 	typeof globalThis & {
-		__astro_dev_overlay__: {
+		__astro_dev_toolbar__: {
 			root: string;
 			version: string;
 			debugInfo: string;
@@ -2611,27 +2613,28 @@ 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;
+		'astro-dev-toolbar': AstroDevToolbar;
+		'astro-dev-toolbar-window': DevToolbarWindow;
+		'astro-dev-toolbar-app-canvas': DevToolbarCanvas;
+		'astro-dev-toolbar-tooltip': DevToolbarTooltip;
+		'astro-dev-toolbar-highlight': DevToolbarHighlight;
+		'astro-dev-toolbar-toggle': DevToolbarToggle;
+		'astro-dev-toolbar-badge': DevToolbarBadge;
+		'astro-dev-toolbar-button': DevToolbarButton;
+		'astro-dev-toolbar-icon': DevToolbarIcon;
+		'astro-dev-toolbar-card': DevToolbarCard;
 
 		// Deprecated names
-		'astro-dev-overlay': AstroDevOverlay;
-		'astro-dev-overlay-window': DevOverlayWindow;
-		'astro-dev-overlay-plugin-canvas': DevOverlayCanvas;
-		'astro-dev-overlay-tooltip': DevOverlayTooltip;
-		'astro-dev-overlay-highlight': DevOverlayHighlight;
-		'astro-dev-overlay-toggle': DevOverlayToggle;
-		'astro-dev-overlay-badge': DevOverlayBadge;
-		'astro-dev-overlay-button': DevOverlayButton;
-		'astro-dev-overlay-icon': DevOverlayIcon;
-		'astro-dev-overlay-card': DevOverlayCard;
+		// TODO: Remove in Astro 5.0
+		'astro-dev-overlay': AstroDevToolbar;
+		'astro-dev-overlay-window': DevToolbarWindow;
+		'astro-dev-overlay-plugin-canvas': DevToolbarCanvas;
+		'astro-dev-overlay-tooltip': DevToolbarTooltip;
+		'astro-dev-overlay-highlight': DevToolbarHighlight;
+		'astro-dev-overlay-toggle': DevToolbarToggle;
+		'astro-dev-overlay-badge': DevToolbarBadge;
+		'astro-dev-overlay-button': DevToolbarButton;
+		'astro-dev-overlay-icon': DevToolbarIcon;
+		'astro-dev-overlay-card': DevToolbarCard;
 	}
 }