Merge pull request #153130 from microsoft/3wm

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

@@ -6,104 +6,91 @@
 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 diff = registerColor(
 	'mergeEditor.diff',
 	{
-		dark: '#d3d3d321',
-		light: '#d3d3d321',
-		hcDark: '#d3d3d321',
-		hcLight: '#d3d3d321',
+		dark: '#9bb95533',
+		light: '#9bb95533',
+		hcDark: '#9bb95533',
+		hcLight: '#9bb95533',
 	},
 	localize(
 		'mergeEditor.diff',
-		'The foreground color for changes in the result.'
+		'The foreground color for changes.'
 	)
 );
 
 export const diffWord = registerColor(
 	'mergeEditor.diff.word',
 	{
-		dark: '#e571db21',
-		light: '#e571db21',
-		hcDark: '#e571db21',
-		hcLight: '#e571db21',
+		dark: '#9bb9551e',
+		light: '#9bb9551e',
+		hcDark: '#9bb9551e',
+		hcLight: '#9bb9551e',
 	},
 	localize(
 		'mergeEditor.diff.word',
-		'The foreground color for word changes in the result.'
+		'The foreground color for word changes.'
 	)
 );
 
-export const diffInput2 = registerColor(
-	'mergeEditor.diff.input2',
+export const conflictBorderUnhandledUnfocused = registerColor(
+	'mergeEditor.conflictBorder.unhandledUnfocused',
 	{
-		dark: '#878feb53',
-		light: '#878feb53',
-		hcDark: '#878feb53',
-		hcLight: '#878feb53',
+		dark: '#ffa6007a',
+		light: '#ffa6007a',
+		hcDark: '#ffa6007a',
+		hcLight: '#ffa6007a',
 	},
 	localize(
-		'mergeEditor.diff.input2',
-		'The foreground color for changed words in input 2.'
+		'mergeEditor.conflictBorder.unhandledUnfocused',
+		'The border color of unhandled unfocused conflicts.'
 	)
 );
 
+export const conflictBorderUnhandledFocused = registerColor(
+	'mergeEditor.conflictBorder.unhandledFocused',
+	{
+		dark: '#ffa600',
+		light: '#ffa600',
+		hcDark: '#ffa600',
+		hcLight: '#ffa600',
+	},
+	localize(
+		'mergeEditor.conflictBorder.unhandledFocused',
+		'The border color of unhandled focused conflicts.'
+	)
+);
+
+export const conflictBorderHandledUnfocused = registerColor(
+	'mergeEditor.conflictBorder.handledUnfocused',
+	{
+		dark: '#86868649',
+		light: '#86868649',
+		hcDark: '#86868649',
+		hcLight: '#86868649',
+	},
+	localize(
+		'mergeEditor.conflictBorder.handledUnfocused',
+		'The border color of handled unfocused conflicts.'
+	)
+);
+
+export const conflictBorderHandledFocused = registerColor(
+	'mergeEditor.conflictBorder.handledFocused',
+	{
+		dark: '#c1c1c1cc',
+		light: '#c1c1c1cc',
+		hcDark: '#c1c1c1cc',
+		hcLight: '#c1c1c1cc',
+	},
+	localize(
+		'mergeEditor.conflictBorder.handledFocused',
+		'The border color of handled focused conflicts.'
+	)
+);
+
+
 export const handledConflictMinimapOverViewRulerColor = registerColor(
 	'mergeEditor.conflict-handled.minimapOverViewRuler',
 	{
@@ -118,7 +105,6 @@ export const handledConflictMinimapOverViewRulerColor = registerColor(
 	)
 );
 
-
 export const unhandledConflictMinimapOverViewRulerColor = registerColor(
 	'mergeEditor.conflict-unhandled.minimapOverViewRuler',
 	{
@@ -132,4 +118,3 @@ export const unhandledConflictMinimapOverViewRulerColor = registerColor(
 		'The foreground color for changes in input 1.'
 	)
 );
-

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

@@ -36,24 +36,23 @@ export class InputCodeEditorView extends CodeEditorView {
 
 			const range = modifiedBaseRange.getInputRange(this.inputNumber);
 			if (range && !range.isEmpty) {
-
-
 				const blockClassNames = ['merge-editor-block'];
 				const isHandled = model.isHandled(modifiedBaseRange).read(reader);
 				if (isHandled) {
 					blockClassNames.push('handled');
 				}
 				if (modifiedBaseRange === activeModifiedBaseRange) {
-					blockClassNames.push('active');
+					blockClassNames.push('focused');
 				}
-				blockClassNames.push('input' + this.inputNumber);
+				const inputClassName = this.inputNumber === 1 ? 'input1' : 'input2';
+				blockClassNames.push(inputClassName);
 
 				result.push({
 					range: range.toInclusiveRange()!,
 					options: {
 						isWholeLine: true,
 						blockClassName: blockClassNames.join(' '),
-						description: 'Base Range Projection',
+						description: 'Merge Editor',
 						minimap: {
 							position: MinimapPosition.Gutter,
 							color: { id: isHandled ? handledConflictMinimapOverViewRulerColor : unhandledConflictMinimapOverViewRulerColor },
@@ -67,13 +66,25 @@ export class InputCodeEditorView extends CodeEditorView {
 
 				const inputDiffs = modifiedBaseRange.getInputDiffs(this.inputNumber);
 				for (const diff of inputDiffs) {
+					const range = diff.outputRange.toInclusiveRange();
+					if (range) {
+						result.push({
+							range,
+							options: {
+								className: `merge-editor-diff ${inputClassName}`,
+								description: 'Merge Editor',
+								isWholeLine: true,
+							}
+						});
+					}
+
 					if (diff.rangeMappings) {
 						for (const d of diff.rangeMappings) {
 							result.push({
 								range: d.outputRange,
 								options: {
-									className: `merge-editor-diff-input1`,
-									description: 'Base Range Projection'
+									className: `merge-editor-diff-word ${inputClassName}`,
+									description: 'Merge Editor'
 								}
 							});
 						}

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

@@ -46,7 +46,7 @@ export class ResultCodeEditorView extends CodeEditorView {
 						blockClassNames.push('handled');
 					}
 					if (modifiedBaseRange === activeModifiedBaseRange) {
-						blockClassNames.push('active');
+						blockClassNames.push('focused');
 					}
 					blockClassNames.push('result');
 
@@ -68,6 +68,32 @@ export class ResultCodeEditorView extends CodeEditorView {
 					});
 				}
 			}
+
+			for (const diff of m.rights) {
+				const range = diff.outputRange.toInclusiveRange();
+				if (range) {
+					result.push({
+						range,
+						options: {
+							className: `merge-editor-diff result`,
+							description: 'Merge Editor',
+							isWholeLine: true,
+						}
+					});
+				}
+
+				if (diff.rangeMappings) {
+					for (const d of diff.rangeMappings) {
+						result.push({
+							range: d.outputRange,
+							options: {
+								className: `merge-editor-diff-word result`,
+								description: 'Merge Editor'
+							}
+						});
+					}
+				}
+			}
 		}
 		return result;
 	});

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

@@ -29,52 +29,29 @@
 	flex-grow: 0;
 }
 
-.monaco-editor .merge-accept-conflict-glyph {
-	cursor: pointer;
-}
-
-.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);
-}
-
-.merge-editor-modified-base-range {
+.merge-editor-diff {
 	background-color: var(--vscode-mergeEditor-diff);
 }
 
-.merge-editor-block {
-	border: 2px solid rgba(255, 166, 0, 0.479);
+.merge-editor-diff-word {
+	background-color: var(--vscode-mergeEditor-diff-word);
 }
 
-.merge-editor-block.active {
-	border: 2px solid orange;
+.merge-editor-block {
+	border: 2px solid var(--vscode-mergeEditor-conflictBorder-unhandledUnfocused);
+}
+
+.merge-editor-block.focused {
+	border: 2px solid var(--vscode-mergeEditor-conflictBorder-unhandledFocused);
 }
 
 .merge-editor-block.handled {
-	border: 2px solid rgba(134, 134, 134, 0.285);
+	border: 2px solid var(--vscode-mergeEditor-conflictBorder-handledUnfocused);
 
 }
-.merge-editor-block.handled.active {
-	border: 2px solid rgb(134, 134, 134, 0.8);
-}
 
-.merge-editor-block.handled.active {
-	border: 2px solid rgba(193, 193, 193, 0.8);
+.merge-editor-block.handled.focused {
+	border: 2px solid var(--vscode-mergeEditor-conflictBorder-handledFocused);
 }
 
 .gutter-item {
@@ -121,6 +98,6 @@
 	background-color: var(--vscode-checkbox-border);
 }
 
-.checkbox-background {
+.merge-accept-gutter-marker .checkbox-background {
 	background: var(--vscode-editor-background);
 }