Change:
<img width="288" alt="image" src="https://user-"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
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
So when I see this <img width="76" alt="image" src="https://user-"there is a and an , that is where the different colors come from I think the comes from the normal decoration, then we set the content here and color here It seems like we are hacking editor decorations with css a bit
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
The actual stackframe decorations come from here
The trouble is now we also have this notion of a 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 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.

Discussion:
if (decorations.length === 0) { continue; } <del> decorations.sort((a, b) => { // Sort decorations to render in descending order by zIndex return b.zIndex - a.zIndex; }); </del> <ins> decorations.sort((a, b) => b.zIndex - a.zIndex); // Render winning decorations with the same zIndex together </ins> const winningDecoration: RenderedDecoration = decorations[0]; <ins> const winningDecorationClassNames = [winningDecoration.className]; for (let i = 1; i < decorations.length; i += 1) { const decoration = decorations[i]; if (decoration.zIndex !== winningDecoration.zIndex) { break; } winningDecorationClassNames.push(decoration.className); } </ins> const left = (this._glyphMarginLeft + (lane - 1) * this._lineHeight).toString(); css += ( '<div class="cgmr codicon ' <del> + winningDecoration.className // TODO@joyceerhl Implement overflow for remaining decorations </del> <ins> + winningDecorationClassNames.join(' ') // TODO@joyceerhl Implement overflow for remaining decorations </ins> + common + 'left:' + left + 'px;"></div>' );

import { ICodeEditor } from 'vs/editor/browser/editorBrowser'; import { Range } from 'vs/editor/common/core/range'; import { IEditorContribution } from 'vs/editor/common/editorCommon'; <del> import { IModelDecorationOptions, IModelDeltaDecoration, OverviewRulerLane, TrackedRangeStickiness } from 'vs/editor/common/model'; </del> <ins> import { GlyphMarginLane, IModelDecorationOptions, IModelDeltaDecoration, OverviewRulerLane, TrackedRangeStickiness } from 'vs/editor/common/model'; </ins> import { localize } from 'vs/nls'; import { ILogService } from 'vs/platform/log/common/log'; import { registerColor } from 'vs/platform/theme/common/colorRegistry';

const TOP_STACK_FRAME_MARGIN: IModelDecorationOptions = { description: 'top-stack-frame-margin', glyphMarginClassName: ThemeIcon.asClassName(debugStackframe), <ins> glyphMargin: { position: GlyphMarginLane.Right }, zIndex: 9999, </ins> stickiness, overviewRuler: { position: OverviewRulerLane.Full,

const FOCUSED_STACK_FRAME_MARGIN: IModelDecorationOptions = { description: 'focused-stack-frame-margin', glyphMarginClassName: ThemeIcon.asClassName(debugStackframeFocused), <ins> glyphMargin: { position: GlyphMarginLane.Right }, zIndex: 9999, </ins> stickiness, overviewRuler: { position: OverviewRulerLane.Full,