@codingame/monaco-vscode-views-service-override 1.82.6 → 1.83.1

package/vscode/src/vs/workbench/browser/parts/editor/{tabsTitleControl.js → multiEditorTabsControl.js}

@@ -1,5 +1,5 @@
 import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
-import './media/tabstitlecontrol.css.js';
+import './media/multieditortabscontrol.css.js';
 import { isWindows, isMacintosh } from 'monaco-editor/esm/vs/base/common/platform.js';
 import { shorten } from 'monaco-editor/esm/vs/base/common/labels.js';
 import { DEFAULT_EDITOR_ASSOCIATION, preventEditorClose, EditorCloseMethod, EditorResourceAccessor, SideBySideEditor } from 'vscode/vscode/vs/workbench/common/editor';
@@ -13,7 +13,7 @@ import { IInstantiationService } from 'monaco-editor/esm/vs/platform/instantiati
 import { IKeybindingService } from 'monaco-editor/esm/vs/platform/keybinding/common/keybinding.js';
 import { IContextKeyService } from 'monaco-editor/esm/vs/platform/contextkey/common/contextkey.js';
 import { MenuId, IMenuService } from 'monaco-editor/esm/vs/platform/actions/common/actions.js';
-import { TitleControl, EditorCommandsContextActionRunner } from './titleControl.js';
+import { EditorTabsControl, EditorCommandsContextActionRunner } from './editorTabsControl.js';
 import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput.js';
 import { MutableDisposable, DisposableStore, dispose, combinedDisposable, toDisposable } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
 import { ScrollableElement } from 'monaco-editor/esm/vs/base/browser/ui/scrollbar/scrollableElement.js';
@@ -27,9 +27,6 @@ import { IEditorGroupsService } from 'vscode/vscode/vs/workbench/services/editor
 import { Dimension, addDisposableListener, EventType, EventHelper, DragAndDropObserver, clearNode, scheduleAtNextAnimationFrame, findParentWithClass } from 'monaco-editor/esm/vs/base/browser/dom.js';
 import { localize } from 'monaco-editor/esm/vs/nls.js';
 import { CloseOneEditorAction, UnpinEditorAction } from 'vscode/vscode/vs/workbench/browser/parts/editor/editorActions';
-import { IConfigurationService } from 'monaco-editor/esm/vs/platform/configuration/common/configuration.js';
-import { BreadcrumbsControl } from './breadcrumbsControl.js';
-import { IFileService } from 'monaco-editor/esm/vs/platform/files/common/files.js';
 import { assertAllDefined, assertIsDefined } from 'monaco-editor/esm/vs/base/common/types.js';
 import { IEditorService } from 'vscode/vscode/vs/workbench/services/editor/common/editorService';
 import { basenameOrAuthority } from 'monaco-editor/esm/vs/base/common/resources.js';
@@ -46,10 +43,11 @@ import { StandardMouseEvent } from 'monaco-editor/esm/vs/base/browser/mouseEvent
 import { ITreeViewsDnDService } from 'monaco-editor/esm/vs/editor/common/services/treeViewsDndService.js';
 import { DraggedTreeItemsIdentifier } from 'monaco-editor/esm/vs/editor/common/services/treeViewsDnd.js';
 import { IEditorResolverService } from 'vscode/vscode/vs/workbench/services/editor/common/editorResolverService';
+import { UnstickyEditorGroupModel, StickyEditorGroupModel } from '../../../common/editor/filteredEditorGroupModel.js';
 
