CompositeBar: badges

src/vs/workbench/browser/parts/panel/media/panelpart.css

@@ -49,8 +49,8 @@
 
 .monaco-workbench > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .action-item .action-label {
 	text-transform: uppercase;
-	margin-left: 16px;
-	margin-right: 16px;
+	margin-left: 12px;
+	margin-right: 20px;
 	font-size: 11px;
 	padding-bottom: 4px; /* puts the bottom border down */
 }
@@ -59,6 +59,18 @@
 	border-bottom: 1px solid;
 }
 
+.monaco-workbench  > .part.panel > .title > .panel-switcher-container > .monaco-action-bar .badge .badge-content {
+	top: 8px;
+	right: 0px;
+	position: absolute;
+	font-size: 11px;
+	min-width: 6px;
+	line-height: 18px;
+	padding: 0 5px;
+	border-radius: 20px;
+	text-align: center;
+}
+
 /** Actions */
 
 .monaco-workbench .panel .monaco-action-bar .action-item.select-container {

src/vs/workbench/browser/parts/panel/panelPart.ts

@@ -24,8 +24,8 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { ClosePanelAction, ToggleMaximizedPanelAction, PanelActivityAction, OpenPanelAction } from 'vs/workbench/browser/parts/panel/panelActions';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_BADGE_BACKGROUND, PANEL_BADGE_FOREGROUND, PANEL_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
-import { activeContrastBorder, focusBorder, contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry';
+import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
+import { activeContrastBorder, focusBorder, contrastBorder, editorBackground, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
 import { CompositeBar } from 'vs/workbench/browser/parts/compositebar/compositeBar';
 import { ToggleCompositePinnedAction } from 'vs/workbench/browser/parts/compositebar/compositeBarActions';
 import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
@@ -86,8 +86,8 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 			hidePart: () => this.partService.setPanelHidden(true),
 			colors: {
 				backgroundColor: PANEL_BACKGROUND,
-				badgeBackground: PANEL_BADGE_BACKGROUND,
-				badgeForeground: PANEL_BADGE_FOREGROUND,
+				badgeBackground,
+				badgeForeground,
 				dragAndDropBackground: PANEL_DRAG_AND_DROP_BACKGROUND
 			}
 		});

src/vs/workbench/common/theme.ts

@@ -114,18 +114,6 @@ const DRAG_AND_DROP_BACKGROUND = {
 	hc: Color.white.transparent(0.12),
 };
 
-const BADGE_BACKGROUND = {
-	dark: '#007ACC',
-	light: '#007ACC',
-	hc: '#000000'
-};
-
-const BADGE_FOREGROUND = {
-	dark: Color.white,
-	light: Color.white,
-	hc: Color.white
-};
-
 export const PANEL_BACKGROUND = registerColor('panel.background', {
 	dark: editorBackground,
 	light: editorBackground,
@@ -158,11 +146,6 @@ export const PANEL_ACTIVE_TITLE_BORDER = registerColor('panelTitle.activeBorder'
 
 export const PANEL_DRAG_AND_DROP_BACKGROUND = registerColor('panel.dropBackground', DRAG_AND_DROP_BACKGROUND, nls.localize('panelDragAndDropBackground', "Drag and drop feedback color for the panel title items. The color should have transparency so that the panel entries can still shine through. Panels are shown below the editor area and contain views like output and integrated terminal."));
 
-export const PANEL_BADGE_BACKGROUND = registerColor('panelBadge.background', BADGE_BACKGROUND, nls.localize('panelBadgeBackground', "Activity notification badge background color. Panels are shown below the editor area and contain views like output and integrated terminal."));
-
-export const PANEL_BADGE_FOREGROUND = registerColor('panelBadge.foreground', BADGE_FOREGROUND, nls.localize('panelBadgeForeground', "Activity notification badge foreground color. Panels are shown below the editor area and contain views like output and integrated terminal."));
-
-
 
 // < --- Status --- >
 
@@ -251,9 +234,17 @@ export const ACTIVITY_BAR_BORDER = registerColor('activityBar.border', {
 
 export const ACTIVITY_BAR_DRAG_AND_DROP_BACKGROUND = registerColor('activityBar.dropBackground', DRAG_AND_DROP_BACKGROUND, nls.localize('activityBarDragAndDropBackground', "Drag and drop feedback color for the activity bar items. The color should have transparency so that the activity bar entries can still shine through. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
 
-export const ACTIVITY_BAR_BADGE_BACKGROUND = registerColor('activityBarBadge.background', BADGE_BACKGROUND, nls.localize('activityBarBadgeBackground', "Activity notification badge background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
+export const ACTIVITY_BAR_BADGE_BACKGROUND = registerColor('activityBarBadge.background', {
+	dark: '#007ACC',
+	light: '#007ACC',
+	hc: '#000000'
+}, nls.localize('activityBarBadgeBackground', "Activity notification badge background color. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
 
-export const ACTIVITY_BAR_BADGE_FOREGROUND = registerColor('activityBarBadge.foreground', BADGE_FOREGROUND, nls.localize('activityBarBadgeForeground', "Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
+export const ACTIVITY_BAR_BADGE_FOREGROUND = registerColor('activityBarBadge.foreground', {
+	dark: Color.white,
+	light: Color.white,
+	hc: Color.white
+}, nls.localize('activityBarBadgeForeground', "Activity notification badge foreground color. The activity bar is showing on the far left or right and allows to switch between views of the side bar."));
 
 
 // < --- Side Bar --- >