From cc3278bb69738c4e0c7811d683ead71bea6f46c1 Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Wed, 1 Nov 2023 18:11:57 +0100
Subject: [PATCH] feat(dev-overlay): Add a tooltip on plugin hover / focus
 (#8978)

* feat(dev-overlay): Add a tooltip on plugin hover / focus

* chore: changeset

* test: add test
---
 .changeset/twenty-shirts-smile.md             |  5 +++
 packages/astro/e2e/dev-overlay.test.js        | 13 +++++++-
 .../src/runtime/client/dev-overlay/overlay.ts | 31 +++++++++++++++++--
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/twenty-shirts-smile.md

diff --git a/.changeset/twenty-shirts-smile.md b/.changeset/twenty-shirts-smile.md
new file mode 100644
index 0000000000..c35552cdca
--- /dev/null
+++ b/.changeset/twenty-shirts-smile.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+In the dev overlay, add a tooltip showing the currently hovered / focused plugin's name
diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js
index f4efab1414..3e8c6662c7 100644
--- a/packages/astro/e2e/dev-overlay.test.js
+++ b/packages/astro/e2e/dev-overlay.test.js
@@ -15,7 +15,7 @@ test.afterAll(async () => {
 	await devServer.stop();
 });
 
-test.describe('Dev Overlay zzz', () => {
+test.describe('Dev Overlay', () => {
 	test('dev overlay exists in the page', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
@@ -23,6 +23,17 @@ test.describe('Dev Overlay zzz', () => {
 		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 pluginButton = overlay.locator('button[data-plugin-id="astro"]');
+		const pluginButtonTooltip = pluginButton.locator('.item-tooltip');
+		await pluginButton.hover();
+
+		await expect(pluginButtonTooltip).toBeVisible();
+	});
+
 	test('can open Astro plugin', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/'));
 
diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
index 98912ce667..50b015ca12 100644
--- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts
+++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts
@@ -97,7 +97,7 @@ export class AstroDevOverlay extends HTMLElement {
 				overflow: hidden;
 			}
 
-			#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus {
+			#dev-bar #bar-container .item:hover, #dev-bar #bar-container .item:focus-visible {
 				background: rgba(27, 30, 36, 1);
 				cursor: pointer;
 				outline-offset: -3px;
@@ -116,6 +116,33 @@ export class AstroDevOverlay extends HTMLElement {
 				background: rgba(71, 78, 94, 1);
 			}
 
+			#dev-bar .item-tooltip {
+				background: linear-gradient(0deg, #13151A, #13151A), linear-gradient(0deg, #343841, #343841);
+				border: 1px solid rgba(52, 56, 65, 1);
+				border-radius: 4px;
+				padding: 4px 8px;
+				position: absolute;
+				top: -40px;
+				opacity: 0;
+				transition: opacity 0.2s ease-in-out 0s;
+				pointer-events: none;
+			}
+
+			#dev-bar .item-tooltip::after{
+				content: '';
+				position: absolute;
+				left: calc(50% - 5px);
+				bottom: -6px;
+				border-left: 5px solid transparent;
+				border-right: 5px solid transparent;
+				border-top: 5px solid #343841;
+			}
+
+			#dev-bar .item:hover .item-tooltip, #dev-bar .item:not(.active):focus-visible .item-tooltip {
+				transition: opacity 0.2s ease-in-out 200ms;
+				opacity: 1;
+			}
+
 			#dev-bar #bar-container .item.active .notification {
 				border-color: rgba(71, 78, 94, 1);
 			}
@@ -374,7 +401,7 @@ export class AstroDevOverlay extends HTMLElement {
 	getPluginTemplate(plugin: DevOverlayPlugin) {
 		return `<button class="item" data-plugin-id="${plugin.id}">
 				<div class="icon">${this.getPluginIcon(plugin.icon)}<div class="notification"></div></div>
-				<span class="sr-only">${plugin.name}</span>
+				<span class="item-tooltip">${plugin.name}</span>
 			</button>`;
 	}