Sbatten/check menu items (#56179)

* fixes #52929

* add high contrast default

* fix theming for selected item

src/vs/base/browser/ui/menu/check.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-2 -2 16 16" enable-background="new -2 -2 16 16"><polygon fill="#424242" points="9,0 4.5,9 3,6 0,6 3,12 6,12 12,0"/></svg>
\ No newline at end of file

src/vs/base/browser/ui/menu/menu.css

@@ -97,8 +97,18 @@
 	color: inherit;
 }
 
-.monaco-menu .monaco-action-bar.vertical .action-label.checked:after {
-	content: '  \2713';
+.monaco-menu .monaco-action-bar.vertical .menu-item-check {
+	position: absolute;
+	visibility: hidden;
+	background-color: #646465;
+	-webkit-mask: url('check.svg') no-repeat 50% 56%/15px 15px;
+	mask: url('check.svg') no-repeat 50% 56%/15px 15px;
+	width: 1em;
+	height: 100%;
+}
+
+.monaco-menu .monaco-action-bar.vertical .action-menu-item.checked .menu-item-check {
+	visibility: visible;
 }
 
 /* Context Menu */
@@ -149,4 +159,8 @@
 .hc-black .monaco-menu .monaco-action-bar.vertical .action-item.focused {
 	background: none;
 	border: 1px dotted #f38518;
+}
+
+.hc-black .monaco-menu .monaco-action-bar.vertical .menu-item-check {
+	background-color: white;
 }
\ No newline at end of file

src/vs/base/browser/ui/menu/menu.ts

@@ -117,6 +117,7 @@ class MenuActionItem extends BaseActionItem {
 
 	protected $e: Builder;
 	protected $label: Builder;
+	protected $check: Builder;
 	protected options: IActionItemOptions;
 	private cssClass: string;
 
@@ -141,6 +142,7 @@ class MenuActionItem extends BaseActionItem {
 			this.$e.attr({ role: 'menuitem' });
 		}
 
+		this.$check = $('span.menu-item-check').appendTo(this.$e);
 		this.$label = $('span.action-label').appendTo(this.$e);
 
 		if (this.options.label && this.options.keybinding) {
@@ -231,9 +233,9 @@ class MenuActionItem extends BaseActionItem {
 
 	public _updateChecked(): void {
 		if (this.getAction().checked) {
-			this.$label.addClass('checked');
+			this.$e.addClass('checked');
 		} else {
-			this.$label.removeClass('checked');
+			this.$e.removeClass('checked');
 		}
 	}
 }

src/vs/workbench/browser/parts/titlebar/menubarControl.ts

@@ -1119,6 +1119,10 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 			.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item {
 				color: ${menuFgColor};
 			}
+
+			.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item .action-menu-item .menu-item-check {
+				background-color: ${menuFgColor};
+			}
 		`);
 	}
 
@@ -1137,6 +1141,10 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused {
 				color: ${selectedMenuItemFgColor};
 			}
+
+		.monaco-shell .monaco-menu .monaco-action-bar.vertical .action-item.focused .action-menu-item .menu-item-check {
+			background-color: ${selectedMenuItemFgColor};
+		}
 		`);
 	}
 

src/vs/workbench/electron-browser/media/shell.css

@@ -81,7 +81,12 @@
 .monaco-shell .monaco-menu .monaco-action-bar.vertical .action-label:not(.separator),
 .monaco-shell .monaco-menu .monaco-action-bar.vertical .keybinding {
 	font-size: inherit;
-	padding: 0 1.5em;
+	padding: 0 2em;
+}
+
+.monaco-shell .monaco-menu .monaco-action-bar.vertical .menu-item-check {
+	font-size: inherit;
+	width: 2em;
 }
 
 .monaco-shell .monaco-menu .monaco-action-bar.vertical .action-label.separator {