Improves unchanged regions (microsoft#186159)

Author: hediet

src/vs/editor/browser/widget/diffEditorWidget2/style.css

@@ -97,3 +97,7 @@
 .char-insert.diff-range-empty {
 	border-left: solid var(--vscode-diffEditor-insertedTextBackground) 3px;
 }
+
+.fold-unchanged {
+	cursor: pointer;
+}

src/vs/editor/browser/widget/diffEditorWidget2/unchangedRanges.ts

@@ -5,19 +5,26 @@
 
 import { $, addDisposableListener, h, reset } from 'vs/base/browser/dom';
 import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels';
+import { Codicon } from 'vs/base/common/codicons';
+import { MarkdownString } from 'vs/base/common/htmlContent';
 import { Disposable } from 'vs/base/common/lifecycle';
 import { IObservable, observableFromEvent, transaction } from 'vs/base/common/observable';
 import { autorun, autorunWithStore2 } from 'vs/base/common/observableImpl/autorun';
 import { derived, derivedWithStore } from 'vs/base/common/observableImpl/derived';
+import { ThemeIcon } from 'vs/base/common/themables';
 import { isDefined } from 'vs/base/common/types';
 import { ICodeEditor, IViewZone } from 'vs/editor/browser/editorBrowser';
 import { DiffEditorEditors } from 'vs/editor/browser/widget/diffEditorWidget2/diffEditorEditors';
 import { DiffEditorOptions } from 'vs/editor/browser/widget/diffEditorWidget2/diffEditorOptions';
 import { DiffEditorViewModel, UnchangedRegion } from 'vs/editor/browser/widget/diffEditorWidget2/diffEditorViewModel';
 import { PlaceholderViewZone, ViewZoneOverlayWidget, applyObservableDecorations, applyStyle, applyViewZones } from 'vs/editor/browser/widget/diffEditorWidget2/utils';
 import { EditorOption } from 'vs/editor/common/config/editorOptions';
+import { LineRange } from 'vs/editor/common/core/lineRange';
+import { Position } from 'vs/editor/common/core/position';
+import { Range } from 'vs/editor/common/core/range';
 import { CursorChangeReason } from 'vs/editor/common/cursorEvents';
 import { IModelDecorationOptions, IModelDeltaDecoration } from 'vs/editor/common/model';
+import { localize } from 'vs/nls';
 
 export class UnchangedRangesFeature extends Disposable {
 	private _isUpdatingViewZones = false;
@@ -90,21 +97,45 @@ export class UnchangedRangesFeature extends Disposable {
 			className: 'diff-unchanged-lines',
 			isWholeLine: true,
 		};
+		const unchangedLinesDecorationShow: IModelDecorationOptions = {
+			description: 'Fold Unchanged',
+			glyphMarginHoverMessage: new MarkdownString(undefined, { isTrusted: true, supportThemeIcons: true }).appendMarkdown(localize('foldUnchanged', 'Fold Unchanged Region')),
+			glyphMarginClassName: 'fold-unchanged ' + ThemeIcon.asClassName(Codicon.fold),
+			zIndex: 10001,
+		};
 
 		this._register(applyObservableDecorations(this._editors.original, derived('decorations', (reader) => {
 			const curUnchangedRegions = unchangedRegions.read(reader);
-			return curUnchangedRegions.map<IModelDeltaDecoration>(r => ({
+			const result = curUnchangedRegions.map<IModelDeltaDecoration>(r => ({
 				range: r.originalRange.toInclusiveRange()!,
 				options: unchangedLinesDecoration,
 			}));
+			for (const r of curUnchangedRegions) {
+				if (r.shouldHideControls(reader)) {
+					result.push({
+						range: Range.fromPositions(new Position(r.originalLineNumber, 1)),
+						options: unchangedLinesDecorationShow
+					});
+				}
+			}
+			return result;
 		})));
 
 		this._register(applyObservableDecorations(this._editors.modified, derived('decorations', (reader) => {
 			const curUnchangedRegions = unchangedRegions.read(reader);
-			return curUnchangedRegions.map<IModelDeltaDecoration>(r => ({
+			const result = curUnchangedRegions.map<IModelDeltaDecoration>(r => ({
 				range: r.modifiedRange.toInclusiveRange()!,
 				options: unchangedLinesDecoration,
 			}));
+			for (const r of curUnchangedRegions) {
+				if (r.shouldHideControls(reader)) {
+					result.push({
+						range: LineRange.ofLength(r.modifiedLineNumber, 1).toInclusiveRange()!,
+						options: unchangedLinesDecorationShow
+					});
+				}
+			}
+			return result;
 		})));
 
 		this._register(applyViewZones(this._editors.original, viewZones.map(v => v.origViewZones), v => this._isUpdatingViewZones = v));
@@ -115,6 +146,32 @@ export class UnchangedRangesFeature extends Disposable {
 			this._editors.original.setHiddenAreas(curUnchangedRegions.map(r => r.getHiddenOriginalRange(reader).toInclusiveRange()).filter(isDefined));
 			this._editors.modified.setHiddenAreas(curUnchangedRegions.map(r => r.getHiddenModifiedRange(reader).toInclusiveRange()).filter(isDefined));
 		}));
+
+		this._register(this._editors.modified.onMouseUp(event => {
+			if (!event.event.rightButton && event.target.position && event.target.element?.className.includes('fold-unchanged')) {
+				const lineNumber = event.target.position.lineNumber;
+				const model = this._diffModel.get();
+				if (!model) { return; }
+				const region = model.unchangedRegions.get().find(r => r.modifiedRange.includes(lineNumber));
+				if (!region) { return; }
+				region.setState(0, 0, undefined);
+				event.event.stopPropagation();
+				event.event.preventDefault();
+			}
+		}));
+
+		this._register(this._editors.original.onMouseUp(event => {
+			if (!event.event.rightButton && event.target.position && event.target.element?.className.includes('fold-unchanged')) {
+				const lineNumber = event.target.position.lineNumber;
+				const model = this._diffModel.get();
+				if (!model) { return; }
+				const region = model.unchangedRegions.get().find(r => r.originalRange.includes(lineNumber));
+				if (!region) { return; }
+				region.setState(0, 0, undefined);
+				event.event.stopPropagation();
+				event.event.preventDefault();
+			}
+		}));
 	}
 }
 
@@ -165,7 +222,7 @@ class CollapsedCodeOverlayWidget extends ViewZoneOverlayWidget {
 			this._unchangedRegion.isDragged.set(true, undefined);
 
 
-			const mouseMoveListener = addDisposableListener(document.body, 'mousemove', e => {
+			const mouseMoveListener = addDisposableListener(window, 'mousemove', e => {
 				const currentTop = e.clientY;
 				const delta = currentTop - startTop;
 				didMove = didMove || Math.abs(delta) > 2;
@@ -174,7 +231,7 @@ class CollapsedCodeOverlayWidget extends ViewZoneOverlayWidget {
 				this._unchangedRegion.visibleLineCountTop.set(newVal, undefined);
 			});
 
-			const mouseUpListener = addDisposableListener(document.body, 'mouseup', e => {
+			const mouseUpListener = addDisposableListener(window, 'mouseup', e => {
 				if (!didMove) {
 					this._unchangedRegion.showMoreAbove(20, undefined);
 				}
@@ -198,26 +255,26 @@ class CollapsedCodeOverlayWidget extends ViewZoneOverlayWidget {
 			const cur = this._unchangedRegion.visibleLineCountBottom.get();
 			this._unchangedRegion.isDragged.set(true, undefined);
 
-			const mouseMoveListener = addDisposableListener(document.body, 'mousemove', e => {
+			const mouseMoveListener = addDisposableListener(window, 'mousemove', e => {
 				const currentTop = e.clientY;
 				const delta = currentTop - startTop;
 				didMove = didMove || Math.abs(delta) > 2;
 				const lineDelta = Math.round(delta / editor.getOption(EditorOption.lineHeight));
 				const newVal = Math.max(0, Math.min(cur - lineDelta, this._unchangedRegion.getMaxVisibleLineCountBottom()));
-				const top = editor.getTopForLineNumber(this._unchangedRegion.modifiedRange.endLineNumberExclusive);
+				const top = editor.getTopForLineNumber(this._unchangedRegion.originalRange.endLineNumberExclusive);
 				this._unchangedRegion.visibleLineCountBottom.set(newVal, undefined);
-				const top2 = editor.getTopForLineNumber(this._unchangedRegion.modifiedRange.endLineNumberExclusive);
+				const top2 = editor.getTopForLineNumber(this._unchangedRegion.originalRange.endLineNumberExclusive);
 				editor.setScrollTop(editor.getScrollTop() + (top2 - top));
 			});
 
-			const mouseUpListener = addDisposableListener(document.body, 'mouseup', e => {
+			const mouseUpListener = addDisposableListener(window, 'mouseup', e => {
 				this._unchangedRegion.isDragged.set(false, undefined);
 
 				if (!didMove) {
-					const top = editor.getTopForLineNumber(this._unchangedRegion.modifiedRange.endLineNumberExclusive);
+					const top = editor.getTopForLineNumber(this._unchangedRegion.originalRange.endLineNumberExclusive);
 
 					this._unchangedRegion.showMoreBelow(20, undefined);
-					const top2 = editor.getTopForLineNumber(this._unchangedRegion.modifiedRange.endLineNumberExclusive);
+					const top2 = editor.getTopForLineNumber(this._unchangedRegion.originalRange.endLineNumberExclusive);
 					editor.setScrollTop(editor.getScrollTop() + (top2 - top));
 				}
 				this._nodes.bottom.classList.toggle('dragging', false);

src/vs/editor/common/core/lineRange.ts

@@ -225,6 +225,10 @@ export class LineRange {
 	public serialize(): ISerializedLineRange {
 		return [this.startLineNumber, this.endLineNumberExclusive];
 	}
+
+	public includes(lineNumber: number): boolean {
+		return this.startLineNumber <= lineNumber && lineNumber < this.endLineNumberExclusive;
+	}
 }
 
 export type ISerializedLineRange = [startLineNumber: number, endLineNumberExclusive: number];

src/vs/monaco.d.ts

@@ -2480,6 +2480,7 @@ declare namespace monaco.editor {
 		toInclusiveRange(): Range | null;
 		toExclusiveRange(): Range;
 		mapToLineArray<T>(f: (lineNumber: number) => T): T[];
+		includes(lineNumber: number): boolean;
 	}
 
 	/**

src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts

@@ -475,7 +475,7 @@ export class BreakpointEditorContribution implements IBreakpointEditorContributi
 		if (decorations) {
 			for (const { options } of decorations) {
 				const clz = options.glyphMarginClassName;
-				if (clz && (!clz.includes('codicon-') || clz.includes('codicon-testing-') || clz.includes('codicon-merge-') || clz.includes('codicon-arrow-') || clz.includes('codicon-loading'))) {
+				if (clz && (!clz.includes('codicon-') || clz.includes('codicon-testing-') || clz.includes('codicon-merge-') || clz.includes('codicon-arrow-') || clz.includes('codicon-loading') || clz.includes('codicon-fold'))) {
 					return false;
 				}
 			}