breadcrumbs - don't use selection background color but an arrow

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

@@ -226,7 +226,7 @@ export const progressBarBackground = registerColor('progressBar.background', { d
 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."));
+export const breadcrumbsPickerBackground = registerColor('breadcrumb.breadcrumbsPickerBackground', { light: '#ECECEC', dark: '#252526', hc: Color.black }, nls.localize('breadcrumbsSelectedBackground', "Background color of breadcrumb item picker."));
 
 /**
  * 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, breadcrumbsForeground, breadcrumbsFocusForeground, breadcrumbsActiveSelectionBackground, breadcrumbsActiveSelectionForeground } 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, 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,20 +266,16 @@ export function attachStylerCallback(themeService: IThemeService, colors: { [nam
 export interface IBreadcrumbsWidgetStyleOverrides extends IStyleOverrides {
 	breadcrumbsBackground?: ColorIdentifier;
 	breadcrumbsForeground?: ColorIdentifier;
-	breadcrumbsHoverBackground?: ColorIdentifier;
 	breadcrumbsHoverForeground?: ColorIdentifier;
 	breadcrumbsFocusForeground?: ColorIdentifier;
-	breadcrumbsFocusAndSelectionBackground?: ColorIdentifier;
 	breadcrumbsFocusAndSelectionForeground?: ColorIdentifier;
 }
 
 export const defaultBreadcrumbsStyles = <IBreadcrumbsWidgetStyleOverrides>{
 	breadcrumbsBackground: editorBackground,
 	breadcrumbsForeground: breadcrumbsForeground,
-	breadcrumbsHoverBackground: editorBackground,
 	breadcrumbsHoverForeground: breadcrumbsFocusForeground,
 	breadcrumbsFocusForeground: breadcrumbsFocusForeground,
-	breadcrumbsFocusAndSelectionBackground: breadcrumbsActiveSelectionBackground,
 	breadcrumbsFocusAndSelectionForeground: breadcrumbsActiveSelectionForeground,
 };
 

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

@@ -31,7 +31,7 @@ import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace
 import { FileLabel } from 'vs/workbench/browser/labels';
 import { BreadcrumbsConfig, IBreadcrumbsService } from 'vs/workbench/browser/parts/editor/breadcrumbs';
 import { BreadcrumbElement, EditorBreadcrumbsModel, FileElement } from 'vs/workbench/browser/parts/editor/breadcrumbsModel';
-import { createBreadcrumbsPicker } from 'vs/workbench/browser/parts/editor/breadcrumbsPicker';
+import { createBreadcrumbsPicker, BreadcrumbsPicker } from 'vs/workbench/browser/parts/editor/breadcrumbsPicker';
 import { EditorGroupView } from 'vs/workbench/browser/parts/editor/editorGroupView';
 import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
 import { IEditorGroupsService } from 'vs/workbench/services/group/common/editorGroupsService';
@@ -267,13 +267,10 @@ export class BreadcrumbsControl {
 		}
 
 		// show picker
+		let picker: BreadcrumbsPicker;
 		this._contextViewService.showContextView({
-			getAnchor() {
-				return event.node;
-			},
 			render: (parent: HTMLElement) => {
-				let picker = createBreadcrumbsPicker(this._instantiationService, parent, element);
-				picker.layout({ width: Math.max(220, dom.getTotalWidth(event.node)), height: 330 });
+				picker = createBreadcrumbsPicker(this._instantiationService, parent, element);
 				picker.setInput(element);
 				let listener = picker.onDidPickElement(data => {
 					this._contextViewService.hideContextView();
@@ -286,6 +283,27 @@ export class BreadcrumbsControl {
 
 				return combinedDisposable([listener, picker]);
 			},
+			getAnchor() {
+
+				let pickerHeight = 330;
+				let pickerWidth = Math.max(220, dom.getTotalWidth(event.node));
+				let pickerArrowSize = 8;
+				let pickerArrowOffset: number;
+
+				let data = dom.getDomNodePagePosition(event.node.firstChild as HTMLElement);
+				let y = data.top + data.height - pickerArrowSize;
+				let x = data.left;
+				if (x + pickerWidth >= window.innerWidth) {
+					x = window.innerWidth - pickerWidth;
+				}
+				if (event.payload instanceof StandardMouseEvent) {
+					pickerArrowOffset = event.payload.posx - x - pickerArrowSize;
+				} else {
+					pickerArrowOffset = (data.left + (data.width * .3)) - x;
+				}
+				picker.layout(pickerHeight, pickerWidth, pickerArrowSize, Math.max(0, pickerArrowOffset));
+				return { x, y };
+			},
 			onHide: () => {
 				this._breadcrumbsPickerShowing = false;
 				this._updateCkBreadcrumbsActive();

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

@@ -24,7 +24,7 @@ import { IThemeService, DARK } from 'vs/platform/theme/common/themeService';
 import { FileLabel } from 'vs/workbench/browser/labels';
 import { BreadcrumbElement, FileElement } from 'vs/workbench/browser/parts/editor/breadcrumbsModel';
 import { onUnexpectedError } from 'vs/base/common/errors';
-import { breadcrumbsActiveSelectionBackground } from 'vs/platform/theme/common/colorRegistry';
+import { breadcrumbsPickerBackground } from 'vs/platform/theme/common/colorRegistry';
 import { FuzzyScore, createMatches, fuzzyScore } from 'vs/base/common/filters';
 
 export function createBreadcrumbsPicker(instantiationService: IInstantiationService, parent: HTMLElement, element: BreadcrumbElement): BreadcrumbsPicker {
@@ -36,38 +36,58 @@ export abstract class BreadcrumbsPicker {
 
 	protected readonly _disposables = new Array<IDisposable>();
 	protected readonly _domNode: HTMLDivElement;
-	protected readonly _focus: dom.IFocusTracker;
+	protected readonly _arrow: HTMLDivElement;
 	protected readonly _tree: HighlightingWorkbenchTree;
+	protected readonly _focus: dom.IFocusTracker;
 
 	protected readonly _onDidPickElement = new Emitter<any>();
 
 	readonly onDidPickElement: Event<any> = this._onDidPickElement.event;
 
 	constructor(
-		container: HTMLElement,
+		parent: HTMLElement,
 		@IInstantiationService protected readonly _instantiationService: IInstantiationService,
 		@IThemeService protected readonly _themeService: IThemeService,
 	) {
 		this._domNode = document.createElement('div');
 		this._domNode.className = 'monaco-breadcrumbs-picker show-file-icons';
-		const theme = this._themeService.getTheme();
-		const color = theme.getColor(breadcrumbsActiveSelectionBackground);
-		this._domNode.style.background = color.toString();
-		this._domNode.style.boxShadow = `0px 5px 8px ${(theme.type === DARK ? color.darken(.6) : color.darken(.2))}`;
-		container.appendChild(this._domNode);
+		parent.appendChild(this._domNode);
 
 		this._focus = dom.trackFocus(this._domNode);
 		this._focus.onDidBlur(_ => this._onDidPickElement.fire(undefined), undefined, this._disposables);
 
+		const theme = this._themeService.getTheme();
+		const color = theme.getColor(breadcrumbsPickerBackground);
+
+		this._arrow = document.createElement('div');
+		this._arrow.style.width = '0';
+		this._arrow.style.borderStyle = 'solid';
+		this._arrow.style.borderWidth = '8px';
+		this._arrow.style.borderColor = `transparent transparent ${color.toString()}`;
+		this._domNode.appendChild(this._arrow);
+
+		const container = document.createElement('div');
+		container.style.background = color.toString();
+		container.style.paddingTop = '2px';
+		container.style.boxShadow = `0px 5px 8px ${(theme.type === DARK ? color.darken(.6) : color.darken(.2))}`;
+		container.style.height = '100%';
+		this._domNode.appendChild(container);
+
 		const treeConifg = this._completeTreeConfiguration({ dataSource: undefined, renderer: undefined });
-		this._tree = this._instantiationService.createInstance(HighlightingWorkbenchTree, this._domNode, treeConifg, {}, { placeholder: localize('placeholder', "Find") });
+		this._tree = this._instantiationService.createInstance(
+			HighlightingWorkbenchTree,
+			container,
+			treeConifg,
+			{ useShadows: false },
+			{ placeholder: localize('placeholder', "Find") }
+		);
 		this._disposables.push(this._tree.onDidChangeSelection(e => {
 			if (e.payload !== this._tree) {
 				setTimeout(_ => this._onDidChangeSelection(e)); // need to debounce here because this disposes the tree and the tree doesn't like to be disposed on click
 			}
 		}));
 
-		this._tree.domFocus();
+		this._domNode.focus();
 	}
 
 	dispose(): void {
@@ -85,15 +105,18 @@ export abstract class BreadcrumbsPicker {
 				this._tree.reveal(selection).then(() => {
 					this._tree.setSelection([selection], this._tree);
 					this._tree.setFocus(selection);
+					this._tree.domFocus();
 				});
 			}
 		}, onUnexpectedError);
 	}
 
-	layout(dim: dom.Dimension) {
-		this._domNode.style.width = `${dim.width}px`;
-		this._domNode.style.height = `${dim.height}px`;
-		this._tree.layout(dim.height, dim.width);
+	layout(height: number, width: number, arrowSize: number, arrowOffset: number) {
+		this._domNode.style.width = `${width}px`;
+		this._domNode.style.height = `${height}px`;
+		this._arrow.style.borderWidth = `${arrowSize}px`;
+		this._arrow.style.marginLeft = `${arrowOffset}px`;
+		this._tree.layout(height, width);
 	}
 
 	protected abstract _getInput(input: BreadcrumbElement): any;

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

@@ -6,6 +6,7 @@
 .monaco-workbench > .part.editor > .content .editor-group-container > .title > .label-container {
 	display: flex;
 	justify-content: flex-start;
+	align-items: center;
 	overflow: hidden;
 	flex: auto;
 }
@@ -33,8 +34,6 @@
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .no-tabs-breadcrumbs.breadcrumbs-control {
 	flex: 1 50%;
 	overflow: hidden;
-	line-height: 35px;
-	height: 35px;
 	padding: 0 6px;
 }