icons: show when tabs are enabled

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

@@ -38,6 +38,11 @@
 	text-overflow: ellipsis;
 	position: relative;
 	padding-left: 2px;
+	font-style: italic;
+}
+
+.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.pinned .title-label {
+	font-style: normal;
 }
 
 /* Title Actions */

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

@@ -9,12 +9,11 @@
 .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .tab-label {
 	white-space: nowrap;
 	flex: 1;
-	font-style: italic;
 }
 
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title.pinned .title-label,
-.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab.pinned .tab-label {
-	font-style: normal;
+.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .monaco-icon-label::before,
+.monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .tabs-container > .tab .monaco-icon-label::before {
+	height: 16px; /* tweak the icon size of the editor labels when icons are enabled */
 }
 
 .monaco-workbench > .part.editor > .content > .one-editor-silo > .container > .title .title-label a,

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

@@ -12,9 +12,10 @@ import DOM = require('vs/base/browser/dom');
 import {isMacintosh} from 'vs/base/common/platform';
 import {MIME_BINARY} from 'vs/base/common/mime';
 import {Position, IEditorInput} from 'vs/platform/editor/common/editor';
-import {IEditorGroup, IEditorIdentifier, asFileEditorInput} from 'vs/workbench/common/editor';
+import {IEditorGroup, IEditorIdentifier, asFileEditorInput, getResource} from 'vs/workbench/common/editor';
 import {StandardKeyboardEvent} from 'vs/base/browser/keyboardEvent';
 import {KeyCode} from 'vs/base/common/keyCodes';
+import {EditorLabel} from 'vs/workbench/browser/parts/editor/editorLabel';
 import {ActionBar} from 'vs/base/browser/ui/actionbar/actionbar';
 import {IConfigurationService} from 'vs/platform/configuration/common/configuration';
 import {IWorkbenchEditorService} from 'vs/workbench/services/editor/common/editorService';
@@ -48,6 +49,7 @@ export class TabsTitleControl extends TitleControl {
 	private titleContainer: HTMLElement;
 	private tabsContainer: HTMLElement;
 	private activeTab: HTMLElement;
+	private editorLabels: EditorLabel[];
 	private scrollbar: ScrollableElement;
 	private tabDisposeables: IDisposable[] = [];
 
@@ -68,6 +70,7 @@ export class TabsTitleControl extends TitleControl {
 		super(contextMenuService, instantiationService, configurationService, editorService, editorGroupService, contextKeyService, keybindingService, telemetryService, messageService, menuService, quickOpenService);
 
 		this.tabDisposeables = [];
+		this.editorLabels = [];
 	}
 
 	public setContext(group: IEditorGroup): void {
@@ -85,6 +88,7 @@ export class TabsTitleControl extends TitleControl {
 		this.tabsContainer = document.createElement('div');
 		this.tabsContainer.setAttribute('role', 'tablist');
 		DOM.addClass(this.tabsContainer, 'tabs-container');
+		DOM.addClass(this.tabsContainer, 'show-file-icons');
 
 		// Forward scrolling inside the container to our custom scrollbar
 		this.toDispose.push(DOM.addDisposableListener(this.tabsContainer, DOM.EventType.SCROLL, e => {
@@ -198,10 +202,6 @@ export class TabsTitleControl extends TitleControl {
 		editorsOfGroup.forEach((editor, index) => {
 			const tabContainer = this.tabsContainer.children[index];
 			if (tabContainer instanceof HTMLElement) {
-				const tabLabelsContainer = <HTMLElement>tabContainer.children[0];
-				const tabLabel = <HTMLAnchorElement>tabLabelsContainer.children[0];
-				const tabDescription = <HTMLSpanElement>tabLabelsContainer.children[1];
-
 				const isPinned = group.isPinned(editor);
 				const isActive = group.isActive(editor);
 				const isDirty = editor.isDirty();
@@ -211,23 +211,13 @@ export class TabsTitleControl extends TitleControl {
 				const description = label.hasAmbiguousName && label.description ? label.description : '';
 				const verboseDescription = label.verboseDescription || '';
 
-				// Label & Description
+				// Container
 				tabContainer.setAttribute('aria-label', `tab, ${name}`);
 				tabContainer.title = verboseDescription;
-				tabLabel.innerText = name;
-				tabDescription.innerText = description;
-				if (description) {
-					DOM.show(tabDescription);
-				} else {
-					DOM.hide(tabDescription);
-				}
 
-				// Pinned state
-				if (isPinned) {
-					DOM.addClass(tabContainer, 'pinned');
-				} else {
-					DOM.removeClass(tabContainer, 'pinned');
-				}
+				// Label
+				const tabLabel = this.editorLabels[index];
+				tabLabel.setLabel({ name, description, resource: getResource(editor) }, { extraClasses: ['tab-label'], italic: !isPinned });
 
 				// Active state
 				if (isActive) {
@@ -325,8 +315,9 @@ export class TabsTitleControl extends TitleControl {
 
 	private clearTabs(): void {
 		DOM.clearNode(this.tabsContainer);
-		dispose(this.tabDisposeables);
-		this.tabDisposeables = [];
+
+		this.tabDisposeables = dispose(this.tabDisposeables);
+		this.editorLabels = dispose(this.editorLabels);
 	}
 
 	private refreshTabs(group: IEditorGroup): void {
@@ -347,18 +338,9 @@ export class TabsTitleControl extends TitleControl {
 			DOM.addClass(tabContainer, 'tab monaco-editor-background');
 			tabContainers.push(tabContainer);
 
-			// Tab Label Container
-			const tabLabelContainer = document.createElement('div');
-			tabContainer.appendChild(tabLabelContainer);
-			DOM.addClass(tabLabelContainer, 'tab-label');
-
-			// Tab Label
-			const tabLabel = document.createElement('a');
-			tabLabelContainer.appendChild(tabLabel);
-
-			// Tab Description
-			const tabDescription = document.createElement('span');
-			tabLabelContainer.appendChild(tabDescription);
+			// Tab Editor Label
+			const editorLabel = this.instantiationService.createInstance(EditorLabel, tabContainer);
+			this.editorLabels.push(editorLabel);
 
 			// Tab Close
 			const tabCloseContainer = document.createElement('div');