Merge pull request #83113 from microsoft/misolori/icon-font-activitybar

Adopt icon font in activity bar

src/vs/base/browser/ui/codiconLabel/codicon/codicon.css

@@ -5,7 +5,7 @@
 
 @font-face {
 	font-family: "codicon";
-	src: url("./codicon.ttf?3a05fcfc657285cdb4cd3eba790b7462") format("truetype");
+	src: url("./codicon.ttf?297296ccad95f5838f73ae67efd78fbc") format("truetype");
 }
 
 .codicon[class*='codicon-'] {
@@ -309,75 +309,77 @@
 .codicon-references:before { content: "\f1a0" }
 .codicon-refresh:before { content: "\f1a1" }
 .codicon-regex:before { content: "\f1a2" }
-.codicon-remote:before { content: "\f1a3" }
-.codicon-remove:before { content: "\f1a4" }
-.codicon-replace-all:before { content: "\f1a5" }
-.codicon-replace:before { content: "\f1a6" }
-.codicon-repo-clone:before { content: "\f1a7" }
-.codicon-repo-force-push:before { content: "\f1a8" }
-.codicon-repo-pull:before { content: "\f1a9" }
-.codicon-repo-push:before { content: "\f1aa" }
-.codicon-report:before { content: "\f1ab" }
-.codicon-request-changes:before { content: "\f1ac" }
-.codicon-rocket:before { content: "\f1ad" }
-.codicon-root-folder-opened:before { content: "\f1ae" }
-.codicon-root-folder:before { content: "\f1af" }
-.codicon-rss:before { content: "\f1b0" }
-.codicon-ruby:before { content: "\f1b1" }
-.codicon-save-all:before { content: "\f1b2" }
-.codicon-save-as:before { content: "\f1b3" }
-.codicon-save:before { content: "\f1b4" }
-.codicon-screen-full:before { content: "\f1b5" }
-.codicon-screen-normal:before { content: "\f1b6" }
-.codicon-search-stop:before { content: "\f1b7" }
-.codicon-selection:before { content: "\f1b8" }
-.codicon-server:before { content: "\f1b9" }
-.codicon-settings:before { content: "\f1ba" }
-.codicon-shield:before { content: "\f1bb" }
-.codicon-smiley:before { content: "\f1bc" }
-.codicon-sort-precedence:before { content: "\f1bd" }
-.codicon-split-horizontal:before { content: "\f1be" }
-.codicon-split-vertical:before { content: "\f1bf" }
-.codicon-squirrel:before { content: "\f1c0" }
-.codicon-star-full:before { content: "\f1c1" }
-.codicon-star-half:before { content: "\f1c2" }
-.codicon-symbol-class:before { content: "\f1c3" }
-.codicon-symbol-color:before { content: "\f1c4" }
-.codicon-symbol-constant:before { content: "\f1c5" }
-.codicon-symbol-enum-member:before { content: "\f1c6" }
-.codicon-symbol-field:before { content: "\f1c7" }
-.codicon-symbol-file:before { content: "\f1c8" }
-.codicon-symbol-interface:before { content: "\f1c9" }
-.codicon-symbol-keyword:before { content: "\f1ca" }
-.codicon-symbol-misc:before { content: "\f1cb" }
-.codicon-symbol-operator:before { content: "\f1cc" }
-.codicon-symbol-property:before { content: "\f1cd" }
-.codicon-symbol-snippet:before { content: "\f1ce" }
-.codicon-tasklist:before { content: "\f1cf" }
-.codicon-telescope:before { content: "\f1d0" }
-.codicon-text-size:before { content: "\f1d1" }
-.codicon-three-bars:before { content: "\f1d2" }
-.codicon-thumbsdown:before { content: "\f1d3" }
-.codicon-thumbsup:before { content: "\f1d4" }
-.codicon-tools:before { content: "\f1d5" }
-.codicon-triangle-down:before { content: "\f1d6" }
-.codicon-triangle-left:before { content: "\f1d7" }
-.codicon-triangle-right:before { content: "\f1d8" }
-.codicon-triangle-up:before { content: "\f1d9" }
-.codicon-twitter:before { content: "\f1da" }
-.codicon-unfold:before { content: "\f1db" }
-.codicon-unlock:before { content: "\f1dc" }
-.codicon-unmute:before { content: "\f1dd" }
-.codicon-unverified:before { content: "\f1de" }
-.codicon-verified:before { content: "\f1df" }
-.codicon-versions:before { content: "\f1e0" }
-.codicon-vm-active:before { content: "\f1e1" }
-.codicon-vm-outline:before { content: "\f1e2" }
-.codicon-vm-running:before { content: "\f1e3" }
-.codicon-watch:before { content: "\f1e4" }
-.codicon-whitespace:before { content: "\f1e5" }
-.codicon-whole-word:before { content: "\f1e6" }
-.codicon-window:before { content: "\f1e7" }
-.codicon-word-wrap:before { content: "\f1e8" }
-.codicon-zoom-in:before { content: "\f1e9" }
-.codicon-zoom-out:before { content: "\f1ea" }
+.codicon-remote-explorer:before { content: "\f1a3" }
+.codicon-remote:before { content: "\f1a4" }
+.codicon-remove:before { content: "\f1a5" }
+.codicon-replace-all:before { content: "\f1a6" }
+.codicon-replace:before { content: "\f1a7" }
+.codicon-repo-clone:before { content: "\f1a8" }
+.codicon-repo-force-push:before { content: "\f1a9" }
+.codicon-repo-pull:before { content: "\f1aa" }
+.codicon-repo-push:before { content: "\f1ab" }
+.codicon-report:before { content: "\f1ac" }
+.codicon-request-changes:before { content: "\f1ad" }
+.codicon-rocket:before { content: "\f1ae" }
+.codicon-root-folder-opened:before { content: "\f1af" }
+.codicon-root-folder:before { content: "\f1b0" }
+.codicon-rss:before { content: "\f1b1" }
+.codicon-ruby:before { content: "\f1b2" }
+.codicon-save-all:before { content: "\f1b3" }
+.codicon-save-as:before { content: "\f1b4" }
+.codicon-save:before { content: "\f1b5" }
+.codicon-screen-full:before { content: "\f1b6" }
+.codicon-screen-normal:before { content: "\f1b7" }
+.codicon-search-stop:before { content: "\f1b8" }
+.codicon-selection:before { content: "\f1b9" }
+.codicon-server:before { content: "\f1ba" }
+.codicon-settings-gear:before { content: "\f1bb" }
+.codicon-settings:before { content: "\f1bc" }
+.codicon-shield:before { content: "\f1bd" }
+.codicon-smiley:before { content: "\f1be" }
+.codicon-sort-precedence:before { content: "\f1bf" }
+.codicon-split-horizontal:before { content: "\f1c0" }
+.codicon-split-vertical:before { content: "\f1c1" }
+.codicon-squirrel:before { content: "\f1c2" }
+.codicon-star-full:before { content: "\f1c3" }
+.codicon-star-half:before { content: "\f1c4" }
+.codicon-symbol-class:before { content: "\f1c5" }
+.codicon-symbol-color:before { content: "\f1c6" }
+.codicon-symbol-constant:before { content: "\f1c7" }
+.codicon-symbol-enum-member:before { content: "\f1c8" }
+.codicon-symbol-field:before { content: "\f1c9" }
+.codicon-symbol-file:before { content: "\f1ca" }
+.codicon-symbol-interface:before { content: "\f1cb" }
+.codicon-symbol-keyword:before { content: "\f1cc" }
+.codicon-symbol-misc:before { content: "\f1cd" }
+.codicon-symbol-operator:before { content: "\f1ce" }
+.codicon-symbol-property:before { content: "\f1cf" }
+.codicon-symbol-snippet:before { content: "\f1d0" }
+.codicon-tasklist:before { content: "\f1d1" }
+.codicon-telescope:before { content: "\f1d2" }
+.codicon-text-size:before { content: "\f1d3" }
+.codicon-three-bars:before { content: "\f1d4" }
+.codicon-thumbsdown:before { content: "\f1d5" }
+.codicon-thumbsup:before { content: "\f1d6" }
+.codicon-tools:before { content: "\f1d7" }
+.codicon-triangle-down:before { content: "\f1d8" }
+.codicon-triangle-left:before { content: "\f1d9" }
+.codicon-triangle-right:before { content: "\f1da" }
+.codicon-triangle-up:before { content: "\f1db" }
+.codicon-twitter:before { content: "\f1dc" }
+.codicon-unfold:before { content: "\f1dd" }
+.codicon-unlock:before { content: "\f1de" }
+.codicon-unmute:before { content: "\f1df" }
+.codicon-unverified:before { content: "\f1e0" }
+.codicon-verified:before { content: "\f1e1" }
+.codicon-versions:before { content: "\f1e2" }
+.codicon-vm-active:before { content: "\f1e3" }
+.codicon-vm-outline:before { content: "\f1e4" }
+.codicon-vm-running:before { content: "\f1e5" }
+.codicon-watch:before { content: "\f1e6" }
+.codicon-whitespace:before { content: "\f1e7" }
+.codicon-whole-word:before { content: "\f1e8" }
+.codicon-window:before { content: "\f1e9" }
+.codicon-word-wrap:before { content: "\f1ea" }
+.codicon-zoom-in:before { content: "\f1eb" }
+.codicon-zoom-out:before { content: "\f1ec" }

src/vs/workbench/browser/parts/activitybar/activitybarActions.ts

@@ -270,11 +270,16 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const activeForegroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND);
 	if (activeForegroundColor) {
 		collector.addRule(`
-			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label,
-			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label,
-			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label {
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label:not(.codicon),
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label:not(.codicon),
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label:not(.codicon) {
 				background-color: ${activeForegroundColor} !important;
 			}
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.active .action-label.codicon,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:focus .action-label.codicon,
+			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item:hover .action-label.codicon {
+				color: ${activeForegroundColor} !important;
+			}
 		`);
 	}
 

