From 1eadb1c5290f2f4baf538c34889a09d5fcfb9bd4 Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Mon, 26 Feb 2024 14:38:19 +0100
Subject: [PATCH] fix(toolbar): Make it so every built-in app can be closed by
outside clicks (#10220)
* fix(toolbar): Make it so every built-in app can be closed by outside clicks
* chore: changeset
* test: add tests
* test: fix test
* ci: don't run bundle-size on dev-toolba
---
.changeset/kind-rice-clean.md | 5 ++++
.github/workflows/scripts.yml | 1 +
packages/astro/e2e/dev-toolbar.test.js | 18 +++++++++++++
.../runtime/client/dev-toolbar/apps/astro.ts | 10 ++++---
.../client/dev-toolbar/apps/audit/index.ts | 25 +++---------------
.../client/dev-toolbar/apps/settings.ts | 6 +++--
.../client/dev-toolbar/apps/utils/window.ts | 23 ++++++++++++++++
.../runtime/client/dev-toolbar/apps/xray.ts | 26 ++-----------------
8 files changed, 63 insertions(+), 51 deletions(-)
create mode 100644 .changeset/kind-rice-clean.md
diff --git a/.changeset/kind-rice-clean.md b/.changeset/kind-rice-clean.md
new file mode 100644
index 000000000000..c68248112fd2
--- /dev/null
+++ b/.changeset/kind-rice-clean.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes some built-in apps of the dev toolbar not closing when clicking the page
diff --git a/.github/workflows/scripts.yml b/.github/workflows/scripts.yml
index e3b9db4992db..f7c5305e075c 100644
--- a/.github/workflows/scripts.yml
+++ b/.github/workflows/scripts.yml
@@ -7,6 +7,7 @@ on:
- "main"
paths:
- "packages/astro/src/runtime/client/**/*"
+ - "!packages/astro/src/runtime/client/dev-toolbar/**/*"
# Automatically cancel in-progress actions on the same branch
concurrency:
diff --git a/packages/astro/e2e/dev-toolbar.test.js b/packages/astro/e2e/dev-toolbar.test.js
index 3afdf9036df0..c3e5528fb10a 100644
--- a/packages/astro/e2e/dev-toolbar.test.js
+++ b/packages/astro/e2e/dev-toolbar.test.js
@@ -69,6 +69,10 @@ test.describe('Dev Toolbar', () => {
await page.click('#go-to-b');
await consolePromise;
+ toolbar = page.locator('astro-dev-toolbar');
+ appButton = toolbar.locator('button[data-app-id="astro:home"]');
+ await appButton.click();
+
astroAppCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:home"]');
astroToolbarCards = await astroAppCanvas.locator('astro-dev-toolbar-card');
await page.waitForSelector('astro-dev-toolbar-card');
@@ -290,4 +294,18 @@ test.describe('Dev Toolbar', () => {
expect(serverRenderTime).not.toBe(null);
expect(clientRenderTime).not.toBe(null);
});
+
+ test('can quit apps by clicking outside the window', async ({ page, astro }) => {
+ await page.goto(astro.resolveUrl('/'));
+
+ const toolbar = page.locator('astro-dev-toolbar');
+ for (const appId of ['astro:home', 'astro:audit', 'astro:xray', 'astro:settings']) {
+ const appButton = toolbar.locator(`button[data-app-id="${appId}"]`);
+ await appButton.click();
+
+ await expect(appButton).toHaveClass('item active');
+ await page.click('body');
+ await expect(appButton).not.toHaveClass('active');
+ }
+ });
});
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
index 27a7b228730e..85dd3b6fe5d6 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/astro.ts
@@ -1,7 +1,7 @@
import type { DevToolbarApp, DevToolbarMetadata } from '../../../../@types/astro.js';
import { isDefinedIcon, type Icon } from '../ui-library/icons.js';
import { colorForIntegration, iconForIntegration } from './utils/icons.js';
-import { createWindowElement } from './utils/window.js';
+import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
const astroLogo =
'';
@@ -34,7 +34,6 @@ export default {
createCanvas();
document.addEventListener('astro:after-swap', createCanvas);
- document.addEventListener('astro:after-swap', fetchIntegrationData);
eventTarget.addEventListener('app-toggled', async (event) => {
resetDebugButton();
@@ -45,6 +44,8 @@ export default {
}
});
+ closeOnOutsideClick(eventTarget);
+
function fetchIntegrationData() {
fetch('https://astro.build/api/v1/dev-overlay/', {
cache: 'no-cache',
@@ -372,8 +373,11 @@ export default {
resetDebugButton();
}, 3500);
});
-
canvas.append(windowComponent);
+
+ // If we have integration data, rebuild that part of the UI as well
+ // as it probably mean that the user had already open the app in this session (ex: view transitions)
+ if (integrationData) refreshIntegrationList();
}
function resetDebugButton() {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts
index dfaa7dc88d4f..e07e6c6ac87b 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/index.ts
@@ -1,3 +1,4 @@
+import { finder } from '@medv/finder';
import type { DevToolbarApp, DevToolbarMetadata } from '../../../../../@types/astro.js';
import type { DevToolbarHighlight } from '../../ui-library/highlight.js';
import {
@@ -6,9 +7,8 @@ import {
getElementsPositionInDocument,
positionHighlight,
} from '../utils/highlight.js';
-import { createWindowElement } from '../utils/window.js';
+import { closeOnOutsideClick, createWindowElement } from '../utils/window.js';
import { a11y } from './a11y.js';
-import { finder } from '@medv/finder';
import { perf } from './perf.js';
const icon =
@@ -72,26 +72,7 @@ export default {
document.addEventListener('astro:after-swap', async () => lint());
document.addEventListener('astro:page-load', async () => refreshLintPositions);
- function onPageClick(event: MouseEvent) {
- const target = event.target as Element | null;
- if (!target) return;
- if (!target.closest) return;
- if (target.closest('astro-dev-toolbar')) return;
- eventTarget.dispatchEvent(
- new CustomEvent('toggle-app', {
- detail: {
- state: false,
- },
- })
- );
- }
- eventTarget.addEventListener('app-toggled', (event: any) => {
- if (event.detail.state === true) {
- document.addEventListener('click', onPageClick, true);
- } else {
- document.removeEventListener('click', onPageClick, true);
- }
- });
+ closeOnOutsideClick(eventTarget);
async function lint() {
audits.forEach(({ highlightElement }) => {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
index 7fa1993090c3..42d1d46d9ed2 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/settings.ts
@@ -1,6 +1,6 @@
import type { DevToolbarApp } from '../../../../@types/astro.js';
import { settings, type Settings } from '../settings.js';
-import { createWindowElement } from './utils/window.js';
+import { closeOnOutsideClick, createWindowElement } from './utils/window.js';
interface SettingRow {
name: string;
@@ -49,11 +49,13 @@ export default {
id: 'astro:settings',
name: 'Settings',
icon: 'gear',
- init(canvas) {
+ init(canvas, eventTarget) {
createSettingsWindow();
document.addEventListener('astro:after-swap', createSettingsWindow);
+ closeOnOutsideClick(eventTarget);
+
function createSettingsWindow() {
const windowElement = createWindowElement(
`