Implements #160292: diffing against base (#163553)

Author: hediet

src/vs/workbench/contrib/mergeEditor/browser/mergeEditor.contribution.ts

@@ -50,6 +50,11 @@ Registry.as<IConfigurationRegistry>(Extensions.Configuration).registerConfigurat
 				localize('diffAlgorithm.experimental', "Uses an experimental diffing algorithm."),
 			]
 		},
+		'mergeEditor.showDeletionMarkers': {
+			type: 'boolean',
+			default: true,
+			description: 'Controls if deletions in base or one of the inputs should be indicated by a vertical bar.',
+		},
 	}
 });
 

src/vs/workbench/contrib/mergeEditor/browser/view/colors.ts

@@ -18,6 +18,18 @@ export const diffWord = registerColor(
 	localize('mergeEditor.change.word.background', 'The background color for word changes.')
 );
 
+export const diffBase = registerColor(
+	'mergeEditor.changeBase.background',
+	{ dark: '#4B1818FF', light: '#FFCCCCFF', hcDark: '#4B1818FF', hcLight: '#FFCCCCFF', },
+	localize('mergeEditor.changeBase.background', 'The background color for changes in base.')
+);
+
+export const diffWordBase = registerColor(
+	'mergeEditor.changeBase.word.background',
+	{ dark: '#6F1313FF', light: '#FFA3A3FF', hcDark: '#6F1313FF', hcLight: '#FFA3A3FF', },
+	localize('mergeEditor.changeBase.word.background', 'The background color for word changes in base.')
+);
+
 export const conflictBorderUnhandledUnfocused = registerColor(
 	'mergeEditor.conflict.unhandledUnfocused.border',
 	{ dark: '#ffa6007a', light: '#ffa6007a', hcDark: '#ffa6007a', hcLight: '#ffa6007a', },

src/vs/workbench/contrib/mergeEditor/browser/view/editors/baseCodeEditorView.ts

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { reset } from 'vs/base/browser/dom';
+import { h, reset } from 'vs/base/browser/dom';
 import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels';
 import { BugIndicatingError } from 'vs/base/common/errors';
 import { Iterable } from 'vs/base/common/iterator';
@@ -56,6 +56,16 @@ export class BaseCodeEditorView extends CodeEditorView {
 				}
 				this.editor.setModel(vm.model.base);
 				reset(this.htmlElements.title, ...renderLabelWithIcons(localize('base', 'Base')));
+
+				const baseShowDiffAgainst = vm.baseShowDiffAgainst.read(reader);
+
+				let node: Node | undefined = undefined;
+				if (baseShowDiffAgainst) {
+					const label = localize('compareWith', 'Comparing with {0}', baseShowDiffAgainst === 1 ? vm.model.input1.title : vm.model.input2.title);
+					const tooltip = localize('compareWithTooltip', 'Differences are highlighted with a background color.');
+					node = h('span', { title: tooltip }, [label]).root;
+				}
+				reset(this.htmlElements.description, ...(node ? [node] : []));
 			})
 		);
 
