custom editor: open a diff-uri in a side-by-side editor

`CustomEditorOpener` is now able to open a diff-uri in a side-by-side editor,
which contains the corresponding `CustomEditor`s.

Fixes #9079

packages/core/src/browser/saveable.ts

@@ -21,7 +21,7 @@ import { MaybePromise } from '../common/types';
 import { Key } from './keyboard/keys';
 import { AbstractDialog } from './dialogs';
 import { nls } from '../common/nls';
-import { DisposableCollection, isObject } from '../common';
+import { Disposable, DisposableCollection, isObject } from '../common';
 import { BinaryBuffer } from '../common/buffer';
 
 export type AutoSaveMode = 'off' | 'afterDelay' | 'onFocusChange' | 'onWindowChange';
@@ -112,6 +112,70 @@ export class DelegatingSaveable implements Saveable {
 
 }
 
+export class CompositeSaveable implements Saveable {
+    protected isDirty = false;
+    protected readonly onDirtyChangedEmitter = new Emitter<void>();
+    protected readonly onContentChangedEmitter = new Emitter<void>();
+    protected readonly toDispose = new DisposableCollection(this.onDirtyChangedEmitter, this.onContentChangedEmitter);
+    protected readonly saveablesMap = new Map<Saveable, Disposable>();
+
+    get dirty(): boolean {
+        return this.isDirty;
+    }
+
+    get onDirtyChanged(): Event<void> {
+        return this.onDirtyChangedEmitter.event;
+    }
+
+    get onContentChanged(): Event<void> {
+        return this.onContentChangedEmitter.event;
+    }
+
+    async save(options?: SaveOptions): Promise<void> {
+        await Promise.all(this.saveables.map(saveable => saveable.save(options)));
+    }
+
+    get saveables(): readonly Saveable[] {
+        return Array.from(this.saveablesMap.keys());
+    }
+
+    add(saveable: Saveable): void {
+        if (this.saveablesMap.has(saveable)) {
+            return;
+        }
+        const toDispose = new DisposableCollection();
+        this.toDispose.push(toDispose);
+        this.saveablesMap.set(saveable, toDispose);
+        toDispose.push(Disposable.create(() => {
+            this.saveablesMap.delete(saveable);
+        }));
+        toDispose.push(saveable.onDirtyChanged(() => {
+            const wasDirty = this.isDirty;
+            this.isDirty = this.saveables.some(s => s.dirty);
+            if (this.isDirty !== wasDirty) {
+                this.onDirtyChangedEmitter.fire();
+            }
+        }));
+        toDispose.push(saveable.onContentChanged(() => {
+            this.onContentChangedEmitter.fire();
+        }));
+        if (saveable.dirty && !this.isDirty) {
+            this.isDirty = true;
+            this.onDirtyChangedEmitter.fire();
+        }
+    }
+
+    remove(saveable: Saveable): boolean {
+        const toDispose = this.saveablesMap.get(saveable);
+        toDispose?.dispose();
+        return !!toDispose;
+    }
+
+    dispose(): void {
+        this.toDispose.dispose();
+    }
+}
+
 export namespace Saveable {
     export interface RevertOptions {
         /**

packages/core/src/browser/style/index.css

@@ -349,3 +349,4 @@ button.secondary[disabled],
 @import "./progress-bar.css";
 @import "./breadcrumbs.css";
 @import "./tooltip.css";
+@import "./split-widget.css";

packages/core/src/browser/style/split-widget.css

@@ -0,0 +1,38 @@
+/********************************************************************************
+ * Copyright (C) 2024 1C-Soft LLC 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
+ ********************************************************************************/
+
+.theia-split-widget > .p-SplitPanel {
+  height: 100%;
+  width: 100%;
+  outline: none;
+}
+
+.theia-split-widget > .p-SplitPanel > .p-SplitPanel-child {
+  min-width: 50px;
+  min-height: var(--theia-content-line-height);
+}
+
+.theia-split-widget > .p-SplitPanel > .p-SplitPanel-handle {
+  box-sizing: border-box;
+}
+
+.theia-split-widget > .p-SplitPanel[data-orientation="horizontal"] > .p-SplitPanel-handle {
+  border-left: var(--theia-border-width) solid var(--theia-sideBarSectionHeader-border);
+}
+
+.theia-split-widget > .p-SplitPanel[data-orientation="vertical"] > .p-SplitPanel-handle {
+  border-top: var(--theia-border-width) solid var(--theia-sideBarSectionHeader-border);
+}

packages/core/src/browser/widgets/index.ts

@@ -18,3 +18,4 @@ export * from './widget';
 export * from './react-renderer';
 export * from './react-widget';
 export * from './extractable-widget';
+export * from './split-widget';

packages/core/src/browser/widgets/split-widget.ts

@@ -0,0 +1,163 @@
+// *****************************************************************************
+// Copyright (C) 2024 1C-Soft LLC 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
+// *****************************************************************************
+
+import { Emitter } from 'vscode-languageserver-protocol';
+import { ApplicationShell, StatefulWidget } from '../shell';
+import { BaseWidget, Message, PanelLayout, SplitPanel, Widget } from './widget';
+import { CompositeSaveable, Saveable, SaveableSource } from '../saveable';
+import { Navigatable } from '../navigatable-types';
+import { URI } from '../../common';
+
+/**
+ * A widget containing a number of panes in a split layout.
+ */
+export class SplitWidget extends BaseWidget implements ApplicationShell.TrackableWidgetProvider, SaveableSource, Navigatable, StatefulWidget {
+
+    protected readonly splitPanel: SplitPanel;
+
+    protected readonly onDidChangeTrackableWidgetsEmitter = new Emitter<Widget[]>();
+    readonly onDidChangeTrackableWidgets = this.onDidChangeTrackableWidgetsEmitter.event;
+
+    protected readonly compositeSaveable = new CompositeSaveable();
+
+    protected navigatable?: Navigatable;
+
+    constructor(options?: SplitPanel.IOptions & { navigatable?: Navigatable }) {
+        super();
+
+        this.toDispose.pushAll([this.onDidChangeTrackableWidgetsEmitter]);
+
+        this.addClass('theia-split-widget');
+
+        const layout = new PanelLayout();
+        this.layout = layout;
+        const that = this;
+        this.splitPanel = new class extends SplitPanel {
+
+            protected override onChildAdded(msg: Widget.ChildMessage): void {
+                super.onChildAdded(msg);
+                that.onPaneAdded(msg.child);
+            }
+
+            protected override onChildRemoved(msg: Widget.ChildMessage): void {
+                super.onChildRemoved(msg);
+                that.onPaneRemoved(msg.child);
+            }
+        }({
+            spacing: 1, // --theia-border-width
+            ...options
+        });
+        this.splitPanel.node.tabIndex = -1;
+        layout.addWidget(this.splitPanel);
+
+        this.navigatable = options?.navigatable;
+    }
+
+    get orientation(): SplitPanel.Orientation {
+        return this.splitPanel.orientation;
+    }
+
+    set orientation(value: SplitPanel.Orientation) {
+        this.splitPanel.orientation = value;
+    }
+
+    relativeSizes(): number[] {
+        return this.splitPanel.relativeSizes();
+    }
+
+    setRelativeSizes(sizes: number[]): void {
+        this.splitPanel.setRelativeSizes(sizes);
+    }
+
+    get handles(): readonly HTMLDivElement[] {
+        return this.splitPanel.handles;
+    }
+
+    get saveable(): Saveable {
+        return this.compositeSaveable;
+    }
+
+    getResourceUri(): URI | undefined {
+        return this.navigatable?.getResourceUri();
+    }
+
+    createMoveToUri(resourceUri: URI): URI | undefined {
+        return this.navigatable?.createMoveToUri(resourceUri);
+    }
+
+    storeState(): SplitWidget.State {
+        return { orientation: this.orientation, widgets: this.panes, relativeSizes: this.relativeSizes() };
+    }
+
+    restoreState(oldState: SplitWidget.State): void {
+        const { orientation, widgets, relativeSizes } = oldState;
+        if (orientation) {
+            this.orientation = orientation;
+        }
+        for (const widget of widgets) {
+            this.addPane(widget);
+        }
+        if (relativeSizes) {
+            this.setRelativeSizes(relativeSizes);
+        }
+    }
+
+    get panes(): readonly Widget[] {
+        return this.splitPanel.widgets;
+    }
+
+    getTrackableWidgets(): Widget[] {
+        return [...this.panes];
+    }
+
+    protected fireDidChangeTrackableWidgets(): void {
+        this.onDidChangeTrackableWidgetsEmitter.fire(this.getTrackableWidgets());
+    }
+
+    addPane(pane: Widget): void {
+        this.splitPanel.addWidget(pane);
+    }
+
+    insertPane(index: number, pane: Widget): void {
+        this.splitPanel.insertWidget(index, pane);
+    }
+
+    protected onPaneAdded(pane: Widget): void {
+        if (Saveable.isSource(pane)) {
+            this.compositeSaveable.add(pane.saveable);
+        }
+        this.fireDidChangeTrackableWidgets();
+    }
+
+    protected onPaneRemoved(pane: Widget): void {
+        if (Saveable.isSource(pane)) {
+            this.compositeSaveable.remove(pane.saveable);
+        }
+        this.fireDidChangeTrackableWidgets();
+    }
+
+    protected override onActivateRequest(msg: Message): void {
+        this.splitPanel.node.focus();
+    }
+}
+
+export namespace SplitWidget {
+    export interface State {
+        orientation?: SplitPanel.Orientation;
+        widgets: readonly Widget[]; // note: don't rename this property; it has special meaning for `ShellLayoutRestorer`
+        relativeSizes?: number[];
+    }
+}