From 09a9c0140e8c6872d1b5498289286fce7caac688 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Mon, 4 Sep 2023 18:00:07 +0200 Subject: [PATCH 1/6] Support different tab heights --- .../lib/stylelint/vscode-known-variables.json | 1 + .../workbench/browser/parts/editor/editor.ts | 1 + .../parts/editor/media/tabstitlecontrol.css | 8 +++---- .../parts/editor/media/titlecontrol.css | 2 +- .../browser/parts/editor/tabsTitleControl.ts | 21 +++++++++++++++---- .../browser/workbench.contribution.ts | 6 ++++++ src/vs/workbench/common/editor.ts | 1 + 7 files changed, 31 insertions(+), 9 deletions(-) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 1fb8174701913..62b9f2fc563f5 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -734,6 +734,7 @@ "--tab-sizing-current-width", "--tab-sizing-fixed-min-width", "--tab-sizing-fixed-max-width", + "--tab-height", "--testMessageDecorationFontFamily", "--testMessageDecorationFontSize", "--title-border-bottom-color", diff --git a/src/vs/workbench/browser/parts/editor/editor.ts b/src/vs/workbench/browser/parts/editor/editor.ts index 23f3371411a35..c8cdf695fcb49 100644 --- a/src/vs/workbench/browser/parts/editor/editor.ts +++ b/src/vs/workbench/browser/parts/editor/editor.ts @@ -31,6 +31,7 @@ export const DEFAULT_EDITOR_PART_OPTIONS: IEditorPartOptions = { tabSizingFixedMinWidth: 50, tabSizingFixedMaxWidth: 160, pinnedTabSizing: 'normal', + tabHeight: 'normal', preventPinnedEditorClose: 'keyboardAndMouse', titleScrollbarSizing: 'default', focusRecentEditorAfterClose: true, diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css index 17e17c1a758c6..62de2b2dc1152 100644 --- a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css @@ -71,7 +71,7 @@ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container { display: flex; - height: 35px; + height: var(--tab-height); scrollbar-width: none; /* Firefox: hide scrollbar */ } @@ -97,7 +97,7 @@ display: flex; white-space: nowrap; cursor: pointer; - height: 35px; + height: var(--tab-height); box-sizing: border-box; padding-left: 10px; } @@ -265,7 +265,7 @@ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { margin-top: auto; margin-bottom: auto; - line-height: 35px; /* aligns icon and label vertically centered in the tab */ + line-height: var(--tab-height); /* aligns icon and label vertically centered in the tab */ } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink .tab-label, @@ -473,7 +473,7 @@ cursor: default; flex: initial; padding: 0 8px 0 4px; - height: 35px; + height: var(--tab-height); } .monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-item { diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css index 378d2bfa63f7d..d627fc05a5ba8 100644 --- a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css @@ -30,7 +30,7 @@ } .monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before { - height: 35px; /* tweak the icon size of the editor labels when icons are enabled */ + height: var(--tab-height); /* tweak the icon size of the editor labels when icons are enabled */ } .monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .monaco-icon-label::after, diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 5d5d132b05d31..153ba1472b6b0 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -97,8 +97,6 @@ export class TabsTitleControl extends TitleControl { fit: 120 }; - private static readonly TAB_HEIGHT = 35; - private static readonly DRAG_OVER_OPEN_TAB_THRESHOLD = 1500; private static readonly MOUSE_WHEEL_EVENT_THRESHOLD = 150; @@ -182,6 +180,7 @@ export class TabsTitleControl extends TitleControl { this.tabSizingFixedDisposables = this._register(new DisposableStore()); this.updateTabSizing(false); + this.updateTabHeight(); // Tabs Scrollbar this.tabsScrollbar = this.createTabsScrollbar(this.tabsContainer); @@ -269,6 +268,11 @@ export class TabsTitleControl extends TitleControl { }); } + private updateTabHeight(): void { + const tabsContainer = assertIsDefined(this.tabsContainer); + tabsContainer.style.setProperty('--tab-height', `${this.getTabHeight()}px`); + } + private getTabsScrollbarSizing(): number { if (this.accessor.partOptions.titleScrollbarSizing !== 'large') { return TabsTitleControl.SCROLLBAR_SIZES.default; @@ -731,6 +735,11 @@ export class TabsTitleControl extends TitleControl { this.updateTabSizing(true); } + // Update tab height + if (oldOptions.tabHeight !== newOptions.tabHeight) { + this.updateTabHeight(); + } + // Redraw tabs when other options change if ( oldOptions.labelFormat !== newOptions.labelFormat || @@ -1549,7 +1558,7 @@ export class TabsTitleControl extends TitleControl { if (this.accessor.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains('wrapping')) { total = this.tabsAndActionsContainer.offsetHeight; } else { - total = TabsTitleControl.TAB_HEIGHT; + total = this.getTabHeight(); } const offset = total; @@ -1562,6 +1571,10 @@ export class TabsTitleControl extends TitleControl { return { total, offset }; } + getTabHeight() { + return this.accessor.partOptions.tabHeight !== 'small' ? 35 : 22; + } + layout(dimensions: ITitleControlDimensions, options?: ITabsTitleControlLayoutOptions): Dimension { // Remember dimensions that we get @@ -1707,7 +1720,7 @@ export class TabsTitleControl extends TitleControl { if (tabsWrapMultiLine) { if ( (tabsContainer.offsetHeight > dimensions.available.height) || // if height exceeds available height - (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === TabsTitleControl.TAB_HEIGHT) || // if wrapping is not needed anymore + (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.getTabHeight()) || // if wrapping is not needed anymore (!lastTabFitsWrapped()) // if last tab does not fit anymore ) { updateTabsWrapping(false); diff --git a/src/vs/workbench/browser/workbench.contribution.ts b/src/vs/workbench/browser/workbench.contribution.ts index a0aa8d51b7bae..85d699dfbf5d7 100644 --- a/src/vs/workbench/browser/workbench.contribution.ts +++ b/src/vs/workbench/browser/workbench.contribution.ts @@ -165,6 +165,12 @@ const registry = Registry.as(ConfigurationExtensions.Con 'minimum': 38, 'markdownDescription': localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.editor.tabSizingFixedMaxWidth' }, "Controls the maximum width of tabs when `#workbench.editor.tabSizing#` size is set to `fixed`.") }, + 'workbench.editor.tabHeight': { + 'type': 'string', + 'enum': ['normal', 'small'], + 'default': 'normal', + 'markdownDescription': localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.editor.tabHeight' }, "Controls the height of editor tabs.") + }, 'workbench.editor.pinnedTabSizing': { 'type': 'string', 'enum': ['normal', 'compact', 'shrink'], diff --git a/src/vs/workbench/common/editor.ts b/src/vs/workbench/common/editor.ts index 356f88a596247..9414e6004dfc7 100644 --- a/src/vs/workbench/common/editor.ts +++ b/src/vs/workbench/common/editor.ts @@ -1098,6 +1098,7 @@ interface IEditorPartConfiguration { tabSizingFixedMinWidth?: number; tabSizingFixedMaxWidth?: number; pinnedTabSizing?: 'normal' | 'compact' | 'shrink'; + tabHeight?: 'normal' | 'small'; preventPinnedEditorClose?: PreventPinnedEditorClose; titleScrollbarSizing?: 'default' | 'large'; focusRecentEditorAfterClose?: boolean; From 280320786e58ef2023a3cd22de799883a8f479fd Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Tue, 5 Sep 2023 10:21:11 +0200 Subject: [PATCH 2/6] support not tabs tabheight --- .../browser/parts/editor/media/notabstitlecontrol.css | 6 +++--- .../browser/parts/editor/noTabsTitleControl.ts | 7 +++++++ .../browser/parts/editor/tabsTitleControl.ts | 11 ++--------- src/vs/workbench/browser/parts/editor/titleControl.ts | 10 +++++++++- src/vs/workbench/browser/workbench.contribution.ts | 2 +- src/vs/workbench/common/editor.ts | 2 +- 6 files changed, 23 insertions(+), 15 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css index 61440406d69e6..b737c53817c9c 100644 --- a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css @@ -6,7 +6,7 @@ /* Title Label */ .monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container { - height: 35px; + height: var(--tab-height); display: flex; justify-content: flex-start; align-items: center; @@ -15,7 +15,7 @@ } .monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container > .title-label { - line-height: 35px; + line-height: var(--tab-height); overflow: hidden; text-overflow: ellipsis; position: relative; @@ -94,7 +94,7 @@ flex: initial; opacity: 0.5; padding-right: 8px; - height: 35px; + height: var(--tab-height); } .monaco-workbench .part.editor > .content .editor-group-container > .title > .title-actions .action-item { diff --git a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts index d60267cd22f69..bc4e3b25e21bc 100644 --- a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts @@ -50,6 +50,8 @@ export class NoTabsTitleControl extends TitleControl { this.editorLabel = this._register(this.instantiationService.createInstance(ResourceLabel, labelContainer, undefined)).element; this._register(addDisposableListener(this.editorLabel.element, EventType.CLICK, e => this.onTitleLabelClick(e))); + this.updateTabHeight(); + // Breadcrumbs this.createBreadcrumbsControl(labelContainer, { showFileIcons: false, showSymbolIcons: true, showDecorationColors: false, widgetStyles: { ...defaultBreadcrumbsWidgetStyles, breadcrumbsBackground: Color.transparent.toString() }, showPlaceholder: false }); titleContainer.classList.toggle('breadcrumbs', Boolean(this.breadcrumbsControl)); @@ -198,6 +200,11 @@ export class NoTabsTitleControl extends TitleControl { } updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + // Update tab height + if (oldOptions.tabHeight !== newOptions.tabHeight) { + this.updateTabHeight(); + } + if (oldOptions.labelFormat !== newOptions.labelFormat || !equals(oldOptions.decorations, newOptions.decorations)) { this.redraw(); } diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index 153ba1472b6b0..e331f0e494593 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -268,10 +268,6 @@ export class TabsTitleControl extends TitleControl { }); } - private updateTabHeight(): void { - const tabsContainer = assertIsDefined(this.tabsContainer); - tabsContainer.style.setProperty('--tab-height', `${this.getTabHeight()}px`); - } private getTabsScrollbarSizing(): number { if (this.accessor.partOptions.titleScrollbarSizing !== 'large') { @@ -1558,7 +1554,7 @@ export class TabsTitleControl extends TitleControl { if (this.accessor.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains('wrapping')) { total = this.tabsAndActionsContainer.offsetHeight; } else { - total = this.getTabHeight(); + total = this.tabHeight; } const offset = total; @@ -1571,9 +1567,6 @@ export class TabsTitleControl extends TitleControl { return { total, offset }; } - getTabHeight() { - return this.accessor.partOptions.tabHeight !== 'small' ? 35 : 22; - } layout(dimensions: ITitleControlDimensions, options?: ITabsTitleControlLayoutOptions): Dimension { @@ -1720,7 +1713,7 @@ export class TabsTitleControl extends TitleControl { if (tabsWrapMultiLine) { if ( (tabsContainer.offsetHeight > dimensions.available.height) || // if height exceeds available height - (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.getTabHeight()) || // if wrapping is not needed anymore + (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.tabHeight) || // if wrapping is not needed anymore (!lastTabFitsWrapped()) // if last tab does not fit anymore ) { updateTabsWrapping(false); diff --git a/src/vs/workbench/browser/parts/editor/titleControl.ts b/src/vs/workbench/browser/parts/editor/titleControl.ts index e020cd99372cb..352258bb80ab3 100644 --- a/src/vs/workbench/browser/parts/editor/titleControl.ts +++ b/src/vs/workbench/browser/parts/editor/titleControl.ts @@ -115,7 +115,7 @@ export abstract class TitleControl extends Themable { private renderDropdownAsChildElement: boolean; constructor( - parent: HTMLElement, + protected parent: HTMLElement, protected accessor: IEditorGroupsAccessor, protected group: IEditorGroupView, @IContextMenuService protected readonly contextMenuService: IContextMenuService, @@ -422,6 +422,14 @@ export abstract class TitleControl extends Themable { return keybinding ? keybinding.getLabel() ?? undefined : undefined; } + protected get tabHeight() { + return this.accessor.partOptions.tabHeight !== 'compact' ? 35 : 22; + } + + protected updateTabHeight(): void { + this.parent.style.setProperty('--tab-height', `${this.tabHeight}px`); + } + abstract openEditor(editor: EditorInput): void; abstract openEditors(editors: EditorInput[]): void; diff --git a/src/vs/workbench/browser/workbench.contribution.ts b/src/vs/workbench/browser/workbench.contribution.ts index 85d699dfbf5d7..1a2d836c0a59d 100644 --- a/src/vs/workbench/browser/workbench.contribution.ts +++ b/src/vs/workbench/browser/workbench.contribution.ts @@ -167,7 +167,7 @@ const registry = Registry.as(ConfigurationExtensions.Con }, 'workbench.editor.tabHeight': { 'type': 'string', - 'enum': ['normal', 'small'], + 'enum': ['normal', 'compact'], 'default': 'normal', 'markdownDescription': localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.editor.tabHeight' }, "Controls the height of editor tabs.") }, diff --git a/src/vs/workbench/common/editor.ts b/src/vs/workbench/common/editor.ts index 9414e6004dfc7..d38c979a47776 100644 --- a/src/vs/workbench/common/editor.ts +++ b/src/vs/workbench/common/editor.ts @@ -1098,7 +1098,7 @@ interface IEditorPartConfiguration { tabSizingFixedMinWidth?: number; tabSizingFixedMaxWidth?: number; pinnedTabSizing?: 'normal' | 'compact' | 'shrink'; - tabHeight?: 'normal' | 'small'; + tabHeight?: 'normal' | 'compact'; preventPinnedEditorClose?: PreventPinnedEditorClose; titleScrollbarSizing?: 'default' | 'large'; focusRecentEditorAfterClose?: boolean; From 4509267f8993d315e8dd40554f673f1f6d4af1d5 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Tue, 5 Sep 2023 10:56:53 +0200 Subject: [PATCH 3/6] modify tabheight description --- src/vs/workbench/browser/workbench.contribution.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/workbench.contribution.ts b/src/vs/workbench/browser/workbench.contribution.ts index 1a2d836c0a59d..b3a2371170275 100644 --- a/src/vs/workbench/browser/workbench.contribution.ts +++ b/src/vs/workbench/browser/workbench.contribution.ts @@ -169,7 +169,7 @@ const registry = Registry.as(ConfigurationExtensions.Con 'type': 'string', 'enum': ['normal', 'compact'], 'default': 'normal', - 'markdownDescription': localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.editor.tabHeight' }, "Controls the height of editor tabs.") + 'markdownDescription': localize({ comment: ['This is the description for a setting. Values surrounded by single quotes are not to be translated.'], key: 'workbench.editor.tabHeight' }, "Controls the height of editor tabs. Also applies to the title control bar when `#workbench.editor.showTabs#` is disabled.") }, 'workbench.editor.pinnedTabSizing': { 'type': 'string', From 2e33655e9c34db7011a84a09879aef676e0bc813 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Wed, 6 Sep 2023 10:39:10 +0200 Subject: [PATCH 4/6] rename variables title height, added super methods --- .../lib/stylelint/vscode-known-variables.json | 2 +- .../parts/editor/media/notabstitlecontrol.css | 6 ++--- .../parts/editor/media/tabstitlecontrol.css | 8 +++---- .../parts/editor/media/titlecontrol.css | 2 +- .../parts/editor/noTabsTitleControl.ts | 13 +++++------ .../browser/parts/editor/tabsTitleControl.ts | 13 ++++++----- .../browser/parts/editor/titleControl.ts | 22 ++++++++++++++----- 7 files changed, 37 insertions(+), 29 deletions(-) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index 62b9f2fc563f5..f10da52142c55 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -734,7 +734,7 @@ "--tab-sizing-current-width", "--tab-sizing-fixed-min-width", "--tab-sizing-fixed-max-width", - "--tab-height", + "--title-height", "--testMessageDecorationFontFamily", "--testMessageDecorationFontSize", "--title-border-bottom-color", diff --git a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css index b737c53817c9c..5bfc46c255c47 100644 --- a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css @@ -6,7 +6,7 @@ /* Title Label */ .monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container { - height: var(--tab-height); + height: var(--title-height); display: flex; justify-content: flex-start; align-items: center; @@ -15,7 +15,7 @@ } .monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container > .title-label { - line-height: var(--tab-height); + line-height: var(--title-height); overflow: hidden; text-overflow: ellipsis; position: relative; @@ -94,7 +94,7 @@ flex: initial; opacity: 0.5; padding-right: 8px; - height: var(--tab-height); + height: var(--title-height); } .monaco-workbench .part.editor > .content .editor-group-container > .title > .title-actions .action-item { diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css index 62de2b2dc1152..68375000e588f 100644 --- a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css @@ -71,7 +71,7 @@ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container { display: flex; - height: var(--tab-height); + height: var(--title-height); scrollbar-width: none; /* Firefox: hide scrollbar */ } @@ -97,7 +97,7 @@ display: flex; white-space: nowrap; cursor: pointer; - height: var(--tab-height); + height: var(--title-height); box-sizing: border-box; padding-left: 10px; } @@ -265,7 +265,7 @@ .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { margin-top: auto; margin-bottom: auto; - line-height: var(--tab-height); /* aligns icon and label vertically centered in the tab */ + line-height: var(--title-height); /* aligns icon and label vertically centered in the tab */ } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink .tab-label, @@ -473,7 +473,7 @@ cursor: default; flex: initial; padding: 0 8px 0 4px; - height: var(--tab-height); + height: var(--title-height); } .monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-item { diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css index d627fc05a5ba8..2ab7ffcc5c335 100644 --- a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css @@ -30,7 +30,7 @@ } .monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before { - height: var(--tab-height); /* tweak the icon size of the editor labels when icons are enabled */ + height: var(--title-height); /* tweak the icon size of the editor labels when icons are enabled */ } .monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .monaco-icon-label::after, diff --git a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts index bc4e3b25e21bc..0772d57a3ceb4 100644 --- a/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/noTabsTitleControl.ts @@ -32,7 +32,9 @@ export class NoTabsTitleControl extends TitleControl { private editorLabel: IResourceLabel | undefined; private activeLabel: IRenderedEditorLabel = Object.create(null); - protected create(parent: HTMLElement): void { + protected override create(parent: HTMLElement): void { + super.create(parent); + const titleContainer = this.titleContainer = parent; titleContainer.draggable = true; @@ -50,8 +52,6 @@ export class NoTabsTitleControl extends TitleControl { this.editorLabel = this._register(this.instantiationService.createInstance(ResourceLabel, labelContainer, undefined)).element; this._register(addDisposableListener(this.editorLabel.element, EventType.CLICK, e => this.onTitleLabelClick(e))); - this.updateTabHeight(); - // Breadcrumbs this.createBreadcrumbsControl(labelContainer, { showFileIcons: false, showSymbolIcons: true, showDecorationColors: false, widgetStyles: { ...defaultBreadcrumbsWidgetStyles, breadcrumbsBackground: Color.transparent.toString() }, showPlaceholder: false }); titleContainer.classList.toggle('breadcrumbs', Boolean(this.breadcrumbsControl)); @@ -199,11 +199,8 @@ export class NoTabsTitleControl extends TitleControl { }); } - updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { - // Update tab height - if (oldOptions.tabHeight !== newOptions.tabHeight) { - this.updateTabHeight(); - } + override updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + super.updateOptions(oldOptions, newOptions); if (oldOptions.labelFormat !== newOptions.labelFormat || !equals(oldOptions.decorations, newOptions.decorations)) { this.redraw(); diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index e331f0e494593..ed3875f0cd5ab 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -163,7 +163,9 @@ export class TabsTitleControl extends TitleControl { this._register(this.tabResourceLabels.onDidChangeDecorations(() => this.doHandleDecorationsChange())); } - protected create(parent: HTMLElement): void { + protected override create(parent: HTMLElement): void { + super.create(parent); + this.titleContainer = parent; // Tabs and Actions Container (are on a single row with flex side-by-side) @@ -180,7 +182,6 @@ export class TabsTitleControl extends TitleControl { this.tabSizingFixedDisposables = this._register(new DisposableStore()); this.updateTabSizing(false); - this.updateTabHeight(); // Tabs Scrollbar this.tabsScrollbar = this.createTabsScrollbar(this.tabsContainer); @@ -202,6 +203,7 @@ export class TabsTitleControl extends TitleControl { breadcrumbsContainer.classList.add('tabs-breadcrumbs'); this.titleContainer.appendChild(breadcrumbsContainer); this.createBreadcrumbsControl(breadcrumbsContainer, { showFileIcons: true, showSymbolIcons: true, showDecorationColors: false, showPlaceholder: true }); + } private createTabsScrollbar(scrollable: HTMLElement): ScrollableElement { @@ -268,7 +270,6 @@ export class TabsTitleControl extends TitleControl { }); } - private getTabsScrollbarSizing(): number { if (this.accessor.partOptions.titleScrollbarSizing !== 'large') { return TabsTitleControl.SCROLLBAR_SIZES.default; @@ -710,7 +711,8 @@ export class TabsTitleControl extends TitleControl { this.withTab(editor, (editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTabActiveAndDirty(this.accessor.activeGroup === this.group, editor, tabContainer, tabActionBar)); } - updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + override updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + super.updateOptions(oldOptions, newOptions); // A change to a label format options requires to recompute all labels if (oldOptions.labelFormat !== newOptions.labelFormat) { @@ -733,7 +735,7 @@ export class TabsTitleControl extends TitleControl { // Update tab height if (oldOptions.tabHeight !== newOptions.tabHeight) { - this.updateTabHeight(); + this.updateTitleHeight(); } // Redraw tabs when other options change @@ -1567,7 +1569,6 @@ export class TabsTitleControl extends TitleControl { return { total, offset }; } - layout(dimensions: ITitleControlDimensions, options?: ITabsTitleControlLayoutOptions): Dimension { // Remember dimensions that we get diff --git a/src/vs/workbench/browser/parts/editor/titleControl.ts b/src/vs/workbench/browser/parts/editor/titleControl.ts index 352258bb80ab3..e3a17ba37050a 100644 --- a/src/vs/workbench/browser/parts/editor/titleControl.ts +++ b/src/vs/workbench/browser/parts/editor/titleControl.ts @@ -93,6 +93,9 @@ export abstract class TitleControl extends Themable { protected readonly groupTransfer = LocalSelectionTransfer.getInstance(); protected readonly treeItemsTransfer = LocalSelectionTransfer.getInstance(); + private static readonly EDITOR_TITLE_NORMAL = 35; + private static readonly EDITOR_TITLE_COMPACT = 22; + protected breadcrumbsControl: BreadcrumbsControl | undefined = undefined; private editorActionsToolbar: WorkbenchToolBar | undefined; @@ -150,7 +153,9 @@ export abstract class TitleControl extends Themable { this.create(parent); } - protected abstract create(parent: HTMLElement): void; + protected create(parent: HTMLElement): void { + this.updateTitleHeight(); + } protected createBreadcrumbsControl(container: HTMLElement, options: IBreadcrumbsControlOptions): void { const config = this._register(BreadcrumbsConfig.IsEnabled.bindTo(this.configurationService)); @@ -423,11 +428,18 @@ export abstract class TitleControl extends Themable { } protected get tabHeight() { - return this.accessor.partOptions.tabHeight !== 'compact' ? 35 : 22; + return this.accessor.partOptions.tabHeight !== 'compact' ? TitleControl.EDITOR_TITLE_NORMAL : TitleControl.EDITOR_TITLE_COMPACT; + } + + protected updateTitleHeight(): void { + this.parent.style.setProperty('--title-height', `${this.tabHeight}px`); } - protected updateTabHeight(): void { - this.parent.style.setProperty('--tab-height', `${this.tabHeight}px`); + updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { + // Update title height + if (oldOptions.tabHeight !== newOptions.tabHeight) { + this.updateTitleHeight(); + } } abstract openEditor(editor: EditorInput): void; @@ -454,8 +466,6 @@ export abstract class TitleControl extends Themable { abstract updateEditorDirty(editor: EditorInput): void; - abstract updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void; - abstract layout(dimensions: ITitleControlDimensions): Dimension; abstract getHeight(): IEditorGroupTitleHeight; From 908d5f155daa62529f739475848950615ba4b28f Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Wed, 6 Sep 2023 15:20:49 +0200 Subject: [PATCH 5/6] variable renaming --- .../lib/stylelint/vscode-known-variables.json | 2 +- .../parts/editor/media/notabstitlecontrol.css | 63 +-- .../parts/editor/media/tabstitlecontrol.css | 386 ++++++++++-------- .../parts/editor/media/titlecontrol.css | 34 +- .../browser/parts/editor/tabsTitleControl.ts | 10 +- .../browser/parts/editor/titleControl.ts | 14 +- 6 files changed, 278 insertions(+), 231 deletions(-) diff --git a/build/lib/stylelint/vscode-known-variables.json b/build/lib/stylelint/vscode-known-variables.json index f10da52142c55..b7d31b812d8d9 100644 --- a/build/lib/stylelint/vscode-known-variables.json +++ b/build/lib/stylelint/vscode-known-variables.json @@ -734,7 +734,7 @@ "--tab-sizing-current-width", "--tab-sizing-fixed-min-width", "--tab-sizing-fixed-max-width", - "--title-height", + "--editor-group-title-height", "--testMessageDecorationFontFamily", "--testMessageDecorationFontSize", "--title-border-bottom-color", diff --git a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css index 5bfc46c255c47..a8896eea06f07 100644 --- a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css @@ -5,8 +5,8 @@ /* Title Label */ -.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container { - height: var(--title-height); +.monaco-workbench .part.editor>.content .editor-group-container>.title>.label-container { + height: var(--editor-group-title-height); display: flex; justify-content: flex-start; align-items: center; @@ -14,39 +14,40 @@ flex: auto; } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container > .title-label { - line-height: var(--title-height); +.monaco-workbench .part.editor>.content .editor-group-container>.title>.label-container>.title-label { + line-height: var(--editor-group-title-height); overflow: hidden; text-overflow: ellipsis; position: relative; padding-left: 20px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container > .title-label > .monaco-icon-label-container { - flex: initial; /* helps to show decorations right next to the label and not at the end while still preserving text overflow ellipsis */ +.monaco-workbench .part.editor>.content .editor-group-container>.title>.label-container>.title-label>.monaco-icon-label-container { + flex: initial; + /* helps to show decorations right next to the label and not at the end while still preserving text overflow ellipsis */ } /* Breadcrumbs */ -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .no-tabs.title-label { +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .no-tabs.title-label { flex: none; } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control { +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control { flex: 1 50%; overflow: hidden; margin-left: .45em; } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { font-size: 0.9em; } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.preview .monaco-breadcrumb-item { +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control.preview .monaco-breadcrumb-item { font-style: italic; } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { content: '/'; opacity: 1; height: inherit; @@ -54,53 +55,57 @@ background-image: none; } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.backslash-path .monaco-breadcrumb-item::before { +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control.backslash-path .monaco-breadcrumb-item::before { content: '\\'; } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::before, -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder + .monaco-breadcrumb-item::before, -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.relative-path .monaco-breadcrumb-item:nth-child(2)::before, -.monaco-workbench.windows .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:nth-child(2)::before { - display: none; /* workspace folder, item following workspace folder, or relative path -> hide first seperator */ +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::before, +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder+.monaco-breadcrumb-item::before, +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control.relative-path .monaco-breadcrumb-item:nth-child(2)::before, +.monaco-workbench.windows .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:nth-child(2)::before { + display: none; + /* workspace folder, item following workspace folder, or relative path -> hide first seperator */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::after { - content: '\00a0•\00a0'; /* use dot separator for workspace folder */ +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::after { + content: '\00a0•\00a0'; + /* use dot separator for workspace folder */ padding: 0; } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { - padding-right: 4px; /* does not have trailing separator*/ +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { + padding-right: 4px; + /* does not have trailing separator*/ } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item .codicon[class*='codicon-symbol-'] { +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item .codicon[class*='codicon-symbol-'] { padding: 0 1px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item .codicon:last-child { - display: none; /* hides chevrons when no tabs visible */ +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item .codicon:last-child { + display: none; + /* hides chevrons when no tabs visible */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-icon-label::before { +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-icon-label::before { height: 18px; padding-right: 2px; } /* Editor Actions Toolbar (via title actions) */ -.monaco-workbench .part.editor > .content .editor-group-container > .title > .title-actions { +.monaco-workbench .part.editor>.content .editor-group-container>.title>.title-actions { display: flex; flex: initial; opacity: 0.5; padding-right: 8px; - height: var(--title-height); + height: var(--editor-group-title-height); } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .title-actions .action-item { +.monaco-workbench .part.editor>.content .editor-group-container>.title>.title-actions .action-item { margin-right: 4px; } -.monaco-workbench .part.editor > .content .editor-group-container.active > .title > .title-actions { +.monaco-workbench .part.editor>.content .editor-group-container.active>.title>.title-actions { opacity: 1; } diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css index 68375000e588f..77a120cec7cde 100644 --- a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css @@ -41,12 +41,13 @@ /* Title Container */ -.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container { +.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container { display: flex; - position: relative; /* position tabs border bottom or editor actions (when tabs wrap) relative to this container */ + position: relative; + /* position tabs border bottom or editor actions (when tabs wrap) relative to this container */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.tabs-border-bottom::after { +.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.tabs-border-bottom::after { content: ''; position: absolute; bottom: 0; @@ -58,101 +59,110 @@ height: 1px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container > .monaco-scrollable-element { +.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container>.monaco-scrollable-element { flex: 1; } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container > .monaco-scrollable-element .scrollbar { +.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container>.monaco-scrollable-element .scrollbar { z-index: 11; cursor: default; } /* Tabs Container */ -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container { display: flex; - height: var(--title-height); - scrollbar-width: none; /* Firefox: hide scrollbar */ + height: var(--editor-group-title-height); + scrollbar-width: none; + /* Firefox: hide scrollbar */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.scroll { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.scroll { overflow: scroll !important; } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container { +.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container { /* Enable wrapping via flex layout and dynamic height */ height: auto; flex-wrap: wrap; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container::-webkit-scrollbar { - display: none; /* Chrome + Safari: hide scrollbar */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container::-webkit-scrollbar { + display: none; + /* Chrome + Safari: hide scrollbar */ } /* Tab */ -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab { position: relative; display: flex; white-space: nowrap; cursor: pointer; - height: var(--title-height); + height: var(--editor-group-title-height); box-sizing: border-box; padding-left: 10px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab:last-child { - margin-right: var(--last-tab-margin-right); /* when tabs wrap, we need a margin away from the absolute positioned editor actions */ +.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container>.tab:last-child { + margin-right: var(--last-tab-margin-right); + /* when tabs wrap, we need a margin away from the absolute positioned editor actions */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab.last-in-row:not(:last-child) { - border-right: 0 !important; /* ensure no border for every last tab in a row except last row (#115046) */ +.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container>.tab.last-in-row:not(:last-child) { + border-right: 0 !important; + /* ensure no border for every last tab in a row except last row (#115046) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon.tab-actions-right, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon.tab-actions-off:not(.sticky-compact), -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.has-icon.tab-actions-right, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.has-icon.tab-actions-off:not(.sticky-compact) { - padding-left: 5px; /* reduce padding when we show icons and are in shrinking mode and tab actions is not left (unless sticky-compact) */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.has-icon.tab-actions-right, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.has-icon.tab-actions-off:not(.sticky-compact), +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.has-icon.tab-actions-right, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.has-icon.tab-actions-off:not(.sticky-compact) { + padding-left: 5px; + /* reduce padding when we show icons and are in shrinking mode and tab actions is not left (unless sticky-compact) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit { width: 120px; min-width: fit-content; flex-shrink: 0; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed { min-width: var(--tab-sizing-current-width, var(--tab-sizing-fixed-min-width, 50px)); max-width: var(--tab-sizing-current-width, var(--tab-sizing-fixed-max-width, 160px)); - flex: 1 0 0; /* all tabs are evenly sized and grow */ + flex: 1 0 0; + /* all tabs are evenly sized and grow */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.last-in-row { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.last-in-row { /* prevent last tab in a row from moving to next row when tab widths are * fixed in case rounding errors make the fixed tabs grow over the size * of the tabs container */ min-width: calc(var(--tab-sizing-current-width, var(--tab-sizing-fixed-min-width, 50px)) - 1px); } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab.sizing-fit.last-in-row:not(:last-child) { - flex-grow: 1; /* grow the last tab in a row for a more homogeneous look except for last row (#113801) */ +.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container>.tab.sizing-fit.last-in-row:not(:last-child) { + flex-grow: 1; + /* grow the last tab in a row for a more homogeneous look except for last row (#113801) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink { min-width: 80px; - flex-basis: 0; /* all tabs are even */ - flex-grow: 1; /* all tabs grow even */ + flex-basis: 0; + /* all tabs are even */ + flex-grow: 1; + /* all tabs grow even */ max-width: fit-content; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.sticky-compact, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.sticky-compact, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.sticky-compact, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.sticky-shrink, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.sticky-shrink, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.sticky-shrink { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.sticky-compact, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.sticky-compact, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.sticky-compact, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.sticky-shrink, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.sticky-shrink, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.sticky-shrink { /** Sticky compact/shrink/fixed tabs do not scroll in case of overflow and are always above unsticky tabs which scroll under */ position: sticky; @@ -163,9 +173,9 @@ flex-grow: 0; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.sticky-compact, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.sticky-compact, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.sticky-compact { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.sticky-compact, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.sticky-compact, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.sticky-compact { /** Sticky compact tabs have a fixed width of 38px */ width: 38px; @@ -173,9 +183,9 @@ max-width: 38px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.sticky-shrink, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.sticky-shrink, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.sticky-shrink { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.sticky-shrink, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.sticky-shrink, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.sticky-shrink { /** Sticky shrink tabs have a fixed width of 80px */ width: 80px; @@ -183,40 +193,46 @@ max-width: 80px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-fit.sticky-compact, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-shrink.sticky-compact, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-fixed.sticky-compact, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-fit.sticky-shrink, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-shrink.sticky-shrink, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-fixed.sticky-shrink { - position: static; /** disable sticky positions for sticky compact/shrink/fixed tabs if the available space is too little */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-fit.sticky-compact, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-shrink.sticky-compact, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-fixed.sticky-compact, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-fit.sticky-shrink, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-shrink.sticky-shrink, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-fixed.sticky-shrink { + position: static; + /** disable sticky positions for sticky compact/shrink/fixed tabs if the available space is too little */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.tab-actions-left::after, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.tab-actions-off::after, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.tab-actions-left::after, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.tab-actions-off::after { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.tab-actions-left::after, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.tab-actions-off::after, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.tab-actions-left::after, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.tab-actions-off::after { content: ''; display: flex; flex: 0; - width: 5px; /* reserve space to hide tab fade when close button is left or off (fixes https://github.com/microsoft/vscode/issues/45728) */ + width: 5px; + /* reserve space to hide tab fade when close button is left or off (fixes https://github.com/microsoft/vscode/issues/45728) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.tab-actions-left, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.tab-actions-left { - min-width: 80px; /* make more room for close button when it shows to the left */ - padding-right: 5px; /* we need less room when sizing is shrink/fixed */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.tab-actions-left, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.tab-actions-left { + min-width: 80px; + /* make more room for close button when it shows to the left */ + padding-right: 5px; + /* we need less room when sizing is shrink/fixed */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged { - transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (fixes https://github.com/microsoft/vscode/issues/18733) */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dragged { + transform: translate3d(0px, 0px, 0px); + /* forces tab to be drawn on a separate layer (fixes https://github.com/microsoft/vscode/issues/18733) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged-over div { - pointer-events: none; /* prevents cursor flickering (fixes https://github.com/microsoft/vscode/issues/38753) */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dragged-over div { + pointer-events: none; + /* prevents cursor flickering (fixes https://github.com/microsoft/vscode/issues/38753) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-left { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-left { flex-direction: row-reverse; padding-left: 0; padding-right: 10px; @@ -224,14 +240,15 @@ /* Tab border top/bottom */ -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-top-container, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-bottom-container { - display: none; /* hidden by default until a color is provided (see below) */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-border-top-container, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-border-bottom-container { + display: none; + /* hidden by default until a color is provided (see below) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top > .tab-border-top-container, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-border-top-container { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-top>.tab-border-top-container, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-bottom>.tab-border-bottom-container, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty-border-top>.tab-border-top-container { display: block; position: absolute; left: 0; @@ -239,21 +256,21 @@ width: 100%; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top > .tab-border-top-container { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-top>.tab-border-top-container { z-index: 6; top: 0; height: 1px; background-color: var(--tab-border-top-color); } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-bottom>.tab-border-bottom-container { z-index: 10; bottom: 0; height: 1px; background-color: var(--tab-border-bottom-color); } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-border-top-container { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty-border-top>.tab-border-top-container { z-index: 6; top: 0; height: 2px; @@ -262,20 +279,22 @@ /* Tab Label */ -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label { margin-top: auto; margin-bottom: auto; - line-height: var(--title-height); /* aligns icon and label vertically centered in the tab */ + line-height: var(--editor-group-title-height); + /* aligns icon and label vertically centered in the tab */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink .tab-label, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed .tab-label { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink .tab-label, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed .tab-label { position: relative; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .tab-label > .monaco-icon-label-container::after, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .tab-label > .monaco-icon-label-container::after { - content: ''; /* enables a linear gradient to overlay the end of the label when tabs overflow */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.tab-label>.monaco-icon-label-container::after, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.tab-label>.monaco-icon-label-container::after { + content: ''; + /* enables a linear gradient to overlay the end of the label when tabs overflow */ position: absolute; right: 0; width: 5px; @@ -287,90 +306,104 @@ height: calc(100% - 2px); } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink:focus > .tab-label > .monaco-icon-label-container::after, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed:focus > .tab-label > .monaco-icon-label-container::after { - opacity: 0; /* when tab has the focus this shade breaks the tab border (fixes https://github.com/microsoft/vscode/issues/57819) */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink:focus>.tab-label>.monaco-icon-label-container::after, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed:focus>.tab-label>.monaco-icon-label-container::after { + opacity: 0; + /* when tab has the focus this shade breaks the tab border (fixes https://github.com/microsoft/vscode/issues/57819) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .tab-label.tab-label-has-badge::after, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .tab-label.tab-label-has-badge::after { - padding-right: 5px; /* with tab sizing shrink/fixed and badges, we want a right-padding because the close button is hidden */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.tab-label.tab-label-has-badge::after, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.tab-label.tab-label-has-badge::after { + padding-right: 5px; + /* with tab sizing shrink/fixed and badges, we want a right-padding because the close button is hidden */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.tab-actions-left):not(.tab-actions-off) .tab-label { - padding-right: 5px; /* ensure that the gradient does not show when tab actions show https://github.com/microsoft/vscode/issues/189625*/ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink:not(.tab-actions-left):not(.tab-actions-off) .tab-label { + padding-right: 5px; + /* ensure that the gradient does not show when tab actions show https://github.com/microsoft/vscode/issues/189625*/ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky-compact:not(.has-icon) .monaco-icon-label { - text-align: center; /* ensure that sticky-compact tabs without icon have label centered */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky-compact:not(.has-icon) .monaco-icon-label { + text-align: center; + /* ensure that sticky-compact tabs without icon have label centered */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label > .monaco-icon-label-container { - overflow: visible; /* fixes https://github.com/microsoft/vscode/issues/20182 */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit .monaco-icon-label, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit .monaco-icon-label>.monaco-icon-label-container { + overflow: visible; + /* fixes https://github.com/microsoft/vscode/issues/20182 */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-container, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .monaco-icon-label > .monaco-icon-label-container { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.monaco-icon-label>.monaco-icon-label-container, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.monaco-icon-label>.monaco-icon-label-container { text-overflow: clip; flex: none; } -.monaco-workbench.hc-black .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-container, -.monaco-workbench.hc-light .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-container, -.monaco-workbench.hc-black .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .monaco-icon-label > .monaco-icon-label-container, -.monaco-workbench.hc-light .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .monaco-icon-label > .monaco-icon-label-container { +.monaco-workbench.hc-black .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.monaco-icon-label>.monaco-icon-label-container, +.monaco-workbench.hc-light .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.monaco-icon-label>.monaco-icon-label-container, +.monaco-workbench.hc-black .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.monaco-icon-label>.monaco-icon-label-container, +.monaco-workbench.hc-light .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.monaco-icon-label>.monaco-icon-label-container { text-overflow: ellipsis; } /* Tab Actions */ -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-actions { margin-top: auto; margin-bottom: auto; width: 28px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions > .monaco-action-bar { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-actions>.monaco-action-bar { width: 28px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-shrink > .tab-actions, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-fixed > .tab-actions { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-shrink>.tab-actions, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-fixed>.tab-actions { flex: 0; - overflow: hidden; /* let the tab actions be pushed out of view when sizing is set to shrink/fixed to make more room */ -} - -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty.tab-actions-right.sizing-shrink > .tab-actions, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky.tab-actions-right.sizing-shrink > .tab-actions, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-shrink:hover > .tab-actions, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-shrink > .tab-actions:focus-within, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty.tab-actions-right.sizing-fixed > .tab-actions, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky.tab-actions-right.sizing-fixed > .tab-actions, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-fixed:hover > .tab-actions, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-fixed > .tab-actions:focus-within { - overflow: visible; /* ...but still show the tab actions on hover, focus and when dirty or sticky */ -} - -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off:not(.dirty):not(.sticky) > .tab-actions, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off.sticky-compact > .tab-actions { - display: none; /* hide the tab actions when we are configured to hide it (unless dirty or sticky, but always when sticky-compact) */ -} - -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active > .tab-actions .action-label, /* always show tab actions for active tab */ -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab > .tab-actions .action-label:focus, /* always show tab actions on focus */ -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover > .tab-actions .action-label, /* always show tab actions on hover */ -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active:hover > .tab-actions .action-label, /* always show tab actions on hover */ -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.sticky > .tab-actions .action-label, /* always show tab actions for sticky tabs */ -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.dirty > .tab-actions .action-label { /* always show tab actions for dirty tabs */ + overflow: hidden; + /* let the tab actions be pushed out of view when sizing is set to shrink/fixed to make more room */ +} + +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty.tab-actions-right.sizing-shrink>.tab-actions, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky.tab-actions-right.sizing-shrink>.tab-actions, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-shrink:hover>.tab-actions, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-shrink>.tab-actions:focus-within, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty.tab-actions-right.sizing-fixed>.tab-actions, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky.tab-actions-right.sizing-fixed>.tab-actions, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-fixed:hover>.tab-actions, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-fixed>.tab-actions:focus-within { + overflow: visible; + /* ...but still show the tab actions on hover, focus and when dirty or sticky */ +} + +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off:not(.dirty):not(.sticky)>.tab-actions, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off.sticky-compact>.tab-actions { + display: none; + /* hide the tab actions when we are configured to hide it (unless dirty or sticky, but always when sticky-compact) */ +} + +.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.active>.tab-actions .action-label, +/* always show tab actions for active tab */ +.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-actions .action-label:focus, +/* always show tab actions on focus */ +.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab:hover>.tab-actions .action-label, +/* always show tab actions on hover */ +.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.active:hover>.tab-actions .action-label, +/* always show tab actions on hover */ +.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.sticky>.tab-actions .action-label, +/* always show tab actions for sticky tabs */ +.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.dirty>.tab-actions .action-label { + /* always show tab actions for dirty tabs */ opacity: 1; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions .actions-container { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-actions .actions-container { justify-content: center; } -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab > .tab-actions .action-label.codicon { +.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-actions .action-label.codicon { color: inherit; font-size: 16px; padding: 2px; @@ -378,80 +411,90 @@ height: 16px; } -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.sticky.dirty > .tab-actions .action-label:not(:hover)::before, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky.dirty > .tab-actions .action-label:not(:hover)::before { - content: "\ebb2"; /* use `pinned-dirty` icon unicode for sticky-dirty indication */ +.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.sticky.dirty>.tab-actions .action-label:not(:hover)::before, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky.dirty>.tab-actions .action-label:not(:hover)::before { + content: "\ebb2"; + /* use `pinned-dirty` icon unicode for sticky-dirty indication */ } -.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.dirty > .tab-actions .action-label:not(:hover)::before, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label:not(:hover)::before { - content: "\ea71"; /* use `circle-filled` icon unicode for dirty indication */ +.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.dirty>.tab-actions .action-label:not(:hover)::before, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty>.tab-actions .action-label:not(:hover)::before { + content: "\ea71"; + /* use `circle-filled` icon unicode for dirty indication */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-actions .action-label, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover > .tab-actions .action-label, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky > .tab-actions .action-label, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover > .tab-actions .action-label { - opacity: 0.5; /* show tab actions dimmed for inactive group */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active>.tab-actions .action-label, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active:hover>.tab-actions .action-label, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty>.tab-actions .action-label, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky>.tab-actions .action-label, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab:hover>.tab-actions .action-label { + opacity: 0.5; + /* show tab actions dimmed for inactive group */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions .action-label { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-actions .action-label { opacity: 0; } /* Tab Actions: Off */ -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off { - padding-right: 10px; /* give a little bit more room if tab actions is off */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off { + padding-right: 10px; + /* give a little bit more room if tab actions is off */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.tab-actions-off:not(.sticky-compact), -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.tab-actions-off:not(.sticky-compact) { - padding-right: 5px; /* we need less room when sizing is shrink/fixed (unless tab is sticky-compact) */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.tab-actions-off:not(.sticky-compact), +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.tab-actions-off:not(.sticky-compact) { + padding-right: 5px; + /* we need less room when sizing is shrink/fixed (unless tab is sticky-compact) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off.dirty-border-top > .tab-actions { - display: none; /* hide dirty state when highlightModifiedTabs is enabled and when running without tab actions */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off.dirty-border-top>.tab-actions { + display: none; + /* hide dirty state when highlightModifiedTabs is enabled and when running without tab actions */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off.dirty:not(.dirty-border-top):not(.sticky-compact), -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off.sticky:not(.sticky-compact) { - padding-right: 0; /* remove extra padding when we are running without tab actions (unless tab is sticky-compact) */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off.dirty:not(.dirty-border-top):not(.sticky-compact), +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off.sticky:not(.sticky-compact) { + padding-right: 0; + /* remove extra padding when we are running without tab actions (unless tab is sticky-compact) */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off > .tab-actions { - pointer-events: none; /* don't allow tab actions to be clicked when running without tab actions */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off>.tab-actions { + pointer-events: none; + /* don't allow tab actions to be clicked when running without tab actions */ } /* Breadcrumbs */ -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control { flex: 1 100%; height: 22px; cursor: default; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label { height: 22px; line-height: 22px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label::before { - height: 22px; /* tweak the icon size of the editor labels when icons are enabled */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label::before { + height: 22px; + /* tweak the icon size of the editor labels when icons are enabled */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .outline-element-icon { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .outline-element-icon { padding-right: 3px; - height: 22px; /* tweak the icon size of the editor labels when icons are enabled */ + height: 22px; + /* tweak the icon size of the editor labels when icons are enabled */ line-height: 22px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { max-width: 80%; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { width: 16px; height: 22px; display: flex; @@ -459,28 +502,29 @@ justify-content: center; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { padding-right: 8px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child .codicon:last-child { - display: none; /* hides chevrons when last item */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child .codicon:last-child { + display: none; + /* hides chevrons when last item */ } /* Editor Actions Toolbar */ -.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions { +.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions { cursor: default; flex: initial; padding: 0 8px 0 4px; - height: var(--title-height); + height: var(--editor-group-title-height); } -.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-item { +.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions .action-item { margin-right: 4px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .editor-actions { +.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .editor-actions { /* When tabs are wrapped, position the editor actions at the end of the very last row */ position: absolute; diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css index 2ab7ffcc5c335..ff27cffffb26e 100644 --- a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css @@ -5,37 +5,39 @@ /* Editor Label */ -.monaco-workbench .part.editor > .content .editor-group-container > .title { +.monaco-workbench .part.editor>.content .editor-group-container>.title { cursor: pointer; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { +.monaco-workbench .part.editor>.content .editor-group-container>.title .title-label, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label { white-space: nowrap; flex: 1; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a { +.monaco-workbench .part.editor>.content .editor-group-container>.title .title-label a, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label a { font-size: 13px; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .monaco-icon-label::before, -.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a, -.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label h2, -.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label span { +.monaco-workbench .part.editor>.content .editor-group-container>.title .monaco-icon-label::before, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .monaco-icon-label::before, +.monaco-workbench .part.editor>.content .editor-group-container>.title .title-label a, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label a, +.monaco-workbench .part.editor>.content .editor-group-container>.title .title-label h2, +.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label span { cursor: pointer; } -.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before { - height: var(--title-height); /* tweak the icon size of the editor labels when icons are enabled */ +.monaco-workbench .part.editor>.content .editor-group-container>.title .monaco-icon-label::before { + height: var(--editor-group-title-height); + /* tweak the icon size of the editor labels when icons are enabled */ } -.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .monaco-icon-label::after, -.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .monaco-icon-label::after { - margin-right: 0; /* by default the icon label has a padding right and this isn't wanted when not showing tabs and not showing breadcrumbs */ +.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .monaco-icon-label::after, +.monaco-workbench .part.editor>.content .editor-group-container>.title.tabs .monaco-icon-label::after { + margin-right: 0; + /* by default the icon label has a padding right and this isn't wanted when not showing tabs and not showing breadcrumbs */ } /* Drag and Drop */ diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts index ed3875f0cd5ab..5d6b14d633a94 100644 --- a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts @@ -203,7 +203,6 @@ export class TabsTitleControl extends TitleControl { breadcrumbsContainer.classList.add('tabs-breadcrumbs'); this.titleContainer.appendChild(breadcrumbsContainer); this.createBreadcrumbsControl(breadcrumbsContainer, { showFileIcons: true, showSymbolIcons: true, showDecorationColors: false, showPlaceholder: true }); - } private createTabsScrollbar(scrollable: HTMLElement): ScrollableElement { @@ -733,11 +732,6 @@ export class TabsTitleControl extends TitleControl { this.updateTabSizing(true); } - // Update tab height - if (oldOptions.tabHeight !== newOptions.tabHeight) { - this.updateTitleHeight(); - } - // Redraw tabs when other options change if ( oldOptions.labelFormat !== newOptions.labelFormat || @@ -1556,7 +1550,7 @@ export class TabsTitleControl extends TitleControl { if (this.accessor.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains('wrapping')) { total = this.tabsAndActionsContainer.offsetHeight; } else { - total = this.tabHeight; + total = this.titleHeight; } const offset = total; @@ -1714,7 +1708,7 @@ export class TabsTitleControl extends TitleControl { if (tabsWrapMultiLine) { if ( (tabsContainer.offsetHeight > dimensions.available.height) || // if height exceeds available height - (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.tabHeight) || // if wrapping is not needed anymore + (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.titleHeight) || // if wrapping is not needed anymore (!lastTabFitsWrapped()) // if last tab does not fit anymore ) { updateTabsWrapping(false); diff --git a/src/vs/workbench/browser/parts/editor/titleControl.ts b/src/vs/workbench/browser/parts/editor/titleControl.ts index e3a17ba37050a..22187e0daee5e 100644 --- a/src/vs/workbench/browser/parts/editor/titleControl.ts +++ b/src/vs/workbench/browser/parts/editor/titleControl.ts @@ -93,8 +93,10 @@ export abstract class TitleControl extends Themable { protected readonly groupTransfer = LocalSelectionTransfer.getInstance(); protected readonly treeItemsTransfer = LocalSelectionTransfer.getInstance(); - private static readonly EDITOR_TITLE_NORMAL = 35; - private static readonly EDITOR_TITLE_COMPACT = 22; + private static readonly EDITOR_TITLE_HEIGHT = { + normal: 35, + compact: 22 + }; protected breadcrumbsControl: BreadcrumbsControl | undefined = undefined; @@ -118,7 +120,7 @@ export abstract class TitleControl extends Themable { private renderDropdownAsChildElement: boolean; constructor( - protected parent: HTMLElement, + private parent: HTMLElement, protected accessor: IEditorGroupsAccessor, protected group: IEditorGroupView, @IContextMenuService protected readonly contextMenuService: IContextMenuService, @@ -427,12 +429,12 @@ export abstract class TitleControl extends Themable { return keybinding ? keybinding.getLabel() ?? undefined : undefined; } - protected get tabHeight() { - return this.accessor.partOptions.tabHeight !== 'compact' ? TitleControl.EDITOR_TITLE_NORMAL : TitleControl.EDITOR_TITLE_COMPACT; + protected get titleHeight() { + return this.accessor.partOptions.tabHeight !== 'compact' ? TitleControl.EDITOR_TITLE_HEIGHT.normal : TitleControl.EDITOR_TITLE_HEIGHT.compact; } protected updateTitleHeight(): void { - this.parent.style.setProperty('--title-height', `${this.tabHeight}px`); + this.parent.style.setProperty('--editor-group-title-height', `${this.titleHeight}px`); } updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void { From ebf1fa42c5c13cc5bf8986af023589c5355dc182 Mon Sep 17 00:00:00 2001 From: BeniBenj Date: Wed, 6 Sep 2023 15:46:01 +0200 Subject: [PATCH 6/6] reformat --- .../parts/editor/media/notabstitlecontrol.css | 57 ++- .../parts/editor/media/tabstitlecontrol.css | 380 ++++++++---------- .../parts/editor/media/titlecontrol.css | 34 +- 3 files changed, 210 insertions(+), 261 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css index a8896eea06f07..81562a812815f 100644 --- a/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/notabstitlecontrol.css @@ -5,7 +5,7 @@ /* Title Label */ -.monaco-workbench .part.editor>.content .editor-group-container>.title>.label-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container { height: var(--editor-group-title-height); display: flex; justify-content: flex-start; @@ -14,7 +14,7 @@ flex: auto; } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.label-container>.title-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container > .title-label { line-height: var(--editor-group-title-height); overflow: hidden; text-overflow: ellipsis; @@ -22,32 +22,31 @@ padding-left: 20px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.label-container>.title-label>.monaco-icon-label-container { - flex: initial; - /* helps to show decorations right next to the label and not at the end while still preserving text overflow ellipsis */ +.monaco-workbench .part.editor > .content .editor-group-container > .title > .label-container > .title-label > .monaco-icon-label-container { + flex: initial; /* helps to show decorations right next to the label and not at the end while still preserving text overflow ellipsis */ } /* Breadcrumbs */ -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .no-tabs.title-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .no-tabs.title-label { flex: none; } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control { flex: 1 50%; overflow: hidden; margin-left: .45em; } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { font-size: 0.9em; } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control.preview .monaco-breadcrumb-item { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.preview .monaco-breadcrumb-item { font-style: italic; } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { content: '/'; opacity: 1; height: inherit; @@ -55,46 +54,42 @@ background-image: none; } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control.backslash-path .monaco-breadcrumb-item::before { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.backslash-path .monaco-breadcrumb-item::before { content: '\\'; } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::before, -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder+.monaco-breadcrumb-item::before, -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control.relative-path .monaco-breadcrumb-item:nth-child(2)::before, -.monaco-workbench.windows .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:nth-child(2)::before { - display: none; - /* workspace folder, item following workspace folder, or relative path -> hide first seperator */ +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder + .monaco-breadcrumb-item::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control.relative-path .monaco-breadcrumb-item:nth-child(2)::before, +.monaco-workbench.windows .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:nth-child(2)::before { + display: none; /* workspace folder, item following workspace folder, or relative path -> hide first seperator */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::after { - content: '\00a0•\00a0'; - /* use dot separator for workspace folder */ +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item.root_folder::after { + content: '\00a0•\00a0'; /* use dot separator for workspace folder */ padding: 0; } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { - padding-right: 4px; - /* does not have trailing separator*/ +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { + padding-right: 4px; /* does not have trailing separator*/ } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item .codicon[class*='codicon-symbol-'] { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item .codicon[class*='codicon-symbol-'] { padding: 0 1px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item .codicon:last-child { - display: none; - /* hides chevrons when no tabs visible */ +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item .codicon:last-child { + display: none; /* hides chevrons when no tabs visible */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .breadcrumbs-control .monaco-icon-label::before { +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .breadcrumbs-control .monaco-icon-label::before { height: 18px; padding-right: 2px; } /* Editor Actions Toolbar (via title actions) */ -.monaco-workbench .part.editor>.content .editor-group-container>.title>.title-actions { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .title-actions { display: flex; flex: initial; opacity: 0.5; @@ -102,10 +97,10 @@ height: var(--editor-group-title-height); } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.title-actions .action-item { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .title-actions .action-item { margin-right: 4px; } -.monaco-workbench .part.editor>.content .editor-group-container.active>.title>.title-actions { +.monaco-workbench .part.editor > .content .editor-group-container.active > .title > .title-actions { opacity: 1; } diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css index 77a120cec7cde..f5b39db85fcf0 100644 --- a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css @@ -41,13 +41,12 @@ /* Title Container */ -.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container { display: flex; - position: relative; - /* position tabs border bottom or editor actions (when tabs wrap) relative to this container */ + position: relative; /* position tabs border bottom or editor actions (when tabs wrap) relative to this container */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.tabs-border-bottom::after { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.tabs-border-bottom::after { content: ''; position: absolute; bottom: 0; @@ -59,43 +58,41 @@ height: 1px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container>.monaco-scrollable-element { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container > .monaco-scrollable-element { flex: 1; } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container>.monaco-scrollable-element .scrollbar { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container > .monaco-scrollable-element .scrollbar { z-index: 11; cursor: default; } /* Tabs Container */ -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container { display: flex; height: var(--editor-group-title-height); - scrollbar-width: none; - /* Firefox: hide scrollbar */ + scrollbar-width: none; /* Firefox: hide scrollbar */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.scroll { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.scroll { overflow: scroll !important; } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container { /* Enable wrapping via flex layout and dynamic height */ height: auto; flex-wrap: wrap; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container::-webkit-scrollbar { - display: none; - /* Chrome + Safari: hide scrollbar */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container::-webkit-scrollbar { + display: none; /* Chrome + Safari: hide scrollbar */ } /* Tab */ -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab { position: relative; display: flex; white-space: nowrap; @@ -105,64 +102,57 @@ padding-left: 10px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container>.tab:last-child { - margin-right: var(--last-tab-margin-right); - /* when tabs wrap, we need a margin away from the absolute positioned editor actions */ +.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab:last-child { + margin-right: var(--last-tab-margin-right); /* when tabs wrap, we need a margin away from the absolute positioned editor actions */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container>.tab.last-in-row:not(:last-child) { - border-right: 0 !important; - /* ensure no border for every last tab in a row except last row (#115046) */ +.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab.last-in-row:not(:last-child) { + border-right: 0 !important; /* ensure no border for every last tab in a row except last row (#115046) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.has-icon.tab-actions-right, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.has-icon.tab-actions-off:not(.sticky-compact), -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.has-icon.tab-actions-right, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.has-icon.tab-actions-off:not(.sticky-compact) { - padding-left: 5px; - /* reduce padding when we show icons and are in shrinking mode and tab actions is not left (unless sticky-compact) */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon.tab-actions-right, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.has-icon.tab-actions-off:not(.sticky-compact), +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.has-icon.tab-actions-right, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.has-icon.tab-actions-off:not(.sticky-compact) { + padding-left: 5px; /* reduce padding when we show icons and are in shrinking mode and tab actions is not left (unless sticky-compact) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit { width: 120px; min-width: fit-content; flex-shrink: 0; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed { min-width: var(--tab-sizing-current-width, var(--tab-sizing-fixed-min-width, 50px)); max-width: var(--tab-sizing-current-width, var(--tab-sizing-fixed-max-width, 160px)); - flex: 1 0 0; - /* all tabs are evenly sized and grow */ + flex: 1 0 0; /* all tabs are evenly sized and grow */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.last-in-row { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.last-in-row { /* prevent last tab in a row from moving to next row when tab widths are * fixed in case rounding errors make the fixed tabs grow over the size * of the tabs container */ min-width: calc(var(--tab-sizing-current-width, var(--tab-sizing-fixed-min-width, 50px)) - 1px); } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .tabs-container>.tab.sizing-fit.last-in-row:not(:last-child) { - flex-grow: 1; - /* grow the last tab in a row for a more homogeneous look except for last row (#113801) */ +.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab.sizing-fit.last-in-row:not(:last-child) { + flex-grow: 1; /* grow the last tab in a row for a more homogeneous look except for last row (#113801) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink { min-width: 80px; - flex-basis: 0; - /* all tabs are even */ - flex-grow: 1; - /* all tabs grow even */ + flex-basis: 0; /* all tabs are even */ + flex-grow: 1; /* all tabs grow even */ max-width: fit-content; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.sticky-compact, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.sticky-compact, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.sticky-compact, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.sticky-shrink, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.sticky-shrink, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.sticky-shrink { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.sticky-compact, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.sticky-compact, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.sticky-compact, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.sticky-shrink, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.sticky-shrink, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.sticky-shrink { /** Sticky compact/shrink/fixed tabs do not scroll in case of overflow and are always above unsticky tabs which scroll under */ position: sticky; @@ -173,9 +163,9 @@ flex-grow: 0; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.sticky-compact, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.sticky-compact, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.sticky-compact { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.sticky-compact, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.sticky-compact, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.sticky-compact { /** Sticky compact tabs have a fixed width of 38px */ width: 38px; @@ -183,9 +173,9 @@ max-width: 38px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit.sticky-shrink, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.sticky-shrink, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.sticky-shrink { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit.sticky-shrink, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.sticky-shrink, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.sticky-shrink { /** Sticky shrink tabs have a fixed width of 80px */ width: 80px; @@ -193,46 +183,40 @@ max-width: 80px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-fit.sticky-compact, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-shrink.sticky-compact, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-fixed.sticky-compact, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-fit.sticky-shrink, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-shrink.sticky-shrink, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container.disable-sticky-tabs>.tab.sizing-fixed.sticky-shrink { - position: static; - /** disable sticky positions for sticky compact/shrink/fixed tabs if the available space is too little */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-fit.sticky-compact, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-shrink.sticky-compact, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-fixed.sticky-compact, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-fit.sticky-shrink, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-shrink.sticky-shrink, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container.disable-sticky-tabs > .tab.sizing-fixed.sticky-shrink { + position: static; /** disable sticky positions for sticky compact/shrink/fixed tabs if the available space is too little */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.tab-actions-left::after, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.tab-actions-off::after, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.tab-actions-left::after, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.tab-actions-off::after { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.tab-actions-left::after, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.tab-actions-off::after, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.tab-actions-left::after, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.tab-actions-off::after { content: ''; display: flex; flex: 0; - width: 5px; - /* reserve space to hide tab fade when close button is left or off (fixes https://github.com/microsoft/vscode/issues/45728) */ + width: 5px; /* reserve space to hide tab fade when close button is left or off (fixes https://github.com/microsoft/vscode/issues/45728) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.tab-actions-left, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.tab-actions-left { - min-width: 80px; - /* make more room for close button when it shows to the left */ - padding-right: 5px; - /* we need less room when sizing is shrink/fixed */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.tab-actions-left, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.tab-actions-left { + min-width: 80px; /* make more room for close button when it shows to the left */ + padding-right: 5px; /* we need less room when sizing is shrink/fixed */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dragged { - transform: translate3d(0px, 0px, 0px); - /* forces tab to be drawn on a separate layer (fixes https://github.com/microsoft/vscode/issues/18733) */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged { + transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (fixes https://github.com/microsoft/vscode/issues/18733) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dragged-over div { - pointer-events: none; - /* prevents cursor flickering (fixes https://github.com/microsoft/vscode/issues/38753) */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged-over div { + pointer-events: none; /* prevents cursor flickering (fixes https://github.com/microsoft/vscode/issues/38753) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-left { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-left { flex-direction: row-reverse; padding-left: 0; padding-right: 10px; @@ -240,15 +224,14 @@ /* Tab border top/bottom */ -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-border-top-container, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-border-bottom-container { - display: none; - /* hidden by default until a color is provided (see below) */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-top-container, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-border-bottom-container { + display: none; /* hidden by default until a color is provided (see below) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-top>.tab-border-top-container, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-bottom>.tab-border-bottom-container, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty-border-top>.tab-border-top-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top > .tab-border-top-container, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-border-top-container { display: block; position: absolute; left: 0; @@ -256,21 +239,21 @@ width: 100%; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-top>.tab-border-top-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-top > .tab-border-top-container { z-index: 6; top: 0; height: 1px; background-color: var(--tab-border-top-color); } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-bottom>.tab-border-bottom-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active.tab-border-bottom > .tab-border-bottom-container { z-index: 10; bottom: 0; height: 1px; background-color: var(--tab-border-bottom-color); } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty-border-top>.tab-border-top-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty-border-top > .tab-border-top-container { z-index: 6; top: 0; height: 2px; @@ -279,22 +262,20 @@ /* Tab Label */ -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { margin-top: auto; margin-bottom: auto; - line-height: var(--editor-group-title-height); - /* aligns icon and label vertically centered in the tab */ + line-height: var(--editor-group-title-height); /* aligns icon and label vertically centered in the tab */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink .tab-label, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed .tab-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink .tab-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed .tab-label { position: relative; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.tab-label>.monaco-icon-label-container::after, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.tab-label>.monaco-icon-label-container::after { - content: ''; - /* enables a linear gradient to overlay the end of the label when tabs overflow */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .tab-label > .monaco-icon-label-container::after, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .tab-label > .monaco-icon-label-container::after { + content: ''; /* enables a linear gradient to overlay the end of the label when tabs overflow */ position: absolute; right: 0; width: 5px; @@ -306,104 +287,90 @@ height: calc(100% - 2px); } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink:focus>.tab-label>.monaco-icon-label-container::after, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed:focus>.tab-label>.monaco-icon-label-container::after { - opacity: 0; - /* when tab has the focus this shade breaks the tab border (fixes https://github.com/microsoft/vscode/issues/57819) */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink:focus > .tab-label > .monaco-icon-label-container::after, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed:focus > .tab-label > .monaco-icon-label-container::after { + opacity: 0; /* when tab has the focus this shade breaks the tab border (fixes https://github.com/microsoft/vscode/issues/57819) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.tab-label.tab-label-has-badge::after, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.tab-label.tab-label-has-badge::after { - padding-right: 5px; - /* with tab sizing shrink/fixed and badges, we want a right-padding because the close button is hidden */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .tab-label.tab-label-has-badge::after, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .tab-label.tab-label-has-badge::after { + padding-right: 5px; /* with tab sizing shrink/fixed and badges, we want a right-padding because the close button is hidden */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink:not(.tab-actions-left):not(.tab-actions-off) .tab-label { - padding-right: 5px; - /* ensure that the gradient does not show when tab actions show https://github.com/microsoft/vscode/issues/189625*/ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink:not(.tab-actions-left):not(.tab-actions-off) .tab-label { + padding-right: 5px; /* ensure that the gradient does not show when tab actions show https://github.com/microsoft/vscode/issues/189625*/ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky-compact:not(.has-icon) .monaco-icon-label { - text-align: center; - /* ensure that sticky-compact tabs without icon have label centered */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky-compact:not(.has-icon) .monaco-icon-label { + text-align: center; /* ensure that sticky-compact tabs without icon have label centered */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit .monaco-icon-label, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fit .monaco-icon-label>.monaco-icon-label-container { - overflow: visible; - /* fixes https://github.com/microsoft/vscode/issues/20182 */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fit .monaco-icon-label > .monaco-icon-label-container { + overflow: visible; /* fixes https://github.com/microsoft/vscode/issues/20182 */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.monaco-icon-label>.monaco-icon-label-container, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.monaco-icon-label>.monaco-icon-label-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-container, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .monaco-icon-label > .monaco-icon-label-container { text-overflow: clip; flex: none; } -.monaco-workbench.hc-black .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.monaco-icon-label>.monaco-icon-label-container, -.monaco-workbench.hc-light .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.monaco-icon-label>.monaco-icon-label-container, -.monaco-workbench.hc-black .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.monaco-icon-label>.monaco-icon-label-container, -.monaco-workbench.hc-light .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed>.monaco-icon-label>.monaco-icon-label-container { +.monaco-workbench.hc-black .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-container, +.monaco-workbench.hc-light .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink > .monaco-icon-label > .monaco-icon-label-container, +.monaco-workbench.hc-black .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .monaco-icon-label > .monaco-icon-label-container, +.monaco-workbench.hc-light .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed > .monaco-icon-label > .monaco-icon-label-container { text-overflow: ellipsis; } /* Tab Actions */ -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-actions { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions { margin-top: auto; margin-bottom: auto; width: 28px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-actions>.monaco-action-bar { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions > .monaco-action-bar { width: 28px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-shrink>.tab-actions, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-fixed>.tab-actions { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-shrink > .tab-actions, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-fixed > .tab-actions { flex: 0; - overflow: hidden; - /* let the tab actions be pushed out of view when sizing is set to shrink/fixed to make more room */ -} - -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty.tab-actions-right.sizing-shrink>.tab-actions, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky.tab-actions-right.sizing-shrink>.tab-actions, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-shrink:hover>.tab-actions, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-shrink>.tab-actions:focus-within, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty.tab-actions-right.sizing-fixed>.tab-actions, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky.tab-actions-right.sizing-fixed>.tab-actions, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-fixed:hover>.tab-actions, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-right.sizing-fixed>.tab-actions:focus-within { - overflow: visible; - /* ...but still show the tab actions on hover, focus and when dirty or sticky */ -} - -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off:not(.dirty):not(.sticky)>.tab-actions, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off.sticky-compact>.tab-actions { - display: none; - /* hide the tab actions when we are configured to hide it (unless dirty or sticky, but always when sticky-compact) */ -} - -.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.active>.tab-actions .action-label, -/* always show tab actions for active tab */ -.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-actions .action-label:focus, -/* always show tab actions on focus */ -.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab:hover>.tab-actions .action-label, -/* always show tab actions on hover */ -.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.active:hover>.tab-actions .action-label, -/* always show tab actions on hover */ -.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.sticky>.tab-actions .action-label, -/* always show tab actions for sticky tabs */ -.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.dirty>.tab-actions .action-label { - /* always show tab actions for dirty tabs */ + overflow: hidden; /* let the tab actions be pushed out of view when sizing is set to shrink/fixed to make more room */ +} + +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty.tab-actions-right.sizing-shrink > .tab-actions, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky.tab-actions-right.sizing-shrink > .tab-actions, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-shrink:hover > .tab-actions, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-shrink > .tab-actions:focus-within, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty.tab-actions-right.sizing-fixed > .tab-actions, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky.tab-actions-right.sizing-fixed > .tab-actions, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-fixed:hover > .tab-actions, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-right.sizing-fixed > .tab-actions:focus-within { + overflow: visible; /* ...but still show the tab actions on hover, focus and when dirty or sticky */ +} + +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off:not(.dirty):not(.sticky) > .tab-actions, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off.sticky-compact > .tab-actions { + display: none; /* hide the tab actions when we are configured to hide it (unless dirty or sticky, but always when sticky-compact) */ +} + +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active > .tab-actions .action-label, /* always show tab actions for active tab */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab > .tab-actions .action-label:focus, /* always show tab actions on focus */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover > .tab-actions .action-label, /* always show tab actions on hover */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active:hover > .tab-actions .action-label, /* always show tab actions on hover */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.sticky > .tab-actions .action-label, /* always show tab actions for sticky tabs */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.dirty > .tab-actions .action-label { /* always show tab actions for dirty tabs */ opacity: 1; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-actions .actions-container { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions .actions-container { justify-content: center; } -.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-actions .action-label.codicon { +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab > .tab-actions .action-label.codicon { color: inherit; font-size: 16px; padding: 2px; @@ -411,90 +378,80 @@ height: 16px; } -.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.sticky.dirty>.tab-actions .action-label:not(:hover)::before, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky.dirty>.tab-actions .action-label:not(:hover)::before { - content: "\ebb2"; - /* use `pinned-dirty` icon unicode for sticky-dirty indication */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.sticky.dirty > .tab-actions .action-label:not(:hover)::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky.dirty > .tab-actions .action-label:not(:hover)::before { + content: "\ebb2"; /* use `pinned-dirty` icon unicode for sticky-dirty indication */ } -.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab.dirty>.tab-actions .action-label:not(:hover)::before, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty>.tab-actions .action-label:not(:hover)::before { - content: "\ea71"; - /* use `circle-filled` icon unicode for dirty indication */ +.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.dirty > .tab-actions .action-label:not(:hover)::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label:not(:hover)::before { + content: "\ea71"; /* use `circle-filled` icon unicode for dirty indication */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active>.tab-actions .action-label, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active:hover>.tab-actions .action-label, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.dirty>.tab-actions .action-label, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sticky>.tab-actions .action-label, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab:hover>.tab-actions .action-label { - opacity: 0.5; - /* show tab actions dimmed for inactive group */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-actions .action-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover > .tab-actions .action-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky > .tab-actions .action-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover > .tab-actions .action-label { + opacity: 0.5; /* show tab actions dimmed for inactive group */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-actions .action-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab > .tab-actions .action-label { opacity: 0; } /* Tab Actions: Off */ -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off { - padding-right: 10px; - /* give a little bit more room if tab actions is off */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off { + padding-right: 10px; /* give a little bit more room if tab actions is off */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink.tab-actions-off:not(.sticky-compact), -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-fixed.tab-actions-off:not(.sticky-compact) { - padding-right: 5px; - /* we need less room when sizing is shrink/fixed (unless tab is sticky-compact) */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-shrink.tab-actions-off:not(.sticky-compact), +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sizing-fixed.tab-actions-off:not(.sticky-compact) { + padding-right: 5px; /* we need less room when sizing is shrink/fixed (unless tab is sticky-compact) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off.dirty-border-top>.tab-actions { - display: none; - /* hide dirty state when highlightModifiedTabs is enabled and when running without tab actions */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off.dirty-border-top > .tab-actions { + display: none; /* hide dirty state when highlightModifiedTabs is enabled and when running without tab actions */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off.dirty:not(.dirty-border-top):not(.sticky-compact), -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off.sticky:not(.sticky-compact) { - padding-right: 0; - /* remove extra padding when we are running without tab actions (unless tab is sticky-compact) */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off.dirty:not(.dirty-border-top):not(.sticky-compact), +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off.sticky:not(.sticky-compact) { + padding-right: 0; /* remove extra padding when we are running without tab actions (unless tab is sticky-compact) */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.tab-actions-off>.tab-actions { - pointer-events: none; - /* don't allow tab actions to be clicked when running without tab actions */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.tab-actions-off > .tab-actions { + pointer-events: none; /* don't allow tab actions to be clicked when running without tab actions */ } /* Breadcrumbs */ -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control { flex: 1 100%; height: 22px; cursor: default; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label { height: 22px; line-height: 22px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label::before { - height: 22px; - /* tweak the icon size of the editor labels when icons are enabled */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-icon-label::before { + height: 22px; /* tweak the icon size of the editor labels when icons are enabled */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .outline-element-icon { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .outline-element-icon { padding-right: 3px; - height: 22px; - /* tweak the icon size of the editor labels when icons are enabled */ + height: 22px; /* tweak the icon size of the editor labels when icons are enabled */ line-height: 22px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item { max-width: 80%; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item::before { width: 16px; height: 22px; display: flex; @@ -502,29 +459,28 @@ justify-content: center; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child { padding-right: 8px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child .codicon:last-child { - display: none; - /* hides chevrons when last item */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control .monaco-breadcrumb-item:last-child .codicon:last-child { + display: none; /* hides chevrons when last item */ } /* Editor Actions Toolbar */ -.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions { +.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions { cursor: default; flex: initial; padding: 0 8px 0 4px; height: var(--editor-group-title-height); } -.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions .action-item { +.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .action-item { margin-right: 4px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title>.tabs-and-actions-container.wrapping .editor-actions { +.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .editor-actions { /* When tabs are wrapped, position the editor actions at the end of the very last row */ position: absolute; diff --git a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css index ff27cffffb26e..0b22793aacd05 100644 --- a/src/vs/workbench/browser/parts/editor/media/titlecontrol.css +++ b/src/vs/workbench/browser/parts/editor/media/titlecontrol.css @@ -5,39 +5,37 @@ /* Editor Label */ -.monaco-workbench .part.editor>.content .editor-group-container>.title { +.monaco-workbench .part.editor > .content .editor-group-container > .title { cursor: pointer; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .title-label, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label { +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label { white-space: nowrap; flex: 1; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .title-label a, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label a { +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a { font-size: 13px; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .monaco-icon-label::before, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .monaco-icon-label::before, -.monaco-workbench .part.editor>.content .editor-group-container>.title .title-label a, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label a, -.monaco-workbench .part.editor>.content .editor-group-container>.title .title-label h2, -.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .tab-label span { +.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .monaco-icon-label::before, +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label a, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label a, +.monaco-workbench .part.editor > .content .editor-group-container > .title .title-label h2, +.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .tab-label span { cursor: pointer; } -.monaco-workbench .part.editor>.content .editor-group-container>.title .monaco-icon-label::before { - height: var(--editor-group-title-height); - /* tweak the icon size of the editor labels when icons are enabled */ +.monaco-workbench .part.editor > .content .editor-group-container > .title .monaco-icon-label::before { + height: var(--editor-group-title-height); /* tweak the icon size of the editor labels when icons are enabled */ } -.monaco-workbench .part.editor>.content .editor-group-container>.title.breadcrumbs .monaco-icon-label::after, -.monaco-workbench .part.editor>.content .editor-group-container>.title.tabs .monaco-icon-label::after { - margin-right: 0; - /* by default the icon label has a padding right and this isn't wanted when not showing tabs and not showing breadcrumbs */ +.monaco-workbench .part.editor > .content .editor-group-container > .title.breadcrumbs .monaco-icon-label::after, +.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs .monaco-icon-label::after { + margin-right: 0; /* by default the icon label has a padding right and this isn't wanted when not showing tabs and not showing breadcrumbs */ } /* Drag and Drop */