@codingame/monaco-vscode-view-title-bar-service-override 36.2.6 → 37.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codingame/monaco-vscode-view-title-bar-service-override",
-  "version": "36.2.6",
+  "version": "37.1.0",
   "private": false,
   "description": "VSCode public API plugged on the monaco editor - view-title-bar service-override",
   "keywords": [],
@@ -15,7 +15,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@codingame/monaco-vscode-api": "36.2.6"
+    "@codingame/monaco-vscode-api": "37.1.0"
   },
   "main": "index.js",
   "module": "index.js",

package/vscode/src/vs/workbench/browser/parts/titlebar/commandCenterControl.js

@@ -19,10 +19,10 @@ import { IQuickInputService } from '@codingame/monaco-vscode-api/vscode/vs/platf
 import { IEditorGroupsService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/editor/common/editorGroupsService.service';
 import { IHoverService } from '@codingame/monaco-vscode-api/vscode/vs/platform/hover/browser/hover.service';
 import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/configuration/common/configuration.service';
+import { ChatAIDisabledSettingId } from '@codingame/monaco-vscode-api/vscode/vs/platform/chat/common/chatSettings';
 import { autorun } from '@codingame/monaco-vscode-api/vscode/vs/base/common/observableInternal/reactions/autorun';
 
 var CommandCenterCenterViewItem_1;
-const AI_DISABLED_SETTING = "chat.disableAIFeatures";
 const AGENT_STATUS_ENABLED_SETTING = "chat.agentsControl.enabled";
 let CommandCenterControl = class CommandCenterControl {
     constructor(windowTitle, hoverDelegate, instantiationService, quickInputService) {
@@ -154,7 +154,7 @@ let CommandCenterCenterViewItem = class CommandCenterCenterViewItem extends Base
                             container.classList.toggle("command-center-quick-pick");
                             container.role = "button";
                             container.setAttribute("aria-description", this.getTooltip());
-                            const aiFeaturesDisabled = that._configurationService.getValue(AI_DISABLED_SETTING) === true;
+                            const aiFeaturesDisabled = that._configurationService.getValue(ChatAIDisabledSettingId) === true;
                             const aiCustomizationsDisabled = that._configurationService.getValue("disableAICustomizations") === true || that._configurationService.getValue("workbench.disableAICustomizations") === true;
                             const forcedHidden = aiFeaturesDisabled && aiCustomizationsDisabled;
                             const agentControlValue = that._configurationService.getValue(AGENT_STATUS_ENABLED_SETTING);
@@ -208,13 +208,13 @@ let CommandCenterCenterViewItem = class CommandCenterCenterViewItem extends Base
                                 label = that._windowTitle.fileName ?? label;
                             }
                             if (!label) {
-                                label = ( localize(3926, "Search"));
+                                label = ( localize(4216, "Search"));
                             }
                             if (prefix) {
-                                label = ( localize(3927, "{0} {1}", prefix, label));
+                                label = ( localize(4217, "{0} {1}", prefix, label));
                             }
                             if (suffix) {
-                                label = ( localize(3928, "{0} {1}", label, suffix));
+                                label = ( localize(4218, "{0} {1}", label, suffix));
                             }
                             return label.replaceAll(/\r\n|\r|\n/g, "⏎");
                         }
@@ -235,13 +235,13 @@ let CommandCenterCenterViewItem = class CommandCenterCenterViewItem extends Base
     getTooltip() {
         const kb = this._keybindingService.lookupKeybinding(this.action.id)?.getLabel();
         const title = kb ? ( localize(
-            3929,
+            4219,
             "Search {0} ({1}) — {2}",
             this._windowTitle.workspaceName,
             kb,
             this._windowTitle.value
         )) : ( localize(
-            3930,
+            4220,
             "Search {0} — {1}",
             this._windowTitle.workspaceName,
             this._windowTitle.value
@@ -252,7 +252,7 @@ let CommandCenterCenterViewItem = class CommandCenterCenterViewItem extends Base
 CommandCenterCenterViewItem = CommandCenterCenterViewItem_1 = ( __decorate([( __param(3, IHoverService)), ( __param(4, IKeybindingService)), ( __param(5, IInstantiationService)), ( __param(6, IEditorGroupsService)), ( __param(7, IConfigurationService))], CommandCenterCenterViewItem));
 MenuRegistry.appendMenuItem(MenuId.CommandCenter, {
     submenu: MenuId.CommandCenterCenter,
-    title: ( localize(3931, "Command Center")),
+    title: ( localize(4221, "Command Center")),
     icon: Codicon.shield,
     order: 101
 });

package/vscode/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css

@@ -397,19 +397,35 @@
 	color: white;
 }
 
-/* Center-Adjacent Toolbar (e.g., update indicator) */
-.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .center-adjacent-toolbar-container {
+/* Optional title bar toolbars */
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .center-adjacent-toolbar-container,
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .update-toolbar-container {
 	z-index: 2500;
 	-webkit-app-region: no-drag;
+}
+
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .center-adjacent-toolbar-container {
 	margin-right: auto;
 }
 
-.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .center-adjacent-toolbar-container.has-no-actions {
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .update-toolbar-container {
+	margin-left: auto;
+	margin-right: var(--vscode-spacing-size40);
+}
+
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .center-adjacent-toolbar-container:not(.has-no-actions):not(.overflowing) + .update-toolbar-container,
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .update-toolbar-container:not(.has-no-actions):not(.overflowing) + .action-toolbar-container {
+	margin-left: 0;
+}
+
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .center-adjacent-toolbar-container.has-no-actions,
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .update-toolbar-container.has-no-actions {
 	display: none;
 }
 
 /* Hidden when the title bar is too narrow to fit it without pushing the window controls off-screen (#303222). */
-.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .center-adjacent-toolbar-container.overflowing {
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .center-adjacent-toolbar-container.overflowing,
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .update-toolbar-container.overflowing {
 	display: none;
 }
 
@@ -419,6 +435,7 @@
 	padding-right: 4px;
 	flex-grow: 0;
 	flex-shrink: 0;
+	color: var(--vscode-titleBar-activeForeground);
 	text-align: center;
 	position: relative;
 	z-index: 2500;
@@ -426,11 +443,17 @@
 	height: 100%;
 }
 
+.monaco-workbench .part.titlebar.inactive > .titlebar-container > .titlebar-right > .action-toolbar-container {
+	color: var(--vscode-titleBar-inactiveForeground);
+}
+
 .monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container {
 	margin-left: auto;
 }
 
-.monaco-workbench.mac:not(.web) .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container {
+.monaco-workbench.mac:not(.web) .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container,
+.monaco-workbench.mac:not(.web) .part.titlebar > .titlebar-container > .titlebar-right > .update-toolbar-container {
+	position: relative;
 	right: 8px;
 }
 
@@ -502,3 +525,17 @@
 	border-radius: 16px;
 	text-align: center;
 }
+
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content {
+	width: 12px;
+	padding: 0;
+	border-radius: var(--vscode-cornerRadius-circle);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-right > .action-toolbar-container .monaco-action-bar .action-item.icon .badge.compact.progress-badge .badge-content::before {
+	width: 12px;
+	height: 12px;
+}

package/vscode/src/vs/workbench/browser/parts/titlebar/titlebarPart.d.ts

@@ -65,6 +65,7 @@ export declare class BrowserTitleService extends MultiWindowParts<BrowserTitleba
     get windowTitle(): WindowTitle;
 }
 export declare class BrowserTitlebarPart extends Part implements ITitlebarPart {
+    private readonly targetWindow;
     private readonly editorGroupsContainer;
     private readonly contextMenuService;
     protected readonly configurationService: IConfigurationService;
@@ -91,6 +92,7 @@ export declare class BrowserTitlebarPart extends Part implements ITitlebarPart {
     private centerContent;
     private rightContent;
     protected readonly customMenubar: MutableDisposable<CustomMenubarControl>;
+    private readonly customMenubarDisposables;
     protected appIcon: HTMLElement | undefined;
     private appIconBadge;
     protected menubar?: HTMLElement;
@@ -101,6 +103,9 @@ export declare class BrowserTitlebarPart extends Part implements ITitlebarPart {
     private actionToolBarElement;
     private readonly centerAdjacentToolBarDisposable;
     private centerAdjacentToolBarElement;
+    private readonly updateToolBarDisposable;
+    private updateToolBarElement;
+    private titleBarToolBarOverflowScheduler;
     private globalToolbarMenu;
     private layoutToolbarMenu;
     private readonly globalToolbarMenuDisposables;
@@ -110,7 +115,7 @@ export declare class BrowserTitlebarPart extends Part implements ITitlebarPart {
     private readonly hoverDelegate;
     private readonly titleDisposables;
     private titleBarStyle;
-    private isInactive;
+    private activeWindowId;
     private readonly isAuxiliary;
     private isCompact;
     private readonly isCompactContextKey;
@@ -118,8 +123,6 @@ export declare class BrowserTitlebarPart extends Part implements ITitlebarPart {
     protected readonly instantiationService: IInstantiationService;
     constructor(id: string, targetWindow: CodeWindow, editorGroupsContainer: IEditorGroupsContainer, contextMenuService: IContextMenuService, configurationService: IConfigurationService, environmentService: IBrowserWorkbenchEnvironmentService, instantiationService: IInstantiationService, themeService: IThemeService, storageService: IStorageService, layoutService: IWorkbenchLayoutService, contextKeyService: IContextKeyService, hostService: IHostService, editorService: IEditorService, menuService: IMenuService, keybindingService: IKeybindingService, actionViewItemService: IActionViewItemService);
     private registerListeners;
-    private onBlur;
-    private onFocus;
     private onEditorPartConfigurationChange;
     protected onConfigurationChanged(event: IConfigurationChangeEvent): void;
     private recreateTitle;
@@ -149,11 +152,9 @@ export declare class BrowserTitlebarPart extends Part implements ITitlebarPart {
     get preventZoom(): boolean;
     layout(width: number, height: number): void;
     /**
-     * Hides the optional center-adjacent toolbar (e.g. the update indicator) when showing it would push the title bar
-     * content—most notably the trailing window controls—off-screen as the window is collapsed horizontally (#303222).
-     * Overflow is measured against actual rendered widths so the toolbar stays visible whenever it fits.
+     * Hides optional title bar toolbars when showing them would push the trailing window controls off-screen (#303222).
      */
-    private updateCenterAdjacentToolBarOverflow;
+    private updateTitleBarToolBarOverflow;
     private updateLayout;
     focus(): void;
     toJSON(): object;

package/vscode/src/vs/workbench/browser/parts/titlebar/titlebarPart.js

@@ -12,10 +12,10 @@ import { IConfigurationService } from '@codingame/monaco-vscode-api/vscode/vs/pl
 import { DisposableStore, MutableDisposable } from '@codingame/monaco-vscode-api/vscode/vs/base/common/lifecycle';
 import { IBrowserWorkbenchEnvironmentService } from '@codingame/monaco-vscode-api/vscode/vs/workbench/services/environment/browser/environmentService.service';
 import { IThemeService } from '@codingame/monaco-vscode-api/vscode/vs/platform/theme/common/themeService.service';
-import { TITLE_BAR_INACTIVE_BACKGROUND, TITLE_BAR_ACTIVE_BACKGROUND, WORKBENCH_BACKGROUND, TITLE_BAR_INACTIVE_FOREGROUND, TITLE_BAR_ACTIVE_FOREGROUND, TITLE_BAR_BORDER } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/theme';
+import { WORKBENCH_BACKGROUND, TITLE_BAR_INACTIVE_BACKGROUND, TITLE_BAR_ACTIVE_BACKGROUND, MODERN_UI_INACTIVE_SHELL_BACKGROUND, MODERN_UI_SHELL_BACKGROUND, TITLE_BAR_INACTIVE_FOREGROUND, TITLE_BAR_ACTIVE_FOREGROUND, TITLE_BAR_BORDER } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/theme';
 import { isWeb, isMacintosh, isWindows, isLinux, isNative, platformLocale } from '@codingame/monaco-vscode-api/vscode/vs/base/common/platform';
 import { Color } from '@codingame/monaco-vscode-api/vscode/vs/base/common/color';
-import { getActiveDocument, $, getWindow, getWindowId, append, prepend, addDisposableListener, EventType, EventHelper, isHTMLElement, isAncestor, reset, Dimension } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
+import { getActiveDocument, $, getWindow, append, AnimationFrameScheduler, prepend, addDisposableListener, EventType, EventHelper, isHTMLElement, isAncestor, reset, getWindowId, Dimension } from '@codingame/monaco-vscode-api/vscode/vs/base/browser/dom';
 import { CustomMenubarControl } from '@codingame/monaco-vscode-api/vscode/vs/workbench/browser/parts/titlebar/menubarControl';
 import { IInstantiationService } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/instantiation';
 import { Event, Emitter } from '@codingame/monaco-vscode-api/vscode/vs/base/common/event';
@@ -52,6 +52,7 @@ import { CommandsRegistry } from '@codingame/monaco-vscode-api/vscode/vs/platfor
 import { safeIntl } from '@codingame/monaco-vscode-api/vscode/vs/base/common/date';
 import { TitleBarVisibleContext, IsCompactTitleBarContext } from '@codingame/monaco-vscode-api/vscode/vs/workbench/common/contextkeys';
 import { ServiceCollection } from '@codingame/monaco-vscode-api/vscode/vs/platform/instantiation/common/serviceCollection';
+import { workbenchMenuCloseAnimation, WORKBENCH_MENU_MOTION_CLASS } from '@codingame/monaco-vscode-api/vscode/vs/workbench/browser/actions/menuMotion';
 import { AnchorAlignment } from '@codingame/monaco-vscode-api/vscode/vs/base/common/layout';
 
 var AuxiliaryBrowserTitlebarPart_1;
@@ -77,7 +78,7 @@ let BrowserTitleService = class BrowserTitleService extends MultiWindowParts {
             constructor() {
                 super({
                     id: `workbench.action.focusTitleBar`,
-                    title: ( localize2(3968, "Focus Title Bar")),
+                    title: ( localize2(4258, "Focus Title Bar")),
                     category: Categories.View,
                     f1: true,
                     precondition: TitleBarVisibleContext
@@ -202,6 +203,7 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
         super(id, {
             hasTitle: false
         }, themeService, storageService, layoutService);
+        this.targetWindow = targetWindow;
         this.editorGroupsContainer = editorGroupsContainer;
         this.contextMenuService = contextMenuService;
         this.configurationService = configurationService;
@@ -219,15 +221,16 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
         this._onWillDispose = this._register(( new Emitter()));
         this.onWillDispose = this._onWillDispose.event;
         this.customMenubar = this._register(( new MutableDisposable()));
+        this.customMenubarDisposables = this._register(( new DisposableStore()));
         this.actionToolBarDisposable = this._register(( new DisposableStore()));
         this.editorActionsChangeDisposable = this._register(( new DisposableStore()));
         this.centerAdjacentToolBarDisposable = this._register(( new DisposableStore()));
+        this.updateToolBarDisposable = this._register(( new DisposableStore()));
         this.globalToolbarMenuDisposables = this._register(( new DisposableStore()));
         this.editorToolbarMenuDisposables = this._register(( new DisposableStore()));
         this.layoutToolbarMenuDisposables = this._register(( new DisposableStore()));
         this.activityToolbarDisposables = this._register(( new DisposableStore()));
         this.titleDisposables = this._register(( new DisposableStore()));
-        this.isInactive = false;
         this.isCompact = false;
         const scopedEditorService = editorService.createScoped(editorGroupsContainer, this._store);
         this.instantiationService = this._register(instantiationService.createChild(( new ServiceCollection([IEditorService, scopedEditorService]))));
@@ -236,15 +239,14 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
         this.titleBarStyle = getTitleBarStyle(this.configurationService);
         this.windowTitle = this._register(this.instantiationService.createInstance(WindowTitle, targetWindow));
         this.hoverDelegate = this._register(createInstantHoverDelegate());
-        this.registerListeners(getWindowId(targetWindow));
+        this.registerListeners();
     }
-    registerListeners(targetWindowId) {
-        this._register(
-            this.hostService.onDidChangeFocus(focused => focused ? this.onFocus() : this.onBlur())
-        );
-        this._register(
-            this.hostService.onDidChangeActiveWindow(windowId => windowId === targetWindowId ? this.onFocus() : this.onBlur())
-        );
+    registerListeners() {
+        this._register(this.hostService.onDidChangeFocus(() => this.updateStyles()));
+        this._register(this.hostService.onDidChangeActiveWindow(windowId => {
+            this.activeWindowId = windowId;
+            this.updateStyles();
+        }));
         this._register(
             this.configurationService.onDidChangeConfiguration(e => this.onConfigurationChanged(e))
         );
@@ -252,14 +254,6 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
             this.editorGroupsContainer.onDidChangeEditorPartOptions(e => this.onEditorPartConfigurationChange(e))
         );
     }
-    onBlur() {
-        this.isInactive = true;
-        this.updateStyles();
-    }
-    onFocus() {
-        this.isInactive = false;
-        this.updateStyles();
-    }
     onEditorPartConfigurationChange(
         {
             oldPartOptions,
@@ -277,6 +271,9 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
         }
     }
     onConfigurationChanged(event) {
+        if (event.affectsConfiguration(LayoutSettings.MODERN_UI)) {
+            this.updateStyles();
+        }
         if (!this.isAuxiliary && !hasNativeMenu(this.configurationService, this.titleBarStyle) && (!isMacintosh || isWeb)) {
             if (event.affectsConfiguration(MenuSettings.MenuBarVisibility)) {
                 if (this.currentMenubarVisibility === "compact") {
@@ -318,16 +315,16 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
         if (this.menubar) {
             return;
         }
-        this.customMenubar.value = this.instantiationService.createInstance(CustomMenubarControl);
+        const customMenubar = this.instantiationService.createInstance(CustomMenubarControl);
+        this.customMenubar.value = customMenubar;
         this.menubar = append(this.leftContent, $("div.menubar"));
         this.menubar.setAttribute("role", "menubar");
-        this._register(
-            this.customMenubar.value.onVisibilityChange(e => this.onMenubarVisibilityChanged(e))
-        );
-        this.customMenubar.value.create(this.menubar);
+        this.customMenubarDisposables.add(customMenubar.onVisibilityChange(e => this.onMenubarVisibilityChanged(e)));
+        customMenubar.create(this.menubar);
     }
     uninstallMenubar() {
-        this.customMenubar.value = undefined;
+        this.customMenubarDisposables.clear();
+        this.customMenubar.clear();
         this.menubar?.remove();
         this.menubar = undefined;
         this.onMenubarVisibilityChanged(false);
@@ -349,6 +346,7 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
     createContentArea(parent) {
         this.element = parent;
         this.rootContainer = append(parent, $(".titlebar-container"));
+        this.titleBarToolBarOverflowScheduler = this._register(( new AnimationFrameScheduler(this.rootContainer, () => this.updateTitleBarToolBarOverflow())));
         this.leftContent = append(this.rootContainer, $(".titlebar-left"));
         this.centerContent = append(this.rootContainer, $(".titlebar-center"));
         this.rightContent = append(this.rootContainer, $(".titlebar-right"));
@@ -379,7 +377,25 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
                 }
             ));
             this.centerAdjacentToolBarDisposable.add(
-                centerAdjacentToolBar.onDidChangeMenuItems(() => this.updateCenterAdjacentToolBarOverflow())
+                centerAdjacentToolBar.onDidChangeMenuItems(() => this.titleBarToolBarOverflowScheduler.schedule())
+            );
+        }
+        {
+            const updateToolBarElement = append(this.rightContent, $("div.update-toolbar-container"));
+            this.updateToolBarElement = updateToolBarElement;
+            const updateToolBar = this.updateToolBarDisposable.add(
+                this.instantiationService.createInstance(MenuWorkbenchToolBar, updateToolBarElement, MenuId.TitleBarUpdate, {
+                    contextMenu: MenuId.TitleBarContext,
+                    hiddenItemStrategy: HiddenItemStrategy.NoHide,
+                    toolbarOptions: {
+                        primaryGroup: () => true
+                    },
+                    actionViewItemProvider: (action, options) => createActionViewItem(this.instantiationService, action, options),
+                    hoverDelegate: this.hoverDelegate
+                })
+            );
+            this.updateToolBarDisposable.add(
+                updateToolBar.onDidChangeMenuItems(() => this.titleBarToolBarOverflowScheduler.schedule())
             );
         }
         {
@@ -508,7 +524,7 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
             this.instantiationService.createInstance(WorkbenchToolBar, this.actionToolBarElement, {
                 contextMenu: MenuId.TitleBarContext,
                 orientation: ActionsOrientation.HORIZONTAL,
-                ariaLabel: ( localize(3969, "Title actions")),
+                ariaLabel: ( localize(4259, "Title actions")),
                 getKeyBinding: action => this.getKeybinding(action),
                 overflowBehavior: {
                     maxItems: 12,
@@ -519,6 +535,8 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
                     ]
                 },
                 anchorAlignmentProvider: () => AnchorAlignment.RIGHT,
+                dropdownMenuClassName: WORKBENCH_MENU_MOTION_CLASS,
+                dropdownMenuCloseAnimation: workbenchMenuCloseAnimation,
                 telemetrySource: "titlePart",
                 highlightToggledItems: this.isAuxiliary,
                 actionViewItemProvider: (action, options) => this.actionViewItemProvider(action, options),
@@ -641,18 +659,26 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
     updateStyles() {
         super.updateStyles();
         if (this.element) {
-            if (this.isInactive) {
+            const isWindowActive = this.activeWindowId === undefined ? this.targetWindow.document.hasFocus() : this.activeWindowId === this.targetWindow.vscodeWindowId;
+            const isInactive = !this.hostService.hasFocus || !isWindowActive;
+            if (isInactive) {
                 this.element.classList.add("inactive");
             } else {
                 this.element.classList.remove("inactive");
             }
+            const makeOpaque = (color, theme) => {
+                return color.isOpaque() ? color : color.makeOpaque(WORKBENCH_BACKGROUND(theme));
+            };
             const titleBackground = this.getColor(
-                this.isInactive ? TITLE_BAR_INACTIVE_BACKGROUND : TITLE_BAR_ACTIVE_BACKGROUND,
-                (color, theme) => {
-                    return color.isOpaque() ? color : color.makeOpaque(WORKBENCH_BACKGROUND(theme));
-                }
-            ) || "";
+                isInactive ? TITLE_BAR_INACTIVE_BACKGROUND : TITLE_BAR_ACTIVE_BACKGROUND,
+                makeOpaque
+            ) || this.getColor(TITLE_BAR_ACTIVE_BACKGROUND, makeOpaque) || "";
+            const shellBackground = this.getColor(
+                isInactive ? MODERN_UI_INACTIVE_SHELL_BACKGROUND : MODERN_UI_SHELL_BACKGROUND,
+                makeOpaque
+            ) || this.getColor(MODERN_UI_SHELL_BACKGROUND, makeOpaque) || titleBackground;
             this.element.style.backgroundColor = titleBackground;
+            this.layoutService.getContainer(getWindow(this.element)).style.setProperty("--modern-ui-shell-background", shellBackground);
             if (this.appIconBadge) {
                 this.appIconBadge.style.backgroundColor = titleBackground;
             }
@@ -661,11 +687,9 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
             } else {
                 this.element.classList.remove("light");
             }
-            const titleForeground = this.getColor(
-                this.isInactive ? TITLE_BAR_INACTIVE_FOREGROUND : TITLE_BAR_ACTIVE_FOREGROUND
-            );
+            const titleForeground = this.getColor(isInactive ? TITLE_BAR_INACTIVE_FOREGROUND : TITLE_BAR_ACTIVE_FOREGROUND);
             this.element.style.color = titleForeground || "";
-            const titleBorder = this.getColor(TITLE_BAR_BORDER);
+            const titleBorder = !this.isAuxiliary && this.configurationService.getValue(LayoutSettings.MODERN_UI) === true ? undefined : this.getColor(TITLE_BAR_BORDER);
             this.element.style.borderBottom = titleBorder ? `1px solid ${titleBorder}` : "";
         }
     }
@@ -712,20 +736,20 @@ let BrowserTitlebarPart = class BrowserTitlebarPart extends Part {
     layout(width, height) {
         this.updateLayout(( new Dimension(width, height)));
         super.layoutContents(width, height);
-        this.updateCenterAdjacentToolBarOverflow();
-    }
-    updateCenterAdjacentToolBarOverflow() {
-        const element = this.centerAdjacentToolBarElement;
-        if (!element) {
+        this.titleBarToolBarOverflowScheduler.schedule();
+    }
+    updateTitleBarToolBarOverflow() {
+        const centerAdjacentToolBarElement = this.centerAdjacentToolBarElement?.classList.contains("has-no-actions") ? undefined : this.centerAdjacentToolBarElement;
+        const updateToolBarElement = this.updateToolBarElement?.classList.contains("has-no-actions") ? undefined : this.updateToolBarElement;
+        this.centerAdjacentToolBarElement?.classList.remove("overflowing");
+        this.updateToolBarElement?.classList.remove("overflowing");
+        if (this.rootContainer.scrollWidth <= this.rootContainer.clientWidth) {
             return;
         }
-        if (element.classList.contains("has-no-actions")) {
-            element.classList.remove("overflowing");
-            return;
+        centerAdjacentToolBarElement?.classList.add("overflowing");
+        if (this.rootContainer.scrollWidth > this.rootContainer.clientWidth) {
+            updateToolBarElement?.classList.add("overflowing");
         }
-        element.classList.remove("overflowing");
-        const overflows = this.rootContainer.scrollWidth > this.rootContainer.clientWidth;
-        element.classList.toggle("overflowing", overflows);
     }
     updateLayout(dimension) {
         this.lastLayoutDimensions = dimension;