Show short title for notebook toolbar commands (#13586)

Author: msujew

packages/core/src/common/command.ts

@@ -41,6 +41,10 @@ export interface Command {
      * An icon class of this command.
      */
     iconClass?: string;
+    /**
+     * A short title used for display in menus.
+     */
+    shortTitle?: string;
     /**
      * A category of this command.
      */

packages/notebook/src/browser/view/notebook-main-toolbar.tsx

@@ -123,15 +123,17 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
             if (!visibleCommand) {
                 return undefined;
             }
-            const title = (this.props.commandRegistry.getCommand(item.command ?? '') as NotebookCommand)?.tooltip ?? item.label;
+            const command = this.props.commandRegistry.getCommand(item.command ?? '') as NotebookCommand | undefined;
+            const label = command?.shortTitle ?? item.label;
+            const title = command?.tooltip ?? item.label;
             return <div key={item.id} title={title} className={`theia-notebook-main-toolbar-item action-label${this.getAdditionalClasses(item)}`}
                 onClick={() => {
                     if (item.command && (!item.when || this.props.contextKeyService.match(item.when, this.props.editorNode))) {
                         this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel.uri);
                     }
                 }}>
                 <span className={item.icon} />
-                <span className='theia-notebook-main-toolbar-item-text'>{item.label}</span>
+                <span className='theia-notebook-main-toolbar-item-text'>{label}</span>
             </div>;
         }
         return undefined;

packages/plugin-ext/src/common/plugin-protocol.ts

@@ -198,6 +198,7 @@ export interface PluginPackageViewWelcome {
 export interface PluginPackageCommand {
     command: string;
     title: string;
+    shortTitle?: string;
     original?: string;
     category?: string;
     icon?: string | { light: string; dark: string; };
@@ -858,6 +859,7 @@ export interface ViewWelcome {
 export interface PluginCommand {
     command: string;
     title: string;
+    shortTitle?: string;
     originalTitle?: string;
     category?: string;
     iconUrl?: IconUrl;

packages/plugin-ext/src/hosted/node/scanners/scanner-theia.ts

@@ -455,9 +455,9 @@ export class TheiaPluginScanner extends AbstractPluginScanner {
         return translation;
     }
 
-    protected readCommand({ command, title, original, category, icon, enablement }: PluginPackageCommand, pck: PluginPackage): PluginCommand {
+    protected readCommand({ command, title, shortTitle, original, category, icon, enablement }: PluginPackageCommand, pck: PluginPackage): PluginCommand {
         const { themeIcon, iconUrl } = this.transformIconUrl(pck, icon) ?? {};
-        return { command, title, originalTitle: original, category, iconUrl, themeIcon, enablement };
+        return { command, title, shortTitle, originalTitle: original, category, iconUrl, themeIcon, enablement };
     }
 
     protected transformIconUrl(plugin: PluginPackage, original?: IconUrl): { iconUrl?: IconUrl; themeIcon?: string } | undefined {

packages/plugin-ext/src/main/browser/plugin-contribution-handler.ts

@@ -463,7 +463,7 @@ export class PluginContributionHandler {
             return Disposable.NULL;
         }
         const toDispose = new DisposableCollection();
-        for (const { iconUrl, themeIcon, command, category, title, originalTitle, enablement } of contribution.commands) {
+        for (const { iconUrl, themeIcon, command, category, shortTitle, title, originalTitle, enablement } of contribution.commands) {
             const reference = iconUrl && this.style.toIconClass(iconUrl);
             const icon = themeIcon && ThemeIcon.fromString(themeIcon);
             let iconClass;
@@ -473,7 +473,7 @@ export class PluginContributionHandler {
             } else if (icon) {
                 iconClass = ThemeIcon.asClassName(icon);
             }
-            toDispose.push(this.registerCommand({ id: command, category, label: title, originalLabel: originalTitle, iconClass }, enablement));
+            toDispose.push(this.registerCommand({ id: command, category, shortTitle, label: title, originalLabel: originalTitle, iconClass }, enablement));
         }
         return toDispose;
     }