diff options
-rw-r--r-- | .changeset/twenty-shirts-smile.md | 5 | ||||
-rw-r--r-- | packages/astro/e2e/dev-overlay.test.js | 13 | ||||
-rw-r--r-- | packages/astro/src/runtime/client/dev-overlay/overlay.ts | 31 |
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>`; } |