Code action widget style fixes and fix #158030

* added disabled hover

* code cleanup on disabled option hovers

* removed comments

* widget enabled by default

* code cleanup and fix on build

* clean up on css removed unused importants

* small patch for css rules

* minor refactor on codeactionitems

* fix on disabled option click

* fix on disabled option click

* added some icons but just temp

* added iconws and modified widget look

* added beginning logic for menu groupings

* looks pretty good for a menu wooo

* added headers to menu + removed extra text from option labels

* minor code cleanup on group filtering

* Refactoring on code action kind

* changed styling based on feedback

* code cleanup

* First couple of fixes on PR for code action kinds

* modified icons and refactoring

* removed extra push

* removed parsing and added code action kind for surround

* minor style fixes and fix on border

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

@@ -175,7 +175,9 @@ class CodeMenuRenderer implements IListRenderer<ICodeActionMenuItem, ICodeAction
 					} else {
 						const updateLabel = () => {
 							const [accept, preview] = this.acceptKeybindings;
-							data.root.title = localize({ key: 'label', comment: ['placeholders are keybindings, e.g "F2 to Refactor, Shift+F2 to Preview"'] }, "{0} to Refactor, {1} to Preview", this.keybindingService.lookupKeybinding(accept)?.getLabel(), this.keybindingService.lookupKeybinding(preview)?.getLabel());
+
+							data.root.title = localize({ key: 'label', comment: ['placeholders are keybindings, e.g "F2 to Apply, Shift+F2 to Preview"'] }, "{0} to Apply, {1} to Preview", this.keybindingService.lookupKeybinding(accept)?.getLabel(), this.keybindingService.lookupKeybinding(preview)?.getLabel());
+
 						};
 						updateLabel();
 					}
@@ -404,15 +406,16 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 			if (entry.length > 0 && entry[0] instanceof CodeActionAction) {
 				const firstAction = entry[0].action.kind;
 				if (CodeActionKind.SurroundWith.contains(new CodeActionKind(String(firstAction)))) {
-					menuEntriesToPush(localize('codeAction.widget.id.surround', 'Surround With ...'), entry);
+					menuEntriesToPush(localize('codeAction.widget.id.surround', 'Surround With...'), entry);
 				} else if (CodeActionKind.QuickFix.contains(new CodeActionKind(String(firstAction)))) {
-					menuEntriesToPush(localize('codeAction.widget.id.quickfix', 'Quick Fix ...'), entry);
+					menuEntriesToPush(localize('codeAction.widget.id.quickfix', 'Quick Fix...'), entry);
 				} else if (CodeActionKind.Extract.contains(new CodeActionKind(String(firstAction)))) {
-					menuEntriesToPush(localize('codeAction.widget.id.extract', 'Extract ...'), entry);
+					menuEntriesToPush(localize('codeAction.widget.id.extract', 'Extract...'), entry);
 				} else if (CodeActionKind.Convert.contains(new CodeActionKind(String(firstAction)))) {
-					menuEntriesToPush(localize('codeAction.widget.id.convert', 'Convert ...'), entry);
+					menuEntriesToPush(localize('codeAction.widget.id.convert', 'Convert...'), entry);
 				} else if (CodeActionKind.Source.contains(new CodeActionKind(String(firstAction)))) {
-					menuEntriesToPush(localize('codeAction.widget.id.source', 'Source Action ...'), entry);
+					menuEntriesToPush(localize('codeAction.widget.id.source', 'Source Action...'), entry);
+
 				} else if (firstAction === CodeActionMenu.documentationID) {
 					totalActionEntries.push(...entry);
 				}

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

@@ -3,6 +3,21 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+.codeActionMenuWidget .monaco-list:not(.element-focused):focus:before {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 5; /* make sure we are on top of the tree items */
+	content: "";
+	pointer-events: none; /* enable click through */
+	outline: 0px solid !important; /* we still need to handle the empty tree or no focus item case */
+	outline-width: 0px !important;
+	outline-style: none;
+	outline-offset: 0px;
+}
+
 .codeActionMenuWidget {
 	padding: 0px 1px 3px 0px;
 	overflow: auto;
@@ -14,27 +29,13 @@
 	/* flex-direction: column;
 	flex: 0 1 auto; */
 	width: 100%;
-	border: 1px solid var(--vscode-menu-separatorBackground);
+	border: 1px solid var(--vscode-menu-separatorBackground) !important;
 	border-color: none;
 	background-color: var(--vscode-menu-background);
 	color: var(--vscode-menu-foreground);
 	box-shadow: rgb(0,0,0, 16%) 0px 2px 8px;
 }
 
-.codeActionMenuWidget .monaco-list:not(.element-focused):focus:before {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 5; /* make sure we are on top of the tree items */
-	content: "";
-	pointer-events: none; /* enable click through */
-	outline: 0px solid !important; /* we still need to handle the empty tree or no focus item case */
-	outline-width: 0px !important;
-	outline-style: none;
-	outline-offset: 0px;
-}
 
 .codeActionMenuWidget .monaco-list {
 	user-select: none;