@theia/preferences 1.51.0 → 1.53.0-next.18

package/src/browser/util/preference-tree-generator.ts

@@ -20,58 +20,28 @@ import { PreferenceConfigurations } from '@theia/core/lib/browser/preferences/pr
 import { Emitter } from '@theia/core';
 import debounce = require('@theia/core/shared/lodash.debounce');
 import { Preference } from './preference-types';
+import { COMMONLY_USED_SECTION_PREFIX, PreferenceLayoutProvider } from './preference-layout';
+
+export interface CreatePreferencesGroupOptions {
+    id: string,
+    group: string,
+    root: CompositeTreeNode,
+    expanded?: boolean,
+    depth?: number,
+    label?: string
+}
 
-export const COMMONLY_USED_SECTION_PREFIX = 'commonly-used';
 @injectable()
 export class PreferenceTreeGenerator {
 
     @inject(PreferenceSchemaProvider) protected readonly schemaProvider: PreferenceSchemaProvider;
     @inject(PreferenceConfigurations) protected readonly preferenceConfigs: PreferenceConfigurations;
+    @inject(PreferenceLayoutProvider) protected readonly layoutProvider: PreferenceLayoutProvider;
 
     protected _root: CompositeTreeNode;
 
     protected readonly onSchemaChangedEmitter = new Emitter<CompositeTreeNode>();
     readonly onSchemaChanged = this.onSchemaChangedEmitter.event;
-    protected readonly commonlyUsedPreferences = [
-        'files.autoSave', 'files.autoSaveDelay', 'editor.fontSize',
-        'editor.fontFamily', 'editor.tabSize', 'editor.renderWhitespace',
-        'editor.cursorStyle', 'editor.multiCursorModifier', 'editor.insertSpaces',
-        'editor.wordWrap', 'files.exclude', 'files.associations'
-    ];
-    protected readonly topLevelCategories = new Map([
-        [COMMONLY_USED_SECTION_PREFIX, 'Commonly Used'],
-        ['editor', 'Text Editor'],
-        ['workbench', 'Workbench'],
-        ['window', 'Window'],
-        ['features', 'Features'],
-        ['application', 'Application'],
-        ['security', 'Security'],
-        ['extensions', 'Extensions']
-    ]);
-    protected readonly sectionAssignments = new Map([
-        ['breadcrumbs', 'workbench'],
-        ['comments', 'features'],
-        ['debug', 'features'],
-        ['diffEditor', 'editor'],
-        ['explorer', 'features'],
-        ['extensions', 'features'],
-        ['files', 'editor'],
-        ['hosted-plugin', 'features'],
-        ['http', 'application'],
-        ['keyboard', 'application'],
-        ['notification', 'workbench'],
-        ['output', 'features'],
-        ['preview', 'features'],
-        ['problems', 'features'],
-        ['scm', 'features'],
-        ['search', 'features'],
-        ['task', 'features'],
-        ['terminal', 'features'],
-        ['testing', 'features'],
-        ['toolbar', 'features'],
-        ['webview', 'features'],
-        ['workspace', 'application'],
-    ]);
     protected readonly defaultTopLevelCategory = 'extensions';
 
     get root(): CompositeTreeNode {
@@ -95,11 +65,25 @@ export class PreferenceTreeGenerator {
         const groups = new Map<string, Preference.CompositeTreeNode>();
         const root = this.createRootNode();
 
-        for (const id of this.topLevelCategories.keys()) {
-            this.getOrCreatePreferencesGroup(id, id, root, groups);
+        const commonlyUsedLayout = this.layoutProvider.getCommonlyUsedLayout();
+        const commonlyUsed = this.getOrCreatePreferencesGroup({
+            id: commonlyUsedLayout.id,
+            group: commonlyUsedLayout.id,
+            root,
+            groups,
+            label: commonlyUsedLayout.label
+        });
+
+        for (const layout of this.layoutProvider.getLayout()) {
+            this.getOrCreatePreferencesGroup({
+                id: layout.id,
+                group: layout.id,
+                root,
+                groups,
+                label: layout.label
+            });
         }
-        const commonlyUsed = this.getOrCreatePreferencesGroup(COMMONLY_USED_SECTION_PREFIX, COMMONLY_USED_SECTION_PREFIX, root, groups);
-        for (const preference of this.commonlyUsedPreferences) {
+        for (const preference of commonlyUsedLayout.settings ?? []) {
             if (preference in preferencesSchema.properties) {
                 this.createLeafNode(preference, commonlyUsed, preferencesSchema.properties[preference]);
             }
@@ -107,13 +91,11 @@ export class PreferenceTreeGenerator {
         for (const propertyName of propertyNames) {
             const property = preferencesSchema.properties[propertyName];
             if (!this.preferenceConfigs.isSectionName(propertyName) && !OVERRIDE_PROPERTY_PATTERN.test(propertyName) && !property.deprecationMessage) {
-                const labels = propertyName.split('.');
-                const groupID = this.getGroupName(labels);
-                const subgroupName = this.getSubgroupName(labels, groupID);
-                const subgroupID = [groupID, subgroupName].join('.');
-                const toplevelParent = this.getOrCreatePreferencesGroup(groupID, groupID, root, groups);
-                const immediateParent = subgroupName && this.getOrCreatePreferencesGroup(subgroupID, groupID, toplevelParent, groups);
-                this.createLeafNode(propertyName, immediateParent || toplevelParent, property);
+                if (property.owner) {
+                    this.createPluginLeafNode(propertyName, property, root, groups);
+                } else {
+                    this.createBuiltinLeafNode(propertyName, property, root, groups);
+                }
             }
         }
 
@@ -137,6 +119,63 @@ export class PreferenceTreeGenerator {
         return root;
     };
 
+    protected createBuiltinLeafNode(name: string, property: PreferenceDataProperty, root: CompositeTreeNode, groups: Map<string, Preference.CompositeTreeNode>): void {
+        const layoutItem = this.layoutProvider.getLayoutForPreference(name);
+        const labels = layoutItem ? layoutItem.id.split('.') : name.split('.');
+        const groupID = this.getGroupName(labels);
+        const subgroupName = this.getSubgroupName(labels, groupID);
+        const subgroupID = [groupID, subgroupName].join('.');
+        const toplevelParent = this.getOrCreatePreferencesGroup({
+            id: groupID,
+            group: groupID,
+            root,
+            groups
+        });
+        const immediateParent = subgroupName ? this.getOrCreatePreferencesGroup({
+            id: subgroupID,
+            group: groupID,
+            root: toplevelParent,
+            groups,
+            label: layoutItem?.label
+        }) : undefined;
+        this.createLeafNode(name, immediateParent || toplevelParent, property);
+    }
+
+    protected createPluginLeafNode(name: string, property: PreferenceDataProperty, root: CompositeTreeNode, groups: Map<string, Preference.CompositeTreeNode>): void {
+        if (!property.owner) {
+            return;
+        }
+        const groupID = this.defaultTopLevelCategory;
+        const subgroupName = property.owner;
+        const subsubgroupName = property.group;
+        const hasGroup = Boolean(subsubgroupName);
+        const toplevelParent = this.getOrCreatePreferencesGroup({
+            id: groupID,
+            group: groupID,
+            root,
+            groups
+        });
+        const subgroupID = [groupID, subgroupName].join('.');
+        const subgroupParent = this.getOrCreatePreferencesGroup({
+            id: subgroupID,
+            group: groupID,
+            root: toplevelParent,
+            groups,
+            expanded: hasGroup,
+            label: subgroupName
+        });
+        const subsubgroupID = [groupID, subgroupName, subsubgroupName].join('.');
+        const subsubgroupParent = hasGroup ? this.getOrCreatePreferencesGroup({
+            id: subsubgroupID,
+            group: subgroupID,
+            root: subgroupParent,
+            groups,
+            depth: 2,
+            label: subsubgroupName
+        }) : undefined;
+        this.createLeafNode(name, subsubgroupParent || subgroupParent, property);
+    }
+
     getNodeId(preferenceId: string): string {
         const expectedGroup = this.getGroupName(preferenceId.split('.'));
         const expectedId = `${expectedGroup}@${preferenceId}`;
@@ -145,21 +184,19 @@ export class PreferenceTreeGenerator {
 
     protected getGroupName(labels: string[]): string {
         const defaultGroup = labels[0];
-        if (this.topLevelCategories.has(defaultGroup)) {
+        if (this.layoutProvider.hasCategory(defaultGroup)) {
             return defaultGroup;
         }
-        const assignedGroup = this.sectionAssignments.get(defaultGroup);
-        if (assignedGroup) {
-            return assignedGroup;
-        }
         return this.defaultTopLevelCategory;
     }
 
     protected getSubgroupName(labels: string[], computedGroupName: string): string | undefined {
         if (computedGroupName !== labels[0]) {
             return labels[0];
-        } else if (labels.length > 2) {
+        } else if (labels.length > 1) {
             return labels[1];
+        } else {
+            return undefined;
         }
     }
 
@@ -182,46 +219,42 @@ export class PreferenceTreeGenerator {
 
     protected createLeafNode(property: string, preferencesGroup: Preference.CompositeTreeNode, data: PreferenceDataProperty): Preference.LeafNode {
         const { group } = Preference.TreeNode.getGroupAndIdFromNodeId(preferencesGroup.id);
-        const newNode = {
+        const newNode: Preference.LeafNode = {
             id: `${group}@${property}`,
             preferenceId: property,
             parent: preferencesGroup,
             preference: { data },
-            depth: Preference.TreeNode.isTopLevel(preferencesGroup) ? 1 : 2,
+            depth: Preference.TreeNode.isTopLevel(preferencesGroup) ? 1 : 2
         };
         CompositeTreeNode.addChild(preferencesGroup, newNode);
         return newNode;
     }
 
-    protected createPreferencesGroup(id: string, group: string, root: CompositeTreeNode): Preference.CompositeTreeNode {
-        const newNode = {
-            id: `${group}@${id}`,
+    protected createPreferencesGroup(options: CreatePreferencesGroupOptions): Preference.CompositeTreeNode {
+        const newNode: Preference.CompositeTreeNode = {
+            id: `${options.group}@${options.id}`,
             visible: true,
-            parent: root,
+            parent: options.root,
             children: [],
             expanded: false,
             selected: false,
             depth: 0,
+            label: options.label
         };
         const isTopLevel = Preference.TreeNode.isTopLevel(newNode);
-        if (!isTopLevel) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            delete (newNode as any).expanded;
+        if (!(options.expanded ?? isTopLevel)) {
+            delete newNode.expanded;
         }
-        newNode.depth = isTopLevel ? 0 : 1;
-        CompositeTreeNode.addChild(root, newNode);
+        newNode.depth = options.depth ?? (isTopLevel ? 0 : 1);
+        CompositeTreeNode.addChild(options.root, newNode);
         return newNode;
     }
 
-    getCustomLabelFor(id: string): string | undefined {
-        return this.topLevelCategories.get(id);
-    }
-
-    protected getOrCreatePreferencesGroup(id: string, group: string, root: CompositeTreeNode, groups: Map<string, Preference.CompositeTreeNode>): Preference.CompositeTreeNode {
-        const existingGroup = groups.get(id);
+    protected getOrCreatePreferencesGroup(options: CreatePreferencesGroupOptions & { groups: Map<string, Preference.CompositeTreeNode> }): Preference.CompositeTreeNode {
+        const existingGroup = options.groups.get(options.id);
         if (existingGroup) { return existingGroup; }
-        const newNode = this.createPreferencesGroup(id, group, root);
-        groups.set(id, newNode);
+        const newNode = this.createPreferencesGroup(options);
+        options.groups.set(options.id, newNode);
         return newNode;
     };
 }

package/src/browser/util/preference-tree-label-provider.spec.ts

@@ -28,6 +28,7 @@ import { PreferenceTreeGenerator } from './preference-tree-generator';
 import { PreferenceTreeLabelProvider } from './preference-tree-label-provider';
 import { Preference } from './preference-types';
 import { SelectableTreeNode } from '@theia/core/lib/browser';
+import { PreferenceLayoutProvider } from './preference-layout';
 
 disableJSDOM();
 
@@ -37,6 +38,7 @@ describe('preference-tree-label-provider', () => {
 
     beforeEach(() => {
         const container = new Container();
+        container.bind(PreferenceLayoutProvider).toSelf().inSingletonScope();
         container.bind<any>(PreferenceTreeGenerator).toConstantValue({ getCustomLabelFor: () => { } });
         preferenceTreeLabelProvider = container.resolve(PreferenceTreeLabelProvider);
     });

package/src/browser/util/preference-tree-label-provider.ts

@@ -14,21 +14,29 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { injectable, inject } from '@theia/core/shared/inversify';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import { LabelProviderContribution, TreeNode } from '@theia/core/lib/browser';
 import { Preference } from './preference-types';
-import { PreferenceTreeGenerator } from './preference-tree-generator';
+import { PreferenceLayoutProvider } from './preference-layout';
+
 @injectable()
 export class PreferenceTreeLabelProvider implements LabelProviderContribution {
-    @inject(PreferenceTreeGenerator) protected readonly treeGenerator: PreferenceTreeGenerator;
+
+    @inject(PreferenceLayoutProvider)
+    protected readonly layoutProvider: PreferenceLayoutProvider;
 
     canHandle(element: object): number {
         return TreeNode.is(element) && Preference.TreeNode.is(element) ? 150 : 0;
     }
 
     getName(node: Preference.TreeNode): string {
+        if (Preference.TreeNode.is(node) && node.label) {
+            return node.label;
+        }
         const { id } = Preference.TreeNode.getGroupAndIdFromNodeId(node.id);
-        return this.formatString(this.treeGenerator.getCustomLabelFor(id) ?? id.split('.').pop()!);
+        const labels = id.split('.');
+        const groupName = labels[labels.length - 1];
+        return this.formatString(groupName);
     }
 
     getPrefix(node: Preference.TreeNode, fullPath = false): string | undefined {

package/src/browser/util/preference-types.ts

@@ -19,6 +19,7 @@ import {
     PreferenceScope,
     TreeNode as BaseTreeNode,
     CompositeTreeNode as BaseCompositeTreeNode,
+    SelectableTreeNode,
     PreferenceInspection,
     CommonCommands,
 } from '@theia/core/lib/browser';
@@ -58,11 +59,18 @@ export namespace Preference {
         };
     }
 
-    export interface CompositeTreeNode extends BaseCompositeTreeNode {
+    export interface CompositeTreeNode extends BaseCompositeTreeNode, SelectableTreeNode {
+        expanded?: boolean;
         depth: number;
+        label?: string;
+    }
+
+    export namespace CompositeTreeNode {
+        export const is = (node: TreeNode): node is CompositeTreeNode => !LeafNode.is(node);
     }
 
     export interface LeafNode extends BaseTreeNode {
+        label?: string;
         depth: number;
         preference: { data: PreferenceDataProperty };
         preferenceId: string;

package/src/browser/views/preference-editor-widget.ts

@@ -33,9 +33,9 @@ import { BaseWidget, DEFAULT_SCROLL_OPTIONS } from '@theia/core/lib/browser/widg
 import { PreferenceTreeModel, PreferenceFilterChangeEvent, PreferenceFilterChangeSource } from '../preference-tree-model';
 import { PreferenceNodeRendererFactory, GeneralPreferenceNodeRenderer } from './components/preference-node-renderer';
 import { Preference } from '../util/preference-types';
-import { COMMONLY_USED_SECTION_PREFIX } from '../util/preference-tree-generator';
 import { PreferencesScopeTabBar } from './preference-scope-tabbar-widget';
 import { PreferenceNodeRendererCreatorRegistry } from './components/preference-node-renderer-creator';
+import { COMMONLY_USED_SECTION_PREFIX } from '../util/preference-layout';
 
 export interface PreferencesEditorState {
     firstVisibleChildID: string,

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

@@ -24,6 +24,7 @@ import {
 } from '@theia/core/lib/browser';
 import React = require('@theia/core/shared/react');
 import { PreferenceTreeModel, PreferenceTreeNodeRow, PreferenceTreeNodeProps } from '../preference-tree-model';
+import { Preference } from '../util/preference-types';
 
 @injectable()
 export class PreferencesTreeWidget extends TreeWidget {
@@ -50,13 +51,21 @@ export class PreferencesTreeWidget extends TreeWidget {
         this.rows = new Map();
         let index = 0;
         for (const [id, nodeRow] of this.model.currentRows.entries()) {
-            if (nodeRow.visibleChildren > 0 && (ExpandableTreeNode.is(nodeRow.node) || ExpandableTreeNode.isExpanded(nodeRow.node.parent))) {
+            if (nodeRow.visibleChildren > 0 && this.isVisibleNode(nodeRow.node)) {
                 this.rows.set(id, { ...nodeRow, index: index++ });
             }
         }
         this.updateScrollToRow();
     }
 
+    protected isVisibleNode(node: Preference.TreeNode): boolean {
+        if (Preference.TreeNode.isTopLevel(node)) {
+            return true;
+        } else {
+            return ExpandableTreeNode.isExpanded(node.parent) && Preference.TreeNode.is(node.parent) && this.isVisibleNode(node.parent);
+        }
+    }
+
     protected override doRenderNodeRow({ depth, visibleChildren, node, isExpansible }: PreferenceTreeNodeRow): React.ReactNode {
         return this.renderNode(node, { depth, visibleChildren, isExpansible });
     }

package/src/browser/views/preference-widget.tsx

@@ -78,6 +78,7 @@ export class PreferencesWidget extends Panel implements StatefulWidget {
     protected init(): void {
         this.id = PreferencesWidget.ID;
         this.title.label = PreferencesWidget.LABEL;
+        this.title.caption = PreferencesWidget.LABEL;
         this.title.closable = true;
         this.addClass('theia-settings-container');
         this.title.iconClass = codicon('settings');