fix(toolbar): Fixes small misc issues (#10442)

* fix(toolbar): Fixes small misc issues * test: update test to test for the audit ui as well * chore: changeset * nit: address feedback
withastro · Mar 15, 2024 · f8e0ad3 · f8e0ad3
1 parent 3776ecf
commit f8e0ad3
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 11 deletions.
diff --git a/.changeset/old-readers-notice.md b/.changeset/old-readers-notice.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes small rendering issues with the dev toolbar in certain contexts
diff --git a/packages/astro/e2e/dev-toolbar-audits.test.js b/packages/astro/e2e/dev-toolbar-audits.test.js
@@ -44,7 +44,7 @@ test.describe('Dev Toolbar - Audits', () => {
 		await appButton.click();
 	});
 
-	test('can handle mutations', async ({ page, astro }) => {
+	test('can handle mutations zzz', async ({ page, astro }) => {
 		await page.goto(astro.resolveUrl('/audits-mutations'));
 
 		const toolbar = page.locator('astro-dev-toolbar');
@@ -53,7 +53,10 @@ test.describe('Dev Toolbar - Audits', () => {
 
 		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
 		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
+		const auditWindow = auditCanvas.locator('astro-dev-toolbar-audit-window');
+		const auditCards = auditWindow.locator('astro-dev-toolbar-audit-list-item');
 		await expect(auditHighlights).toHaveCount(1);
+		await expect(auditCards).toHaveCount(1);
 
 		await page.click('body');
 
@@ -65,6 +68,7 @@ test.describe('Dev Toolbar - Audits', () => {
 
 		await appButton.click();
 		await expect(auditHighlights).toHaveCount(2);
+		await expect(auditCards).toHaveCount(2);
 	});
 
 	test('multiple changes only result in one audit update', async ({ page, astro }) => {

diff --git a/packages/astro/src/core/errors/dev/utils.ts b/packages/astro/src/core/errors/dev/utils.ts
@@ -231,15 +231,15 @@ export function getDocsForError(err: ErrorWithMetadata): string | undefined {
 	}
 }
 
+const linkRegex = /\[([^[]+)\]\((.*)\)/g;
+const boldRegex = /\*\*(.+)\*\*/g;
+const urlRegex = / ((?:https?|ftp):\/\/[-\w+&@#\\/%?=~|!:,.;]*[-\w+&@#\\/%=~|])/gi;
+const codeRegex = /`([^`]+)`/g;
+
 /**
  * Render a subset of Markdown to HTML or a CLI output
  */
 export function renderErrorMarkdown(markdown: string, target: 'html' | 'cli') {
-	const linkRegex = /\[([^[]+)\]\((.*)\)/g;
-	const boldRegex = /\*\*(.+)\*\*/g;
-	const urlRegex = / ((?:https?|ftp):\/\/[-\w+&@#\\/%?=~|!:,.;]*[-\w+&@#\\/%=~|])/gi;
-	const codeRegex = /`([^`]+)`/g;
-
 	if (target === 'html') {
 		return escape(markdown)
 			.replace(linkRegex, `<a href="$2" target="_blank">$1</a>`)

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
@@ -23,6 +23,8 @@ try {
 	customElements.define('astro-dev-toolbar-audit-list-item', DevToolbarAuditListItem);
 } catch (e) {}
 
+let showState = false;
+
 export default {
 	id: 'astro:audit',
 	name: 'Audit',
@@ -54,14 +56,18 @@ export default {
 				if ('requestIdleCallback' in window) {
 					window.requestIdleCallback(
 						async () => {
-							lint();
+							lint().then(() => {
+								if (showState) createAuditsUI();
+							});
 						},
 						{ timeout: 300 }
 					);
 				} else {
 					// Fallback for old versions of Safari, we'll assume that things are less likely to be busy after 150ms.
-					setTimeout(() => {
-						lint();
+					setTimeout(async () => {
+						lint().then(() => {
+							if (showState) createAuditsUI();
+						});
 					}, 150);
 				}
 			}, 250);
@@ -86,7 +92,10 @@ export default {
 
 		eventTarget.addEventListener('app-toggled', (event: any) => {
 			if (event.detail.state === true) {
+				showState = true;
 				createAuditsUI();
+			} else {
+				showState = false;
 			}
 		});
 

diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-item.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-item.ts
@@ -70,6 +70,7 @@ export class DevToolbarAuditListItem extends HTMLElement {
 				border: none;
 				z-index: 1000000000;
 				flex-direction: column;
+				line-height: 1.25rem;
 			}
 
 			:host([active])>button#astro-overlay-card {
@@ -106,6 +107,12 @@ export class DevToolbarAuditListItem extends HTMLElement {
 				color: rgba(191, 193, 201, 1);
 			}
 
+			.extended-info code {
+				padding: 1px 3px;
+				border-radius: 3px;
+				background: #1F2433;
+			}
+
 			.reset-button {
 				text-align: left;
 				border: none;

diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-ui.ts
@@ -147,18 +147,32 @@ function buildAuditCard(
 
 	const message = document.createElement('p');
 	message.classList.add('audit-message');
-	message.innerHTML = rule.message;
+	message.innerHTML = simpleRenderMarkdown(rule.message);
 	extendedInfo.appendChild(message);
 
 	const description = rule.description;
 	if (description) {
 		const descriptionElement = document.createElement('p');
 		descriptionElement.classList.add('audit-description');
-		descriptionElement.innerHTML = description;
+		descriptionElement.innerHTML = simpleRenderMarkdown(description);
 		extendedInfo.appendChild(descriptionElement);
 	}
 
 	card.shadowRoot.appendChild(extendedInfo);
 
 	return card;
 }
+
+const linkRegex = /\[([^[]+)\]\((.*)\)/g;
+const boldRegex = /\*\*(.+)\*\*/g;
+const codeRegex = /`([^`]+)`/g;
+
+/**
+ * Render a very small subset of Markdown to HTML or a CLI output
+ */
+function simpleRenderMarkdown(markdown: string) {
+	return escapeHTML(markdown)
+		.replace(linkRegex, `<a href="$2" target="_blank">$1</a>`)
+		.replace(boldRegex, '<b>$1</b>')
+		.replace(codeRegex, '<code>$1</code>');
+}