Merge pull request microsoft#155974 from justschen/justin/CodeActionMenu-Widget

Code Action Widget to fit color themes (microsoft#155907 and microsoft#155892)

Author: justschen

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

@@ -90,7 +90,7 @@ export interface ICodeActionMenuTemplateData {
 }
 
 const TEMPLATE_ID = 'codeActionWidget';
-const codeActionLineHeight = 27;
+const codeActionLineHeight = 26;
 
 class CodeMenuRenderer implements IListRenderer<ICodeActionMenuItem, ICodeActionMenuTemplateData> {
 	get templateId(): string { return TEMPLATE_ID; }
@@ -222,6 +222,8 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		);
 
 		renderDisposables.add(this.codeActionList.value.onDidChangeSelection(e => this._onListSelection(e)));
+		renderDisposables.add(this._editor.onDidLayoutChange(e => this.hideCodeActionWidget()));
+
 
 		// Populating the list widget and tracking enabled options.
 		inputArray.forEach((item, index) => {
@@ -257,7 +259,7 @@ export class CodeActionMenu extends Disposable implements IEditorContribution {
 		const maxWidth = Math.max(...arr);
 
 		// 40 is the additional padding for the list widget (20 left, 20 right)
-		renderMenu.style.width = maxWidth + 40 + 'px';
+		renderMenu.style.width = maxWidth + 52 + 'px';
 		this.codeActionList.value?.layout(height, maxWidth);
 
 		// List selection

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

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 .codeActionMenuWidget {
-	padding: 10px 0px 10px 0px;
+	padding: 8px 0px 8px 0px;
 	overflow: auto;
 	font-size: 13px;
 	border-radius: 5px;
@@ -14,10 +14,10 @@
 	/* flex-direction: column;
 	flex: 0 1 auto; */
 	width: 100%;
-	border-style: solid;
-	border-width: 1px;
-	border-color: var(--vscode-editorSuggestWidget-border);
-	background-color: var(--vscode-editorSuggestWidget-background);
+	border-width: 0px;
+	border-color: none;
+	background-color: var(--vscode-menu-background);
+	color: var(--vscode-menu-foreground);
 }
 
 .codeActionMenuWidget .monaco-list:not(.element-focused):focus:before {
@@ -41,7 +41,6 @@
 	-ms-user-select: none;
 	border: none !important;
 	border-width: 0px !important;
-	color: var(red) !important;
 }
 
 /* .codeActionMenuWidget .monaco-list:not(.element-focus) {
@@ -62,7 +61,7 @@
 	display: flex;
 	-mox-box-sizing: border-box;
 	box-sizing: border-box;
-	padding: 0px 20px 0px 20px;
+	padding: 0px 26px 0px 26px;
 	background-repeat: no-repeat;
 	background-position: 2px 2px;
 	white-space: nowrap;
@@ -74,6 +73,7 @@
 
 .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;
 	background-color: var(--vscode-menu-selectionBackground) !important;
 }
 
@@ -86,7 +86,7 @@
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
-	color: var(--vscode-list-inactiveSelectionBackground) !important;
+	color: var(--vscode-disabledForeground) !important;
 }
 
 .codeActionMenuWidget .monaco-list .separator {