debug: use top stack frame column inline decoration

src/vs/workbench/parts/debug/browser/debugEditorModelManager.ts

@@ -22,6 +22,7 @@ interface IDebugEditorModelData {
 	breakpointDecorationsAsMap: Map<string, boolean>;
 	currentStackDecorations: string[];
 	dirty: boolean;
+	topStackFrameLine: number;
 }
 
 const stickiness = TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges;
@@ -88,7 +89,8 @@ export class DebugEditorModelManager implements IWorkbenchContribution {
 			breakpointLines: breakpoints.map(bp => bp.lineNumber),
 			breakpointDecorationsAsMap,
 			currentStackDecorations: currentStackDecorations,
-			dirty: false
+			dirty: false,
+			topStackFrameLine: undefined
 		});
 	}
 
@@ -140,11 +142,15 @@ export class DebugEditorModelManager implements IWorkbenchContribution {
 				});
 
 				if (this.modelDataMap.has(modelUriStr)) {
+					const modelData = this.modelDataMap.get(modelUriStr);
+					if (modelData.topStackFrameLine === stackFrame.lineNumber) {
 						result.push({
-						options: DebugEditorModelManager.TOP_STACK_FRAME_COLUMN_DECORATION,
+							options: DebugEditorModelManager.TOP_STACK_FRAME_INLINE_DECORATION,
 							range: wholeLineRange
 						});
 					}
+					modelData.topStackFrameLine = stackFrame.lineNumber;
+				}
 			}
 		} else {
 			result.push({
@@ -350,10 +356,8 @@ export class DebugEditorModelManager implements IWorkbenchContribution {
 		stickiness
 	};
 
-	private static TOP_STACK_FRAME_COLUMN_DECORATION: IModelDecorationOptions = {
-		isWholeLine: false,
-		className: 'debug-top-stack-frame-column',
-		stickiness
+	private static TOP_STACK_FRAME_INLINE_DECORATION: IModelDecorationOptions = {
+		beforeContentClassName: 'debug-top-stack-frame-column'
 	};
 
 	private static FOCUSED_STACK_FRAME_DECORATION: IModelDecorationOptions = {

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

@@ -9,15 +9,15 @@
 }
 
 .monaco-editor .debug-top-stack-frame-line {
-	background: rgba(255, 255, 102, 0.3);
+	background: rgba(255, 255, 102, 0.45);
 }
 
 .monaco-editor .debug-top-stack-frame-exception-line {
 	background: rgba(242, 222, 222, 0.8);
 }
 
-.monaco-editor .debug-top-stack-frame-column {
-	background: rgba(255, 255, 102, 0.75);
+.monaco-editor .debug-top-stack-frame-column::before {
+	background: url('current-arrow.svg') center center no-repeat;
 }
 
 .monaco-editor .debug-focused-stack-frame-line {
@@ -51,7 +51,8 @@
 	background: url('breakpoint.svg') center center no-repeat;
 }
 
-.monaco-editor .debug-breakpoint-column::before {
+.monaco-editor .debug-breakpoint-column::before,
+.monaco-editor .debug-top-stack-frame-column::before {
 	content: " ";
 	width: 0.9em;
 	height: 0.8em;
@@ -181,15 +182,15 @@
 }
 
 .monaco-editor.vs-dark .debug-top-stack-frame-line {
-	background: rgba(255, 255, 0, 0.15)
+	background: rgba(255, 255, 0, 0.2)
 }
 
 .monaco-editor.vs-dark .debug-top-stack-frame-exception-line {
 	background-color: rgba(90, 29, 29, 0.6);
 }
 
-.monaco-editor.vs-dark .debug-top-stack-frame-column {
-	background: rgba(255, 255, 0, 0.25)
+.monaco-editor.vs-dark .debug-top-stack-frame-column::before {
+	background: url('current-arrow-dark.svg') center center no-repeat;
 }
 
 .monaco-editor.vs-dark .debug-breakpoint-glyph,