home indicator - add a product icon overlay

package.json

 {
   "name": "code-oss-dev",
   "version": "1.45.0",
-  "distro": "84d234f8633695a96e1f00c6497d0851d588acf9",
+  "distro": "2b65f8a42198f5bc470b28a01fe84ec8788e6adc",
   "author": {
     "name": "Microsoft Corporation"
   },

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

@@ -22,7 +22,7 @@ import { ActivityAction, ActivityActionViewItem, ICompositeBar, ICompositeBarCol
 import { ViewletDescriptor } from 'vs/workbench/browser/viewlet';
 import { Extensions as ActionExtensions, IWorkbenchActionRegistry } from 'vs/workbench/common/actions';
 import { IActivity } from 'vs/workbench/common/activity';
-import { ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND } from 'vs/workbench/common/theme';
+import { ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER, ACTIVITY_BAR_ACTIVE_BACKGROUND, ACTIVITY_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 import { IActivityBarService } from 'vs/workbench/services/activityBar/browser/activityBarService';
 import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/browser/layoutService';
 import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet';
@@ -362,35 +362,43 @@ export class HomeAction extends Action {
 }
 
 registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
+	const activityBarBackgroundColor = theme.getColor(ACTIVITY_BAR_BACKGROUND);
+	if (activityBarBackgroundColor) {
+		collector.addRule(`
+			.monaco-workbench .activitybar > .content > .home-bar > .home-bar-icon-badge {
+				background-color: ${activityBarBackgroundColor};
+			}
+		`);
+	}
 
-	const activeForegroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND);
-	if (activeForegroundColor) {
+	const activityBarForegroundColor = theme.getColor(ACTIVITY_BAR_FOREGROUND);
+	if (activityBarForegroundColor) {
 		collector.addRule(`
 			.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;
+				background-color: ${activityBarForegroundColor} !important;
 			}
 			.monaco-workbench .activitybar > .content .home-bar > .monaco-action-bar .action-item .action-label.codicon,
 			.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;
+				color: ${activityBarForegroundColor} !important;
 			}
 		`);
 	}
 
-	const activeBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BORDER);
-	if (activeBorderColor) {
+	const activityBarActiveBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BORDER);
+	if (activityBarActiveBorderColor) {
 		collector.addRule(`
 			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator:before {
-				border-left-color: ${activeBorderColor};
+				border-left-color: ${activityBarActiveBorderColor};
 			}
 		`);
 	}
 
-	const activeFocusBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_FOCUS_BORDER);
-	if (activeFocusBorderColor) {
+	const activityBarActiveFocusBorderColor = theme.getColor(ACTIVITY_BAR_ACTIVE_FOCUS_BORDER);
+	if (activityBarActiveFocusBorderColor) {
 		collector.addRule(`
 			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:focus::before {
 				visibility: hidden;
@@ -398,17 +406,17 @@ registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) =
 
 			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked:focus .active-item-indicator:before {
 				visibility: visible;
-				border-left-color: ${activeFocusBorderColor};
+				border-left-color: ${activityBarActiveFocusBorderColor};
 			}
 		`);
 	}
 
-	const activeBackgroundColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BACKGROUND);
-	if (activeBackgroundColor) {
+	const activityBarActiveBackgroundColor = theme.getColor(ACTIVITY_BAR_ACTIVE_BACKGROUND);
+	if (activityBarActiveBackgroundColor) {
 		collector.addRule(`
 			.monaco-workbench .activitybar > .content :not(.monaco-menu) > .monaco-action-bar .action-item.checked .active-item-indicator {
 				z-index: 0;
-				background-color: ${activeBackgroundColor};
+				background-color: ${activityBarActiveBackgroundColor};
 			}
 		`);
 	}

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

@@ -366,6 +366,10 @@ export class ActivitybarPart extends Part implements IActivityBarService {
 			animated: false
 		}));
 
+		const homeBarIconBadge = document.createElement('div');
+		addClass(homeBarIconBadge, 'home-bar-icon-badge');
+		this.homeBarContainer.appendChild(homeBarIconBadge);
+
 		this.homeBar.push(this._register(this.instantiationService.createInstance(HomeAction, command, title, icon)), { icon: true, label: false });
 
 		const content = assertIsDefined(this.content);

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

