breadcrumbs - differentiate between showing file or symbol icons and enable...

breadcrumbs - differentiate between showing file or symbol icons and enable the latter for the no tabs case

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

@@ -22,7 +22,7 @@
 	height: 100%;
 }
 
-.monaco-breadcrumbs .monaco-breadcrumb-item:not(:last-child)::after {
+.monaco-breadcrumbs .monaco-breadcrumb-item:not(:first-child)::before {
 	background-image: url(./collapsed.svg);
 	opacity: .7;
 	width: 16px;
@@ -33,7 +33,7 @@
 	content: ' ';
 }
 
-.vs-dark .monaco-breadcrumbs .monaco-breadcrumb-item:not(:last-child)::after {
+.vs-dark .monaco-breadcrumbs .monaco-breadcrumb-item:not(:first-child)::before {
 	background-image: url(./collpased-dark.svg);
 }
 

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

@@ -70,7 +70,7 @@ class Item extends BreadcrumbsItem {
 	render(container: HTMLElement): void {
 		if (this.element instanceof FileElement) {
 			// file/folder
-			if (this.options.showIcons) {
+			if (this.options.showFileIcons) {
 				let label = this._instantiationService.createInstance(FileLabel, container, {});
 				label.setFile(this.element.uri, {
 					hidePath: true,
@@ -94,10 +94,11 @@ class Item extends BreadcrumbsItem {
 		} else if (this.element instanceof OutlineElement) {
 			// symbol
 
-			if (this.options.showIcons) {
+			if (this.options.showSymbolIcons) {
 				let icon = document.createElement('div');
 				icon.className = `symbol-icon ${symbolKindToCssClass(this.element.symbol.kind)}`;
 				container.appendChild(icon);
+				container.classList.add('shows-symbol-icon');
 			}
 
 			let label = new IconLabel(container);
@@ -108,7 +109,8 @@ class Item extends BreadcrumbsItem {
 }
 
 export interface IBreadcrumbsControlOptions {
-	showIcons: boolean;
+	showFileIcons: boolean;
+	showSymbolIcons: boolean;
 	showDecorationColors: boolean;
 }
 

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

@@ -48,17 +48,23 @@
 	font-style: italic;
 }
 
-.monaco-workbench > .part.editor > .content .editor-group-container > .title .no-tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:not(:last-child)::after {
+.monaco-workbench > .part.editor > .content .editor-group-container > .title .no-tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:not(:first-child)::before {
 	content: '/';
+	opacity: 1;
 	height: inherit;
 	width: inherit;
 	background-image: none;
 }
 
-.monaco-workbench.windows > .part.editor > .content .editor-group-container > .title .no-tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:not(:last-child)::after  {
+.monaco-workbench.windows > .part.editor > .content .editor-group-container > .title .no-tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:not(:first-child)::before  {
 	content: '\\';
 }
 
+.monaco-workbench > .part.editor > .content .editor-group-container > .title .no-tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.shows-symbol-icon:not(:first-child)::before {
+	/* breadcrumbs items that show a symbol icon don't show slashes */
+	content: ' ';
+}
+
 /* Title Actions */
 .monaco-workbench > .part.editor > .content .editor-group-container > .title .title-actions {
 	display: flex;

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

@@ -39,7 +39,7 @@ export class NoTabsTitleControl extends TitleControl {
 		const breadcrumbsContainer = document.createElement('div');
 		addClass(breadcrumbsContainer, 'no-tabs-breadcrumbs');
 		this.titleContainer.appendChild(breadcrumbsContainer);
-		this.createBreadcrumbsControl(breadcrumbsContainer, { showIcons: false, showDecorationColors: false });
+		this.createBreadcrumbsControl(breadcrumbsContainer, { showFileIcons: false, showSymbolIcons: true, showDecorationColors: false });
 
 		// Right Actions Container
 		const actionsContainer = document.createElement('div');

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

@@ -116,7 +116,7 @@ export class TabsTitleControl extends TitleControl {
 		const breadcrumbsContainer = document.createElement('div');
 		addClass(breadcrumbsContainer, 'tabs-breadcrumbs');
 		this.titleContainer.appendChild(breadcrumbsContainer);
-		this.createBreadcrumbsControl(breadcrumbsContainer, { showIcons: true, showDecorationColors: false });
+		this.createBreadcrumbsControl(breadcrumbsContainer, { showFileIcons: true, showSymbolIcons: true, showDecorationColors: false });
 	}
 
 	private createScrollbar(): void {