Debug frame indicator should go in the same decoration column as breakpoints

[roblourens]

This leads to the editor shifting to the right every time I pause, because it's adding an editor gutter. We actually already have a combo decoration that shows the two things together. I don't actually know exactly how that works but can look it up if you need it.

Actually this combo decoration doesn't exist for all breakpoint types, which is annoying, but that's an issue for me

[joyceerhl]

We actually already have a combo decoration

If you have a code pointer that would be awesome, I wasn't aware we had a notion of combined decorations today. As far as I know in the past we merged the classnames for any decorations that wanted to appear in the glyph margin

vscode/src/vs/editor/browser/viewParts/glyphMargin/glyphMargin.ts

Lines 177 to 185 in 704ed70

	if (classNames.length === 0) {
	output[lineIndex] = '';
	} else {
	output[lineIndex] = (
	'<div class="cgmr codicon '
	+ classNames.join(' ')
	+ common
	);
	}

[roblourens]

So when I see this

there is a ::before and an ::after, that is where the different colors come from

I think the ::before comes from the normal decoration, then we set the ::after content here

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

Lines 34 to 38 in 510f3ee

	.codicon-debug-breakpoint.codicon-debug-stackframe-focused::after,
	.codicon-debug-breakpoint.codicon-debug-stackframe::after {
	content: '\eb8a';
	position: absolute;
	}

and color here

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

Lines 780 to 788 in 510f3ee

	collector.addRule(`
	${icons.allBreakpoints.map(b => `.monaco-workbench ${ThemeIcon.asCSSSelector(b.regular)}`).join(',\n ')},
	.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointUnsupported)},
	.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugBreakpointHint)}:not([class*='codicon-debug-breakpoint']):not([class*='codicon-debug-stackframe']),
	.monaco-workbench ${ThemeIcon.asCSSSelector(icons.breakpoint.regular)}${ThemeIcon.asCSSSelector(icons.debugStackframeFocused)}::after,
	.monaco-workbench ${ThemeIcon.asCSSSelector(icons.breakpoint.regular)}${ThemeIcon.asCSSSelector(icons.debugStackframe)}::after {
	color: ${debugIconBreakpointColor} !important;
	}
	`);

It seems like we are hacking editor decorations with css a bit

[roblourens]

Maybe the solution is just making sure that whatever logic puts breakpoints in their own lane applies to all debug decorations though, so these all get their own lane and its the same, if that makes sense

[roblourens]

The actual stackframe decorations come from here

vscode/src/vs/workbench/contrib/debug/browser/callStackEditorContribution.ts

Line 60 in 510f3ee

export function createDecorationsForStackFrame(stackFrame: IStackFrame, isFocusedSession: boolean, noCharactersBefore: boolean): IModelDeltaDecoration[] {

[joyceerhl]

The trouble is now we also have this notion of a zIndex to ensure e.g. that testing decorations always render atop other decorations, so if there are multiple decorations in the same lane we pick the first one and discard the rest.

To show those decorations together, I think I have to restore the old behavior so that decorations with the same zIndex get the classnames combined like in the previous stable. But as you said that only works because of some CSS hackery, maybe we also want a more formalized way to combine decorations.