debug: collapse identical lines in the debug console

fixes #104162

src/vs/workbench/contrib/debug/browser/media/repl.css

@@ -38,6 +38,15 @@
 	margin-right: 4px;
 }
 
+.monaco-workbench .repl .repl-tree .output.expression.value-and-source .count-badge-wrapper {
+	margin-right: 2px;
+}
+
+/* Allow the badge to be a bit shorter so it does not look cut off */
+.monaco-workbench .repl .repl-tree .output.expression.value-and-source .count-badge-wrapper .monaco-count-badge {
+	min-height: 16px;
+}
+
 .monaco-workbench .repl .repl-tree .monaco-tl-contents .arrow {
 	position:absolute;
 	left: 2px;

src/vs/workbench/contrib/debug/browser/replViewer.ts

@@ -23,6 +23,8 @@ import { IReplElementSource, IDebugService, IExpression, IReplElement, IDebugCon
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
 import { localize } from 'vs/nls';
+import { CountBadge } from 'vs/base/browser/ui/countBadge/countBadge';
+import { attachBadgeStyler } from 'vs/platform/theme/common/styler';
 
 const $ = dom.$;
 
@@ -40,10 +42,13 @@ interface IReplEvaluationResultTemplateData {
 
 interface ISimpleReplElementTemplateData {
 	container: HTMLElement;
+	count: CountBadge;
+	countContainer: HTMLElement;
 	value: HTMLElement;
 	source: HTMLElement;
 	getReplElementSource(): IReplElementSource | undefined;
 	toDispose: IDisposable[];
+	elementListener: IDisposable;
 }
 
 interface IRawObjectReplTemplateData {
@@ -151,9 +156,12 @@ export class ReplSimpleElementsRenderer implements ITreeRenderer<SimpleReplEleme
 		const expression = dom.append(container, $('.output.expression.value-and-source'));
 
 		data.container = container;
+		data.countContainer = dom.append(expression, $('.count-badge-wrapper'));
+		data.count = new CountBadge(data.countContainer);
 		data.value = dom.append(expression, $('span.value'));
 		data.source = dom.append(expression, $('.source'));
 		data.toDispose = [];
+		data.toDispose.push(attachBadgeStyler(data.count, this.themeService));
 		data.toDispose.push(dom.addDisposableListener(data.source, 'click', e => {
 			e.preventDefault();
 			e.stopPropagation();
@@ -172,6 +180,8 @@ export class ReplSimpleElementsRenderer implements ITreeRenderer<SimpleReplEleme
 	}
 
 	renderElement({ element }: ITreeNode<SimpleReplElement, FuzzyScore>, index: number, templateData: ISimpleReplElementTemplateData): void {
+		this.setElementCount(element, templateData);
+		templateData.elementListener = element.onDidChangeCount(() => this.setElementCount(element, templateData));
 		// value
 		dom.clearNode(templateData.value);
 		// Reset classes to clear ansi decorations since templates are reused
@@ -185,9 +195,22 @@ export class ReplSimpleElementsRenderer implements ITreeRenderer<SimpleReplEleme
 		templateData.getReplElementSource = () => element.sourceData;
 	}
 
+	private setElementCount(element: SimpleReplElement, templateData: ISimpleReplElementTemplateData): void {
+		if (element.count >= 2) {
+			templateData.count.setCount(element.count);
+			templateData.countContainer.hidden = false;
+		} else {
+			templateData.countContainer.hidden = true;
+		}
+	}
+
 	disposeTemplate(templateData: ISimpleReplElementTemplateData): void {
 		dispose(templateData.toDispose);
 	}
+
+	disposeElement(_element: ITreeNode<SimpleReplElement, FuzzyScore>, _index: number, templateData: ISimpleReplElementTemplateData): void {
+		templateData.elementListener.dispose();
+	}
 }
 
 export class ReplVariablesRenderer extends AbstractExpressionsRenderer {

src/vs/workbench/contrib/debug/common/replModel.ts

@@ -11,12 +11,16 @@ import { isString, isUndefinedOrNull, isObject } from 'vs/base/common/types';
 import { basenameOrAuthority } from 'vs/base/common/resources';
 import { URI } from 'vs/base/common/uri';
 import { generateUuid } from 'vs/base/common/uuid';
-import { Emitter } from 'vs/base/common/event';
+import { Emitter, Event } from 'vs/base/common/event';
 
 const MAX_REPL_LENGTH = 10000;
 let topReplElementCounter = 0;
 
 export class SimpleReplElement implements IReplElement {
+
+	private _count = 1;
+	private _onDidChangeCount = new Emitter<void>();
+
 	constructor(
 		public session: IDebugSession,
 		private id: string,
@@ -33,6 +37,19 @@ export class SimpleReplElement implements IReplElement {
 	getId(): string {
 		return this.id;
 	}
+
+	set count(value: number) {
+		this._count = value;
+		this._onDidChangeCount.fire();
+	}
+
+	get count(): number {
+		return this._count;
+	}
+
+	get onDidChangeCount(): Event<void> {
+		return this._onDidChangeCount.event;
+	}
 }
 
 export class RawObjectReplElement implements IExpression {
@@ -202,13 +219,21 @@ export class ReplModel {
 
 		if (typeof data === 'string') {
 			const previousElement = this.replElements.length ? this.replElements[this.replElements.length - 1] : undefined;
-			if (previousElement instanceof SimpleReplElement && previousElement.severity === sev && !previousElement.value.endsWith('\n') && !previousElement.value.endsWith('\r\n')) {
-				previousElement.value += data;
-				this._onDidChangeElements.fire();
-			} else {
-				const element = new SimpleReplElement(session, `topReplElement:${topReplElementCounter++}`, data, sev, source);
-				this.addReplElement(element);
+			if (previousElement instanceof SimpleReplElement && previousElement.severity === sev) {
+				if (previousElement.value === data) {
+					previousElement.count++;
+					// No need to fire an event, just the count updates and badge will adjust automatically
+					return;
+				}
+				if (!previousElement.value.endsWith('\n') && !previousElement.value.endsWith('\r\n')) {
+					previousElement.value += data;
+					this._onDidChangeElements.fire();
+					return;
+				}
 			}
+
+			const element = new SimpleReplElement(session, `topReplElement:${topReplElementCounter++}`, data, sev, source);
+			this.addReplElement(element);
 		} else {
 			// TODO@Isidor hack, we should introduce a new type which is an output that can fetch children like an expression
 			(<any>data).severity = sev;