Preferences: Scroll to focused item when search cleared (#16992)

Author: colin-grant-work

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

@@ -70,6 +70,7 @@ export class PreferenceTreeModel extends TreeModelImpl {
     protected _isFiltered: boolean = false;
     protected _currentRows: Map<string, PreferenceTreeNodeRow> = new Map();
     protected _totalVisibleLeaves = 0;
+    private _suppressSelection = false;
 
     get currentRows(): Readonly<Map<string, PreferenceTreeNodeRow>> {
         return this._currentRows;
@@ -117,7 +118,9 @@ export class PreferenceTreeModel extends TreeModelImpl {
                 if (this.isFiltered) {
                     this.expandAll();
                 } else if (CompositeTreeNode.is(this.root)) {
-                    this.collapseAll(this.root);
+                    const root = this.root;
+                    // Avoid intermediate selection events while collapsing.
+                    this.withSuppressedSelection(() => this.collapseAll(root));
                 }
                 this.updateFilteredRows(PreferenceFilterChangeSource.Search);
             }),
@@ -238,6 +241,21 @@ export class PreferenceTreeModel extends TreeModelImpl {
         }
     }
 
+    override selectNode(node: Readonly<SelectableTreeNode>): void {
+        if (!this._suppressSelection) {
+            super.selectNode(node);
+        }
+    }
+
+    protected withSuppressedSelection(fn: () => void): void {
+        this._suppressSelection = true;
+        try {
+            fn();
+        } finally {
+            this._suppressSelection = false;
+        }
+    }
+
     getNodeFromPreferenceId(id: string): Preference.TreeNode | undefined {
         const node = this.getNode(this.treeGenerator.getNodeId(id));
         return node && Preference.TreeNode.is(node) ? node : undefined;

packages/preferences/src/browser/style/search-input.css

@@ -17,6 +17,7 @@
 .theia-settings-container .settings-search-container {
   display: flex;
   align-items: center;
+  padding: 1px; /* Enough for the search bar's outline to show up. */
 }
 
 .theia-settings-container .settings-search-container .settings-search-input {
@@ -36,10 +37,6 @@
   display: flex;
 }
 
-.theia-settings-container .settings-search-container .clear-all {
-  background: var(--theia-icon-clear);
-}
-
 .theia-settings-container .settings-search-container .results-found {
   background-color: var(--theia-badge-background);
   border-radius: 2px;
@@ -59,6 +56,17 @@
   border: var(--theia-border-width) solid transparent;
   opacity: 0.7;
   cursor: pointer;
+  /* Reset default button styles when using <button> */
+  appearance: none;
+  background-color: transparent;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+}
+
+.theia-settings-container .settings-search-container .option:disabled {
+  cursor: default;
+  opacity: var(--theia-mod-disabled-opacity);
 }
 
 .theia-settings-container .settings-search-container .enabled {

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

@@ -25,7 +25,10 @@ import {
     TopDownTreeIterator,
     ExpandableTreeNode,
 } from '@theia/core/lib/browser';
-import { Disposable, DisposableCollection, PreferenceProviderDataChanges, PreferenceProviderProvider, PreferenceSchemaService, PreferenceService, unreachable } from '@theia/core';
+import {
+    Disposable, DisposableCollection, nls, PreferenceProviderDataChanges,
+    PreferenceProviderProvider, PreferenceSchemaService, PreferenceService, unreachable
+} from '@theia/core';
 import { BaseWidget, DEFAULT_SCROLL_OPTIONS } from '@theia/core/lib/browser/widgets/widget';
 import { PreferenceTreeModel, PreferenceFilterChangeEvent, PreferenceFilterChangeSource } from '../preference-tree-model';
 import { PreferenceNodeRendererFactory, GeneralPreferenceNodeRenderer } from './components/preference-node-renderer';
@@ -41,7 +44,7 @@ export interface PreferencesEditorState {
 @injectable()
 export class PreferencesEditorWidget extends BaseWidget implements StatefulWidget {
     static readonly ID = 'settings.editor';
-    static readonly LABEL = 'Settings Editor';
+    static readonly LABEL = nls.localizeByDefault('Settings Editor');
 
     override scrollOptions = DEFAULT_SCROLL_OPTIONS;
 
@@ -56,6 +59,11 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
     protected lastUserSelection = '';
     protected isAtScrollTop = true;
     protected firstVisibleChildID = '';
+    /**
+     * Tracks the node ID of the preference row the user last focused.
+     * Used to scroll back to that preference when the search filter is cleared.
+     */
+    protected lastFocusedRendererNodeId = '';
     protected renderers = new Map<string, GeneralPreferenceNodeRenderer>();
     protected preferenceDataKeys = new Map<string, string>();
     // The commonly used section will duplicate preference ID's, so we'll keep a separate list of them.
@@ -95,10 +103,20 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
         innerWrapper.classList.add('settings-main-scroll-container');
         this.scrollContainer = innerWrapper;
         innerWrapper.addEventListener('scroll', this.onScroll, { passive: true });
+        innerWrapper.addEventListener('focusin', e => {
+            const target = e.target;
+            if (target instanceof HTMLElement) {
+                const prefRow = target.closest('.single-pref');
+                const nodeId = prefRow?.getAttribute('data-node-id');
+                if (nodeId) {
+                    this.lastFocusedRendererNodeId = nodeId;
+                }
+            }
+        });
         this.node.appendChild(innerWrapper);
         const noLeavesMessage = document.createElement('div');
         noLeavesMessage.classList.add('settings-no-results-announcement');
-        noLeavesMessage.textContent = 'That search query has returned no results.';
+        noLeavesMessage.textContent = nls.localizeByDefault('No Settings Found');
         this.node.appendChild(noLeavesMessage);
     }
 
@@ -114,20 +132,50 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
 
     protected handleDisplayChange(e: PreferenceFilterChangeEvent): void {
         const { isFiltered } = this.model;
-        const currentFirstVisible = this.firstVisibleChildID;
         const leavesAreVisible = this.areLeavesVisible();
+        // Capture scroll target before handlers modify visibility / DOM layout.
+        const scrollTarget = this.getScrollTarget(e.source);
+
         if (e.source === PreferenceFilterChangeSource.Search) {
             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);
+
+        if (scrollTarget) {
+            this.showInTree(scrollTarget);
+        }
+        this.resetScroll(scrollTarget);
+
+        if (e.source === PreferenceFilterChangeSource.Search) {
+            // Reset focus if search context changes.
+            this.lastFocusedRendererNodeId = '';
+        }
+    }
+
+    protected getScrollTarget(source: PreferenceFilterChangeSource): string | undefined {
+        if (source !== PreferenceFilterChangeSource.Search) {
+            return this.firstVisibleChildID;
+        }
+        if (!this.model.isFiltered && this.lastFocusedRendererNodeId && this.isRendererInViewport(this.lastFocusedRendererNodeId)) {
+            return this.lastFocusedRendererNodeId;
+        }
+        return undefined;
+    }
+
+    protected isRendererInViewport(nodeId: string): boolean {
+        const { id, collection } = this.analyzeIDAndGetRendererGroup(nodeId);
+        const renderer = collection.get(id);
+        if (!renderer?.visible) { return false; }
+        const scrollTop = this.scrollContainer.scrollTop;
+        const viewportBottom = scrollTop + this.scrollContainer.clientHeight;
+        const elementTop = renderer.node.offsetTop;
+        const elementBottom = elementTop + renderer.node.offsetHeight;
+        return elementTop < viewportBottom && elementBottom > scrollTop;
     }
 
     protected handleRegistryChange(): void {
@@ -232,33 +280,31 @@ export class PreferencesEditorWidget extends BaseWidget implements StatefulWidge
         }
     }
 
-    protected resetScroll(nodeIDToScrollTo?: string, filterWasCleared: boolean = false): void {
+    protected resetScroll(nodeIDToScrollTo?: string): void {
         if (this.scrollBar) { // Absent on widget creation
-            this.doResetScroll(nodeIDToScrollTo, filterWasCleared);
+            this.doResetScroll(nodeIDToScrollTo);
         } else {
             const interval = setInterval(() => {
                 if (this.scrollBar) {
                     clearInterval(interval);
-                    this.doResetScroll(nodeIDToScrollTo, filterWasCleared);
+                    this.doResetScroll(nodeIDToScrollTo);
                 }
             }, 500);
         }
     }
 
-    protected doResetScroll(nodeIDToScrollTo?: string, filterWasModified: boolean = false): void {
+    protected doResetScroll(nodeIDToScrollTo?: string): void {
         requestAnimationFrame(() => {
             this.scrollBar?.update();
-            if (filterWasModified) {
-                this.scrollContainer.scrollTop = 0;
-            } else if (nodeIDToScrollTo) {
+            if (nodeIDToScrollTo) {
                 const { id, collection } = this.analyzeIDAndGetRendererGroup(nodeIDToScrollTo);
                 const renderer = collection.get(id);
                 if (renderer?.visible) {
                     this.scrollContainer.scrollTo(0, renderer.node.offsetTop);
                     return;
                 }
             }
-
+            this.scrollContainer.scrollTop = 0;
         });
     };
 

packages/preferences/src/browser/views/preference-searchbar-widget.tsx

@@ -66,7 +66,7 @@ export class PreferencesSearchbarWidget extends ReactWidget implements StatefulW
      * Clears the search input and all search results.
      * @param e on-click mouse event.
      */
-    protected clearSearchResults = async (e: React.MouseEvent): Promise<void> => {
+    protected clearSearchResults = async (e: React.SyntheticEvent): Promise<void> => {
         const search = document.getElementById(PreferencesSearchbarWidget.SEARCHBAR_ID) as HTMLInputElement;
         if (search) {
             search.value = '';
@@ -99,6 +99,8 @@ export class PreferencesSearchbarWidget extends ReactWidget implements StatefulW
         return this.searchTermExists() ?
             (<span
                 className="results-found"
+                role="status"
+                aria-live="polite"
                 title={resultsFound}>
                 {resultsFound}
             </span>)
@@ -109,11 +111,16 @@ export class PreferencesSearchbarWidget extends ReactWidget implements StatefulW
      * Renders a clear all button.
      */
     protected renderClearAllOption(): React.ReactNode {
-        return <span
-            className={`${codicon('clear-all')} option ${(this.searchTermExists() ? 'enabled' : '')}`}
+        const enabled = this.searchTermExists();
+        return <button
+            className={`option ${enabled ? 'enabled' : ''}`}
+            aria-label={nls.localizeByDefault('Clear Search Results')}
             title={nls.localizeByDefault('Clear Search Results')}
+            disabled={!enabled}
             onClick={this.clearSearchResults}
-        />;
+        >
+            <i className={codicon('clear-all')} />
+        </button>;
     }
 
     /**