Merge pull request microsoft#161098 from microsoft/joh/notebook-toolbar

joh/notebook toolbar

Author: jrieken

src/vs/platform/actions/browser/toolbar.ts

@@ -91,7 +91,7 @@ export class WorkbenchToolBar extends ToolBar {
 		}
 	}
 
-	override setActions(_primary: readonly IAction[], _secondary: readonly IAction[]): void {
+	override setActions(_primary: readonly IAction[], _secondary: readonly IAction[] = []): void {
 
 		this._sessionDisposables.clear();
 		const primary = _primary.slice();

src/vs/workbench/contrib/interactive/browser/interactiveEditor.ts

@@ -31,16 +31,14 @@ import { ExecutionStateCellStatusBarContrib, TimerCellStatusBarContrib } from 'v
 import { INotebookKernelService } from 'vs/workbench/contrib/notebook/common/notebookKernelService';
 import { PLAINTEXT_LANGUAGE_ID } from 'vs/editor/common/languages/modesRegistry';
 import { ILanguageService } from 'vs/editor/common/languages/language';
-import { IMenuService, MenuId } from 'vs/platform/actions/common/actions';
+import { MenuId } from 'vs/platform/actions/common/actions';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { InteractiveWindowSetting, INTERACTIVE_INPUT_CURSOR_BOUNDARY } from 'vs/workbench/contrib/interactive/browser/interactiveCommon';
 import { ComplexNotebookEditorModel } from 'vs/workbench/contrib/notebook/common/notebookEditorModel';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
 import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
-import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
-import { createActionViewItem, createAndFillInActionBarActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
-import { IAction } from 'vs/base/common/actions';
+import { createActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
 import { EditorExtensionsRegistry } from 'vs/editor/browser/editorExtensions';
 import { MenuPreventer } from 'vs/workbench/contrib/codeEditor/browser/menuPreventer';
 import { SelectionClipboardContributionID } from 'vs/workbench/contrib/codeEditor/browser/selectionClipboard';
@@ -58,6 +56,7 @@ import { NOTEBOOK_KERNEL } from 'vs/workbench/contrib/notebook/common/notebookCo
 import { ICursorPositionChangedEvent } from 'vs/editor/common/cursorEvents';
 import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
 import { isEqual } from 'vs/base/common/resources';
+import { MenuWorkbenchToolBar } from 'vs/platform/actions/browser/toolbar';
 
 const DECORATION_KEY = 'interactiveInputDecoration';
 const INTERACTIVE_EDITOR_VIEW_STATE_PREFERENCE_KEY = 'InteractiveEditorViewState';
@@ -94,8 +93,6 @@ export class InteractiveEditor extends EditorPane {
 	#contextKeyService: IContextKeyService;
 	#notebookKernelService: INotebookKernelService;
 	#keybindingService: IKeybindingService;
-	#menuService: IMenuService;
-	#contextMenuService: IContextMenuService;
 	#editorGroupService: IEditorGroupsService;
 	#notebookExecutionStateService: INotebookExecutionStateService;
 	#extensionService: IExtensionService;
@@ -123,8 +120,6 @@ export class InteractiveEditor extends EditorPane {
 		@ILanguageService languageService: ILanguageService,
 		@IKeybindingService keybindingService: IKeybindingService,
 		@IConfigurationService private configurationService: IConfigurationService,
-		@IMenuService menuService: IMenuService,
-		@IContextMenuService contextMenuService: IContextMenuService,
 		@IEditorGroupsService editorGroupService: IEditorGroupsService,
 		@ITextResourceConfigurationService textResourceConfigurationService: ITextResourceConfigurationService,
 		@INotebookExecutionStateService notebookExecutionStateService: INotebookExecutionStateService,
@@ -142,8 +137,6 @@ export class InteractiveEditor extends EditorPane {
 		this.#notebookKernelService = notebookKernelService;
 		this.#languageService = languageService;
 		this.#keybindingService = keybindingService;
-		this.#menuService = menuService;
-		this.#contextMenuService = contextMenuService;
 		this.#editorGroupService = editorGroupService;
 		this.#notebookExecutionStateService = notebookExecutionStateService;
 		this.#extensionService = extensionService;
@@ -186,21 +179,12 @@ export class InteractiveEditor extends EditorPane {
 	}
 
 	#setupRunButtonToolbar(runButtonContainer: HTMLElement) {
-		const menu = this._register(this.#menuService.createMenu(MenuId.InteractiveInputExecute, this.#contextKeyService));
-		this.#runbuttonToolbar = this._register(new ToolBar(runButtonContainer, this.#contextMenuService, {
-			getKeyBinding: action => this.#keybindingService.lookupKeybinding(action.id),
+		this.#runbuttonToolbar = this._register(this.#instantiationService.createInstance(MenuWorkbenchToolBar, runButtonContainer, MenuId.InteractiveInputExecute, {
 			actionViewItemProvider: action => {
 				return createActionViewItem(this.#instantiationService, action);
 			},
 			renderDropdownAsChildElement: true
 		}));
-
-		const primary: IAction[] = [];
-		const secondary: IAction[] = [];
-		const result = { primary, secondary };
-
-		createAndFillInActionBarActions(menu, { shouldForwardArgs: true }, result);
-		this.#runbuttonToolbar.setActions([...primary, ...secondary]);
 	}
 
 	#createLayoutStyles(): void {

src/vs/workbench/contrib/notebook/browser/diff/diffComponents.ts

@@ -40,6 +40,8 @@ import { ITextModelService } from 'vs/editor/common/services/resolverService';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { IDiffEditorConstructionOptions } from 'vs/editor/browser/editorBrowser';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { WorkbenchToolBar } from 'vs/platform/actions/browser/toolbar';
+import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 
 const fixedEditorPadding = {
 	top: 12,
@@ -104,7 +106,7 @@ class PropertyHeader extends Disposable {
 	protected _foldingIndicator!: HTMLElement;
 	protected _statusSpan!: HTMLElement;
 	protected _description!: HTMLElement;
-	protected _toolbar!: ToolBar;
+	protected _toolbar!: WorkbenchToolBar;
 	protected _menu!: IMenu;
 	protected _propertyExpanded?: IContextKey<boolean>;
 
@@ -128,6 +130,7 @@ class PropertyHeader extends Disposable {
 		@IMenuService readonly menuService: IMenuService,
 		@IContextKeyService readonly contextKeyService: IContextKeyService,
 		@IThemeService readonly themeService: IThemeService,
+		@ITelemetryService readonly telemetryService: ITelemetryService,
 	) {
 		super();
 	}
@@ -156,7 +159,7 @@ class PropertyHeader extends Disposable {
 		}
 
 		const cellToolbarContainer = DOM.append(this.propertyHeaderContainer, DOM.$('div.property-toolbar'));
-		this._toolbar = new ToolBar(cellToolbarContainer, this.contextMenuService, {
+		this._toolbar = new WorkbenchToolBar(cellToolbarContainer, {
 			actionViewItemProvider: action => {
 				if (action instanceof MenuItemAction) {
 					const item = new CodiconActionViewItem(action, undefined, this.keybindingService, this.notificationService, this.contextKeyService, this.themeService, this.contextMenuService);
@@ -165,7 +168,7 @@ class PropertyHeader extends Disposable {
 
 				return undefined;
 			}
-		});
+		}, this.menuService, this.contextKeyService, this.contextMenuService, this.keybindingService, this.telemetryService);
 		this._register(this._toolbar);
 		this._toolbar.context = {
 			cell: this.cell
@@ -1567,11 +1570,11 @@ export class ModifiedElement extends AbstractElementRenderer {
 			}
 		}));
 
-		this._menu = this.menuService.createMenu(MenuId.NotebookDiffCellInputTitle, scopedContextKeyService);
-		this._register(this._menu);
+		const menu = this.menuService.createMenu(MenuId.NotebookDiffCellInputTitle, scopedContextKeyService);
 		const actions: IAction[] = [];
-		createAndFillInActionBarActions(this._menu, { shouldForwardArgs: true }, actions);
+		createAndFillInActionBarActions(menu, { shouldForwardArgs: true }, actions);
 		this._toolbar.setActions(actions);
+		menu.dispose();
 	}
 
 	private async _initializeSourceDiffEditor() {

src/vs/workbench/contrib/notebook/browser/diff/notebookDiffEditorBrowser.ts

@@ -11,11 +11,11 @@ import { DisposableStore } from 'vs/base/common/lifecycle';
 import { NotebookTextModel } from 'vs/workbench/contrib/notebook/common/model/notebookTextModel';
 import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
 import { DiffEditorWidget } from 'vs/editor/browser/widget/diffEditorWidget';
-import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
 import { IMouseWheelEvent } from 'vs/base/browser/mouseEvent';
 import { RawContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { NotebookOptions } from 'vs/workbench/contrib/notebook/common/notebookOptions';
 import { NotebookLayoutInfo } from 'vs/workbench/contrib/notebook/browser/notebookViewEvents';
+import { WorkbenchToolBar } from 'vs/platform/actions/browser/toolbar';
 
 export enum DiffSide {
 	Original = 0,
@@ -83,7 +83,7 @@ export interface CellDiffSideBySideRenderTemplate extends CellDiffCommonRenderTe
 	readonly sourceEditor: DiffEditorWidget;
 	readonly editorContainer: HTMLElement;
 	readonly inputToolbarContainer: HTMLElement;
-	readonly toolbar: ToolBar;
+	readonly toolbar: WorkbenchToolBar;
 	readonly metadataHeaderContainer: HTMLElement;
 	readonly metadataInfoContainer: HTMLElement;
 	readonly outputHeaderContainer: HTMLElement;

src/vs/workbench/contrib/notebook/browser/diff/notebookTextDiffList.ts

@@ -20,7 +20,6 @@ import { isMacintosh } from 'vs/base/common/platform';
 import { DeletedElement, fixedDiffEditorOptions, fixedEditorOptions, getOptimizedNestedCodeEditorWidgetOptions, InsertElement, ModifiedElement } from 'vs/workbench/contrib/notebook/browser/diff/diffComponents';
 import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
 import { DiffEditorWidget } from 'vs/editor/browser/widget/diffEditorWidget';
-import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
 import { IMenuService, MenuItemAction } from 'vs/platform/actions/common/actions';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { INotificationService } from 'vs/platform/notification/common/notification';
@@ -29,6 +28,7 @@ import { IMouseWheelEvent } from 'vs/base/browser/mouseEvent';
 import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import { BareFontInfo } from 'vs/editor/common/config/fontInfo';
 import { PixelRatio } from 'vs/base/browser/browser';
+import { WorkbenchToolBar } from 'vs/platform/actions/browser/toolbar';
 
 export class NotebookCellTextDiffListDelegate implements IListVirtualDelegate<DiffElementViewModelBase> {
 	private readonly lineHeight: number;
@@ -184,7 +184,7 @@ export class CellDiffSideBySideRenderer implements IListRenderer<SideBySideDiffE
 
 		const inputToolbarContainer = DOM.append(sourceContainer, DOM.$('.editor-input-toolbar-container'));
 		const cellToolbarContainer = DOM.append(inputToolbarContainer, DOM.$('div.property-toolbar'));
-		const toolbar = new ToolBar(cellToolbarContainer, this.contextMenuService, {
+		const toolbar = this.instantiationService.createInstance(WorkbenchToolBar, cellToolbarContainer, {
 			actionViewItemProvider: action => {
 				if (action instanceof MenuItemAction) {
 					const item = new CodiconActionViewItem(action, undefined, this.keybindingService, this.notificationService, this.contextKeyService, this.themeService, this.contextMenuService);

src/vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput.ts

@@ -6,18 +6,16 @@
 import * as DOM from 'vs/base/browser/dom';
 import { FastDomNode } from 'vs/base/browser/fastDomNode';
 import { renderMarkdown } from 'vs/base/browser/markdownRenderer';
-import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
 import { Action, IAction } from 'vs/base/common/actions';
 import { IMarkdownString } from 'vs/base/common/htmlContent';
 import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
 import { MarshalledId } from 'vs/base/common/marshallingIds';
 import * as nls from 'vs/nls';
 import { createAndFillInActionBarActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
+import { WorkbenchToolBar } from 'vs/platform/actions/browser/toolbar';
 import { IMenuService, MenuId } from 'vs/platform/actions/common/actions';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
-import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import { IQuickInputService, IQuickPickItem } from 'vs/platform/quickinput/common/quickInput';
 import { ThemeIcon } from 'vs/platform/theme/common/themeService';
@@ -75,11 +73,10 @@ export class CellOutputElement extends Disposable {
 		readonly output: ICellOutputViewModel,
 		@INotebookService private readonly notebookService: INotebookService,
 		@IQuickInputService private readonly quickInputService: IQuickInputService,
-		@IContextMenuService private readonly contextMenuService: IContextMenuService,
-		@IKeybindingService private readonly keybindingService: IKeybindingService,
 		@IContextKeyService parentContextKeyService: IContextKeyService,
 		@IMenuService private readonly menuService: IMenuService,
-		@IPaneCompositePartService private readonly paneCompositeService: IPaneCompositePartService
+		@IPaneCompositePartService private readonly paneCompositeService: IPaneCompositePartService,
+		@IInstantiationService private readonly instantiationService: IInstantiationService,
 	) {
 		super();
 
@@ -268,8 +265,7 @@ export class CellOutputElement extends Disposable {
 
 		outputItemDiv.appendChild(mimeTypePicker);
 
-		const toolbar = this._renderDisposableStore.add(new ToolBar(mimeTypePicker, this.contextMenuService, {
-			getKeyBinding: action => this.keybindingService.lookupKeybinding(action.id),
+		const toolbar = this._renderDisposableStore.add(this.instantiationService.createInstance(WorkbenchToolBar, mimeTypePicker, {
 			renderDropdownAsChildElement: false
 		}));
 		toolbar.context = <INotebookCellActionContext>{

src/vs/workbench/contrib/notebook/browser/view/cellParts/cellToolbars.ts

@@ -13,30 +13,26 @@ import { ServicesAccessor } from 'vs/editor/browser/editorExtensions';
 import { createActionViewItem, createAndFillInActionBarActions, MenuEntryActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem';
 import { IMenu, IMenuService, MenuId, MenuItemAction } from 'vs/platform/actions/common/actions';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
-import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { INotebookCellActionContext } from 'vs/workbench/contrib/notebook/browser/controller/coreActions';
 import { ICellViewModel, INotebookEditorDelegate } from 'vs/workbench/contrib/notebook/browser/notebookBrowser';
 import { CodiconActionViewItem } from 'vs/workbench/contrib/notebook/browser/view/cellParts/cellActionView';
 import { CellPart } from 'vs/workbench/contrib/notebook/browser/view/cellPart';
 import { registerStickyScroll } from 'vs/workbench/contrib/notebook/browser/view/cellParts/stickyScroll';
+import { HiddenItemStrategy, MenuWorkbenchToolBar, WorkbenchToolBar } from 'vs/platform/actions/browser/toolbar';
 
 export class BetweenCellToolbar extends CellPart {
-	private _betweenCellToolbar!: ToolBar;
+	private _betweenCellToolbar!: MenuWorkbenchToolBar;
 
 	constructor(
 		private readonly _notebookEditor: INotebookEditorDelegate,
 		_titleToolbarContainer: HTMLElement,
 		private readonly _bottomCellToolbarContainer: HTMLElement,
 		@IInstantiationService instantiationService: IInstantiationService,
-		@IContextMenuService contextMenuService: IContextMenuService,
-		@IContextKeyService contextKeyService: IContextKeyService,
-		@IMenuService menuService: IMenuService
 	) {
 		super();
 
-		this._betweenCellToolbar = this._register(new ToolBar(this._bottomCellToolbarContainer, contextMenuService, {
+		this._betweenCellToolbar = this._register(instantiationService.createInstance(MenuWorkbenchToolBar, this._bottomCellToolbarContainer, this._notebookEditor.creationOptions.menuIds.cellInsertToolbar, {
 			actionViewItemProvider: action => {
 				if (action instanceof MenuItemAction) {
 					if (this._notebookEditor.notebookOptions.getLayoutConfiguration().insertToolbarAlignment === 'center') {
@@ -47,22 +43,14 @@ export class BetweenCellToolbar extends CellPart {
 				}
 
 				return undefined;
+			},
+			toolbarOptions: {
+				primaryGroup: g => /^inline/.test(g),
+			},
+			menuOptions: {
+				shouldForwardArgs: true
 			}
 		}));
-
-		const menu = this._register(menuService.createMenu(this._notebookEditor.creationOptions.menuIds.cellInsertToolbar, contextKeyService));
-		const updateActions = () => {
-			const actions = getCellToolbarActions(menu);
-			this._betweenCellToolbar.setActions(actions.primary, actions.secondary);
-		};
-
-		this._register(menu.onDidChange(() => updateActions()));
-		this._register(this._notebookEditor.notebookOptions.onDidChangeOptions((e) => {
-			if (e.insertToolbarAlignment) {
-				updateActions();
-			}
-		}));
-		updateActions();
 	}
 
 	updateContext(context: INotebookCellActionContext) {
@@ -90,9 +78,9 @@ export interface ICssClassDelegate {
 }
 
 export class CellTitleToolbarPart extends CellPart {
-	private _toolbar: ToolBar;
+	private _toolbar: WorkbenchToolBar;
 	private _titleMenu: IMenu;
-	private _deleteToolbar: ToolBar;
+	private _deleteToolbar: WorkbenchToolBar;
 	private _deleteMenu: IMenu;
 	private readonly _onDidUpdateActions: Emitter<void> = this._register(new Emitter<void>());
 	readonly onDidUpdateActions: Event<void> = this._onDidUpdateActions.event;
@@ -116,7 +104,7 @@ export class CellTitleToolbarPart extends CellPart {
 		this._toolbar = instantiationService.invokeFunction(accessor => createToolbar(accessor, toolbarContainer));
 		this._titleMenu = this._register(menuService.createMenu(toolbarId, contextKeyService));
 
-		this._deleteToolbar = this._register(instantiationService.invokeFunction(accessor => createToolbar(accessor, toolbarContainer, 'cell-delete-toolbar')));
+		this._deleteToolbar = this._register(instantiationService.invokeFunction(accessor => createToolbar(accessor, toolbarContainer, 'cell-delete-toolbar', HiddenItemStrategy.Ignore)));
 		this._deleteMenu = this._register(menuService.createMenu(deleteToolbarId, contextKeyService));
 		if (!this._notebookEditor.creationOptions.isReadOnly) {
 			const deleteActions = getCellToolbarActions(this._deleteMenu);
@@ -202,16 +190,15 @@ function getCellToolbarActions(menu: IMenu): { primary: IAction[]; secondary: IA
 	return result;
 }
 
-function createToolbar(accessor: ServicesAccessor, container: HTMLElement, elementClass?: string): ToolBar {
-	const contextMenuService = accessor.get(IContextMenuService);
-	const keybindingService = accessor.get(IKeybindingService);
+function createToolbar(accessor: ServicesAccessor, container: HTMLElement, elementClass?: string, hiddenItemStrategy?: HiddenItemStrategy): WorkbenchToolBar {
 	const instantiationService = accessor.get(IInstantiationService);
-	const toolbar = new ToolBar(container, contextMenuService, {
-		getKeyBinding: action => keybindingService.lookupKeybinding(action.id),
+
+	const toolbar = instantiationService.createInstance(WorkbenchToolBar, container, {
 		actionViewItemProvider: action => {
 			return createActionViewItem(instantiationService, action);
 		},
-		renderDropdownAsChildElement: true
+		renderDropdownAsChildElement: true,
+		hiddenItemStrategy
 	});
 
 	if (elementClass) {