fixes clear cell outputs command and improves toolbar creation

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

@@ -324,7 +324,7 @@ export class NotebookCellActionContribution implements MenuContribution, Command
             }
         });
         commands.registerCommand(NotebookCellCommands.CLEAR_OUTPUTS_COMMAND, this.editableCellCommandHandler(
-            (notebook, cell) => notebook.applyEdits([{
+            (notebook, cell) => (notebook ?? this.notebookEditorWidgetService.focusedEditor?.model)?.applyEdits([{
                 editType: CellEditType.Output,
                 handle: cell.handle,
                 outputs: [],

packages/notebook/src/browser/view/notebook-cell-list-view.tsx

@@ -89,7 +89,10 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                                 {this.renderCellContent(cell, index)}
                             </div>
                             {this.state.selectedCell === cell &&
-                                this.props.toolbarRenderer.renderCellToolbar(NotebookCellActionContribution.ACTION_MENU, this.props.notebookModel, cell)}
+                                this.props.toolbarRenderer.renderCellToolbar(NotebookCellActionContribution.ACTION_MENU, cell, {
+                                    contextMenuArgs: () => [cell], commandArgs: () => [this.props.notebookModel]
+                                })
+                            }
                         </li>
                         {this.shouldRenderDragOverIndicator(cell, 'bottom') && <CellDropIndicator />}
                     </React.Fragment>

packages/notebook/src/browser/view/notebook-cell-toolbar-factory.tsx

@@ -20,9 +20,7 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { NotebookCellSidebar, NotebookCellToolbar } from './notebook-cell-toolbar';
 import { ContextMenuRenderer } from '@theia/core/lib/browser';
-import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
-import { NotebookCellOutputModel } from '../view-model/notebook-cell-output-model';
 import { NotebookContextManager } from '../service/notebook-context-manager';
 
 export interface NotebookCellToolbarItem {
@@ -34,6 +32,11 @@ export interface NotebookCellToolbarItem {
     contextKeys?: Set<string>
 }
 
+export interface toolbarItemOptions {
+    contextMenuArgs?: () => unknown[];
+    commandArgs?: () => unknown[];
+}
+
 @injectable()
 export class NotebookCellToolbarFactory {
 
@@ -52,31 +55,31 @@ export class NotebookCellToolbarFactory {
     @inject(NotebookContextManager)
     protected readonly notebookContextManager: NotebookContextManager;
 
-    renderCellToolbar(menuPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
-        return <NotebookCellToolbar getMenuItems={() => this.getMenuItems(menuPath, notebookModel, cell)}
+    renderCellToolbar(menuPath: string[], cell: NotebookCellModel, itemOptions: toolbarItemOptions): React.ReactNode {
+        return <NotebookCellToolbar getMenuItems={() => this.getMenuItems(menuPath, cell, itemOptions)}
             onContextKeysChanged={this.notebookContextManager.onDidChangeContext} />;
     }
 
-    renderSidebar(menuPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): React.ReactNode {
-        return <NotebookCellSidebar getMenuItems={() => this.getMenuItems(menuPath, notebookModel, cell, output)}
+    renderSidebar(menuPath: string[], cell: NotebookCellModel, itemOptions: toolbarItemOptions): React.ReactNode {
+        return <NotebookCellSidebar getMenuItems={() => this.getMenuItems(menuPath, cell, itemOptions)}
             onContextKeysChanged={this.notebookContextManager.onDidChangeContext} />;
     }
 
-    private getMenuItems(menuItemPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): NotebookCellToolbarItem[] {
+    private getMenuItems(menuItemPath: string[], cell: NotebookCellModel, itemOptions: toolbarItemOptions): NotebookCellToolbarItem[] {
         const inlineItems: NotebookCellToolbarItem[] = [];
         for (const menuNode of this.menuRegistry.getMenu(menuItemPath).children) {
             if (!menuNode.when || this.notebookContextManager.getCellContext(cell.handle).match(menuNode.when, this.notebookContextManager.context)) {
                 if (menuNode.role === CompoundMenuNodeRole.Flat) {
-                    inlineItems.push(...menuNode.children?.map(child => this.createToolbarItem(child, notebookModel, cell, output)) ?? []);
+                    inlineItems.push(...menuNode.children?.map(child => this.createToolbarItem(child, itemOptions)) ?? []);
                 } else {
-                    inlineItems.push(this.createToolbarItem(menuNode, notebookModel, cell, output));
+                    inlineItems.push(this.createToolbarItem(menuNode, itemOptions));
                 }
             }
         }
         return inlineItems;
     }
 
-    private createToolbarItem(menuNode: MenuNode, notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): NotebookCellToolbarItem {
+    private createToolbarItem(menuNode: MenuNode, itemOptions: toolbarItemOptions): NotebookCellToolbarItem {
         const menuPath = menuNode.role === CompoundMenuNodeRole.Submenu ? this.menuRegistry.getPath(menuNode) : undefined;
         return {
             id: menuNode.id,
@@ -88,11 +91,11 @@ export class NotebookCellToolbarFactory {
                         anchor: e.nativeEvent,
                         menuPath,
                         includeAnchorArg: false,
-                        args: [cell],
+                        args: itemOptions.contextMenuArgs?.(),
                         context: this.notebookContextManager.context
                     }) :
-                () => this.commandRegistry.executeCommand(menuNode.command!, notebookModel, cell, output),
-            isVisible: () => menuPath ? true : Boolean(this.commandRegistry.getVisibleHandler(menuNode.command!, notebookModel, cell, output)),
+                () => this.commandRegistry.executeCommand(menuNode.command!, ...(itemOptions.commandArgs?.() ?? [])),
+            isVisible: () => menuPath ? true : Boolean(this.commandRegistry.getVisibleHandler(menuNode.command!, ...(itemOptions.commandArgs?.() ?? []))),
             contextKeys: menuNode.when ? this.contextKeyService.parseKeys(menuNode.when) : undefined
         };
     }

packages/notebook/src/browser/view/notebook-code-cell-view.tsx

@@ -70,7 +70,10 @@ export class NotebookCodeCellRenderer implements CellRenderer {
         return <div>
             <div className='theia-notebook-cell-with-sidebar'>
                 <div className='theia-notebook-cell-sidebar'>
-                    {this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, notebookModel, cell)}
+                    {this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, cell, {
+                        contextMenuArgs: () => [cell], commandArgs: () => [notebookModel, cell]
+                    })
+                    }
                     <CodeCellExecutionOrder cell={cell} />
                 </div>
                 <div className='theia-notebook-cell-editor-container'>
@@ -88,7 +91,10 @@ export class NotebookCodeCellRenderer implements CellRenderer {
             <div className='theia-notebook-cell-with-sidebar'>
                 <NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebviewFactory={this.cellOutputWebviewFactory}
                     renderSidebar={() =>
-                        this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, notebookModel, cell, cell.outputs[0])} />
+                        this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, cell, {
+                            contextMenuArgs: () => [notebookModel, cell, cell.outputs[0]]
+                        })
+                    } />
             </div>
         </div >;
     }

packages/plugin-ext/src/main/browser/notebooks/renderers/output-webview-internal.ts

@@ -553,11 +553,11 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
                 renderers.getRenderer(event.data.rendererId)?.receiveMessage(event.data.message);
                 break;
             case 'changePreferredMimetype':
-                const outputId = event.data.outputId;
-                const index = outputs.findIndex(output => output.outputId === outputId);
-                outputs.splice(index, 1);
-                clearOutput(outputs.splice(index, 1)[0]);
-                renderers.render(outputs[index], event.data.mimeType, undefined, new AbortController().signal);
+                const mimeType = event.data.mimeType;
+                outputs.forEach(output => {
+                    output.element.innerHTML = '';
+                    renderers.render(output, mimeType, undefined, new AbortController().signal);
+                });
                 break;
             case 'customKernelMessage':
                 onDidReceiveKernelMessage.fire(event.data.message);