Improves style and titles of toolbar items in notebooks.

Signed-off-by: Jan Bicker <[email protected]>

Author: jbicker

packages/core/src/common/command.ts

@@ -37,6 +37,10 @@ export interface Command {
      */
     label?: string;
     originalLabel?: string;
+    /**
+     * A optional tooltip in addition to the label
+     */
+    tooltip?: string;
     /**
      * An icon class of this command.
      */
@@ -60,6 +64,7 @@ export namespace Command {
             ...command,
             label: command.label && nls.localize(nlsLabelKey, command.label),
             originalLabel: command.label,
+            tooltip: command.tooltip,
             category: nlsCategoryKey && command.category && nls.localize(nlsCategoryKey, command.category) || command.category,
             originalCategory: command.category,
         };
@@ -70,6 +75,7 @@ export namespace Command {
             ...command,
             label: command.label && nls.localizeByDefault(command.label),
             originalLabel: command.label,
+            tooltip: command.tooltip,
             category: command.category && nls.localizeByDefault(command.category),
             originalCategory: command.category,
         };

packages/notebook/src/browser/contributions/notebook-actions-contribution.ts

@@ -32,12 +32,14 @@ export namespace NotebookCommands {
 
     export const ADD_NEW_MARKDOWN_CELL_COMMAND = Command.toDefaultLocalizedCommand({
         id: 'notebook.add-new-markdown-cell',
-        iconClass: codicon('add')
+        iconClass: codicon('add'),
+        tooltip: nls.localizeByDefault('Add Markdown Cell')
     });
 
     export const ADD_NEW_CODE_CELL_COMMAND = Command.toDefaultLocalizedCommand({
         id: 'notebook.add-new-code-cell',
-        iconClass: codicon('add')
+        iconClass: codicon('add'),
+        tooltip: nls.localizeByDefault('Add Code Cell')
     });
 
     export const SELECT_KERNEL_COMMAND = Command.toDefaultLocalizedCommand({

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

@@ -85,7 +85,7 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
         return <div className='theia-notebook-main-toolbar'>
             {this.getMenuItems().map(item => this.renderMenuItem(item))}
             <div style={{ flexGrow: 1 }}></div>
-            <div className='theia-notebook-main-toolbar-item'
+            <div className='theia-notebook-main-toolbar-item action-label'
                 onClick={() => this.props.commandRegistry.executeCommand(NotebookCommands.SELECT_KERNEL_COMMAND.id, this.props.notebookModel)}>
                 <span className={codicon('server-environment')} />
                 <span className=' theia-notebook-main-toolbar-item-text'>
@@ -103,7 +103,8 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
                 {itemNodes && itemNodes.length > 0 && <span key={`${item.id}-separator`} className='theia-notebook-toolbar-separator'></span>}
             </React.Fragment>;
         } else if (!item.when || this.props.contextKeyService.match(item.when)) {
-            return <div key={item.id} title={item.id} className='theia-notebook-main-toolbar-item'
+            const title = this.props.commandRegistry.getCommand(item.command ?? '')?.tooltip ?? item.label;
+            return <div key={item.id} title={title} className='theia-notebook-main-toolbar-item action-label'
                 onClick={() => {
                     if (item.command) {
                         this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel);