From ca90b47cfc5e00f5065cf461e2fe50db62215e49 Mon Sep 17 00:00:00 2001
From: HiDeoo <494699+HiDeoo@users.noreply.github.com>
Date: Fri, 27 Oct 2023 12:09:05 +0200
Subject: [PATCH] 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>
---
 .changeset/violet-ants-bow.md                 |  5 +++++
 .../src/runtime/client/dev-overlay/overlay.ts | 20 ++++++++++---------
 .../client/dev-overlay/plugins/astro.ts       |  8 ++++----
 .../client/dev-overlay/plugins/audit.ts       |  2 +-
 .../dev-overlay/plugins/utils/highlight.ts    |  2 +-
 .../client/dev-overlay/plugins/xray.ts        |  2 +-
 6 files changed, 23 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/violet-ants-bow.md

diff --git a/.changeset/violet-ants-bow.md b/.changeset/violet-ants-bow.md
new file mode 100644
index 0000000000..9ba4f9408b
--- /dev/null
+++ 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
index 57ca72d633..85bdf73e12 100644
--- 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,11 +488,11 @@ 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';
@@ -498,7 +500,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 
 	// 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
index 3629776ea5..11e7bb7e0a 100644
--- 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
index bb94ead94c..f8bda831fa 100644
--- 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
index 34bfd1f5af..79948dcd76 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-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
index 123cab8f3f..fe92604f46 100644
--- 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')