diff --git a/src/vs/base/browser/ui/list/listView.ts b/src/vs/base/browser/ui/list/listView.ts index ac85245b2fe994b2c423ae3b978e50b1bfb115ed..a4f93a958c7cad8aecd0a4c2d870cd9a0a4135ff 100644 --- a/src/vs/base/browser/ui/list/listView.ts +++ b/src/vs/base/browser/ui/list/listView.ts @@ -445,6 +445,15 @@ export class ListView implements ISpliceable, 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; } diff --git a/src/vs/workbench/contrib/preferences/electron-browser/settingsEditor2.ts b/src/vs/workbench/contrib/preferences/electron-browser/settingsEditor2.ts index e30905c2ebe0f77c27e18c8d4cf990e5f80341bd..efdfdce5654ed7fb2145fb9417e89e193f4822c3 100644 --- a/src/vs/workbench/contrib/preferences/electron-browser/settingsEditor2.ts +++ b/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(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(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;