@codingame/monaco-vscode-api 1.79.0-next.0 → 1.79.1

package/dist/vscode/vs/workbench/browser/parts/editor/tabsTitleControl.js

@@ -0,0 +1,1504 @@
+import { __decorate, __param } from '../../../../../../node_modules/tslib/tslib.es6.js';
+import './media/tabstitlecontrol.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, EditorResourceAccessor, SideBySideEditor } from '../../../common/editor.js';
+import { computeEditorAriaLabel } from '../../editor.js';
+import { StandardKeyboardEvent } from 'monaco-editor/esm/vs/base/browser/keyboardEvent.js';
+import { Gesture, EventType as EventType$1 } from 'monaco-editor/esm/vs/base/browser/touch.js';
+import { ResourceLabels, DEFAULT_LABELS_CONTAINER } from '../../labels.js';
+import { ActionBar } from 'monaco-editor/esm/vs/base/browser/ui/actionbar/actionbar.js';
+import { IContextMenuService } from 'monaco-editor/esm/vs/platform/contextview/browser/contextView.js';
+import { IInstantiationService } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation.js';
+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 { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput.js';
+import { MutableDisposable, dispose, combinedDisposable, toDisposable, DisposableStore } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import { ScrollableElement } from 'monaco-editor/esm/vs/base/browser/ui/scrollbar/scrollableElement.js';
+import { getOrSet } from 'monaco-editor/esm/vs/base/common/map.js';
+import { registerThemingParticipant, IThemeService } from 'monaco-editor/esm/vs/platform/theme/common/themeService.js';
+import { TAB_BORDER, TAB_HOVER_BACKGROUND, TAB_UNFOCUSED_HOVER_BACKGROUND, TAB_HOVER_FOREGROUND, TAB_UNFOCUSED_HOVER_FOREGROUND, TAB_HOVER_BORDER, TAB_UNFOCUSED_HOVER_BORDER, EDITOR_GROUP_HEADER_TABS_BACKGROUND, EDITOR_DRAG_AND_DROP_BACKGROUND, TAB_ACTIVE_BACKGROUND, TAB_UNFOCUSED_ACTIVE_BACKGROUND, TAB_INACTIVE_BACKGROUND, TAB_UNFOCUSED_INACTIVE_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BORDER, TAB_ACTIVE_BORDER, TAB_UNFOCUSED_ACTIVE_BORDER, TAB_ACTIVE_BORDER_TOP, TAB_UNFOCUSED_ACTIVE_BORDER_TOP, TAB_ACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, TAB_UNFOCUSED_INACTIVE_FOREGROUND, TAB_ACTIVE_MODIFIED_BORDER, TAB_INACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER, TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER, TAB_LAST_PINNED_BORDER, WORKBENCH_BACKGROUND } from '../../../common/theme.js';
+import { activeContrastBorder, contrastBorder, editorBackground } from 'monaco-editor/esm/vs/platform/theme/common/colorRegistry.js';
+import { DraggedEditorIdentifier, DraggedEditorGroupIdentifier, extractTreeDropData, ResourcesDropHandler } from '../../dnd.js';
+import { INotificationService } from 'monaco-editor/esm/vs/platform/notification/common/notification.js';
+import { IEditorGroupsService } from '../../../services/editor/common/editorGroupsService.js';
+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 './editorActions.js';
+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 '../../../services/editor/common/editorService.js';
+import { basenameOrAuthority } from 'monaco-editor/esm/vs/base/common/resources.js';
+import { RunOnceScheduler } from 'monaco-editor/esm/vs/base/common/async.js';
+import { IPathService } from '../../../services/path/common/pathService.js';
+import { win32, posix } from 'monaco-editor/esm/vs/base/common/path.js';
+import { insert, coalesce } from 'monaco-editor/esm/vs/base/common/arrays.js';
+import { isHighContrast } from 'monaco-editor/esm/vs/platform/theme/common/theme.js';
+import { isSafari } from 'monaco-editor/esm/vs/base/browser/browser.js';
+import { equals } from 'monaco-editor/esm/vs/base/common/objects.js';
+import { EditorActivation } from 'monaco-editor/esm/vs/platform/editor/common/editor.js';
+import { UNLOCK_GROUP_COMMAND_ID } from './editorCommands.js';
+import { StandardMouseEvent } from 'monaco-editor/esm/vs/base/browser/mouseEvent.js';
+import { ITreeViewsDnDService } from 'monaco-editor/esm/vs/editor/common/services/treeViewsDndService.js';
+import { DraggedTreeItemsIdentifier } from 'monaco-editor/esm/vs/editor/common/services/treeViewsDnd.js';
+let TabsTitleControl = class TabsTitleControl extends TitleControl {
+    constructor(parent, accessor, group, contextMenuService, instantiationService, contextKeyService, keybindingService, notificationService, menuService, quickInputService, themeService, configurationService, fileService, editorService, pathService, editorGroupService, treeViewsDragAndDropService) {
+        super(parent, accessor, group, contextMenuService, instantiationService, contextKeyService, keybindingService, notificationService, menuService, quickInputService, themeService, configurationService, fileService);
+        this.editorService = editorService;
+        this.pathService = pathService;
+        this.editorGroupService = editorGroupService;
+        this.treeViewsDragAndDropService = treeViewsDragAndDropService;
+        this.closeEditorAction = this._register(this.instantiationService.createInstance(CloseOneEditorAction, CloseOneEditorAction.ID, CloseOneEditorAction.LABEL));
+        this.unpinEditorAction = this._register(this.instantiationService.createInstance(UnpinEditorAction, UnpinEditorAction.ID, UnpinEditorAction.LABEL));
+        this.tabResourceLabels = this._register(this.instantiationService.createInstance(ResourceLabels, DEFAULT_LABELS_CONTAINER));
+        this.tabLabels = [];
+        this.tabActionBars = [];
+        this.tabDisposables = [];
+        this.dimensions = {
+            container: Dimension.None,
+            available: Dimension.None
+        };
+        this.layoutScheduler = this._register(( new MutableDisposable()));
+        this.path = isWindows ? win32 : posix;
+        this.lastMouseWheelEventTime = 0;
+        this.updateEditorLabelScheduler = this._register(( new RunOnceScheduler(() => this.doUpdateEditorLabels(), 0)));
+        (async () => this.path = await this.pathService.path)();
+        this._register(this.tabResourceLabels.onDidChangeDecorations(() => this.doHandleDecorationsChange()));
+    }
+    create(parent) {
+        this.titleContainer = parent;
+        this.tabsAndActionsContainer = document.createElement('div');
+        this.tabsAndActionsContainer.classList.add('tabs-and-actions-container');
+        this.titleContainer.appendChild(this.tabsAndActionsContainer);
+        this.tabsContainer = document.createElement('div');
+        this.tabsContainer.setAttribute('role', 'tablist');
+        this.tabsContainer.draggable = true;
+        this.tabsContainer.classList.add('tabs-container');
+        this._register(Gesture.addTarget(this.tabsContainer));
+        this.tabsScrollbar = this._register(this.createTabsScrollbar(this.tabsContainer));
+        this.tabsAndActionsContainer.appendChild(this.tabsScrollbar.getDomNode());
+        this.registerTabsContainerListeners(this.tabsContainer, this.tabsScrollbar);
+        this.editorToolbarContainer = document.createElement('div');
+        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 });
+    }
+    createTabsScrollbar(scrollable) {
+        const tabsScrollbar = ( new ScrollableElement(scrollable, {
+            horizontal: 1 ,
+            horizontalScrollbarSize: this.getTabsScrollbarSizing(),
+            vertical: 2 ,
+            scrollYToX: true,
+            useShadows: false
+        }));
+        tabsScrollbar.onScroll(e => {
+            if (e.scrollLeftChanged) {
+                scrollable.scrollLeft = e.scrollLeft;
+            }
+        });
+        return tabsScrollbar;
+    }
+    updateTabsScrollbarSizing() {
+        this.tabsScrollbar?.updateOptions({
+            horizontalScrollbarSize: this.getTabsScrollbarSizing()
+        });
+    }
+    getTabsScrollbarSizing() {
+        if (this.accessor.partOptions.titleScrollbarSizing !== 'large') {
+            return TabsTitleControl.SCROLLBAR_SIZES.default;
+        }
+        return TabsTitleControl.SCROLLBAR_SIZES.large;
+    }
+    registerTabsContainerListeners(tabsContainer, tabsScrollbar) {
+        this.enableGroupDragging(tabsContainer);
+        this._register(addDisposableListener(tabsContainer, EventType.SCROLL, () => {
+            if (tabsContainer.classList.contains('scroll')) {
+                tabsScrollbar.setScrollPosition({
+                    scrollLeft: tabsContainer.scrollLeft
+                });
+            }
+        }));
+        for (const eventType of [EventType$1.Tap, EventType.DBLCLICK]) {
+            this._register(addDisposableListener(tabsContainer, eventType, (e) => {
+                if (eventType === EventType.DBLCLICK) {
+                    if (e.target !== tabsContainer) {
+                        return;
+                    }
+                }
+                else {
+                    if (e.tapCount !== 2) {
+                        return;
+                    }
+                    if (e.initialTarget !== tabsContainer) {
+                        return;
+                    }
+                }
+                EventHelper.stop(e);
+                this.editorService.openEditor({
+                    resource: undefined,
+                    options: {
+                        pinned: true,
+                        index: this.group.count,
+                        override: DEFAULT_EDITOR_ASSOCIATION.id
+                    }
+                }, this.group.id);
+            }));
+        }
+        this._register(addDisposableListener(tabsContainer, EventType.MOUSE_DOWN, e => {
+            if (e.button === 1) {
+                e.preventDefault();
+            }
+        }));
+        this._register(( new DragAndDropObserver(tabsContainer, {
+            onDragEnter: e => {
+                tabsContainer.classList.add('scroll');
+                if (e.target !== tabsContainer) {
+                    this.updateDropFeedback(tabsContainer, false);
+                    return;
+                }
+                if (!this.isSupportedDropTransfer(e)) {
+                    if (e.dataTransfer) {
+                        e.dataTransfer.dropEffect = 'none';
+                    }
+                    return;
+                }
+                let isLocalDragAndDrop = false;
+                if (this.editorTransfer.hasData(DraggedEditorIdentifier.prototype)) {
+                    isLocalDragAndDrop = true;
+                    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 (e.dataTransfer) {
+                                e.dataTransfer.dropEffect = 'none';
+                            }
+                            return;
+                        }
+                    }
+                }
+                if (!isLocalDragAndDrop) {
+                    if (e.dataTransfer) {
+                        e.dataTransfer.dropEffect = 'copy';
+                    }
+                }
+                this.updateDropFeedback(tabsContainer, true);
+            },
+            onDragLeave: e => {
+                this.updateDropFeedback(tabsContainer, false);
+                tabsContainer.classList.remove('scroll');
+            },
+            onDragEnd: e => {
+                this.updateDropFeedback(tabsContainer, false);
+                tabsContainer.classList.remove('scroll');
+            },
+            onDrop: e => {
+                this.updateDropFeedback(tabsContainer, false);
+                tabsContainer.classList.remove('scroll');
+                if (e.target === tabsContainer) {
+                    this.onDrop(e, this.group.count, tabsContainer);
+                }
+            }
+        })));
+        this._register(addDisposableListener(tabsContainer, EventType.MOUSE_WHEEL, (e) => {
+            const activeEditor = this.group.activeEditor;
+            if (!activeEditor || this.group.count < 2) {
+                return;
+            }
+            if (this.accessor.partOptions.scrollToSwitchTabs === true) {
+                if (e.shiftKey) {
+                    return;
+                }
+            }
+            else {
+                if (!e.shiftKey) {
+                    return;
+                }
+            }
+            const now = Date.now();
+            if (now - this.lastMouseWheelEventTime < TabsTitleControl.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.MOUSE_WHEEL_DISTANCE_THRESHOLD) {
+                tabSwitchDirection = -1;
+            }
+            else if (e.deltaX + e.deltaY > TabsTitleControl.MOUSE_WHEEL_DISTANCE_THRESHOLD) {
+                tabSwitchDirection = 1;
+            }
+            else {
+                return;
+            }
+            const nextEditor = this.group.getEditorByIndex(this.group.getIndexOfEditor(activeEditor) + tabSwitchDirection);
+            if (!nextEditor) {
+                return;
+            }
+            this.group.openEditor(nextEditor);
+            EventHelper.stop(e, true);
+        }));
+        const showContextMenu = (e) => {
+            EventHelper.stop(e);
+            let anchor = tabsContainer;
+            if (e instanceof MouseEvent) {
+                const event = ( new StandardMouseEvent(e));
+                anchor = { x: event.posx, y: event.posy };
+            }
+            this.contextMenuService.showContextMenu({
+                getAnchor: () => anchor,
+                menuId: MenuId.EditorTabsBarContext,
+                contextKeyService: this.contextKeyService,
+                menuActionOptions: { shouldForwardArgs: true },
+                getActionsContext: () => ({ groupId: this.group.id }),
+                getKeyBinding: action => this.getKeybinding(action),
+                onHide: () => this.group.focus()
+            });
+        };
+        this._register(addDisposableListener(tabsContainer, EventType$1.Contextmenu, e => showContextMenu(e)));
+        this._register(addDisposableListener(tabsContainer, EventType.CONTEXT_MENU, e => showContextMenu(e)));
+    }
+    doHandleDecorationsChange() {
+        this.layout(this.dimensions);
+    }
+    updateEditorActionsToolbar() {
+        super.updateEditorActionsToolbar();
+        this.layout(this.dimensions);
+    }
+    openEditor(editor) {
+        this.handleOpenedEditors();
+    }
+    openEditors(editors) {
+        this.handleOpenedEditors();
+    }
+    handleOpenedEditors() {
+        const [tabsContainer, tabsScrollbar] = assertAllDefined(this.tabsContainer, this.tabsScrollbar);
+        for (let i = tabsContainer.children.length; i < this.group.count; i++) {
+            tabsContainer.appendChild(this.createTab(i, tabsContainer, tabsScrollbar));
+        }
+        const activeEditorChanged = this.didActiveEditorChange();
+        const oldActiveTabLabel = this.activeTabLabel;
+        const oldTabLabelsLength = this.tabLabels.length;
+        this.computeTabLabels();
+        if (activeEditorChanged ||
+            oldTabLabelsLength !== this.tabLabels.length ||
+            !this.equalsEditorInputLabel(oldActiveTabLabel, this.activeTabLabel)
+        ) {
+            this.redraw({ forceRevealActiveTab: true });
+            this.breadcrumbsControl?.update();
+        }
+        else {
+            this.layout(this.dimensions, { forceRevealActiveTab: true });
+            this.breadcrumbsControl?.revealLast();
+        }
+    }
+    didActiveEditorChange() {
+        if (!this.activeTabLabel?.editor && this.group.activeEditor ||
+            this.activeTabLabel?.editor && !this.group.activeEditor ||
+            (!this.activeTabLabel?.editor || !this.group.isActive(this.activeTabLabel.editor))
+        ) {
+            return true;
+        }
+        return false;
+    }
+    equalsEditorInputLabel(labelA, labelB) {
+        if (labelA === labelB) {
+            return true;
+        }
+        if (!labelA || !labelB) {
+            return false;
+        }
+        return labelA.name === labelB.name &&
+            labelA.description === labelB.description &&
+            labelA.forceDescription === labelB.forceDescription &&
+            labelA.title === labelB.title &&
+            labelA.ariaLabel === labelB.ariaLabel;
+    }
+    closeEditor(editor, index) {
+        this.handleClosedEditors(index);
+    }
+    closeEditors(editors) {
+        this.handleClosedEditors();
+    }
+    handleClosedEditors(index) {
+        if (this.group.activeEditor) {
+            const tabsContainer = assertIsDefined(this.tabsContainer);
+            while (tabsContainer.children.length > this.group.count) {
+                tabsContainer.lastChild?.remove();
+                dispose(this.tabDisposables.pop());
+            }
+            this.computeTabLabels();
+            this.redraw({ forceRevealActiveTab: true });
+        }
+        else {
+            if (this.tabsContainer) {
+                clearNode(this.tabsContainer);
+            }
+            this.tabDisposables = dispose(this.tabDisposables);
+            this.tabResourceLabels.clear();
+            this.tabLabels = [];
+            this.activeTabLabel = undefined;
+            this.tabActionBars = [];
+            this.clearEditorActionsToolbar();
+            this.breadcrumbsControl?.update();
+        }
+    }
+    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)
+        );
+        this.layout(this.dimensions, { forceRevealActiveTab: true });
+    }
+    pinEditor(editor) {
+        this.withTab(editor, (editor, index, tabContainer, tabLabelWidget, tabLabel) => this.redrawTabLabel(editor, index, tabContainer, tabLabelWidget, tabLabel));
+    }
+    stickEditor(editor) {
+        this.doHandleStickyEditorChange(editor);
+    }
+    unstickEditor(editor) {
+        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.layout(this.dimensions, { forceRevealActiveTab: true });
+    }
+    setActive(isGroupActive) {
+        this.forEachTab((editor, index, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => {
+            this.redrawTabActiveAndDirty(isGroupActive, editor, tabContainer, tabActionBar);
+        });
+        this.updateEditorActionsToolbar();
+        this.layout(this.dimensions, { forceRevealActiveTab: true });
+    }
+    updateEditorLabel(editor) {
+        this.updateEditorLabelScheduler.schedule();
+    }
+    doUpdateEditorLabels() {
+        this.computeTabLabels();
+        this.forEachTab((editor, index, tabContainer, tabLabelWidget, tabLabel) => {
+            this.redrawTabLabel(editor, index, 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));
+    }
+    updateOptions(oldOptions, newOptions) {
+        if (oldOptions.labelFormat !== newOptions.labelFormat) {
+            this.computeTabLabels();
+        }
+        if (oldOptions.titleScrollbarSizing !== newOptions.titleScrollbarSizing) {
+            this.updateTabsScrollbarSizing();
+        }
+        if (oldOptions.labelFormat !== newOptions.labelFormat ||
+            oldOptions.tabCloseButton !== newOptions.tabCloseButton ||
+            oldOptions.tabSizing !== newOptions.tabSizing ||
+            oldOptions.pinnedTabSizing !== newOptions.pinnedTabSizing ||
+            oldOptions.showIcons !== newOptions.showIcons ||
+            oldOptions.hasIcons !== newOptions.hasIcons ||
+            oldOptions.highlightModifiedTabs !== newOptions.highlightModifiedTabs ||
+            oldOptions.wrapTabs !== newOptions.wrapTabs ||
+            !equals(oldOptions.decorations, newOptions.decorations)) {
+            this.redraw();
+        }
+    }
+    updateStyles() {
+        this.redraw();
+    }
+    forEachTab(fn, fromIndex, toIndex) {
+        this.group.editors.forEach((editor, index) => {
+            if (typeof fromIndex === 'number' && fromIndex > index) {
+                return;
+            }
+            if (typeof toIndex === 'number' && toIndex < index) {
+                return;
+            }
+            this.doWithTab(index, editor, fn);
+        });
+    }
+    withTab(editor, fn) {
+        this.doWithTab(this.group.getIndexOfEditor(editor), editor, fn);
+    }
+    doWithTab(index, 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];
+        if (tabContainer && tabResourceLabel && tabLabel) {
+            fn(editor, index, tabContainer, tabResourceLabel, tabLabel, tabActionBar);
+        }
+    }
+    createTab(index, tabsContainer, tabsScrollbar) {
+        const tabContainer = document.createElement('div');
+        tabContainer.draggable = true;
+        tabContainer.setAttribute('role', 'tab');
+        tabContainer.classList.add('tab');
+        this._register(Gesture.addTarget(tabContainer));
+        const tabBorderTopContainer = document.createElement('div');
+        tabBorderTopContainer.classList.add('tab-border-top-container');
+        tabContainer.appendChild(tabBorderTopContainer);
+        const editorLabel = this.tabResourceLabels.create(tabContainer);
+        const tabActionsContainer = document.createElement('div');
+        tabActionsContainer.classList.add('tab-actions');
+        tabContainer.appendChild(tabActionsContainer);
+        const tabActionRunner = ( new EditorCommandsContextActionRunner({ groupId: this.group.id, editorIndex: index }));
+        const tabActionBar = ( new ActionBar(tabActionsContainer, { ariaLabel: ( localize('ariaLabelTabActions', "Tab actions")), actionRunner: tabActionRunner }));
+        tabActionBar.onWillRun(e => {
+            if (e.action.id === this.closeEditorAction.id) {
+                this.blockRevealActiveTabOnce();
+            }
+        });
+        const tabActionBarDisposable = combinedDisposable(tabActionBar, 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);
+        this.tabDisposables.push(combinedDisposable(eventsDisposable, tabActionBarDisposable, tabActionRunner, editorLabel));
+        return tabContainer;
+    }
+    registerTabListeners(tab, index, tabsContainer, tabsScrollbar) {
+        const disposables = ( new DisposableStore());
+        const handleClickOrTouch = (e, preserveFocus) => {
+            tab.blur();
+            if (e instanceof MouseEvent && (e.button !== 0  || ((isMacintosh && e.ctrlKey) ))) {
+                if (e.button === 1) {
+                    e.preventDefault();
+                }
+                return undefined;
+            }
+            if (this.originatesFromTabActionBar(e)) {
+                return;
+            }
+            const input = this.group.getEditorByIndex(index);
+            if (input) {
+                this.group.openEditor(input, { preserveFocus, activation: EditorActivation.ACTIVATE });
+            }
+            return undefined;
+        };
+        const showContextMenu = (e) => {
+            EventHelper.stop(e);
+            const input = this.group.getEditorByIndex(index);
+            if (input) {
+                this.onContextMenu(input, e, tab);
+            }
+        };
+        disposables.add(addDisposableListener(tab, EventType.MOUSE_DOWN, e => handleClickOrTouch(e, false)));
+        disposables.add(addDisposableListener(tab, EventType$1.Tap, (e) => handleClickOrTouch(e, true)));
+        disposables.add(addDisposableListener(tab, EventType$1.Change, (e) => {
+            tabsScrollbar.setScrollPosition({ scrollLeft: tabsScrollbar.getScrollPosition().scrollLeft - e.translationX });
+        }));
+        disposables.add(addDisposableListener(tab, EventType.MOUSE_UP, e => {
+            EventHelper.stop(e);
+            tab.blur();
+        }));
+        disposables.add(addDisposableListener(tab, EventType.AUXCLICK, e => {
+            if (e.button === 1 ) {
+                EventHelper.stop(e, true );
+                this.blockRevealActiveTabOnce();
+                this.closeEditorAction.run({ groupId: this.group.id, editorIndex: index });
+            }
+        }));
+        disposables.add(addDisposableListener(tab, EventType.KEY_DOWN, e => {
+            const event = ( new StandardKeyboardEvent(e));
+            if (event.shiftKey && event.keyCode === 68 ) {
+                showContextMenu(e);
+            }
+        }));
+        disposables.add(addDisposableListener(tab, EventType$1.Contextmenu, (e) => {
+            showContextMenu(e);
+        }));
+        disposables.add(addDisposableListener(tab, EventType.KEY_UP, e => {
+            const event = ( new StandardKeyboardEvent(e));
+            let handled = false;
+            if (event.equals(3 ) || event.equals(10 )) {
+                handled = true;
+                const input = this.group.getEditorByIndex(index);
+                if (input) {
+                    this.group.openEditor(input);
+                }
+            }
+            else if (( [15 , 17 , 16 , 18 , 14 , 13 ].some(kb => event.equals(kb)))) {
+                let targetIndex;
+                if (event.equals(15 ) || event.equals(16 )) {
+                    targetIndex = index - 1;
+                }
+                else if (event.equals(17 ) || event.equals(18 )) {
+                    targetIndex = index + 1;
+                }
+                else if (event.equals(14 )) {
+                    targetIndex = 0;
+                }
+                else {
+                    targetIndex = this.group.count - 1;
+                }
+                const target = this.group.getEditorByIndex(targetIndex);
+                if (target) {
+                    handled = true;
+                    this.group.openEditor(target, { preserveFocus: true });
+                    tabsContainer.childNodes[targetIndex].focus();
+                }
+            }
+            if (handled) {
+                EventHelper.stop(e, true);
+            }
+            tabsScrollbar.setScrollPosition({
+                scrollLeft: tabsContainer.scrollLeft
+            });
+        }));
+        for (const eventType of [EventType$1.Tap, EventType.DBLCLICK]) {
+            disposables.add(addDisposableListener(tab, eventType, (e) => {
+                if (eventType === EventType.DBLCLICK) {
+                    EventHelper.stop(e);
+                }
+                else if (e.tapCount !== 2) {
+                    return;
+                }
+                const editor = this.group.getEditorByIndex(index);
+                if (editor && this.group.isPinned(editor)) {
+                    this.accessor.arrangeGroups(2 , this.group);
+                }
+                else {
+                    this.group.pinEditor(editor);
+                }
+            }));
+        }
+        disposables.add(addDisposableListener(tab, EventType.CONTEXT_MENU, e => {
+            EventHelper.stop(e, true);
+            const input = this.group.getEditorByIndex(index);
+            if (input) {
+                this.onContextMenu(input, e, tab);
+            }
+        }, true ));
+        disposables.add(addDisposableListener(tab, EventType.DRAG_START, e => {
+            const editor = this.group.getEditorByIndex(index);
+            if (!editor) {
+                return;
+            }
+            this.editorTransfer.setData([( new DraggedEditorIdentifier({ editor, groupId: this.group.id }))], DraggedEditorIdentifier.prototype);
+            if (e.dataTransfer) {
+                e.dataTransfer.effectAllowed = 'copyMove';
+            }
+            this.doFillResourceDataTransfers([editor], e);
+            tab.classList.add('dragged');
+            scheduleAtNextAnimationFrame(() => tab.classList.remove('dragged'));
+        }));
+        disposables.add(( new DragAndDropObserver(tab, {
+            onDragEnter: e => {
+                tab.classList.add('dragged-over');
+                if (!this.isSupportedDropTransfer(e)) {
+                    if (e.dataTransfer) {
+                        e.dataTransfer.dropEffect = 'none';
+                    }
+                    return;
+                }
+                let isLocalDragAndDrop = false;
+                if (this.editorTransfer.hasData(DraggedEditorIdentifier.prototype)) {
+                    isLocalDragAndDrop = true;
+                    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 (e.dataTransfer) {
+                                e.dataTransfer.dropEffect = 'none';
+                            }
+                            return;
+                        }
+                    }
+                }
+                if (!isLocalDragAndDrop) {
+                    if (e.dataTransfer) {
+                        e.dataTransfer.dropEffect = 'copy';
+                    }
+                }
+                this.updateDropFeedback(tab, true, index);
+            },
+            onDragOver: (_, dragDuration) => {
+                if (dragDuration >= TabsTitleControl.DRAG_OVER_OPEN_TAB_THRESHOLD) {
+                    const draggedOverTab = this.group.getEditorByIndex(index);
+                    if (draggedOverTab && this.group.activeEditor !== draggedOverTab) {
+                        this.group.openEditor(draggedOverTab, { preserveFocus: true });
+                    }
+                }
+            },
+            onDragLeave: () => {
+                tab.classList.remove('dragged-over');
+                this.updateDropFeedback(tab, false, index);
+            },
+            onDragEnd: () => {
+                tab.classList.remove('dragged-over');
+                this.updateDropFeedback(tab, false, index);
+                this.editorTransfer.clearData(DraggedEditorIdentifier.prototype);
+            },
+            onDrop: e => {
+                tab.classList.remove('dragged-over');
+                this.updateDropFeedback(tab, false, index);
+                this.onDrop(e, index, tabsContainer);
+            }
+        })));
+        return disposables;
+    }
+    isSupportedDropTransfer(e) {
+        if (this.groupTransfer.hasData(DraggedEditorGroupIdentifier.prototype)) {
+            const data = this.groupTransfer.getData(DraggedEditorGroupIdentifier.prototype);
+            if (Array.isArray(data)) {
+                const group = data[0];
+                if (group.identifier === this.group.id) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        if (this.editorTransfer.hasData(DraggedEditorIdentifier.prototype)) {
+            return true;
+        }
+        if (e.dataTransfer && e.dataTransfer.types.length > 0) {
+            return true;
+        }
+        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);
+        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);
+        if (activeContrastBorderColor && isDND) {
+            element.style.outlineWidth = '2px';
+            element.style.outlineStyle = 'dashed';
+            element.style.outlineColor = activeContrastBorderColor;
+            element.style.outlineOffset = isTab ? '-5px' : '-3px';
+        }
+        else {
+            element.style.outlineWidth = '';
+            element.style.outlineStyle = '';
+            element.style.outlineColor = activeContrastBorderColor || '';
+            element.style.outlineOffset = '';
+        }
+    }
+    computeTabLabels() {
+        const { labelFormat } = this.accessor.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];
+            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)
+            });
+            if (editor === this.group.activeEditor) {
+                activeEditorIndex = i;
+            }
+        }
+        if (shortenDuplicates) {
+            this.shortenTabLabels(labels);
+        }
+        this.tabLabels = labels;
+        this.activeTabLabel = labels[activeEditorIndex];
+    }
+    shortenTabLabels(labels) {
+        const mapNameToDuplicates = ( new Map());
+        for (const label of labels) {
+            if (typeof label.description === 'string') {
+                getOrSet(mapNameToDuplicates, label.name, []).push(label);
+            }
+            else {
+                label.description = '';
+            }
+        }
+        for (const [, duplicateLabels] of mapNameToDuplicates) {
+            if (duplicateLabels.length === 1 && !duplicateLabels[0].forceDescription) {
+                duplicateLabels[0].description = '';
+                continue;
+            }
+            const mapDescriptionToDuplicates = ( new Map());
+            for (const duplicateLabel of duplicateLabels) {
+                getOrSet(mapDescriptionToDuplicates, duplicateLabel.description, []).push(duplicateLabel);
+            }
+            let useLongDescriptions = false;
+            for (const [, duplicateLabels] of mapDescriptionToDuplicates) {
+                if (!useLongDescriptions && duplicateLabels.length > 1) {
+                    const [first, ...rest] = ( duplicateLabels.map(({ editor }) => editor.getDescription(2 )));
+                    useLongDescriptions = ( rest.some(description => description !== first));
+                }
+            }
+            if (useLongDescriptions) {
+                mapDescriptionToDuplicates.clear();
+                for (const duplicateLabel of duplicateLabels) {
+                    duplicateLabel.description = duplicateLabel.editor.getDescription(2 );
+                    getOrSet(mapDescriptionToDuplicates, duplicateLabel.description, []).push(duplicateLabel);
+                }
+            }
+            const descriptions = [];
+            for (const [description] of mapDescriptionToDuplicates) {
+                descriptions.push(description);
+            }
+            if (descriptions.length === 1) {
+                for (const label of mapDescriptionToDuplicates.get(descriptions[0]) || []) {
+                    if (!label.forceDescription) {
+                        label.description = '';
+                    }
+                }
+                continue;
+            }
+            const shortenedDescriptions = shorten(descriptions, this.path.sep);
+            descriptions.forEach((description, index) => {
+                for (const label of mapDescriptionToDuplicates.get(description) || []) {
+                    label.description = shortenedDescriptions[index];
+                }
+            });
+        }
+    }
+    getLabelConfigFlags(value) {
+        switch (value) {
+            case 'short':
+                return { verbosity: 0 , shortenDuplicates: false };
+            case 'medium':
+                return { verbosity: 1 , shortenDuplicates: false };
+            case 'long':
+                return { verbosity: 2 , shortenDuplicates: false };
+            default:
+                return { verbosity: 1 , shortenDuplicates: true };
+        }
+    }
+    redraw(options) {
+        if (this.tabsAndActionsContainer) {
+            let tabsContainerBorderColor = this.getColor(EDITOR_GROUP_HEADER_TABS_BORDER);
+            if (!tabsContainerBorderColor && isHighContrast(this.theme.type)) {
+                tabsContainerBorderColor = this.getColor(TAB_BORDER) || this.getColor(contrastBorder);
+            }
+            if (tabsContainerBorderColor) {
+                this.tabsAndActionsContainer.classList.add('tabs-border-bottom');
+                this.tabsAndActionsContainer.style.setProperty('--tabs-border-bottom-color', ( tabsContainerBorderColor.toString()));
+            }
+            else {
+                this.tabsAndActionsContainer.classList.remove('tabs-border-bottom');
+                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.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);
+        const tabAction = isTabSticky ? this.unpinEditorAction : this.closeEditorAction;
+        if (!tabActionBar.hasAction(tabAction)) {
+            if (!tabActionBar.isEmpty()) {
+                tabActionBar.clear();
+            }
+            tabActionBar.push(tabAction, { icon: true, label: false, keybinding: this.getKeybindingLabel(tabAction) });
+        }
+        const tabActionsVisibility = isTabSticky && options.pinnedTabSizing === 'compact' ? 'off'  : options.tabCloseButton;
+        for (const option of ['off', 'left', 'right']) {
+            tabContainer.classList.toggle(`tab-actions-${option}`, tabActionsVisibility === option);
+        }
+        const tabSizing = isTabSticky && options.pinnedTabSizing === 'shrink' ? 'shrink'  : options.tabSizing;
+        for (const option of ['fit', 'shrink']) {
+            tabContainer.classList.toggle(`sizing-${option}`, tabSizing === option);
+        }
+        tabContainer.classList.toggle('has-icon', options.showIcons && options.hasIcons);
+        tabContainer.classList.toggle('sticky', isTabSticky);
+        for (const option of ['normal', 'compact', 'shrink']) {
+            tabContainer.classList.toggle(`sticky-${option}`, isTabSticky && options.pinnedTabSizing === option);
+        }
+        if (!options.wrapTabs && isTabSticky && options.pinnedTabSizing !== 'normal') {
+            let stickyTabWidth = 0;
+            switch (options.pinnedTabSizing) {
+                case 'compact':
+                    stickyTabWidth = TabsTitleControl.TAB_WIDTH.compact;
+                    break;
+                case 'shrink':
+                    stickyTabWidth = TabsTitleControl.TAB_WIDTH.shrink;
+                    break;
+            }
+            tabContainer.style.left = `${index * stickyTabWidth}px`;
+        }
+        else {
+            tabContainer.style.left = 'auto';
+        }
+        this.redrawTabBorders(index, tabContainer);
+        this.redrawTabActiveAndDirty(this.accessor.activeGroup === this.group, editor, tabContainer, tabActionBar);
+    }
+    redrawTabLabel(editor, index, tabContainer, tabLabelWidget, tabLabel) {
+        const options = this.accessor.partOptions;
+        let name;
+        let forceLabel = false;
+        let fileDecorationBadges = Boolean(options.decorations?.badges);
+        let description;
+        if (options.pinnedTabSizing === 'compact' && this.group.isSticky(index)) {
+            const isShowingIcons = options.showIcons && options.hasIcons;
+            name = isShowingIcons ? '' : tabLabel.name?.charAt(0).toUpperCase();
+            description = '';
+            forceLabel = true;
+            fileDecorationBadges = false;
+        }
+        else {
+            name = tabLabel.name;
+            description = tabLabel.description || '';
+        }
+        if (tabLabel.ariaLabel) {
+            tabContainer.setAttribute('aria-label', tabLabel.ariaLabel);
+            tabContainer.setAttribute('aria-description', '');
+        }
+        const title = tabLabel.title || '';
+        tabContainer.title = title;
+        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),
+            forceLabel,
+            fileDecorations: {
+                colors: Boolean(options.decorations?.colors),
+                badges: fileDecorationBadges
+            }
+        });
+        const resource = EditorResourceAccessor.getOriginalUri(editor, { supportSideBySide: SideBySideEditor.PRIMARY });
+        if (resource) {
+            tabContainer.setAttribute('data-resource-name', basenameOrAuthority(resource));
+        }
+        else {
+            tabContainer.removeAttribute('data-resource-name');
+        }
+    }
+    redrawTabActiveAndDirty(isGroupActive, editor, tabContainer, tabActionBar) {
+        const isTabActive = this.group.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)) {
+            tabContainer.classList.add('active');
+            tabContainer.setAttribute('aria-selected', 'true');
+            tabContainer.tabIndex = 0;
+            tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_ACTIVE_BACKGROUND : TAB_UNFOCUSED_ACTIVE_BACKGROUND) || '';
+            const activeTabBorderColorBottom = this.getColor(isGroupActive ? TAB_ACTIVE_BORDER : TAB_UNFOCUSED_ACTIVE_BORDER);
+            if (activeTabBorderColorBottom) {
+                tabContainer.classList.add('tab-border-bottom');
+                tabContainer.style.setProperty('--tab-border-bottom-color', ( activeTabBorderColorBottom.toString()));
+            }
+            else {
+                tabContainer.classList.remove('tab-border-bottom');
+                tabContainer.style.removeProperty('--tab-border-bottom-color');
+            }
+            const activeTabBorderColorTop = allowBorderTop ? this.getColor(isGroupActive ? TAB_ACTIVE_BORDER_TOP : TAB_UNFOCUSED_ACTIVE_BORDER_TOP) : undefined;
+            if (activeTabBorderColorTop) {
+                tabContainer.classList.add('tab-border-top');
+                tabContainer.style.setProperty('--tab-border-top-color', ( activeTabBorderColorTop.toString()));
+            }
+            else {
+                tabContainer.classList.remove('tab-border-top');
+                tabContainer.style.removeProperty('--tab-border-top-color');
+            }
+            tabContainer.style.color = this.getColor(isGroupActive ? TAB_ACTIVE_FOREGROUND : TAB_UNFOCUSED_ACTIVE_FOREGROUND) || '';
+            tabActionBar.setFocusable(true);
+        }
+        else {
+            tabContainer.classList.remove('active');
+            tabContainer.setAttribute('aria-selected', 'false');
+            tabContainer.tabIndex = -1;
+            tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_INACTIVE_BACKGROUND : TAB_UNFOCUSED_INACTIVE_BACKGROUND) || '';
+            tabContainer.style.boxShadow = '';
+            tabContainer.style.color = this.getColor(isGroupActive ? TAB_INACTIVE_FOREGROUND : TAB_UNFOCUSED_INACTIVE_FOREGROUND) || '';
+            tabActionBar.setFocusable(false);
+        }
+    }
+    doRedrawTabDirty(isGroupActive, isTabActive, editor, tabContainer) {
+        let hasModifiedBorderColor = false;
+        if (editor.isDirty() && !editor.isSaving()) {
+            tabContainer.classList.add('dirty');
+            if (this.accessor.partOptions.highlightModifiedTabs) {
+                let modifiedBorderColor;
+                if (isGroupActive && isTabActive) {
+                    modifiedBorderColor = this.getColor(TAB_ACTIVE_MODIFIED_BORDER);
+                }
+                else if (isGroupActive && !isTabActive) {
+                    modifiedBorderColor = this.getColor(TAB_INACTIVE_MODIFIED_BORDER);
+                }
+                else if (!isGroupActive && isTabActive) {
+                    modifiedBorderColor = this.getColor(TAB_UNFOCUSED_ACTIVE_MODIFIED_BORDER);
+                }
+                else {
+                    modifiedBorderColor = this.getColor(TAB_UNFOCUSED_INACTIVE_MODIFIED_BORDER);
+                }
+                if (modifiedBorderColor) {
+                    hasModifiedBorderColor = true;
+                    tabContainer.classList.add('dirty-border-top');
+                    tabContainer.style.setProperty('--tab-dirty-border-top-color', modifiedBorderColor);
+                }
+            }
+            else {
+                tabContainer.classList.remove('dirty-border-top');
+                tabContainer.style.removeProperty('--tab-dirty-border-top-color');
+            }
+        }
+        else {
+            tabContainer.classList.remove('dirty', 'dirty-border-top');
+            tabContainer.style.removeProperty('--tab-dirty-border-top-color');
+        }
+        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));
+        tabContainer.style.borderRight = borderRightColor ? `1px solid ${borderRightColor}` : '';
+        tabContainer.style.outlineColor = this.getColor(activeContrastBorder) || '';
+    }
+    prepareEditorActions(editorActions) {
+        const isGroupActive = this.accessor.activeGroup === this.group;
+        if (isGroupActive) {
+            return editorActions;
+        }
+        else {
+            return {
+                primary: editorActions.primary.filter(action => action.id === UNLOCK_GROUP_COMMAND_ID),
+                secondary: editorActions.secondary
+            };
+        }
+    }
+    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
+            };
+        }
+        else {
+            return this.computeHeight();
+        }
+    }
+    computeHeight() {
+        let total;
+        if (this.accessor.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains('wrapping')) {
+            total = this.tabsAndActionsContainer.offsetHeight;
+        }
+        else {
+            total = TabsTitleControl.TAB_HEIGHT;
+        }
+        const offset = total;
+        if (this.breadcrumbsControl && !this.breadcrumbsControl.isHidden()) {
+            total += BreadcrumbsControl.HEIGHT;
+        }
+        return { total, offset };
+    }
+    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.dimensions.used) {
+            this.dimensions.used = ( new Dimension(dimensions.container.width, this.computeHeight().total));
+        }
+        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);
+        }
+        const oldDimension = this.dimensions.used;
+        const newDimension = this.dimensions.used = ( new Dimension(dimensions.container.width, this.computeHeight().total));
+        if (oldDimension && oldDimension.height !== newDimension.height) {
+            this.group.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) {
+        const tabsWrapMultiLine = this.doLayoutTabsWrapping(dimensions);
+        if (!tabsWrapMultiLine) {
+            this.doLayoutTabsNonWrapping(activeTab, activeIndex, options);
+        }
+    }
+    doLayoutTabsWrapping(dimensions) {
+        const [tabsAndActionsContainer, tabsContainer, editorToolbarContainer, tabsScrollbar] = assertAllDefined(this.tabsAndActionsContainer, this.tabsContainer, this.editorToolbarContainer, this.tabsScrollbar);
+        const didTabsWrapMultiLine = tabsAndActionsContainer.classList.contains('wrapping');
+        let tabsWrapMultiLine = didTabsWrapMultiLine;
+        function updateTabsWrapping(enabled) {
+            tabsWrapMultiLine = enabled;
+            tabsAndActionsContainer.classList.toggle('wrapping', tabsWrapMultiLine);
+            tabsContainer.style.setProperty('--last-tab-margin-right', tabsWrapMultiLine ? `${editorToolbarContainer.offsetWidth}px` : '0');
+        }
+        if (this.accessor.partOptions.wrapTabs) {
+            const visibleTabsWidth = tabsContainer.offsetWidth;
+            const allTabsWidth = tabsContainer.scrollWidth;
+            const lastTabFitsWrapped = () => {
+                const lastTab = this.getLastTab();
+                if (!lastTab) {
+                    return true;
+                }
+                const lastTabOverlapWithToolbarWidth = lastTab.offsetWidth + editorToolbarContainer.offsetWidth - dimensions.available.width;
+                if (lastTabOverlapWithToolbarWidth > 1) {
+                    return false;
+                }
+                return true;
+            };
+            if (tabsWrapMultiLine || (allTabsWidth > visibleTabsWidth && lastTabFitsWrapped())) {
+                updateTabsWrapping(true);
+            }
+            if (tabsWrapMultiLine) {
+                if ((tabsContainer.offsetHeight > dimensions.available.height) ||
+                    (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === TabsTitleControl.TAB_HEIGHT) ||
+                    (!lastTabFitsWrapped())
+                ) {
+                    updateTabsWrapping(false);
+                }
+            }
+        }
+        else if (didTabsWrapMultiLine) {
+            updateTabsWrapping(false);
+        }
+        if (tabsWrapMultiLine && !didTabsWrapMultiLine) {
+            const visibleTabsWidth = tabsContainer.offsetWidth;
+            tabsScrollbar.setScrollDimensions({
+                width: visibleTabsWidth,
+                scrollWidth: visibleTabsWidth
+            });
+        }
+        if (tabsWrapMultiLine) {
+            const tabs = ( new Map());
+            let currentTabsPosY = undefined;
+            let lastTab = undefined;
+            for (const child of tabsContainer.children) {
+                const tab = child;
+                const tabPosY = tab.offsetTop;
+                if (tabPosY !== currentTabsPosY) {
+                    currentTabsPosY = tabPosY;
+                    if (lastTab) {
+                        tabs.set(lastTab, true);
+                    }
+                }
+                lastTab = tab;
+                tabs.set(tab, false);
+            }
+            if (lastTab) {
+                tabs.set(lastTab, true);
+            }
+            for (const [tab, lastInRow] of tabs) {
+                tab.classList.toggle('last-in-row', lastInRow);
+            }
+        }
+        return tabsWrapMultiLine;
+    }
+    doLayoutTabsNonWrapping(activeTab, activeIndex, 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) {
+            let stickyTabWidth = 0;
+            switch (this.accessor.partOptions.pinnedTabSizing) {
+                case 'compact':
+                    stickyTabWidth = TabsTitleControl.TAB_WIDTH.compact;
+                    break;
+                case 'shrink':
+                    stickyTabWidth = TabsTitleControl.TAB_WIDTH.shrink;
+                    break;
+            }
+            stickyTabsWidth = this.group.stickyCount * stickyTabWidth;
+        }
+        let activeTabPositionStatic = this.accessor.partOptions.pinnedTabSizing !== 'normal' && this.group.isSticky(activeIndex);
+        let availableTabsContainerWidth = visibleTabsWidth - stickyTabsWidth;
+        if (this.group.stickyCount > 0 && availableTabsContainerWidth < TabsTitleControl.TAB_WIDTH.fit) {
+            tabsContainer.classList.add('disable-sticky-tabs');
+            availableTabsContainerWidth = visibleTabsWidth;
+            stickyTabsWidth = 0;
+            activeTabPositionStatic = false;
+        }
+        else {
+            tabsContainer.classList.remove('disable-sticky-tabs');
+        }
+        let activeTabPosX;
+        let activeTabWidth;
+        if (!this.blockRevealActiveTab) {
+            activeTabPosX = activeTab.offsetLeft;
+            activeTabWidth = activeTab.offsetWidth;
+        }
+        const { width: oldVisibleTabsWidth, scrollWidth: oldAllTabsWidth } = tabsScrollbar.getScrollDimensions();
+        tabsScrollbar.setScrollDimensions({
+            width: visibleTabsWidth,
+            scrollWidth: allTabsWidth
+        });
+        const dimensionsChanged = oldVisibleTabsWidth !== visibleTabsWidth || oldAllTabsWidth !== allTabsWidth;
+        if (this.blockRevealActiveTab ||
+            typeof activeTabPosX !== 'number' ||
+            typeof activeTabWidth !== 'number' ||
+            activeTabPositionStatic ||
+            (!dimensionsChanged && !options?.forceRevealActiveTab)
+        ) {
+            this.blockRevealActiveTab = false;
+            return;
+        }
+        const tabsContainerScrollPosX = tabsScrollbar.getScrollPosition().scrollLeft;
+        const activeTabFits = activeTabWidth <= availableTabsContainerWidth;
+        const adjustedActiveTabPosX = activeTabPosX - stickyTabsWidth;
+        if (activeTabFits && tabsContainerScrollPosX + availableTabsContainerWidth < adjustedActiveTabPosX + activeTabWidth) {
+            tabsScrollbar.setScrollPosition({
+                scrollLeft: tabsContainerScrollPosX + (((adjustedActiveTabPosX + activeTabWidth)  - (tabsContainerScrollPosX + availableTabsContainerWidth)) )
+            });
+        }
+        else if (tabsContainerScrollPosX > adjustedActiveTabPosX || !activeTabFits) {
+            tabsScrollbar.setScrollPosition({
+                scrollLeft: adjustedActiveTabPosX
+            });
+        }
+    }
+    getTabAndIndex(editor) {
+        const editorIndex = this.group.getIndexOfEditor(editor);
+        const tab = this.getTabAtIndex(editorIndex);
+        if (tab) {
+            return [tab, editorIndex];
+        }
+        return undefined;
+    }
+    getTabAtIndex(editorIndex) {
+        if (editorIndex >= 0) {
+            const tabsContainer = assertIsDefined(this.tabsContainer);
+            return tabsContainer.children[editorIndex];
+        }
+        return undefined;
+    }
+    getLastTab() {
+        return this.getTabAtIndex(this.group.count - 1);
+    }
+    blockRevealActiveTabOnce() {
+        this.blockRevealActiveTab = true;
+    }
+    originatesFromTabActionBar(e) {
+        let element;
+        if (e instanceof MouseEvent) {
+            element = (e.target || e.srcElement);
+        }
+        else {
+            element = e.initialTarget;
+        }
+        return !!findParentWithClass(element, 'action-item', 'tab');
+    }
+    async onDrop(e, targetIndex, tabsContainer) {
+        EventHelper.stop(e, true);
+        this.updateDropFeedback(tabsContainer, false);
+        tabsContainer.classList.remove('scroll');
+        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);
+                if (sourceGroup) {
+                    const mergeGroupOptions = { index: targetIndex };
+                    if (!this.isMoveOperation(e, sourceGroup.id)) {
+                        mergeGroupOptions.mode = 0 ;
+                    }
+                    this.accessor.mergeGroup(sourceGroup, this.group, mergeGroupOptions);
+                }
+                this.group.focus();
+                this.groupTransfer.clearData(DraggedEditorGroupIdentifier.prototype);
+            }
+        }
+        else if (this.editorTransfer.hasData(DraggedEditorIdentifier.prototype)) {
+            const data = this.editorTransfer.getData(DraggedEditorIdentifier.prototype);
+            if (Array.isArray(data)) {
+                const draggedEditor = data[0].identifier;
+                const sourceGroup = this.accessor.getGroup(draggedEditor.groupId);
+                if (sourceGroup) {
+                    if (this.isMoveOperation(e, draggedEditor.groupId, draggedEditor.editor)) {
+                        sourceGroup.moveEditor(draggedEditor.editor, this.group, { index: targetIndex });
+                    }
+                    else {
+                        sourceGroup.copyEditor(draggedEditor.editor, this.group, { index: targetIndex });
+                    }
+                }
+                this.group.focus();
+                this.editorTransfer.clearData(DraggedEditorIdentifier.prototype);
+            }
+        }
+        else if (this.treeItemsTransfer.hasData(DraggedTreeItemsIdentifier.prototype)) {
+            const data = this.treeItemsTransfer.getData(DraggedTreeItemsIdentifier.prototype);
+            if (Array.isArray(data)) {
+                const editors = [];
+                for (const id of data) {
+                    const dataTransferItem = await this.treeViewsDragAndDropService.removeDragOperationTransfer(id.identifier);
+                    if (dataTransferItem) {
+                        const treeDropData = await extractTreeDropData(dataTransferItem);
+                        editors.push(...( treeDropData.map(
+                            editor => ({ ...editor, options: { ...editor.options, pinned: true, index: targetIndex } })
+                        )));
+                    }
+                }
+                this.editorService.openEditors(editors, this.group, { 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);
+        }
+    }
+    isMoveOperation(e, sourceGroup, sourceEditor) {
+        if (sourceEditor?.hasCapability(8 )) {
+            return true;
+        }
+        const isCopy = (e.ctrlKey && !isMacintosh) || (e.altKey && isMacintosh);
+        return !isCopy || sourceGroup === this.group.id;
+    }
+    dispose() {
+        super.dispose();
+        this.tabDisposables = dispose(this.tabDisposables);
+    }
+};
+TabsTitleControl.SCROLLBAR_SIZES = {
+    default: 3,
+    large: 10
+};
+TabsTitleControl.TAB_WIDTH = {
+    compact: 38,
+    shrink: 80,
+    fit: 120
+};
+TabsTitleControl.TAB_HEIGHT = 35;
+TabsTitleControl.DRAG_OVER_OPEN_TAB_THRESHOLD = 1500;
+TabsTitleControl.MOUSE_WHEEL_EVENT_THRESHOLD = 150;
+TabsTitleControl.MOUSE_WHEEL_DISTANCE_THRESHOLD = 1.5;
+TabsTitleControl = ( __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))
+], TabsTitleControl));
+registerThemingParticipant((theme, collector) => {
+    const borderColor = theme.getColor(TAB_BORDER);
+    if (borderColor) {
+        collector.addRule(`
+			.monaco-workbench .part.editor > .content .editor-group-container > .title > .tabs-and-actions-container.wrapping .tabs-container > .tab {
+				border-bottom: 1px solid ${borderColor};
+			}
+		`);
+    }
+    const activeContrastBorderColor = theme.getColor(activeContrastBorder);
+    if (activeContrastBorderColor) {
+        collector.addRule(`
+			.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active,
+			.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.active:hover  {
+				outline: 1px solid;
+				outline-offset: -5px;
+			}
+
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active {
+				outline: 1px dotted;
+				outline-offset: -5px;
+			}
+
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover  {
+				outline: 1px dashed;
+				outline-offset: -5px;
+			}
+
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-actions .action-label,
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active:hover > .tab-actions .action-label,
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label,
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky > .tab-actions .action-label,
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover > .tab-actions .action-label {
+				opacity: 1 !important;
+			}
+		`);
+    }
+    const contrastBorderColor = theme.getColor(contrastBorder);
+    if (contrastBorderColor) {
+        collector.addRule(`
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions {
+				outline: 1px solid ${contrastBorderColor}
+			}
+		`);
+    }
+    const tabHoverBackground = theme.getColor(TAB_HOVER_BACKGROUND);
+    if (tabHoverBackground) {
+        collector.addRule(`
+			.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover  {
+				background-color: ${tabHoverBackground} !important;
+			}
+		`);
+    }
+    const tabUnfocusedHoverBackground = theme.getColor(TAB_UNFOCUSED_HOVER_BACKGROUND);
+    if (tabUnfocusedHoverBackground) {
+        collector.addRule(`
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover  {
+				background-color: ${tabUnfocusedHoverBackground} !important;
+			}
+		`);
+    }
+    const tabHoverForeground = theme.getColor(TAB_HOVER_FOREGROUND);
+    if (tabHoverForeground) {
+        collector.addRule(`
+			.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover  {
+				color: ${tabHoverForeground} !important;
+			}
+		`);
+    }
+    const tabUnfocusedHoverForeground = theme.getColor(TAB_UNFOCUSED_HOVER_FOREGROUND);
+    if (tabUnfocusedHoverForeground) {
+        collector.addRule(`
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover  {
+				color: ${tabUnfocusedHoverForeground} !important;
+			}
+		`);
+    }
+    const tabHoverBorder = theme.getColor(TAB_HOVER_BORDER);
+    if (tabHoverBorder) {
+        collector.addRule(`
+			.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover > .tab-border-bottom-container {
+				display: block;
+				position: absolute;
+				left: 0;
+				pointer-events: none;
+				width: 100%;
+				z-index: 10;
+				bottom: 0;
+				height: 1px;
+				background-color: ${tabHoverBorder};
+			}
+		`);
+    }
+    const tabUnfocusedHoverBorder = theme.getColor(TAB_UNFOCUSED_HOVER_BORDER);
+    if (tabUnfocusedHoverBorder) {
+        collector.addRule(`
+			.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover > .tab-border-bottom-container  {
+				display: block;
+				position: absolute;
+				left: 0;
+				pointer-events: none;
+				width: 100%;
+				z-index: 10;
+				bottom: 0;
+				height: 1px;
+				background-color: ${tabUnfocusedHoverBorder};
+			}
+		`);
+    }
+    if (isHighContrast(theme.type) && !isSafari && !activeContrastBorderColor) {
+        const workbenchBackground = WORKBENCH_BACKGROUND(theme);
+        const editorBackgroundColor = theme.getColor(editorBackground);
+        const editorGroupHeaderTabsBackground = theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND);
+        const editorDragAndDropBackground = theme.getColor(EDITOR_DRAG_AND_DROP_BACKGROUND);
+        let adjustedTabBackground;
+        if (editorGroupHeaderTabsBackground && editorBackgroundColor) {
+            adjustedTabBackground = editorGroupHeaderTabsBackground.flatten(editorBackgroundColor, editorBackgroundColor, workbenchBackground);
+        }
+        let adjustedTabDragBackground;
+        if (editorGroupHeaderTabsBackground && editorBackgroundColor && editorDragAndDropBackground && editorBackgroundColor) {
+            adjustedTabDragBackground = editorGroupHeaderTabsBackground.flatten(editorBackgroundColor, editorDragAndDropBackground, editorBackgroundColor, workbenchBackground);
+        }
+        const makeTabHoverBackgroundRule = (color, colorDrag, hasFocus = false) => `
+			.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container${hasFocus ? '.active' : ''} > .title .tabs-container > .tab.sizing-shrink:not(.dragged):not(.sticky-compact):hover > .tab-label > .monaco-icon-label-container::after {
+				background: linear-gradient(to left, ${color}, transparent) !important;
+			}
+
+			.monaco-workbench .part.editor > .content.dragged-over .editor-group-container${hasFocus ? '.active' : ''} > .title .tabs-container > .tab.sizing-shrink:not(.dragged):not(.sticky-compact):hover > .tab-label > .monaco-icon-label-container::after {
+				background: linear-gradient(to left, ${colorDrag}, transparent) !important;
+			}
+		`;
+        if (tabHoverBackground && adjustedTabBackground && adjustedTabDragBackground) {
+            const adjustedColor = tabHoverBackground.flatten(adjustedTabBackground);
+            const adjustedColorDrag = tabHoverBackground.flatten(adjustedTabDragBackground);
+            collector.addRule(makeTabHoverBackgroundRule(adjustedColor, adjustedColorDrag, true));
+        }
+        if (tabUnfocusedHoverBackground && adjustedTabBackground && adjustedTabDragBackground) {
+            const adjustedColor = tabUnfocusedHoverBackground.flatten(adjustedTabBackground);
+            const adjustedColorDrag = tabUnfocusedHoverBackground.flatten(adjustedTabDragBackground);
+            collector.addRule(makeTabHoverBackgroundRule(adjustedColor, adjustedColorDrag));
+        }
+        if (editorDragAndDropBackground && adjustedTabDragBackground) {
+            const adjustedColorDrag = editorDragAndDropBackground.flatten(adjustedTabDragBackground);
+            collector.addRule(`
+				.monaco-workbench .part.editor > .content.dragged-over .editor-group-container.active > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.active):not(.dragged):not(.sticky-compact) > .tab-label > .monaco-icon-label-container::after,
+				.monaco-workbench .part.editor > .content.dragged-over .editor-group-container:not(.active) > .title .tabs-container > .tab.sizing-shrink.dragged-over:not(.dragged):not(.sticky-compact) > .tab-label > .monaco-icon-label-container::after {
+					background: linear-gradient(to left, ${adjustedColorDrag}, transparent) !important;
+				}
+		`);
+        }
+        const makeTabBackgroundRule = (color, colorDrag, focused, active) => `
+				.monaco-workbench .part.editor > .content:not(.dragged-over) .editor-group-container${focused ? '.active' : ':not(.active)'} > .title .tabs-container > .tab.sizing-shrink${active ? '.active' : ''}:not(.dragged):not(.sticky-compact) > .tab-label > .monaco-icon-label-container::after {
+					background: linear-gradient(to left, ${color}, transparent);
+				}
+
+				.monaco-workbench .part.editor > .content.dragged-over .editor-group-container${focused ? '.active' : ':not(.active)'} > .title .tabs-container > .tab.sizing-shrink${active ? '.active' : ''}:not(.dragged):not(.sticky-compact) > .tab-label > .monaco-icon-label-container::after {
+					background: linear-gradient(to left, ${colorDrag}, transparent);
+				}
+		`;
+        const tabActiveBackground = theme.getColor(TAB_ACTIVE_BACKGROUND);
+        if (tabActiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
+            const adjustedColor = tabActiveBackground.flatten(adjustedTabBackground);
+            const adjustedColorDrag = tabActiveBackground.flatten(adjustedTabDragBackground);
+            collector.addRule(makeTabBackgroundRule(adjustedColor, adjustedColorDrag, true, true));
+        }
+        const tabUnfocusedActiveBackground = theme.getColor(TAB_UNFOCUSED_ACTIVE_BACKGROUND);
+        if (tabUnfocusedActiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
+            const adjustedColor = tabUnfocusedActiveBackground.flatten(adjustedTabBackground);
+            const adjustedColorDrag = tabUnfocusedActiveBackground.flatten(adjustedTabDragBackground);
+            collector.addRule(makeTabBackgroundRule(adjustedColor, adjustedColorDrag, false, true));
+        }
+        const tabInactiveBackground = theme.getColor(TAB_INACTIVE_BACKGROUND);
+        if (tabInactiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
+            const adjustedColor = tabInactiveBackground.flatten(adjustedTabBackground);
+            const adjustedColorDrag = tabInactiveBackground.flatten(adjustedTabDragBackground);
+            collector.addRule(makeTabBackgroundRule(adjustedColor, adjustedColorDrag, true, false));
+        }
+        const tabUnfocusedInactiveBackground = theme.getColor(TAB_UNFOCUSED_INACTIVE_BACKGROUND);
+        if (tabUnfocusedInactiveBackground && adjustedTabBackground && adjustedTabDragBackground) {
+            const adjustedColor = tabUnfocusedInactiveBackground.flatten(adjustedTabBackground);
+            const adjustedColorDrag = tabUnfocusedInactiveBackground.flatten(adjustedTabDragBackground);
+            collector.addRule(makeTabBackgroundRule(adjustedColor, adjustedColorDrag, false, false));
+        }
+    }
+});
+export { TabsTitleControl };