@@ -72,6 +82,7 @@ export class BaseCodeEditorView extends CodeEditorView {
 
 		const activeModifiedBaseRange = viewModel.activeModifiedBaseRange.read(reader);
 		const showNonConflictingChanges = viewModel.showNonConflictingChanges.read(reader);
+		const showDeletionMarkers = this.showDeletionMarkers.read(reader);
 
 		const result: IModelDeltaDecoration[] = [];
 		for (const modifiedBaseRange of model.modifiedBaseRanges.read(reader)) {
@@ -95,6 +106,37 @@ export class BaseCodeEditorView extends CodeEditorView {
 			}
 			blockClassNames.push('base');
 
+			const inputToDiffAgainst = viewModel.baseShowDiffAgainst.read(reader);
+
+			if (inputToDiffAgainst) {
+				for (const diff of modifiedBaseRange.getInputDiffs(inputToDiffAgainst)) {
+					const range = diff.inputRange.toInclusiveRange();
+					if (range) {
+						result.push({
+							range,
+							options: {
+								className: `merge-editor-diff base`,
+								description: 'Merge Editor',
+								isWholeLine: true,
+							}
+						});
+					}
+
+					for (const diff2 of diff.rangeMappings) {
+						if (showDeletionMarkers || !diff2.inputRange.isEmpty()) {
+							result.push({
+								range: diff2.inputRange,
+								options: {
+									className: diff2.inputRange.isEmpty() ? `merge-editor-diff-empty-word base` : `merge-editor-diff-word base`,
+									description: 'Merge Editor',
+									showIfCollapsed: true,
+								},
+							});
+						}
+					}
+				}
+			}
+
 			result.push({
 				range: range.toInclusiveRangeOrEmpty(),
 				options: {

src/vs/workbench/contrib/mergeEditor/browser/view/editors/codeEditorView.ts

@@ -64,6 +64,11 @@ export abstract class CodeEditorView extends Disposable {
 		() => /** @description checkboxesVisible */ this.configurationService.getValue('mergeEditor.showCheckboxes') ?? false
 	);
 
+	protected readonly showDeletionMarkers = observableFromEvent<boolean>(
+		this.configurationService.onDidChangeConfiguration,
+		() => /** @description showDeletionMarkers */ this.configurationService.getValue('mergeEditor.showDeletionMarkers')
+	);
+
 	public readonly editor = this.instantiationService.createInstance(
 		CodeEditorWidget,
 		this.htmlElements.editor,

src/vs/workbench/contrib/mergeEditor/browser/view/editors/inputCodeEditorView.ts

@@ -130,6 +130,7 @@ export class InputCodeEditorView extends CodeEditorView {
 		const result = new Array<IModelDeltaDecoration>();
 
 		const showNonConflictingChanges = viewModel.showNonConflictingChanges.read(reader);
+		const showDeletionMarkers = this.showDeletionMarkers.read(reader);
 
 		for (const modifiedBaseRange of model.modifiedBaseRanges.read(reader)) {
 			const range = modifiedBaseRange.getInputRange(this.inputNumber);
@@ -148,7 +149,7 @@ export class InputCodeEditorView extends CodeEditorView {
 			if (modifiedBaseRange.isConflicting) {
 				blockClassNames.push('conflicting');
 			}
-			const inputClassName = this.inputNumber === 1 ? 'input1' : 'input2';
+			const inputClassName = this.inputNumber === 1 ? 'input 1' : 'input 2';
 			blockClassNames.push(inputClassName);
 
 			if (!modifiedBaseRange.isConflicting && !showNonConflictingChanges && isHandled) {
@@ -190,13 +191,16 @@ export class InputCodeEditorView extends CodeEditorView {
 
 					if (diff.rangeMappings) {
 						for (const d of diff.rangeMappings) {
-							result.push({
-								range: d.outputRange,
-								options: {
-									className: `merge-editor-diff-word ${inputClassName}`,
-									description: 'Merge Editor'
-								}
-							});
+							if (showDeletionMarkers || !d.outputRange.isEmpty()) {
+								result.push({
+									range: d.outputRange,
+									options: {
+										className: d.outputRange.isEmpty() ? `merge-editor-diff-empty-word ${inputClassName}` : `merge-editor-diff-word ${inputClassName}`,
+										description: 'Merge Editor',
+										showIfCollapsed: true,
+									}
+								});
+							}
 						}
 					}
 				}

src/vs/workbench/contrib/mergeEditor/browser/view/media/mergeEditor.css

@@ -226,10 +226,6 @@
 	border: 1px solid var(--vscode-mergeEditor-conflict-unhandledFocused-border);
 }
 
-.merge-conflict-input-selection {
-	background-color: red;
-}
-
 .merge-editor-conflict-actions {
 	margin: 0px 3px;
 	overflow: hidden;
@@ -272,3 +268,21 @@
 .fixed-zone-widget {
 	width: 100%;
 }
+
+.merge-editor-diff-empty-word.base {
+	margin-left: 3px;
+	border-left: solid var(--vscode-mergeEditor-changeBase-word-background) 3px;
+}
+
+.merge-editor-diff-empty-word.input {
+	margin-left: 3px;
+	border-left: solid var(--vscode-mergeEditor-change-word-background) 3px;
+}
+
+.merge-editor-diff-word.base {
+	background-color: var(--vscode-mergeEditor-changeBase-word-background);
+}
+
+.merge-editor-diff.base {
+	background-color: var(--vscode-mergeEditor-changeBase-background);
+}

src/vs/workbench/contrib/mergeEditor/browser/view/viewModel.ts

@@ -59,6 +59,16 @@ export class MergeEditorViewModel extends Disposable {
 		return view ? { view, counter: this.counter++ } : lastValue || { view: undefined, counter: this.counter++ };
 	});
 
+	public readonly baseShowDiffAgainst = derived<1 | 2 | undefined>('baseShowDiffAgainst', reader => {
+		const lastFocusedEditor = this.lastFocusedEditor.read(reader);
+		if (lastFocusedEditor.view === this.inputCodeEditorView1) {
+			return 1;
+		} else if (lastFocusedEditor.view === this.inputCodeEditorView2) {
+			return 2;
+		}
+		return undefined;
+	});
+
 	public readonly selectionInBase = derived('selectionInBase', (reader) => {
 		const sourceEditor = this.lastFocusedEditor.read(reader).view;
 		if (!sourceEditor) {