Sticky Scroll: Adding height and emitter for height change event (microsoft#235953)

* adding height and emitter for hieght change event

* adding the event to the interface

* Set the height always through `_setHeight`

* Switch to non-overflow mode when it would go on top of sticky scroll

---------

Co-authored-by: Alexandru Dima <[email protected]>

Author: aiday-mar

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

@@ -7,7 +7,7 @@ import { IAction } from '../../../../../../base/common/actions.js';
 import { Color } from '../../../../../../base/common/color.js';
 import { structuralEquals } from '../../../../../../base/common/equals.js';
 import { Disposable } from '../../../../../../base/common/lifecycle.js';
-import { IObservable, autorun, constObservable, derived, derivedOpts, observableValue } from '../../../../../../base/common/observable.js';
+import { IObservable, autorun, constObservable, derived, derivedOpts, observableFromEvent, observableValue } from '../../../../../../base/common/observable.js';
 import { MenuId, MenuItemAction } from '../../../../../../platform/actions/common/actions.js';
 import { ICommandService } from '../../../../../../platform/commands/common/commands.js';
 import { IInstantiationService } from '../../../../../../platform/instantiation/common/instantiation.js';
@@ -25,6 +25,7 @@ import { Position } from '../../../../../common/core/position.js';
 import { Range } from '../../../../../common/core/range.js';
 import { Command } from '../../../../../common/languages.js';
 import { ITextModel } from '../../../../../common/model.js';
+import { StickyScrollController } from '../../../../stickyScroll/browser/stickyScrollController.js';
 import { CustomizedMenuWorkbenchToolBar } from '../../hintsWidget/inlineCompletionsHintsWidget.js';
 import { PathBuilder, StatusBarViewItem, getOffsetForPos, mapOutFalsy, maxContentWidthInRange, n } from './utils.js';
 import { InlineEditWithChanges } from './viewAndDiffProducer.js';
@@ -396,13 +397,17 @@ export class InlineEditsSideBySideDiff extends Disposable {
 		};
 	});
 
+	private _stickyScrollController = StickyScrollController.get(this._editorObs.editor);
+	private readonly _stickyScrollHeight = this._stickyScrollController ? observableFromEvent(this._stickyScrollController.onDidChangeStickyScrollHeight, () => this._stickyScrollController!.stickyScrollWidgetHeight) : constObservable(0);
+
 	private readonly _shouldOverflow = derived(reader => {
 		const range = this._edit.read(reader)?.originalLineRange;
 		if (!range) {
 			return false;
 		}
+		const stickyScrollHeight = this._stickyScrollHeight.read(reader);
 		const top = this._editor.getTopForLineNumber(range.startLineNumber) - this._editorObs.scrollTop.read(reader);
-		return top > 0;
+		return top > stickyScrollHeight;
 	});
 
 

src/vs/editor/contrib/stickyScroll/browser/stickyScrollController.ts

@@ -29,10 +29,12 @@ import { StickyRange } from './stickyScrollElement.js';
 import { IMouseEvent, StandardMouseEvent } from '../../../../base/browser/mouseEvent.js';
 import { FoldingController } from '../../folding/browser/folding.js';
 import { FoldingModel, toggleCollapseState } from '../../folding/browser/foldingModel.js';
