Active inline breakpoint isn't highlighted

fixes #81718

src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts

@@ -247,11 +247,17 @@ class BreakpointEditorContribution implements IBreakpointEditorContribution {
 			this.closeBreakpointWidget();
 			await this.setDecorations();
 		}));
-		this.toDispose.push(this.debugService.getModel().onDidChangeBreakpoints(async () => {
+		this.toDispose.push(this.debugService.getModel().onDidChangeBreakpoints(() => {
 			if (!this.ignoreBreakpointsChangeEvent && !this.setDecorationsScheduler.isScheduled()) {
 				this.setDecorationsScheduler.schedule();
 			}
 		}));
+		this.toDispose.push(this.debugService.onDidChangeState(() => {
+			// We need to update breakpoint decorations when state changes since the top stack frame and breakpoint decoration might change
+			if (!this.setDecorationsScheduler.isScheduled()) {
+				this.setDecorationsScheduler.schedule();
+			}
+		}));
 		this.toDispose.push(this.editor.onDidChangeModelDecorations(() => this.onModelDecorationsChanged()));
 		this.toDispose.push(this.configurationService.onDidChangeConfiguration(async (e) => {
 			if (e.affectsConfiguration('debug.showBreakpointsInOverviewRuler')) {

src/vs/workbench/contrib/debug/browser/breakpointsView.ts

@@ -707,6 +707,18 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, br
 		};
 	}
 
+	const focusedThread = debugService.getViewModel().focusedThread;
+	if (focusedThread) {
+		const callStack = focusedThread ? focusedThread.getCallStack() : undefined;
+		const topStackFrame = callStack ? callStack[0] : undefined;
+		if (topStackFrame && topStackFrame.source.uri.toString() === breakpoint.uri.toString() && topStackFrame.range.startLineNumber === breakpoint.lineNumber && topStackFrame.range.startColumn === breakpoint.column) {
+			return {
+				className: 'debug-breakpoint-and-top-stack-frame',
+				message: breakpoint.message || nls.localize('breakpoint', "Breakpoint")
+			};
+		}
+	}
+
 	return {
 		className: 'debug-breakpoint',
 		message: breakpoint.message || nls.localize('breakpoint', "Breakpoint")

src/vs/workbench/contrib/debug/browser/media/debug.contribution.css

@@ -54,6 +54,14 @@
 	margin-left: 2px;
 }
 
+/* Do not show call stack decoration when we plan to show breakpoint and top stack frame in one decoration */
+.monaco-editor .debug-breakpoint-placeholder ~ .debug-top-stack-frame-column::before {
+	width: 0em;
+	content: "";
+	margin-right: 0px;
+	margin-left: 0px;
+}
+
 .monaco-editor .debug-top-stack-frame-column::before {
 	height: 1.3em;
 }
@@ -111,10 +119,7 @@
 	background: url('breakpoint-unsupported.svg') center center no-repeat;
 }
 
-.monaco-editor .debug-top-stack-frame.debug-breakpoint,
-.monaco-editor .debug-top-stack-frame.debug-breakpoint-conditional,
-.monaco-editor .debug-top-stack-frame.debug-breakpoint-log,
-.monaco-editor .inline-breakpoint-widget.debug-top-stack-frame-column {
+.monaco-editor .inline-breakpoint-widget.debug-breakpoint-and-top-stack-frame {
 	background: url('current-and-breakpoint.svg') center center no-repeat;
 }