Improves merge marker presentation in merge editor. (microsoft#158738)

Author: hediet

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

@@ -4,54 +4,101 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { h } from 'vs/base/browser/dom';
-import { Disposable } from 'vs/base/common/lifecycle';
+import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
+import { autorun, IObservable } from 'vs/base/common/observable';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { ITextModel } from 'vs/editor/common/model';
 import { LineRange } from 'vs/workbench/contrib/mergeEditor/browser/model/lineRange';
+import { MergeEditorViewModel } from 'vs/workbench/contrib/mergeEditor/browser/view/viewModel';
+import * as nls from 'vs/nls';
 
 export const conflictMarkers = {
 	start: '<<<<<<<',
 	end: '>>>>>>>',
 };
 
 export class MergeMarkersController extends Disposable {
-	public static ID = 'editor.contrib.mergeConflictsController';
-
 	private readonly viewZoneIds: string[] = [];
+	private readonly disposableStore = new DisposableStore();
 
 	public constructor(
-		public readonly editor: ICodeEditor
+		public readonly editor: ICodeEditor,
+		public readonly mergeEditorViewModel: IObservable<MergeEditorViewModel | undefined>,
 	) {
 		super();
 
-		editor.onDidChangeModelContent(e => {
-			this.updateDecorations(editor);
-		});
+		this._register(editor.onDidChangeModelContent(e => {
+			this.updateDecorations();
+		}));
 
-		editor.onDidChangeModel(e => {
-			this.updateDecorations(editor);
-		});
+		this._register(editor.onDidChangeModel(e => {
+			this.updateDecorations();
+		}));
 
-		this.updateDecorations(editor);
+		this.updateDecorations();
 	}
 
-	private updateDecorations(editor: ICodeEditor) {
+	private updateDecorations() {
 		const model = this.editor.getModel();
 		const blocks = model ? getBlocks(model, { blockToRemoveStartLinePrefix: conflictMarkers.start, blockToRemoveEndLinePrefix: conflictMarkers.end }) : { blocks: [] };
 
-		editor.setHiddenAreas(blocks.blocks.map(b => b.lineRange.deltaEnd(-1).toRange()), this);
-		editor.changeViewZones(c => {
+		this.editor.setHiddenAreas(blocks.blocks.map(b => b.lineRange.deltaEnd(-1).toRange()), this);
+		this.editor.changeViewZones(c => {
+			this.disposableStore.clear();
 			for (const id of this.viewZoneIds) {
 				c.removeZone(id);
 			}
 			this.viewZoneIds.length = 0;
 			for (const b of blocks.blocks) {
+
+				const startLine = model!.getLineContent(b.lineRange.startLineNumber).substring(0, 20);
+				const endLine = model!.getLineContent(b.lineRange.endLineNumberExclusive - 1).substring(0, 20);
+
+				const domNode = h('div', [
+					h('div.conflict-zone-root', [
+						h('pre', [startLine]),
+						h('span.dots', ['...']),
+						h('pre', [endLine]),
+						h('span.text', [nls.localize('conflictingLines', "Conflicting Lines")]),
+					]),
+				]).root;
 				this.viewZoneIds.push(c.addZone({
 					afterLineNumber: b.lineRange.endLineNumberExclusive - 1,
-					domNode: h('div.conflict-zone', [
-						h('div.conflict-zone-root', [h('div.conflict-zone-button', ['Conflict Marker'])]),
-					]).root,
-					heightInLines: 1,
+					domNode,
+					heightInLines: 1.5,
+				}));
+
+				const updateWidth = () => {
+					const layoutInfo = this.editor.getLayoutInfo();
+					domNode.style.width = `${layoutInfo.contentWidth - layoutInfo.verticalScrollbarWidth}px`;
+				};
+
+				this.disposableStore.add(
+					this.editor.onDidLayoutChange(() => {
+						updateWidth();
+					})
+				);
+				updateWidth();
+
+
+				this.disposableStore.add(autorun('update classname', reader => {
+					const vm = this.mergeEditorViewModel.read(reader);
+					if (!vm) {
+						return;
+					}
+					const activeRange = vm.activeModifiedBaseRange.read(reader);
+
+					const classNames: string[] = [];
+					classNames.push('conflict-zone');
+
+					if (activeRange) {
+						const activeRangeInResult = vm.model.getRangeInResult(activeRange.baseRange, reader);
+						if (activeRangeInResult.intersects(b.lineRange)) {
+							classNames.push('focused');
+						}
+					}
+
+					domNode.className = classNames.join(' ');
 				}));
 			}
 		});

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

@@ -111,4 +111,9 @@ export class LineRange {
 		}
 		return new Range(this.startLineNumber, 1, this.endLineNumberExclusive - 1, Constants.MAX_SAFE_SMALL_INTEGER);
 	}
+
+	intersects(lineRange: LineRange) {
+		return this.startLineNumber <= lineRange.endLineNumberExclusive
+			&& lineRange.startLineNumber <= this.endLineNumberExclusive;
+	}
 }

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

@@ -54,3 +54,9 @@ export const unhandledConflictMinimapOverViewRulerColor = registerColor(
 	{ dark: '#fcba03FF', light: '#fcba03FF', hcDark: '#fcba03FF', hcLight: '#fcba03FF', },
 	localize('mergeEditor.conflict.unhandled.minimapOverViewRuler', 'The foreground color for changes in input 1.')
 );
+
+export const conflictingLinesBackground = registerColor(
+	'mergeEditor.conflictingLines.background',
+	{ dark: '#ffea0047', light: '#ffea0047', hcDark: '#ffea0047', hcLight: '#ffea0047', },
+	localize('mergeEditor.conflictingLines.background', 'The background of the "Conflicting Lines" text.')
+);

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

@@ -6,7 +6,6 @@
 import { CompareResult } from 'vs/base/common/arrays';
 import { BugIndicatingError } from 'vs/base/common/errors';
 import { autorun, derived } from 'vs/base/common/observable';
-import { EditorExtensionsRegistry, IEditorContributionDescription } from 'vs/editor/browser/editorExtensions';
 import { IModelDeltaDecoration, MinimapPosition, OverviewRulerLane } from 'vs/editor/common/model';
 import { localize } from 'vs/nls';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@@ -113,6 +112,8 @@ export class ResultCodeEditorView extends CodeEditorView {
 
 		this._register(applyObservableDecorations(this.editor, this.decorations));
 
+		this._register(new MergeMarkersController(this.editor, this.viewModel));
+
 		this.htmlElements.gutterDiv.style.width = '5px';
 
 		this._register(
@@ -147,11 +148,4 @@ export class ResultCodeEditorView extends CodeEditorView {
 
 		}));
 	}
-
-	protected override getEditorContributions(): IEditorContributionDescription[] | undefined {
-		return [
-			...EditorExtensionsRegistry.getEditorContributions(),
-			{ id: MergeMarkersController.ID, ctor: MergeMarkersController }
-		] as IEditorContributionDescription[];
-	}
 }

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

@@ -159,12 +159,41 @@
 }
 
 .conflict-zone-root {
+	border: 2px solid var(--vscode-mergeEditor-conflict-unhandledUnfocused-border);
+	background-color: var(--vscode-mergeEditor-change-background);
+
+	height: 90%;
+	display: flex;
+	align-items: center;
+	align-content: center;
+}
+
+.conflict-zone-root .dots {
+	margin: 0 10px;
+}
+
+.conflict-zone-root pre {
+	display: 'inline';
+	font-family: var(--monaco-monospace-font);
+}
+
+.conflict-zone-root .text {
+	margin-left: auto;
+	padding: 0 12px;
 	display: flex;
+	align-items: center;
+	background: var(--vscode-mergeEditor-conflictingLines-background);
+	height: 100%;
+	white-space: nowrap;
+	overflow: hidden;
 }
 
-.conflict-zone-button {
-	border: 1px solid red;
-	background: #ec010147;
-	padding: 0px 10px;
-	border-radius: 4px;
+
+.focused.conflict-zone .conflict-zone-root {
+	border: 2px solid var(--vscode-mergeEditor-conflict-unhandledFocused-border);
+}
+
+
+.view-zones {
+	z-index: 10000000;
 }