@theia/core 1.61.0-next.8 → 1.61.1

package/lib/node/index.d.ts

@@ -3,5 +3,6 @@ export * from './debug';
 export * from '../common/file-uri';
 export * from './messaging';
 export * from './cli';
+export * from './setting-service';
 export { FileSystemLocking } from './filesystem-locking';
 //# sourceMappingURL=index.d.ts.map

package/lib/node/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/node/index.ts"],"names":[],"mappings":"AAgBA,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/node/index.ts"],"names":[],"mappings":"AAgBA,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,OAAO,CAAC;AACtB,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/node/index.js

@@ -22,6 +22,7 @@ tslib_1.__exportStar(require("./debug"), exports);
 tslib_1.__exportStar(require("../common/file-uri"), exports);
 tslib_1.__exportStar(require("./messaging"), exports);
 tslib_1.__exportStar(require("./cli"), exports);
+tslib_1.__exportStar(require("./setting-service"), exports);
 var filesystem_locking_1 = require("./filesystem-locking");
 Object.defineProperty(exports, "FileSystemLocking", { enumerable: true, get: function () { return filesystem_locking_1.FileSystemLocking; } });
 //# sourceMappingURL=index.js.map

package/lib/node/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/node/index.ts"],"names":[],"mappings":";AAAA,gFAAgF;AAChF,yCAAyC;AACzC,EAAE;AACF,2EAA2E;AAC3E,mEAAmE;AACnE,wCAAwC;AACxC,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,6EAA6E;AAC7E,yDAAyD;AACzD,uDAAuD;AACvD,EAAE;AACF,gFAAgF;AAChF,gFAAgF;;;;AAEhF,gEAAsC;AACtC,kDAAwB;AACxB,6DAAmC;AACnC,sDAA4B;AAC5B,gDAAsB;AACtB,2DAAyD;AAAhD,uHAAA,iBAAiB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/node/index.ts"],"names":[],"mappings":";AAAA,gFAAgF;AAChF,yCAAyC;AACzC,EAAE;AACF,2EAA2E;AAC3E,mEAAmE;AACnE,wCAAwC;AACxC,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,6EAA6E;AAC7E,yDAAyD;AACzD,uDAAuD;AACvD,EAAE;AACF,gFAAgF;AAChF,gFAAgF;;;;AAEhF,gEAAsC;AACtC,kDAAwB;AACxB,6DAAmC;AACnC,sDAA4B;AAC5B,gDAAsB;AACtB,4DAAkC;AAClC,2DAAyD;AAAhD,uHAAA,iBAAiB,OAAA"}

package/lib/node/setting-service.d.ts

@@ -0,0 +1,20 @@
+import { EnvVariablesServer } from '../common/env-variables';
+import { Deferred } from '../common/promise-util';
+export declare const SettingService: unique symbol;
+/**
+ * A service providing a simple user-level, persistent key-value store on the back end
+ */
+export interface SettingService {
+    set(key: string, value: string): Promise<void>;
+    get(key: string): Promise<string | undefined>;
+}
+export declare class SettingServiceImpl implements SettingService {
+    protected readonly envVarServer: EnvVariablesServer;
+    protected readonly ready: Deferred<void>;
+    protected values: Record<string, string>;
+    protected init(): void;
+    set(key: string, value: string): Promise<void>;
+    writeFile(): Promise<void>;
+    get(key: string): Promise<string | undefined>;
+}
+//# sourceMappingURL=setting-service.d.ts.map

package/lib/node/setting-service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setting-service.d.ts","sourceRoot":"","sources":["../../src/node/setting-service.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAIlD,eAAO,MAAM,cAAc,eAA2B,CAAC;AAEvD;;GAEG;AACH,MAAM,WAAW,cAAc;IAC3B,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACjD;AAED,qBACa,kBAAmB,YAAW,cAAc;IAGrD,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAE,kBAAkB,CAAC;IAEpD,SAAS,CAAC,QAAQ,CAAC,KAAK,iBAAwB;IAChD,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAG9C,SAAS,CAAC,IAAI,IAAI,IAAI;IAkBhB,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAM9C,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC;IAO1B,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,SAAS,CAAC;CAItD"}

