@theia/core 1.74.0-next.17 → 1.74.0-next.29

package/src/browser/shell/application-shell.ts

@@ -355,6 +355,7 @@ export class ApplicationShell extends Widget {
                 });
             }
         });
+        this.refreshBottomPanelToggleButton();
         this.initializedDeferred.resolve();
     }
 
@@ -689,14 +690,10 @@ export class ApplicationShell extends Widget {
             spacing: 0
         }, area => this.doToggleMaximized(area));
         dockPanel.id = BOTTOM_AREA_ID;
-        dockPanel.widgetAdded.connect((sender, widget) => {
-            this.refreshBottomPanelToggleButton();
-        });
         dockPanel.widgetRemoved.connect((sender, widget) => {
             if (sender.isEmpty) {
                 this.collapseBottomPanel();
             }
-            this.refreshBottomPanelToggleButton();
         }, this);
         dockPanel.node.addEventListener('lm-dragenter', event => {
             // Make sure that the main panel hides its overlay when the bottom panel is expanded
@@ -887,7 +884,6 @@ export class ApplicationShell extends Widget {
                     }
                 });
             }
-            this.refreshBottomPanelToggleButton();
         }
         // Proceed with the main panel once all others are set up
         await this.bottomPanelState.pendingUpdate;
@@ -1570,9 +1566,11 @@ export class ApplicationShell extends Widget {
             let size: number | undefined;
             if (bottomPanel.isEmpty) {
                 bottomPanel.node.style.minHeight = '0';
-                size = this.options.bottomPanel.emptySize;
-            } else if (this.bottomPanelState.lastPanelSize) {
+            }
+            if (this.bottomPanelState.lastPanelSize) {
                 size = this.bottomPanelState.lastPanelSize;
+            } else if (bottomPanel.isEmpty) {
+                size = this.options.bottomPanel.emptySize;
             } else {
                 size = this.getDefaultBottomPanelSize();
             }
@@ -1631,24 +1629,20 @@ export class ApplicationShell extends Widget {
      * and refers to the command `core.toggle.bottom.panel`.
      */
     protected refreshBottomPanelToggleButton(): void {
-        if (this.bottomPanel.isEmpty) {
-            this.statusBar.removeElement(BOTTOM_PANEL_TOGGLE_ID);
-        } else {
-            const label = nls.localize('theia/core/common/collapseBottomPanel', 'Toggle Bottom Panel');
-            const element: StatusBarEntry = {
-                name: label,
-                text: '$(codicon-window)',
-                alignment: StatusBarAlignment.RIGHT,
-                tooltip: label,
-                command: 'core.toggle.bottom.panel',
-                accessibilityInformation: {
-                    label: label,
-                    role: 'button'
-                },
-                priority: -1000
-            };
-            this.statusBar.setElement(BOTTOM_PANEL_TOGGLE_ID, element);
-        }
+        const label = nls.localize('theia/core/common/collapseBottomPanel', 'Toggle Bottom Panel');
+        const element: StatusBarEntry = {
+            name: label,
+            text: '$(codicon-window)',
+            alignment: StatusBarAlignment.RIGHT,
+            tooltip: label,
+            command: 'core.toggle.bottom.panel',
+            accessibilityInformation: {
+                label: label,
+                role: 'button'
+            },
+            priority: -1000
+        };
+        this.statusBar.setElement(BOTTOM_PANEL_TOGGLE_ID, element);
     }
 
     /**

package/src/browser/style/sidepanel.css

@@ -276,6 +276,11 @@
   background: inherit;
 }
 
+/* Ensure the empty bottom panel keeps a top border separating it from the main panel. */
+#theia-bottom-content-panel:not(:has(.lm-TabBar)) {
+  border-top: var(--theia-border-width) solid var(--theia-panel-border);
+}
+
 #theia-bottom-content-panel .lm-TabBar-tab {
   background: inherit;
 }

package/src/browser/tree/tree-widget.tsx

@@ -64,28 +64,10 @@ export const TREE_NODE_CAPTION_CLASS = 'theia-TreeNodeCaption';
 export const TREE_NODE_INDENT_GUIDE_CLASS = 'theia-tree-node-indent';
 
 /**
- * Threshold in pixels to consider the view as being scrolled to the bottom
+ * Threshold in pixels to consider the view as being scrolled to the bottom.
  */
 export const SCROLL_BOTTOM_THRESHOLD = 30;
 
