@codingame/monaco-vscode-api 37.6.1 → 38.0.0

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

@@ -18,6 +18,7 @@ import { IContextKeyService } from '../../../../platform/contextkey/common/conte
 import { MenuId } from '../../../../platform/actions/common/actions.js';
 import { IMenuService } from '../../../../platform/actions/common/actions.service.js';
 import { EditorTabsControl, EditorCommandsContextActionRunner } from './editorTabsControl.js';
+import { clearConnectedTabClipping, updateConnectedTabClipping } from './connectedTabClipping.js';
 import { IQuickInputService } from '../../../../platform/quickinput/common/quickInput.service.js';
 import { MutableDisposable, DisposableStore, dispose, combinedDisposable, toDisposable } from '../../../../base/common/lifecycle.js';
 import { ScrollableElement } from '../../../../base/browser/ui/scrollbar/scrollableElement.js';
@@ -40,15 +41,15 @@ import '../../../../platform/theme/common/colors/searchColors.js';
 import { DraggedEditorGroupIdentifier, DraggedEditorIdentifier, isWindowDraggedOver, extractTreeDropData, ResourcesDropHandler } from '../../dnd.js';
 import { INotificationService } from '../../../../platform/notification/common/notification.service.js';
 import { MergeGroupMode } from '../../../services/editor/common/editorGroupsService.js';
-import { Dimension, ModifierKeyEmitter, $, addDisposableListener, EventType, EventHelper, DragAndDropObserver, isMouseEvent, getWindow, clearNode, scheduleAtNextAnimationFrame, findParentWithClass } from '../../../../base/browser/dom.js';
+import { Dimension, ModifierKeyEmitter, $, addDisposableListener, EventType, EventHelper, DragAndDropObserver, isMouseEvent, getWindow, clearNode, scheduleAtNextAnimationFrame, isHTMLElement, findParentWithClass } from '../../../../base/browser/dom.js';
 import { localize } from '../../../../nls.js';
-import { prepareMoveCopyEditors } from './editor.js';
+import { CONNECTED_EDITOR_TABS_SELECTOR, prepareMoveCopyEditors } from './editor.js';
 import { CloseEditorTabAction, UnpinEditorAction, CloseOtherEditorTabsInGroupAction } from './editorActions.js';
 import { assertReturnsDefined, assertReturnsAllDefined } from '../../../../base/common/types.js';
 import { IEditorService } from '../../../services/editor/common/editorService.service.js';
 import { basenameOrAuthority } from '../../../../base/common/resources.js';
 import { RunOnceScheduler } from '../../../../base/common/async.js';
-import { IPathService } from '../../../services/path/common/pathService.service.js';
+import '../../../services/path/common/pathService.js';
 import { win32, posix } from '../../../../base/common/path.js';
 import { insert, coalesce } from '../../../../base/common/arrays.js';
 import { isHighContrast } from '../../../../platform/theme/common/theme.js';
@@ -64,6 +65,7 @@ import { UnstickyEditorGroupModel, StickyEditorGroupModel } from '../../../commo
 import { IHostService } from '../../../services/host/browser/host.service.js';
 import { BugIndicatingError } from '../../../../base/common/errors.js';
 import { applyDragImage } from '../../../../base/browser/ui/dnd/dnd.js';
+import { IPathService } from '../../../../platform/path/common/pathService.service.js';
 
 var MultiEditorTabsControl_1;
 registerCss(multieditortabscontrol, 0);
@@ -142,6 +144,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         this.editorService = editorService;
         this.pathService = pathService;
         this.treeViewsDragAndDropService = treeViewsDragAndDropService;
+        this.connectedTabLabels = false;
         this.closeEditorAction = this._register(
             this.instantiationService.createInstance(CloseEditorTabAction, CloseEditorTabAction.ID, CloseEditorTabAction.LABEL)
         );
@@ -210,6 +213,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         }
         const previousHoveredTabIndex = this.hoveredTabIndex;
         this.hoveredTabIndex = tabIndex;
+        this.updateConnectedTabOverflowHover();
         if (!this.isAltPressed) {
             return;
         }
@@ -239,6 +243,13 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         this.tabsScrollbar = this.createTabsScrollbar(this.tabsContainer);
         this.tabsAndActionsContainer.appendChild(this.tabsScrollbar.getDomNode());
         this.tabsScrollbar.getDomNode().appendChild(this.stickyTabsBackground);
