Merge pull request microsoft#151952 from microsoft/3wm

Introduces different colors for input1, input2 and result editor.

Author: hediet

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

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { localize } from 'vs/nls';
+import { registerColor } from 'vs/platform/theme/common/colorRegistry';
+
+export const modifiedBaseRangeInput1 = registerColor(
+	'mergeEditor.modifiedBaseRange.input1',
+	{
+		dark: '#a44c9d53',
+		light: '#a44c9d38',
+		hcDark: '#a44c9d53',
+		hcLight: '#a44c9d38',
+	},
+	localize(
+		'mergeEditor.modifiedBaseRange.input1',
+		'The foreground color for changes in input 1.'
+	)
+);
+
+export const modifiedBaseRangeInput2 = registerColor(
+	'mergeEditor.modifiedBaseRange.input2',
+	{
+		dark: '#878feb53',
+		light: '#878feb53',
+		hcDark: '#878feb53',
+		hcLight: '#878feb53',
+	},
+	localize(
+		'mergeEditor.modifiedBaseRange.input2',
+		'The foreground color for changes in input 2.'
+	)
+);
+
+export const modifiedBaseRangeCombination = registerColor(
+	'mergeEditor.modifiedBaseRange.combination',
+	{
+		dark: '#8a4d249e',
+		light: '#8a4d243e',
+		hcDark: '#8a4d249e',
+		hcLight: '#8a4d243e',
+	},
+	localize(
+		'mergeEditor.modifiedBaseRange.combination',
+		'The foreground color for combined changes in the result editor.'
+	)
+);
+
+export const diffInput1 = registerColor(
+	'mergeEditor.diff.input1',
+	{
+		dark: '#e571db21',
+		light: '#e571db21',
+		hcDark: '#e571db21',
+		hcLight: '#e571db21',
+	},
+	localize(
+		'mergeEditor.diff.input1',
+		'The foreground color for changed words in input 1.'
+	)
+);
+
+export const diffInput2 = registerColor(
+	'mergeEditor.diff.input2',
+	{
+		dark: '#878feb53',
+		light: '#878feb53',
+		hcDark: '#878feb53',
+		hcLight: '#878feb53',
+	},
+	localize(
+		'mergeEditor.diff.input2',
+		'The foreground color for changed words in input 2.'
+	)
+);

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

@@ -33,8 +33,25 @@
 	cursor: pointer;
 }
 
