@codingame/monaco-vscode-api 36.2.7 → 37.0.0

package/vscode/src/vs/workbench/browser/parts/editor/editorTabsControl.js

@@ -7,9 +7,9 @@ import { DataTransfers } from '../../../../base/browser/dnd.js';
 import { $, setVisibility, getActiveWindow, isMouseEvent, getWindow } from '../../../../base/browser/dom.js';
 import { StandardMouseEvent } from '../../../../base/browser/mouseEvent.js';
 import { ActionsOrientation, prepareActions } from '../../../../base/browser/ui/actionbar/actionbar.js';
-import { ActionRunner } from '../../../../base/common/actions.js';
+import { ActionRunner, toAction } from '../../../../base/common/actions.js';
 import { DisposableStore } from '../../../../base/common/lifecycle.js';
-import { createActionViewItem } from '../../../../platform/actions/browser/menuEntryActionViewItem.js';
+import { getFlatActionBarActions, createActionViewItem } from '../../../../platform/actions/browser/menuEntryActionViewItem.js';
 import { MenuId } from '../../../../platform/actions/common/actions.js';
 import { IMenuService } from '../../../../platform/actions/common/actions.service.js';
 import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.service.js';
@@ -23,7 +23,7 @@ import { IThemeService } from '../../../../platform/theme/common/themeService.se
 import { DraggedEditorGroupIdentifier, isWindowDraggedOver, fillEditorsDragData } from '../../dnd.js';
 import { EditorPane } from './editorPane.js';
 import { EditorsOrder, EditorInputCapabilities, EditorResourceAccessor, SideBySideEditor, Verbosity } from '../../../common/editor.js';
-import { ResourceContextKey, ActiveEditorPinnedContext, ActiveEditorFirstInGroupContext, ActiveEditorLastInGroupContext, ActiveEditorStickyContext, ActiveEditorAvailableEditorIdsContext, ActiveEditorCanSplitInGroupContext, SideBySideEditorActiveContext, ActiveEditorGroupLockedContext, applyAvailableEditorIds } from '../../../common/contextkeys.js';
+import { ResourceContextKey, ActiveEditorPinnedContext, ActiveEditorFirstInGroupContext, ActiveEditorLastInGroupContext, ActiveEditorStickyContext, ActiveEditorDirtyContext, ActiveEditorAvailableEditorIdsContext, ActiveEditorCannotCloseContext, ActiveEditorCanSplitInGroupContext, SideBySideEditorActiveContext, ActiveEditorGroupLockedContext, applyAvailableEditorIds } from '../../../common/contextkeys.js';
 import '../../../../base/browser/ui/contextview/contextview.js';
 import { assertReturnsDefined } from '../../../../base/common/types.js';
 import { isFirefox } from '../../../../base/browser/browser.js';
@@ -39,6 +39,9 @@ import { IHostService } from '../../../services/host/browser/host.service.js';
 import { ServiceCollection } from '../../../../platform/instantiation/common/serviceCollection.js';
 import { MarkdownString } from '../../../../base/common/htmlContent.js';
 import { applyDragImage } from '../../../../base/browser/ui/dnd/dnd.js';
+import { Codicon } from '../../../../base/common/codicons.js';
+import { ThemeIcon } from '../../../../base/common/themables.js';
+import { DropdownMenuActionViewItem } from '../../../../base/browser/ui/dropdown/dropdownActionViewItem.js';
 import { AnchorAlignment } from '../../../../base/common/layout.js';
 
 var EditorTabsControl_1;
