From 53ccd206f9bfe5f6a0d888d199776b4043f63f58 Mon Sep 17 00:00:00 2001
From: Abdulrahman Alfawal <61620817+alfawal@users.noreply.github.com>
Date: Fri, 19 Jul 2024 00:14:57 +0300
Subject: [PATCH] Hide the dev toolbar on print (#11496)

* Hide the dev toolbar on print

* Run checkset

* Add a test case
---
 .changeset/orange-boats-trade.md              |  5 ++++
 packages/astro/e2e/dev-toolbar.test.js        | 24 +++++++++++++++++++
 .../src/runtime/client/dev-toolbar/toolbar.ts |  5 ++++
 3 files changed, 34 insertions(+)
 create mode 100644 .changeset/orange-boats-trade.md

diff --git a/.changeset/orange-boats-trade.md b/.changeset/orange-boats-trade.md
new file mode 100644
index 0000000000..8f284bc9ad
--- /dev/null
+++ 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
index 7c90384d43..3055778523 100644
--- 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
index 13505f11cd..3f9db6b1dc 100644
--- 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),