Fix dev overlay UI Toolkit component names (#8928)

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com> Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
withastro · Nov 22, 2023 · bebd4f0 · bebd4f0
1 parent 6b42dac
commit bebd4f0
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 16 deletions.
diff --git a/.changeset/violet-ants-bow.md b/.changeset/violet-ants-bow.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Renames dev overlay UI Toolkit component names for consistency.
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -192,13 +192,13 @@ document.addEventListener('DOMContentLoaded', async () => {
 				width: 1px;
 			}
 
-			astro-overlay-plugin-canvas {
+			astro-dev-overlay-plugin-canvas {
 				position: absolute;
 				top: 0;
 				left: 0;
 			}
 
-			astro-overlay-plugin-canvas:not([data-active]) {
+			astro-dev-overlay-plugin-canvas:not([data-active]) {
 				display: none;
 			}
 
@@ -403,7 +403,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 		}
 
 		getPluginCanvasById(id: string) {
-			return this.shadowRoot.querySelector(`astro-overlay-plugin-canvas[data-plugin-id="${id}"]`);
+			return this.shadowRoot.querySelector(
+				`astro-dev-overlay-plugin-canvas[data-plugin-id="${id}"]`
+			);
 		}
 
 		togglePluginStatus(plugin: DevOverlayPlugin, status?: boolean) {
@@ -486,19 +488,19 @@ document.addEventListener('DOMContentLoaded', async () => {
 	}
 
 	customElements.define('astro-dev-overlay', AstroDevOverlay);
-	customElements.define('astro-overlay-window', DevOverlayWindow);
-	customElements.define('astro-overlay-plugin-canvas', DevOverlayCanvas);
-	customElements.define('astro-overlay-tooltip', DevOverlayTooltip);
-	customElements.define('astro-overlay-highlight', DevOverlayHighlight);
-	customElements.define('astro-overlay-card', DevOverlayCard);
+	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);
 
 	const overlay = document.createElement('astro-dev-overlay');
 	overlay.style.zIndex = '999999';
 	document.body.append(overlay);
 
 	// Create plugin canvases
 	plugins.forEach((plugin) => {
-		const pluginCanvas = document.createElement('astro-overlay-plugin-canvas');
+		const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas');
 		pluginCanvas.dataset.pluginId = plugin.id;
 		overlay.shadowRoot?.append(pluginCanvas);
 	});

diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts
@@ -6,7 +6,7 @@ export default {
 	name: 'Astro',
 	icon: 'astro:logo',
 	init(canvas) {
-		const astroWindow = document.createElement('astro-overlay-window') as DevOverlayWindow;
+		const astroWindow = document.createElement('astro-dev-overlay-window') as DevOverlayWindow;
 
 		astroWindow.windowTitle = 'Astro';
 		astroWindow.windowIcon = 'astro:logo';
@@ -19,7 +19,7 @@ export default {
 					justify-content: center;
 				}
 
-				#buttons-container astro-overlay-card {
+				#buttons-container astro-dev-overlay-card {
 					flex: 1;
 				}
 
@@ -53,8 +53,8 @@ export default {
 				<div>
 					<p>Welcome to Astro!</p>
 					<div id="buttons-container">
-						<astro-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-overlay-card>
-						<astro-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-overlay-card>
+						<astro-dev-overlay-card icon="astro:logo" link="https://github.com/withastro/astro/issues/new/choose">Report an issue</astro-dev-overlay-card>
+						<astro-dev-overlay-card icon="astro:logo" link="https://docs.astro.build/en/getting-started/">View Astro Docs</astro-dev-overlay-card>
 					</div>
 				</div>
 				<footer>

diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/audit.ts
@@ -70,7 +70,7 @@ export default {
 		}
 
 		function buildAuditTooltip(rule: AuditRule) {
-			const tooltip = document.createElement('astro-overlay-tooltip') as DevOverlayTooltip;
+			const tooltip = document.createElement('astro-dev-overlay-tooltip') as DevOverlayTooltip;
 			tooltip.sections = [
 				{
 					icon: 'warning',

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
@@ -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-overlay-highlight') as DevOverlayHighlight;
+	const highlight = document.createElement('astro-dev-overlay-highlight') as DevOverlayHighlight;
 	if (icon) highlight.icon = icon;
 
 	highlight.tabIndex = 0;

diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
@@ -46,7 +46,7 @@ export default {
 		}
 
 		function buildIslandTooltip(island: HTMLElement) {
-			const tooltip = document.createElement('astro-overlay-tooltip') as DevOverlayTooltip;
+			const tooltip = document.createElement('astro-dev-overlay-tooltip') as DevOverlayTooltip;
 			tooltip.sections = [];
 
 			const islandProps = island.getAttribute('props')