package/lib/node/setting-service.js

@@ -0,0 +1,80 @@
+"use strict";
+// *****************************************************************************
+// Copyright (C) 2025 STMicroelectronics and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingServiceImpl = exports.SettingService = void 0;
+const tslib_1 = require("tslib");
+const inversify_1 = require("inversify");
+const env_variables_1 = require("../common/env-variables");
+const promise_util_1 = require("../common/promise-util");
+const fs_1 = require("fs");
+const common_1 = require("../common");
+exports.SettingService = Symbol('SettingService');
+let SettingServiceImpl = class SettingServiceImpl {
+    constructor() {
+        this.ready = new promise_util_1.Deferred();
+        this.values = {};
+    }
+    init() {
+        const asyncInit = async () => {
+            const configDir = new common_1.URI(await this.envVarServer.getConfigDirUri());
+            const path = configDir.resolve('backend-settings.json').path.fsPath();
+            try {
+                const contents = await fs_1.promises.readFile(path, {
+                    encoding: 'utf-8'
+                });
+                this.values = JSON.parse(contents);
+            }
+            catch (e) {
+                console.log(e);
+            }
+            finally {
+                this.ready.resolve();
+            }
+        };
+        asyncInit();
+    }
+    async set(key, value) {
+        await this.ready.promise;
+        this.values[key] = value;
+        await this.writeFile();
+    }
+    async writeFile() {
+        const configDir = new common_1.URI(await this.envVarServer.getConfigDirUri());
+        const path = configDir.resolve('backend-settings.json').path.fsPath();
+        const values = JSON.stringify(this.values);
+        await fs_1.promises.writeFile(path, values);
+    }
+    async get(key) {
+        await this.ready.promise;
+        return this.values[key];
+    }
+};
+exports.SettingServiceImpl = SettingServiceImpl;
+tslib_1.__decorate([
+    (0, inversify_1.inject)(env_variables_1.EnvVariablesServer),
+    tslib_1.__metadata("design:type", Object)
+], SettingServiceImpl.prototype, "envVarServer", void 0);
+tslib_1.__decorate([
+    (0, inversify_1.postConstruct)(),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", []),
+    tslib_1.__metadata("design:returntype", void 0)
+], SettingServiceImpl.prototype, "init", null);
+exports.SettingServiceImpl = SettingServiceImpl = tslib_1.__decorate([
+    (0, inversify_1.injectable)()
+], SettingServiceImpl);
+//# sourceMappingURL=setting-service.js.map

package/lib/node/setting-service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setting-service.js","sourceRoot":"","sources":["../../src/node/setting-service.ts"],"names":[],"mappings":";AAAA,gFAAgF;AAChF,oDAAoD;AACpD,EAAE;AACF,2EAA2E;AAC3E,mEAAmE;AACnE,wCAAwC;AACxC,EAAE;AACF,4EAA4E;AAC5E,8EAA8E;AAC9E,6EAA6E;AAC7E,yDAAyD;AACzD,uDAAuD;AACvD,EAAE;AACF,gFAAgF;AAChF,gFAAgF;;;;AAEhF,yCAA8D;AAC9D,2DAA6D;AAC7D,yDAAkD;AAClD,2BAAoC;AACpC,sCAAgC;AAEnB,QAAA,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAWhD,IAAM,kBAAkB,GAAxB,MAAM,kBAAkB;IAAxB;QAKgB,UAAK,GAAG,IAAI,uBAAQ,EAAQ,CAAC;QACtC,WAAM,GAA2B,EAAE,CAAC;IAsClD,CAAC;IAnCa,IAAI;QACV,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YACzB,MAAM,SAAS,GAAG,IAAI,YAAG,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC,CAAC;YACrE,MAAM,IAAI,GAAW,SAAS,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YAC9E,IAAI,CAAC;gBACD,MAAM,QAAQ,GAAG,MAAM,aAAE,CAAC,QAAQ,CAAC,IAAI,EAAE;oBACrC,QAAQ,EAAE,OAAO;iBACpB,CAAC,CAAC;gBACH,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;YACvC,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACT,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACnB,CAAC;oBAAS,CAAC;gBACP,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;YACzB,CAAC;QACL,CAAC,CAAC;QACF,SAAS,EAAE,CAAC;IAChB,CAAC;IAED,KAAK,CAAC,GAAG,CAAC,GAAW,EAAE,KAAa;QAChC,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QACzB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACzB,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;IAC3B,CAAC;IAED,KAAK,CAAC,SAAS;QACX,MAAM,SAAS,GAAG,IAAI,YAAG,CAAC,MAAM,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAC,CAAC;QACrE,MAAM,IAAI,GAAW,SAAS,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QAC9E,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3C,MAAM,aAAE,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IACrC,CAAC;IAED,KAAK,CAAC,GAAG,CAAC,GAAW;QACjB,MAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;QACzB,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;CACJ,CAAA;AA5CY,gDAAkB;AAGR;IADlB,IAAA,kBAAM,EAAC,kCAAkB,CAAC;;wDACyB;AAM1C;IADT,IAAA,yBAAa,GAAE;;;;8CAiBf;6BAzBQ,kBAAkB;IAD9B,IAAA,sBAAU,GAAE;GACA,kBAAkB,CA4C9B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theia/core",
-  "version": "1.61.0-next.8+436de3c45",
+  "version": "1.61.1",
   "description": "Theia is a cloud & desktop IDE framework implemented in TypeScript.",
   "main": "lib/common/index.js",
   "typings": "lib/common/index.d.ts",