-.merge-base-range-projection {
-	background-color: rgb(170 175 170 / 15%);
+
+.merge-editor-modified-base-range-input1 {
+	background-color: var(--vscode-mergeEditor-modifiedBaseRange-input1);
+}
+
+.merge-editor-diff-input1 {
+	background-color: var(--vscode-mergeEditor-diff-input1);
+}
+
+.merge-editor-modified-base-range-input2 {
+	background-color: var(--vscode-mergeEditor-modifiedBaseRange-input2);
+}
+
+.merge-editor-diff-input2 {
+	background-color: var(--vscode-mergeEditor-diff-input2);
+}
+
+.merge-editor-modified-base-range-combination {
+	background-color: var(--vscode-mergeEditor-modifiedBaseRange-combination);
 }
 
 .gutter-item {

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

@@ -24,6 +24,7 @@ import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { ITextModelService } from 'vs/editor/common/services/resolverService';
+import './colors';
 
 Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane(
 	EditorPaneDescriptor.create(

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

@@ -9,7 +9,7 @@ import { IconLabel } from 'vs/base/browser/ui/iconLabel/iconLabel';
 import { Orientation, Sizing } from 'vs/base/browser/ui/splitview/splitview';
 import { Toggle } from 'vs/base/browser/ui/toggle/toggle';
 import { IAction } from 'vs/base/common/actions';
-import { findLast } from 'vs/base/common/arrays';
+import { CompareResult, findLast } from 'vs/base/common/arrays';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { Codicon } from 'vs/base/common/codicons';
 import { Color } from 'vs/base/common/color';
@@ -48,7 +48,7 @@ import { autorun, autorunWithStore, derivedObservable, IObservable, ITransaction
 import { MergeEditorInput } from 'vs/workbench/contrib/mergeEditor/browser/mergeEditorInput';
 import { MergeEditorModel } from 'vs/workbench/contrib/mergeEditor/browser/mergeEditorModel';
 import { LineRange, ModifiedBaseRange } from 'vs/workbench/contrib/mergeEditor/browser/model';
-import { applyObservableDecorations, n, ReentrancyBarrier, setStyle } from 'vs/workbench/contrib/mergeEditor/browser/utils';
+import { applyObservableDecorations, join, n, ReentrancyBarrier, setStyle } from 'vs/workbench/contrib/mergeEditor/browser/utils';
 import { settingsSashBorder } from 'vs/workbench/contrib/preferences/common/settingsEditorColorRegistry';
 import { IEditorGroup, IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
@@ -432,19 +432,6 @@ function synchronizeScrolling(scrollingEditor: CodeEditorWidget, targetEditor: C
 
 	const factor = Math.min((scrollingEditor.getScrollTop() - sourceStartTopPx) / (sourceEndPx - sourceStartTopPx), 1);
 	const resultScrollPosition = resultStartTopPx + (resultEndPx - resultStartTopPx) * factor;
-	/*
-		console.log({
-			topLineNumber,
-			sourceRange: sourceRange.toString(),
-			targetRange: targetRange.toString(),
-			// resultStartTopPx,
-			// resultEndPx,
-			// sourceStartTopPx,
-			// sourceEndPx,
-			factor,
-			resultScrollPosition,
-			top: scrollingEditor.getScrollTop(),
-		});*/
 
 	targetEditor.setScrollTop(resultScrollPosition, ScrollType.Immediate);
 }
@@ -541,7 +528,7 @@ class InputCodeEditorView extends CodeEditorView {
 					range: new Range(range.startLineNumber, 1, range.endLineNumberExclusive - 1, 1),
 					options: {
 						isWholeLine: true,
-						className: 'merge-base-range-projection',
+						className: `merge-editor-modified-base-range-input${this.inputNumber}`,
 						description: 'Base Range Projection'
 					}
 				});
@@ -666,18 +653,47 @@ class ResultCodeEditorView extends CodeEditorView {
 			return [];
 		}
 		const result = new Array<IModelDeltaDecoration>();
-		for (const m of model.resultDiffs.read(reader)) {
-			const range = m.modifiedRange;
-			if (!range.isEmpty) {
-				result.push({
-					range: new Range(range.startLineNumber, 1, range.endLineNumberExclusive - 1, 1),
-					options: {
-						isWholeLine: true,
-						// TODO
-						className: 'merge-base-range-projection',
-						description: 'Result Diff'
-					}
-				});
+
+		const baseRangeWithStoreAndTouchingDiffs = join(
+			model.modifiedBaseRanges.read(reader),
+			model.resultDiffs.read(reader),
+			(baseRange, diff) =>
+				baseRange.baseRange.touches(diff.originalRange)
+					? CompareResult.neitherLessOrGreaterThan
+					: LineRange.compareByStart(
+						baseRange.baseRange,
+						diff.originalRange
+					)
+		);
+
+		for (const m of baseRangeWithStoreAndTouchingDiffs) {
+			for (const r of m.rights) {
+				const range = r.modifiedRange;
+
+				const state = m.left ? model.getState(m.left).read(reader) : undefined;
+
+				if (!range.isEmpty) {
+					result.push({
+						range: new Range(range.startLineNumber, 1, range.endLineNumberExclusive - 1, 1),
+						options: {
+							isWholeLine: true,
+							// TODO
+
+							className: (() => {
+								if (state) {
+									if (state.input1 && !state.input2) {
+										return 'merge-editor-modified-base-range-input1';
+									}
+									if (state.input2 && !state.input1) {
+										return 'merge-editor-modified-base-range-input2';
+									}
+								}
+								return 'merge-editor-modified-base-range-combination';
+							})(),
+							description: 'Result Diff'
+						}
+					});
+				}
 			}
 		}
 		return result;

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

@@ -183,3 +183,19 @@ export function* leftJoin<TLeft, TRight>(
 		yield { left: leftElement, rights: equals || [] };
 	}
 }
+
+export function* join<TLeft, TRight>(
+	left: Iterable<TLeft>,
+	right: readonly TRight[],
+	compare: (left: TLeft, right: TRight) => CompareResult,
+): IterableIterator<{ left?: TLeft; rights: TRight[] }> {
+	const rightQueue = new ArrayQueue(right);
+	for (const leftElement of left) {
+		const skipped = rightQueue.takeWhile(rightElement => CompareResult.isGreaterThan(compare(leftElement, rightElement)));
+		if (skipped) {
+			yield { rights: skipped };
+		}
+		const equals = rightQueue.takeWhile(rightElement => CompareResult.isNeitherLessOrGreaterThan(compare(leftElement, rightElement)));
+		yield { left: leftElement, rights: equals || [] };
+	}
+}