Unchanged collapsed code improvements

Author: hediet

build/lib/stylelint/vscode-known-variables.json

@@ -100,6 +100,7 @@
 		"--vscode-diffEditor-removedLineBackground",
 		"--vscode-diffEditor-removedTextBackground",
 		"--vscode-diffEditor-removedTextBorder",
+		"--vscode-diffEditor-unchangedCodeBackground",
 		"--vscode-diffEditor-unchangedRegionBackground",
 		"--vscode-diffEditor-unchangedRegionForeground",
 		"--vscode-diffEditorGutter-insertedLineBackground",

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

@@ -252,7 +252,9 @@ export class UnchangedRegion {
 			let length = mapping.originalRange.length;
 
 			if (origStart === 1 && modStart === 1 && length > minContext + minHiddenLineCount) {
-				length -= minContext;
+				if (length < originalLineCount) {
+					length -= minContext;
+				}
 				result.push(new UnchangedRegion(origStart, modStart, length, 0, 0));
 			} else if (origStart + length === originalLineCount + 1 && length > minContext + minHiddenLineCount) {
 				origStart += minContext;

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

@@ -8,7 +8,8 @@
 }
 
 .diff-hidden-lines {
-	transform: translate(0px, -8px);
+	height: 0px; /* The children each have a fixed height, the transform confuses the browser */
+	transform: translate(0px, -10px);
 	font-size: 13px;
 	line-height: 14px;
 }
@@ -35,6 +36,10 @@
 	transform: translate(0px, -6px);
 }
 
