From 635eb5bb94e2d800d1d2ef448f8cd5cbe3fbcb8a Mon Sep 17 00:00:00 2001
From: Mark Sujew <mark.sujew@typefox.io>
Date: Wed, 10 Apr 2024 21:14:19 +0200
Subject: [PATCH] Show short title for notebook toolbar commands (#13586)

---
 packages/core/src/common/command.ts                         | 4 ++++
 .../notebook/src/browser/view/notebook-main-toolbar.tsx     | 6 ++++--
 packages/plugin-ext/src/common/plugin-protocol.ts           | 2 ++
 .../plugin-ext/src/hosted/node/scanners/scanner-theia.ts    | 4 ++--
 .../src/main/browser/plugin-contribution-handler.ts         | 4 ++--
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/core/src/common/command.ts b/packages/core/src/common/command.ts
index d0e3f6302095a..0e32824c8b20f 100644
--- a/packages/core/src/common/command.ts
+++ b/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.
      */
diff --git a/packages/notebook/src/browser/view/notebook-main-toolbar.tsx b/packages/notebook/src/browser/view/notebook-main-toolbar.tsx
index 78160e64ec19b..696bb496232a5 100644
--- a/packages/notebook/src/browser/view/notebook-main-toolbar.tsx
+++ b/packages/notebook/src/browser/view/notebook-main-toolbar.tsx
@@ -123,7 +123,9 @@ 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))) {
@@ -131,7 +133,7 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
                     }
                 }}>
                 <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;
diff --git a/packages/plugin-ext/src/common/plugin-protocol.ts b/packages/plugin-ext/src/common/plugin-protocol.ts
index d2ce75860d212..61f457a9a572c 100644
--- a/packages/plugin-ext/src/common/plugin-protocol.ts
+++ b/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;
diff --git a/packages/plugin-ext/src/hosted/node/scanners/scanner-theia.ts b/packages/plugin-ext/src/hosted/node/scanners/scanner-theia.ts
index 7c9661fc04db4..834aaee8bc35a 100644
--- a/packages/plugin-ext/src/hosted/node/scanners/scanner-theia.ts
+++ b/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 {
diff --git a/packages/plugin-ext/src/main/browser/plugin-contribution-handler.ts b/packages/plugin-ext/src/main/browser/plugin-contribution-handler.ts
index b6e8c58dc7c47..89cd8b4f22fe8 100644
--- a/packages/plugin-ext/src/main/browser/plugin-contribution-handler.ts
+++ b/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;
     }