@@ -17,11 +17,10 @@
     "@lumino/virtualdom": "^2.0.2",
     "@lumino/widgets": "2.5.0",
     "@parcel/watcher": "^2.5.0",
-    "@theia/application-package": "1.61.0-next.8+436de3c45",
-    "@theia/request": "1.61.0-next.8+436de3c45",
+    "@theia/application-package": "1.61.1",
+    "@theia/request": "1.61.1",
     "@types/body-parser": "^1.16.4",
     "@types/cookie": "^0.3.3",
-    "@types/dompurify": "^2.2.2",
     "@types/express": "^4.17.21",
     "@types/fs-extra": "^4.0.2",
     "@types/lodash.debounce": "4.0.3",
@@ -39,9 +38,8 @@
     "async-mutex": "^0.4.0",
     "body-parser": "^1.17.2",
     "cookie": "^0.4.0",
-    "dompurify": "^2.2.9",
+    "dompurify": "^3.2.4",
     "drivelist": "^12.0.2",
-    "es6-promise": "^4.2.4",
     "express": "^4.21.0",
     "fast-json-stable-stringify": "^2.1.0",
     "file-icons-js": "~1.0.3",
@@ -210,13 +208,13 @@
     "watch": "theiaext watch"
   },
   "devDependencies": {
-    "@theia/ext-scripts": "1.60.0",
-    "@theia/re-exports": "1.60.0",
+    "@theia/ext-scripts": "1.61.1",
+    "@theia/re-exports": "1.61.1",
     "minimist": "^1.2.0",
     "nodejs-file-downloader": "4.13.0"
   },
   "nyc": {
     "extends": "../../configs/nyc.json"
   },
-  "gitHead": "436de3c4571e0000fdcbbf2e94ddfc992f38ccb2"
+  "gitHead": "5ea3cf6111aded4ccf1d5ccaf67b04e6588a6dea"
 }

package/src/browser/dialogs.ts

@@ -241,10 +241,17 @@ export abstract class AbstractDialog<T> extends BaseWidget {
         this.toDisposeOnDetach.push(DialogOverlayService.get().push(this));
     }
 