+import { Emitter, Event } from '../../../../base/common/event.js';
 
 export interface IStickyScrollController {
 	get stickyScrollCandidateProvider(): IStickyLineCandidateProvider;
 	get stickyScrollWidgetState(): StickyScrollWidgetState;
+	readonly stickyScrollWidgetHeight: number;
 	isFocused(): boolean;
 	focus(): void;
 	focusNext(): void;
@@ -41,6 +43,7 @@ export interface IStickyScrollController {
 	findScrollWidgetState(): StickyScrollWidgetState;
 	dispose(): void;
 	selectEditor(): void;
+	onDidChangeStickyScrollHeight: Event<{ height: number }>;
 }
 
 export class StickyScrollController extends Disposable implements IEditorContribution, IStickyScrollController {
@@ -71,6 +74,9 @@ export class StickyScrollController extends Disposable implements IEditorContrib
 	private _showEndForLine: number | undefined;
 	private _minRebuildFromLine: number | undefined;
 
+	private readonly _onDidChangeStickyScrollHeight = this._register(new Emitter<{ height: number }>());
+	public readonly onDidChangeStickyScrollHeight = this._onDidChangeStickyScrollHeight.event;
+
 	constructor(
 		private readonly _editor: ICodeEditor,
 		@IContextMenuService private readonly _contextMenuService: IContextMenuService,
@@ -118,6 +124,9 @@ export class StickyScrollController extends Disposable implements IEditorContrib
 		this._register(dom.addDisposableListener(stickyScrollDomNode, dom.EventType.MOUSE_DOWN, (e) => {
 			this._onMouseDown = true;
 		}));
+		this._register(this._stickyScrollWidget.onDidChangeStickyScrollHeight((e) => {
+			this._onDidChangeStickyScrollHeight.fire(e);
+		}));
 		this._onDidResize();
 		this._readConfiguration();
 	}
@@ -130,6 +139,10 @@ export class StickyScrollController extends Disposable implements IEditorContrib
 		return this._widgetState;
 	}
 
+	get stickyScrollWidgetHeight(): number {
+		return this._stickyScrollWidget.height;
+	}
+
 	public static get(editor: ICodeEditor): IStickyScrollController | null {
 		return editor.getContribution<StickyScrollController>(StickyScrollController.ID);
 	}
@@ -413,6 +426,7 @@ export class StickyScrollController extends Disposable implements IEditorContrib
 		const options = this._editor.getOption(EditorOption.stickyScroll);
 		if (options.enabled === false) {
 			this._editor.removeOverlayWidget(this._stickyScrollWidget);
+			this._resetState();
 			this._sessionStore.clear();
 			this._enabled = false;
 			return;

src/vs/editor/contrib/stickyScroll/browser/stickyScrollWidget.ts

@@ -19,6 +19,7 @@ import { LineDecoration } from '../../../common/viewLayout/lineDecorations.js';
 import { CharacterMapping, RenderLineInput, renderViewLine } from '../../../common/viewLayout/viewLineRenderer.js';
 import { foldingCollapsedIcon, foldingExpandedIcon } from '../../folding/browser/foldingDecorations.js';
 import { FoldingModel } from '../../folding/browser/foldingModel.js';
+import { Emitter } from '../../../../base/common/event.js';
 
 export class StickyScrollWidgetState {
 	constructor(
@@ -62,6 +63,12 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 	private _lastLineRelativePosition: number = 0;
 	private _minContentWidthInPx: number = 0;
 	private _isOnGlyphMargin: boolean = false;
+	private _height: number = -1;
+
+	public get height(): number { return this._height; }
+
+	private readonly _onDidChangeStickyScrollHeight = this._register(new Emitter<{ height: number }>());
+	public readonly onDidChangeStickyScrollHeight = this._onDidChangeStickyScrollHeight.event;
 
 	constructor(
 		private readonly _editor: ICodeEditor
@@ -81,6 +88,7 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 		this._rootDomNode.classList.toggle('peek', _editor instanceof EmbeddedCodeEditorWidget);
 		this._rootDomNode.appendChild(this._lineNumbersDomNode);
 		this._rootDomNode.appendChild(this._linesDomNodeScrollable);
+		this._setHeight(0);
 
 		const updateScrollLeftPosition = () => {
 			this._linesDomNode.style.left = this._editor.getOption(EditorOption.stickyScroll).scrollWithEditor ? `-${this._editor.getScrollLeft()}px` : '0px';
@@ -193,7 +201,6 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 		}
 		// Keep the lines that need to be updated
 		this._renderedStickyLines = this._renderedStickyLines.slice(0, clearFromLine);
-		this._rootDomNode.style.display = 'none';
 	}
 
 	private _useFoldingOpacityTransition(requireTransitions: boolean) {
@@ -213,6 +220,8 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 	private async _renderRootNode(state: StickyScrollWidgetState | undefined, foldingModel: FoldingModel | undefined, rebuildFromLine: number): Promise<void> {
 		this._clearStickyLinesFromLine(rebuildFromLine);
 		if (!state) {
+			// make sure the dom is 0 height and display:none
+			this._setHeight(0);
 			return;
 		}
 		// For existing sticky lines update the top and z-index
@@ -237,16 +246,31 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
 		}
 
 		const widgetHeight = this._lineNumbers.length * this._lineHeight + this._lastLineRelativePosition;
-		this._rootDomNode.style.display = 'block';
-		this._lineNumbersDomNode.style.height = `${widgetHeight}px`;
-		this._linesDomNodeScrollable.style.height = `${widgetHeight}px`;
-		this._rootDomNode.style.height = `${widgetHeight}px`;
+		this._setHeight(widgetHeight);
 
 		this._rootDomNode.style.marginLeft = '0px';
 		this._minContentWidthInPx = Math.max(...this._renderedStickyLines.map(l => l.scrollWidth)) + layoutInfo.verticalScrollbarWidth;
 		this._editor.layoutOverlayWidget(this);
 	}
 
+	private _setHeight(height: number): void {
+		if (this._height === height) {
+			return;
+		}
+		this._height = height;
+
+		if (this._height === 0) {
+			this._rootDomNode.style.display = 'none';
+		} else {
+			this._rootDomNode.style.display = 'block';
+			this._lineNumbersDomNode.style.height = `${this._height}px`;
+			this._linesDomNodeScrollable.style.height = `${this._height}px`;
+			this._rootDomNode.style.height = `${this._height}px`;
+		}
+
+		this._onDidChangeStickyScrollHeight.fire({ height: this._height });
+	}
+
 	private _setFoldingHoverListeners(): void {
 		const showFoldingControls: 'mouseover' | 'always' | 'never' = this._editor.getOption(EditorOption.showFoldingControls);
 		if (showFoldingControls !== 'mouseover') {