-/**
- * Tree scroll event data.
- */
-export interface TreeScrollEvent {
-    readonly scrollTop: number;
-    readonly scrollLeft: number;
-}
-
-/**
- * Tree scroll state data.
- */
-export interface TreeScrollState {
-    readonly scrollTop: number;
-    readonly isAtBottom: boolean;
-    readonly scrollHeight?: number;
-    readonly clientHeight?: number;
-}
-
 export const TreeProps = Symbol('TreeProps');
 
 /**
@@ -189,8 +171,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
     protected searchBox: SearchBox;
     protected searchHighlights: Map<string, TreeDecoration.CaptionHighlight>;
 
-    protected readonly onScrollEmitter = new Emitter<TreeScrollEvent>();
-    readonly onScroll: TheiaEvent<TreeScrollEvent> = this.onScrollEmitter.event;
+    protected readonly onAtBottomStateChangeEmitter = new Emitter<boolean>();
+    readonly onAtBottomStateChange: TheiaEvent<boolean> = this.onAtBottomStateChangeEmitter.event;
 
     @inject(TreeDecoratorService)
     protected readonly decoratorService: TreeDecoratorService;
@@ -285,7 +267,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         this.node.addEventListener('mouseup', this.handleMiddleClickEvent.bind(this));
         this.node.addEventListener('auxclick', this.handleMiddleClickEvent.bind(this));
         this.toDispose.pushAll([
-            this.onScrollEmitter,
+            this.onAtBottomStateChangeEmitter,
             this.model,
             this.model.onChanged(() => this.updateRows()),
             this.model.onSelectionChanged(() => this.scheduleUpdateScrollToRow({ resize: false })),
@@ -551,7 +533,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                 rows={rows}
                 renderNodeRow={this.renderNodeRow}
                 scrollToRow={this.scrollToRow}
-                onScrollEmitter={this.onScrollEmitter}
+                onAtBottomStateChangeEmitter={this.onAtBottomStateChangeEmitter}
                 {...this.props.viewProps}
             />;
         }
@@ -1201,39 +1183,6 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         return this.node;
     }
 
-    /**
-     * Get the current scroll state from the virtualized view.
-     * This should be used instead of accessing the DOM scroll properties directly
-     * when the tree is virtualized.
-     */
-    protected getVirtualizedScrollState(): TreeScrollState | undefined {
-        return this.view?.getScrollState();
-    }
-
-    /**
-     * Check if the tree is scrolled to the bottom.
-     * Works with both virtualized and non-virtualized trees.
-     */
-    isScrolledToBottom(): boolean {
-        if (this.props.virtualized !== false && this.view) {
-            // Use virtualized scroll state
-            const scrollState = this.getVirtualizedScrollState();
-            return scrollState?.isAtBottom ?? true;
-        } else {
-            // Fallback to DOM-based calculation for non-virtualized trees
-            const scrollContainer = this.node;
-            const scrollHeight = scrollContainer.scrollHeight;
-            const scrollTop = scrollContainer.scrollTop;
-            const clientHeight = scrollContainer.clientHeight;
-
-            if (scrollHeight <= clientHeight) {
-                return true;
-            }
-
-            return scrollHeight - scrollTop - clientHeight <= SCROLL_BOTTOM_THRESHOLD;
-        }
-    }
-
     protected override onAfterAttach(msg: Message): void {
         const up = [
             Key.ARROW_UP,
@@ -1658,11 +1607,14 @@ export namespace TreeWidget {
         /**
          * Optional scroll event emitter.
          */
-        onScrollEmitter?: Emitter<TreeScrollEvent>
+        /**
+         * Optional emitter fired when the at-bottom state changes.
+         */
+        onAtBottomStateChangeEmitter?: Emitter<boolean>
     }
     export class View extends React.Component<ViewProps> {
         list: VirtuosoHandle | undefined;
-        private lastScrollState: TreeScrollState = { scrollTop: 0, isAtBottom: true, scrollHeight: 0, clientHeight: 0 };
+
         /**
          * Ensure the selected row is scrolled into view when virtualization finishes updating.
          */
@@ -1687,28 +1639,14 @@ export namespace TreeWidget {
         }
 
         override render(): React.ReactNode {
-            const { rows, width, height, scrollToRow, renderNodeRow, onScrollEmitter, ...other } = this.props;
+            const { rows, width, height, scrollToRow, renderNodeRow, onAtBottomStateChangeEmitter, ...other } = this.props;
             return <Virtuoso
                 ref={(list: VirtuosoHandle | null) => {
                     this.list = (list || undefined);
                     this.scrollIntoViewIfNeeded();
                 }}
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                onScroll={(e: any) => {
-                    const scrollTop = e.target.scrollTop;
-                    const scrollHeight = e.target.scrollHeight;
-                    const clientHeight = e.target.clientHeight;
-                    const isAtBottom = scrollHeight - scrollTop - clientHeight <= SCROLL_BOTTOM_THRESHOLD;
-
-                    // Store scroll state before firing the event to prevent jitter during inference and scrolling
-                    this.lastScrollState = { scrollTop, isAtBottom, scrollHeight, clientHeight };
-                    onScrollEmitter?.fire({ scrollTop, scrollLeft: e.target.scrollLeft || 0 });
-                }}
                 atBottomStateChange={(atBottom: boolean) => {
-                    this.lastScrollState = {
-                        ...this.lastScrollState,
-                        isAtBottom: atBottom
-                    };
+                    onAtBottomStateChangeEmitter?.fire(atBottom);
                 }}
                 atBottomThreshold={SCROLL_BOTTOM_THRESHOLD}
                 totalCount={rows.length}
@@ -1721,9 +1659,5 @@ export namespace TreeWidget {
                 {...other}
             />;
         }
-
-        getScrollState(): TreeScrollState {
-            return { ...this.lastScrollState };
-        }
     }
 }