Fix Console Scrolling

Signed-off-by: Parisa Betel Miri <[email protected]>
eclipse-theia · Jan 20, 2025 · 59c151f · 59c151f
1 parent 998bf47
commit 59c151f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 31 deletions.
diff --git a/packages/console/src/browser/console-content-widget.tsx b/packages/console/src/browser/console-content-widget.tsx
@@ -14,11 +14,10 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Message } from '@theia/core/shared/@phosphor/messaging';
 import { interfaces, Container, injectable } from '@theia/core/shared/inversify';
 import { MenuPath } from '@theia/core';
 import { TreeProps } from '@theia/core/lib/browser/tree';
-import { SourceTreeWidget, TreeSourceNode, TreeElementNode } from '@theia/core/lib/browser/source-tree';
+import { SourceTreeWidget, TreeElementNode } from '@theia/core/lib/browser/source-tree';
 import { ConsoleItem } from './console-session';
 import { Severity } from '@theia/core/lib/common/severity';
 
@@ -27,41 +26,19 @@ export class ConsoleContentWidget extends SourceTreeWidget {
 
     static CONTEXT_MENU: MenuPath = ['console-context-menu'];
 
-    protected _shouldScrollToEnd = true;
-
-    protected set shouldScrollToEnd(shouldScrollToEnd: boolean) {
-        this._shouldScrollToEnd = shouldScrollToEnd;
-        this.shouldScrollToRow = this._shouldScrollToEnd;
-    }
-
-    protected get shouldScrollToEnd(): boolean {
-        return this._shouldScrollToEnd;
-    }
-
     static override createContainer(parent: interfaces.Container, props?: Partial<TreeProps>): Container {
         const child = SourceTreeWidget.createContainer(parent, {
             contextMenuPath: ConsoleContentWidget.CONTEXT_MENU,
+            viewProps: {
+                followOutput: true
+            },
             ...props
         });
         child.unbind(SourceTreeWidget);
         child.bind(ConsoleContentWidget).toSelf();
         return child;
     }
 
-    protected override onAfterAttach(msg: Message): void {
-        super.onAfterAttach(msg);
-        this.toDisposeOnDetach.push(this.onScrollUp(() => this.shouldScrollToEnd = false));
-        this.toDisposeOnDetach.push(this.onScrollYReachEnd(() => this.shouldScrollToEnd = true));
-        this.toDisposeOnDetach.push(this.model.onChanged(() => this.revealLastOutputIfNeeded()));
-    }
-
-    protected revealLastOutputIfNeeded(): void {
-        const { root } = this.model;
-        if (this.shouldScrollToEnd && TreeSourceNode.is(root)) {
-            this.model.selectNode(root.children[root.children.length - 1]);
-        }
-    }
-
     protected override createTreeElementNodeClassNames(node: TreeElementNode): string[] {
         const classNames = super.createTreeElementNodeClassNames(node);
         if (node.element) {

diff --git a/packages/core/src/browser/tree/tree-widget.tsx b/packages/core/src/browser/tree/tree-widget.tsx
@@ -32,7 +32,7 @@ import { notEmpty } from '../../common/objects';
 import { isOSX } from '../../common/os';
 import { ReactWidget } from '../widgets/react-widget';
 import * as React from 'react';
-import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Virtuoso, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
 import { TopDownTreeIterator } from './tree-iterator';
 import { SearchBox, SearchBoxFactory, SearchBoxProps } from './search-box';
 import { TreeSearch } from './tree-search';
@@ -111,6 +111,10 @@ export interface TreeProps {
      */
     readonly expandOnlyOnExpansionToggleClick?: boolean;
 
+    /**
+     * Props that are forwarded to the virtuoso list rendered. Defaults to `{}`.
+     */
+    readonly viewProps?: VirtuosoProps<unknown, unknown>;
 }
 
 /**
@@ -498,6 +502,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                 rows={rows}
                 renderNodeRow={this.renderNodeRow}
                 scrollToRow={this.scrollToRow}
+                {...this.props.viewProps}
             />;
         }
         // eslint-disable-next-line no-null/no-null
@@ -1546,7 +1551,7 @@ export namespace TreeWidget {
     /**
      * Representation of the tree view properties.
      */
-    export interface ViewProps {
+    export interface ViewProps extends VirtuosoProps<unknown, unknown> {
         /**
          * The width property.
          */
@@ -1568,7 +1573,7 @@ export namespace TreeWidget {
     export class View extends React.Component<ViewProps> {
         list: VirtuosoHandle | undefined;
         override render(): React.ReactNode {
-            const { rows, width, height, scrollToRow } = this.props;
+            const { rows, width, height, scrollToRow, renderNodeRow, ...other } = this.props;
             return <Virtuoso
                 ref={list => {
                     this.list = (list || undefined);
@@ -1580,11 +1585,12 @@ export namespace TreeWidget {
                     }
                 }}
                 totalCount={rows.length}
-                itemContent={index => this.props.renderNodeRow(rows[index])}
+                itemContent={index => renderNodeRow(rows[index])}
                 width={width}
                 height={height}
                 // This is a pixel value, it will scan 200px to the top and bottom of the current view
                 overscan={500}
+                {...other}
             />;
         }
     }