Improve debugging for NES observables

src/vs/editor/common/core/2d/rect.ts

@@ -57,8 +57,11 @@ export class Rect {
 		public readonly right: number,
 		public readonly bottom: number,
 	) {
-		if (left > right || top > bottom) {
-			throw new BugIndicatingError('Invalid arguments');
+		if (left > right) {
+			throw new BugIndicatingError('Invalid arguments: Horizontally offset by ' + (left - right));
+		}
+		if (top > bottom) {
+			throw new BugIndicatingError('Invalid arguments: Vertically offset by ' + (top - bottom));
 		}
 	}
 

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorMenu.ts

@@ -52,7 +52,7 @@ export class GutterIndicatorMenuContent {
 			return {
 				title: options.title,
 				icon: options.icon,
-				keybinding: typeof options.commandId === 'string' ? this._getKeybinding(options.commandArgs ? undefined : options.commandId) : derived(reader => typeof options.commandId === 'string' ? undefined : this._getKeybinding(options.commandArgs ? undefined : options.commandId.read(reader)).read(reader)),
+				keybinding: typeof options.commandId === 'string' ? this._getKeybinding(options.commandArgs ? undefined : options.commandId) : derived(this, reader => typeof options.commandId === 'string' ? undefined : this._getKeybinding(options.commandArgs ? undefined : options.commandId.read(reader)).read(reader)),
 				isActive: activeElement.map(v => v === options.id),
 				onHoverChange: v => activeElement.set(v ? options.id : undefined, undefined),
 				onAction: () => {
@@ -176,7 +176,7 @@ function option(props: {
 	onHoverChange?: (isHovered: boolean) => void;
 	onAction?: () => void;
 }) {
-	return derived((_reader) => n.div({
+	return derived({ name: 'inlineEdits.option' }, (_reader) => n.div({
 		class: ['monaco-menu-option', props.isActive?.map(v => v && 'active')],
 		onmouseenter: () => props.onHoverChange?.(true),
 		onmouseleave: () => props.onHoverChange?.(false),
@@ -219,7 +219,7 @@ function option(props: {
 
 // TODO: make this observable
 function actionBar(actions: IAction[], options: IActionBarOptions) {
-	return derived((_reader) => n.div({
+	return derived({ name: 'inlineEdits.actionBar' }, (_reader) => n.div({
 		class: ['action-widget-action-bar'],
 		style: {
 			padding: '0 10px',

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/components/gutterIndicatorView.ts

@@ -88,7 +88,7 @@ export class InlineEditsGutterIndicator extends Disposable {
 		});
 
 		this._originalRangeObs = mapOutFalsy(this._originalRange);
-		this._state = derived(reader => {
+		this._state = derived(this, reader => {
 			const range = this._originalRangeObs.read(reader);
 			if (!range) { return undefined; }
 			return {
@@ -219,7 +219,7 @@ export class InlineEditsGutterIndicator extends Disposable {
 
 			// The icon which will be rendered in the pill
 			const iconNoneDocked = this._tabAction.map(action => action === InlineEditTabAction.Accept ? Codicon.keyboardTab : Codicon.arrowRight);
-			const iconDocked = derived(reader => {
+			const iconDocked = derived(this, reader => {
 				if (this._isHoveredOverIconDebounced.read(reader) || this._isHoveredOverInlineEditDebounced.read(reader)) {
 					return Codicon.check;
 				}

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/debugVisualization.ts

@@ -104,7 +104,7 @@ export function debugView(value: unknown, reader: IReader): void {
 }
 
 function debugReadDisposable(d: IDisposable, reader: IReader): void {
-	derived((_reader) => {
+	derived({ name: 'debugReadDisposable' }, (_reader) => {
 		_reader.store.add(d);
 		return undefined;
 	}).read(reader);

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsCustomView.ts

@@ -71,7 +71,7 @@ export class InlineEditsCustomView extends Disposable implements IInlineEditsVie
 
 		const view = state.map(s => s ? this.getRendering(s, styles) : undefined);
 
-		this.minEditorScrollHeight = derived(reader => {
+		this.minEditorScrollHeight = derived(this, reader => {
 			const s = state.read(reader);
 			if (!s) {
 				return 0;
@@ -129,7 +129,7 @@ export class InlineEditsCustomView extends Disposable implements IInlineEditsVie
 
 	private getState(displayLocation: InlineCompletionDisplayLocation): { rect: IObservable<Rect>; label: string; kind: InlineCompletionDisplayLocationKind } {
 
-		const contentState = derived((reader) => {
+		const contentState = derived(this, (reader) => {
 			const startLineNumber = displayLocation.range.startLineNumber;
 			const endLineNumber = displayLocation.range.endLineNumber;
 			const startColumn = displayLocation.range.startColumn;
@@ -156,7 +156,7 @@ export class InlineEditsCustomView extends Disposable implements IInlineEditsVie
 		// only check viewport once in the beginning when rendering the view
 		const fitsInsideViewport = this.fitsInsideViewport(new LineRange(startLineNumber, endLineNumber + 1), displayLocation.label, undefined);
 
-		const rect = derived((reader) => {
+		const rect = derived(this, reader => {
 			const w = this._editorObs.getOption(EditorOption.fontInfo).read(reader).typicalHalfwidthCharacterWidth;
 
 			const { lineWidth, lineWidthBelow, lineWidthAbove, startContentLeftOffset, endContentLeftOffset } = contentState.read(reader);

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsDeletionView.ts

@@ -73,7 +73,7 @@ export class InlineEditsDeletionView extends Disposable implements IInlineEditsV
 			domNode: this._nonOverflowView.element,
 			position: constObservable(null),
 			allowEditorOverflow: false,
-			minContentWidthInPx: derived(reader => {
+			minContentWidthInPx: derived(this, reader => {
 				const info = this._editorLayoutInfo.read(reader);
 				if (info === null) { return 0; }
 				return info.codeRect.width;
@@ -98,7 +98,7 @@ export class InlineEditsDeletionView extends Disposable implements IInlineEditsV
 		});
 	}).map((v, r) => v.read(r));
 
-	private readonly _maxPrefixTrim = derived(reader => {
+	private readonly _maxPrefixTrim = derived(this, reader => {
 		const state = this._uiState.read(reader);
 		if (!state) {
 			return { prefixTrim: 0, prefixLeftOffset: 0 };
@@ -142,7 +142,7 @@ export class InlineEditsDeletionView extends Disposable implements IInlineEditsV
 
 	private readonly _originalOverlay = n.div({
 		style: { pointerEvents: 'none', }
-	}, derived(reader => {
+	}, derived(this, reader => {
 		const layoutInfoObs = mapOutFalsy(this._editorLayoutInfo).read(reader);
 		if (!layoutInfoObs) { return undefined; }
 
@@ -155,7 +155,7 @@ export class InlineEditsDeletionView extends Disposable implements IInlineEditsV
 			layoutInfo.codeRect.bottom
 		));
 
-		const overlayRect = derived(reader => {
+		const overlayRect = derived(this, reader => {
 			const rect = layoutInfoObs.read(reader).codeRect;
 			const overlayHider = overlayhider.read(reader);
 			return rect.intersectHorizontal(new OffsetRange(overlayHider.left, Number.MAX_SAFE_INTEGER));

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsInsertionView.ts

@@ -78,7 +78,7 @@ export class InlineEditsInsertionView extends Disposable implements IInlineEdits
 		return { topOffset: linesTop * lineHeight, bottomOffset: linesBottom * lineHeight, linesTop, linesBottom };
 	});
 
-	private readonly _maxPrefixTrim = derived(reader => {
+	private readonly _maxPrefixTrim = derived(this, reader => {
 		const state = this._state.read(reader);
 		if (!state) {
 			return { prefixLeftOffset: 0, prefixTrim: 0 };
@@ -163,7 +163,7 @@ export class InlineEditsInsertionView extends Disposable implements IInlineEdits
 			domNode: this._view.element,
 			position: constObservable(null),
 			allowEditorOverflow: false,
-			minContentWidthInPx: derived(reader => {
+			minContentWidthInPx: derived(this, reader => {
 				const info = this._overlayLayout.read(reader);
 				if (info === null) { return 0; }
 				return info.minContentWidthRequired;
@@ -253,7 +253,7 @@ export class InlineEditsInsertionView extends Disposable implements IInlineEdits
 
 	private readonly _modifiedOverlay = n.div({
 		style: { pointerEvents: 'none', }
-	}, derived(reader => {
+	}, derived(this, reader => {
 		const overlayLayoutObs = mapOutFalsy(this._overlayLayout).read(reader);
 		if (!overlayLayoutObs) { return undefined; }
 

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsLineReplacementView.ts

@@ -65,7 +65,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
 		this._onDidClick = this._register(new Emitter<IMouseEvent>());
 		this.onDidClick = this._onDidClick.event;
 		this._maxPrefixTrim = this._edit.map(e => e ? getPrefixTrim(e.replacements.flatMap(r => [r.originalRange, r.modifiedRange]), e.originalRange, e.modifiedLines, this._editor.editor) : undefined);
-		this._modifiedLineElements = derived(reader => {
+		this._modifiedLineElements = derived(this, reader => {
 			const lines = [];
 			let requiredWidth = 0;
 
@@ -190,7 +190,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
 			const viewZoneLineNumber = edit.originalRange.endLineNumberExclusive;
 			return { height: viewZoneHeight, lineNumber: viewZoneLineNumber };
 		});
-		this.minEditorScrollHeight = derived(reader => {
+		this.minEditorScrollHeight = derived(this, reader => {
 			const layout = mapOutFalsy(this._layout).read(reader);
 			if (!layout || this._viewZoneInfo.read(reader) !== undefined) {
 				return 0;
@@ -200,7 +200,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
 		this._div = n.div({
 			class: 'line-replacement',
 		}, [
-			derived(reader => {
+			derived(this, reader => {
 				const layout = mapOutFalsy(this._layout).read(reader);
 				const modifiedLineElements = this._modifiedLineElements.read(reader);
 				if (!layout || !modifiedLineElements) {
@@ -318,7 +318,7 @@ export class InlineEditsLineReplacementView extends Disposable implements IInlin
 
 		this._register(this._editor.createOverlayWidget({
 			domNode: this._div.element,
-			minContentWidthInPx: derived(reader => {
+			minContentWidthInPx: derived(this, reader => {
 				return this._layout.read(reader)?.minContentWidthRequired ?? 0;
 			}),
 			position: constObservable({ preference: { top: 0, left: 0 } }),

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsSideBySideView.ts

@@ -139,7 +139,7 @@ export class InlineEditsSideBySideView extends Disposable implements IInlineEdit
 		));
 		this._previewEditorObs = observableCodeEditor(this.previewEditor);
 		this._activeViewZones = [];
-		this._updatePreviewEditor = derived(reader => {
+		this._updatePreviewEditor = derived(this, reader => {
 			this._editorContainer.readEffect(reader);
 			this._previewEditorObs.model.read(reader); // update when the model is set
 
@@ -325,7 +325,7 @@ export class InlineEditsSideBySideView extends Disposable implements IInlineEdit
 		});
 		this._stickyScrollController = StickyScrollController.get(this._editorObs.editor);
 		this._stickyScrollHeight = this._stickyScrollController ? observableFromEvent(this._stickyScrollController.onDidChangeStickyScrollHeight, () => this._stickyScrollController!.stickyScrollWidgetHeight) : constObservable(0);
-		this._shouldOverflow = derived(reader => {
+		this._shouldOverflow = derived(this, reader => {
 			if (!ENABLE_OVERFLOW) {
 				return false;
 			}
@@ -353,7 +353,7 @@ export class InlineEditsSideBySideView extends Disposable implements IInlineEdit
 		}, [
 			n.svgElem('path', {
 				class: 'rightOfModifiedBackgroundCoverUp',
-				d: derived(reader => {
+				d: derived(this, reader => {
 					const layoutInfo = this._previewEditorLayoutInfo.read(reader);
 					if (!layoutInfo) {
 						return undefined;
@@ -377,7 +377,7 @@ export class InlineEditsSideBySideView extends Disposable implements IInlineEdit
 		]).keepUpdated(this._store);
 		this._originalOverlay = n.div({
 			style: { pointerEvents: 'none', display: this._previewEditorLayoutInfo.map(layoutInfo => layoutInfo?.isInsertion ? 'none' : 'block') },
-		}, derived(reader => {
+		}, derived(this, reader => {
 			const layoutInfoObs = mapOutFalsy(this._previewEditorLayoutInfo).read(reader);
 			if (!layoutInfoObs) { return undefined; }
 
@@ -468,7 +468,7 @@ export class InlineEditsSideBySideView extends Disposable implements IInlineEdit
 		})).keepUpdated(this._store);
 		this._modifiedOverlay = n.div({
 			style: { pointerEvents: 'none', }
-		}, derived(reader => {
+		}, derived(this, reader => {
 			const layoutInfoObs = mapOutFalsy(this._previewEditorLayoutInfo).read(reader);
 			if (!layoutInfoObs) { return undefined; }
 
@@ -482,7 +482,7 @@ export class InlineEditsSideBySideView extends Disposable implements IInlineEdit
 			const overlayRect = layoutInfoObs.map(layoutInfo => layoutInfo.editRect.withMargin(0, BORDER_WIDTH));
 			const separatorRect = overlayRect.map(overlayRect => overlayRect.withMargin(separatorWidth, separatorWidth, separatorWidth, 0));
 
-			const insertionRect = derived(reader => {
+			const insertionRect = derived(this, reader => {
 				const overlay = overlayRect.read(reader);
 				const layoutinfo = layoutInfoObs.read(reader);
 				if (!layoutinfo.isInsertion || layoutinfo.contentLeft >= overlay.left) {
@@ -540,7 +540,7 @@ export class InlineEditsSideBySideView extends Disposable implements IInlineEdit
 			domNode: this._nonOverflowView.element,
 			position: constObservable(null),
 			allowEditorOverflow: false,
-			minContentWidthInPx: derived(reader => {
+			minContentWidthInPx: derived(this, reader => {
 				const x = this._previewEditorLayoutInfo.read(reader)?.maxContentWidth;
 				if (x === undefined) { return 0; }
 				return x;

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordInsertView.ts

@@ -68,7 +68,7 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit
 		this._div = n.div({
 			class: 'word-insert',
 		}, [
-			derived(reader => {
+			derived(this, reader => {
 				const layout = mapOutFalsy(this._layout).read(reader);
 				if (!layout) {
 					return [];
@@ -117,8 +117,8 @@ export class InlineEditsWordInsertView extends Disposable implements IInlineEdit
 						fill: 'none',
 						style: {
 							position: 'absolute',
-							left: derived(reader => layout.read(reader).center.x - 9),
-							top: derived(reader => layout.read(reader).center.y + 4),
+							left: derived(this, reader => layout.read(reader).center.x - 9),
+							top: derived(this, reader => layout.read(reader).center.y + 4),
 							transform: 'scale(1.4, 1.4)',
 						}
 					}, [

src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/inlineEditsViews/inlineEditsWordReplacementView.ts

@@ -59,7 +59,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
 		this._line = document.createElement('div');
 		this._hoverableElement = observableValue<ObserverNodeWithElement | null>(this, null);
 		this.isHovered = this._hoverableElement.map((e, reader) => e?.didMouseMoveDuringHover.read(reader) ?? false);
-		this._renderTextEffect = derived(_reader => {
+		this._renderTextEffect = derived(this, _reader => {
 			const tm = this._editor.model.get()!;
 			const origLine = tm.getLineContent(this._edit.range.startLineNumber);
 
@@ -108,7 +108,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
 				lineHeight,
 			};
 		});
-		this.minEditorScrollHeight = derived(reader => {
+		this.minEditorScrollHeight = derived(this, reader => {
 			const layout = mapOutFalsy(this._layout).read(reader);
 			if (!layout) {
 				return 0;
@@ -118,7 +118,7 @@ export class InlineEditsWordReplacementView extends Disposable implements IInlin
 		this._root = n.div({
 			class: 'word-replacement',
 		}, [
-			derived(reader => {
+			derived(this, reader => {
 				const layout = mapOutFalsy(this._layout).read(reader);
 				if (!layout) {
 					return [];

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

@@ -109,7 +109,7 @@ export function getContentRenderWidth(content: string, editor: ICodeEditor, text
 export function getEditorValidOverlayRect(editor: ObservableCodeEditor): IObservable<Rect> {
 	const contentLeft = editor.layoutInfoContentLeft;
 
-	const width = derived(r => {
+	const width = derived({ name: 'editor.validOverlay.width' }, r => {
 		const hasMinimapOnTheRight = editor.layoutInfoMinimap.read(r).minimapLeft !== 0;
 		const editorWidth = editor.layoutInfoWidth.read(r) - contentLeft.read(r);
 
@@ -121,9 +121,9 @@ export function getEditorValidOverlayRect(editor: ObservableCodeEditor): IObserv
 		return editorWidth;
 	});
 
-	const height = derived(r => editor.layoutInfoHeight.read(r) + editor.contentHeight.read(r));
+	const height = derived({ name: 'editor.validOverlay.height' }, r => editor.layoutInfoHeight.read(r) + editor.contentHeight.read(r));
 
-	return derived(r => Rect.fromLeftTopWidthHeight(contentLeft.read(r), 0, width.read(r), height.read(r)));
+	return derived({ name: 'editor.validOverlay' }, r => Rect.fromLeftTopWidthHeight(contentLeft.read(r), 0, width.read(r), height.read(r)));
 }
 
 export class StatusBarViewItem extends MenuEntryActionViewItem {
@@ -394,10 +394,10 @@ export function observeElementPosition(element: HTMLElement, store: DisposableSt
 
 export function rectToProps(fn: (reader: IReader) => Rect) {
 	return {
-		left: derived(reader => /** @description left */ fn(reader).left),
-		top: derived(reader => /** @description top */ fn(reader).top),
-		width: derived(reader => /** @description width */ fn(reader).right - fn(reader).left),
-		height: derived(reader => /** @description height */ fn(reader).bottom - fn(reader).top),
+		left: derived({ name: 'editor.validOverlay.left' }, reader => /** @description left */ fn(reader).left),
+		top: derived({ name: 'editor.validOverlay.top' }, reader => /** @description top */ fn(reader).top),
+		width: derived({ name: 'editor.validOverlay.width' }, reader => /** @description width */ fn(reader).right - fn(reader).left),
+		height: derived({ name: 'editor.validOverlay.height' }, reader => /** @description height */ fn(reader).bottom - fn(reader).top),
 	};
 }