@codingame/monaco-vscode-api 36.2.6 → 37.0.0

package/vscode/src/vs/workbench/browser/part.js

@@ -35,7 +35,7 @@ class Part extends Component {
         this.parent = parent;
         this.titleArea = this.createTitleArea(parent, options);
         this.contentArea = this.createContentArea(parent, options);
-        this.partLayout = ( new PartLayout(this.options, this.contentArea));
+        this.partLayout = ( new PartLayout(this.options, this.contentArea, this.layoutService));
         this.updateStyles();
     }
     getContainer() {
@@ -131,35 +131,37 @@ class PartLayout {
         this.TITLE_HEIGHT = 35;
     }
     static {
-        this.TITLE_HEIGHT_STYLE_OVERRIDE = 32;
+        this.FOOTER_HEIGHT = 35;
     }
     static {
-        this.Footer_HEIGHT = 35;
+        this.AREA_HEIGHT_MODERN_UI = 32;
     }
-    constructor(options, contentArea) {
+    constructor(options, contentArea, layoutService) {
         this.options = options;
         this.contentArea = contentArea;
+        this.layoutService = layoutService;
         this.headerVisible = false;
         this.footerVisible = false;
     }
     layout(width, height) {
         let titleSize;
         if (this.options.hasTitle) {
-            const isStyleOverride = !!this.contentArea?.closest(".style-override");
-            const titleHeight = isStyleOverride ? PartLayout.TITLE_HEIGHT_STYLE_OVERRIDE : PartLayout.TITLE_HEIGHT;
+            const titleHeight = this.layoutService.isFloatingPanelsEnabled() ? PartLayout.AREA_HEIGHT_MODERN_UI : PartLayout.TITLE_HEIGHT;
             titleSize = ( new Dimension(width, Math.min(height, titleHeight)));
         } else {
             titleSize = Dimension.None;
         }
         let headerSize;
         if (this.headerVisible) {
-            headerSize = ( new Dimension(width, Math.min(height, PartLayout.HEADER_HEIGHT)));
+            const headerHeight = this.layoutService.isFloatingPanelsEnabled() ? PartLayout.AREA_HEIGHT_MODERN_UI : PartLayout.HEADER_HEIGHT;
+            headerSize = ( new Dimension(width, Math.min(height, headerHeight)));
         } else {
             headerSize = Dimension.None;
         }
         let footerSize;
         if (this.footerVisible) {
-            footerSize = ( new Dimension(width, Math.min(height, PartLayout.Footer_HEIGHT)));
+            const footerHeight = this.layoutService.isFloatingPanelsEnabled() ? PartLayout.AREA_HEIGHT_MODERN_UI : PartLayout.FOOTER_HEIGHT;
+            footerSize = ( new Dimension(width, Math.min(height, footerHeight)));
         } else {
             footerSize = Dimension.None;
         }

package/vscode/src/vs/workbench/browser/parts/activitybar/activitybarPart.d.ts

@@ -15,24 +15,50 @@ import { IViewDescriptorService } from "../../../common/views.service.js";
 import { IExtensionService } from "../../../services/extensions/common/extensions.service.js";
 import { IWorkbenchEnvironmentService } from "../../../services/environment/common/environmentService.service.js";
 import { IViewsService } from "../../../services/views/common/viewsService.service.js";
+import { IHostService } from "../../../services/host/browser/host.service.js";
 export declare class ActivitybarPart extends Part {
     private readonly location;
     private readonly paneCompositePart;
     private readonly instantiationService;
     private readonly configurationService;
+    private readonly hostService;
     static readonly ACTION_HEIGHT = 48;
-    static readonly COMPACT_ACTION_HEIGHT = 32;
+    static readonly COMPACT_ACTION_HEIGHT = 28;
     static readonly ACTIVITYBAR_WIDTH = 48;
     static readonly COMPACT_ACTIVITYBAR_WIDTH = 36;
+    /** Narrower dimensions used when the floating panels (Modern UI) experiment is enabled. */
+    static readonly FLOATING_ACTION_HEIGHT = 36;
+    static readonly FLOATING_ACTIVITYBAR_WIDTH = 36;
+    static readonly FLOATING_COMPACT_ACTIVITYBAR_WIDTH = 28;
+    /**
+     * Vertical gap between activity bar items at the default size under the floating
+     * panels experiment. Published to CSS as `--activity-bar-action-gap` so that the
+     * stylesheet and the overflow computation cannot drift apart.
+     */
+    static readonly FLOATING_ACTION_GAP = 8;
+    /**
+     * The compact Modern UI density tightens that gap to match its denser rhythm.
+     */
+    static readonly FLOATING_COMPACT_ACTION_GAP = 4;
     static readonly ICON_SIZE = 24;
     static readonly COMPACT_ICON_SIZE = 16;
     /**
-     * Gutter reserved on the left and bottom edges under the floating panels
-     * experiment so the activity bar aligns with the floating cards (it stays
-     * flush with the title bar, so no top gutter). Must match the margins applied
-     * in `part.css` under `.floating-panels`.
+     * Base gutter reserved around the activity bar under the floating panels
+     * experiment. Must match the margins applied in `floatingPanels.css`.
      */
     static readonly FLOATING_MARGIN = 4;
+    /**
+     * The rail's own horizontal padding, doubled: the space inside the card beside the icon
+     * column. Independent of the cluster perimeter so the icons keep their inset whatever the
+     * gutter is. Must match `--modern-ui-activitybar-lane` in `floatingPanels.css`.
+     */
+    static readonly FLOATING_LANE = 8;
+    static readonly FLOATING_COMPACT_LANE = 4;
+    /**
+     * The card border the activity bar draws on each edge under the floating panels
+     * experiment. Must match the border width applied in `floatingPanels.css`.
+     */
+    static readonly FLOATING_BORDER = 1;
     static readonly pinnedViewContainersKey = "workbench.activity.pinnedViewlets2";
     static readonly placeholderViewContainersKey = "workbench.activity.placeholderViewlets";
     static readonly viewContainersWorkspaceStateKey = "workbench.activity.viewletsWorkspaceState";
@@ -42,12 +68,35 @@ export declare class ActivitybarPart extends Part {
     readonly maximumHeight: number;
     /** The intrinsic activity bar width (excludes any floating gutter). */
     private get baseWidth();
-    /** Extra space reserved around the part when the floating panels experiment is enabled. */
-    private get floatingGutter();
+    /** The action (item) height that drives visible item sizing. */
+    private get actionHeight();
+    /**
+     * Vertical gap rendered between two adjacent items. Only the floating panels
+     * experiment separates items, and only at the default activity bar size; the compact
+     * Modern UI density tightens it to match its denser rhythm.
+     */
+    private get actionGap();
+    /**
+     * The vertical space a single item occupies in the bar (its height plus the gap that
+     * separates it from the next one). This drives the overflow computation, so it has to
+     * track the current activity bar size, otherwise items collapse into the overflow menu
+     * prematurely.
+     */
+    private get compositeSize();
+    private get floatingHorizontalGutter();
+    /**
+     * Whether the rail has to supply the gap to the card before it. Under this system's
+     * leading-margin convention each card owns the gap on its leading edge, so a rail that
+     * follows the editor — on the right, with no side bar to connect to — reserves one more
+     * margin than it does when it leads. Compact density keeps its cards joined, so it never
+     * needs the gap. Mirrors `.nosidebar .part.activitybar.right` in `floatingPanels.css`.
+     */
+    private get needsFloatingLeadingGap();
     private readonly compositeBar;
     private content;
     private _isCompact;
-    constructor(location: ViewContainerLocation, paneCompositePart: IPaneCompositePart, instantiationService: IInstantiationService, layoutService: IWorkbenchLayoutService, themeService: IThemeService, storageService: IStorageService, configurationService: IConfigurationService);
+    private activeWindowId;
+    constructor(location: ViewContainerLocation, paneCompositePart: IPaneCompositePart, instantiationService: IInstantiationService, layoutService: IWorkbenchLayoutService, themeService: IThemeService, storageService: IStorageService, configurationService: IConfigurationService, hostService: IHostService);
     private updateCompactStyle;
     private recreateCompositeBar;
     private createCompositeBar;
@@ -60,6 +109,13 @@ export declare class ActivitybarPart extends Part {
     show(focus?: boolean): void;
     hide(): void;
     layout(width: number, height: number): void;
+    /**
+     * Vertical gutters (in pixels) mirroring the margins in `floatingPanels.css`, plus the
+     * card's 1px border on each edge (drawn inside the box, as `.monaco-workbench .part` is
+     * `box-sizing: border-box`). The top is flush with title/banner chrome and doubles only at
+     * an exposed window edge.
+     */
+    private getFloatingGutters;
     toJSON(): object;
 }
 export declare class ActivityBarCompositeBar extends PaneCompositeBar {

package/vscode/src/vs/workbench/browser/parts/activitybar/activitybarPart.js

@@ -6,14 +6,15 @@ import * as activityaction from './media/activityaction.css';
 import { localize, localize2 } from '../../../../nls.js';
 import { ActionsOrientation } from '../../../../base/browser/ui/actionbar/actionbar.js';
 import { Part } from '../../part.js';
-import { FLOATING_PANEL_MARGIN, Parts, LayoutSettings, Position, ActivityBarPosition } from '../../../services/layout/browser/layoutService.js';
+import { mainWindow } from '../../../../base/browser/window.js';
+import { FLOATING_PANEL_MARGIN, getFloatingPanelOuterMargin, getFloatingPanelMargin, Position, Parts, LayoutSettings, isFloatingTopEdgeExposed, FLOATING_PANEL_INNER_MARGIN, ActivityBarPosition } from '../../../services/layout/browser/layoutService.js';
 import { IWorkbenchLayoutService } from '../../../services/layout/browser/layoutService.service.js';
 import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
 import { MutableDisposable, DisposableStore } from '../../../../base/common/lifecycle.js';
 import { ToggleSidebarPositionAction, ToggleSidebarVisibilityAction } from '../../actions/layoutActions.js';
 import { registerThemingParticipant } from '../../../../platform/theme/common/themeService.js';
 import { IThemeService } from '../../../../platform/theme/common/themeService.service.js';
-import { ACTIVITY_BAR_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER } from '../../../common/theme.js';
+import { ACTIVITY_BAR_DRAG_AND_DROP_BORDER, ACTIVITY_BAR_BADGE_FOREGROUND, ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_ACTIVE_BACKGROUND, ACTIVITY_BAR_ACTIVE_BORDER, ACTIVITY_BAR_INACTIVE_FOREGROUND, ACTIVITY_BAR_FOREGROUND, ACTIVITY_BAR_BACKGROUND, MODERN_ACTIVITY_BAR_INACTIVE_BACKGROUND, MODERN_ACTIVITY_BAR_BACKGROUND, ACTIVITY_BAR_BORDER, ACTIVITY_BAR_ACTIVE_FOCUS_BORDER } from '../../../common/theme.js';
 import '../../../../platform/theme/common/colorUtils.js';
 import { contrastBorder, activeContrastBorder, focusBorder } from '../../../../platform/theme/common/colors/baseColors.js';
 import '../../../../platform/theme/common/colors/chartsColors.js';
@@ -50,6 +51,7 @@ import { IExtensionService } from '../../../services/extensions/common/extension
 import { IWorkbenchEnvironmentService } from '../../../services/environment/common/environmentService.service.js';
 import { IViewsService } from '../../../services/views/common/viewsService.service.js';
 import { SwitchCompositeViewAction } from '../compositeBarActions.js';
+import { IHostService } from '../../../services/host/browser/host.service.js';
 
 var ActivitybarPart_1;
 registerCss(activitybarpart);
@@ -62,7 +64,7 @@ let ActivitybarPart = class ActivitybarPart extends Part {
         this.ACTION_HEIGHT = 48;
     }
     static {
-        this.COMPACT_ACTION_HEIGHT = 32;
+        this.COMPACT_ACTION_HEIGHT = 28;
     }
     static {
         this.ACTIVITYBAR_WIDTH = 48;
@@ -70,6 +72,21 @@ let ActivitybarPart = class ActivitybarPart extends Part {
     static {
         this.COMPACT_ACTIVITYBAR_WIDTH = 36;
     }
+    static {
+        this.FLOATING_ACTION_HEIGHT = 36;
+    }
+    static {
+        this.FLOATING_ACTIVITYBAR_WIDTH = 36;
+    }
+    static {
+        this.FLOATING_COMPACT_ACTIVITYBAR_WIDTH = 28;
+    }
+    static {
+        this.FLOATING_ACTION_GAP = 8;
+    }
+    static {
+        this.FLOATING_COMPACT_ACTION_GAP = 4;
+    }
     static {
         this.ICON_SIZE = 24;
     }
@@ -79,6 +96,15 @@ let ActivitybarPart = class ActivitybarPart extends Part {
     static {
         this.FLOATING_MARGIN = FLOATING_PANEL_MARGIN;
     }
+    static {
+        this.FLOATING_LANE = 8;
+    }
+    static {
+        this.FLOATING_COMPACT_LANE = 4;
+    }
+    static {
+        this.FLOATING_BORDER = 1;
+    }
     static {
         this.pinnedViewContainersKey = "workbench.activity.pinnedViewlets2";
     }
@@ -89,16 +115,47 @@ let ActivitybarPart = class ActivitybarPart extends Part {
         this.viewContainersWorkspaceStateKey = "workbench.activity.viewletsWorkspaceState";
     }
     get minimumWidth() {
-        return this.baseWidth + this.floatingGutter;
+        return this.baseWidth + this.floatingHorizontalGutter;
     }
     get maximumWidth() {
-        return this.baseWidth + this.floatingGutter;
+        return this.baseWidth + this.floatingHorizontalGutter;
     }
     get baseWidth() {
+        if (this.layoutService.isFloatingPanelsEnabled()) {
+            if (this._isCompact) {
+                return ActivitybarPart_1.FLOATING_COMPACT_ACTIVITYBAR_WIDTH;
+            }
+            return ActivitybarPart_1.FLOATING_ACTIVITYBAR_WIDTH;
+        }
         return this._isCompact ? ActivitybarPart_1.COMPACT_ACTIVITYBAR_WIDTH : ActivitybarPart_1.ACTIVITYBAR_WIDTH;
     }
-    get floatingGutter() {
-        return this.layoutService.isFloatingPanelsEnabled() ? ActivitybarPart_1.FLOATING_MARGIN : 0;
+    get actionHeight() {
+        if (this._isCompact) {
+            return ActivitybarPart_1.COMPACT_ACTION_HEIGHT;
+        }
+        if (this.layoutService.isFloatingPanelsEnabled()) {
+            return ActivitybarPart_1.FLOATING_ACTION_HEIGHT;
+        }
+        return ActivitybarPart_1.ACTION_HEIGHT;
+    }
+    get actionGap() {
+        if (!this.layoutService.isFloatingPanelsEnabled() || this._isCompact) {
+            return 0;
+        }
+        return this.layoutService.isModernUICompact() ? ActivitybarPart_1.FLOATING_COMPACT_ACTION_GAP : ActivitybarPart_1.FLOATING_ACTION_GAP;
+    }
+    get compositeSize() {
+        return this.actionHeight + this.actionGap;
+    }
+    get floatingHorizontalGutter() {
+        if (!this.layoutService.isFloatingPanelsEnabled()) {
+            return 0;
+        }
+        const lane = this.layoutService.isModernUICompact() ? ActivitybarPart_1.FLOATING_COMPACT_LANE : ActivitybarPart_1.FLOATING_LANE;
+        return getFloatingPanelOuterMargin(this.layoutService) + lane + (this.needsFloatingLeadingGap ? getFloatingPanelMargin(this.layoutService) : 0);
+    }
+    get needsFloatingLeadingGap() {
+        return !this.layoutService.isModernUICompact() && this.layoutService.getSideBarPosition() === Position.RIGHT && !this.layoutService.isVisible(Parts.SIDEBAR_PART);
     }
     constructor(
         location,
@@ -107,7 +164,8 @@ let ActivitybarPart = class ActivitybarPart extends Part {
         layoutService,
         themeService,
         storageService,
-        configurationService
+        configurationService,
+        hostService
     ) {
         super(Parts.ACTIVITYBAR_PART, {
             hasTitle: false
@@ -116,6 +174,7 @@ let ActivitybarPart = class ActivitybarPart extends Part {
         this.paneCompositePart = paneCompositePart;
         this.instantiationService = instantiationService;
         this.configurationService = configurationService;
+        this.hostService = hostService;
         this.minimumHeight = 0;
         this.maximumHeight = Number.POSITIVE_INFINITY;
         this.compositeBar = this._register(( new MutableDisposable()));
@@ -127,7 +186,27 @@ let ActivitybarPart = class ActivitybarPart extends Part {
                 this.recreateCompositeBar();
                 this._onDidChange.fire(undefined);
             }
-            if (e.affectsConfiguration(LayoutSettings.MODERN_UI)) {
+            if (e.affectsConfiguration(LayoutSettings.MODERN_UI) || e.affectsConfiguration(LayoutSettings.MODERN_UI_DENSITY)) {
+                this.updateCompactStyle();
+                this.recreateCompositeBar();
+                this._onDidChange.fire(undefined);
+                if (this.element) {
+                    this.updateStyles();
+                }
+            }
+        }));
+        const updateStyles = () => {
+            if (this.element) {
+                this.updateStyles();
+            }
+        };
+        this._register(this.hostService.onDidChangeFocus(updateStyles));
+        this._register(this.hostService.onDidChangeActiveWindow(windowId => {
+            this.activeWindowId = windowId;
+            updateStyles();
+        }));
+        this._register(this.layoutService.onDidChangePartVisibility(e => {
+            if (e.partId === Parts.SIDEBAR_PART && this.layoutService.isFloatingPanelsEnabled()) {
                 this._onDidChange.fire(undefined);
             }
         }));
@@ -135,11 +214,10 @@ let ActivitybarPart = class ActivitybarPart extends Part {
     updateCompactStyle() {
         if (this.element) {
             this.element.classList.toggle("compact", this._isCompact);
+            this.layoutService.mainContainer.classList.toggle("activitybar-compact", this._isCompact);
             this.element.style.setProperty("--activity-bar-width", `${this.baseWidth}px`);
-            this.element.style.setProperty(
-                "--activity-bar-action-height",
-                `${this._isCompact ? ActivitybarPart_1.COMPACT_ACTION_HEIGHT : ActivitybarPart_1.ACTION_HEIGHT}px`
-            );
+            this.element.style.setProperty("--activity-bar-action-height", `${this.actionHeight}px`);
+            this.element.style.setProperty("--activity-bar-action-gap", `${this.actionGap}px`);
             this.element.style.setProperty(
                 "--activity-bar-icon-size",
                 `${this._isCompact ? ActivitybarPart_1.COMPACT_ICON_SIZE : ActivitybarPart_1.ICON_SIZE}px`
@@ -159,7 +237,7 @@ let ActivitybarPart = class ActivitybarPart extends Part {
         }
     }
     createCompositeBar() {
-        const actionHeight = this._isCompact ? ActivitybarPart_1.COMPACT_ACTION_HEIGHT : ActivitybarPart_1.ACTION_HEIGHT;
+        const compositeSize = this.compositeSize;
         const iconSize = this._isCompact ? ActivitybarPart_1.COMPACT_ICON_SIZE : ActivitybarPart_1.ICON_SIZE;
         return this.instantiationService.createInstance(ActivityBarCompositeBar, this.location, {
             partContainerClass: "activitybar",
@@ -175,7 +253,7 @@ let ActivitybarPart = class ActivitybarPart extends Part {
             preventLoopNavigation: true,
             recomputeSizes: false,
             fillExtraContextMenuActions: (actions, e) => {},
-            compositeSize: 52,
+            compositeSize,
             colors: theme => ({
                 activeForegroundColor: theme.getColor(ACTIVITY_BAR_FOREGROUND),
                 inactiveForegroundColor: theme.getColor(ACTIVITY_BAR_INACTIVE_FOREGROUND),
@@ -188,7 +266,7 @@ let ActivitybarPart = class ActivitybarPart extends Part {
                 inactiveBackgroundColor: undefined,
                 activeBorderBottomColor: undefined
             }),
-            overflowActionSize: actionHeight
+            overflowActionSize: compositeSize
         }, Parts.ACTIVITYBAR_PART, this.paneCompositePart, true);
     }
     createContentArea(parent) {
@@ -215,11 +293,17 @@ let ActivitybarPart = class ActivitybarPart extends Part {
     updateStyles() {
         super.updateStyles();
         const container = assertReturnsDefined(this.getContainer());
-        const background = this.getColor(ACTIVITY_BAR_BACKGROUND) || "";
+        let backgroundColor = ACTIVITY_BAR_BACKGROUND;
+        if (this.configurationService.getValue(LayoutSettings.MODERN_UI) === true) {
+            const isWindowActive = this.activeWindowId === undefined ? mainWindow.document.hasFocus() : this.activeWindowId === mainWindow.vscodeWindowId;
+            const isInactive = !this.hostService.hasFocus || !isWindowActive;
+            backgroundColor = isInactive ? MODERN_ACTIVITY_BAR_INACTIVE_BACKGROUND : MODERN_ACTIVITY_BAR_BACKGROUND;
+        }
+        const background = this.getColor(backgroundColor) || "";
         container.style.backgroundColor = background;
-        const borderColor = this.getColor(ACTIVITY_BAR_BORDER) || this.getColor(contrastBorder) || "";
+        const borderColor = this.layoutService.isFloatingPanelsEnabled() ? "" : this.getColor(ACTIVITY_BAR_BORDER) || this.getColor(contrastBorder) || "";
         container.classList.toggle("bordered", !!borderColor);
-        container.style.borderColor = borderColor ? borderColor : "";
+        container.style.borderColor = borderColor;
     }
     show(focus) {
         if (!this.content) {
@@ -247,14 +331,32 @@ let ActivitybarPart = class ActivitybarPart extends Part {
     }
     layout(width, height) {
         super.layout(width, height, 0, 0);
-        if (!this.compositeBar.value) {
+        if (!this.content) {
             return;
         }
-        const gutter = this.floatingGutter;
-        const contentWidth = Math.max(0, width - gutter);
-        const contentHeight = Math.max(0, height - gutter);
+        const {
+            top,
+            bottom
+        } = this.getFloatingGutters();
+        const contentWidth = Math.max(0, width - this.floatingHorizontalGutter);
+        const contentHeight = Math.max(0, height - top - bottom);
         const contentAreaSize = super.layoutContents(contentWidth, contentHeight).contentSize;
-        this.compositeBar.value.layout(contentWidth, contentAreaSize.height);
+        this.compositeBar.value?.layout(contentWidth, contentAreaSize.height + this.actionGap);
+    }
+    getFloatingGutters() {
+        if (!this.layoutService.isFloatingPanelsEnabled()) {
+            return {
+                top: 0,
+                bottom: 0
+            };
+        }
+        const margin = getFloatingPanelMargin(this.layoutService);
+        const outerMargin = getFloatingPanelOuterMargin(this.layoutService);
+        const border = ActivitybarPart_1.FLOATING_BORDER;
+        return {
+            top: border + (isFloatingTopEdgeExposed(this.layoutService, mainWindow) ? outerMargin : FLOATING_PANEL_INNER_MARGIN),
+            bottom: border + (this.layoutService.isModernUICompact() ? outerMargin : this.layoutService.isVisible(Parts.STATUSBAR_PART, mainWindow) ? margin : outerMargin)
+        };
     }
     toJSON() {
         return {
@@ -262,7 +364,7 @@ let ActivitybarPart = class ActivitybarPart extends Part {
         };
     }
 };
-ActivitybarPart = ActivitybarPart_1 = ( __decorate([( __param(2, IInstantiationService)), ( __param(3, IWorkbenchLayoutService)), ( __param(4, IThemeService)), ( __param(5, IStorageService)), ( __param(6, IConfigurationService))], ActivitybarPart));
+ActivitybarPart = ActivitybarPart_1 = ( __decorate([( __param(2, IInstantiationService)), ( __param(3, IWorkbenchLayoutService)), ( __param(4, IThemeService)), ( __param(5, IStorageService)), ( __param(6, IConfigurationService)), ( __param(7, IHostService))], ActivitybarPart));
 let ActivityBarCompositeBar = class ActivityBarCompositeBar extends PaneCompositeBar {
     constructor(
         location,
@@ -315,7 +417,7 @@ let ActivityBarCompositeBar = class ActivityBarCompositeBar extends PaneComposit
         if (menuBarVisibility === "compact" || menuBarVisibility === "hidden" || menuBarVisibility === "toggle") {
             actions.unshift(...[toAction({
                 id: "toggleMenuVisibility",
-                label: ( localize(3236, "Menu")),
+                label: ( localize(3459, "Menu")),
                 checked: menuBarVisibility === "compact",
                 run: () => this.configurationService.updateValue(
                     MenuSettings.MenuBarVisibility,
@@ -327,7 +429,7 @@ let ActivityBarCompositeBar = class ActivityBarCompositeBar extends PaneComposit
             if (isAncestor(e.target, this.menuBarContainer)) {
                 actions.unshift(...[toAction({
                     id: "hideCompactMenu",
-                    label: ( localize(3237, "Hide Menu")),
+                    label: ( localize(3460, "Hide Menu")),
                     run: () => this.configurationService.updateValue(MenuSettings.MenuBarVisibility, "toggle")
                 }), ( new Separator())]);
             }
@@ -355,7 +457,7 @@ let ActivityBarCompositeBar = class ActivityBarCompositeBar extends PaneComposit
         this.menuBarContainer = $(".menubar");
         const content = assertReturnsDefined(this.element);
         content.prepend(this.menuBarContainer);
-        this.menuBar.value = this._register(this.instantiationService.createInstance(CustomMenubarControl));
+        this.menuBar.value = this.instantiationService.createInstance(CustomMenubarControl);
         this.menuBar.value.create(this.menuBarContainer);
     }
     registerKeyboardNavigationListeners() {
@@ -413,7 +515,7 @@ let ActivityBarCompositeBar = class ActivityBarCompositeBar extends PaneComposit
         }
         if (this.globalCompositeBar) {
             if (this.options.orientation === ActionsOrientation.VERTICAL) {
-                height -= (this.globalCompositeBar.size() * this.options.overflowActionSize);
+                height -= this.globalCompositeBar.element.clientHeight;
             } else {
                 width -= this.globalCompositeBar.element.clientWidth;
             }
@@ -426,22 +528,22 @@ let ActivityBarCompositeBar = class ActivityBarCompositeBar extends PaneComposit
             renderShortTitle: true
         });
         const positionActions = getContextMenuActions(activityBarPositionMenu).secondary;
-        const actions = [( new SubmenuAction("workbench.action.activityBar.position", ( localize(3238, "Activity Bar Position")), positionActions))];
+        const actions = [( new SubmenuAction("workbench.action.activityBar.position", ( localize(3461, "Activity Bar Position")), positionActions))];
         const activityBarPosition = this.configurationService.getValue(LayoutSettings.ACTIVITY_BAR_LOCATION);
         if (activityBarPosition === ActivityBarPosition.DEFAULT) {
             const isCompact = this.configurationService.getValue(LayoutSettings.ACTIVITY_BAR_COMPACT) ?? false;
             const sizeActions = [toAction({
                 id: "workbench.action.activityBar.size.default",
-                label: ( localize(3239, "Default")),
+                label: ( localize(3462, "Default")),
                 checked: !isCompact,
                 run: () => this.configurationService.updateValue(LayoutSettings.ACTIVITY_BAR_COMPACT, false)
             }), toAction({
                 id: "workbench.action.activityBar.size.compact",
-                label: ( localize(3240, "Compact")),
+                label: ( localize(3463, "Compact")),
                 checked: isCompact,
                 run: () => this.configurationService.updateValue(LayoutSettings.ACTIVITY_BAR_COMPACT, true)
             })];
-            actions.push(( new SubmenuAction("workbench.action.activityBar.size", ( localize(3241, "Activity Bar Size")), sizeActions)));
+            actions.push(( new SubmenuAction("workbench.action.activityBar.size", ( localize(3464, "Activity Bar Size")), sizeActions)));
         }
         actions.push(toAction({
             id: ToggleSidebarPositionAction.ID,
@@ -464,10 +566,10 @@ registerAction2(class extends Action2 {
         super({
             id: "workbench.action.activityBarLocation.default",
             title: {
-                ...( localize2(3242, "Move Activity Bar to Side")),
-                mnemonicTitle: ( localize(3243, "&&Default"))
+                ...( localize2(3465, "Move Activity Bar to Side")),
+                mnemonicTitle: ( localize(3466, "&&Default"))
             },
-            shortTitle: ( localize(3244, "Default")),
+            shortTitle: ( localize(3467, "Default")),
             category: Categories.View,
             toggled: ( ContextKeyExpr.equals(
                 `config.${LayoutSettings.ACTIVITY_BAR_LOCATION}`,
@@ -495,10 +597,10 @@ registerAction2(class extends Action2 {
         super({
             id: "workbench.action.activityBarLocation.top",
             title: {
-                ...( localize2(3245, "Move Activity Bar to Top")),
-                mnemonicTitle: ( localize(3246, "&&Top"))
+                ...( localize2(3468, "Move Activity Bar to Top")),
+                mnemonicTitle: ( localize(3469, "&&Top"))
             },
-            shortTitle: ( localize(3247, "Top")),
+            shortTitle: ( localize(3470, "Top")),
             category: Categories.View,
             toggled: ( ContextKeyExpr.equals(`config.${LayoutSettings.ACTIVITY_BAR_LOCATION}`, ActivityBarPosition.TOP)),
             menu: [{
@@ -520,10 +622,10 @@ registerAction2(class extends Action2 {
         super({
             id: "workbench.action.activityBarLocation.bottom",
             title: {
-                ...( localize2(3248, "Move Activity Bar to Bottom")),
-                mnemonicTitle: ( localize(3249, "&&Bottom"))
+                ...( localize2(3471, "Move Activity Bar to Bottom")),
+                mnemonicTitle: ( localize(3472, "&&Bottom"))
             },
-            shortTitle: ( localize(3250, "Bottom")),
+            shortTitle: ( localize(3473, "Bottom")),
             category: Categories.View,
             toggled: ( ContextKeyExpr.equals(
                 `config.${LayoutSettings.ACTIVITY_BAR_LOCATION}`,
@@ -551,10 +653,10 @@ registerAction2(class extends Action2 {
         super({
             id: "workbench.action.activityBarLocation.hide",
             title: {
-                ...( localize2(3251, "Hide Activity Bar")),
-                mnemonicTitle: ( localize(3252, "&&Hidden"))
+                ...( localize2(3474, "Hide Activity Bar")),
+                mnemonicTitle: ( localize(3475, "&&Hidden"))
             },
-            shortTitle: ( localize(3253, "Hidden")),
+            shortTitle: ( localize(3476, "Hidden")),
             category: Categories.View,
             toggled: ( ContextKeyExpr.equals(
                 `config.${LayoutSettings.ACTIVITY_BAR_LOCATION}`,
@@ -579,14 +681,14 @@ registerAction2(class extends Action2 {
 });
 MenuRegistry.appendMenuItem(MenuId.MenubarAppearanceMenu, {
     submenu: MenuId.ActivityBarPositionMenu,
-    title: ( localize(3254, "Activity Bar Position")),
+    title: ( localize(3477, "Activity Bar Position")),
     group: "3_workbench_layout_move",
     order: 2,
     when: ( IsSessionsWindowContext.negate())
 });
 MenuRegistry.appendMenuItem(MenuId.ViewContainerTitleContext, {
     submenu: MenuId.ActivityBarPositionMenu,
-    title: ( localize(3254, "Activity Bar Position")),
+    title: ( localize(3477, "Activity Bar Position")),
     when: ( ContextKeyExpr.or(( ContextKeyExpr.equals(
         "viewContainerLocation",
         ViewContainerLocationToString(ViewContainerLocation.Sidebar)
@@ -601,7 +703,7 @@ registerAction2(class extends SwitchCompositeViewAction {
     constructor() {
         super({
             id: "workbench.action.previousSideBarView",
-            title: ( localize2(3255, "Previous Primary Side Bar View")),
+            title: ( localize2(3478, "Previous Primary Side Bar View")),
             category: Categories.View,
             f1: true
         }, ViewContainerLocation.Sidebar, -1);
@@ -611,7 +713,7 @@ registerAction2(class extends SwitchCompositeViewAction {
     constructor() {
         super({
             id: "workbench.action.nextSideBarView",
-            title: ( localize2(3256, "Next Primary Side Bar View")),
+            title: ( localize2(3479, "Next Primary Side Bar View")),
             category: Categories.View,
             f1: true
         }, ViewContainerLocation.Sidebar, 1);
@@ -621,7 +723,7 @@ registerAction2(class FocusActivityBarAction extends Action2 {
     constructor() {
         super({
             id: "workbench.action.focusActivityBar",
-            title: ( localize2(3257, "Focus Activity Bar")),
+            title: ( localize2(3480, "Focus Activity Bar")),
             category: Categories.View,
             f1: true
         });

package/vscode/src/vs/workbench/browser/parts/activitybar/media/activityaction.css

@@ -170,7 +170,7 @@
 }
 
 .monaco-workbench .activitybar.compact > .content :not(.monaco-menu) > .monaco-action-bar .badge .badge-content {
-	top: 17px;
+	top: 13px;
 	right: 6px;
 	min-width: 9px;
 	height: 13px;
@@ -197,7 +197,7 @@
 .monaco-workbench .activitybar.compact > .content :not(.monaco-menu) > .monaco-action-bar .profile-badge .profile-text-overlay {
 	font-size: 8px;
 	line-height: 8px;
-	top: 14px;
+	top: 10px;
 	right: 2px;
 	padding: 2px 2px;
 	border-radius: 6px;