@@ -67,8 +70,8 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         this.EDITOR_TAB_HEIGHT = {
             normal: 35,
             compact: 22,
-            styleOverride: 32,
-            styleOverrideCompact: 28
+            modernUI: 32,
+            modernUICompact: 28
         };
     }
     constructor(
@@ -77,6 +80,9 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         groupsView,
         groupView,
         tabsModel,
+        menuIds,
+        breadcrumbsInHeader,
+        useModernUITabs,
         contextMenuService,
         instantiationService,
         contextKeyService,
@@ -94,6 +100,9 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         this.groupsView = groupsView;
         this.groupView = groupView;
         this.tabsModel = tabsModel;
+        this.menuIds = menuIds;
+        this.breadcrumbsInHeader = breadcrumbsInHeader;
+        this.useModernUITabs = useModernUITabs;
         this.contextMenuService = contextMenuService;
         this.instantiationService = instantiationService;
         this.contextKeyService = contextKeyService;
@@ -108,6 +117,7 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         this.treeItemsTransfer = LocalSelectionTransfer.getInstance();
         this.editorActionsToolbarDisposables = this._register(( new DisposableStore()));
         this.editorActionsDisposables = this._register(( new DisposableStore()));
+        this.editorActionsToolbarHasActions = false;
         this.editorLayoutActionsToolbarDisposables = this._register(( new DisposableStore()));
         this.editorLayoutActionsDisposables = this._register(( new DisposableStore()));
         this.renderDropdownAsChildElement = false;
@@ -119,13 +129,16 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         this.editorIsFirstContext = ActiveEditorFirstInGroupContext.bindTo(this.contextMenuContextKeyService);
         this.editorIsLastContext = ActiveEditorLastInGroupContext.bindTo(this.contextMenuContextKeyService);
         this.editorStickyContext = ActiveEditorStickyContext.bindTo(this.contextMenuContextKeyService);
+        this.editorDirtyContext = ActiveEditorDirtyContext.bindTo(this.contextMenuContextKeyService);
         this.editorAvailableEditorIds = ActiveEditorAvailableEditorIdsContext.bindTo(this.contextMenuContextKeyService);
+        this.editorCannotCloseContext = ActiveEditorCannotCloseContext.bindTo(this.contextMenuContextKeyService);
         this.editorCanSplitInGroupContext = ActiveEditorCanSplitInGroupContext.bindTo(this.contextMenuContextKeyService);
         this.sideBySideEditorContext = SideBySideEditorActiveContext.bindTo(this.contextMenuContextKeyService);
         this.groupLockedContext = ActiveEditorGroupLockedContext.bindTo(this.contextMenuContextKeyService);
     }
     create(parent) {
         this.updateTabHeight();
+        this.updateTabActionSpaceReservation();
         return parent;
     }
     get editorActionsEnabled() {
@@ -142,6 +155,46 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         parent.appendChild(this.editorLayoutActionsToolbarContainer);
         this.handleEditorLayoutActionsToolBarVisibility(this.editorLayoutActionsToolbarContainer);
     }