src/vs/workbench/browser/parts/activitybar/activitybarPart.ts

@@ -306,7 +306,7 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 		this.globalActivityAction = new ActivityAction({
 			id: 'workbench.actions.manage',
 			name: nls.localize('manage', "Manage"),
-			cssClass: 'update-activity'
+			cssClass: 'codicon-settings-gear'
 		});
 
 		this.globalActivityActionBar.push(this.globalActivityAction);

src/vs/workbench/browser/parts/activitybar/media/activityaction.css

@@ -8,18 +8,27 @@
 	position: relative;
 	padding: 5px 0;
 }
-
 .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label {
 	position: relative;
 	z-index: 1;
 	display: flex;
 	overflow: hidden;
 	height: 40px;
-	line-height: 40px;
 	margin-right: 0;
-	padding: 0 0 0 48px;
 	box-sizing: border-box;
+
+}
+
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label:not(.codicon) {
 	font-size: 15px;
+	line-height: 40px;
+	padding: 0 0 0 48px;
+}
+
+.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-label.codicon {
+	font-size: 24px;
+	align-items: center;
+	justify-content: center;
 }
 
 .monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator:before,
@@ -102,7 +111,7 @@
 
 /* Right aligned */
 
-.monaco-workbench .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .action-label {
+.monaco-workbench .activitybar.right > .content :not(.monaco-menu) > .monaco-action-bar .action-label:not(.codicon) {
 	margin-left: 0;
 	padding: 0 50px 0 0;
 	background-position: calc(100% - 9px) center;

src/vs/workbench/browser/parts/compositeBarActions.ts

@@ -158,7 +158,16 @@ export class ActivityActionViewItem extends BaseActionViewItem {
 		if (this.label) {
 			if (this.options.icon) {
 				const foreground = this._action.checked ? colors.activeBackgroundColor || colors.activeForegroundColor : colors.inactiveBackgroundColor || colors.inactiveForegroundColor;
-				this.label.style.backgroundColor = foreground ? foreground.toString() : '';
+				// TODO @misolori find a cleaner way to do this
+				const isExtension = this.activity.cssClass?.indexOf('extensionViewlet') === 0;
+				if (!isExtension) {
+					// Apply foreground color to activity bar items (codicons)
+					this.label.style.color = foreground ? foreground.toString() : '';
+				} else {
+					// Apply background color to extensions + remote explorer (svgs)
+
+					this.label.style.backgroundColor = foreground ? foreground.toString() : '';
+				}
 			} else {
 				const foreground = this._action.checked ? colors.activeForegroundColor : colors.inactiveForegroundColor;
 				const borderBottomColor = this._action.checked ? colors.activeBorderBottomColor : null;
@@ -310,6 +319,12 @@ export class ActivityActionViewItem extends BaseActionViewItem {
 		this.label.className = 'action-label';
 
 		if (this.activity.cssClass) {
+			// TODO @misolori find a cleaner way to do this
+			const isExtension = this.activity.cssClass?.indexOf('extensionViewlet') === 0;
+			if (this.options.icon && !isExtension) {
+				// Only apply icon class to activity bar items (exclude extensions + remote explorer)
+				dom.addClass(this.label, 'codicon');
+			}
 			dom.addClass(this.label, this.activity.cssClass);
 		}
 
@@ -346,7 +361,7 @@ export class CompositeOverflowActivityAction extends ActivityAction {
 		super({
 			id: 'additionalComposites.action',
 			name: nls.localize('additionalViews', "Additional Views"),
-			cssClass: 'toggle-more'
+			cssClass: 'codicon-more'
 		});
 	}
 

src/vs/workbench/contrib/debug/browser/debug.contribution.ts

@@ -84,7 +84,7 @@ Registry.as<ViewletRegistry>(ViewletExtensions.Viewlets).registerViewlet(new Vie
 	DebugViewlet,
 	VIEWLET_ID,
 	nls.localize('debug', "Debug"),
-	'debug',
+	'codicon-debug',
 	3
 ));
 

src/vs/workbench/contrib/debug/browser/media/debug.contribution.css

@@ -4,10 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 /* Activity Bar */
-.monaco-workbench .activitybar .monaco-action-bar .action-label.debug {
-	-webkit-mask: url('debug-activity-bar.svg') no-repeat 50% 50%;
-}
-
 .monaco-editor .debug-top-stack-frame-column::before {
 	background: url('current-arrow.svg') center center no-repeat;
 }

src/vs/workbench/contrib/extensions/browser/extensions.contribution.ts

@@ -3,7 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./media/extensions';
 import { localize } from 'vs/nls';
 import { KeyMod, KeyChord, KeyCode } from 'vs/base/common/keyCodes';
 import { Registry } from 'vs/platform/registry/common/platform';
@@ -81,7 +80,7 @@ const viewletDescriptor = new ViewletDescriptor(
 	ExtensionsViewlet,
 	VIEWLET_ID,
 	localize('extensions', "Extensions"),
-	'extensions',
+	'codicon-extensions',
 	4
 );
 

src/vs/workbench/contrib/files/browser/files.contribution.ts

@@ -77,7 +77,7 @@ Registry.as<ViewletRegistry>(ViewletExtensions.Viewlets).registerViewlet(new Vie
 	ExplorerViewlet,
 	VIEWLET_ID,
 	nls.localize('explore', "Explorer"),
-	'explore',
+	'codicon-files',
 	0
 ));
 

src/vs/workbench/contrib/files/browser/media/explorerviewlet.css

@@ -3,11 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-/* Activity Bar */
-.monaco-workbench .activitybar .monaco-action-bar .action-label.explore {
-	-webkit-mask: url('files-activity-bar.svg') no-repeat 50% 50%;
-}
-
 /* --- Explorer viewlet --- */
 .explorer-viewlet,
 .explorer-folders-view {

src/vs/workbench/contrib/remote/browser/remote.ts

@@ -461,7 +461,7 @@ Registry.as<ViewletRegistry>(ViewletExtensions.Viewlets).registerViewlet(new Vie
 	RemoteViewlet,
 	VIEWLET_ID,
 	nls.localize('remote.explorer', "Remote Explorer"),
-	'remote',
+	'codicon-remote-explorer',
 	4
 ));
 

src/vs/workbench/contrib/remote/browser/remoteViewlet.css

@@ -3,10 +3,6 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-workbench .activitybar>.content .monaco-action-bar .action-label.remote {
-	-webkit-mask: url('remote-activity-bar.svg') no-repeat 50% 50%;
-}
-
 .remote-help-content .monaco-list .monaco-list-row .remote-help-tree-node-item {
 	display: flex;
 	height: 22px;