Manage Packages icon position fix (#14528)

* Added CSS to treat manage packages icon position.

* Wired up a rough concept showing how I propose to pass a masked-icon class, along with the icon name - derived from the action icon path - to the injected action prior to rendering. The end result is an injected action with an icon which behaves like the others in the notebook toolbar.

* Revert "Added CSS to treat manage packages icon position."

This reverts commit 215a67244a78224fe8fd2e6480b7e50d37a15dc0.

* Revert "Wired up a rough concept showing how I propose to pass a masked-icon class, along with the icon name - derived from the action icon path - to the injected action prior to rendering. The end result is an injected action with an icon which behaves like the others in the notebook toolbar."

This reverts commit 1e0cf116602192aa554334d564e855167b0e8bb6.

* Modified LabeledMenuItemActionItem to add masked-icon class to injected label element.

* Modified LabeledMenuItemActionItem to add masked-icon class and styles for injected label element.

* To prevent conflict with Dashboard, I duplicated the existing LabelMenuItemActionItem and odified it.

* Added comment to new method. Added non-prefixed mask-image style.

* Renamed method and modified comments.

src/sql/workbench/contrib/notebook/browser/notebook.component.ts

@@ -41,7 +41,7 @@ import { createErrorWithActions } from 'vs/base/common/errorsWithActions';
 import { toErrorMessage } from 'vs/base/common/errorMessage';
 import { ILogService } from 'vs/platform/log/common/log';
 import { ITextFileService } from 'vs/workbench/services/textfile/common/textfiles';
-import { LabeledMenuItemActionItem, fillInActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
+import { MaskedLabeledMenuItemActionItem, fillInActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { isUndefinedOrNull } from 'vs/base/common/types';
 import { IBootstrapParams } from 'sql/workbench/services/bootstrap/common/bootstrapParams';
@@ -509,7 +509,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 				action.tooltip = action.label;
 				action.label = '';
 			}
-			return new LabeledMenuItemActionItem(action, this.keybindingService, this.notificationService);
+			return new MaskedLabeledMenuItemActionItem(action, this.keybindingService, this.notificationService);
 		}
 		return undefined;
 	}

src/vs/platform/actions/browser/menuEntryActionViewItem.ts

@@ -313,4 +313,78 @@ export class LabeledMenuItemActionItem extends MenuEntryActionViewItem {
 		super.dispose();
 	}
 }
+
+/**
+ * This is a duplicate of LabeledMenuItemActionItem with the following exceptions:
+ * - Adds CSS class: `masked-icon` to contributed actions label element.
+ * - Adds style rule for masked-icon.
+ */
+export class MaskedLabeledMenuItemActionItem extends MenuEntryActionViewItem {
+	private _labeledItemClassDispose?: IDisposable;
+
+	constructor(
+		public _action: MenuItemAction,
+		@IKeybindingService labeledkeybindingService: IKeybindingService,
+		@INotificationService protected _notificationService: INotificationService,
+		private readonly _defaultCSSClassToAdd: string = ''
+	) {
+		super(_action, labeledkeybindingService, _notificationService);
+	}
+
+	updateLabel(): void {
+		if (this.label) {
+			this.label.innerText = this._commandAction.label;
+		}
+	}
+
+	// Overwrite item class to ensure that we can pass in a CSS class that other items use
+	// Leverages the _defaultCSSClassToAdd property that's passed into the constructor
+	protected _updateItemClass(item: ICommandAction): void {
+		dispose(this._labeledItemClassDispose);
+		this._labeledItemClassDispose = undefined;
+
+		if (ThemeIcon.isThemeIcon(item.icon)) {
+			// TODO
+		} else if (item.icon) {
+			let iconClass: string;
+
+
+			if (item.icon?.dark?.scheme) {
+				const iconPathMapKey = item.icon.dark.toString();
+
+				if (ICON_PATH_TO_CSS_RULES.has(iconPathMapKey)) {
+					iconClass = ICON_PATH_TO_CSS_RULES.get(iconPathMapKey)!;
+				} else {
+					iconClass = ids.nextId();
+					createCSSRule(`.codicon.masked-icon.${iconClass}::before`, `-webkit-mask-image: ${asCSSUrl(item.icon.light || item.icon.dark)}`);
+					createCSSRule(`.codicon.masked-icon.${iconClass}::before`, `mask-image: ${asCSSUrl(item.icon.light || item.icon.dark)}`);
+					ICON_PATH_TO_CSS_RULES.set(iconPathMapKey, iconClass);
+				}
+
+				if (this.label) {
+					const iconClasses = iconClass.split(' ');
+					if (this._defaultCSSClassToAdd) {
+						iconClasses.push(this._defaultCSSClassToAdd);
+					}
+					this.label.classList.add('codicon', ...iconClasses);
+					this.label.classList.add('masked-icon', ...iconClasses);
+					this._labeledItemClassDispose = toDisposable(() => {
+						if (this.label) {
+							this.label.classList.remove('codicon', ...iconClasses);
+						}
+					});
+				}
+			}
+		}
+	}
+
+	dispose(): void {
+		if (this._labeledItemClassDispose) {
+			dispose(this._labeledItemClassDispose);
+			this._labeledItemClassDispose = undefined;
+		}
+
+		super.dispose();
+	}
+}
 // {{SQL CARBON EDIT}} - End