diff --git a/src/vs/workbench/browser/parts/editor/media/notabstitle.css b/src/vs/workbench/browser/parts/editor/media/notabstitle.css index 811cc19c9636607287121aa17864d67e099c0ab2..70587cb3154ba6426e40abdf3d221eb3d725d4cf 100644 --- a/src/vs/workbench/browser/parts/editor/media/notabstitle.css +++ b/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 */ diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css index ec1cecc0a8378c6523241456d3aaa42ebbe38519..38a58b41d5724f18262d8aed86267c9ed20b53dc 100644 --- a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css +++ b/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, diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index a5f51f47d4dd07c8c958d6306bdd5d4a64771cc5..50e30169a84873a1b8f95c2a2f4298d8c7b257b0 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/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 = tabContainer.children[0]; - const tabLabel = tabLabelsContainer.children[0]; - const tabDescription = 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');