Implements settings useMixedLinesDiff and useInterleavedLinesDiff (microsoft#233102)

Author: hediet

src/vs/editor/browser/widget/diffEditor/components/diffEditorViewZones/renderLines.ts

@@ -83,9 +83,9 @@ export function renderLines(source: LineSource, options: RenderOptions, decorati
 export class LineSource {
 	constructor(
 		public readonly lineTokens: LineTokens[],
-		public readonly lineBreakData: (ModelLineProjectionData | null)[],
-		public readonly mightContainNonBasicASCII: boolean,
-		public readonly mightContainRTL: boolean,
+		public readonly lineBreakData: (ModelLineProjectionData | null)[] = lineTokens.map(t => null),
+		public readonly mightContainNonBasicASCII: boolean = true,
+		public readonly mightContainRTL: boolean = true,
 	) { }
 }
 

src/vs/editor/common/config/editorOptions.ts

@@ -4152,8 +4152,8 @@ export interface IInlineSuggestOptions {
 	edits?: {
 		experimental?: {
 			enabled?: boolean;
-			// side-by-side, mixed lines diff, interleaved lines diff
-			useMixedLinesDiff?: 'never' | 'whenPossible';
+			useMixedLinesDiff?: 'never' | 'whenPossible' | 'afterJumpWhenPossible';
+			useInterleavedLinesDiff?: 'never' | 'always' | 'afterJump';
 		};
 	};
 }
@@ -4184,6 +4184,7 @@ class InlineEditorSuggest extends BaseEditorOption<EditorOption.inlineSuggest, I
 				experimental: {
 					enabled: true,
 					useMixedLinesDiff: 'never',
+					useInterleavedLinesDiff: 'never',
 				},
 			},
 		};
@@ -4233,6 +4234,12 @@ class InlineEditorSuggest extends BaseEditorOption<EditorOption.inlineSuggest, I
 					description: nls.localize('inlineSuggest.edits.experimental.useMixedLinesDiff', "Controls whether to enable experimental edits in inline suggestions."),
 					enum: ['never', 'whenPossible'],
 				},
+				'editor.inlineSuggest.edits.experimental.useInterleavedLinesDiff': {
+					type: 'string',
+					default: defaults.edits.experimental.useInterleavedLinesDiff,
+					description: nls.localize('inlineSuggest.edits.experimental.useInterleavedLinesDiff', "Controls whether to enable experimental interleaved lines diff in inline suggestions."),
+					enum: ['never', 'always', 'afterJump'],
+				},
 			}
 		);
 	}
@@ -4253,7 +4260,8 @@ class InlineEditorSuggest extends BaseEditorOption<EditorOption.inlineSuggest, I
 			edits: {
 				experimental: {
 					enabled: boolean(input.edits?.experimental?.enabled, this.defaultValue.edits.experimental.enabled),
-					useMixedLinesDiff: stringSet(input.edits?.experimental?.useMixedLinesDiff, this.defaultValue.edits.experimental.useMixedLinesDiff, ['never', 'whenPossible']),
+					useMixedLinesDiff: stringSet(input.edits?.experimental?.useMixedLinesDiff, this.defaultValue.edits.experimental.useMixedLinesDiff, ['never', 'whenPossible', 'afterJumpWhenPossible']),
+					useInterleavedLinesDiff: stringSet(input.edits?.experimental?.useInterleavedLinesDiff, this.defaultValue.edits.experimental.useInterleavedLinesDiff, ['never', 'always', 'afterJump']),
 				},
 			},
 		};

src/vs/editor/common/tokens/lineTokens.ts

@@ -280,6 +280,14 @@ export class LineTokens implements IViewLineTokens {
 			callback(tokenIndex);
 		}
 	}
