Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-01-06 22:10:10 -05:00
Code Issues Activity

Prevent dev toolbar tooltip from overflowing (#9512)

Browse source 
* fix: prevent dev toolbar toolip from overflowing

* test: add a test case for dev toolbar toolip position

* Create small-emus-deny.md

---------

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
This commit is contained in:
Ming-jun Lu 2023-12-27 01:01:04 +08:00 committed by GitHub
parent bb1438d20d
commit 1469e0e5a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/small-emus-deny.md Normal file
View file

@ -0,0 +1,5 @@
---
"astro": patch
---
Prevents dev toolbar tooltip from overflowing outside of the screen

26
packages/astro/e2e/dev-overlay.test.js
View file

@ -139,6 +139,32 @@ test.describe('Dev Overlay', () => {
await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible();
});
test('adjusts tooltip position if off-screen', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/tooltip-position'));
const overlay = page.locator('astro-dev-toolbar');
const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]');
await pluginButton.click();
const auditCanvas = overlay.locator(
'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]'
);
const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
for (const highlight of await auditHighlights.all()) {
await expect(highlight).toBeVisible();
await highlight.hover();
const tooltip = highlight.locator('astro-dev-toolbar-tooltip');
await expect(tooltip).toBeVisible();
const tooltipBox = await tooltip.boundingBox();
const { clientWidth, clientHeight } = await page.evaluate(() => ({
clientWidth: document.documentElement.clientWidth,
clientHeight: document.documentElement.clientHeight,
}));
expect(tooltipBox.x + tooltipBox.width).toBeLessThan(clientWidth);
expect(tooltipBox.y + tooltipBox.height).toBeLessThan(clientHeight);
}
});
test('can open Settings plugin', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));

21
packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro Normal file
View file

@ -0,0 +1,21 @@
---
---
<div>
<button role="top-left">Top left</button>
<button role="top-right">Top right</button>
<button role="bottom-left">Bottom left</button>
<button role="bottom-right">Bottom right</button>
</div>
<style>
div {
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
align-content: space-between;
height: 92vh;
padding: 20px;
}
</style>

6
packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts
View file

@ -57,12 +57,16 @@ export function attachTooltipToHighlight(
const originalRect = originalElement.getBoundingClientRect();
const dialogRect = tooltip.getBoundingClientRect();
// If the tooltip is going to be off the screen, show it above the element instead
// Prevent the tooltip from being off the screen
if (originalRect.top < dialogRect.height) {
// Not enough space above, show below
tooltip.style.top = `${originalRect.height + 15}px`;
} else {
tooltip.style.top = `-${tooltip.offsetHeight}px`;
}
if (dialogRect.right > document.documentElement.clientWidth) {
// Not enough space on the right, align to the right
tooltip.style.right = '0px';
}
});
});