Make tree widget indentation configurable

Make the indentation of the tree widget configurable via preference.

Contributed on behalf of STMicroelectronics

Signed-off-by: Alexandra Buzila <abuzila@eclipsesource.com>

CHANGELOG.md

@@ -8,6 +8,7 @@
 
 - [plugin] stub multiDocumentHighlightProvider proposed API [#13248](https://github.com/eclipse-theia/theia/pull/13248) - contributed on behalf of STMicroelectronics
 - [terminal] update terminalQuickFixProvider proposed API according to vscode 1.85 version [#13240](https://github.com/eclipse-theia/theia/pull/13240) - contributed on behalf of STMicroelectronics
+- [core] added preference 'workbench.tree.indent' to control the indentation in the tree widget [#13179](https://github.com/eclipse-theia/theia/pull/13179) - contributed on behalf of STMicroelectronics
 
 ## v1.45.0 - 12/21/2023
 

packages/core/src/browser/frontend-application-module.ts

@@ -139,6 +139,7 @@ import { bindCommonStylingParticipants } from './common-styling-participants';
 import { HoverService } from './hover-service';
 import { AdditionalViewsMenuWidget, AdditionalViewsMenuWidgetFactory } from './shell/additional-views-menu-widget';
 import { LanguageIconLabelProvider } from './language-icon-provider';
+import { bindTreePreferences } from './tree';
 
 export { bindResourceProvider, bindMessageService, bindPreferenceService };
 
@@ -366,6 +367,7 @@ export const frontendApplicationModule = new ContainerModule((bind, _unbind, _is
     bind(ThemeService).toSelf().inSingletonScope();
 
     bindCorePreferences(bind);
+    bindTreePreferences(bind);
 
     bind(MimeService).toSelf().inSingletonScope();
 

packages/core/src/browser/tree/index.ts

@@ -26,3 +26,4 @@ export * from './tree-container';
 export * from './tree-decorator';
 export * from './tree-search';
 export * from './tree-compression';
+export * from './tree-preference';

packages/core/src/browser/tree/tree-preference.ts

@@ -0,0 +1,49 @@
+// *****************************************************************************
+// Copyright (C) 2024 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 { interfaces } from 'inversify';
+import { PreferenceProxy, PreferenceContribution, PreferenceSchema } from '../preferences';
+import { PreferenceProxyFactory } from '../preferences/injectable-preference-proxy';
+
+export const PREFERENCE_NAME_TREE_INDENT = 'workbench.tree.indent';
+
+export const treePreferencesSchema: PreferenceSchema = {
+    type: 'object',
+    properties: {
+        [PREFERENCE_NAME_TREE_INDENT]: {
+            description: 'Controls tree indentation in pixels',
+            type: 'number',
+            default: 8,
+            minimum: 0,
+            maximum: 40
+        },
+    }
+};
+
+export class TreeConfiguration {
+    [PREFERENCE_NAME_TREE_INDENT]: number;
+}
+
+export const TreePreferences = Symbol('treePreferences');
+export type TreePreferences = PreferenceProxy<TreeConfiguration>;
+
+export function bindTreePreferences(bind: interfaces.Bind): void {
+    bind(TreePreferences).toDynamicValue(ctx => {
+        const factory = ctx.container.get<PreferenceProxyFactory>(PreferenceProxyFactory);
+        return factory(treePreferencesSchema);
+    }).inSingletonScope();
+    bind(PreferenceContribution).toConstantValue({ schema: treePreferencesSchema });
+}

packages/core/src/browser/tree/tree-widget.tsx

@@ -43,6 +43,8 @@ import { LabelProvider } from '../label-provider';
 import { CorePreferences } from '../core-preferences';
 import { TreeFocusService } from './tree-focus-service';
 import { useEffect } from 'react';
+import { PreferenceService, PreferenceChange } from '../preferences';
+import { PREFERENCE_NAME_TREE_INDENT } from './tree-preference';
 
 const debounce = require('lodash.debounce');
 
@@ -73,8 +75,7 @@ export interface TreeProps {
     readonly contextMenuPath?: MenuPath;
 
     /**
-     * The size of the padding (in pixels) per hierarchy depth. The root element won't have left padding but
-     * the padding for the children will be calculated as `leftPadding * hierarchyDepth` and so on.
+     * The size of the padding (in pixels) for the root node of the tree.
      */
     readonly leftPadding: number;
 
@@ -174,6 +175,9 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
     @inject(SelectionService)
     protected readonly selectionService: SelectionService;
 
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
     @inject(LabelProvider)
     protected readonly labelProvider: LabelProvider;
 
@@ -182,6 +186,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
 
     protected shouldScrollToRow = true;
 
+    protected treeIndent: number = 8;
+
     constructor(
         @inject(TreeProps) readonly props: TreeProps,
         @inject(TreeModel) readonly model: TreeModel,
@@ -198,6 +204,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
 
     @postConstruct()
     protected init(): void {
+        this.treeIndent = this.preferenceService.get(PREFERENCE_NAME_TREE_INDENT, this.treeIndent);
         if (this.props.search) {
             this.searchBox = this.searchBoxFactory({ ...SearchBoxProps.DEFAULT, showButtons: true, showFilter: true });
             this.searchBox.node.addEventListener('focus', () => {
@@ -264,6 +271,12 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                         return;
                     }
                 }
+            }),
+            this.preferenceService.onPreferenceChanged((event: PreferenceChange) => {
+                if (event.preferenceName === PREFERENCE_NAME_TREE_INDENT) {
+                    this.treeIndent = event.newValue;
+                    this.update();
+                }
             })
         ]);
         setTimeout(() => {
@@ -1500,7 +1513,10 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         return this.labelProvider.getLongName(node);
     }
     protected getDepthPadding(depth: number): number {
-        return depth * this.props.leftPadding;
+        if (depth === 1) {
+            return this.props.leftPadding;
+        }
+        return depth * this.treeIndent;
     }
 }
 export namespace TreeWidget {

packages/navigator/src/browser/abstract-navigator-tree-widget.ts

@@ -16,17 +16,13 @@
 
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import { FileNavigatorPreferences } from './navigator-preferences';
-import { PreferenceService } from '@theia/core/lib/browser/preferences/preference-service';
 import { FileTreeWidget } from '@theia/filesystem/lib/browser';
 import { Attributes, HTMLAttributes } from '@theia/core/shared/react';
 import { TreeNode } from '@theia/core/lib/browser';
 
 @injectable()
 export class AbstractNavigatorTreeWidget extends FileTreeWidget {
 
-    @inject(PreferenceService)
-    protected readonly preferenceService: PreferenceService;
-
     @inject(FileNavigatorPreferences)
     protected readonly navigatorPreferences: FileNavigatorPreferences;