+
+	toString(): string {
+		let result = '';
+		this.forEach((i) => {
+			result += `[${this.getTokenText(i)}]{${this.getClassName(i)}}`;
+		});
+		return result;
+	}
 }
 
 class SliceLineTokens implements IViewLineTokens {

src/vs/editor/contrib/inlineCompletions/browser/model/inlineCompletionsModel.ts

@@ -299,11 +299,14 @@ export class InlineCompletionsModel extends Disposable {
 			const currentItemIsCollapsed = !disableCollapsing && (cursorDist > 1 && this._collapsedInlineEditId.read(reader) === item.inlineEditCompletion.semanticId);
 
 			const commands = item.inlineEditCompletion.inlineCompletion.source.inlineCompletions.commands;
-			const inlineEdit = new InlineEdit(edit, currentItemIsCollapsed, false, commands ?? []);
+			const renderExplicitly = this._jumpedTo.read(reader);
+			const inlineEdit = new InlineEdit(edit, currentItemIsCollapsed, renderExplicitly, commands ?? []);
 
 			return { kind: 'inlineEdit', inlineEdit, inlineCompletion: item.inlineEditCompletion, edits: [edit], cursorAtInlineEdit };
 		}
 
+		this._jumpedTo.set(false, undefined);
+
 		const suggestItem = this.selectedSuggestItem.read(reader);
 		if (suggestItem) {
 			const suggestCompletionEdit = singleTextRemoveCommonPrefix(suggestItem.toSingleTextEdit(), model);
@@ -647,11 +650,14 @@ export class InlineCompletionsModel extends Disposable {
 		};
 	}
 
+	private _jumpedTo = observableValue(this, false);
+
 	public jump(): void {
 		const s = this.inlineEditState.get();
 		if (!s) { return; }
 
 		transaction(tx => {
+			this._jumpedTo.set(true, tx);
 			this.dontRefetchSignal.trigger(tx);
 			this._editor.setPosition(s.inlineEdit.range.getStartPosition(), 'inlineCompletions.jump');
 			this._editor.revealLine(s.inlineEdit.range.startLineNumber);

src/vs/editor/contrib/inlineCompletions/browser/model/inlineEdit.ts

@@ -10,7 +10,7 @@ export class InlineEdit {
 	constructor(
 		public readonly edit: SingleTextEdit,
 		public readonly isCollapsed: boolean,
-		public readonly showInlineIfPossible: boolean,
+		public readonly renderExplicitly: boolean,
 		public readonly commands: readonly Command[],
 	) { }
 
@@ -23,6 +23,6 @@ export class InlineEdit {
 	}
 
 	public equals(other: InlineEdit): boolean {
-		return this.edit.equals(other.edit) && this.isCollapsed === other.isCollapsed;
+		return this.edit.equals(other.edit) && this.isCollapsed === other.isCollapsed && this.renderExplicitly === other.renderExplicitly;
 	}
 }

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineDiffView.ts

@@ -4,22 +4,27 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { Disposable } from '../../../../../../base/common/lifecycle.js';
-import { autorunWithStore, derived, IObservable } from '../../../../../../base/common/observable.js';
+import { autorunWithStore, derived, IObservable, observableFromEvent } from '../../../../../../base/common/observable.js';
 import { ICodeEditor } from '../../../../../browser/editorBrowser.js';
 import { observableCodeEditor } from '../../../../../browser/observableCodeEditor.js';
 import { rangeIsSingleLine } from '../../../../../browser/widget/diffEditor/components/diffEditorViewZones/diffEditorViewZones.js';
+import { LineSource, renderLines, RenderOptions } from '../../../../../browser/widget/diffEditor/components/diffEditorViewZones/renderLines.js';
 import { diffLineDeleteDecorationBackgroundWithIndicator, diffLineDeleteDecorationBackground, diffLineAddDecorationBackgroundWithIndicator, diffLineAddDecorationBackground, diffWholeLineAddDecoration, diffAddDecorationEmpty, diffAddDecoration } from '../../../../../browser/widget/diffEditor/registrations.contribution.js';
+import { applyViewZones, IObservableViewZone } from '../../../../../browser/widget/diffEditor/utils.js';
+import { EditorOption } from '../../../../../common/config/editorOptions.js';
 import { Range } from '../../../../../common/core/range.js';
 import { AbstractText } from '../../../../../common/core/textEdit.js';
 import { DetailedLineRangeMapping } from '../../../../../common/diff/rangeMapping.js';
-import { IModelDeltaDecoration } from '../../../../../common/model.js';
+import { IModelDeltaDecoration, ITextModel } from '../../../../../common/model.js';
 import { ModelDecorationOptions } from '../../../../../common/model/textModel.js';
-import { classNames } from './inlineEditsView.js';
+import { InlineDecoration, InlineDecorationType } from '../../../../../common/viewModel.js';
+import { classNames } from './utils.js';
 
 export interface IOriginalEditorInlineDiffViewState {
 	diff: DetailedLineRangeMapping[];
 	modifiedText: AbstractText;
-	showInline: boolean;
+	mode: 'mixedLines' | 'interleavedLines' | 'sideBySide';
+
 	modifiedCodeEditor: ICodeEditor;
 }
 
@@ -31,6 +36,7 @@ export class OriginalEditorInlineDiffView extends Disposable {
 	constructor(
 		private readonly _originalEditor: ICodeEditor,
 		private readonly _state: IObservable<IOriginalEditorInlineDiffViewState | undefined>,
+		private readonly _modifiedTextModel: ITextModel,
 	) {
 		super();
 
@@ -43,14 +49,69 @@ export class OriginalEditorInlineDiffView extends Disposable {
 				store.add(observableCodeEditor(e).setDecorations(this._decorations.map(d => d?.modifiedDecorations ?? [])));
 			}
 		}));
+
+		const editor = observableCodeEditor(this._originalEditor);
+
+		const tokenizationFinished = modelTokenizationFinished(_modifiedTextModel);
+
+		const originalViewZones = derived(this, (reader) => {
+			const originalModel = editor.model.read(reader);
+			if (!originalModel) { return []; }
+
+			const origViewZones: IObservableViewZone[] = [];
+			const renderOptions = RenderOptions.fromEditor(this._originalEditor);
+			const modLineHeight = editor.getOption(EditorOption.lineHeight).read(reader);
+
+			const s = this._state.read(reader);
+			if (!s) { return origViewZones; }
+
+			for (const diff of s.diff) {
+				if (s.mode !== 'interleavedLines') {
+					continue;
+				}
+
+				tokenizationFinished.read(reader); // Update view-zones once tokenization completes
+
+				const source = new LineSource(diff.modified.mapToLineArray(l => this._modifiedTextModel.tokenization.getLineTokens(l)));
+
+				const decorations: InlineDecoration[] = [];
+				for (const i of diff.innerChanges || []) {
+					decorations.push(new InlineDecoration(
+						i.modifiedRange.delta(-(diff.original.startLineNumber - 1)),
+						diffAddDecoration.className!,
+						InlineDecorationType.Regular,
+					));
+				}
+
+				const deletedCodeDomNode = document.createElement('div');
+				deletedCodeDomNode.classList.add('view-lines', 'line-insert', 'monaco-mouse-cursor-text');
+				// .inline-deleted-margin-view-zone
+
+				const result = renderLines(source, renderOptions, decorations, deletedCodeDomNode);
+
+				origViewZones.push({
+					afterLineNumber: diff.original.endLineNumberExclusive - 1,
+					domNode: deletedCodeDomNode,
+					heightInPx: result.heightInLines * modLineHeight,
+					minWidthInPx: result.minWidthInPx,
+
+					showInHiddenAreas: true,
+					suppressMouseDown: true,
+				});
+			}
+
+			return origViewZones;
+		});
+
+		this._register(applyViewZones(this._originalEditor, originalViewZones));
 	}
 
 	private readonly _decorations = derived(this, reader => {
 		const diff = this._state.read(reader);
 		if (!diff) { return undefined; }
 
 		const modified = diff.modifiedText;
-		const showInline = diff.showInline;
+		const showInline = diff.mode === 'mixedLines';
 
 		const renderIndicators = false;
 		const showEmptyDecorations = true;
@@ -59,7 +120,7 @@ export class OriginalEditorInlineDiffView extends Disposable {
 		const modifiedDecorations: IModelDeltaDecoration[] = [];
 
 		for (const m of diff.diff) {
-			const showFullLineDecorations = false;
+			const showFullLineDecorations = true;
 			if (showFullLineDecorations) {
 				if (!m.original.isEmpty) {
 					originalDecorations.push({ range: m.original.toInclusiveRange()!, options: renderIndicators ? diffLineDeleteDecorationBackgroundWithIndicator : diffLineDeleteDecorationBackground });
@@ -133,3 +194,8 @@ function allowsTrueInlineDiffRendering(mapping: DetailedLineRangeMapping): boole
 	return mapping.innerChanges.every(c =>
 		(rangeIsSingleLine(c.modifiedRange) && rangeIsSingleLine(c.originalRange)));
 }
+
+let i = 0;
+function modelTokenizationFinished(model: ITextModel): IObservable<number> {
+	return observableFromEvent(model.onDidChangeTokens, () => i++);
+}