Add support for separators in the action widget (microsoft#257144)

* Add support for separators in the action widget

* add a little padding, no more importants

* there were two more importants that we didn't need there because we made the specificity more specific

---------

Co-authored-by: Justin Chen <54879025+justschen@users.noreply.github.com>
Co-authored-by: Your Name <justchen@microsoft.com>

Author: lramos15

src/vs/platform/actionWidget/browser/actionList.ts

@@ -53,7 +53,8 @@ interface IActionMenuTemplateData {
 
 export const enum ActionListItemKind {
 	Action = 'action',
-	Header = 'header'
+	Header = 'header',
+	Separator = 'separator'
 }
 
 interface IHeaderTemplateData {
@@ -83,6 +84,33 @@ class HeaderRenderer<T> implements IListRenderer<IActionListItem<T>, IHeaderTemp
 	}
 }
 
+interface ISeparatorTemplateData {
+	readonly container: HTMLElement;
+	readonly text: HTMLElement;
+}
+
+class SeparatorRenderer<T> implements IListRenderer<IActionListItem<T>, ISeparatorTemplateData> {
+
+	get templateId(): string { return ActionListItemKind.Separator; }
+
+	renderTemplate(container: HTMLElement): ISeparatorTemplateData {
+		container.classList.add('separator');
+
+		const text = document.createElement('span');
+		container.append(text);
+
+		return { container, text };
+	}
+
+	renderElement(element: IActionListItem<T>, _index: number, templateData: ISeparatorTemplateData): void {
+		templateData.text.textContent = element.label ?? '';
+	}
+
+	disposeTemplate(_templateData: ISeparatorTemplateData): void {
+		// noop
+	}
+}
+
 class ActionItemRenderer<T> implements IListRenderer<IActionListItem<T>, IActionMenuTemplateData> {
 
 	get templateId(): string { return ActionListItemKind.Action; }
@@ -176,7 +204,7 @@ class PreviewSelectedEvent extends UIEvent {
 }
 
 function getKeyboardNavigationLabel<T>(item: IActionListItem<T>): string | undefined {
-	// Filter out header vs. action
+	// Filter out header vs. action vs. separator
 	if (item.kind === 'action') {
 		return item.label;
 	}
@@ -191,6 +219,7 @@ export class ActionList<T> extends Disposable {
 
 	private readonly _actionLineHeight = 24;
 	private readonly _headerLineHeight = 26;
+	private readonly _separatorLineHeight = 8;
 
 	private readonly _allMenuItems: readonly IActionListItem<T>[];
 
@@ -210,14 +239,24 @@ export class ActionList<T> extends Disposable {
 		this.domNode = document.createElement('div');
 		this.domNode.classList.add('actionList');
 		const virtualDelegate: IListVirtualDelegate<IActionListItem<T>> = {
-			getHeight: element => element.kind === ActionListItemKind.Header ? this._headerLineHeight : this._actionLineHeight,
+			getHeight: element => {
+				switch (element.kind) {
+					case ActionListItemKind.Header:
+						return this._headerLineHeight;
+					case ActionListItemKind.Separator:
+						return this._separatorLineHeight;
+					default:
+						return this._actionLineHeight;
+				}
+			},
 			getTemplateId: element => element.kind
 		};
 
 
 		this._list = this._register(new List(user, this.domNode, virtualDelegate, [
 			new ActionItemRenderer<IActionListItem<T>>(preview, this._keybindingService),
 			new HeaderRenderer(),
+			new SeparatorRenderer(),
 		], {
 			keyboardSupport: false,
 			typeNavigationEnabled: true,
@@ -234,7 +273,16 @@ export class ActionList<T> extends Disposable {
 					return null;
 				},
 				getWidgetAriaLabel: () => localize({ key: 'customQuickFixWidget', comment: [`An action widget option`] }, "Action Widget"),
-				getRole: (e) => e.kind === ActionListItemKind.Action ? 'option' : 'separator',
+				getRole: (e) => {
+					switch (e.kind) {
+						case ActionListItemKind.Action:
+							return 'option';
+						case ActionListItemKind.Separator:
+							return 'separator';
+						default:
+							return 'separator';
+					}
+				},
 				getWidgetRole: () => 'listbox',
 				...accessibilityProvider
 			},
@@ -268,9 +316,11 @@ export class ActionList<T> extends Disposable {
 	layout(minWidth: number): number {
 		// Updating list height, depending on how many separators and headers there are.
 		const numHeaders = this._allMenuItems.filter(item => item.kind === 'header').length;
+		const numSeparators = this._allMenuItems.filter(item => item.kind === 'separator').length;
 		const itemsHeight = this._allMenuItems.length * this._actionLineHeight;
 		const heightWithHeaders = itemsHeight + numHeaders * this._headerLineHeight - numHeaders * this._actionLineHeight;
-		this._list.layout(heightWithHeaders);
+		const heightWithSeparators = heightWithHeaders + numSeparators * this._separatorLineHeight - numSeparators * this._actionLineHeight;
+		this._list.layout(heightWithSeparators);
 		let maxWidth = minWidth;
 
 		if (this._allMenuItems.length >= 50) {
@@ -293,7 +343,7 @@ export class ActionList<T> extends Disposable {
 		}
 
 		const maxVhPrecentage = 0.7;
-		const height = Math.min(heightWithHeaders, this._layoutService.getContainer(dom.getWindow(this.domNode)).clientHeight * maxVhPrecentage);
+		const height = Math.min(heightWithSeparators, this._layoutService.getContainer(dom.getWindow(this.domNode)).clientHeight * maxVhPrecentage);
 		this._list.layout(height, maxWidth);
 
 		this.domNode.style.height = `${height}px`;

src/vs/platform/actionWidget/browser/actionWidget.css

@@ -56,7 +56,7 @@
 
 /** Styles for each row in the list element **/
 .action-widget .monaco-list .monaco-list-row {
-	padding: 0 10px;
+	padding: 0 0 0 8px;
 	white-space: nowrap;
 	cursor: pointer;
 	touch-action: none;
@@ -81,6 +81,28 @@
 	margin-top: 2px;
 }
 
+.action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator {
+	border-top: 1px solid var(--vscode-editorHoverWidget-border);
+	color: var(--vscode-descriptionForeground);
+	font-size: 12px;
+	padding: 0;
+	margin: 4px 0 0 0;
+	cursor: default;
+	user-select: none;
+	border-radius: 0;
+}
+
+.action-widget .monaco-scrollable-element .monaco-list-rows .monaco-list-row.separator.focused {
+	outline: 0 solid;
+	background-color: transparent;
+	border-radius: 0;
+}
+
+.action-widget .monaco-list-row.separator:first-of-type {
+	border-top: none;
+	margin-top: 0;
+}
+
 .action-widget .monaco-list .group-header,
 .action-widget .monaco-list .option-disabled,
 .action-widget .monaco-list .option-disabled:before,

src/vs/platform/actionWidget/browser/actionWidgetDropdown.ts

@@ -73,18 +73,9 @@ export class ActionWidgetDropdown extends BaseDropdown {
 				return aOrder - bOrder;
 			});
 
-		for (const [categoryLabel, categoryActions] of sortedCategories) {
+		for (let i = 0; i < sortedCategories.length; i++) {
+			const [, categoryActions] = sortedCategories[i];
 
-			if (categoryLabel !== '') {
-				// Push headers for each category
-				actionWidgetItems.push({
-					label: categoryLabel,
-					kind: ActionListItemKind.Header,
-					canPreview: false,
-					disabled: false,
-					hideIcon: false,
-				});
-			}
 			// Push actions for each category
 			for (const action of categoryActions) {
 				actionWidgetItems.push({
@@ -102,6 +93,17 @@ export class ActionWidgetDropdown extends BaseDropdown {
 						undefined,
 				});
 			}
+
+			// Add separator at the end of each category except the last one
+			if (i < sortedCategories.length - 1) {
+				actionWidgetItems.push({
+					label: '',
+					kind: ActionListItemKind.Separator,
+					canPreview: false,
+					disabled: false,
+					hideIcon: false,
+				});
+			}
 		}
 
 		const previouslyFocusedElement = getActiveElement();
@@ -131,7 +133,16 @@ export class ActionWidgetDropdown extends BaseDropdown {
 			isChecked(element) {
 				return element.kind === ActionListItemKind.Action && !!element?.item?.checked;
 			},
-			getRole: (e) => e.kind === ActionListItemKind.Action ? 'menuitemcheckbox' : 'separator',
+			getRole: (e) => {
+				switch (e.kind) {
+					case ActionListItemKind.Action:
+						return 'menuitemcheckbox';
+					case ActionListItemKind.Separator:
+						return 'separator';
+					default:
+						return 'separator';
+				}
+			},
 			getWidgetRole: () => 'menu',
 		};