+    createAddTabControl(parent, menuId, before) {
+        const container = $(".tabs-bar-add-tab");
+        parent.insertBefore(container, before ?? null);
+        const menu = this._register(this.menuService.createMenu(menuId, this.contextKeyService));
+        const getActions = () => getFlatActionBarActions(menu.getActions({
+            shouldForwardArgs: true
+        }));
+        const addTabAction = toAction({
+            id: "editor.tabs.addTab",
+            label: ( localize(4004, "Add Tab")),
+            class: ThemeIcon.asClassName(Codicon.add),
+            run: () => {}
+        });
+        const dropdown = this._register(( new DropdownMenuActionViewItem(addTabAction, {
+            getActions
+        }, this.contextMenuService, {
+            classNames: ThemeIcon.asClassNameArray(Codicon.add),
+            keybindingProvider: action => this.getKeybinding(action)
+        })));
+        const toolbar = this._register(this.instantiationService.createInstance(WorkbenchToolBar, container, {
+            ariaLabel: ( localize(4005, "Add Tab")),
+            actionViewItemProvider: action => action === addTabAction ? dropdown : undefined
+        }));
+        toolbar.setActions([addTabAction]);
+        const updateVisibility = () => {
+            container.classList.toggle("hidden", getActions().length === 0);
+        };
+        updateVisibility();
+        this._register(menu.onDidChange(updateVisibility));
+        return container;
+    }
+    updateEditorLayoutActionsSeparator() {
+        const hasLayoutActions = (this.editorLayoutActionsToolbar?.getItemsLength() ?? 0) > 0;
+        if (this.editorLayoutActionsSeparator) {
+            setVisibility(
+                hasLayoutActions && this.editorActionsToolbarHasActions,
+                this.editorLayoutActionsSeparator
+            );
+        }
+    }
     handleEditorActionToolBarVisibility(container) {
         const editorActionsEnabled = this.editorActionsEnabled;
         const editorActionsVisible = !!this.editorActionsToolbar;
@@ -177,16 +230,17 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         const context = {
             groupId: this.groupView.id
         };
+        const editorActionsMenuId = this.menuIds?.editorActions ?? MenuId.EditorTitle;
         this.editorActionsToolbar = this.editorActionsToolbarDisposables.add(this.instantiationService.createInstance(WorkbenchToolBar, container, {
             actionViewItemProvider: (action, options) => this.actionViewItemProvider(action, options),
             orientation: ActionsOrientation.HORIZONTAL,
-            ariaLabel: ( localize(3770, "Editor actions")),
+            ariaLabel: ( localize(4006, "Editor actions")),
             getKeyBinding: action => this.getKeybinding(action),
             actionRunner: this.editorActionsToolbarDisposables.add(( new EditorCommandsContextActionRunner(context))),
             anchorAlignmentProvider: () => AnchorAlignment.RIGHT,
             renderDropdownAsChildElement: this.renderDropdownAsChildElement,
             telemetrySource: "editorPart",
-            resetMenu: MenuId.EditorTitle,
+            resetMenu: editorActionsMenuId,
             overflowBehavior: {
                 maxItems: 9,
                 exempted: EDITOR_CORE_NAVIGATION_COMMANDS
@@ -207,7 +261,7 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         this.editorLayoutActionsToolbar = this.editorLayoutActionsToolbarDisposables.add(this.instantiationService.createInstance(WorkbenchToolBar, container, {
             actionViewItemProvider: (action, options) => this.actionViewItemProvider(action, options),
             orientation: ActionsOrientation.HORIZONTAL,
-            ariaLabel: ( localize(3771, "Editor layout actions")),
+            ariaLabel: ( localize(4007, "Editor layout actions")),
             getKeyBinding: action => this.getKeybinding(action),
             actionRunner: this.editorLayoutActionsToolbarDisposables.add(( new EditorCommandsContextActionRunner(context))),
             anchorAlignmentProvider: () => AnchorAlignment.RIGHT,
@@ -242,7 +296,10 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
             return;
         }
         this.editorActionsDisposables.clear();
-        const editorActions = this.groupView.createEditorActions(this.editorActionsDisposables);
+        const editorActions = this.groupView.createEditorActions(
+            this.editorActionsDisposables,
+            this.menuIds?.editorActions ?? MenuId.EditorTitle
+        );
         this.editorActionsDisposables.add(editorActions.onDidChange(() => this.updateEditorActionsToolbar()));
         const editorActionsToolbar = assertReturnsDefined(this.editorActionsToolbar);
         const {
@@ -250,10 +307,11 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
             secondary
         } = this.prepareEditorActions(editorActions.actions);
         editorActionsToolbar.setActions(prepareActions(primary), prepareActions(secondary));
+        this.editorActionsToolbarHasActions = primary.length > 0 || secondary.length > 0;
         this.updateEditorLayoutActionsToolbar();
     }
     updateEditorLayoutActionsToolbar() {
-        if (!this.editorActionsEnabled || !this.editorLayoutActionsToolbar) {
+        if (!this.editorActionsEnabled || !this.editorLayoutActionsToolbarContainer || !this.editorLayoutActionsToolbar) {
             return;
         }
         this.editorLayoutActionsDisposables.clear();
@@ -264,12 +322,9 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
             secondary
         } = this.prepareEditorLayoutActions(editorActions.actions);
         this.editorLayoutActionsToolbar.setActions(prepareActions(primary), prepareActions(secondary));
-        if (this.editorLayoutActionsSeparator) {
-            setVisibility(
-                primary.length > 0 || secondary.length > 0,
-                this.editorLayoutActionsSeparator
-            );
-        }
+        const hasLayoutActions = primary.length > 0 || secondary.length > 0;
+        this.updateEditorLayoutActionsSeparator();
+        setVisibility(hasLayoutActions, this.editorLayoutActionsToolbarContainer);
     }
     getEditorPaneAwareContextKeyService() {
         return this.groupView.activeEditorPane?.scopedContextKeyService ?? this.contextKeyService;
@@ -280,10 +335,14 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         }
         const editorActionsToolbar = assertReturnsDefined(this.editorActionsToolbar);
         editorActionsToolbar.setActions([], []);
+        this.editorActionsToolbarHasActions = false;
         this.editorLayoutActionsToolbar?.setActions([], []);
         if (this.editorLayoutActionsSeparator) {
             setVisibility(false, this.editorLayoutActionsSeparator);
         }
+        if (this.editorLayoutActionsToolbarContainer) {
+            setVisibility(false, this.editorLayoutActionsToolbarContainer);
+        }
     }
     onGroupDragStart(e, element) {
         if (e.target !== element) {
@@ -313,7 +372,7 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         if (this.groupView.activeEditor) {
             let label = this.groupView.activeEditor.getName();
             if (this.groupsView.partOptions.showTabs === "multiple" && this.groupView.count > 1) {
-                label = ( localize(3772, "{0} (+{1})", label, this.groupView.count - 1));
+                label = ( localize(4008, "{0} (+{1})", label, this.groupView.count - 1));
             }
             applyDragImage(e, element, label);
         }
@@ -401,6 +460,8 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         this.editorIsFirstContext.set(this.tabsModel.isFirst(editor));
         this.editorIsLastContext.set(this.tabsModel.isLast(editor));
         this.editorStickyContext.set(this.tabsModel.isSticky(editor));
+        this.editorDirtyContext.set(editor.isDirty() && !editor.isSaving());
+        this.editorCannotCloseContext.set(editor.hasCapability(EditorInputCapabilities.CannotClose));
         this.groupLockedContext.set(this.tabsModel.isLocked);
         this.editorCanSplitInGroupContext.set(editor.hasCapability(EditorInputCapabilities.CanSplitInGroup));
         this.sideBySideEditorContext.set(editor.typeId === SideBySideEditorInput.ID);
@@ -434,8 +495,9 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
     }
     get tabHeight() {
         const isCompact = this.groupsView.partOptions.tabHeight === "compact";
-        if (this.parent.classList.contains("tabs") && this.parent.closest(".style-override")) {
-            return isCompact ? EditorTabsControl_1.EDITOR_TAB_HEIGHT.styleOverrideCompact : EditorTabsControl_1.EDITOR_TAB_HEIGHT.styleOverride;
+        const usesModernMultiTabHeight = this.parent.classList.contains("tabs") && this.parent.closest(".modern-ui-tabs");
+        if (usesModernMultiTabHeight || this.useModernUITabs) {
+            return isCompact ? EditorTabsControl_1.EDITOR_TAB_HEIGHT.modernUICompact : EditorTabsControl_1.EDITOR_TAB_HEIGHT.modernUI;
         }
         return isCompact ? EditorTabsControl_1.EDITOR_TAB_HEIGHT.compact : EditorTabsControl_1.EDITOR_TAB_HEIGHT.normal;
     }
@@ -455,13 +517,24 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         return title;
     }
     updateTabHeight() {
+        const isCompact = this.groupsView.partOptions.tabHeight === "compact";
         this.parent.style.setProperty("--editor-group-tab-height", `${this.tabHeight}px`);
-        this.parent.classList.toggle("compact-height", this.groupsView.partOptions.tabHeight === "compact");
+        this.parent.classList.toggle("compact-height", isCompact);
+        this.parent.parentElement?.classList.toggle("editor-tabs-compact-height", isCompact);
+    }
+    updateTabActionSpaceReservation() {
+        this.parent.classList.toggle(
+            "tab-actions-reserve-space",
+            this.groupsView.partOptions.tabActionReserveSpace
+        );
     }
     updateOptions(oldOptions, newOptions) {
         if (oldOptions.tabHeight !== newOptions.tabHeight) {
             this.updateTabHeight();
         }
+        if (oldOptions.tabActionReserveSpace !== newOptions.tabActionReserveSpace) {
+            this.updateTabActionSpaceReservation();
+        }
         if (oldOptions.editorActionsLocation !== newOptions.editorActionsLocation || oldOptions.showTabs !== newOptions.showTabs) {
             if (this.editorActionsToolbarContainer) {
                 this.handleEditorActionToolBarVisibility(this.editorActionsToolbarContainer);
@@ -474,6 +547,6 @@ let EditorTabsControl = class EditorTabsControl extends Themable {
         }
     }
 };
-EditorTabsControl = EditorTabsControl_1 = ( __decorate([( __param(5, IContextMenuService)), ( __param(6, IInstantiationService)), ( __param(7, IContextKeyService)), ( __param(8, IKeybindingService)), ( __param(9, INotificationService)), ( __param(10, IQuickInputService)), ( __param(11, IThemeService)), ( __param(12, IEditorResolverService)), ( __param(13, IHostService)), ( __param(14, IMenuService))], EditorTabsControl));
+EditorTabsControl = EditorTabsControl_1 = ( __decorate([( __param(8, IContextMenuService)), ( __param(9, IInstantiationService)), ( __param(10, IContextKeyService)), ( __param(11, IKeybindingService)), ( __param(12, INotificationService)), ( __param(13, IQuickInputService)), ( __param(14, IThemeService)), ( __param(15, IEditorResolverService)), ( __param(16, IHostService)), ( __param(17, IMenuService))], EditorTabsControl));
 
 export { EditorCommandsContextActionRunner, EditorTabsControl };

package/vscode/src/vs/workbench/browser/parts/editor/editorTitleControl.d.ts

@@ -2,7 +2,7 @@ import { Dimension } from "../../../../base/browser/dom.js";
 import { IInstantiationService } from "../../../../platform/instantiation/common/instantiation.js";
 import { Themable } from "../../../../platform/theme/common/themeService.js";
 import { IThemeService } from "../../../../platform/theme/common/themeService.service.js";
-import { IEditorGroupsView, IEditorGroupTitleHeight, IEditorGroupView, IEditorPartsView, IInternalEditorOpenOptions } from "./editor.js";
+import { IEditorGroupMenuIds, IEditorGroupsView, IEditorGroupTitleHeight, IEditorGroupView, IEditorGroupViewOptions, IEditorPartsView, IInternalEditorOpenOptions } from "./editor.js";
 import { IEditorPartOptions } from "../../../common/editor.js";
 import { EditorInput } from "../../../common/editor/editorInput.js";
 import { IReadonlyEditorGroupModel } from "../../../common/editor/editorGroupModel.js";
@@ -23,15 +23,18 @@ export declare class EditorTitleControl extends Themable {
     private readonly groupsView;
     private readonly groupView;
     private readonly model;
+    private readonly menuIds;
+    private readonly showHeader;
+    private readonly reserveHeaderSpace;
+    private readonly useModernUITabs;
     private instantiationService;
     private editorTabsControl;
     private readonly editorTabsControlDisposable;
-    private breadcrumbsControlFactory;
-    private readonly breadcrumbsControlDisposables;
-    private get breadcrumbsControl();
-    constructor(parent: HTMLElement, editorPartsView: IEditorPartsView, groupsView: IEditorGroupsView, groupView: IEditorGroupView, model: IReadonlyEditorGroupModel, instantiationService: IInstantiationService, themeService: IThemeService);
+    private headerControl;
+    private readonly headerControlDisposable;
+    constructor(parent: HTMLElement, editorPartsView: IEditorPartsView, groupsView: IEditorGroupsView, groupView: IEditorGroupView, model: IReadonlyEditorGroupModel, menuIds: IEditorGroupMenuIds | undefined, showHeader: boolean, reserveHeaderSpace: IEditorGroupViewOptions["reserveHeaderSpace"], useModernUITabs: boolean, instantiationService: IInstantiationService, themeService: IThemeService);
     private createEditorTabsControl;
-    private createBreadcrumbsControl;
+    private createHeaderControl;
     openEditor(editor: EditorInput, options?: IInternalEditorOpenOptions): void;
     openEditors(editors: EditorInput[]): void;
     private handleOpenedEditors;
@@ -46,8 +49,9 @@ export declare class EditorTitleControl extends Themable {
     setActive(isActive: boolean): void;
     updateEditorSelections(): void;
     updateEditorLabel(editor: EditorInput): void;
+    updateEditorCapabilities(editor: EditorInput): void;
     updateEditorDirty(editor: EditorInput): void;
     updateOptions(oldOptions: IEditorPartOptions, newOptions: IEditorPartOptions): void;
-    layout(dimensions: IEditorTitleControlDimensions): Dimension;
+    layout(dimensions: IEditorTitleControlDimensions, headerWidth?: number): Dimension;
     getHeight(): IEditorGroupTitleHeight;
 }

package/vscode/src/vs/workbench/browser/parts/editor/editorTitleControl.js

@@ -2,28 +2,29 @@
 import { registerCss } from '../../../../../../../css.js';
 import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
 import * as editortitlecontrol from './media/editortitlecontrol.css';
-import { $, clearNode, Dimension } from '../../../../base/browser/dom.js';
+import { clearNode, Dimension } from '../../../../base/browser/dom.js';
 import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
 import { Themable } from '../../../../platform/theme/common/themeService.js';
 import { IThemeService } from '../../../../platform/theme/common/themeService.service.js';
-import { BreadcrumbsControlFactory, BreadcrumbsControl } from './breadcrumbsControl.js';
 import { MultiEditorTabsControl } from './multiEditorTabsControl.js';
 import { SingleEditorTabsControl } from './singleEditorTabsControl.js';
-import { DisposableStore } from '../../../../base/common/lifecycle.js';
+import { DisposableStore, MutableDisposable } from '../../../../base/common/lifecycle.js';
 import { MultiRowEditorControl } from './multiRowEditorTabsControl.js';
 import { NoEditorTabsControl } from './noEditorTabsControl.js';
+import { EditorHeaderControl } from './editorHeaderControl.js';
 
 registerCss(editortitlecontrol);
 let EditorTitleControl = class EditorTitleControl extends Themable {
-    get breadcrumbsControl() {
-        return this.breadcrumbsControlFactory?.control;
-    }
     constructor(
         parent,
         editorPartsView,
         groupsView,
         groupView,
         model,
+        menuIds,
+        showHeader,
+        reserveHeaderSpace,
+        useModernUITabs,
         instantiationService,
         themeService
     ) {
@@ -33,11 +34,15 @@ let EditorTitleControl = class EditorTitleControl extends Themable {
         this.groupsView = groupsView;
         this.groupView = groupView;
         this.model = model;
+        this.menuIds = menuIds;
+        this.showHeader = showHeader;
+        this.reserveHeaderSpace = reserveHeaderSpace;
+        this.useModernUITabs = useModernUITabs;
         this.instantiationService = instantiationService;
         this.editorTabsControlDisposable = this._register(( new DisposableStore()));
-        this.breadcrumbsControlDisposables = this._register(( new DisposableStore()));
+        this.headerControlDisposable = this._register(( new MutableDisposable()));
         this.editorTabsControl = this.createEditorTabsControl();
-        this.breadcrumbsControlFactory = this.createBreadcrumbsControl();
+        this.headerControl = this.createHeaderControl();
     }
     createEditorTabsControl() {
         let tabsControlType;
@@ -59,32 +64,25 @@ let EditorTitleControl = class EditorTitleControl extends Themable {
             this.editorPartsView,
             this.groupsView,
             this.groupView,
-            this.model
+            this.model,
+            this.menuIds,
+            this.showHeader,
+            this.useModernUITabs
         );
         return this.editorTabsControlDisposable.add(control);
     }
-    createBreadcrumbsControl() {
-        if (this.groupsView.partOptions.showTabs === "single") {
-            return undefined;
-        }
-        const breadcrumbsContainer = $(".breadcrumbs-below-tabs");
-        this.parent.appendChild(breadcrumbsContainer);
-        const breadcrumbsControlFactory = this.breadcrumbsControlDisposables.add(
-            this.instantiationService.createInstance(BreadcrumbsControlFactory, breadcrumbsContainer, this.groupView, {
-                showFileIcons: true,
-                showSymbolIcons: true,
-                showDecorationColors: false,
-                showPlaceholder: true,
-                dragEditor: false
-            })
-        );
-        this.breadcrumbsControlDisposables.add(
-            breadcrumbsControlFactory.onDidEnablementChange(() => this.groupView.relayout())
-        );
-        this.breadcrumbsControlDisposables.add(
-            breadcrumbsControlFactory.onDidVisibilityChange(() => this.groupView.relayout())
+    createHeaderControl() {
+        const control = this.instantiationService.createInstance(
+            EditorHeaderControl,
+            this.parent,
+            this.groupView,
+            this.groupsView,
+            this.menuIds,
+            this.showHeader,
+            this.reserveHeaderSpace
         );
-        return breadcrumbsControlFactory;
+        this.headerControlDisposable.value = control;
+        return control;
     }
     openEditor(editor, options) {
         const didChange = this.editorTabsControl.openEditor(editor, options);
@@ -95,11 +93,7 @@ let EditorTitleControl = class EditorTitleControl extends Themable {
         this.handleOpenedEditors(didChange);
     }
     handleOpenedEditors(didChange) {
-        if (didChange) {
-            this.breadcrumbsControl?.update();
-        } else {
-            this.breadcrumbsControl?.revealLast();
-        }
+        this.headerControl.handleEditorsChange(didChange);
     }
     beforeCloseEditor(editor) {
         return this.editorTabsControl.beforeCloseEditor(editor);
@@ -114,7 +108,7 @@ let EditorTitleControl = class EditorTitleControl extends Themable {
     }
     handleClosedEditors() {
         if (!this.groupView.activeEditor) {
-            this.breadcrumbsControl?.update();
+            this.headerControl.handleEditorsChange(true);
         }
     }
     moveEditor(editor, fromIndex, targetIndex, stickyStateChange) {
@@ -136,7 +130,13 @@ let EditorTitleControl = class EditorTitleControl extends Themable {
         this.editorTabsControl.updateEditorSelections();
     }
     updateEditorLabel(editor) {
-        return this.editorTabsControl.updateEditorLabel(editor);
+        this.editorTabsControl.updateEditorLabel(editor);
+        if (this.groupView.activeEditor === editor) {
+            this.headerControl.handleEditorsChange(true);
+        }
+    }
+    updateEditorCapabilities(editor) {
+        this.editorTabsControl.updateEditorCapabilities(editor);
     }
     updateEditorDirty(editor) {
         return this.editorTabsControl.updateEditorDirty(editor);
@@ -144,36 +144,28 @@ let EditorTitleControl = class EditorTitleControl extends Themable {
     updateOptions(oldOptions, newOptions) {
         if (oldOptions.showTabs !== newOptions.showTabs || (newOptions.showTabs !== "single" && oldOptions.pinnedTabsOnSeparateRow !== newOptions.pinnedTabsOnSeparateRow)) {
             this.editorTabsControlDisposable.clear();
-            this.breadcrumbsControlDisposables.clear();
+            this.headerControlDisposable.clear();
             clearNode(this.parent);
             this.editorTabsControl = this.createEditorTabsControl();
-            this.breadcrumbsControlFactory = this.createBreadcrumbsControl();
+            this.headerControl = this.createHeaderControl();
         }
         else {
             this.editorTabsControl.updateOptions(oldOptions, newOptions);
         }
     }
-    layout(dimensions) {
-        const tabsControlDimension = this.editorTabsControl.layout(dimensions);
-        let breadcrumbsControlDimension = undefined;
-        if (this.breadcrumbsControl?.isHidden() === false) {
-            breadcrumbsControlDimension = ( new Dimension(dimensions.container.width, BreadcrumbsControl.HEIGHT));
-            this.breadcrumbsControl.layout(breadcrumbsControlDimension);
-        }
-        return ( new Dimension(
-            dimensions.container.width,
-            tabsControlDimension.height + (breadcrumbsControlDimension ? breadcrumbsControlDimension.height : 0)
-        ));
+    layout(dimensions, headerWidth = dimensions.container.width) {
+        this.editorTabsControl.layout(dimensions);
+        this.headerControl.layout(headerWidth);
+        return ( new Dimension(dimensions.container.width, this.getHeight().total));
     }
     getHeight() {
         const tabsControlHeight = this.editorTabsControl.getHeight();
-        const breadcrumbsControlHeight = this.breadcrumbsControl?.isHidden() === false ? BreadcrumbsControl.HEIGHT : 0;
         return {
-            total: tabsControlHeight + breadcrumbsControlHeight,
+            total: tabsControlHeight + this.headerControl.height,
             offset: tabsControlHeight
         };
     }
 };
-EditorTitleControl = ( __decorate([( __param(5, IInstantiationService)), ( __param(6, IThemeService))], EditorTitleControl));
+EditorTitleControl = ( __decorate([( __param(9, IInstantiationService)), ( __param(10, IThemeService))], EditorTitleControl));
 
 export { EditorTitleControl };

package/vscode/src/vs/workbench/browser/parts/editor/editorTypePicker.d.ts

@@ -0,0 +1,37 @@
+import { IAction } from "../../../../base/common/actions.js";
+import { URI } from "../../../../base/common/uri.js";
+import { ICommandService } from "../../../../platform/commands/common/commands.service.js";
+import { EditorInput } from "../../../common/editor/editorInput.js";
+import { EditorMatches, RegisteredEditorInfo } from "../../../services/editor/common/editorResolverService.js";
+import { IEditorResolverService } from "../../../services/editor/common/editorResolverService.service.js";
+import { IEditorService } from "../../../services/editor/common/editorService.service.js";
+/**
+ * Describes the editors available for the active editor's resource, i.e. the different editor types
+ * (e.g. "Text Editor" vs. "Markdown Preview") that the resource can be reopened with.
+ */
+export interface IAvailableEditorTypes {
+    readonly resource: URI;
+    readonly isDiffEditor: boolean;
+    readonly originalResource?: URI;
+    readonly modifiedResource?: URI;
+    readonly currentId: string;
+    readonly editorMatches: EditorMatches;
+    readonly editors: RegisteredEditorInfo[];
+}
+/**
+ * Determines the editors available for the given active editor's resource. Returns `undefined` when
+ * there is nothing meaningful to switch between: no resource, only the default text editor, or an
+ * exclusive editor (e.g. the hex editor).
+ */
+export declare function getAvailableEditorTypes(activeEditor: EditorInput | null | undefined, editorResolverService: IEditorResolverService, hiddenEditorIds?: readonly string[]): IAvailableEditorTypes | undefined;
+/**
+ * The label to show for an editor type. In a diff context the default text editor is presented as
+ * "Text Diff Editor" to match how it actually opens.
+ */
+export declare function editorTypeDisplayLabel(editor: RegisteredEditorInfo, isDiffEditor: boolean): string;
+/**
+ * Builds the actions that let the user switch between the editor types available for a resource:
+ * one "reopen with" action per available editor (the current one checked), a "Set Default" submenu
+ * for persisting the choice, and — for diffs — actions to open either side as a standalone editor.
+ */
+export declare function createEditorTypeActions(available: IAvailableEditorTypes, editorResolverService: IEditorResolverService, commandService: ICommandService, editorService: IEditorService): IAction[];

package/vscode/src/vs/workbench/browser/parts/editor/editorTypePicker.js

@@ -0,0 +1,96 @@
+
+import { toAction, SubmenuAction, Separator } from '../../../../base/common/actions.js';
+import { localize } from '../../../../nls.js';
+import { isDiffEditorInput, isEditorInputWithDiffResources, EditorResourceAccessor, SideBySideEditor, DEFAULT_EDITOR_ASSOCIATION } from '../../../common/editor.js';
+import { isUnconfiguredUniversalOptionalEditorMatch } from '../../../services/editor/common/editorResolverService.js';
+import { REOPEN_ACTIVE_EDITOR_WITH_COMMAND_ID } from './editorCommands.js';
+
+function getAvailableEditorTypes(activeEditor, editorResolverService, hiddenEditorIds) {
+    const standardDiffResources = isDiffEditorInput(activeEditor) ? {
+        original: activeEditor.original.resource,
+        modified: activeEditor.modified.resource
+    } : undefined;
+    const diffResources = standardDiffResources ?? (isEditorInputWithDiffResources(activeEditor) ? activeEditor.diffResources : undefined);
+    const resource = diffResources?.modified ?? EditorResourceAccessor.getOriginalUri(activeEditor, {
+        supportSideBySide: SideBySideEditor.PRIMARY
+    });
+    if (!resource) {
+        return undefined;
+    }
+    const currentId = activeEditor?.editorId ?? DEFAULT_EDITOR_ASSOCIATION.id;
+    const hiddenEditorIdSet = ( new Set(hiddenEditorIds));
+    const editorMatches = editorResolverService.getEditorMatches(resource, {
+        isDiffEditor: !!diffResources
+    });
+    const editors = ( editorMatches.matches.filter(
+        match => !isUnconfiguredUniversalOptionalEditorMatch(match) || match.editor.id === currentId
+    ).map(match => match.editor)).filter(editor => editor.id === currentId || !( hiddenEditorIdSet.has(editor.id)));
+    if (editorMatches.hasExclusiveMatch || editors.length <= 1) {
+        return undefined;
+    }
+    return {
+        resource,
+        isDiffEditor: !!diffResources,
+        originalResource: diffResources?.original,
+        modifiedResource: diffResources?.modified,
+        currentId,
+        editorMatches,
+        editors
+    };
+}
+function editorTypeDisplayLabel(editor, isDiffEditor) {
+    if (isDiffEditor && editor.id === DEFAULT_EDITOR_ASSOCIATION.id) {
+        return localize(4009, "Text Diff Editor");
+    }
+    return editor.label;
+}
+function createEditorTypeActions(available, editorResolverService, commandService, editorService) {
+    const defaultRule = available.editorMatches.defaultRule;
+    const glob = defaultRule.associationPattern;
+    const builtinProviderLabel = ( localize(4010, "Built-in"));
+    const labelWithSource = editor => {
+        const label = editorTypeDisplayLabel(editor, available.isDiffEditor);
+        return editor.detail && editor.detail !== builtinProviderLabel ? ( localize(4011, "{0} - {1}", label, editor.detail)) : label;
+    };
+    const reopenActions = ( available.editors.map(editor => toAction({
+        id: editor.id,
+        label: labelWithSource(editor),
+        checked: editor.id === available.currentId,
+        run: () => commandService.executeCommand(REOPEN_ACTIVE_EDITOR_WITH_COMMAND_ID, editor.id)
+    })));
+    const setDefaultActions = ( available.editors.map(editor => toAction({
+        id: `setDefault.${editor.id}`,
+        label: labelWithSource(editor),
+        checked: editor.id === defaultRule.editor.id,
+        run: () => {
+            editorResolverService.setDefaultEditor(available.resource, editor.id, available.isDiffEditor);
+            return commandService.executeCommand(REOPEN_ACTIVE_EDITOR_WITH_COMMAND_ID, editor.id);
+        }
+    })));
+    const setDefaultSubmenu = ( new SubmenuAction("editorType.setDefault", available.isDiffEditor ? ( localize(4012, "Set Default (Diff Only) for '{0}'", glob)) : ( localize(4013, "Set Default for '{0}'", glob)), setDefaultActions));
+    const actions = [...reopenActions, ( new Separator()), setDefaultSubmenu];
+    if (available.isDiffEditor) {
+        actions.push(( new Separator()));
+        if (available.originalResource) {
+            actions.push(toAction({
+                id: "editorType.openOriginal",
+                label: ( localize(4014, "Open Original")),
+                run: () => editorService.openEditor({
+                    resource: available.originalResource
+                })
+            }));
+        }
+        if (available.modifiedResource) {
+            actions.push(toAction({
+                id: "editorType.openModified",
+                label: ( localize(4015, "Open Modified")),
+                run: () => editorService.openEditor({
+                    resource: available.modifiedResource
+                })
+            }));
+        }
+    }
+    return actions;
+}
+
+export { createEditorTypeActions, editorTypeDisplayLabel, getAvailableEditorTypes };