Improve preference renderer linking (eclipse-theia#14311)

Author: msujew

packages/core/src/browser/core-preferences.ts

@@ -98,7 +98,9 @@ export const corePreferenceSchema: PreferenceSchema = {
                 nls.localizeByDefault('Menu is displayed at the top of the window and only hidden in full screen mode.'),
                 nls.localizeByDefault('Menu is always visible at the top of the window even in full screen mode.'),
                 nls.localizeByDefault('Menu is always hidden.'),
-                nls.localizeByDefault('Menu is displayed as a compact button in the side bar. This value is ignored when {0} is {1}.', '`#window.titleBarStyle#`', '`native`')
+                environment.electron.is()
+                    ? nls.localizeByDefault('Menu is displayed as a compact button in the side bar. This value is ignored when {0} is {1}.', '`#window.titleBarStyle#`', '`native`')
+                    : nls.localizeByDefault('Menu is displayed as a compact button in the side bar.')
             ],
             default: 'classic',
             scope: 'application',

packages/editor/src/browser/editor-generated-preference-schema.ts

@@ -759,7 +759,7 @@ export const editorGeneratedPreferenceProperties: PreferenceSchema['properties']
             nls.localizeByDefault("`cursorSurroundingLines` is enforced only when triggered via the keyboard or API."),
             nls.localizeByDefault("`cursorSurroundingLines` is enforced always.")
         ],
-        "markdownDescription": nls.localize("theia/editor/editor.cursorSurroundingLinesStyle", "Controls when `#cursorSurroundingLines#` should be enforced."),
+        "markdownDescription": nls.localizeByDefault("Controls when `#editor.cursorSurroundingLines#` should be enforced."),
         "type": "string",
         "enum": [
             "default",

packages/preferences/src/browser/style/index.css

@@ -234,6 +234,10 @@
   text-decoration: none;
 }
 
+.theia-settings-container .command-link {
+  color: var(--theia-textLink-foreground);
+}
+
 .theia-settings-container .settings-section a:hover {
   text-decoration: underline;
 }

packages/preferences/src/browser/util/preference-tree-generator.ts

@@ -39,6 +39,7 @@ export class PreferenceTreeGenerator {
     @inject(PreferenceLayoutProvider) protected readonly layoutProvider: PreferenceLayoutProvider;
 
     protected _root: CompositeTreeNode;
+    protected _idCache = new Map<string, string>();
 
     protected readonly onSchemaChangedEmitter = new Emitter<CompositeTreeNode>();
     readonly onSchemaChanged = this.onSchemaChangedEmitter.event;
@@ -60,6 +61,7 @@ export class PreferenceTreeGenerator {
     }
 
     generateTree(): CompositeTreeNode {
+        this._idCache.clear();
         const preferencesSchema = this.schemaProvider.getCombinedSchema();
         const propertyNames = Object.keys(preferencesSchema.properties);
         const groups = new Map<string, Preference.CompositeTreeNode>();
@@ -121,22 +123,23 @@ export class PreferenceTreeGenerator {
 
     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 labels = (layoutItem?.id ?? 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
+            groups,
+            label: this.generateName(groupID)
         });
         const immediateParent = subgroupName ? this.getOrCreatePreferencesGroup({
             id: subgroupID,
             group: groupID,
             root: toplevelParent,
             groups,
-            label: layoutItem?.label
+            label: layoutItem?.label ?? this.generateName(subgroupName)
         }) : undefined;
         this.createLeafNode(name, immediateParent || toplevelParent, property);
     }
@@ -177,9 +180,7 @@ export class PreferenceTreeGenerator {
     }
 
     getNodeId(preferenceId: string): string {
-        const expectedGroup = this.getGroupName(preferenceId.split('.'));
-        const expectedId = `${expectedGroup}@${preferenceId}`;
-        return expectedId;
+        return this._idCache.get(preferenceId) ?? '';
     }
 
     protected getGroupName(labels: string[]): string {
@@ -200,6 +201,10 @@ export class PreferenceTreeGenerator {
         }
     }
 
+    protected generateName(id: string): string {
+        return id.substring(0, 1).toUpperCase() + id.substring(1);
+    }
+
     doHandleChangedSchema(): void {
         const newTree = this.generateTree();
         this.onSchemaChangedEmitter.fire(newTree);
@@ -226,6 +231,7 @@ export class PreferenceTreeGenerator {
             preference: { data },
             depth: Preference.TreeNode.isTopLevel(preferencesGroup) ? 1 : 2
         };
+        this._idCache.set(property, newNode.id);
         CompositeTreeNode.addChild(preferencesGroup, newNode);
         return newNode;
     }

packages/preferences/src/browser/views/components/preference-markdown-renderer.ts

@@ -18,12 +18,17 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import { PreferenceTreeModel } from '../../preference-tree-model';
 import { PreferenceTreeLabelProvider } from '../../util/preference-tree-label-provider';
 import * as markdownit from '@theia/core/shared/markdown-it';
+import { CommandRegistry } from '@theia/core';
 
 @injectable()
 export class PreferenceMarkdownRenderer {
 
-    @inject(PreferenceTreeModel) protected readonly model: PreferenceTreeModel;
-    @inject(PreferenceTreeLabelProvider) protected readonly labelProvider: PreferenceTreeLabelProvider;
+    @inject(PreferenceTreeModel)
+    protected readonly model: PreferenceTreeModel;
+    @inject(PreferenceTreeLabelProvider)
+    protected readonly labelProvider: PreferenceTreeLabelProvider;
+    @inject(CommandRegistry)
+    protected readonly commandRegistry: CommandRegistry;
 
     protected _renderer?: markdownit;
 
@@ -47,19 +52,26 @@ export class PreferenceMarkdownRenderer {
         engine.renderer.rules.code_inline = (tokens, idx, options, env, self) => {
             const token = tokens[idx];
             const content = token.content;
-            if (content.startsWith('#') && content.endsWith('#')) {
-                const preferenceId = content.substring(1, content.length - 1);
-                const preferenceNode = this.model.getNodeFromPreferenceId(preferenceId);
+            if (content.length > 2 && content.startsWith('#') && content.endsWith('#')) {
+                const id = content.substring(1, content.length - 1);
+                // First check whether there's a preference with the given ID
+                const preferenceNode = this.model.getNodeFromPreferenceId(id);
                 if (preferenceNode) {
                     let name = this.labelProvider.getName(preferenceNode);
                     const prefix = this.labelProvider.getPrefix(preferenceNode, true);
                     if (prefix) {
                         name = prefix + name;
                     }
-                    return `<a title="${preferenceId}" href="preference:${preferenceId}">${name}</a>`;
-                } else {
-                    console.warn(`Linked preference "${preferenceId}" not found.`);
+                    return `<a title="${id}" href="preference:${id}">${name}</a>`;
                 }
+                // If no preference was found, check whether there's a command with the given ID
+                const command = this.commandRegistry.getCommand(id);
+                if (command) {
+                    const name = `${command.category ? `${command.category}: ` : ''}${command.label}`;
+                    return `<span class="command-link" title="${id}">${name}</span>`;
+                }
+                // If nothing was found, print a warning
+                console.warn(`Linked preference "${id}" not found.`);
             }
             return inlineCode ? inlineCode(tokens, idx, options, env, self) : '';
         };