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

@@ -6,6 +6,7 @@
 
 ## Unreleased
 - [terminal] Use application shell methods for expanding/collapsing bottom panel for "Terminal: Toggle Terminal" command [#13131](https://github.com/eclipse-theia/theia/pull/13131)
+- [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.44.0 - 11/30/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,50 @@
+// *****************************************************************************
+// 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 { interfaces } from 'inversify';
+import { PreferenceProxy, PreferenceContribution, PreferenceSchema } from '../preferences';
+import { PreferenceProxyFactory } from '../preferences/injectable-preference-proxy';
+
+export const PREFERENCE_NAME_TREE_PADDING = 'workbench.tree.indent';
+
+export const treePreferencesSchema: PreferenceSchema = {
+    type: 'object',
+    properties: {
+        [PREFERENCE_NAME_TREE_PADDING]: {
+            description: 'Controls tree indentation in pixels',
+            type: 'number',
+            default: 8,
+            minimum: 0,
+            maximum: 40
+        },
+    }
+};
+
+export class TreeConfiguration {
+    [PREFERENCE_NAME_TREE_PADDING]: 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_PADDING } from './tree-preference';
 
 const debounce = require('lodash.debounce');
 
@@ -72,12 +74,6 @@ 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.
-     */
-    readonly leftPadding: number;
-
     readonly expansionTogglePadding: number;
 
     /**
@@ -128,7 +124,6 @@ export interface NodeProps {
  * The default tree properties.
  */
 export const defaultTreeProps: TreeProps = {
-    leftPadding: 8,
     expansionTogglePadding: 22
 };
 
@@ -174,6 +169,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 +180,8 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
 
     protected shouldScrollToRow = true;
 
+    protected leftPadding: number = 8;
+
     constructor(
         @inject(TreeProps) readonly props: TreeProps,
         @inject(TreeModel) readonly model: TreeModel,
@@ -198,6 +198,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
 
     @postConstruct()
     protected init(): void {
+        this.leftPadding = this.preferenceService.get(PREFERENCE_NAME_TREE_PADDING, this.leftPadding);
         if (this.props.search) {
             this.searchBox = this.searchBoxFactory({ ...SearchBoxProps.DEFAULT, showButtons: true, showFilter: true });
             this.searchBox.node.addEventListener('focus', () => {
@@ -264,6 +265,12 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                         return;
                     }
                 }
+            }),
+            this.preferenceService.onPreferenceChanged((event: PreferenceChange) => {
+                if (event.preferenceName === PREFERENCE_NAME_TREE_PADDING) {
+                    this.leftPadding = event.newValue;
+                    this.update();
+                }
             })
         ]);
         setTimeout(() => {
@@ -1486,7 +1493,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         return this.labelProvider.getLongName(node);
     }
     protected getDepthPadding(depth: number): number {
-        return depth * this.props.leftPadding;
+        return depth * this.leftPadding;
     }
 }
 export namespace TreeWidget {

packages/filesystem/src/browser/file-tree/file-tree-widget.tsx

@@ -261,7 +261,7 @@ export class FileTreeWidget extends CompressedTreeWidget {
     protected override getPaddingLeft(node: TreeNode, props: NodeProps): number {
         if (this.hidesExplorerArrows) {
             // additional left padding instead of top-level expansion toggle
-            return super.getPaddingLeft(node, props) + this.props.leftPadding;
+            return super.getPaddingLeft(node, props) + this.leftPadding;
         }
         return super.getPaddingLeft(node, props);
     }

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;
 

packages/navigator/src/browser/open-editors-widget/navigator-open-editors-widget.tsx

@@ -47,8 +47,7 @@ import { AbstractNavigatorTreeWidget } from '../abstract-navigator-tree-widget';
 export const OPEN_EDITORS_PROPS: TreeProps = {
     ...defaultTreeProps,
     virtualized: false,
-    contextMenuPath: OPEN_EDITORS_CONTEXT_MENU,
-    leftPadding: 22
+    contextMenuPath: OPEN_EDITORS_CONTEXT_MENU
 };
 
 export interface OpenEditorsNodeRow extends TreeWidget.NodeRow {
@@ -97,6 +96,7 @@ export class OpenEditorsWidget extends AbstractNavigatorTreeWidget {
         super.init();
         this.id = OpenEditorsWidget.ID;
         this.title.label = OpenEditorsWidget.LABEL;
+        this.leftPadding = 22;
         this.addClass(OpenEditorsWidget.ID);
         this.update();
     }
@@ -265,7 +265,7 @@ export class OpenEditorsWidget extends AbstractNavigatorTreeWidget {
         if (node.id.startsWith(OpenEditorsModel.AREA_NODE_ID_PREFIX)) {
             return 0;
         }
-        return this.props.leftPadding;
+        return this.leftPadding;
     }
 
     // The state of this widget is derived from external factors. No need to store or restore it.