+        this.connectedTabOverflowEdge = $(".tab-connected-overflow-edge", {
+            "aria-hidden": true
+        });
+        const connectedTabOverflowRight = $(".tab-connected-overflow-right");
+        connectedTabOverflowRight.appendChild($(".tab-connected-overflow-right-edge"));
+        this.connectedTabOverflowEdge.appendChild(connectedTabOverflowRight);
+        this.tabsScrollbar.getDomNode().appendChild(this.connectedTabOverflowEdge);
         this.registerTabsContainerListeners(this.tabsContainer, this.tabsScrollbar);
         if (this.menuIds?.tabsBarAddTab) {
             this.addTabContainer = this.createAddTabControl(this.tabsContainer, this.menuIds.tabsBarAddTab);
@@ -276,6 +287,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         this._register(tabsScrollbar.onScroll(e => {
             if (e.scrollLeftChanged) {
                 scrollable.scrollLeft = e.scrollLeft;
+                this.updateConnectedTabClipping(e.scrollLeft);
             }
         }));
         return tabsScrollbar;
@@ -502,6 +514,9 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         );
     }
     doHandleDecorationsChange() {
+        this.forEachTab(
+            (_editor, _index, tab) => tab.style.removeProperty("--tab-sizing-fit-width")
+        );
         this.layout(this.dimensions);
     }
     updateEditorActionsToolbar() {
@@ -633,7 +648,9 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
     doHandleStickyEditorChange(editor) {
         this.withTab(
             editor,
-            (editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTab(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar)
+            (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);
@@ -664,6 +681,13 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
                 );
             }
         );
+        this.invalidateConnectedTabLayout();
+    }
+    invalidateConnectedTabLayout() {
+        if (this.connectedTabBounds || this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR)) {
+            this.clearConnectedTabClipping();
+            this.layout(this.dimensions);
+        }
     }
     updateEditorLabel(editor) {
         this.updateEditorLabelScheduler.schedule();
@@ -678,19 +702,26 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
     updateEditorDirty(editor) {
         this.withTab(
             editor,
-            (editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTabSelectedActiveAndDirty(
-                this.groupsView.activeGroup === this.groupView,
-                editor,
-                tabContainer,
-                tabActionBar
-            )
+            (editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => {
+                tabContainer.style.removeProperty("--tab-sizing-fit-width");
+                this.redrawTabSelectedActiveAndDirty(
+                    this.groupsView.activeGroup === this.groupView,
+                    editor,
+                    tabContainer,
+                    tabActionBar
+                );
+            }
         );
+        this.invalidateConnectedTabLayout();
     }
     updateEditorCapabilities(editor) {
         this.withTab(
             editor,
-            (editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => this.redrawTab(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar)
+            (editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar) => {
+                this.redrawTab(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel, tabActionBar);
+            }
         );
+        this.invalidateConnectedTabLayout();
     }
     updateOptions(oldOptions, newOptions) {
         super.updateOptions(oldOptions, newOptions);
@@ -709,7 +740,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         if (oldOptions.tabSizingFixedMinWidth !== newOptions.tabSizingFixedMinWidth || oldOptions.tabSizingFixedMaxWidth !== newOptions.tabSizingFixedMaxWidth || oldOptions.tabSizing !== newOptions.tabSizing) {
             this.updateTabSizing(true);
         }
-        if (oldOptions.labelFormat !== newOptions.labelFormat || oldOptions.tabActionLocation !== newOptions.tabActionLocation || oldOptions.tabActionCloseVisibility !== newOptions.tabActionCloseVisibility || oldOptions.tabActionUnpinVisibility !== newOptions.tabActionUnpinVisibility || oldOptions.tabSizing !== newOptions.tabSizing || oldOptions.pinnedTabSizing !== newOptions.pinnedTabSizing || oldOptions.showIcons !== newOptions.showIcons || oldOptions.hasIcons !== newOptions.hasIcons || oldOptions.highlightModifiedTabs !== newOptions.highlightModifiedTabs || oldOptions.wrapTabs !== newOptions.wrapTabs || oldOptions.showTabIndex !== newOptions.showTabIndex || !equals(oldOptions.decorations, newOptions.decorations)) {
+        if (oldOptions.labelFormat !== newOptions.labelFormat || oldOptions.tabActionLocation !== newOptions.tabActionLocation || oldOptions.tabActionReserveSpace !== newOptions.tabActionReserveSpace || oldOptions.tabActionCloseVisibility !== newOptions.tabActionCloseVisibility || oldOptions.tabActionUnpinVisibility !== newOptions.tabActionUnpinVisibility || oldOptions.tabSizing !== newOptions.tabSizing || oldOptions.pinnedTabSizing !== newOptions.pinnedTabSizing || oldOptions.showIcons !== newOptions.showIcons || oldOptions.hasIcons !== newOptions.hasIcons || oldOptions.highlightModifiedTabs !== newOptions.highlightModifiedTabs || oldOptions.wrapTabs !== newOptions.wrapTabs || oldOptions.showTabIndex !== newOptions.showTabIndex || !equals(oldOptions.decorations, newOptions.decorations)) {
             this.redraw();
         }
     }
@@ -750,6 +781,14 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             "aria-hidden": true
         });
         tabContainer.appendChild(tabFillContainer);
+        const tabConnectedEdgeContainer = $(".tab-connected-edge", {
+            "aria-hidden": true
+        });
+        tabContainer.appendChild(tabConnectedEdgeContainer);
+        const tabDivider = $(".tab-divider", {
+            "aria-hidden": true
+        });
+        tabContainer.appendChild(tabDivider);
         const tabBorderTopContainer = $(".tab-border-top-container");
         tabContainer.appendChild(tabBorderTopContainer);
         const editorLabel = this.tabResourceLabels.create(tabContainer, {
@@ -765,7 +804,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             }
         }));
         const tabActionBar = ( new ActionBar(tabActionsContainer, {
-            ariaLabel: ( localize(6159, "Tab actions")),
+            ariaLabel: ( localize(7519, "Tab actions")),
             actionRunner: tabActionRunner
         }));
         const tabActionListener = tabActionBar.onWillRun(e => {
@@ -851,8 +890,15 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             addDisposableListener(tab, EventType$1.Tap, e => handleClickOrTouch(e, true))
         );
         disposables.add(addDisposableListener(tab, EventType.MOUSE_ENTER, () => {
+            this.freezeFitTabWidthWithoutReservedActions(tab);
             this.setHoveredTab(tabIndex);
         }));
+        disposables.add(addDisposableListener(
+            tab,
+            EventType.FOCUS,
+            () => this.freezeFitTabWidthWithoutReservedActions(tab),
+            true
+        ));
         disposables.add(addDisposableListener(tab, EventType.MOUSE_LEAVE, () => {
             if (this.hoveredTabIndex === tabIndex) {
                 this.setHoveredTab(undefined);
@@ -1371,7 +1417,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             if (!tabActionBar.isEmpty()) {
                 tabActionBar.clear();
             }
-            const keybinding = tabAction === this.closeOtherEditorTabsInGroupAction ? (isMacintosh ? ( localize(6160, "⌥+Click")) : ( localize(6161, "Alt+Click"))) : this.getKeybindingLabel(tabAction);
+            const keybinding = tabAction === this.closeOtherEditorTabsInGroupAction ? (isMacintosh ? ( localize(7520, "⌥+Click")) : ( localize(7521, "Alt+Click"))) : this.getKeybindingLabel(tabAction);
             tabActionBar.push(tabAction, {
                 icon: true,
                 label: false,
@@ -1413,6 +1459,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         );
     }
     redrawTabLabel(editor, tabIndex, tabContainer, tabLabelWidget, tabLabel) {
+        tabContainer.style.removeProperty("--tab-sizing-fit-width");
         const options = this.groupsView.partOptions;
         let name;
         let namePrefix;
@@ -1435,6 +1482,9 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             tabContainer.setAttribute("aria-label", tabLabel.ariaLabel);
             tabContainer.setAttribute("aria-description", "");
         }
+        const resource = EditorResourceAccessor.getOriginalUri(editor, {
+            supportSideBySide: SideBySideEditor.PRIMARY
+        });
         tabLabelWidget.setResource({
             name,
             description,
@@ -1456,9 +1506,6 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             hideIcon: options.showIcons === false,
             namePrefix
         });
-        const resource = EditorResourceAccessor.getOriginalUri(editor, {
-            supportSideBySide: SideBySideEditor.PRIMARY
-        });
         if (resource) {
             tabContainer.setAttribute("data-resource-name", basenameOrAuthority(resource));
         } else {
@@ -1562,7 +1609,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         let height;
         if (!this.visible) {
             height = 0;
-        } else if (this.groupsView.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains("wrapping")) {
+        } else if ((this.groupsView.partOptions.wrapTabs && this.tabsAndActionsContainer?.classList.contains("wrapping")) || (this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR) && this.tabsAndActionsContainer?.classList.contains("connected-tab-upper-bar"))) {
             height = this.tabsAndActionsContainer.offsetHeight;
         } else {
             height = this.tabHeight;
@@ -1608,14 +1655,124 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         }
     }
     doLayoutTabs(dimensions, options) {
-        const tabsWrapMultiLine = this.doLayoutTabsWrapping(dimensions);
+        const connected = Boolean(this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR));
+        const firstVisibleTabBar = Array.from(this.parent.children).filter(isHTMLElement).find(
+            element => element.classList.contains("tabs-and-actions-container") && !element.classList.contains("empty")
+        );
+        const topTabBar = firstVisibleTabBar === this.tabsAndActionsContainer;
+        const upperTabBar = this.parent.classList.contains("two-tab-bars") && topTabBar;
+        this.tabsAndActionsContainer?.classList.toggle("connected-tab-upper-bar", connected && upperTabBar);
+        this.forEachTab((_editor, index, tab) => {
+            tab.classList.toggle("connected-tab-last", connected && index === this.tabsModel.count - 1);
+        });
+        if (connected && upperTabBar) {
+            this.forEachTab((_editor, _index, tab) => tab.classList.add("connected-tab-upper-row"));
+        }
+        this.parent.classList.toggle("connected-tabs-labels", connected);
+        if (connected !== this.connectedTabLabels) {
+            this.connectedTabLabels = connected;
+            this.forEachTab(
+                (editor, index, tab, widget, label) => this.redrawTabLabel(editor, index, tab, widget, label)
+            );
+        }
+        this.layoutConnectedTabLabels(connected);
+        this.layoutFitTabsWithoutReservedActions();
+        const didTabsWrapMultiLine = assertReturnsDefined(this.tabsAndActionsContainer).classList.contains("wrapping");
+        let tabsWrapMultiLine = this.doLayoutTabsWrapping(dimensions);
+        if (connected && tabsWrapMultiLine !== didTabsWrapMultiLine) {
+            this.layoutConnectedTabLabels(connected);
+            const remeasuredTabsWrapMultiLine = this.doLayoutTabsWrapping(dimensions);
+            if (remeasuredTabsWrapMultiLine !== tabsWrapMultiLine) {
+                this.doLayoutTabsWrapping(dimensions, true);
+                this.layoutConnectedTabLabels(connected);
+                tabsWrapMultiLine = this.doLayoutTabsWrapping(dimensions, true);
+            } else {
+                tabsWrapMultiLine = remeasuredTabsWrapMultiLine;
+            }
+        }
+        const top = this.getTabAtIndex(0)?.offsetTop;
+        const bottom = this.getLastTab()?.offsetTop;
+        this.forEachTab((_editor, _index, tab) => {
+            tab.classList.toggle(
+                "connected-tab-upper-row",
+                connected && (upperTabBar || tab.offsetTop !== bottom)
+            );
+            tab.classList.toggle("connected-tab-top-row", connected && topTabBar && tab.offsetTop === top);
+        });
+        const connectedTabsWrapping = connected && ( Array.from(this.parent.children).some(
+            element => isHTMLElement(element) && element.classList.contains("tabs-and-actions-container") && element.classList.contains("wrapping")
+        ));
+        this.parent.classList.toggle("connected-tabs-wrapping", connectedTabsWrapping);
+        const overflow = connected && tabsWrapMultiLine ? "visible" : "hidden";
+        assertReturnsDefined(this.tabsContainer).style.overflow = overflow;
+        assertReturnsDefined(this.tabsScrollbar).getDomNode().style.overflow = overflow;
         if (!tabsWrapMultiLine) {
             this.doLayoutTabsNonWrapping(options);
         } else {
             assertReturnsDefined(this.stickyTabsBackground).style.width = "0px";
+            this.clearConnectedTabClipping();
+        }
+    }
+    layoutConnectedTabLabels(connected) {
+        this.forEachTab((_editor, _index, tab) => {
+            tab.classList.remove("connected-tab-narrow");
+            tab.style.removeProperty("--connected-tab-min-width");
+            if (connected && !tab.classList.contains("sticky-compact") && !tab.classList.contains("sizing-fit")) {
+                tab.classList.toggle("connected-tab-narrow", tab.offsetWidth < 102);
+            }
+        });
+    }
+    layoutFitTabsWithoutReservedActions() {
+        if (this.parent.classList.contains("tab-actions-reserve-space") || !this.parent.closest(".modern-ui-tabs")) {
+            this.forEachTab(
+                (_editor, _index, tab) => tab.style.removeProperty("--tab-sizing-fit-width")
+            );
+            return;
+        }
+        const tabs = [];
+        this.forEachTab((_editor, _index, tab) => {
+            if (tab.classList.contains("sizing-fit") && !tab.style.getPropertyValue("--tab-sizing-fit-width")) {
+                tab.classList.toggle(
+                    "tab-action-sizing-rest",
+                    !tab.classList.contains("dirty") && !tab.classList.contains("sticky")
+                );
+                tabs.push(tab);
+            }
+        });
+        const widths = tabs.map(tab => this.getFitTabWidth(tab));
+        for (const [index, tab] of tabs.entries()) {
+            const width = widths[index];
+            tab.style.setProperty("--tab-sizing-fit-width", `${width}px`);
+            tab.classList.remove("tab-action-sizing-rest");
+        }
+    }
+    freezeFitTabWidthWithoutReservedActions(tab) {
+        if (!tab.classList.contains("sizing-fit") || tab.style.getPropertyValue("--tab-sizing-fit-width") || this.parent.classList.contains("tab-actions-reserve-space") || !this.parent.closest(".modern-ui-tabs")) {
+            return;
         }
+        tab.classList.toggle(
+            "tab-action-sizing-rest",
+            !tab.classList.contains("dirty") && !tab.classList.contains("sticky")
+        );
+        tab.style.setProperty("--tab-sizing-fit-width", `${this.getFitTabWidth(tab)}px`);
+        tab.classList.remove("tab-action-sizing-rest");
     }
-    doLayoutTabsWrapping(dimensions) {
+    getFitTabWidth(tab) {
+        const style = getWindow(tab).getComputedStyle(tab);
+        const width = Number.parseFloat(style.width);
+        if (tab.classList.contains("close-action-off") || tab.classList.contains("sticky-compact")) {
+            return width;
+        }
+        const labelPadding = Number.parseFloat(
+            tab.classList.contains("tab-actions-left") ? style.paddingRight : style.paddingLeft
+        );
+        const actionPadding = Number.parseFloat(style.getPropertyValue("--modern-ui-tab-action-padding")) || 28;
+        return Math.max(
+            width,
+            labelPadding + actionPadding + Number.parseFloat(style.borderLeftWidth) + Number.parseFloat(style.borderRightWidth)
+        );
+    }
+    doLayoutTabsWrapping(dimensions, forceTabsWrapMultiLine) {
         const [
             tabsAndActionsContainer,
             tabsContainer,
@@ -1646,7 +1803,10 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
                 tab.classList.remove("last-in-row");
             }
         }
-        if (this.groupsView.partOptions.wrapTabs) {
+        if (forceTabsWrapMultiLine !== undefined) {
+            updateTabsWrapping(forceTabsWrapMultiLine);
+        }
+        else if (this.groupsView.partOptions.wrapTabs) {
             const visibleTabsWidth = tabsContainer.offsetWidth;
             const allTabsWidth = tabsContainer.scrollWidth;
             const lastTabFitsWrapped = () => {
@@ -1665,7 +1825,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             }
             if (tabsWrapMultiLine) {
                 if (
-                (tabsContainer.offsetHeight > dimensions.available.height) || (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.tabHeight) || (!lastTabFitsWrapped())) {
+                (tabsAndActionsContainer.offsetHeight > dimensions.available.height) || (allTabsWidth === visibleTabsWidth && tabsContainer.offsetHeight === this.tabHeight) || (!lastTabFitsWrapped())) {
                     updateTabsWrapping(false);
                 }
             }
@@ -1712,30 +1872,73 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
         const [tabsContainer, tabsScrollbar] = assertReturnsAllDefined(this.tabsContainer, this.tabsScrollbar);
         const visibleTabsWidth = tabsContainer.offsetWidth;
         const allTabsWidth = tabsContainer.scrollWidth;
+        const visibleEditorTabsWidth = visibleTabsWidth - (this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR) ? this.addTabContainer?.offsetWidth ?? 0 : 0);
         let stickyTabsWidth = 0;
         if (this.tabsModel.stickyCount > 0) {
             const stickyTabWidth = this.getStickyTabWidth(this.groupsView.partOptions.pinnedTabSizing);
-            stickyTabsWidth = this.tabsModel.stickyCount * stickyTabWidth;
             for (let tabIndex = 0; tabIndex < this.tabsModel.stickyCount; tabIndex++) {
                 const tab = this.getTabAtIndex(tabIndex);
                 if (tab) {
-                    tab.style.left = `${tabIndex * stickyTabWidth}px`;
+                    tab.style.left = `${stickyTabsWidth}px`;
                 }
+                stickyTabsWidth += this.connectedTabLabels && stickyTabWidth > 0 && tab ? tab.offsetWidth : stickyTabWidth;
             }
         }
         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;
+        let availableTabsContainerWidth = visibleEditorTabsWidth - stickyTabsWidth;
         if (this.tabsModel.stickyCount > 0 && availableTabsContainerWidth < MultiEditorTabsControl_1.TAB_WIDTH.fit) {
             tabsContainer.classList.add("disable-sticky-tabs");
-            availableTabsContainerWidth = visibleTabsWidth;
+            availableTabsContainerWidth = visibleEditorTabsWidth;
             stickyTabsWidth = 0;
             activeTabPositionStatic = false;
         } else {
             tabsContainer.classList.remove("disable-sticky-tabs");
         }
         assertReturnsDefined(this.stickyTabsBackground).style.width = `${stickyTabsWidth}px`;
+        this.connectedTabOverflowEdge?.classList.toggle("connected-tab-adjacent-sticky", stickyTabsWidth > 0);
+        this.clearConnectedTabClipping();
+        const activeTabFill = activeTab?.firstElementChild;
+        const overflowEdge = this.connectedTabOverflowEdge;
+        overflowEdge?.classList.toggle(
+            "connected-tab-top-row",
+            !!activeTab?.classList.contains("connected-tab-top-row")
+        );
+        if (activeTab && !activeTab.classList.contains("connected-tab-upper-row") && isHTMLElement(activeTabFill) && overflowEdge && !activeTabPositionStatic && this.parent.closest(CONNECTED_EDITOR_TABS_SELECTOR)) {
+            const scrollLeft = tabsContainer.scrollLeft;
+            const tabsBounds = tabsContainer.getBoundingClientRect();
+            const fillBounds = activeTabFill.getBoundingClientRect();
+            const scrollableBounds = tabsScrollbar.getDomNode().getBoundingClientRect();
+            const targetWindow = getWindow(activeTabFill);
+            overflowEdge.style.setProperty(
+                "--modern-ui-connected-tab-border",
+                targetWindow.getComputedStyle(activeTab).getPropertyValue("--modern-ui-connected-tab-border")
+            );
+            const edgeStyle = targetWindow.getComputedStyle(assertReturnsDefined(activeTabFill.nextElementSibling));
+            overflowEdge.style.setProperty("--modern-ui-connected-tab-overflow-top-border", edgeStyle.borderTopColor);
+            overflowEdge.style.setProperty(
+                "--modern-ui-connected-tab-overflow-top-background",
+                edgeStyle.backgroundImage
+            );
+            const scale = visibleTabsWidth > 0 ? tabsBounds.width / visibleTabsWidth : 1;
+            const fillLeft = (fillBounds.left - tabsBounds.left) / scale + scrollLeft;
+            const viewportRight = visibleEditorTabsWidth;
+            overflowEdge.style.top = `${(fillBounds.top - scrollableBounds.top) / scale}px`;
+            overflowEdge.style.right = `${visibleTabsWidth - viewportRight}px`;
+            overflowEdge.style.bottom = `${(scrollableBounds.bottom - fillBounds.bottom) / scale}px`;
+            overflowEdge.style.left = `${stickyTabsWidth}px`;
+            this.connectedTabBounds = {
+                tab: activeTab,
+                overflowEdge,
+                fillLeft,
+                fillRight: (fillBounds.right - tabsBounds.left) / scale + scrollLeft,
+                viewportLeft: stickyTabsWidth,
+                viewportRight,
+                shoulderExtent: Number.parseFloat(targetWindow.getComputedStyle(activeTabFill, "::after").width)
+            };
+            this.updateConnectedTabOverflowHover();
+        }
         let activeTabPosX;
         let activeTabWidth;
         if (!this.blockRevealActiveTab && activeTab) {
@@ -1750,6 +1953,7 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             width: visibleTabsWidth,
             scrollWidth: allTabsWidth
         });
+        this.updateConnectedTabClipping(tabsScrollbar.getScrollPosition().scrollLeft);
         const dimensionsChanged = oldVisibleTabsWidth !== visibleTabsWidth || oldAllTabsWidth !== allTabsWidth;
         if (
         this.blockRevealActiveTab || typeof activeTabPosX !== "number" || typeof activeTabWidth !== "number" || activeTabPositionStatic || (!dimensionsChanged && !options?.forceRevealActiveTab)) {
@@ -1757,11 +1961,15 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             return;
         }
         const tabsContainerScrollPosX = tabsScrollbar.getScrollPosition().scrollLeft;
-        const activeTabFits = activeTabWidth <= availableTabsContainerWidth;
-        const adjustedActiveTabPosX = activeTabPosX - stickyTabsWidth;
-        if (activeTabFits && tabsContainerScrollPosX + availableTabsContainerWidth < adjustedActiveTabPosX + activeTabWidth) {
+        const activeTabShoulderWidth = this.connectedTabBounds?.shoulderExtent ?? 0;
+        const previousTab = this.connectedTabBounds?.tab.previousElementSibling;
+        const activeTabLeftShoulderWidth = previousTab && !previousTab.classList.contains("last-in-row") ? activeTabShoulderWidth : 0;
+        const adjustedActiveTabPosX = (this.connectedTabBounds ? Math.floor(this.connectedTabBounds.fillLeft - activeTabLeftShoulderWidth) : activeTabPosX) - stickyTabsWidth;
+        const activeTabRight = this.connectedTabBounds ? Math.ceil(this.connectedTabBounds.fillRight + activeTabShoulderWidth) + (this.connectedTabBounds.tab.classList.contains("connected-tab-last") ? 1 : 0) - stickyTabsWidth : adjustedActiveTabPosX + activeTabWidth;
+        const activeTabFits = activeTabRight - adjustedActiveTabPosX <= availableTabsContainerWidth;
+        if (activeTabFits && tabsContainerScrollPosX + availableTabsContainerWidth < activeTabRight) {
             tabsScrollbar.setScrollPosition({
-                scrollLeft: tabsContainerScrollPosX + ((adjustedActiveTabPosX + activeTabWidth)  - (tabsContainerScrollPosX + availableTabsContainerWidth))
+                scrollLeft: tabsContainerScrollPosX + (activeTabRight - (tabsContainerScrollPosX + availableTabsContainerWidth))
             });
         }
         else if (tabsContainerScrollPosX > adjustedActiveTabPosX || !activeTabFits) {
@@ -1781,6 +1989,25 @@ let MultiEditorTabsControl = class MultiEditorTabsControl extends EditorTabsCont
             return 0;
         }
     }
+    clearConnectedTabClipping() {
+        clearConnectedTabClipping(this.connectedTabBounds?.tab, this.connectedTabOverflowEdge);
+        this.connectedTabOverflowEdge?.style.removeProperty("--modern-ui-connected-tab-border");
+        this.connectedTabOverflowEdge?.style.removeProperty("--modern-ui-connected-tab-overflow-top-border");
+        this.connectedTabOverflowEdge?.style.removeProperty("--modern-ui-connected-tab-overflow-top-background");
+        this.connectedTabBounds = undefined;
+    }
+    updateConnectedTabClipping(scrollLeft) {
+        if (this.connectedTabBounds) {
+            updateConnectedTabClipping(this.connectedTabBounds, scrollLeft);
+        }
+    }
+    updateConnectedTabOverflowHover() {
+        const hoveredEditor = typeof this.hoveredTabIndex === "number" ? this.tabsModel.getEditorByIndex(this.hoveredTabIndex) : undefined;
+        this.connectedTabOverflowEdge?.classList.toggle(
+            "connected-tab-hovered",
+            !!hoveredEditor && this.groupView.isActive(hoveredEditor)
+        );
+    }
     updateTabsControlVisibility() {
         const tabsAndActionsContainer = assertReturnsDefined(this.tabsAndActionsContainer);
         tabsAndActionsContainer.classList.toggle("empty", !this.visible);
@@ -2015,7 +2242,7 @@ registerThemingParticipant((theme, collector) => {
     if (tabHoverBorder) {
         collector.addRule(`
             .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab:hover > .tab-border-bottom-container {
-                display: block;
+                display: var(--editor-tab-border-indicator-display, block);
                 position: absolute;
                 left: 0;
                 pointer-events: none;
@@ -2031,7 +2258,7 @@ registerThemingParticipant((theme, collector) => {
     if (tabUnfocusedHoverBorder) {
         collector.addRule(`
             .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover > .tab-border-bottom-container  {
-                display: block;
+                display: var(--editor-tab-border-indicator-display, block);
                 position: absolute;
                 left: 0;
                 pointer-events: none;

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

@@ -208,7 +208,7 @@ let SideBySideEditor = class SideBySideEditor extends AbstractEditorWithViewStat
         if (this.input) {
             return this.input.getName();
         }
-        return localize(6162, "Side by Side Editor");
+        return localize(7522, "Side by Side Editor");
     }
     async setInput(input, options, context, token) {
         const oldInput = this.input;

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

@@ -20,7 +20,7 @@ class AbstractTextCodeEditor extends AbstractTextEditor {
         if (this.input) {
             return this.input.getName();
         }
-        return localize(6163, "Text Editor");
+        return localize(7523, "Text Editor");
     }
     createEditorControl(parent, initialOptions) {
         this.editorControl = this._register(this.instantiationService.createInstance(

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

@@ -81,7 +81,7 @@ let TextDiffEditor = class TextDiffEditor extends AbstractTextEditor {
         if (this.input) {
             return this.input.getName();
         }
-        return localize(6164, "Text Diff Editor");
+        return localize(7524, "Text Diff Editor");
     }
     createEditorControl(parent, configuration) {
         this.diffEditorControl = this._register(
@@ -145,13 +145,13 @@ let TextDiffEditor = class TextDiffEditor extends AbstractTextEditor {
             let message;
             if (error instanceof TooLargeFileOperationError) {
                 message = ( localize(
-                    6165,
+                    7525,
                     "At least one file is not displayed in the text compare editor because it is very large ({0}).",
                     ByteSize.formatSize(error.size)
                 ));
             } else {
                 message = ( localize(
-                    6166,
+                    7526,
                     "At least one file is not displayed in the text compare editor because it is very large."
                 ));
             }

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

@@ -103,7 +103,7 @@ let AbstractTextEditor = class AbstractTextEditor extends AbstractEditorWithView
         return editorConfiguration;
     }
     computeAriaLabel() {
-        return this.input ? computeEditorAriaLabel(this.input, undefined, this.group, this.editorGroupService.count) : ( localize(6167, "Editor"));
+        return this.input ? computeEditorAriaLabel(this.input, undefined, this.group, this.editorGroupService.count) : ( localize(7527, "Editor"));
     }
     onDidChangeFileSystemProvider(scheme) {
         if (!this.input) {

package/vscode/src/vs/workbench/browser/parts/globalCompositeBar.d.ts

@@ -40,10 +40,13 @@ export declare class GlobalCompositeBar extends Disposable {
     private readonly globalActivityAction;
     private readonly accountAction;
     private readonly globalActivityActionBar;
+    private readonly _onDidChange;
+    readonly onDidChange: import("../../../base/common/event.js").Event<void>;
     constructor(contextMenuActionsProvider: () => IAction[], colors: (theme: IColorTheme) => ICompositeBarColors, activityHoverOptions: IActivityHoverOptions, configurationService: IConfigurationService, instantiationService: IInstantiationService, storageService: IStorageService, extensionService: IExtensionService);
     private registerListeners;
     create(parent: HTMLElement): void;
     focus(): void;
+    getHeight(actionHeight: number, actionGap: number): number;
     getContextMenuActions(): IAction[];
     private toggleAccountsActivity;
     private get accountsVisibilityPreference();