fix: remove extra div and center label

Pascal Fong Kye · Pascal Fong Kye · commit 11222d7fbd29 · 2020-07-27T20:14:23.000+02:00
diff --git a/src/vs/workbench/contrib/debug/browser/callStackView.ts b/src/vs/workbench/contrib/debug/browser/callStackView.ts
@@ -449,7 +449,6 @@ export class CallStackView extends ViewPane {
 interface IThreadTemplateData {
 	thread: HTMLElement;
 	name: HTMLElement;
-	state: HTMLElement;
 	stateLabel: HTMLSpanElement;
 	label: HighlightedLabel;
 	actionBar: ActionBar;
@@ -458,7 +457,6 @@ interface IThreadTemplateData {
 interface ISessionTemplateData {
 	session: HTMLElement;
 	name: HTMLElement;
-	state: HTMLElement;
 	stateLabel: HTMLSpanElement;
 	label: HighlightedLabel;
 	actionBar: ActionBar;
@@ -500,8 +498,7 @@ class SessionsRenderer implements ICompressibleTreeRenderer<IDebugSession, Fuzzy
 		const session = dom.append(container, $('.session'));
 		dom.append(session, $('.codicon.codicon-bug'));
 		const name = dom.append(session, $('.name'));
-		const state = dom.append(session, $('.state'));
-		const stateLabel = dom.append(state, $('span.label.monaco-count-badge.long'));
+		const stateLabel = dom.append(session, $('span.label.monaco-count-badge.long'));
 		const label = new HighlightedLabel(name, false);
 		const actionBar = new ActionBar(session, {
 			actionViewItemProvider: action => {
@@ -515,7 +512,7 @@ class SessionsRenderer implements ICompressibleTreeRenderer<IDebugSession, Fuzzy
 			}
 		});
 
-		return { session, name, state, stateLabel, label, actionBar, elementDisposable: [] };
+		return { session, name, stateLabel, label, actionBar, elementDisposable: [] };
 	}
 
 	renderElement(element: ITreeNode<IDebugSession, FuzzyScore>, _: number, data: ISessionTemplateData): void {
@@ -581,12 +578,11 @@ class ThreadsRenderer implements ICompressibleTreeRenderer<IThread, FuzzyScore,
 	renderTemplate(container: HTMLElement): IThreadTemplateData {
 		const thread = dom.append(container, $('.thread'));
 		const name = dom.append(thread, $('.name'));
-		const state = dom.append(thread, $('.state'));
-		const stateLabel = dom.append(state, $('span.label'));
+		const stateLabel = dom.append(thread, $('span.label'));
 		const label = new HighlightedLabel(name, false);
 		const actionBar = new ActionBar(thread);
 
-		return { thread, name, state, stateLabel, label, actionBar };
+		return { thread, name, stateLabel, label, actionBar };
 	}
 
 	renderElement(element: ITreeNode<IThread, FuzzyScore>, index: number, data: IThreadTemplateData): void {
diff --git a/src/vs/workbench/contrib/debug/browser/media/debugViewlet.css b/src/vs/workbench/contrib/debug/browser/media/debugViewlet.css
@@ -78,8 +78,8 @@
 }
 
 /* Make icons and text the same color as the list foreground on focus selection */
-.debug-pane .monaco-list:focus .monaco-list-row.selected .state > .label,
-.debug-pane .monaco-list:focus .monaco-list-row.selected.focused .state > .label,
+.debug-pane .monaco-list:focus .monaco-list-row.selected .label,
+.debug-pane .monaco-list:focus .monaco-list-row.selected.focused .label,
 .debug-pane .monaco-list:focus .monaco-list-row.selected .codicon,
 .debug-pane .monaco-list:focus .monaco-list-row.selected.focused .codicon {
 	color: inherit !important;
@@ -120,15 +120,16 @@
 	text-overflow: ellipsis;
 }
 
-.debug-pane .debug-call-stack .thread > .state,
-.debug-pane .debug-call-stack .session > .state {
+.debug-pane .debug-call-stack .thread > .label,
+.debug-pane .debug-call-stack .session > .label {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	padding: 0 10px;
+	margin: 0 10px;
 	text-transform: uppercase;
+	align-self: center;
 }
 
-.debug-pane .debug-call-stack .monaco-list-row:hover .state {
+.debug-pane .debug-call-stack .monaco-list-row:hover .label {
 	display: none;
 }
 
@@ -161,10 +162,12 @@
 	background-repeat: no-repeat;
 }
 
-.debug-pane .debug-call-stack .thread > .state > .label,
-.debug-pane .debug-call-stack .session > .state > .label {
+.debug-pane .debug-call-stack .session > .label,
+.debug-pane .debug-call-stack .session > .label {
 	font-size: 0.8em;
 	min-height: auto;
+	background-color: rgba(136, 136, 136, 0.27);
+	color: #cccccc;
 }
 
 .debug-pane .debug-call-stack .stack-frame {
