fix(debugger): muted breakpoints show as grey dots, not as disabled ones (#1104)

With Mute Breakpoints on (remembered per project), every breakpoint was drawn as a hollow red circle, the disabled look. Muted breakpoints now use the grey muted icon; disabled ones keep the hollow circle. Method breakpoints and field watchpoints follow the same rule.

src/features/debugger/__tests__/editor.test.ts

@@ -86,6 +86,8 @@ describe("breakpoint look", () => {
     expect(lookOf(b, { verified: true } as never, false, true)).toBe("verified");
     expect(lookOf(b, { verified: false } as never, false, true)).toBe("unverified");
     expect(lookOf({ ...b, enabled: false }, { verified: true } as never, false, true)).toBe("disabled");
+    expect(lookOf(b, { verified: true } as never, true, true)).toBe("muted");
+    expect(lookOf({ ...b, enabled: false }, undefined, true, false)).toBe("disabled");
   });
 });
 

src/features/debugger/editor/breakpointGutter.ts

@@ -35,6 +35,7 @@ import styles from "./editor.module.css";
 export type BreakpointLook =
   | "normal"
   | "disabled"
+  | "muted"
   | "unverified"
   | "verified"
   | "conditional"
@@ -47,7 +48,9 @@ export type BreakpointLook =
   | "fieldVerified";
 
 export function lookOf(b: BreakpointEntry, status: BreakpointStatus | undefined, muted: boolean, running: boolean) {
-  if (!b.enabled || muted) return "disabled";
+  if (!b.enabled) return "disabled";
+  // Mute Breakpoints: IDEA's grey dot, so it isn't taken for a disabled breakpoint.
+  if (muted) return "muted";
   if (running && status && !status.verified) return "unverified";
   if (!suspends(b)) return "log";
   if (isConditional(b)) return "conditional";
@@ -61,7 +64,8 @@ export function specialLook(
   muted: boolean,
   running: boolean,
 ): BreakpointLook {
-  if (!b.enabled || muted) return b.kind === "method" ? "methodDisabled" : "fieldDisabled";
+  if (!b.enabled) return b.kind === "method" ? "methodDisabled" : "fieldDisabled";
+  if (muted) return "muted";
   if (running && status && !status.verified) return "unverified";
   if (running && status?.verified) return b.kind === "method" ? "methodVerified" : "fieldVerified";
   return b.kind;
@@ -81,7 +85,7 @@ class BreakpointMarker extends GutterMarker {
 }
 
 const bpLine = Decoration.line({ class: styles.bpLine });
-const DISABLED_LOOKS = new Set<BreakpointLook>(["disabled", "methodDisabled", "fieldDisabled"]);
+const DISABLED_LOOKS = new Set<BreakpointLook>(["disabled", "muted", "methodDisabled", "fieldDisabled"]);
 
 const setMarkers = StateEffect.define<RangeSet<BreakpointMarker>>();
 

src/features/debugger/editor/editor.module.css

@@ -25,12 +25,22 @@
   background: var(--danger);
 }
 
-/* Disabled / muted: hollow circle. */
+/* Disabled: hollow circle. */
 .disabled::before {
   background: transparent;
   border: 1.5px solid var(--danger);
 }
 
+/* Mute Breakpoints (expui breakpointMuted). */
+.muted::before {
+  border-radius: 0;
+  background: url("../../../ui/expui/breakpoints/breakpointMuted.svg") center / contain no-repeat;
+}
+
+:global(:root[data-theme^="dark"]) .muted::before {
+  background-image: url("../../../ui/expui/breakpoints/breakpointMuted_dark.svg");
+}
+
 /* Not bound by the adapter. */
 .unverified::before {
   background: var(--fg-gutter);