-    protected preventTabbingOutsideDialog(): Disposable {
-        const nonInertSiblings = Array.from(this.node.ownerDocument.body.children).filter(child => child !== this.node && !(child.hasAttribute('inert')));
-        nonInertSiblings.forEach(child => child.setAttribute('inert', ''));
-        return Disposable.create(() => nonInertSiblings.forEach(child => child.removeAttribute('inert')));
+    /**
+     * This prevents tabbing outside the dialog by marking elements as inert, i.e., non-clickable and non-focussable.
+     *
+     * @param elements the elements for which we disable tabbing. By default all elements within the body element are considered.
+     * Please note that this may also include other popups such as the suggestion overlay, the notification center or quick picks.
+     * @returns a disposable that will restore the previous tabbing behavior
+     */
+    protected preventTabbingOutsideDialog(elements = Array.from(this.node.ownerDocument.body.children)): Disposable {
+        const nonInertElements = elements.filter(child => child !== this.node && !(child.hasAttribute('inert')));
+        nonInertElements.forEach(child => child.setAttribute('inert', ''));
+        return Disposable.create(() => nonInertElements.forEach(child => child.removeAttribute('inert')));
     }
 
     protected handleEscape(event: KeyboardEvent): boolean | void {

package/src/browser/frontend-application-module.ts

@@ -209,7 +209,7 @@ export const frontendApplicationModule = new ContainerModule((bind, _unbind, _is
         return new TabBarRenderer(contextMenuRenderer, tabBarDecoratorService, iconThemeService,
             selectionService, commandService, corePreferences, hoverService, contextKeyService);
     });
-    bind(TheiaDockPanel.Factory).toFactory(({ container }) => (options?: DockPanel.IOptions) => {
+    bind(TheiaDockPanel.Factory).toFactory(({ container }) => (options?: DockPanel.IOptions, maximizeCallback?: (area: TheiaDockPanel) => void) => {
         const corePreferences = container.get<CorePreferences>(CorePreferences);
         return new TheiaDockPanel(options, corePreferences);
     });

package/src/browser/preload/i18n-preload-contribution.ts

@@ -39,7 +39,7 @@ export class I18nPreloadContribution implements PreloadContribution {
             });
         }
         let locale = nls.locale ?? nls.defaultLocale;
-        if (nls.locale && nls.locale !== nls.defaultLocale) {
+        if (nls.locale) {
             const localization = await this.localizationServer.loadLocalization(locale);
             if (localization.languagePack) {
                 nls.localization = localization;

package/src/browser/shell/application-shell.ts

@@ -34,7 +34,7 @@ import { FrontendApplicationStateService } from '../frontend-application-state';
 import { TabBarToolbarRegistry, TabBarToolbarFactory } from './tab-bar-toolbar';
 import { ContextKeyService } from '../context-key-service';
 import { Emitter } from '../../common/event';
-import { waitForRevealed, waitForClosed, PINNED_CLASS } from '../widgets';
+import { waitForRevealed, waitForClosed, PINNED_CLASS, UnsafeWidgetUtilities } from '../widgets';
 import { CorePreferences } from '../core-preferences';
 import { BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
 import { Deferred } from '../../common/promise-util';
@@ -45,17 +45,18 @@ import URI from '../../common/uri';
 import { OpenerService } from '../opener-service';
 import { PreviewableWidget } from '../widgets/previewable-widget';
 import { WindowService } from '../window/window-service';
+import { TheiaSplitPanel } from './theia-split-panel';
 
 /** The class name added to ApplicationShell instances. */
-const APPLICATION_SHELL_CLASS = 'theia-ApplicationShell';
+export const APPLICATION_SHELL_CLASS = 'theia-ApplicationShell';
 /** The class name added to the main and bottom area panels. */
-const MAIN_BOTTOM_AREA_CLASS = 'theia-app-centers';
+export const MAIN_BOTTOM_AREA_CLASS = 'theia-app-centers';
 /** Status bar entry identifier for the bottom panel toggle button. */
-const BOTTOM_PANEL_TOGGLE_ID = 'bottom-panel-toggle';
+export const BOTTOM_PANEL_TOGGLE_ID = 'bottom-panel-toggle';
 /** The class name added to the main area panel. */
-const MAIN_AREA_CLASS = 'theia-app-main';
+export const MAIN_AREA_CLASS = 'theia-app-main';
 /** The class name added to the bottom area panel. */
-const BOTTOM_AREA_CLASS = 'theia-app-bottom';
+export const BOTTOM_AREA_CLASS = 'theia-app-bottom';
 
 export type ApplicationShellLayoutVersion =
     /** layout versioning is introduced, unversioned layout are not compatible */
@@ -85,10 +86,6 @@ export interface DockPanelRendererFactory {
  */
 @injectable()
 export class DockPanelRenderer implements DockLayout.IRenderer {
-
-    @inject(TheiaDockPanel.Factory)
-    protected readonly dockPanelFactory: TheiaDockPanel.Factory;
-
     readonly tabBarClasses: string[] = [];
 
     private readonly onDidCreateTabBarEmitter = new Emitter<TabBar<Widget>>();
@@ -175,6 +172,7 @@ interface WidgetDragState {
     leaveTimeout?: number;
 }
 
+export const MAXIMIZED_CLASS = 'theia-maximized';
 /**
  * The application shell manages the top-level widgets of the application. Use this class to
  * add, remove, or activate a widget.
@@ -269,6 +267,8 @@ export class ApplicationShell extends Widget {
     protected initializedDeferred = new Deferred<void>();
     initialized = this.initializedDeferred.promise;
 
+    protected readonly maximizedElement: HTMLElement;
+
     /**
      * Construct a new application shell.
      */
@@ -286,6 +286,16 @@ export class ApplicationShell extends Widget {
     ) {
         super(options as Widget.IOptions);
 
+        this.maximizedElement = this.node.ownerDocument.createElement('div');
+        this.maximizedElement.style.position = 'fixed';
+        this.maximizedElement.style.display = 'none';
+        this.maximizedElement.style.left = '0px';
+        this.maximizedElement.style.bottom = '0px';
+        this.maximizedElement.style.right = '0px';
+        this.maximizedElement.style.background = 'var(--theia-editor-background)';
+        this.maximizedElement.style.zIndex = '2000';
+        this.node.ownerDocument.body.appendChild(this.maximizedElement);
+
         // Merge the user-defined application options with the default options
         this.options = {
             bottomPanel: {
@@ -301,6 +311,13 @@ export class ApplicationShell extends Widget {
                 ...options?.rightPanel || {}
             }
         };
+        if (corePreferences) {
+            corePreferences.onPreferenceChanged(preference => {
+                if (preference.preferenceName === 'window.menuBarVisibility' && (preference.newValue === 'visible' || preference.oldValue === 'visible')) {
+                    this.handleMenuBarVisibility(preference.newValue);
+                }
+            });
+        }
     }
 
     @postConstruct()
@@ -561,7 +578,7 @@ export class ApplicationShell extends Widget {
             mode: 'multiple-document',
             renderer,
             spacing: 0
-        });
+        }, area => this.doToggleMaximized(area));
         dockPanel.id = MAIN_AREA_ID;
         dockPanel.widgetAdded.connect((_, widget) => this.fireDidAddWidget(widget));
         dockPanel.widgetRemoved.connect((_, widget) => this.fireDidRemoveWidget(widget));
@@ -658,7 +675,7 @@ export class ApplicationShell extends Widget {
             mode: 'multiple-document',
             renderer,
             spacing: 0
-        });
+        }, area => this.doToggleMaximized(area));
         dockPanel.id = BOTTOM_AREA_ID;
         dockPanel.widgetAdded.connect((sender, widget) => {
             this.refreshBottomPanelToggleButton();
@@ -731,7 +748,7 @@ export class ApplicationShell extends Widget {
             [1, 0],
             { orientation: 'vertical', spacing: 0 }
         );
-        const panelForBottomArea = new SplitPanel({ layout: bottomSplitLayout });
+        const panelForBottomArea = new TheiaSplitPanel({ layout: bottomSplitLayout });
         panelForBottomArea.id = 'theia-bottom-split-panel';
 
         const leftRightSplitLayout = this.createSplitLayout(
@@ -739,7 +756,7 @@ export class ApplicationShell extends Widget {
             [0, 1, 0],
             { orientation: 'horizontal', spacing: 0 }
         );
-        const panelForSideAreas = new SplitPanel({ layout: leftRightSplitLayout });
+        const panelForSideAreas = new TheiaSplitPanel({ layout: leftRightSplitLayout });
         panelForSideAreas.id = 'theia-left-right-split-panel';
 
         return this.createBoxLayout(
@@ -1178,9 +1195,6 @@ export class ApplicationShell extends Widget {
                 w.title.className = w.title.className.replace(' theia-mod-active', '');
                 w = w.parent;
             }
-            // Reset the z-index to the default
-            // eslint-disable-next-line no-null/no-null
-            this.setZIndex(oldValue.node, null);
         }
         if (newValue) {
             let w: Widget | null = newValue;
@@ -1203,11 +1217,6 @@ export class ApplicationShell extends Widget {
                 // if widget was undefined, we wouldn't have gotten a panel back before
                 panel.markAsCurrent(widget!.title);
             }
-            // Add checks to ensure that the 'sash' for left panel is displayed correctly
-            if (newValue.node.className === 'lm-Widget theia-view-container lm-DockPanel-widget') {
-                // Set the z-index so elements with `position: fixed` contained in the active widget are displayed correctly
-                this.setZIndex(newValue.node, '1');
-            }
 
             // activate another widget if an active widget will be closed
             const onCloseRequest = newValue['onCloseRequest'];
@@ -1237,17 +1246,6 @@ export class ApplicationShell extends Widget {
         this.onDidChangeActiveWidgetEmitter.fire(args);
     }
 
-    /**
-     * Set the z-index of the given element and its ancestors to the value `z`.
-     */
-    private setZIndex(element: HTMLElement, z: string | null): void {
-        element.style.zIndex = z || '';
-        const parent = element.parentElement;
-        if (parent && parent !== this.node) {
-            this.setZIndex(parent, z);
-        }
-    }
-
     /**
      * Track the given widget so it is considered in the `current` and `active` state of the shell.
      */
@@ -2118,11 +2116,75 @@ export class ApplicationShell extends Widget {
     toggleMaximized(widget: Widget | undefined = this.currentWidget): void {
         const area = widget && this.getAreaPanelFor(widget);
         if (area instanceof TheiaDockPanel && (area === this.mainPanel || area === this.bottomPanel)) {
-            area.toggleMaximized();
+            this.doToggleMaximized(area);
             this.revealWidget(widget!.id);
         }
     }
 
+    protected handleMenuBarVisibility(newValue: string): void {
+        if (newValue === 'visible') {
+            const topRect = this.topPanel.node.getBoundingClientRect();
+            this.maximizedElement.style.top = `${topRect.bottom}px`;
+        } else {
+            this.maximizedElement.style.removeProperty('top');
+        }
+    }
+
+    protected readonly onDidToggleMaximizedEmitter = new Emitter<Widget>();
+    readonly onDidToggleMaximized = this.onDidToggleMaximizedEmitter.event;
+
+    protected unmaximize: (() => void) | undefined;
+    doToggleMaximized(area: TheiaDockPanel): void {
+        if (this.unmaximize) {
+            this.unmaximize();
+            this.unmaximize = undefined;
+            return;
+        }
+
+        const removedListener = () => {
+            if (!area.widgets().next().value) {
+                this.doToggleMaximized(area);
+            }
+        };
+
+        const parent = area.parent as SplitPanel;
+        const layout = area.parent?.layout as SplitLayout;
+        const sizes = layout.relativeSizes().slice();
+        const stretch = SplitPanel.getStretch(area);
+        const index = parent.widgets.indexOf(area);
+        parent.layout?.removeWidget(area);
+
+        // eslint-disable-next-line no-null/no-null
+        this.maximizedElement.style.display = 'block';
+        area.addClass(MAXIMIZED_CLASS);
+        const topRect = this.topPanel.node.getBoundingClientRect();
+        UnsafeWidgetUtilities.attach(area, this.maximizedElement);
+        this.maximizedElement.style.top = `${topRect.bottom}px`;
+        area.fit();
+        const observer = new ResizeObserver(entries => {
+            area.fit();
+        });
+        observer.observe(this.maximizedElement);
+
+        this.unmaximize = () => {
+            observer.unobserve(this.maximizedElement);
+            observer.disconnect();
+            this.maximizedElement.style.display = 'none';
+            area.removeClass(MAXIMIZED_CLASS);
+            if (area.isAttached) {
+                UnsafeWidgetUtilities.detach(area);
+            }
+            parent?.insertWidget(index, area);
+            SplitPanel.setStretch(area, stretch);
+            layout.setRelativeSizes(sizes);
+            parent.fit();
+            this.onDidToggleMaximizedEmitter.fire(area);
+            area.widgetRemoved.disconnect(removedListener);
+        };
+
+        area.widgetRemoved.connect(removedListener);
+        this.onDidToggleMaximizedEmitter.fire(area);
+    }
 }
 
 /**

package/src/browser/shell/index.ts

@@ -21,3 +21,4 @@ export * from './sidebar-menu-widget';
 export * from './split-panels';
 export * from './tab-bars';
 export * from './view-contribution';
+export * from './theia-split-panel';

package/src/browser/shell/tab-bars.ts

@@ -871,7 +871,7 @@ export class ScrollableTabBar extends TabBar<Widget> {
             window.requestAnimationFrame(() => {
                 const tab = this.contentNode.children[index] as HTMLElement;
                 if (tab && this.isVisible) {
-                    const parent = this.contentNode;
+                    const parent = this.contentContainer;
                     if (this.orientation === 'horizontal') {
                         const scroll = parent.scrollLeft;
                         const left = tab.offsetLeft;
@@ -958,6 +958,7 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
         this.node.appendChild(this.breadcrumbsContainer);
 
         this.toolbar = this.tabBarToolbarFactory();
+        this.toDispose.push(this.toolbar);
         this.toDispose.push(this.tabBarToolbarRegistry.onDidChange(() => this.update()));
         this.toDispose.push(this.breadcrumbsRenderer);
 
@@ -1009,7 +1010,7 @@ export class ToolbarAwareTabBar extends ScrollableTabBar {
 
     protected override onBeforeDetach(msg: Message): void {
         if (this.toolbar && this.toolbar.isAttached) {
-            this.toolbar.dispose();
+            Widget.detach(this.toolbar);
         }
         super.onBeforeDetach(msg);
     }

package/src/browser/shell/theia-dock-panel.ts

@@ -15,17 +15,14 @@
 // *****************************************************************************
 
 import { find, toArray } from '@lumino/algorithm';
-import { TabBar, Widget, DockPanel, Title, DockLayout } from '@lumino/widgets';
+import { TabBar, Widget, DockPanel, Title } from '@lumino/widgets';
 import { Signal } from '@lumino/signaling';
 import { Disposable, DisposableCollection } from '../../common/disposable';
-import { UnsafeWidgetUtilities } from '../widgets';
 import { CorePreferences } from '../core-preferences';
 import { Emitter, Event, environment } from '../../common';
 import { ToolbarAwareTabBar } from './tab-bars';
 
-export const MAXIMIZED_CLASS = 'theia-maximized';
 export const ACTIVE_TABBAR_CLASS = 'theia-tabBar-active';
-const VISIBLE_MENU_MAXIMIZED_CLASS = 'theia-visible-menu-maximized';
 
 export const MAIN_AREA_ID = 'theia-main-content-panel';
 export const BOTTOM_AREA_ID = 'theia-bottom-content-panel';
@@ -49,15 +46,15 @@ export class TheiaDockPanel extends DockPanel {
      */
     readonly widgetRemoved = new Signal<this, Widget>(this);
 
-    protected readonly onDidToggleMaximizedEmitter = new Emitter<Widget>();
-    readonly onDidToggleMaximized = this.onDidToggleMaximizedEmitter.event;
     protected readonly onDidChangeCurrentEmitter = new Emitter<Title<Widget> | undefined>();
+
     get onDidChangeCurrent(): Event<Title<Widget> | undefined> {
         return this.onDidChangeCurrentEmitter.event;
     }
 
     constructor(options?: DockPanel.IOptions,
-        protected readonly preferences?: CorePreferences
+        protected readonly preferences?: CorePreferences,
+        protected readonly maximizeCallback?: (area: TheiaDockPanel) => void
     ) {
         super(options);
         this['_onCurrentChanged'] = (sender: TabBar<Widget>, args: TabBar.ICurrentChangedArgs<Widget>) => {
@@ -77,12 +74,11 @@ export class TheiaDockPanel extends DockPanel {
             this.markAsCurrent(args.title);
             super['_onTabActivateRequested'](sender, args);
         };
-        if (preferences) {
-            preferences.onPreferenceChanged(preference => {
-                if (!this.isElectron() && preference.preferenceName === 'window.menuBarVisibility' && (preference.newValue === 'visible' || preference.oldValue === 'visible')) {
-                    this.handleMenuBarVisibility(preference.newValue);
-                }
-            });
+    }
+
+    toggleMaximized(): void {
+        if (this.maximizeCallback) {
+            this.maximizeCallback(this);
         }
     }
 
@@ -90,19 +86,6 @@ export class TheiaDockPanel extends DockPanel {
         return environment.electron.is();
     }
 
-    protected handleMenuBarVisibility(newValue: string): void {
-        const areaContainer = this.node.parentElement;
-        const maximizedElement = this.getMaximizedElement();
-
-        if (areaContainer === maximizedElement) {
-            if (newValue === 'visible') {
-                this.addClass(VISIBLE_MENU_MAXIMIZED_CLASS);
-            } else {
-                this.removeClass(VISIBLE_MENU_MAXIMIZED_CLASS);
-            }
-        }
-    }
-
     protected _currentTitle: Title<Widget> | undefined;
     get currentTitle(): Title<Widget> | undefined {
         return this._currentTitle;
@@ -195,75 +178,11 @@ export class TheiaDockPanel extends DockPanel {
         }
         return undefined;
     }
-
-    protected readonly toDisposeOnToggleMaximized = new DisposableCollection();
-    toggleMaximized(): void {
-        const areaContainer = this.node.parentElement;
-        if (!areaContainer) {
-            return;
-        }
-        const maximizedElement = this.getMaximizedElement();
-        if (areaContainer === maximizedElement) {
-            this.toDisposeOnToggleMaximized.dispose();
-            return;
-        }
-        if (this.isAttached) {
-            UnsafeWidgetUtilities.detach(this);
-        }
-        maximizedElement.style.display = 'block';
-        this.addClass(MAXIMIZED_CLASS);
-        const preference = this.preferences?.get('window.menuBarVisibility');
-        if (!this.isElectron() && preference === 'visible') {
-            this.addClass(VISIBLE_MENU_MAXIMIZED_CLASS);
-        }
-        UnsafeWidgetUtilities.attach(this, maximizedElement);
-        this.fit();
-        this.onDidToggleMaximizedEmitter.fire(this);
-        this.toDisposeOnToggleMaximized.push(Disposable.create(() => {
-            maximizedElement.style.display = 'none';
-            this.removeClass(MAXIMIZED_CLASS);
-            this.onDidToggleMaximizedEmitter.fire(this);
-            if (!this.isElectron()) {
-                this.removeClass(VISIBLE_MENU_MAXIMIZED_CLASS);
-            }
-            if (this.isAttached) {
-                UnsafeWidgetUtilities.detach(this);
-            }
-            UnsafeWidgetUtilities.attach(this, areaContainer);
-            this.fit();
-        }));
-
-        const layout = this.layout;
-        if (layout instanceof DockLayout) {
-            const onResize = layout['onResize'];
-            layout['onResize'] = () => onResize.bind(layout)(Widget.ResizeMessage.UnknownSize);
-            this.toDisposeOnToggleMaximized.push(Disposable.create(() => layout['onResize'] = onResize));
-        }
-
-        const removedListener = () => {
-            if (!this.widgets().next()) {
-                this.toDisposeOnToggleMaximized.dispose();
-            }
-        };
-        this.widgetRemoved.connect(removedListener);
-        this.toDisposeOnToggleMaximized.push(Disposable.create(() => this.widgetRemoved.disconnect(removedListener)));
-    }
-
-    protected maximizedElement: HTMLElement | undefined;
-    protected getMaximizedElement(): HTMLElement {
-        if (!this.maximizedElement) {
-            this.maximizedElement = document.createElement('div');
-            this.maximizedElement.style.display = 'none';
-            document.body.appendChild(this.maximizedElement);
-        }
-        return this.maximizedElement;
-    }
-
 }
 export namespace TheiaDockPanel {
     export const Factory = Symbol('TheiaDockPanel#Factory');
     export interface Factory {
-        (options?: DockPanel.IOptions): TheiaDockPanel;
+        (options?: DockPanel.IOptions, maximizeCallback?: (area: TheiaDockPanel) => void): TheiaDockPanel;
     }
 
     export interface AddOptions extends DockPanel.IAddOptions {