add active selection styles

src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts

@@ -45,7 +45,9 @@ export class SimpleBreadcrumbsItem extends BreadcrumbsItem {
 export interface IBreadcrumbsWidgetStyles {
 	breadcrumbsBackground?: Color;
 	breadcrumbsForeground?: Color;
-	breadcrumbsFocusedForeground?: Color;
+	breadcrumbsFocusForeground?: Color;
+	breadcrumbsFocusAndSelectionBackground?: Color;
+	breadcrumbsFocusAndSelectionForeground?: Color;
 }
 
 export interface IBreadcrumbsItemEvent {
@@ -126,8 +128,14 @@ export class BreadcrumbsWidget {
 		if (style.breadcrumbsForeground) {
 			content += `.monaco-breadcrumbs .monaco-breadcrumb-item { color: ${style.breadcrumbsForeground}}\n`;
 		}
-		if (style.breadcrumbsFocusedForeground) {
-			content += `.monaco-breadcrumbs .monaco-breadcrumb-item.focused { color: ${style.breadcrumbsFocusedForeground}}\n`;
+		if (style.breadcrumbsFocusForeground) {
+			content += `.monaco-breadcrumbs .monaco-breadcrumb-item.focused { color: ${style.breadcrumbsFocusForeground}}\n`;
+		}
+		if (style.breadcrumbsFocusAndSelectionBackground) {
+			content += `.monaco-breadcrumbs .monaco-breadcrumb-item.focused.selected { background-color: ${style.breadcrumbsFocusAndSelectionBackground}}\n`;
+		}
+		if (style.breadcrumbsFocusAndSelectionForeground) {
+			content += `.monaco-breadcrumbs .monaco-breadcrumb-item.focused.selected { color: ${style.breadcrumbsFocusAndSelectionForeground}}\n`;
 		}
 		if (this._styleElement.innerHTML !== content) {
 			this._styleElement.innerHTML = content;
@@ -178,11 +186,11 @@ export class BreadcrumbsWidget {
 		this._onDidFocusItem.fire({ type: 'focus', item: this._items[this._focusedItemIdx], node: this._nodes[this._focusedItemIdx] });
 	}
 
-	getSelected(): BreadcrumbsItem {
+	getSelection(): BreadcrumbsItem {
 		return this._items[this._selectedItemIdx];
 	}
 
-	setSelected(item: BreadcrumbsItem): void {
+	setSelection(item: BreadcrumbsItem): void {
 		this._select(this._items.indexOf(item));
 	}
 

src/vs/platform/theme/common/colorRegistry.ts

@@ -223,8 +223,10 @@ export const scrollbarSliderActiveBackground = registerColor('scrollbarSlider.ac
 
 export const progressBarBackground = registerColor('progressBar.background', { dark: Color.fromHex('#0E70C0'), light: Color.fromHex('#0E70C0'), hc: contrastBorder }, nls.localize('progressBarBackground', "Background color of the progress bar that can show for long running operations."));
 
-export const breadcrumbsForegound = registerColor('breadcrumb.focusForeground', { light: Color.fromHex('#6C6C6C').transparent(.7), dark: Color.fromHex('#CCCCCC').transparent(.7), hc: Color.white.transparent(.7) }, nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items."));
-export const breadcrumbsFocusedForegound = registerColor('breadcrumb.breadcrumbsFocusedForegound', { light: '#6C6C6C', dark: '#CCCCCC', hc: Color.white }, nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items."));
+export const breadcrumbsForeground = registerColor('breadcrumb.breadcrumbsForeground', { light: Color.fromHex('#6C6C6C').transparent(.7), dark: Color.fromHex('#CCCCCC').transparent(.7), hc: Color.white.transparent(.7) }, nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items."));
+export const breadcrumbsFocusForeground = registerColor('breadcrumb.breadcrumbsFocusForeground', { light: '#6C6C6C', dark: '#CCCCCC', hc: Color.white }, nls.localize('breadcrumbsFocusForeground', "Color of focused breadcrumb items."));
+export const breadcrumbsActiveSelectionForeground = registerColor('breadcrumb.breadcrumbsActiveSelectionForeground', { light: '#6C6C6C', dark: '#CCCCCC', hc: Color.white }, nls.localize('breadcrumbsSelectedForegound', "Color of selected breadcrumb items."));
+export const breadcrumbsActiveSelectionBackground = registerColor('breadcrumb.breadcrumbsActiveSelectionBackground', { light: '#F3F3F3', dark: '#252526', hc: Color.black }, nls.localize('breadcrumbsSelectedBackground', "Background color of selected breadcrumb items."));
 
 /**
  * Editor background color.

src/vs/platform/theme/common/styler.ts

@@ -6,7 +6,7 @@
 'use strict';
 
 import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
-import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForegound, breadcrumbsFocusedForegound } from 'vs/platform/theme/common/colorRegistry';
+import { focusBorder, inputBackground, inputForeground, ColorIdentifier, selectForeground, selectBackground, selectListBackground, selectBorder, inputBorder, foreground, editorBackground, contrastBorder, inputActiveOptionBorder, listFocusBackground, listFocusForeground, listActiveSelectionBackground, listActiveSelectionForeground, listInactiveSelectionForeground, listInactiveSelectionBackground, listInactiveFocusBackground, listHoverBackground, listHoverForeground, listDropBackground, pickerGroupBorder, pickerGroupForeground, widgetShadow, inputValidationInfoBorder, inputValidationInfoBackground, inputValidationWarningBorder, inputValidationWarningBackground, inputValidationErrorBorder, inputValidationErrorBackground, activeContrastBorder, buttonForeground, buttonBackground, buttonHoverBackground, ColorFunction, lighten, badgeBackground, badgeForeground, progressBarBackground, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionBackground, breadcrumbsActiveSelectionForeground } from 'vs/platform/theme/common/colorRegistry';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
@@ -266,13 +266,17 @@ export function attachStylerCallback(themeService: IThemeService, colors: { [nam
 export interface IBreadcrumbsWidgetStyleOverrides extends IStyleOverrides {
 	breadcrumbsBackground?: ColorIdentifier;
 	breadcrumbsForeground?: ColorIdentifier;
-	breadcrumbsFocusedForeground?: ColorIdentifier;
+	breadcrumbsFocusForeground?: ColorIdentifier;
+	breadcrumbsFocusAndSelectionBackground?: ColorIdentifier;
+	breadcrumbsFocusAndSelectionForeground?: ColorIdentifier;
 }
 
 export const defaultBreadcrumbsStyles = <IBreadcrumbsWidgetStyleOverrides>{
 	breadcrumbsBackground: editorBackground,
-	breadcrumbsForeground: breadcrumbsForegound,
-	breadcrumbsFocusedForeground: breadcrumbsFocusedForegound
+	breadcrumbsForeground: breadcrumbsForeground,
+	breadcrumbsFocusForeground: breadcrumbsFocusForeground,
+	breadcrumbsFocusAndSelectionBackground: breadcrumbsActiveSelectionBackground,
+	breadcrumbsFocusAndSelectionForeground: breadcrumbsActiveSelectionForeground,
 };
 
 export function attachBreadcrumbsStyler(widget: IThemable, themeService: IThemeService, style?: IBreadcrumbsWidgetStyleOverrides): IDisposable {

src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts

@@ -153,8 +153,8 @@ export class BreadcrumbsControl {
 		dom.append(container, this._domNode);
 
 		this._widget = new BreadcrumbsWidget(this._domNode);
-		this._widget.onDidSelectItem(this._onDidSelectItem, this, this._disposables);
-		this._widget.onDidFocusItem(this._onDidSelectItem, this, this._disposables);
+		this._widget.onDidSelectItem(this._onSelectEvent, this, this._disposables);
+		this._widget.onDidFocusItem(this._onFocusEvent, this, this._disposables);
 		this._widget.onDidChangeFocus(this._updateCkBreadcrumbsActive, this, this._disposables);
 		this._disposables.push(attachBreadcrumbsStyler(this._widget, this._themeService));
 
@@ -203,35 +203,17 @@ export class BreadcrumbsControl {
 		this._breadcrumbsDisposables = [model, listener];
 	}
 
-	focus(): void {
-		this._widget.domFocus();
-	}
-
-	focusNext(): void {
-		this._widget.focusNext();
-	}
-
-	focusPrev(): void {
-		this._widget.focusPrev();
-	}
-
-	select(): void {
-		const item = this._widget.getFocused();
-		if (item) {
-			this._widget.setSelected(item);
+	private _onFocusEvent(event: IBreadcrumbsItemEvent): void {
+		if (event.item && this._breadcrumbsPickerShowing) {
+			return this._widget.setSelection(event.item);
 		}
 	}
 
-	private _onDidSelectItem(event: IBreadcrumbsItemEvent): void {
+	private _onSelectEvent(event: IBreadcrumbsItemEvent): void {
 		if (!event.item) {
 			return;
 		}
 
-		if (event.type === 'focus' && !this._breadcrumbsPickerShowing) {
-			// focus change only moves the picker when already active
-			return;
-		}
-
 		this._editorGroup.focus();
 		this._contextViewService.showContextView({
 			getAnchor() {
@@ -254,6 +236,7 @@ export class BreadcrumbsControl {
 				res.layout({ width: 250, height: 300 });
 				let listener = res.onDidPickElement(data => {
 					this._contextViewService.hideContextView();
+					this._widget.setSelection(undefined);
 					if (!data) {
 						return;
 					}
@@ -571,13 +554,13 @@ KeybindingsRegistry.registerCommandAndKeybindingRule({
 	id: 'breadcrumbs.selectFocused',
 	weight: KeybindingsRegistry.WEIGHT.workbenchContrib(),
 	primary: KeyCode.Enter,
-	secondary: [KeyCode.UpArrow, KeyCode.Space],
+	secondary: [KeyCode.DownArrow, KeyCode.Space],
 	when: ContextKeyExpr.and(BreadcrumbsControl.CK_BreadcrumbsVisible, BreadcrumbsControl.CK_BreadcrumbsActive),
 	handler(accessor) {
 		const groups = accessor.get(IEditorGroupsService);
 		const breadcrumbs = accessor.get(IBreadcrumbsService);
 		const widget = breadcrumbs.getWidget(groups.activeGroup.id);
-		widget.setSelected(widget.getFocused());
+		widget.setSelection(widget.getFocused());
 	}
 });
 KeybindingsRegistry.registerCommandAndKeybindingRule({
@@ -590,6 +573,7 @@ KeybindingsRegistry.registerCommandAndKeybindingRule({
 		const groups = accessor.get(IEditorGroupsService);
 		const breadcrumbs = accessor.get(IBreadcrumbsService);
 		breadcrumbs.getWidget(groups.activeGroup.id).setFocused(undefined);
+		breadcrumbs.getWidget(groups.activeGroup.id).setSelection(undefined);
 		groups.activeGroup.activeControl.focus();
 	}
 });

src/vs/workbench/browser/parts/editor/media/breadcrumbscontrol.css

@@ -12,7 +12,8 @@
 }
 
 .monaco-workbench>.part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumb-item .symbol-icon{
-	padding-right: 4px;
+	margin-left: 4px;
+	padding-right: 2px;
 }
 
 .monaco-workbench>.part.editor>.content .editor-group-container .breadcrumbs-control .monaco-breadcrumbs .monaco-breadcrumb-item:nth-child(2) {