Change:
Testing Badge should use text ellipsis when there is not enough room to display the full message: !
Good catch. Yes, we should improve this.
Not for endgame since we always behaved like this. Moving out of milestone and opening up for PRs. Code pointer

Discussion:
interface IThreadTemplateData { thread: HTMLElement; name: HTMLElement; <del> state: HTMLElement; </del> stateLabel: HTMLSpanElement; label: HighlightedLabel; actionBar: ActionBar;

interface ISessionTemplateData { session: HTMLElement; name: HTMLElement; <del> state: HTMLElement; </del> stateLabel: HTMLSpanElement; label: HighlightedLabel; actionBar: ActionBar;

const session = dom.append(container, $('.session')); dom.append(session, $('.codicon.codicon-bug')); const name = dom.append(session, $('.name')); <del> const state = dom.append(session, $('.state')); const stateLabel = dom.append(state, $('span.label.monaco-count-badge.long')); </del> <ins> const stateLabel = dom.append(session, $('span.state.label.monaco-count-badge.long')); </ins> const label = new HighlightedLabel(name, false); const actionBar = new ActionBar(session, { actionViewItemProvider: action => {

} }); <del> return { session, name, state, stateLabel, label, actionBar, elementDisposable: [] }; </del> <ins> return { session, name, stateLabel, label, actionBar, elementDisposable: [] }; </ins> } renderElement(element: ITreeNode<IDebugSession, FuzzyScore>, _: number, data: ISessionTemplateData): void {

renderTemplate(container: HTMLElement): IThreadTemplateData { const thread = dom.append(container, $('.thread')); const name = dom.append(thread, $('.name')); <del> const state = dom.append(thread, $('.state')); const stateLabel = dom.append(state, $('span.label')); </del> <ins> const stateLabel = dom.append(thread, $('span.state.label')); </ins> const label = new HighlightedLabel(name, false); const actionBar = new ActionBar(thread); <del> return { thread, name, state, stateLabel, label, actionBar }; </del> <ins> return { thread, name, stateLabel, label, actionBar }; </ins> } renderElement(element: ITreeNode<IThread, FuzzyScore>, index: number, data: IThreadTemplateData): void {

/* State "badge" displaying the active session's current state. * Only visible when there are more active debug sessions/threads running. */ <del> .debug-pane .debug-call-stack .thread > .state > .label, .debug-pane .debug-call-stack .session > .state > .label, .debug-pane .monaco-list-row.selected .thread > .state > .label, .debug-pane .monaco-list-row.selected .session > .state > .label { </del> <ins> .debug-pane .debug-call-stack .thread > .state.label, .debug-pane .debug-call-stack .session > .state.label, .debug-pane .monaco-list-row.selected .thread > .state.label, .debug-pane .monaco-list-row.selected .session > .state.label { </ins> background-color: ${debugViewStateLabelBackgroundColor}; color: ${debugViewStateLabelForegroundColor}; }

} /* Make icons and text the same color as the list foreground on focus selection */ <del> .debug-pane .monaco-list:focus .monaco-list-row.selected .state > .label, .debug-pane .monaco-list:focus .monaco-list-row.selected.focused .state > .label, </del> <ins> .debug-pane .monaco-list:focus .monaco-list-row.selected .state.label, .debug-pane .monaco-list:focus .monaco-list-row.selected.focused .state.label, </ins> .debug-pane .monaco-list:focus .monaco-list-row.selected .codicon, .debug-pane .monaco-list:focus .monaco-list-row.selected.focused .codicon { color: inherit !important;

text-overflow: ellipsis; } <del> .debug-pane .debug-call-stack .thread > .state, .debug-pane .debug-call-stack .session > .state { display: flex; align-items: center; text-align: right; </del> <ins> .debug-pane .debug-call-stack .thread > .state.label, .debug-pane .debug-call-stack .session > .state.label { </ins> overflow: hidden; text-overflow: ellipsis; <del> padding: 0 10px; </del> <ins> margin: 0 10px; </ins> text-transform: uppercase; <ins> align-self: center; font-size: 0.8em; </ins> } <del> .debug-pane .debug-call-stack .monaco-list-row:hover .state { </del> <ins> .debug-pane .debug-call-stack .monaco-list-row:hover .state.label { </ins> display: none; }

background-repeat: no-repeat; } <del> .debug-pane .debug-call-stack .thread > .state > .label, .debug-pane .debug-call-stack .session > .state > .label { font-size: 0.8em; min-height: auto; } </del> .debug-pane .debug-call-stack .stack-frame { overflow: hidden; text-overflow: ellipsis;