@theia/core 1.44.0 → 1.45.0

package/src/browser/messaging/service-connection-provider.ts

@@ -0,0 +1,126 @@
+// *****************************************************************************
+// Copyright (C) 2020 Ericsson and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { inject, injectable, interfaces, postConstruct } from 'inversify';
+import { Channel, RpcProxy, RpcProxyFactory } from '../../common';
+import { ChannelMultiplexer } from '../../common/message-rpc/channel';
+import { Deferred } from '../../common/promise-util';
+import { ConnectionSource } from './connection-source';
+
+export const LocalConnectionProvider = Symbol('LocalConnectionProvider');
+export const RemoteConnectionProvider = Symbol('RemoteConnectionProvider');
+
+export namespace ServiceConnectionProvider {
+    export type ConnectionHandler = (path: String, channel: Channel) => void;
+}
+
+/**
+ * This class manages the channels for remote services in the back end
+ */
+@injectable()
+export class ServiceConnectionProvider {
+
+    static createProxy<T extends object>(container: interfaces.Container, path: string, arg?: object): RpcProxy<T> {
+        return container.get<ServiceConnectionProvider>(RemoteConnectionProvider).createProxy(path, arg);
+    }
+
+    static createLocalProxy<T extends object>(container: interfaces.Container, path: string, arg?: object): RpcProxy<T> {
+        return container.get<ServiceConnectionProvider>(LocalConnectionProvider).createProxy(path, arg);
+    }
+
+    static createHandler(container: interfaces.Container, path: string, arg?: object): void {
+        const remote = container.get<ServiceConnectionProvider>(RemoteConnectionProvider);
+        const local = container.get<ServiceConnectionProvider>(LocalConnectionProvider);
+        remote.createProxy(path, arg);
+        if (remote !== local) {
+            local.createProxy(path, arg);
+        }
+    }
+
+    protected readonly channelHandlers = new Map<string, ServiceConnectionProvider.ConnectionHandler>();
+
+    /**
+     * Create a proxy object to remote interface of T type
+     * over a web socket connection for the given path and proxy factory.
+     */
+    createProxy<T extends object>(path: string, factory: RpcProxyFactory<T>): RpcProxy<T>;
+    /**
+     * Create a proxy object to remote interface of T type
+     * over a web socket connection for the given path.
+     *
+     * An optional target can be provided to handle
+     * notifications and requests from a remote side.
+     */
+    createProxy<T extends object>(path: string, target?: object): RpcProxy<T>;
+    createProxy<T extends object>(path: string, arg?: object): RpcProxy<T> {
+        const factory = arg instanceof RpcProxyFactory ? arg : new RpcProxyFactory<T>(arg);
+        this.listen(path, (_, c) => factory.listen(c), true);
+        return factory.createProxy();
+    }
+
+    protected channelMultiplexer: ChannelMultiplexer;
+
+    private channelReadyDeferred = new Deferred<void>();
+    protected get channelReady(): Promise<void> {
+        return this.channelReadyDeferred.promise;
+    }
+
+    @postConstruct()
+    init(): void {
+        this.connectionSource.onConnectionDidOpen(channel => this.handleChannelCreated(channel));
+    }
+
+    @inject(ConnectionSource)
+    protected connectionSource: ConnectionSource;
+
+    /**
+     * This method must be invoked by subclasses when they have created the main channel.
+     * @param mainChannel
+     */
+    protected handleChannelCreated(channel: Channel): void {
+        channel.onClose(() => {
+            this.handleChannelClosed(channel);
+        });
+
+        this.channelMultiplexer = new ChannelMultiplexer(channel);
+        this.channelReadyDeferred.resolve();
+        for (const entry of this.channelHandlers.entries()) {
+            this.openChannel(entry[0], entry[1]);
+        }
+    }
+
+    handleChannelClosed(channel: Channel): void {
+        this.channelReadyDeferred = new Deferred();
+    }
+
+    /**
+     * Install a connection handler for the given path.
+     */
+    listen(path: string, handler: ServiceConnectionProvider.ConnectionHandler, reconnect: boolean): void {
+        this.openChannel(path, handler).then(() => {
+            if (reconnect) {
+                this.channelHandlers.set(path, handler);
+            }
+        });
+
+    }
+
+    private async openChannel(path: string, handler: ServiceConnectionProvider.ConnectionHandler): Promise<void> {
+        await this.channelReady;
+        const newChannel = await this.channelMultiplexer.open(path);
+        handler(path, newChannel);
+    }
+}