-var TabsTitleControl_1;
-let TabsTitleControl = class TabsTitleControl extends TitleControl {
-    static { TabsTitleControl_1 = this; }
+var MultiEditorTabsControl_1;
+let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsControl {
+    static { MultiEditorTabsControl_1 = this; }
     static { this.SCROLLBAR_SIZES = {
         default: 3,
         large: 10
@@ -59,12 +57,11 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         shrink: 80,
         fit: 120
     }; }
-    static { this.TAB_HEIGHT = 35; }
     static { this.DRAG_OVER_OPEN_TAB_THRESHOLD = 1500; }
     static { this.MOUSE_WHEEL_EVENT_THRESHOLD = 150; }
     static { this.MOUSE_WHEEL_DISTANCE_THRESHOLD = 1.5; }
-    constructor(parent, accessor, group, contextMenuService, instantiationService, contextKeyService, keybindingService, notificationService, menuService, quickInputService, themeService, configurationService, fileService, editorService, pathService, editorGroupService, treeViewsDragAndDropService, editorResolverService) {
-        super(parent, accessor, group, contextMenuService, instantiationService, contextKeyService, keybindingService, notificationService, menuService, quickInputService, themeService, configurationService, fileService, editorResolverService);
+    constructor(parent, groupsView, groupView, tabsModel, contextMenuService, instantiationService, contextKeyService, keybindingService, notificationService, menuService, quickInputService, themeService, editorService, pathService, editorGroupService, treeViewsDragAndDropService, editorResolverService) {
+        super(parent, groupsView, groupView, tabsModel, contextMenuService, instantiationService, contextKeyService, keybindingService, notificationService, menuService, quickInputService, themeService, editorResolverService);
         this.editorService = editorService;
         this.pathService = pathService;
         this.editorGroupService = editorGroupService;
@@ -88,6 +85,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         this._register(this.tabResourceLabels.onDidChangeDecorations(() => this.doHandleDecorationsChange()));
     }
     create(parent) {
+        super.create(parent);
         this.titleContainer = parent;
         this.tabsAndActionsContainer = document.createElement('div');
         this.tabsAndActionsContainer.classList.add('tabs-and-actions-container');
@@ -106,10 +104,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         this.editorToolbarContainer.classList.add('editor-actions');
         this.tabsAndActionsContainer.appendChild(this.editorToolbarContainer);
         this.createEditorActionsToolBar(this.editorToolbarContainer);
-        const breadcrumbsContainer = document.createElement('div');
-        breadcrumbsContainer.classList.add('tabs-breadcrumbs');
-        this.titleContainer.appendChild(breadcrumbsContainer);
-        this.createBreadcrumbsControl(breadcrumbsContainer, { showFileIcons: true, showSymbolIcons: true, showDecorationColors: false, showPlaceholder: true });
+        this.updateTabsControlVisibility();
     }
     createTabsScrollbar(scrollable) {
         const tabsScrollbar = this._register(( new ScrollableElement(scrollable, {
@@ -134,7 +129,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
     updateTabSizing(fromEvent) {
         const [tabsContainer, tabSizingFixedDisposables] = assertAllDefined(this.tabsContainer, this.tabSizingFixedDisposables);
         tabSizingFixedDisposables.clear();
-        const options = this.accessor.partOptions;
+        const options = this.groupsView.partOptions;
         if (options.tabSizing === 'fixed') {
             tabsContainer.style.setProperty('--tab-sizing-fixed-min-width', `${options.tabSizingFixedMinWidth}px`);
             tabsContainer.style.setProperty('--tab-sizing-fixed-max-width', `${options.tabSizingFixedMaxWidth}px`);
@@ -153,7 +148,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         }
     }
     updateTabsFixedWidth(fixed) {
-        this.forEachTab((editor, index, tabContainer) => {
+        this.forEachTab((editor, tabIndex, tabContainer) => {
             if (fixed) {
                 const { width } = tabContainer.getBoundingClientRect();
                 tabContainer.style.setProperty('--tab-sizing-current-width', `${width}px`);
@@ -164,10 +159,10 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         });
     }
     getTabsScrollbarSizing() {
-        if (this.accessor.partOptions.titleScrollbarSizing !== 'large') {
-            return TabsTitleControl_1.SCROLLBAR_SIZES.default;
+        if (this.groupsView.partOptions.titleScrollbarSizing !== 'large') {
+            return MultiEditorTabsControl_1.SCROLLBAR_SIZES.default;
         }
-        return TabsTitleControl_1.SCROLLBAR_SIZES.large;
+        return MultiEditorTabsControl_1.SCROLLBAR_SIZES.large;
     }
     registerTabsContainerListeners(tabsContainer, tabsScrollbar) {
         this.enableGroupDragging(tabsContainer);
@@ -198,10 +193,10 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                     resource: undefined,
                     options: {
                         pinned: true,
-                        index: this.group.count,
+                        index: this.groupView.count,
                         override: DEFAULT_EDITOR_ASSOCIATION.id
                     }
-                }, this.group.id);
+                }, this.groupView.id);
             }));
         }
         this._register(addDisposableListener(tabsContainer, EventType.MOUSE_DOWN, e => {
@@ -228,7 +223,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                     const data = this.editorTransfer.getData(DraggedEditorIdentifier.prototype);
                     if (Array.isArray(data)) {
                         const localDraggedEditor = data[0].identifier;
-                        if (this.group.id === localDraggedEditor.groupId && this.group.getIndexOfEditor(localDraggedEditor.editor) === this.group.count - 1) {
+                        if (this.groupView.id === localDraggedEditor.groupId && this.tabsModel.isLast(localDraggedEditor.editor)) {
                             if (e.dataTransfer) {
                                 e.dataTransfer.dropEffect = 'none';
                             }
@@ -255,16 +250,17 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                 this.updateDropFeedback(tabsContainer, false);
                 tabsContainer.classList.remove('scroll');
                 if (e.target === tabsContainer) {
-                    this.onDrop(e, this.group.count, tabsContainer);
+                    const isGroupTransfer = this.groupTransfer.hasData(DraggedEditorGroupIdentifier.prototype);
+                    this.onDrop(e, isGroupTransfer ? this.groupView.count : this.tabsModel.count, tabsContainer);
                 }
             }
         })));
         this._register(addDisposableListener(tabsContainer, EventType.MOUSE_WHEEL, (e) => {
-            const activeEditor = this.group.activeEditor;
-            if (!activeEditor || this.group.count < 2) {
+            const activeEditor = this.groupView.activeEditor;
+            if (!activeEditor || this.groupView.count < 2) {
                 return;
             }
-            if (this.accessor.partOptions.scrollToSwitchTabs === true) {
+            if (this.groupsView.partOptions.scrollToSwitchTabs === true) {
                 if (e.shiftKey) {
                     return;
                 }
@@ -275,25 +271,25 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                 }
             }
             const now = Date.now();
-            if (now - this.lastMouseWheelEventTime < TabsTitleControl_1.MOUSE_WHEEL_EVENT_THRESHOLD - 2 * (Math.abs(e.deltaX) + Math.abs(e.deltaY))) {
+            if (now - this.lastMouseWheelEventTime < MultiEditorTabsControl_1.MOUSE_WHEEL_EVENT_THRESHOLD - 2 * (Math.abs(e.deltaX) + Math.abs(e.deltaY))) {
                 return;
             }
             this.lastMouseWheelEventTime = now;
             let tabSwitchDirection;
-            if (e.deltaX + e.deltaY < -TabsTitleControl_1.MOUSE_WHEEL_DISTANCE_THRESHOLD) {
+            if (e.deltaX + e.deltaY < -MultiEditorTabsControl_1.MOUSE_WHEEL_DISTANCE_THRESHOLD) {
                 tabSwitchDirection = -1;
             }
-            else if (e.deltaX + e.deltaY > TabsTitleControl_1.MOUSE_WHEEL_DISTANCE_THRESHOLD) {
+            else if (e.deltaX + e.deltaY > MultiEditorTabsControl_1.MOUSE_WHEEL_DISTANCE_THRESHOLD) {
                 tabSwitchDirection = 1;
             }
             else {
                 return;
             }
-            const nextEditor = this.group.getEditorByIndex(this.group.getIndexOfEditor(activeEditor) + tabSwitchDirection);
+            const nextEditor = this.groupView.getEditorByIndex(this.groupView.getIndexOfEditor(activeEditor) + tabSwitchDirection);
             if (!nextEditor) {
                 return;
             }
-            this.group.openEditor(nextEditor);
+            this.groupView.openEditor(nextEditor);
             EventHelper.stop(e, true);
         }));
         const showContextMenu = (e) => {
@@ -307,9 +303,9 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                 menuId: MenuId.EditorTabsBarContext,
                 contextKeyService: this.contextKeyService,
                 menuActionOptions: { shouldForwardArgs: true },
-                getActionsContext: () => ({ groupId: this.group.id }),
+                getActionsContext: () => ({ groupId: this.groupView.id }),
                 getKeyBinding: action => this.getKeybinding(action),
-                onHide: () => this.group.focus()
+                onHide: () => this.groupView.focus()
             });
         };
         this._register(addDisposableListener(tabsContainer, EventType$1.Contextmenu, e => showContextMenu(e)));
@@ -322,37 +318,43 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         super.updateEditorActionsToolbar();
         this.layout(this.dimensions);
     }
-    openEditor(editor) {
-        this.handleOpenedEditors();
+    openEditor(editor, options) {
+        const changed = this.handleOpenedEditors();
+        if (options?.focusTabControl) {
+            this.withTab(editor, (editor, tabIndex, tabContainer) => tabContainer.focus());
+        }
+        return changed;
     }
     openEditors(editors) {
-        this.handleOpenedEditors();
+        return this.handleOpenedEditors();
     }
     handleOpenedEditors() {
+        this.updateTabsControlVisibility();
         const [tabsContainer, tabsScrollbar] = assertAllDefined(this.tabsContainer, this.tabsScrollbar);
-        for (let i = tabsContainer.children.length; i < this.group.count; i++) {
+        for (let i = tabsContainer.children.length; i < this.tabsModel.count; i++) {
             tabsContainer.appendChild(this.createTab(i, tabsContainer, tabsScrollbar));
         }
         const activeEditorChanged = this.didActiveEditorChange();
         const oldActiveTabLabel = this.activeTabLabel;
         const oldTabLabelsLength = this.tabLabels.length;
         this.computeTabLabels();
+        let didChange = false;
         if (activeEditorChanged ||
             oldTabLabelsLength !== this.tabLabels.length ||
             !this.equalsEditorInputLabel(oldActiveTabLabel, this.activeTabLabel)
         ) {
             this.redraw({ forceRevealActiveTab: true });
-            this.breadcrumbsControl?.update();
+            didChange = true;
         }
         else {
             this.layout(this.dimensions, { forceRevealActiveTab: true });
-            this.breadcrumbsControl?.revealLast();
         }
+        return didChange;
     }
     didActiveEditorChange() {
-        if (!this.activeTabLabel?.editor && this.group.activeEditor ||
-            this.activeTabLabel?.editor && !this.group.activeEditor ||
-            (!this.activeTabLabel?.editor || !this.group.isActive(this.activeTabLabel.editor))
+        if (!this.activeTabLabel?.editor && this.tabsModel.activeEditor ||
+            this.activeTabLabel?.editor && !this.tabsModel.activeEditor ||
+            (!this.activeTabLabel?.editor || !this.tabsModel.isActive(this.activeTabLabel.editor))
         ) {
             return true;
         }
@@ -372,8 +374,8 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             labelA.ariaLabel === labelB.ariaLabel;
     }
     beforeCloseEditor(editor) {
-        if (this.isMouseOverTabs && this.accessor.partOptions.tabSizing === 'fixed') {
-            const closingLastTab = this.group.isLast(editor);
+        if (this.isMouseOverTabs && this.groupsView.partOptions.tabSizing === 'fixed') {
+            const closingLastTab = this.tabsModel.isLast(editor);
             this.updateTabsFixedWidth(!closingLastTab);
         }
     }
@@ -384,9 +386,9 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         this.handleClosedEditors();
     }
     handleClosedEditors() {
-        if (this.group.activeEditor) {
+        if (this.tabsModel.count) {
             const tabsContainer = assertIsDefined(this.tabsContainer);
-            while (tabsContainer.children.length > this.group.count) {
+            while (tabsContainer.children.length > this.tabsModel.count) {
                 tabsContainer.lastChild?.remove();
                 dispose(this.tabDisposables.pop());
             }
@@ -403,22 +405,22 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             this.activeTabLabel = undefined;
             this.tabActionBars = [];
             this.clearEditorActionsToolbar();
-            this.breadcrumbsControl?.update();
+            this.updateTabsControlVisibility();
         }
     }
-    moveEditor(editor, fromIndex, targetIndex) {
-        const editorLabel = this.tabLabels[fromIndex];
-        this.tabLabels.splice(fromIndex, 1);
-        this.tabLabels.splice(targetIndex, 0, editorLabel);
-        this.forEachTab((editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => {
-            this.redrawTab(editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar);
-        }, Math.min(fromIndex, targetIndex),
-        Math.max(fromIndex, targetIndex)
+    moveEditor(editor, fromTabIndex, targeTabIndex) {
+        const editorLabel = this.tabLabels[fromTabIndex];
+        this.tabLabels.splice(fromTabIndex, 1);
+        this.tabLabels.splice(targeTabIndex, 0, editorLabel);
+        this.forEachTab((editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => {
+            this.redrawTab(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar);
+        }, Math.min(fromTabIndex, targeTabIndex),
+        Math.max(fromTabIndex, targeTabIndex)
         );
         this.layout(this.dimensions, { forceRevealActiveTab: true });
     }
     pinEditor(editor) {
-        this.withTab(editor, (editor, index, tabContainer, tabLabelWidget, tabLabel) => this.redrawTabLabel(editor, index, tabContainer, tabLabelWidget, tabLabel));
+        this.withTab(editor, (editor, tabIndex, tabContainer, tabLabelWidget, tabLabel) => this.redrawTabLabel(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel));
     }
     stickEditor(editor) {
         this.doHandleStickyEditorChange(editor);
@@ -427,14 +429,14 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         this.doHandleStickyEditorChange(editor);
     }
     doHandleStickyEditorChange(editor) {
-        this.withTab(editor, (editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTab(editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar));
-        this.forEachTab((editor, index, tabContainer, tabLabelWidget, tabLabel) => {
-            this.redrawTabBorders(index, tabContainer);
+        this.withTab(editor, (editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTab(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar));
+        this.forEachTab((editor, tabIndex, tabContainer, tabLabelWidget, tabLabel) => {
+            this.redrawTabBorders(tabIndex, tabContainer);
         });
         this.layout(this.dimensions, { forceRevealActiveTab: true });
     }
     setActive(isGroupActive) {
-        this.forEachTab((editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => {
+        this.forEachTab((editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => {
             this.redrawTabActiveAndDirty(isGroupActive, editor, tabContainer, tabActionBar);
         });
         this.updateEditorActionsToolbar();
@@ -445,15 +447,16 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
     }
     doUpdateEditorLabels() {
         this.computeTabLabels();
-        this.forEachTab((editor, index, tabContainer, tabLabelWidget, tabLabel) => {
-            this.redrawTabLabel(editor, index, tabContainer, tabLabelWidget, tabLabel);
+        this.forEachTab((editor, tabIndex, tabContainer, tabLabelWidget, tabLabel) => {
+            this.redrawTabLabel(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel);
         });
         this.layout(this.dimensions);
     }
     updateEditorDirty(editor) {
-        this.withTab(editor, (editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTabActiveAndDirty(this.accessor.activeGroup === this.group, editor, tabContainer, tabActionBar));
+        this.withTab(editor, (editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTabActiveAndDirty(this.groupsView.activeGroup === this.groupView, editor, tabContainer, tabActionBar));
     }
     updateOptions(oldOptions, newOptions) {
+        super.updateOptions(oldOptions, newOptions);
         if (oldOptions.labelFormat !== newOptions.labelFormat) {
             this.computeTabLabels();
         }
@@ -480,31 +483,31 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
     updateStyles() {
         this.redraw();
     }
-    forEachTab(fn, fromIndex, toIndex) {
-        this.group.editors.forEach((editor, index) => {
-            if (typeof fromIndex === 'number' && fromIndex > index) {
+    forEachTab(fn, fromTabIndex, toTabIndex) {
+        this.tabsModel.getEditors(1 ).forEach((editor, tabIndex) => {
+            if (typeof fromTabIndex === 'number' && fromTabIndex > tabIndex) {
                 return;
             }
-            if (typeof toIndex === 'number' && toIndex < index) {
+            if (typeof toTabIndex === 'number' && toTabIndex < tabIndex) {
                 return;
             }
-            this.doWithTab(index, editor, fn);
+            this.doWithTab(tabIndex, editor, fn);
         });
     }
     withTab(editor, fn) {
-        this.doWithTab(this.group.getIndexOfEditor(editor), editor, fn);
+        this.doWithTab(this.tabsModel.indexOf(editor), editor, fn);
     }
-    doWithTab(index, editor, fn) {
+    doWithTab(tabIndex, editor, fn) {
         const tabsContainer = assertIsDefined(this.tabsContainer);
-        const tabContainer = tabsContainer.children[index];
-        const tabResourceLabel = this.tabResourceLabels.get(index);
-        const tabLabel = this.tabLabels[index];
-        const tabActionBar = this.tabActionBars[index];
+        const tabContainer = tabsContainer.children[tabIndex];
+        const tabResourceLabel = this.tabResourceLabels.get(tabIndex);
+        const tabLabel = this.tabLabels[tabIndex];
+        const tabActionBar = this.tabActionBars[tabIndex];
         if (tabContainer && tabResourceLabel && tabLabel) {
-            fn(editor, index, tabContainer, tabResourceLabel, tabLabel, tabActionBar);
+            fn(editor, tabIndex, tabContainer, tabResourceLabel, tabLabel, tabActionBar);
         }
     }
-    createTab(index, tabsContainer, tabsScrollbar) {
+    createTab(tabIndex, tabsContainer, tabsScrollbar) {
         const tabContainer = document.createElement('div');
         tabContainer.draggable = true;
         tabContainer.setAttribute('role', 'tab');
@@ -517,22 +520,30 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         const tabActionsContainer = document.createElement('div');
         tabActionsContainer.classList.add('tab-actions');
         tabContainer.appendChild(tabActionsContainer);
-        const tabActionRunner = ( new EditorCommandsContextActionRunner({ groupId: this.group.id, editorIndex: index }));
+        const that = this;
+        const tabActionRunner = ( new EditorCommandsContextActionRunner({
+            groupId: this.groupView.id,
+            get editorIndex() { return that.toEditorIndex(tabIndex); }
+        }));
         const tabActionBar = ( new ActionBar(tabActionsContainer, { ariaLabel: ( localize('ariaLabelTabActions', "Tab actions")), actionRunner: tabActionRunner }));
-        tabActionBar.onWillRun(e => {
+        const tabActionListener = tabActionBar.onWillRun(e => {
             if (e.action.id === this.closeEditorAction.id) {
                 this.blockRevealActiveTabOnce();
             }
         });
-        const tabActionBarDisposable = combinedDisposable(tabActionBar, toDisposable(insert(this.tabActionBars, tabActionBar)));
+        const tabActionBarDisposable = combinedDisposable(tabActionBar, tabActionListener, toDisposable(insert(this.tabActionBars, tabActionBar)));
         const tabBorderBottomContainer = document.createElement('div');
         tabBorderBottomContainer.classList.add('tab-border-bottom-container');
         tabContainer.appendChild(tabBorderBottomContainer);
-        const eventsDisposable = this.registerTabListeners(tabContainer, index, tabsContainer, tabsScrollbar);
+        const eventsDisposable = this.registerTabListeners(tabContainer, tabIndex, tabsContainer, tabsScrollbar);
         this.tabDisposables.push(combinedDisposable(eventsDisposable, tabActionBarDisposable, tabActionRunner, editorLabel));
         return tabContainer;
     }
-    registerTabListeners(tab, index, tabsContainer, tabsScrollbar) {
+    toEditorIndex(tabIndex) {
+        const editor = assertIsDefined(this.tabsModel.getEditorByIndex(tabIndex));
+        return this.groupView.getIndexOfEditor(editor);
+    }
+    registerTabListeners(tab, tabIndex, tabsContainer, tabsScrollbar) {
         const disposables = ( new DisposableStore());
         const handleClickOrTouch = (e, preserveFocus) => {
             tab.blur();
@@ -545,17 +556,17 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             if (this.originatesFromTabActionBar(e)) {
                 return;
             }
-            const editor = this.group.getEditorByIndex(index);
+            const editor = this.tabsModel.getEditorByIndex(tabIndex);
             if (editor) {
-                this.group.openEditor(editor, { preserveFocus, activation: EditorActivation.ACTIVATE });
+                this.groupView.openEditor(editor, { preserveFocus, activation: EditorActivation.ACTIVATE });
             }
             return undefined;
         };
         const showContextMenu = (e) => {
             EventHelper.stop(e);
-            const editor = this.group.getEditorByIndex(index);
+            const editor = this.tabsModel.getEditorByIndex(tabIndex);
             if (editor) {
-                this.onContextMenu(editor, e, tab);
+                this.onTabContextMenu(editor, e, tab);
             }
         };
         disposables.add(addDisposableListener(tab, EventType.MOUSE_DOWN, e => handleClickOrTouch(e, false)));
@@ -570,12 +581,14 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         disposables.add(addDisposableListener(tab, EventType.AUXCLICK, e => {
             if (e.button === 1 ) {
                 EventHelper.stop(e, true );
-                const editor = this.group.getEditorByIndex(index);
-                if (editor && preventEditorClose(this.group, editor, EditorCloseMethod.MOUSE, this.accessor.partOptions)) {
-                    return;
+                const editor = this.tabsModel.getEditorByIndex(tabIndex);
+                if (editor) {
+                    if (preventEditorClose(this.tabsModel, editor, EditorCloseMethod.MOUSE, this.groupsView.partOptions)) {
+                        return;
+                    }
+                    this.blockRevealActiveTabOnce();
+                    this.closeEditorAction.run({ groupId: this.groupView.id, editorIndex: this.groupView.getIndexOfEditor(editor) });
                 }
-                this.blockRevealActiveTabOnce();
-                this.closeEditorAction.run({ groupId: this.group.id, editorIndex: index });
             }
         }));
         disposables.add(addDisposableListener(tab, EventType.KEY_DOWN, e => {
@@ -592,30 +605,29 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             let handled = false;
             if (event.equals(3 ) || event.equals(10 )) {
                 handled = true;
-                const editor = this.group.getEditorByIndex(index);
+                const editor = this.tabsModel.getEditorByIndex(tabIndex);
                 if (editor) {
-                    this.group.openEditor(editor);
+                    this.groupView.openEditor(editor);
                 }
             }
             else if (( [15 , 17 , 16 , 18 , 14 , 13 ].some(kb => event.equals(kb)))) {
-                let targetIndex;
+                let editorIndex = this.toEditorIndex(tabIndex);
                 if (event.equals(15 ) || event.equals(16 )) {
-                    targetIndex = index - 1;
+                    editorIndex = editorIndex - 1;
                 }
                 else if (event.equals(17 ) || event.equals(18 )) {
-                    targetIndex = index + 1;
+                    editorIndex = editorIndex + 1;
                 }
                 else if (event.equals(14 )) {
-                    targetIndex = 0;
+                    editorIndex = 0;
                 }
                 else {
-                    targetIndex = this.group.count - 1;
+                    editorIndex = this.groupView.count - 1;
                 }
-                const target = this.group.getEditorByIndex(targetIndex);
+                const target = this.groupView.getEditorByIndex(editorIndex);
                 if (target) {
                     handled = true;
-                    this.group.openEditor(target, { preserveFocus: true });
-                    tabsContainer.childNodes[targetIndex].focus();
+                    this.groupView.openEditor(target, { preserveFocus: true }, { focusTabControl: true });
                 }
             }
             if (handled) {
@@ -633,30 +645,30 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                 else if (e.tapCount !== 2) {
                     return;
                 }
-                const editor = this.group.getEditorByIndex(index);
-                if (editor && this.group.isPinned(editor)) {
-                    if (this.accessor.partOptions.doubleClickTabToToggleEditorGroupSizes) {
-                        this.accessor.arrangeGroups(2 , this.group);
+                const editor = this.tabsModel.getEditorByIndex(tabIndex);
+                if (editor && this.tabsModel.isPinned(editor)) {
+                    if (this.groupsView.partOptions.doubleClickTabToToggleEditorGroupSizes) {
+                        this.groupsView.arrangeGroups(2 , this.groupView);
                     }
                 }
                 else {
-                    this.group.pinEditor(editor);
+                    this.groupView.pinEditor(editor);
                 }
             }));
         }
         disposables.add(addDisposableListener(tab, EventType.CONTEXT_MENU, e => {
             EventHelper.stop(e, true);
-            const editor = this.group.getEditorByIndex(index);
+            const editor = this.tabsModel.getEditorByIndex(tabIndex);
             if (editor) {
-                this.onContextMenu(editor, e, tab);
+                this.onTabContextMenu(editor, e, tab);
             }
         }, true ));
         disposables.add(addDisposableListener(tab, EventType.DRAG_START, e => {
-            const editor = this.group.getEditorByIndex(index);
+            const editor = this.tabsModel.getEditorByIndex(tabIndex);
             if (!editor) {
                 return;
             }
-            this.editorTransfer.setData([( new DraggedEditorIdentifier({ editor, groupId: this.group.id }))], DraggedEditorIdentifier.prototype);
+            this.editorTransfer.setData([( new DraggedEditorIdentifier({ editor, groupId: this.groupView.id }))], DraggedEditorIdentifier.prototype);
             if (e.dataTransfer) {
                 e.dataTransfer.effectAllowed = 'copyMove';
             }
@@ -679,7 +691,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                     const data = this.editorTransfer.getData(DraggedEditorIdentifier.prototype);
                     if (Array.isArray(data)) {
                         const localDraggedEditor = data[0].identifier;
-                        if (localDraggedEditor.editor === this.group.getEditorByIndex(index) && localDraggedEditor.groupId === this.group.id) {
+                        if (localDraggedEditor.editor === this.tabsModel.getEditorByIndex(tabIndex) && localDraggedEditor.groupId === this.groupView.id) {
                             if (e.dataTransfer) {
                                 e.dataTransfer.dropEffect = 'none';
                             }
@@ -692,29 +704,29 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                         e.dataTransfer.dropEffect = 'copy';
                     }
                 }
-                this.updateDropFeedback(tab, true, index);
+                this.updateDropFeedback(tab, true, tabIndex);
             },
             onDragOver: (_, dragDuration) => {
-                if (dragDuration >= TabsTitleControl_1.DRAG_OVER_OPEN_TAB_THRESHOLD) {
-                    const draggedOverTab = this.group.getEditorByIndex(index);
-                    if (draggedOverTab && this.group.activeEditor !== draggedOverTab) {
-                        this.group.openEditor(draggedOverTab, { preserveFocus: true });
+                if (dragDuration >= MultiEditorTabsControl_1.DRAG_OVER_OPEN_TAB_THRESHOLD) {
+                    const draggedOverTab = this.tabsModel.getEditorByIndex(tabIndex);
+                    if (draggedOverTab && this.tabsModel.activeEditor !== draggedOverTab) {
+                        this.groupView.openEditor(draggedOverTab, { preserveFocus: true });
                     }
                 }
             },
             onDragLeave: () => {
                 tab.classList.remove('dragged-over');
-                this.updateDropFeedback(tab, false, index);
+                this.updateDropFeedback(tab, false, tabIndex);
             },
             onDragEnd: () => {
                 tab.classList.remove('dragged-over');
-                this.updateDropFeedback(tab, false, index);
+                this.updateDropFeedback(tab, false, tabIndex);
                 this.editorTransfer.clearData(DraggedEditorIdentifier.prototype);
             },
             onDrop: e => {
                 tab.classList.remove('dragged-over');
-                this.updateDropFeedback(tab, false, index);
-                this.onDrop(e, index, tabsContainer);
+                this.updateDropFeedback(tab, false, tabIndex);
+                this.onDrop(e, tabIndex, tabsContainer);
             }
         })));
         return disposables;
@@ -724,7 +736,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             const data = this.groupTransfer.getData(DraggedEditorGroupIdentifier.prototype);
             if (Array.isArray(data)) {
                 const group = data[0];
-                if (group.identifier === this.group.id) {
+                if (group.identifier === this.groupView.id) {
                     return false;
                 }
             }
@@ -738,10 +750,10 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         }
         return false;
     }
-    updateDropFeedback(element, isDND, index) {
-        const isTab = (typeof index === 'number');
-        const editor = typeof index === 'number' ? this.group.getEditorByIndex(index) : undefined;
-        const isActiveTab = isTab && !!editor && this.group.isActive(editor);
+    updateDropFeedback(element, isDND, tabIndex) {
+        const isTab = (typeof tabIndex === 'number');
+        const editor = typeof tabIndex === 'number' ? this.tabsModel.getEditorByIndex(tabIndex) : undefined;
+        const isActiveTab = isTab && !!editor && this.tabsModel.isActive(editor);
         const noDNDBackgroundColor = isTab ? this.getColor(isActiveTab ? TAB_ACTIVE_BACKGROUND : TAB_INACTIVE_BACKGROUND) : '';
         element.style.backgroundColor = (isDND ? this.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND) : noDNDBackgroundColor) || '';
         const activeContrastBorderColor = this.getColor(activeContrastBorder);
@@ -759,29 +771,28 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         }
     }
     computeTabLabels() {
-        const { labelFormat } = this.accessor.partOptions;
+        const { labelFormat } = this.groupsView.partOptions;
         const { verbosity, shortenDuplicates } = this.getLabelConfigFlags(labelFormat);
         const labels = [];
-        let activeEditorIndex = -1;
-        for (let i = 0; i < this.group.editors.length; i++) {
-            const editor = this.group.editors[i];
+        let activeEditorTabIndex = -1;
+        this.tabsModel.getEditors(1 ).forEach((editor, tabIndex) => {
             labels.push({
                 editor,
                 name: editor.getName(),
                 description: editor.getDescription(verbosity),
                 forceDescription: editor.hasCapability(64 ),
                 title: editor.getTitle(2 ),
-                ariaLabel: computeEditorAriaLabel(editor, i, this.group, this.editorGroupService.count)
+                ariaLabel: computeEditorAriaLabel(editor, tabIndex, this.groupView, this.editorGroupService.count)
             });
-            if (editor === this.group.activeEditor) {
-                activeEditorIndex = i;
+            if (editor === this.tabsModel.activeEditor) {
+                activeEditorTabIndex = tabIndex;
             }
-        }
+        });
         if (shortenDuplicates) {
             this.shortenTabLabels(labels);
         }
         this.tabLabels = labels;
-        this.activeTabLabel = labels[activeEditorIndex];
+        this.activeTabLabel = labels[activeEditorTabIndex];
     }
     shortenTabLabels(labels) {
         const mapNameToDuplicates = ( new Map());
@@ -829,9 +840,9 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                 continue;
             }
             const shortenedDescriptions = shorten(descriptions, this.path.sep);
-            descriptions.forEach((description, index) => {
+            descriptions.forEach((description, tabIndex) => {
                 for (const label of mapDescriptionToDuplicates.get(description) || []) {
-                    label.description = shortenedDescriptions[index];
+                    label.description = shortenedDescriptions[tabIndex];
                 }
             });
         }
@@ -863,16 +874,16 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                 this.tabsAndActionsContainer.style.removeProperty('--tabs-border-bottom-color');
             }
         }
-        this.forEachTab((editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => {
-            this.redrawTab(editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar);
+        this.forEachTab((editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => {
+            this.redrawTab(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar);
         });
         this.updateEditorActionsToolbar();
         this.layout(this.dimensions, options);
     }
-    redrawTab(editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) {
-        const isTabSticky = this.group.isSticky(index);
-        const options = this.accessor.partOptions;
-        this.redrawTabLabel(editor, index, tabContainer, tabLabelWidget, tabLabel);
+    redrawTab(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) {
+        const isTabSticky = this.tabsModel.isSticky(tabIndex);
+        const options = this.groupsView.partOptions;
+        this.redrawTabLabel(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel);
         const tabAction = isTabSticky ? this.unpinEditorAction : this.closeEditorAction;
         if (!tabActionBar.hasAction(tabAction)) {
             if (!tabActionBar.isEmpty()) {
@@ -897,27 +908,27 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             let stickyTabWidth = 0;
             switch (options.pinnedTabSizing) {
                 case 'compact':
-                    stickyTabWidth = TabsTitleControl_1.TAB_WIDTH.compact;
+                    stickyTabWidth = MultiEditorTabsControl_1.TAB_WIDTH.compact;
                     break;
                 case 'shrink':
-                    stickyTabWidth = TabsTitleControl_1.TAB_WIDTH.shrink;
+                    stickyTabWidth = MultiEditorTabsControl_1.TAB_WIDTH.shrink;
                     break;
             }
-            tabContainer.style.left = `${index * stickyTabWidth}px`;
+            tabContainer.style.left = `${tabIndex * stickyTabWidth}px`;
         }
         else {
             tabContainer.style.left = 'auto';
         }
-        this.redrawTabBorders(index, tabContainer);
-        this.redrawTabActiveAndDirty(this.accessor.activeGroup === this.group, editor, tabContainer, tabActionBar);
+        this.redrawTabBorders(tabIndex, tabContainer);
+        this.redrawTabActiveAndDirty(this.groupsView.activeGroup === this.groupView, editor, tabContainer, tabActionBar);
     }
-    redrawTabLabel(editor, index, tabContainer, tabLabelWidget, tabLabel) {
-        const options = this.accessor.partOptions;
+    redrawTabLabel(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel) {
+        const options = this.groupsView.partOptions;
         let name;
         let forceLabel = false;
         let fileDecorationBadges = Boolean(options.decorations?.badges);
         let description;
-        if (options.pinnedTabSizing === 'compact' && this.group.isSticky(index)) {
+        if (options.pinnedTabSizing === 'compact' && this.tabsModel.isSticky(tabIndex)) {
             const isShowingIcons = options.showIcons && options.hasIcons;
             name = isShowingIcons ? '' : tabLabel.name?.charAt(0).toUpperCase();
             description = '';
@@ -937,7 +948,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         tabLabelWidget.setResource({ name, description, resource: EditorResourceAccessor.getOriginalUri(editor, { supportSideBySide: SideBySideEditor.BOTH }) }, {
             title,
             extraClasses: coalesce(['tab-label', fileDecorationBadges ? 'tab-label-has-badge' : undefined].concat(editor.getLabelExtraClasses())),
-            italic: !this.group.isPinned(editor),
+            italic: !this.tabsModel.isPinned(editor),
             forceLabel,
             fileDecorations: {
                 colors: Boolean(options.decorations?.colors),
@@ -953,12 +964,12 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         }
     }
     redrawTabActiveAndDirty(isGroupActive, editor, tabContainer, tabActionBar) {
-        const isTabActive = this.group.isActive(editor);
+        const isTabActive = this.tabsModel.isActive(editor);
         const hasModifiedBorderTop = this.doRedrawTabDirty(isGroupActive, isTabActive, editor, tabContainer);
         this.doRedrawTabActive(isGroupActive, !hasModifiedBorderTop, editor, tabContainer, tabActionBar);
     }
     doRedrawTabActive(isGroupActive, allowBorderTop, editor, tabContainer, tabActionBar) {
-        if (this.group.isActive(editor)) {
+        if (this.tabsModel.isActive(editor)) {
             tabContainer.classList.add('active');
             tabContainer.setAttribute('aria-selected', 'true');
             tabContainer.tabIndex = 0;
@@ -998,7 +1009,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         let hasModifiedBorderColor = false;
         if (editor.isDirty() && !editor.isSaving()) {
             tabContainer.classList.add('dirty');
-            if (this.accessor.partOptions.highlightModifiedTabs) {
+            if (this.groupsView.partOptions.highlightModifiedTabs) {
                 let modifiedBorderColor;
                 if (isGroupActive && isTabActive) {
                     modifiedBorderColor = this.getColor(TAB_ACTIVE_MODIFIED_BORDER);
@@ -1029,15 +1040,16 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         }
         return hasModifiedBorderColor;
     }
-    redrawTabBorders(index, tabContainer) {
-        const isTabSticky = this.group.isSticky(index);
-        const isTabLastSticky = isTabSticky && this.group.stickyCount === index + 1;
-        const borderRightColor = ((isTabLastSticky ? this.getColor(TAB_LAST_PINNED_BORDER) : undefined) || this.getColor(TAB_BORDER) || this.getColor(contrastBorder));
+    redrawTabBorders(tabIndex, tabContainer) {
+        const isTabSticky = this.tabsModel.isSticky(tabIndex);
+        const isTabLastSticky = isTabSticky && this.tabsModel.stickyCount === tabIndex + 1;
+        const showLastStickyTabBorderColor = this.tabsModel.stickyCount !== this.tabsModel.count;
+        const borderRightColor = ((isTabLastSticky && showLastStickyTabBorderColor ? this.getColor(TAB_LAST_PINNED_BORDER) : undefined) || this.getColor(TAB_BORDER) || this.getColor(contrastBorder));
         tabContainer.style.borderRight = borderRightColor ? `1px solid ${borderRightColor}` : '';
         tabContainer.style.outlineColor = this.getColor(activeContrastBorder) || '';
     }
     prepareEditorActions(editorActions) {
-        const isGroupActive = this.accessor.activeGroup === this.group;
+        const isGroupActive = this.groupsView.activeGroup === this.groupView;
         if (isGroupActive) {
             return editorActions;
         }
@@ -1049,76 +1061,62 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         }
     }
     getHeight() {
-        const showsBreadcrumbs = this.breadcrumbsControl && !this.breadcrumbsControl.isHidden();
         if (this.dimensions.used) {
-            return {
-                total: this.dimensions.used.height,
-                offset: showsBreadcrumbs ? this.dimensions.used.height - BreadcrumbsControl.HEIGHT : this.dimensions.used.height
-            };
+            return this.dimensions.used.height;
         }
         else {
             return this.computeHeight();
         }
     }
     computeHeight() {
-        let total;
-        if (this.accessor.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains('wrapping')) {
-            total = this.tabsAndActionsContainer.offsetHeight;
+        let height;
+        if (!this.visible) {
+            height = 0;
         }
-        else {
-            total = TabsTitleControl_1.TAB_HEIGHT;
+        else if (this.groupsView.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains('wrapping')) {
+            height = this.tabsAndActionsContainer.offsetHeight;
         }
-        const offset = total;
-        if (this.breadcrumbsControl && !this.breadcrumbsControl.isHidden()) {
-            total += BreadcrumbsControl.HEIGHT;
+        else {
+            height = this.tabHeight;
         }
-        return { total, offset };
+        return height;
     }
     layout(dimensions, options) {
         Object.assign(this.dimensions, dimensions);
-        if (!this.layoutScheduler.value) {
-            const scheduledLayout = scheduleAtNextAnimationFrame(() => {
-                this.doLayout(this.dimensions, this.layoutScheduler.value?.options );
-                this.layoutScheduler.clear();
-            });
-            this.layoutScheduler.value = { options, dispose: () => scheduledLayout.dispose() };
-        }
-        if (options?.forceRevealActiveTab) {
-            this.layoutScheduler.value.options = {
-                ...this.layoutScheduler.value.options,
-                forceRevealActiveTab: true
-            };
+        if (this.visible) {
+            if (!this.layoutScheduler.value) {
+                const scheduledLayout = scheduleAtNextAnimationFrame(() => {
+                    this.doLayout(this.dimensions, this.layoutScheduler.value?.options );
+                    this.layoutScheduler.clear();
+                });
+                this.layoutScheduler.value = { options, dispose: () => scheduledLayout.dispose() };
+            }
+            if (options?.forceRevealActiveTab) {
+                this.layoutScheduler.value.options = {
+                    ...this.layoutScheduler.value.options,
+                    forceRevealActiveTab: true
+                };
+            }
         }
         if (!this.dimensions.used) {
-            this.dimensions.used = ( new Dimension(dimensions.container.width, this.computeHeight().total));
+            this.dimensions.used = ( new Dimension(dimensions.container.width, this.computeHeight()));
         }
         return this.dimensions.used;
     }
     doLayout(dimensions, options) {
-        const activeTabAndIndex = this.group.activeEditor ? this.getTabAndIndex(this.group.activeEditor) : undefined;
-        if (activeTabAndIndex && dimensions.container !== Dimension.None && dimensions.available !== Dimension.None) {
-            this.doLayoutBreadcrumbs(dimensions);
-            const [activeTab, activeIndex] = activeTabAndIndex;
-            this.doLayoutTabs(activeTab, activeIndex, dimensions, options);
+        if (dimensions.container !== Dimension.None && dimensions.available !== Dimension.None) {
+            this.doLayoutTabs(dimensions, options);
         }
         const oldDimension = this.dimensions.used;
-        const newDimension = this.dimensions.used = ( new Dimension(dimensions.container.width, this.computeHeight().total));
+        const newDimension = this.dimensions.used = ( new Dimension(dimensions.container.width, this.computeHeight()));
         if (oldDimension && oldDimension.height !== newDimension.height) {
-            this.group.relayout();
+            this.groupView.relayout();
         }
     }
-    handleBreadcrumbsEnablementChange() {
-        this.group.relayout();
-    }
-    doLayoutBreadcrumbs(dimensions) {
-        if (this.breadcrumbsControl && !this.breadcrumbsControl.isHidden()) {
-            this.breadcrumbsControl.layout(( new Dimension(dimensions.container.width, BreadcrumbsControl.HEIGHT)));
-        }
-    }
-    doLayoutTabs(activeTab, activeIndex, dimensions, options) {
+    doLayoutTabs(dimensions, options) {
         const tabsWrapMultiLine = this.doLayoutTabsWrapping(dimensions);
         if (!tabsWrapMultiLine) {
-            this.doLayoutTabsNonWrapping(activeTab, activeIndex, options);
+            this.doLayoutTabsNonWrapping(options);
         }
     }
     doLayoutTabsWrapping(dimensions) {
@@ -1130,7 +1128,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             tabsAndActionsContainer.classList.toggle('wrapping', tabsWrapMultiLine);
             tabsContainer.style.setProperty('--last-tab-margin-right', tabsWrapMultiLine ? `${editorToolbarContainer.offsetWidth}px` : '0');
         }
-        if (this.accessor.partOptions.wrapTabs) {
+        if (this.groupsView.partOptions.wrapTabs) {
             const visibleTabsWidth = tabsContainer.offsetWidth;
             const allTabsWidth = tabsContainer.scrollWidth;
             const lastTabFitsWrapped = () => {
@@ -1149,7 +1147,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             }
             if (tabsWrapMultiLine) {
                 if ((tabsContainer.offsetHeight > dimensions.available.height) ||
-                    (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === TabsTitleControl_1.TAB_HEIGHT) ||
+                    (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.tabHeight) ||
                     (!lastTabFitsWrapped())
                 ) {
                     updateTabsWrapping(false);
@@ -1191,26 +1189,28 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         }
         return tabsWrapMultiLine;
     }
-    doLayoutTabsNonWrapping(activeTab, activeIndex, options) {
+    doLayoutTabsNonWrapping(options) {
         const [tabsContainer, tabsScrollbar] = assertAllDefined(this.tabsContainer, this.tabsScrollbar);
         const visibleTabsWidth = tabsContainer.offsetWidth;
         const allTabsWidth = tabsContainer.scrollWidth;
         let stickyTabsWidth = 0;
-        if (this.group.stickyCount > 0) {
+        if (this.tabsModel.stickyCount > 0) {
             let stickyTabWidth = 0;
-            switch (this.accessor.partOptions.pinnedTabSizing) {
+            switch (this.groupsView.partOptions.pinnedTabSizing) {
                 case 'compact':
-                    stickyTabWidth = TabsTitleControl_1.TAB_WIDTH.compact;
+                    stickyTabWidth = MultiEditorTabsControl_1.TAB_WIDTH.compact;
                     break;
                 case 'shrink':
-                    stickyTabWidth = TabsTitleControl_1.TAB_WIDTH.shrink;
+                    stickyTabWidth = MultiEditorTabsControl_1.TAB_WIDTH.shrink;
                     break;
             }
-            stickyTabsWidth = this.group.stickyCount * stickyTabWidth;
+            stickyTabsWidth = this.tabsModel.stickyCount * stickyTabWidth;
         }
-        let activeTabPositionStatic = this.accessor.partOptions.pinnedTabSizing !== 'normal' && this.group.isSticky(activeIndex);
+        const activeTabAndIndex = this.tabsModel.activeEditor ? this.getTabAndIndex(this.tabsModel.activeEditor) : undefined;
+        const [activeTab, activeTabIndex] = activeTabAndIndex ?? [undefined, undefined];
+        let activeTabPositionStatic = this.groupsView.partOptions.pinnedTabSizing !== 'normal' && typeof activeTabIndex === 'number' && this.tabsModel.isSticky(activeTabIndex);
         let availableTabsContainerWidth = visibleTabsWidth - stickyTabsWidth;
-        if (this.group.stickyCount > 0 && availableTabsContainerWidth < TabsTitleControl_1.TAB_WIDTH.fit) {
+        if (this.tabsModel.stickyCount > 0 && availableTabsContainerWidth < MultiEditorTabsControl_1.TAB_WIDTH.fit) {
             tabsContainer.classList.add('disable-sticky-tabs');
             availableTabsContainerWidth = visibleTabsWidth;
             stickyTabsWidth = 0;
@@ -1221,7 +1221,7 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         }
         let activeTabPosX;
         let activeTabWidth;
-        if (!this.blockRevealActiveTab) {
+        if (!this.blockRevealActiveTab && activeTab) {
             activeTabPosX = activeTab.offsetLeft;
             activeTabWidth = activeTab.offsetWidth;
         }
@@ -1254,23 +1254,33 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             });
         }
     }
+    updateTabsControlVisibility() {
+        const tabsAndActionsContainer = assertIsDefined(this.tabsAndActionsContainer);
+        tabsAndActionsContainer.classList.toggle('empty', !this.visible);
+        if (!this.visible && this.dimensions) {
+            this.dimensions.used = undefined;
+        }
+    }
+    get visible() {
+        return this.tabsModel.count > 0;
+    }
     getTabAndIndex(editor) {
-        const editorIndex = this.group.getIndexOfEditor(editor);
-        const tab = this.getTabAtIndex(editorIndex);
+        const tabIndex = this.tabsModel.indexOf(editor);
+        const tab = this.getTabAtIndex(tabIndex);
         if (tab) {
-            return [tab, editorIndex];
+            return [tab, tabIndex];
         }
         return undefined;
     }
-    getTabAtIndex(editorIndex) {
-        if (editorIndex >= 0) {
+    getTabAtIndex(tabIndex) {
+        if (tabIndex >= 0) {
             const tabsContainer = assertIsDefined(this.tabsContainer);
-            return tabsContainer.children[editorIndex];
+            return tabsContainer.children[tabIndex];
         }
         return undefined;
     }
     getLastTab() {
-        return this.getTabAtIndex(this.group.count - 1);
+        return this.getTabAtIndex(this.tabsModel.count - 1);
     }
     blockRevealActiveTabOnce() {
         this.blockRevealActiveTab = true;
@@ -1285,22 +1295,27 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
         }
         return !!findParentWithClass(element, 'action-item', 'tab');
     }
-    async onDrop(e, targetIndex, tabsContainer) {
+    async onDrop(e, targetTabIndex, tabsContainer) {
         EventHelper.stop(e, true);
         this.updateDropFeedback(tabsContainer, false);
         tabsContainer.classList.remove('scroll');
+        const targetEditorIndex = this.tabsModel instanceof UnstickyEditorGroupModel ? targetTabIndex + this.groupView.stickyCount : targetTabIndex;
+        const options = {
+            sticky: this.tabsModel instanceof StickyEditorGroupModel && this.tabsModel.stickyCount === targetEditorIndex,
+            index: targetEditorIndex
+        };
         if (this.groupTransfer.hasData(DraggedEditorGroupIdentifier.prototype)) {
             const data = this.groupTransfer.getData(DraggedEditorGroupIdentifier.prototype);
             if (Array.isArray(data)) {
-                const sourceGroup = this.accessor.getGroup(data[0].identifier);
+                const sourceGroup = this.groupsView.getGroup(data[0].identifier);
                 if (sourceGroup) {
-                    const mergeGroupOptions = { index: targetIndex };
+                    const mergeGroupOptions = { index: targetEditorIndex };
                     if (!this.isMoveOperation(e, sourceGroup.id)) {
                         mergeGroupOptions.mode = 0 ;
                     }
-                    this.accessor.mergeGroup(sourceGroup, this.group, mergeGroupOptions);
+                    this.groupsView.mergeGroup(sourceGroup, this.groupView, mergeGroupOptions);
                 }
-                this.group.focus();
+                this.groupView.focus();
                 this.groupTransfer.clearData(DraggedEditorGroupIdentifier.prototype);
             }
         }
@@ -1308,16 +1323,16 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             const data = this.editorTransfer.getData(DraggedEditorIdentifier.prototype);
             if (Array.isArray(data)) {
                 const draggedEditor = data[0].identifier;
-                const sourceGroup = this.accessor.getGroup(draggedEditor.groupId);
+                const sourceGroup = this.groupsView.getGroup(draggedEditor.groupId);
                 if (sourceGroup) {
                     if (this.isMoveOperation(e, draggedEditor.groupId, draggedEditor.editor)) {
-                        sourceGroup.moveEditor(draggedEditor.editor, this.group, { index: targetIndex });
+                        sourceGroup.moveEditor(draggedEditor.editor, this.groupView, options);
                     }
                     else {
-                        sourceGroup.copyEditor(draggedEditor.editor, this.group, { index: targetIndex });
+                        sourceGroup.copyEditor(draggedEditor.editor, this.groupView, options);
                     }
                 }
-                this.group.focus();
+                this.groupView.focus();
                 this.editorTransfer.clearData(DraggedEditorIdentifier.prototype);
             }
         }
@@ -1330,17 +1345,17 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
                     if (dataTransferItem) {
                         const treeDropData = await extractTreeDropData(dataTransferItem);
                         editors.push(...( treeDropData.map(
-                            editor => ({ ...editor, options: { ...editor.options, pinned: true, index: targetIndex } })
+                            editor => ({ ...editor, options: { ...editor.options, pinned: true, index: targetEditorIndex } })
                         )));
                     }
                 }
-                this.editorService.openEditors(editors, this.group, { validateTrust: true });
+                this.editorService.openEditors(editors, this.groupView, { validateTrust: true });
             }
             this.treeItemsTransfer.clearData(DraggedTreeItemsIdentifier.prototype);
         }
         else {
             const dropHandler = this.instantiationService.createInstance(ResourcesDropHandler, { allowWorkspaceOpen: false });
-            dropHandler.handleDrop(e, () => this.group, () => this.group.focus(), targetIndex);
+            dropHandler.handleDrop(e, () => this.groupView, () => this.groupView.focus(), options);
         }
     }
     isMoveOperation(e, sourceGroup, sourceEditor) {
@@ -1348,30 +1363,28 @@ let TabsTitleControl = class TabsTitleControl extends TitleControl {
             return true;
         }
         const isCopy = (e.ctrlKey && !isMacintosh) || (e.altKey && isMacintosh);
-        return !isCopy || sourceGroup === this.group.id;
+        return (!isCopy || sourceGroup === this.groupView.id);
     }
     dispose() {
         super.dispose();
         this.tabDisposables = dispose(this.tabDisposables);
     }
 };
-TabsTitleControl = TabsTitleControl_1 = ( __decorate([
-    ( __param(3, IContextMenuService)),
-    ( __param(4, IInstantiationService)),
-    ( __param(5, IContextKeyService)),
-    ( __param(6, IKeybindingService)),
-    ( __param(7, INotificationService)),
-    ( __param(8, IMenuService)),
-    ( __param(9, IQuickInputService)),
-    ( __param(10, IThemeService)),
-    ( __param(11, IConfigurationService)),
-    ( __param(12, IFileService)),
-    ( __param(13, IEditorService)),
-    ( __param(14, IPathService)),
-    ( __param(15, IEditorGroupsService)),
-    ( __param(16, ITreeViewsDnDService)),
-    ( __param(17, IEditorResolverService))
-], TabsTitleControl));
+MultiEditorTabsControl = MultiEditorTabsControl_1 = ( __decorate([
+    ( __param(4, IContextMenuService)),
+    ( __param(5, IInstantiationService)),
+    ( __param(6, IContextKeyService)),
+    ( __param(7, IKeybindingService)),
+    ( __param(8, INotificationService)),
+    ( __param(9, IMenuService)),
+    ( __param(10, IQuickInputService)),
+    ( __param(11, IThemeService)),
+    ( __param(12, IEditorService)),
+    ( __param(13, IPathService)),
+    ( __param(14, IEditorGroupsService)),
+    ( __param(15, ITreeViewsDnDService)),
+    ( __param(16, IEditorResolverService))
+], MultiEditorTabsControl));
 registerThemingParticipant((theme, collector) => {
     const borderColor = theme.getColor(TAB_BORDER);
     if (borderColor) {
@@ -1568,4 +1581,4 @@ registerThemingParticipant((theme, collector) => {
     }
 });
 
-export { TabsTitleControl };
+export { MultiEditorTabsControl };