@@ -26,6 +26,7 @@
 /** Home Bar */
 
 .monaco-workbench .activitybar > .content > .home-bar {
+	position: relative;
 	width: 100%;
 	height: 48px;
 	display: flex;
@@ -34,6 +35,19 @@
 	order: -1;
 }
 
+.monaco-workbench .activitybar > .content > .home-bar > .home-bar-icon-badge {
+	position: absolute;
+	right: 10px;
+	bottom: 10px;
+	width: 16px;
+	height: 16px;
+	z-index: 1; /* on top of home indicator */
+	background-image: url('../../../media/code-icon.svg');
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: 16px;
+}
+
 /** Viewlet Switcher */
 
 .monaco-workbench .activitybar > .content .monaco-action-bar {

src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css

@@ -85,7 +85,7 @@
 	height: 100%;
 	position: relative;
 	z-index: 3000;
-	background-image: url('code-icon.svg');
+	background-image: url('../../../media/code-icon.svg');
 	background-repeat: no-repeat;
 	background-position: center center;
 	background-size: 16px;

src/vs/workbench/contrib/update/browser/media/code-icon.svg

-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><style>.st0{fill:#f6f6f6;fill-opacity:0}.st1{fill:#fff}.st2{fill:#167abf}</style><path class="st0" d="M1024 1024H0V0h1024v1024z"/><path class="st1" d="M1024 85.333v853.333H0V85.333h1024z"/><path class="st2" d="M0 85.333h298.667v853.333H0V85.333zm1024 0v853.333H384V85.333h640zm-554.667 160h341.333v-64H469.333v64zm341.334 533.334H469.333v64h341.333l.001-64zm128-149.334H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64z"/></svg>
\ No newline at end of file

src/vs/workbench/contrib/update/browser/releaseNotesEditor.ts

@@ -88,7 +88,7 @@ export class ReleaseNotesManager {
 			this._currentReleaseNotes.webview.onDidClickLink(uri => this.onDidClickLink(URI.parse(uri)));
 			this._currentReleaseNotes.onDispose(() => { this._currentReleaseNotes = undefined; });
 
-			const iconPath = URI.parse(require.toUrl('./media/code-icon.svg'));
+			const iconPath = URI.parse(require.toUrl('vs/workbench/browser/media/code-icon.svg'));
 			this._currentReleaseNotes.iconPath = {
 				light: iconPath,
 				dark: iconPath

src/vs/workbench/contrib/welcome/code-icon.svg

-<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><style>.st0{fill:#f6f6f6;fill-opacity:0}.st1{fill:#fff}.st2{fill:#167abf}</style><path class="st0" d="M1024 1024H0V0h1024v1024z"/><path class="st1" d="M1024 85.333v853.333H0V85.333h1024z"/><path class="st2" d="M0 85.333h298.667v853.333H0V85.333zm1024 0v853.333H384V85.333h640zm-554.667 160h341.333v-64H469.333v64zm341.334 533.334H469.333v64h341.333l.001-64zm128-149.334H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64zm0-149.333H597.333v64h341.333l.001-64z"/></svg>
\ No newline at end of file

src/vs/workbench/contrib/welcome/page/browser/welcomePage.css

@@ -220,7 +220,7 @@
 
 .file-icons-enabled .show-file-icons .vs_code_welcome_page-name-file-icon.file-icon::before {
 	content: ' ';
-	background-image: url('../../code-icon.svg');
+	background-image: url('../../../../browser/media/code-icon.svg');
 }
 
 .monaco-workbench .part.editor > .content .welcomePage .mac-only,

src/vs/workbench/contrib/welcome/walkThrough/browser/walkThroughPart.css

@@ -116,7 +116,7 @@
 
 .file-icons-enabled .show-file-icons .vs_code_editor_walkthrough\.md-name-file-icon.md-ext-file-icon.ext-file-icon.markdown-lang-file-icon.file-icon::before {
 	content: ' ';
-	background-image: url('../../code-icon.svg');
+	background-image: url('../../../../browser/media/code-icon.svg');
 }
 
 .monaco-workbench .part.editor > .content .walkThroughContent .mac-only,