Improve performance insight details

Assisted-By: devx/633e51ab-4160-4b2c-a196-017418800531

Author: JoviDeCroock

packages/devtools-ui/src/components/PerformanceInsights.tsx

@@ -87,6 +87,35 @@ function DependencyList({
 	);
 }
 
+function TriggerSource({
+	occurrence,
+}: {
+	occurrence: NoOutputChangeOccurrence;
+}) {
+	if (!occurrence.subscribedTo) {
+		return <span className="performance-muted">Unknown source</span>;
+	}
+
+	const dependency = occurrence.allDependencies?.find(
+		candidate => candidate.id === occurrence.subscribedTo
+	);
+	if (!dependency) {
+		return (
+			<code className="performance-trigger-id">{occurrence.subscribedTo}</code>
+		);
+	}
+
+	return (
+		<span className="performance-trigger-source">
+			<span className={`performance-dependency-type ${dependency.type}`}>
+				{dependency.type}
+			</span>
+			<strong>{dependency.name || "(anonymous)"}</strong>
+			<code className="performance-trigger-id">{dependency.id}</code>
+		</span>
+	);
+}
+
 function OccurrenceRow({
 	occurrence,
 }: {
@@ -96,11 +125,8 @@ function OccurrenceRow({
 		<li className="performance-occurrence">
 			<div className="performance-occurrence-row">
 				<span className="performance-occurrence-label">Triggered by</span>
-				<span
-					className="performance-occurrence-value"
-					title={occurrence.subscribedTo}
-				>
-					{occurrence.subscribedTo || "Unknown source"}
+				<span className="performance-occurrence-value">
+					<TriggerSource occurrence={occurrence} />
 				</span>
 			</div>
 			<div className="performance-occurrence-row">
@@ -293,9 +319,8 @@ export function PerformanceInsights() {
 																	aria-label={`${isOpen ? "Hide" : "Inspect"} recent causes for ${summary.signalName || "anonymous computed"}`}
 																>
 																	<span aria-hidden="true">
-																		{isOpen ? "▾" : "▸"}
+																		{isOpen ? "▼" : "▶"}
 																	</span>
-																	{isOpen ? "Hide causes" : "Inspect causes"}
 																</button>
 															</div>
 														</td>

packages/devtools-ui/src/styles.css

@@ -939,18 +939,21 @@ body {
 }
 
 .performance-expand-toggle {
+  order: -1;
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
   flex: none;
-  padding: 2px 6px;
-  border: 1px solid var(--border-primary);
+  inline-size: 20px;
+  block-size: 20px;
+  padding: 0;
+  border: 0;
   border-radius: 3px;
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
+  background: none;
+  color: var(--text-muted);
   cursor: pointer;
   font: inherit;
-  font-size: 10px;
+  font-size: 9px;
 }
 
 .performance-expand-toggle:hover {
@@ -1019,6 +1022,24 @@ body {
   word-break: break-all;
 }
 
+.performance-trigger-source {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: inherit;
+}
+
+.performance-trigger-source strong {
+  font-family: inherit;
+  font-weight: 600;
+  word-break: normal;
+}
+
+.performance-trigger-id {
+  color: var(--text-faint);
+  font-size: 10px;
+}
+
 .performance-occurrence-deps {
   margin-top: 6px;
 }

packages/devtools-ui/test/browser/index.test.tsx

@@ -1303,6 +1303,7 @@ describe("@preact/signals-devtools-ui", () => {
 			);
 			expect(inspectButton).to.not.be.null;
 			expect(inspectButton!.getAttribute("aria-expanded")).to.equal("false");
+			expect(inspectButton!.textContent).to.equal("▶");
 
 			// Before expanding, occurrence details are not rendered.
 			expect(scratch.querySelector(".performance-occurrence-detail")).to.be
@@ -1312,11 +1313,15 @@ describe("@preact/signals-devtools-ui", () => {
 				inspectButton!.click();
 			});
 			expect(inspectButton!.getAttribute("aria-expanded")).to.equal("true");
+			expect(inspectButton!.textContent).to.equal("▼");
 
 			const detail = scratch.querySelector(".performance-occurrence-detail");
 			expect(detail).to.not.be.null;
-			expect(detail!.textContent).to.contain("signal-count");
-			expect(detail!.textContent).to.contain("count");
+			const trigger = detail!.querySelector(".performance-trigger-source");
+			expect(trigger).to.not.be.null;
+			expect(trigger!.textContent).to.contain("signal");
+			expect(trigger!.textContent).to.contain("count");
+			expect(trigger!.textContent).to.contain("signal-count");
 			expect(detail!.textContent).to.contain("Triggered by");
 			expect(detail!.textContent).to.contain("Current dependencies");
 		});