From 01497f2bc2833a62a163b0569d25a53424335a25 Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Fri, 8 Mar 2024 13:48:44 +0100
Subject: [PATCH] fix(toolbar): Fixes some errors tests after merges brought up
 (#10371)

---
 .../src/runtime/client/dev-toolbar/apps/audit/index.ts |  2 +-
 .../dev-toolbar/apps/audit/ui/audit-list-window.ts     |  3 ++-
 .../src/runtime/client/dev-toolbar/ui-library/badge.ts |  9 +++++----
 .../runtime/client/dev-toolbar/ui-library/button.ts    |  9 +++++----
 .../src/runtime/client/dev-toolbar/ui-library/card.ts  |  2 +-
 .../runtime/client/dev-toolbar/ui-library/highlight.ts | 10 ++++++----
 .../runtime/client/dev-toolbar/ui-library/toggle.ts    |  6 ++++--
 7 files changed, 24 insertions(+), 17 deletions(-)

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 ccc273f4dc..69c752dbe0 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
@@ -123,11 +123,11 @@ export default {
 		async function lint() {
 			// Clear the previous audits
 			if (audits.length > 0) {
-				audits = [];
 				audits.forEach((audit) => {
 					audit.highlight?.remove();
 					audit.card?.remove();
 				});
+				audits = [];
 				hasCreatedUI = false;
 			}
 
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts
index c1c2770aef..86fa7b7435 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-window.ts
@@ -5,7 +5,7 @@ import { getAuditCategory, rulesCategories } from '../rules/index.js';
 export function createRoundedBadge(icon: Icon) {
 	const badge = document.createElement('astro-dev-toolbar-badge');
 
-	badge.shadowRoot.innerHTML = `
+	badge.shadowRoot.innerHTML += `
 		<style>
 			:host>div {
 				padding: 12px 8px;
@@ -283,6 +283,7 @@ export class DevToolbarAuditListWindow extends HTMLElement {
 			}
 
 			.no-audit-container astro-dev-toolbar-icon {
+				width: auto;
 				height: auto;
 				margin: 0 auto;
 			}
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/badge.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/badge.ts
index 5d45f071bb..0a4f30cfc2 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/badge.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/badge.ts
@@ -106,14 +106,15 @@ export class DevToolbarBadge extends HTMLElement {
 	}
 
 	updateStyle() {
-		const style = this.shadowRoot.getElementById('selected-style') as HTMLStyleElement;
+		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
 
-		style.innerHTML = `
+		if (style) {
+			style.innerHTML = `
 			.badge {
 				--text-color: var(--${this.badgeStyle}-text);
 				--border-color: var(--${this.badgeStyle}-border);
 				--size: var(--${this.size});
-			}
-		`;
+			}`;
+		}
 	}
 }
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts
index c63528c444..9a37058177 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/button.ts
@@ -129,17 +129,18 @@ export class DevToolbarButton extends HTMLElement {
 	}
 
 	updateStyle() {
-		const style = this.shadowRoot.getElementById('selected-style') as HTMLStyleElement;
+		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
 
-		style.innerHTML = `
+		if (style) {
+			style.innerHTML = `
 			button {
 				--background: var(--${this.buttonStyle}-background);
 				--border: var(--${this.buttonStyle}-border);
 				--font-size: var(--${this.size}-font-size);
 				--padding: var(--${this.size}-padding);
 				--text-color: var(--${this.buttonStyle}-text);
-			}
-		`;
+			}`;
+		}
 	}
 
 	attributeChangedCallback() {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/card.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/card.ts
index 82113b21bd..bba46a9433 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/card.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/card.ts
@@ -43,7 +43,7 @@ export class DevToolbarCard extends HTMLElement {
 	}
 
 	updateStyle() {
-		const style = this.shadowRoot.getElementById('selected-style');
+		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
 
 		if (style) {
 			style.innerHTML = `
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/highlight.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/highlight.ts
index cc3c1c2215..2dd85edd9b 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/highlight.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/highlight.ts
@@ -86,13 +86,15 @@ export class DevToolbarHighlight extends HTMLElement {
 	}
 
 	updateStyle() {
-		const style = this.shadowRoot.getElementById('selected-style') as HTMLStyleElement;
-		style.innerHTML = `
+		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
+
+		if (style) {
+			style.innerHTML = `
 			:host {
 				--background: var(--${this.highlightStyle}-background);
 				--border: var(--${this.highlightStyle}-border);
-			}
-		`;
+			}`;
+		}
 	}
 
 	attributeChangedCallback() {
diff --git a/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts b/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts
index 7d8cb71baf..3f5e8f225b 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/ui-library/toggle.ts
@@ -108,14 +108,16 @@ export class DevToolbarToggle extends HTMLElement {
 	}
 
 	updateStyle() {
-		const style = this.shadowRoot.getElementById('selected-style') as HTMLStyleElement;
-		style.innerHTML = `
+		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');
+		if (style) {
+			style.innerHTML = `
 			:host {
 				--bg-on: var(--${this.toggleStyle}-bg-on);
 				--border-off: var(--${this.toggleStyle}-border-off);
 				--border-on: var(--${this.toggleStyle}-border-on);
 			}
 		`;
+		}
 	}
 
 	connectedCallback() {