Added action bar to Code Action Widget (microsoft#158399)

Action bar with button that shows/hides disabled code actions in the list.

Author: justschen

src/vs/editor/contrib/codeAction/browser/codeActionMenu.ts

@@ -33,6 +33,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
 import 'vs/base/browser/ui/codicons/codiconStyles'; // The codicon symbol styles are defined here and must be loaded
 import 'vs/editor/contrib/symbolIcons/browser/symbolIcons'; // The codicon symbol colors are defined here and must be loaded to get colors
 import { Codicon } from 'vs/base/common/codicons';
+import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 
 export const Context = {
 	Visible: new RawContextKey<boolean>('CodeActionMenuVisible', false, localize('CodeActionMenuVisible', "Whether the code action list widget is visible"))
@@ -74,6 +75,19 @@ export interface ICodeActionMenuItem {
 	headerTitle: string;
 	index: number;
 	disposables?: IDisposable[];
+	params: ICodeActionMenuParameters;
+}
+
+export interface ICodeActionMenuParameters {
+	options: CodeActionShowOptions;
+	trigger: CodeActionTrigger;
+	anchor: { x: number; y: number };
+	menuActions: IAction[];
+	codeActions: CodeActionSet;
+	visible: boolean;
+	showDisabled: boolean;
+	menuObj: CodeActionMenu;
+
 }
 
 export interface ICodeMenuOptions {
@@ -97,8 +111,10 @@ const TEMPLATE_ID = 'codeActionWidget';
 const codeActionLineHeight = 24;
 const headerLineHeight = 26;
 
-class CodeMenuRenderer implements IListRenderer<ICodeActionMenuItem, ICodeActionMenuTemplateData> {
+// TODO: Take a look at user storage for this so it is preserved across windows and on reload.
+let showDisabled = false;
 
+class CodeMenuRenderer implements IListRenderer<ICodeActionMenuItem, ICodeActionMenuTemplateData> {
 	constructor(
 		private readonly acceptKeybindings: [string, string],
 		@IKeybindingService private readonly keybindingService: IKeybindingService,
@@ -129,6 +145,7 @@ class CodeMenuRenderer implements IListRenderer<ICodeActionMenuItem, ICodeAction
 		const isSeparator = element.isSeparator;
 		const isHeader = element.isHeader;
 
+		// Renders differently based on element type.
 		if (isSeparator) {
 			data.root.classList.add('separator');
 			data.root.style.height = '10px';
@@ -139,21 +156,50 @@ class CodeMenuRenderer implements IListRenderer<ICodeActionMenuItem, ICodeAction
 			data.root.classList.add('group-header');
 		} else {
 			const text = element.action.label;
-			data.text.textContent = text;
 			element.isEnabled = element.action.enabled;
 
 			if (element.action instanceof CodeActionAction) {
+				const openedFromString = (element.params?.options.fromLightbulb) ? CodeActionTriggerSource.Lightbulb : element.params?.trigger.triggerAction;
+
 
 				// Check documentation type
 				element.isDocumentation = element.action.action.kind === CodeActionMenu.documentationID;
 
 				if (element.isDocumentation) {
-					data.text.textContent = text;
+					element.isEnabled = false;
 					data.root.classList.add('documentation');
+
+					const container = data.root;
+
+					const actionbarContainer = dom.append(container, dom.$('.codeActionWidget-action-bar'));
+
+					const reRenderAction = showDisabled ?
+						<IAction>{
+							id: 'hideMoreCodeActions',
+							label: localize('hideMoreCodeActions', 'Hide Disabled'),
+							enabled: true,
+							run: () => CodeActionMenu.toggleDisabledOptions(element.params)
+						} :
+						<IAction>{
+							id: 'showMoreCodeActions',
+							label: localize('showMoreCodeActions', 'Show Disabled'),
+							enabled: true,
+							run: () => CodeActionMenu.toggleDisabledOptions(element.params)
+						};
+
+					const actionbar = new ActionBar(actionbarContainer);
+					data.disposables.push(actionbar);
+
+					if (openedFromString === CodeActionTriggerSource.Refactor && (element.params.codeActions.validActions.length > 0 || element.params.codeActions.allActions.length === element.params.codeActions.validActions.length)) {
+						actionbar.push([element.action, reRenderAction], { icon: false, label: true });
+					} else {
+						actionbar.push([element.action], { icon: false, label: true });
+					}
 				} else {
+					data.text.textContent = text;
+
 					// Icons and Label modifaction based on group
 					const group = element.action.action.kind;
-
 					if (CodeActionKind.SurroundWith.contains(new CodeActionKind(String(group)))) {
 						data.icon.className = Codicon.symbolArray.classNames;
 					} else if (CodeActionKind.Extract.contains(new CodeActionKind(String(group)))) {
@@ -249,6 +295,9 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		return this._visible;
 	}
 
+	/**
+	 * Checks if the settings have enabled the new code action widget.
+	 */
 	private isCodeActionWidgetEnabled(model: ITextModel): boolean {
 		return this._configurationService.getValue('editor.experimental.useCustomCodeActionMenu', {
 			resource: model.uri
@@ -291,7 +340,10 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		}
 	}
 
-	private renderCodeActionMenuList(element: HTMLElement, inputArray: IAction[]): IDisposable {
+	/**
+	 * Renders the code action widget given the provided actions.
+	 */
+	private renderCodeActionMenuList(element: HTMLElement, inputArray: IAction[], params: ICodeActionMenuParameters): IDisposable {
 		const renderDisposables = new DisposableStore();
 		const renderMenu = document.createElement('div');
 
@@ -332,10 +384,10 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 				accessibilityProvider: {
 					getAriaLabel: element => {
 						if (element.action instanceof CodeActionAction) {
-							const label = element.action.label;
+							let label = element.action.label;
 							if (!element.action.enabled) {
 								if (element.action instanceof CodeActionAction) {
-									localize({ key: 'customCodeActionWidget.labels', comment: ['Code action labels for accessibility.'] }, "{0}, Disabled Reason: {1}", label, element.action.action.disabled);
+									label = localize({ key: 'customCodeActionWidget.labels', comment: ['Code action labels for accessibility.'] }, "{0}, Disabled Reason: {1}", label, element.action.action.disabled);
 								}
 							}
 							return label;
@@ -366,9 +418,9 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 
 		renderDisposables.add(this.codeActionList.value.onMouseClick(e => this._onListClick(e)));
 		renderDisposables.add(this.codeActionList.value.onMouseOver(e => this._onListHover(e)));
-		renderDisposables.add(this.codeActionList.value.onDidChangeFocus(e => this.codeActionList.value?.domFocus()));
+		renderDisposables.add(this.codeActionList.value.onDidChangeFocus(() => this.codeActionList.value?.domFocus()));
 		renderDisposables.add(this.codeActionList.value.onDidChangeSelection(e => this._onListSelection(e)));
-		renderDisposables.add(this._editor.onDidLayoutChange(e => this.hideCodeActionWidget()));
+		renderDisposables.add(this._editor.onDidLayoutChange(() => this.hideCodeActionWidget()));
 
 		// Filters and groups code actions by their group
 		const menuEntries: IAction[][] = [];
@@ -383,7 +435,7 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		const documentationGroup: IAction[] = [];
 		const otherGroup: IAction[] = [];
 
-		inputArray.forEach((item, index) => {
+		inputArray.forEach((item) => {
 			if (item instanceof CodeActionAction) {
 				const optionKind = item.action.kind;
 
@@ -440,7 +492,7 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 					menuEntriesToPush(localize('codeAction.widget.id.more', 'More Actions...'), entry);
 				}
 			} else {
-				// case for separator - not a code action action
+				// case for separator - separators are not codeActionAction typed
 				totalActionEntries.push(...entry);
 			}
 
@@ -459,7 +511,7 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 					this.hasSeparator = true;
 				}
 
-				const menuItem = <ICodeActionMenuItem>{ action: item, isEnabled: item.enabled, isSeparator: currIsSeparator, index };
+				const menuItem = <ICodeActionMenuItem>{ action: item, isEnabled: item.enabled, isSeparator: currIsSeparator, index, params };
 				if (item.enabled) {
 					this.viewItems.push(menuItem);
 				}
@@ -486,7 +538,12 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		});
 
 		// resize observer - can be used in the future since list widget supports dynamic height but not width
-		const maxWidth = Math.max(...arr);
+		let maxWidth = Math.max(...arr);
+
+		// If there are no actions, the minimum width is the width of the list widget's action bar.
+		if (params.trigger.triggerAction === CodeActionTriggerSource.Refactor && maxWidth < 230) {
+			maxWidth = 230;
+		}
 
 		// 52 is the additional padding for the list widget (26 left, 26 right)
 		renderMenu.style.width = maxWidth + 52 + 5 + 'px';
@@ -514,6 +571,9 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		return renderDisposables;
 	}
 
+	/**
+	 * Focuses on the previous item in the list using the list widget.
+	 */
 	protected focusPrevious() {
 		if (typeof this.focusedEnabledItem === 'undefined') {
 			this.focusedEnabledItem = this.viewItems[0].index;
@@ -537,6 +597,9 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		return true;
 	}
 
+	/**
+	 * Focuses on the next item in the list using the list widget.
+	 */
 	protected focusNext() {
 		if (typeof this.focusedEnabledItem === 'undefined') {
 			this.focusedEnabledItem = this.viewItems.length - 1;
@@ -582,7 +645,7 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		this.focusedEnabledItem = 0;
 		this.currSelectedItem = undefined;
 		this.hasSeparator = false;
-		this._contextViewService.hideContextView({ source: this });
+		this._contextViewService.hideContextView();
 	}
 
 	codeActionTelemetry(openedFromString: CodeActionTriggerSource, didCancel: boolean, CodeActions: CodeActionSet) {
@@ -608,12 +671,52 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		});
 	}
 
+	/**
+	 * Helper function to create a context view item using code action `params`.
+	 */
+	private showContextViewHelper(params: ICodeActionMenuParameters, menuActions: IAction[]) {
+		this._contextViewService.showContextView({
+			getAnchor: () => params.anchor,
+			render: (container: HTMLElement) => this.renderCodeActionMenuList(container, menuActions, params),
+			onHide: (didCancel: boolean) => {
+				const openedFromString = (params.options.fromLightbulb) ? CodeActionTriggerSource.Lightbulb : params.trigger.triggerAction;
+				this.codeActionTelemetry(openedFromString, didCancel, params.codeActions);
+				this._visible = false;
+				this._editor.focus();
+			},
+		},
+			this._editor.getDomNode()!, false,
+		);
+
+	}
+
+	/**
+	 * Toggles whether the disabled actions in the code action widget are visible or not.
+	 */
+	public static toggleDisabledOptions(params: ICodeActionMenuParameters): void {
+		params.menuObj.hideCodeActionWidget();
+
+		showDisabled = !showDisabled;
+
+		const actionsToShow = showDisabled ? params.codeActions.allActions : params.codeActions.validActions;
+
+		const menuActions = params.menuObj.getMenuActions(params.trigger, actionsToShow, params.codeActions.documentation);
+
+		params.menuObj.showContextViewHelper(params, menuActions);
+	}
+
 	public async show(trigger: CodeActionTrigger, codeActions: CodeActionSet, at: IAnchor | IPosition, options: CodeActionShowOptions): Promise<void> {
 		const model = this._editor.getModel();
 		if (!model) {
 			return;
 		}
-		const actionsToShow = options.includeDisabledActions ? codeActions.allActions : codeActions.validActions;
+
+		let actionsToShow = options.includeDisabledActions ? codeActions.allActions : codeActions.validActions;
+
+		// If there are no refactorings, we should still show the menu and only displayed disabled actions without `enable` button.
+		if (trigger.triggerAction === CodeActionTriggerSource.Refactor && codeActions.validActions.length > 0) {
+			actionsToShow = showDisabled ? codeActions.allActions : codeActions.validActions;
+		}
 
 		if (!actionsToShow.length) {
 			this._visible = false;
@@ -632,24 +735,15 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		const menuActions = this.getMenuActions(trigger, actionsToShow, codeActions.documentation);
 
 		const anchor = Position.isIPosition(at) ? this._toCoords(at) : at || { x: 0, y: 0 };
+
+		const params = <ICodeActionMenuParameters>{ options, trigger, codeActions, anchor, menuActions, showDisabled: true, visible: this._visible, menuObj: this };
 		const resolver = this._keybindingResolver.getResolver();
 
 		const useShadowDOM = this._editor.getOption(EditorOption.useShadowDOM);
 
 
 		if (this.isCodeActionWidgetEnabled(model)) {
-			this._contextViewService.showContextView({
-				getAnchor: () => anchor,
-				render: (container: HTMLElement) => this.renderCodeActionMenuList(container, menuActions),
-				onHide: (didCancel) => {
-					const openedFromString = (options.fromLightbulb) ? CodeActionTriggerSource.Lightbulb : trigger.triggerAction;
-					this.codeActionTelemetry(openedFromString, didCancel, codeActions);
-					this._visible = false;
-					this._editor.focus();
-				},
-			},
-				this._editor.getDomNode()!, false,
-			);
+			this.showContextViewHelper(params, menuActions);
 		} else {
 			this._contextMenuService.showContextMenu({
 				domForShadowRoot: useShadowDOM ? this._editor.getDomNode()! : undefined,

src/vs/editor/contrib/codeAction/browser/media/action.css

@@ -19,7 +19,7 @@
 }
 
 .codeActionMenuWidget {
-	padding: 0px 1px 3px 0px;
+	padding: 0px 0px 3px 0px;
 	overflow: auto;
 	font-size: 13px;
 	border-radius: 0px;
@@ -69,8 +69,12 @@
 
 
 .codeActionMenuWidget .monaco-list .monaco-list-row:hover:not(.option-disabled),
-.codeActionMenuWidget .monaco-list .moncao-list-row.focused:not(.option-disabled) {
-	color: var(--vscode-menu-selectionForeground) !important;
+.codeActionMenuWidget .monaco-list .monaco-list-row.focused:not(.option-disabled) {
+	background-color: var(--vscode-list-hoverBackground) !important;
+}
+
+.codeActionMenuWidget .monaco-list .monaco-list-row.focused:not(.option-disabled)  {
+	outline: 0px solid !important;
 	background-color: var(--vscode-menu-selectionBackground) !important;
 }
 
@@ -134,3 +138,16 @@
 	color: var(--vscode-editorLightBulb-foreground);
 }
 
+.codeActionWidget-action-bar .action-label {
+	color: var(--vscode-textLink-activeForeground);
+	pointer-events: all;
+}
+
+.codeActionWidget-action-bar .action-item {
+	margin-right: 10px;
+	pointer-events: none;
+}
+
+.codeActionWidget-action-bar .action-label:hover {
+	background-color: transparent !important;
+}