summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--.changeset/twenty-shirts-smile.md5
-rw-r--r--packages/astro/e2e/dev-overlay.test.js13
-rw-r--r--packages/astro/src/runtime/client/dev-overlay/overlay.ts31
3 files changed, 46 insertions, 3 deletions
diff --git a/.changeset/twenty-shirts-smile.md b/.changeset/twenty-shirts-smile.md
new file mode 100644
index 000000000..c35552cdc
--- /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 f4efab141..3e8c6662c 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 98912ce66..50b015ca1 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>`;
}