package/src/browser/messaging/ws-connection-provider.ts

@@ -14,160 +14,35 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { injectable, interfaces, decorate, unmanaged } from 'inversify';
-import { RpcProxyFactory, RpcProxy, Emitter, Event, Channel } from '../../common';
-import { Endpoint } from '../endpoint';
-import { AbstractConnectionProvider } from '../../common/messaging/abstract-connection-provider';
-import { io, Socket } from 'socket.io-client';
-import { IWebSocket, WebSocketChannel } from '../../common/messaging/web-socket-channel';
+import { injectable, interfaces, decorate, unmanaged, inject } from 'inversify';
+import { RpcProxyFactory, RpcProxy } from '../../common';
+import { RemoteConnectionProvider, ServiceConnectionProvider } from './service-connection-provider';
 
 decorate(injectable(), RpcProxyFactory);
 decorate(unmanaged(), RpcProxyFactory, 0);
 
-export const LocalWebSocketConnectionProvider = Symbol('LocalWebSocketConnectionProvider');
-
-export interface WebSocketOptions {
-    /**
-     * True by default.
-     */
-    reconnecting?: boolean;
-}
-
+/**
+ * @deprecated This class serves to keep API compatibility for a while. Use {@linkcode ServiceConnectionProvider} instead.
+ */
 @injectable()
