Improve PreferenceEditorWidget scroll behavior (#16078)

Author: colin-grant-work

packages/preferences/src/browser/preference-tree-model.ts

@@ -251,7 +251,8 @@ export class PreferenceTreeModel extends TreeModelImpl {
      */
     selectIfNotSelected(node: SelectableTreeNode): boolean {
         const currentlySelected = this.selectedNodes[0];
-        if (node !== currentlySelected) {
+        if (!node.selected || node !== currentlySelected) {
+            node.selected = true;
             this.selectNode(node);
             return true;
         }

packages/preferences/src/browser/views/preference-editor-widget.ts

@@ -112,12 +112,14 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
             this.handleSearchChange(isFiltered, leavesAreVisible);
         } else if (e.source === PreferenceFilterChangeSource.Scope) {
             this.handleScopeChange(isFiltered);
+            this.showInTree(currentFirstVisible);
         } else if (e.source === PreferenceFilterChangeSource.Schema) {
             this.handleSchemaChange(isFiltered);
+            this.showInTree(currentFirstVisible);
         } else {
             unreachable(e.source, 'Not all PreferenceFilterChangeSource enum variants handled.');
         }
-        this.resetScroll(currentFirstVisible, e.source === PreferenceFilterChangeSource.Search && !isFiltered);
+        this.resetScroll(currentFirstVisible, e.source === PreferenceFilterChangeSource.Search);
     }
 
     protected handleRegistryChange(): void {
@@ -235,18 +237,20 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
         }
     }
 
-    protected doResetScroll(nodeIDToScrollTo?: string, filterWasCleared: boolean = false): void {
+    protected doResetScroll(nodeIDToScrollTo?: string, filterWasModified: boolean = false): void {
         requestAnimationFrame(() => {
             this.scrollBar?.update();
-            if (!filterWasCleared && nodeIDToScrollTo) {
+            if (filterWasModified) {
+                this.scrollContainer.scrollTop = 0;
+            } else if (nodeIDToScrollTo) {
                 const { id, collection } = this.analyzeIDAndGetRendererGroup(nodeIDToScrollTo);
                 const renderer = collection.get(id);
                 if (renderer?.visible) {
-                    this.scrollContainer.scrollTo(0, renderer.node.offsetHeight);
+                    this.scrollContainer.scrollTo(0, renderer.node.offsetTop);
                     return;
                 }
             }
-            this.scrollContainer.scrollTop = 0;
+
         });
     };
 
@@ -281,26 +285,30 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
         if (id && id !== this.firstVisibleChildID) {
             this.firstVisibleChildID = id;
             if (!this.shouldUpdateModelSelection) { return; }
-            let currentNode = this.model.getNode(id);
-            let expansionAncestor;
-            let selectionAncestor;
-            while (currentNode && (!expansionAncestor || !selectionAncestor)) {
-                if (!selectionAncestor && SelectableTreeNode.is(currentNode)) {
-                    selectionAncestor = currentNode;
-                }
-                if (!expansionAncestor && ExpandableTreeNode.is(currentNode)) {
-                    expansionAncestor = currentNode;
-                }
-                currentNode = currentNode.parent;
+            this.showInTree(id);
+        }
+    }
+
+    protected showInTree(id: string): void {
+        let currentNode = this.model.getNode(id);
+        let expansionAncestor;
+        let selectionAncestor;
+        while (currentNode && (!expansionAncestor || !selectionAncestor)) {
+            if (!selectionAncestor && SelectableTreeNode.is(currentNode)) {
+                selectionAncestor = currentNode;
             }
-            if (selectionAncestor) {
-                this.currentModelSelectionId = selectionAncestor.id;
-                expansionAncestor = expansionAncestor ?? selectionAncestor;
-                this.model.selectIfNotSelected(selectionAncestor);
-                if (!this.model.isFiltered && id !== this.lastUserSelection) {
-                    this.lastUserSelection = '';
-                    this.model.collapseAllExcept(expansionAncestor);
-                }
+            if (!expansionAncestor && ExpandableTreeNode.is(currentNode)) {
+                expansionAncestor = currentNode;
+            }
+            currentNode = currentNode.parent;
+        }
+        if (selectionAncestor) {
+            this.currentModelSelectionId = selectionAncestor.id;
+            expansionAncestor = expansionAncestor ?? selectionAncestor;
+            this.model.selectIfNotSelected(selectionAncestor);
+            if (!this.model.isFiltered && id !== this.lastUserSelection) {
+                this.lastUserSelection = '';
+                this.model.collapseAllExcept(expansionAncestor);
             }
         }
     }