+.diff-unchanged-lines {
+	background: var(--vscode-diffEditor-unchangedCodeBackground);
+}
+
 
 .diff-hidden-lines .center {
 	background: var(--vscode-diffEditor-unchangedRegionBackground);

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

@@ -13,8 +13,9 @@ import { isDefined } from 'vs/base/common/types';
 import { ICodeEditor, IViewZone } from 'vs/editor/browser/editorBrowser';
 import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
 import { DiffModel, UnchangedRegion } from 'vs/editor/browser/widget/diffEditorWidget2/diffModel';
-import { PlaceholderViewZone, ViewZoneOverlayWidget, applyStyle, applyViewZones } from 'vs/editor/browser/widget/diffEditorWidget2/utils';
+import { PlaceholderViewZone, ViewZoneOverlayWidget, applyObservableDecorations, applyStyle, applyViewZones } from 'vs/editor/browser/widget/diffEditorWidget2/utils';
 import { EditorOption } from 'vs/editor/common/config/editorOptions';
+import { IModelDecorationOptions, IModelDeltaDecoration } from 'vs/editor/common/model';
 
 export class UnchangedRangesFeature extends Disposable {
 	private _isUpdatingViewZones = false;
@@ -61,13 +62,13 @@ export class UnchangedRangesFeature extends Disposable {
 
 				{
 					const d = derived('hiddenOriginalRangeStart', reader => r.getHiddenOriginalRange(reader).startLineNumber - 1);
-					const origVz = new PlaceholderViewZone(d, 30);
+					const origVz = new PlaceholderViewZone(d, 24);
 					origViewZones.push(origVz);
 					store.add(new CollapsedCodeOverlayWidget(this._originalEditor, origVz, r, !sideBySide));
 				}
 				{
 					const d = derived('hiddenModifiedRangeStart', reader => r.getHiddenModifiedRange(reader).startLineNumber - 1);
-					const modViewZone = new PlaceholderViewZone(d, 30);
+					const modViewZone = new PlaceholderViewZone(d, 24);
 					modViewZones.push(modViewZone);
 					store.add(new CollapsedCodeOverlayWidget(this._modifiedEditor, modViewZone, r, false));
 				}
@@ -76,6 +77,29 @@ export class UnchangedRangesFeature extends Disposable {
 			return { origViewZones, modViewZones, };
 		});
 
+
+		const unchangedLinesDecoration: IModelDecorationOptions = {
+			description: 'unchanged lines',
+			className: 'diff-unchanged-lines',
+			isWholeLine: true,
+		};
+
+		this._register(applyObservableDecorations(this._originalEditor, derived('decorations', (reader) => {
+			const unchangedRegions = this._diffModel.read(reader)?.unchangedRegions.read(reader) ?? [];
+			return unchangedRegions.map<IModelDeltaDecoration>(r => ({
+				range: r.originalRange.toInclusiveRange()!,
+				options: unchangedLinesDecoration,
+			}));
+		})));
+
+		this._register(applyObservableDecorations(this._modifiedEditor, derived('decorations', (reader) => {
+			const unchangedRegions = this._diffModel.read(reader)?.unchangedRegions.read(reader) ?? [];
+			return unchangedRegions.map<IModelDeltaDecoration>(r => ({
+				range: r.modifiedRange.toInclusiveRange()!,
+				options: unchangedLinesDecoration,
+			}));
+		})));
+
 		this._register(applyViewZones(this._originalEditor, viewZones.map(v => v.origViewZones), v => this._isUpdatingViewZones = v));
 		this._register(applyViewZones(this._modifiedEditor, viewZones.map(v => v.modViewZones), v => this._isUpdatingViewZones = v));
 
@@ -90,14 +114,14 @@ export class UnchangedRangesFeature extends Disposable {
 
 class CollapsedCodeOverlayWidget extends ViewZoneOverlayWidget {
 	private readonly _nodes = h('div.diff-hidden-lines', [
-		h('div.top@top', { title: 'Show more above' }),
+		h('div.top@top', { title: 'Click or drag to show more above' }),
 		h('div.center@content', { style: { display: 'flex' } }, [
 			h('div@first', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' } },
 				[$('a', { title: 'Show all', role: 'button', onclick: () => { this._unchangedRegion.showAll(undefined); } }, ...renderLabelWithIcons('$(unfold)'))]
 			),
 			h('div@others', { style: { display: 'flex', justifyContent: 'center', alignItems: 'center' } }),
 		]),
-		h('div.bottom@bottom', { title: 'Show more below', role: 'button' }),
+		h('div.bottom@bottom', { title: 'Click or drag to show more below', role: 'button' }),
 	]);
 
 	constructor(
@@ -123,6 +147,9 @@ class CollapsedCodeOverlayWidget extends ViewZoneOverlayWidget {
 		const editor = this._editor;
 
 		this._register(addDisposableListener(this._nodes.top, 'mousedown', e => {
+			if (e.button !== 0) {
+				return;
+			}
 			this._nodes.top.classList.toggle('dragging', true);
 			this._nodes.root.classList.toggle('dragging', true);
 			e.preventDefault();
@@ -154,7 +181,9 @@ class CollapsedCodeOverlayWidget extends ViewZoneOverlayWidget {
 		}));
 
 		this._register(addDisposableListener(this._nodes.bottom, 'mousedown', e => {
-
+			if (e.button !== 0) {
+				return;
+			}
 			this._nodes.bottom.classList.toggle('dragging', true);
 			this._nodes.root.classList.toggle('dragging', true);
 			e.preventDefault();
@@ -176,12 +205,17 @@ class CollapsedCodeOverlayWidget extends ViewZoneOverlayWidget {
 			});
 
 			const mouseUpListener = addDisposableListener(document.body, 'mouseup', e => {
+				this._unchangedRegion.isDragged.set(false, undefined);
+
 				if (!didMove) {
+					const top = editor.getTopForLineNumber(this._unchangedRegion.modifiedRange.endLineNumberExclusive);
+
 					this._unchangedRegion.showMoreBelow(20, undefined);
+					const top2 = editor.getTopForLineNumber(this._unchangedRegion.modifiedRange.endLineNumberExclusive);
+					editor.setScrollTop(editor.getScrollTop() + (top2 - top));
 				}
 				this._nodes.bottom.classList.toggle('dragging', false);
 				this._nodes.root.classList.toggle('dragging', false);
-				this._unchangedRegion.isDragged.set(false, undefined);
 				mouseMoveListener.dispose();
 				mouseUpListener.dispose();
 			});

src/vs/platform/theme/common/colorRegistry.ts

@@ -424,8 +424,9 @@ export const diffRemovedOutline = registerColor('diffEditor.removedTextBorder',
 export const diffBorder = registerColor('diffEditor.border', { dark: null, light: null, hcDark: contrastBorder, hcLight: contrastBorder }, nls.localize('diffEditorBorder', 'Border color between the two text editors.'));
 export const diffDiagonalFill = registerColor('diffEditor.diagonalFill', { dark: '#cccccc33', light: '#22222233', hcDark: null, hcLight: null }, nls.localize('diffDiagonalFill', "Color of the diff editor's diagonal fill. The diagonal fill is used in side-by-side diff views."));
 
-export const diffUnchangedRegionBackground = registerColor('diffEditor.unchangedRegionBackground', { dark: '#3e3e3e', light: '#e4e4e4', hcDark: null, hcLight: null }, nls.localize('diffEditor.unchangedRegionBackground', "The background color of unchanged blocks in diff editor."));
-export const diffUnchangedRegionForeground = registerColor('diffEditor.unchangedRegionForeground', { dark: '#a3a2a2', light: '#4d4c4c', hcDark: null, hcLight: null }, nls.localize('diffEditor.unchangedRegionForeground', "The foreground color of unchanged blocks in diff editor."));
+export const diffUnchangedRegionBackground = registerColor('diffEditor.unchangedRegionBackground', { dark: '#3e3e3e', light: '#e4e4e4', hcDark: null, hcLight: null }, nls.localize('diffEditor.unchangedRegionBackground', "The background color of unchanged blocks in the diff editor."));
+export const diffUnchangedRegionForeground = registerColor('diffEditor.unchangedRegionForeground', { dark: '#a3a2a2', light: '#4d4c4c', hcDark: null, hcLight: null }, nls.localize('diffEditor.unchangedRegionForeground', "The foreground color of unchanged blocks in the diff editor."));
+export const diffUnchangedTextBackground = registerColor('diffEditor.unchangedCodeBackground', { dark: '#74747429', light: '#b8b8b829', hcDark: null, hcLight: null }, nls.localize('diffEditor.unchangedCodeBackground', "The background color of unchanged code in the diff editor."));
 
 /**
  * List and tree colors