From 13438fb09f9085d27d4e1d64acfc15520aa415fc Mon Sep 17 00:00:00 2001
From: Henning Dieterichs <hdieterichs@microsoft.com>
Date: Mon, 8 Nov 2021 14:00:00 +0100
Subject: [PATCH] Adopts injected text for breakpoint space decoration.

---
 .../browser/breakpointEditorContribution.ts      | 16 +++++++++++++---
 .../debug/browser/media/debug.contribution.css   |  8 +++++++-
 .../debug/test/browser/breakpoints.test.ts       |  2 +-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts b/src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts
index 04317e2bc55..5003be9dfdd 100644
--- a/src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts
+++ b/src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts
@@ -73,6 +73,8 @@ export function createBreakpointDecorations(model: ITextModel, breakpoints: Read
 	return result;
 }
 
+const noBreakWhitespace = '\xa0';
+
 function getBreakpointDecorationOptions(model: ITextModel, breakpoint: IBreakpoint, state: State, breakpointsActivated: boolean, showBreakpointsInOverviewRuler: boolean): IModelDecorationOptions {
 	const { icon, message } = getBreakpointMessageAndIcon(state, breakpointsActivated, breakpoint, undefined);
 	let glyphMarginHoverMessage: MarkdownString | undefined;
@@ -100,7 +102,11 @@ function getBreakpointDecorationOptions(model: ITextModel, breakpoint: IBreakpoi
 		glyphMarginClassName: ThemeIcon.asClassName(icon),
 		glyphMarginHoverMessage,
 		stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
-		beforeContentClassName: renderInline ? `debug-breakpoint-placeholder` : undefined,
+		before: renderInline ? {
+			content: noBreakWhitespace,
+			inlineClassName: `debug-breakpoint-placeholder`,
+			inlineClassNameAffectsLetterSpacing: true
+		} : undefined,
 		overviewRuler: overviewRulerDecoration
 	};
 }
@@ -133,7 +139,11 @@ async function createCandidateDecorations(model: ITextModel, breakpointDecoratio
 							options: {
 								description: 'breakpoint-placeholder-decoration',
 								stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
-								beforeContentClassName: breakpointAtPosition ? undefined : `debug-breakpoint-placeholder`
+								before: breakpointAtPosition ? undefined : {
+									content: noBreakWhitespace,
+									inlineClassName: `debug-breakpoint-placeholder`,
+									inlineClassNameAffectsLetterSpacing: true
+								},
 							},
 							breakpoint: breakpointAtPosition ? breakpointAtPosition.breakpoint : undefined
 						});
@@ -466,7 +476,7 @@ export class BreakpointEditorContribution implements IBreakpointEditorContributi
 			this.breakpointDecorations = decorationIds.map((decorationId, index) => {
 				let inlineWidget: InlineBreakpointWidget | undefined = undefined;
 				const breakpoint = breakpoints[index];
-				if (desiredBreakpointDecorations[index].options.beforeContentClassName) {
+				if (desiredBreakpointDecorations[index].options.before) {
 					const contextMenuActions = () => this.getContextMenuActions([breakpoint], activeCodeEditor.getModel().uri, breakpoint.lineNumber, breakpoint.column);
 					inlineWidget = new InlineBreakpointWidget(activeCodeEditor, decorationId, desiredBreakpointDecorations[index].options.glyphMarginClassName, breakpoint, this.debugService, this.contextMenuService, contextMenuActions);
 				}
diff --git a/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css b/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css
index dce0bd9ab47..d8d1c897632 100644
--- a/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css
+++ b/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css
@@ -30,7 +30,13 @@
 	left: -8px !important;
 }
 
-.monaco-editor .debug-breakpoint-placeholder::before,
+.monaco-editor .debug-breakpoint-placeholder {
+	width: 0.9em;
+	display: inline-flex;
+	vertical-align: middle;
+	margin-top: -1px;
+}
+
 .monaco-editor .debug-top-stack-frame-column::before {
 	content: ' ';
 	width: 0.9em;
diff --git a/src/vs/workbench/contrib/debug/test/browser/breakpoints.test.ts b/src/vs/workbench/contrib/debug/test/browser/breakpoints.test.ts
index b3d0cf795ab..6c7a6a4eaa9 100644
--- a/src/vs/workbench/contrib/debug/test/browser/breakpoints.test.ts
+++ b/src/vs/workbench/contrib/debug/test/browser/breakpoints.test.ts
@@ -358,7 +358,7 @@ suite('Debug - Breakpoints', () => {
 		assert.deepStrictEqual(decorations[1].range, new Range(2, 4, 2, 5));
 		assert.deepStrictEqual(decorations[2].range, new Range(3, 5, 3, 6));
 		assert.strictEqual(decorations[0].options.beforeContentClassName, undefined);
-		assert.strictEqual(decorations[1].options.beforeContentClassName, `debug-breakpoint-placeholder`);
+		assert.strictEqual(decorations[1].options.before?.inlineClassName, `debug-breakpoint-placeholder`);
 		assert.strictEqual(decorations[0].options.overviewRuler?.position, OverviewRulerLane.Left);
 		const expected = new MarkdownString().appendCodeblock(languageId, 'Expression condition: x > 5');
 		assert.deepStrictEqual(decorations[0].options.glyphMarginHoverMessage, expected);