-export class WebSocketConnectionProvider extends AbstractConnectionProvider<WebSocketOptions> {
-
-    protected readonly onSocketDidOpenEmitter: Emitter<void> = new Emitter();
-    get onSocketDidOpen(): Event<void> {
-        return this.onSocketDidOpenEmitter.event;
-    }
-
-    protected readonly onSocketDidCloseEmitter: Emitter<void> = new Emitter();
-    get onSocketDidClose(): Event<void> {
-        return this.onSocketDidCloseEmitter.event;
-    }
+export class WebSocketConnectionProvider {
+    @inject(RemoteConnectionProvider)
+    private readonly remoteConnectionProvider: ServiceConnectionProvider;
 
-    static override createProxy<T extends object>(container: interfaces.Container, path: string, arg?: object): RpcProxy<T> {
-        return container.get(WebSocketConnectionProvider).createProxy<T>(path, arg);
+    static createProxy<T extends object>(container: interfaces.Container, path: string, arg?: object): RpcProxy<T> {
+        return ServiceConnectionProvider.createProxy(container, path, arg);
     }
 
     static createLocalProxy<T extends object>(container: interfaces.Container, path: string, arg?: object): RpcProxy<T> {
-        return container.get<WebSocketConnectionProvider>(LocalWebSocketConnectionProvider).createProxy<T>(path, arg);
+        return ServiceConnectionProvider.createLocalProxy(container, path, arg);
     }
 
     static createHandler(container: interfaces.Container, path: string, arg?: object): void {
-        const remote = container.get(WebSocketConnectionProvider);
-        const local = container.get<WebSocketConnectionProvider>(LocalWebSocketConnectionProvider);
-        remote.createProxy(path, arg);
-        if (remote !== local) {
-            local.createProxy(path, arg);
-        }
+        return ServiceConnectionProvider.createHandler(container, path, arg);
     }
 
-    protected readonly socket: Socket;
-
-    constructor() {
-        super();
-        const url = this.createWebSocketUrl(WebSocketChannel.wsPath);
-        this.socket = this.createWebSocket(url);
-        this.socket.on('connect', () => {
-            this.initializeMultiplexer();
-            if (this.reconnectChannelOpeners.length > 0) {
-                this.reconnectChannelOpeners.forEach(opener => opener());
-                this.reconnectChannelOpeners = [];
-            }
-            this.socket.on('disconnect', () => this.fireSocketDidClose());
-            this.socket.on('message', () => this.onIncomingMessageActivityEmitter.fire(undefined));
-            this.fireSocketDidOpen();
-        });
-        this.socket.connect();
-    }
-
-    protected createMainChannel(): Channel {
-        return new WebSocketChannel(this.toIWebSocket(this.socket));
-    }
-
-    protected toIWebSocket(socket: Socket): IWebSocket {
-        return {
-            close: () => {
-                socket.removeAllListeners('disconnect');
-                socket.removeAllListeners('error');
-                socket.removeAllListeners('message');
-            },
-            isConnected: () => socket.connected,
-            onClose: cb => socket.on('disconnect', reason => cb(reason)),
-            onError: cb => socket.on('error', reason => cb(reason)),
-            onMessage: cb => socket.on('message', data => cb(data)),
-            send: message => socket.emit('message', message)
-        };
-    }
-
-    override async openChannel(path: string, handler: (channel: Channel) => void, options?: WebSocketOptions): Promise<void> {
-        if (this.socket.connected) {
-            return super.openChannel(path, handler, options);
-        } else {
-            const openChannel = () => {
-                this.socket.off('connect', openChannel);
-                this.openChannel(path, handler, options);
-            };
-            this.socket.on('connect', openChannel);
-        }
-    }
-
-    /**
-     * @param path The handler to reach in the backend.
-     */
-    protected createWebSocketUrl(path: string): string {
-        // Since we are using Socket.io, the path should look like the following:
-        // proto://domain.com/{path}
-        return this.createEndpoint(path).getWebSocketUrl().withPath(path).toString();
-    }
-
-    protected createHttpWebSocketUrl(path: string): string {
-        return this.createEndpoint(path).getRestUrl().toString();
-    }
-
-    protected createEndpoint(path: string): Endpoint {
-        return new Endpoint({ path });
-    }
-
-    /**
-     * Creates a web socket for the given url
-     */
-    protected createWebSocket(url: string): Socket {
-        return io(url, {
-            path: this.createSocketIoPath(url),
-            reconnection: true,
-            reconnectionDelay: 1000,
-            reconnectionDelayMax: 10000,
-            reconnectionAttempts: Infinity,
-            extraHeaders: {
-                // Socket.io strips the `origin` header
-                // We need to provide our own for validation
-                'fix-origin': window.location.origin
-            }
-        });
-    }
-
-    /**
-     * Path for Socket.io to make its requests to.
-     */
-    protected createSocketIoPath(url: string): string | undefined {
-        if (location.protocol === Endpoint.PROTO_FILE) {
-            return '/socket.io';
-        }
-        let { pathname } = location;
-        if (!pathname.endsWith('/')) {
-            pathname += '/';
-        }
-        return pathname + 'socket.io';
-    }
-
-    protected fireSocketDidOpen(): void {
-        this.onSocketDidOpenEmitter.fire(undefined);
-    }
-
-    protected fireSocketDidClose(): void {
-        this.onSocketDidCloseEmitter.fire(undefined);
+    createProxy<T extends object>(path: string, target?: object): RpcProxy<T>;
+    createProxy<T extends object>(path: string, factory: RpcProxyFactory<T>): RpcProxy<T> {
+        return this.remoteConnectionProvider.createProxy(path, factory);
     }
 }
-

package/src/browser/messaging/ws-connection-source.ts

@@ -0,0 +1,210 @@
+// *****************************************************************************
+// Copyright (C) 2023 STMicroelectronics and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { AbstractChannel, Channel, Disposable, DisposableCollection, Emitter, Event, servicesPath } from '../../common';
+import { ConnectionSource } from './connection-source';
+import { Socket, io } from 'socket.io-client';
+import { Endpoint } from '../endpoint';
+import { ForwardingChannel } from '../../common/message-rpc/channel';
+import { Uint8ArrayReadBuffer, Uint8ArrayWriteBuffer } from '../../common/message-rpc/uint8-array-message-buffer';
+import { inject, injectable, postConstruct } from 'inversify';
+import { FrontendIdProvider } from './frontend-id-provider';
+import { FrontendApplicationConfigProvider } from '../frontend-application-config-provider';
+import { SocketWriteBuffer } from '../../common/messaging/socket-write-buffer';
+import { ConnectionManagementMessages } from '../../common/messaging/connection-management';
+
+@injectable()
+export class WebSocketConnectionSource implements ConnectionSource {
+    static readonly NO_CONNECTION = '<none>';
+
+    @inject(FrontendIdProvider)
+    protected readonly frontendIdProvider: FrontendIdProvider;
+
+    private readonly writeBuffer = new SocketWriteBuffer();
+
+    private _socket: Socket;
+    get socket(): Socket {
+        return this._socket;
+    }
+
+    protected currentChannel: AbstractChannel;
+
+    protected readonly onConnectionDidOpenEmitter: Emitter<Channel> = new Emitter();
+    get onConnectionDidOpen(): Event<Channel> {
+        return this.onConnectionDidOpenEmitter.event;
+    }
+
+    protected readonly onSocketDidOpenEmitter: Emitter<void> = new Emitter();
+    get onSocketDidOpen(): Event<void> {
+        return this.onSocketDidOpenEmitter.event;
+    }
+
+    protected readonly onSocketDidCloseEmitter: Emitter<void> = new Emitter();
+    get onSocketDidClose(): Event<void> {
+        return this.onSocketDidCloseEmitter.event;
+    }
+
+    protected readonly onIncomingMessageActivityEmitter: Emitter<void> = new Emitter();
+    get onIncomingMessageActivity(): Event<void> {
+        return this.onIncomingMessageActivityEmitter.event;
+    }
+
+    constructor() {
+    }
+
+    @postConstruct()
+    openSocket(): void {
+        const url = this.createWebSocketUrl(servicesPath);
+        this._socket = this.createWebSocket(url);
+
+        this._socket.on('connect', () => {
+            this.onSocketDidOpenEmitter.fire();
+            this.handleSocketConnected();
+        });
+
+        this._socket.on('disconnect', () => {
+            this.onSocketDidCloseEmitter.fire();
+        });
+
+        this._socket.on('error', reason => {
+            if (this.currentChannel) {
+                this.currentChannel.onErrorEmitter.fire(reason);
+            };
+        });
+        this._socket.connect();
+    }
+
+    protected handleSocketConnected(): void {
+        if (this.currentChannel) {
+            const reconnectListener = (hasConnection: boolean) => {
+                this._socket.off(ConnectionManagementMessages.RECONNECT, reconnectListener);
+                if (hasConnection) {
+                    this.writeBuffer.flush(this.socket);
+                } else {
+                    if (FrontendApplicationConfigProvider.get().reloadOnReconnect) {
+                        window.location.reload(); // this might happen in the preload module, when we have no window service yet
+                    } else {
+                        this.connectNewChannel();
+                    }
+                }
+            };
+            this._socket.on(ConnectionManagementMessages.RECONNECT, reconnectListener);
+            this._socket.emit(ConnectionManagementMessages.RECONNECT, this.frontendIdProvider.getId());
+        } else {
+            const initialConnectListener = () => {
+                this._socket.off(ConnectionManagementMessages.INITIAL_CONNECT, initialConnectListener);
+                this.connectNewChannel();
+            };
+            this._socket.on(ConnectionManagementMessages.INITIAL_CONNECT, initialConnectListener);
+            this._socket.emit(ConnectionManagementMessages.INITIAL_CONNECT, this.frontendIdProvider.getId());
+        }
+    }
+
+    connectNewChannel(): void {
+        if (this.currentChannel) {
+            this.writeBuffer.drain();
+            this.currentChannel.close();
+            this.currentChannel.onCloseEmitter.fire({ reason: 'reconnecting channel' });
+        }
+        this.currentChannel = this.createChannel();
+        this.onConnectionDidOpenEmitter.fire(this.currentChannel);
+    }
+
+    protected createChannel(): AbstractChannel {
+        const toDispose = new DisposableCollection();
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const messageHandler = (data: any) => {
+            this.onIncomingMessageActivityEmitter.fire();
+            if (this.currentChannel) {
+                // In the browser context socketIO receives binary messages as ArrayBuffers.
+                // So we have to convert them to a Uint8Array before delegating the message to the read buffer.
+                const buffer = data instanceof ArrayBuffer ? new Uint8Array(data) : data;
+                this.currentChannel.onMessageEmitter.fire(() => new Uint8ArrayReadBuffer(buffer));
+            };
+        };
+        this._socket.on('message', messageHandler);
+        toDispose.push(Disposable.create(() => {
+            this.socket.off('message', messageHandler);
+        }));
+
+        const channel = new ForwardingChannel('any', () => {
+            toDispose.dispose();
+        }, () => {
+            const result = new Uint8ArrayWriteBuffer();
+
+            result.onCommit(buffer => {
+                if (this.socket.connected) {
+                    this.socket.send(buffer);
+                } else {
+                    this.writeBuffer.buffer(buffer);
+                }
+            });
+
+            return result;
+        });
+        return channel;
+    }
+
+    /**
+     * @param path The handler to reach in the backend.
+     */
+    protected createWebSocketUrl(path: string): string {
+        // Since we are using Socket.io, the path should look like the following:
+        // proto://domain.com/{path}
+        return this.createEndpoint(path).getWebSocketUrl().withPath(path).toString();
+    }
+
+    protected createHttpWebSocketUrl(path: string): string {
+        return this.createEndpoint(path).getRestUrl().toString();
+    }
+
+    protected createEndpoint(path: string): Endpoint {
+        return new Endpoint({ path });
+    }
+
+    /**
+     * Creates a web socket for the given url
+     */
+    protected createWebSocket(url: string): Socket {
+        return io(url, {
+            path: this.createSocketIoPath(url),
+            reconnection: true,
+            reconnectionDelay: 1000,
+            reconnectionDelayMax: 10000,
+            reconnectionAttempts: Infinity,
+            extraHeaders: {
+                // Socket.io strips the `origin` header
+                // We need to provide our own for validation
+                'fix-origin': window.location.origin
+            }
+        });
+    }
+
+    /**
+     * Path for Socket.io to make its requests to.
+     */
+    protected createSocketIoPath(url: string): string | undefined {
+        if (location.protocol === Endpoint.PROTO_FILE) {
+            return '/socket.io';
+        }
+        let { pathname } = location;
+        if (!pathname.endsWith('/')) {
+            pathname += '/';
+        }
+        return pathname + 'socket.io';
+    }
+}

package/src/browser/preload/i18n-preload-contribution.ts

@@ -33,7 +33,7 @@ export class I18nPreloadContribution implements PreloadContribution {
                 locale: defaultLocale
             });
         }
-        if (nls.locale) {
+        if (nls.locale && nls.locale !== nls.defaultLocale) {
             const localization = await this.localizationServer.loadLocalization(nls.locale);
             if (localization.languagePack) {
                 nls.localization = localization;

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

@@ -2101,7 +2101,7 @@ export namespace ApplicationShell {
 
     export const areaLabels: Record<Area, string> = {
         main: nls.localizeByDefault('Main'),
-        top: nls.localize('theia/shell-area/top', 'Top'),
+        top: nls.localizeByDefault('Top'),
         left: nls.localizeByDefault('Left'),
         right: nls.localizeByDefault('Right'),
         bottom: nls.localizeByDefault('Bottom'),

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

@@ -58,6 +58,12 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget {
         }
     }
 
+    protected override shouldRenderIndent(node: TreeNode): boolean {
+        return !this.compressionToggle.compress
+            || !this.compressionService.isCompressionParticipant(node)
+            || this.compressionService.getCompressionHead(node) === node;
+    }
+
     protected override shouldDisplayNode(node: TreeNode): boolean {
         if (this.compressionToggle.compress && this.compressionService.isCompressionParticipant(node) && !this.compressionService.isCompressionHead(node)) {
             return false;
@@ -66,14 +72,18 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget {
     }
 
     protected override getDepthForNode(node: TreeNode, depths: Map<CompositeTreeNode | undefined, number>): number {
-        if (!this.compressionToggle.compress) { return super.getDepthForNode(node, depths); }
+        if (!this.compressionToggle.compress) {
+            return super.getDepthForNode(node, depths);
+        }
         const parent = this.compressionService.getCompressionHead(node.parent) ?? node.parent;
         const parentDepth = depths.get(parent);
         return parentDepth === undefined ? 0 : TreeNode.isVisible(node.parent) ? parentDepth + 1 : parentDepth;
     }
 
     protected override toNodeRow(node: TreeNode, index: number, depth: number): CompressedNodeRow {
-        if (!this.compressionToggle.compress) { return super.toNodeRow(node, index, depth); }
+        if (!this.compressionToggle.compress) {
+            return super.toNodeRow(node, index, depth);
+        }
         const row: CompressedNodeRow = { node, index, depth };
         if (this.compressionService.isCompressionHead(node)) {
             row.compressionChain = this.compressionService.getCompressionChain(node);
@@ -102,7 +112,9 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget {
     }
 
     protected override getCaptionChildren(node: TreeNode, props: CompressedNodeProps): React.ReactNode {
-        if (!this.compressionToggle.compress || !props.compressionChain) { return super.getCaptionChildren(node, props); }
+        if (!this.compressionToggle.compress || !props.compressionChain) {
+            return super.getCaptionChildren(node, props);
+        }
         return props.compressionChain.map((subNode, index, self) => {
             const classes = ['theia-tree-compressed-label-part'];
             if (SelectableTreeNode.isSelected(subNode)) {
@@ -129,21 +141,27 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget {
     }
 
     protected override handleUp(event: KeyboardEvent): void {
-        if (!this.compressionToggle.compress) { return super.handleUp(event); }
+        if (!this.compressionToggle.compress) {
+            return super.handleUp(event);
+        }
         const type = this.props.multiSelect && this.hasShiftMask(event) ? TreeSelection.SelectionType.RANGE : undefined;
         this.model.selectPrevRow(type);
         this.node.focus();
     }
 
     protected override handleDown(event: KeyboardEvent): void {
-        if (!this.compressionToggle.compress) { return super.handleDown(event); }
+        if (!this.compressionToggle.compress) {
+            return super.handleDown(event);
+        }
         const type = this.props.multiSelect && this.hasShiftMask(event) ? TreeSelection.SelectionType.RANGE : undefined;
         this.model.selectNextRow(type);
         this.node.focus();
     }
 
     protected override async handleLeft(event: KeyboardEvent): Promise<void> {
-        if (!this.compressionToggle.compress) { return super.handleLeft(event); }
+        if (!this.compressionToggle.compress) {
+            return super.handleLeft(event);
+        }
         if (Boolean(this.props.multiSelect) && (this.hasCtrlCmdMask(event) || this.hasShiftMask(event))) {
             return;
         }
@@ -160,7 +178,9 @@ export class CompressedTreeWidget extends TreeViewWelcomeWidget {
     }
 
     protected override async handleRight(event: KeyboardEvent): Promise<void> {
-        if (!this.compressionToggle.compress) { return super.handleRight(event); }
+        if (!this.compressionToggle.compress) {
+            return super.handleRight(event);
+        }
         if (Boolean(this.props.multiSelect) && (this.hasCtrlCmdMask(event) || this.hasShiftMask(event))) {
             return;
         }

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

@@ -894,22 +894,33 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         let current: TreeNode | undefined = node;
         let depth = props.depth;
         while (current && depth) {
-            const classNames: string[] = [TREE_NODE_INDENT_GUIDE_CLASS];
-            if (this.needsActiveIndentGuideline(current)) {
-                classNames.push('active');
-            } else {
-                classNames.push(renderIndentGuides === 'onHover' ? 'hover' : 'always');
+            if (this.shouldRenderIndent(current)) {
+                const classNames: string[] = [TREE_NODE_INDENT_GUIDE_CLASS];
+                if (this.needsActiveIndentGuideline(current)) {
+                    classNames.push('active');
+                } else {
+                    classNames.push(renderIndentGuides === 'onHover' ? 'hover' : 'always');
+                }
+                const paddingLeft = this.getDepthPadding(depth);
+                indentDivs.unshift(<div key={depth} className={classNames.join(' ')} style={{
+                    paddingLeft: `${paddingLeft}px`
+                }} />);
+                depth--;
             }
-            const paddingLeft = this.getDepthPadding(depth);
-            indentDivs.unshift(<div key={depth} className={classNames.join(' ')} style={{
-                paddingLeft: `${paddingLeft}px`
-            }} />);
             current = current.parent;
-            depth--;
         }
         return indentDivs;
     }
 
+    /**
+     * Determines whether an indentation div should be rendered for the specified tree node.
+     * If there are multiple tree nodes inside of a single rendered row,
+     * this method should only return true for the first node.
+     */
+    protected shouldRenderIndent(node: TreeNode): boolean {
+        return true;
+    }
+
     protected needsActiveIndentGuideline(node: TreeNode): boolean {
         const parent = node.parent;
         if (!parent || !this.isExpandable(parent)) {