Fix #64749 - firstVisibleIndex in tree should consider element midpoint

src/vs/base/browser/ui/list/listView.ts

@@ -445,6 +445,15 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 
 	get firstVisibleIndex(): number {
 		const range = this.getRenderRange(this.lastRenderTop, this.lastRenderHeight);
+		const firstElTop = this.rangeMap.positionAt(range.start);
+		const nextElTop = this.rangeMap.positionAt(range.start + 1);
+		if (nextElTop !== -1) {
+			const firstElMidpoint = (nextElTop - firstElTop) / 2 + firstElTop;
+			if (firstElMidpoint < this.scrollTop) {
+				return range.start + 1;
+			}
+		}
+
 		return range.start;
 	}
 

src/vs/workbench/contrib/preferences/electron-browser/settingsEditor2.ts

@@ -273,9 +273,6 @@ export class SettingsEditor2 extends BaseEditor {
 	}
 
 	layout(dimension: DOM.Dimension): void {
-		// const firstEl = this.settingsTree.getFirstVisibleElement();
-		// const firstElTop = this.settingsTree.getRelativeTop(firstEl);
-
 		this.layoutTrees(dimension);
 
 		const innerWidth = dimension.width - 24 * 2; // 24px padding on left and right
@@ -497,7 +494,7 @@ export class SettingsEditor2 extends BaseEditor {
 			e => {
 				if (DOM.findParentWithClass(e.relatedTarget, 'settings-editor-tree')) {
 					if (this.settingsTree.scrollTop > 0) {
-						const firstElement = this.getFirstVisibleElement();
+						const firstElement = this.settingsTree.firstVisibleElement;
 						this.settingsTree.reveal(firstElement, 0.1);
 						return true;
 					}
@@ -519,7 +516,7 @@ export class SettingsEditor2 extends BaseEditor {
 			e => {
 				if (DOM.findParentWithClass(e.relatedTarget, 'settings-editor-tree')) {
 					if (this.settingsTree.scrollTop < this.settingsTree.scrollHeight) {
-						const lastElement = this.getLastVisibleElement();
+						const lastElement = this.settingsTree.lastVisibleElement;
 						this.settingsTree.reveal(lastElement, 0.9);
 						return true;
 					}
@@ -531,30 +528,6 @@ export class SettingsEditor2 extends BaseEditor {
 		);
 	}
 
-	private getFirstVisibleElement(nth = 0): SettingsTreeElement | null {
-		// Hack, see https://github.com/Microsoft/vscode/issues/64749
-		const settingItems = this.settingsTree.getHTMLElement().querySelectorAll(AbstractSettingRenderer.CONTENTS_SELECTOR);
-		const firstEl = settingItems[nth] || settingItems[0];
-		if (!firstEl) {
-			return null;
-		}
-
-		const firstSettingId = this.settingRenderers.getIdForDOMElementInSetting(<HTMLElement>firstEl);
-		return this.settingsTreeModel.getElementById(firstSettingId);
-	}
-
-	private getLastVisibleElement(): SettingsTreeElement | null {
-		// Hack, see https://github.com/Microsoft/vscode/issues/64749
-		const settingItems = this.settingsTree.getHTMLElement().querySelectorAll(AbstractSettingRenderer.CONTENTS_SELECTOR);
-		const firstEl = settingItems[settingItems.length - 1];
-		if (!firstEl) {
-			return null;
-		}
-
-		const firstSettingId = this.settingRenderers.getIdForDOMElementInSetting(<HTMLElement>firstEl);
-		return this.settingsTreeModel.getElementById(firstSettingId);
-	}
-
 	private createFocusSink(container: HTMLElement, callback: (e: any) => boolean, label: string): HTMLElement {
 		const listFocusSink = DOM.append(container, $('.settings-tree-focus-sink'));
 		listFocusSink.setAttribute('aria-label', label);
@@ -688,7 +661,7 @@ export class SettingsEditor2 extends BaseEditor {
 			return;
 		}
 
-		const elementToSync = this.getFirstVisibleElement(1);
+		const elementToSync = this.settingsTree.firstVisibleElement;
 		const element = elementToSync instanceof SettingsTreeSettingElement ? elementToSync.parent :
 			elementToSync instanceof SettingsTreeGroupElement ? elementToSync :
 				null;