Hide the dev toolbar on print (#11496)

* Hide the dev toolbar on print * Run checkset * Add a test case
withastro · Jul 18, 2024 · 53ccd20 · 53ccd20
1 parent ee21ac7
commit 53ccd20
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/.changeset/orange-boats-trade.md b/.changeset/orange-boats-trade.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Hide the dev toolbar on `window.print()` (CTRL + P)
diff --git a/packages/astro/e2e/dev-toolbar.test.js b/packages/astro/e2e/dev-toolbar.test.js
@@ -413,4 +413,28 @@ test.describe('Dev Toolbar', () => {
 			}
 		}
 	});
+
+	test('hidden on print media', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/'));
+
+		const toolbar = page.locator('astro-dev-toolbar');
+
+		const settingsAppButton = toolbar.locator('button[data-app-id="astro:settings"]');
+		await settingsAppButton.click();
+
+		const settingsAppCanvas = toolbar.locator(
+			'astro-dev-toolbar-app-canvas[data-app-id="astro:settings"]'
+		);
+		const settingsWindow = settingsAppCanvas.locator('astro-dev-toolbar-window');
+		await expect(settingsWindow).toBeVisible();
+
+		await page.emulateMedia({ media: 'print' });
+		await expect(settingsWindow).not.toBeVisible();
+
+		await page.emulateMedia({ media: 'screen' });
+		await expect(settingsWindow).toBeVisible();
+
+		await settingsAppButton.click();
+		await expect(settingsWindow).not.toBeVisible();
+	});
 });
diff --git a/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts b/packages/astro/src/runtime/client/dev-toolbar/toolbar.ts
@@ -49,6 +49,11 @@ export class AstroDevToolbar extends HTMLElement {
 				z-index: 999999;
 				view-transition-name: astro-dev-toolbar;
 				display: contents;
+
+				/* Hide the dev toolbar on window.print() (CTRL + P) */
+				@media print {
+					display: none;
+				}
 			}
 
 			::view-transition-old(astro-dev-toolbar),