sessions - tweaks to modal editor sidebar (persist width, allow to toggle visibility) (#306704)

* sessions - tweaks to modal editor sidebar

* respect sizes

* clamp width

* .

* yauzl

* layout

Author: bpasero

src/vs/platform/editor/common/editor.ts

@@ -361,13 +361,23 @@ export interface IModalEditorPartOptions {
 	 * opening and cannot currently be added, removed, or updated
 	 * after the modal editor is opened.
 	 */
-	readonly sidebar?: IModalEditorSidebarContent;
+	readonly sidebar?: IModalEditorSidebar;
 }
 
 /**
- * Content to render in the modal editor sidebar.
+ * Modal sidebar supports rendering custom content in a sidebar next to the main editor content.
  */
-export interface IModalEditorSidebarContent {
+export interface IModalEditorSidebar {
+
+	/**
+	 * Sidebar width set by the user via resizing, if any.
+	 */
+	readonly sidebarWidth?: number;
+
+	/**
+	 * Whether the sidebar is hidden.
+	 */
+	readonly sidebarHidden?: boolean;
 
 	/**
 	 * Render the sidebar content into the given container.

src/vs/sessions/contrib/changes/browser/changesView.ts

@@ -1569,7 +1569,6 @@ class ChangesTreeRenderer implements ICompressibleTreeRenderer<ChangesTreeElemen
 	}
 
 	renderElement(node: ITreeNode<ChangesTreeElement, void>, _index: number, templateData: IChangesTreeTemplate): void {
-		console.log('Rendering element:', node.element);
 		const element = node.element;
 		templateData.label.element.style.display = 'flex';
 

src/vs/workbench/browser/parts/editor/editorCommands.ts

@@ -27,7 +27,7 @@ import { ITelemetryService } from '../../../../platform/telemetry/common/telemet
 import { ActiveGroupEditorsByMostRecentlyUsedQuickAccess } from './editorQuickAccess.js';
 import { SideBySideEditor } from './sideBySideEditor.js';
 import { TextDiffEditor } from './textDiffEditor.js';
-import { ActiveEditorCanSplitInGroupContext, ActiveEditorGroupEmptyContext, ActiveEditorGroupLockedContext, ActiveEditorStickyContext, EditorPartModalContext, EditorPartModalMaximizedContext, EditorPartModalNavigationContext, IsSessionsWindowContext, MultipleEditorGroupsContext, SideBySideEditorActiveContext, TextCompareEditorActiveContext } from '../../../common/contextkeys.js';
+import { ActiveEditorCanSplitInGroupContext, ActiveEditorGroupEmptyContext, ActiveEditorGroupLockedContext, ActiveEditorStickyContext, EditorPartModalContext, EditorPartModalMaximizedContext, EditorPartModalNavigationContext, EditorPartModalSidebarContext, IsSessionsWindowContext, MultipleEditorGroupsContext, SideBySideEditorActiveContext, TextCompareEditorActiveContext } from '../../../common/contextkeys.js';
 import { CloseDirection, EditorInputCapabilities, EditorsOrder, IResourceDiffEditorInput, IUntitledTextResourceEditorInput, isEditorInputWithOptionsAndGroup } from '../../../common/editor.js';
 import { EditorInput } from '../../../common/editor/editorInput.js';
 import { SideBySideEditorInput } from '../../../common/editor/sideBySideEditorInput.js';
@@ -111,6 +111,7 @@ export const MOVE_MODAL_EDITOR_TO_WINDOW_COMMAND_ID = 'workbench.action.moveModa
 export const TOGGLE_MODAL_EDITOR_MAXIMIZED_COMMAND_ID = 'workbench.action.toggleModalEditorMaximized';
 export const NAVIGATE_MODAL_EDITOR_PREVIOUS_COMMAND_ID = 'workbench.action.navigateModalEditorPrevious';
 export const NAVIGATE_MODAL_EDITOR_NEXT_COMMAND_ID = 'workbench.action.navigateModalEditorNext';
+export const TOGGLE_MODAL_EDITOR_SIDEBAR_COMMAND_ID = 'workbench.action.toggleModalEditorSidebar';
 
 export const API_OPEN_EDITOR_COMMAND_ID = '_workbench.open';
 export const API_OPEN_DIFF_EDITOR_COMMAND_ID = '_workbench.diff';
@@ -1476,6 +1477,28 @@ function registerModalEditorCommands(): void {
 		}
 	});
 
+	registerAction2(class extends Action2 {
+		constructor() {
+			super({
+				id: TOGGLE_MODAL_EDITOR_SIDEBAR_COMMAND_ID,
+				title: localize2('toggleModalEditorSidebar', 'Toggle Modal Editor Sidebar'),
+				category: Categories.View,
+				f1: true,
+				precondition: ContextKeyExpr.and(EditorPartModalContext, EditorPartModalSidebarContext),
+			});
+		}
+		run(accessor: ServicesAccessor): void {
+			const editorGroupsService = accessor.get(IEditorGroupsService);
+
+			for (const part of editorGroupsService.parts) {
+				if (isModalEditorPart(part)) {
+					part.toggleSidebar();
+					break;
+				}
+			}
+		}
+	});
+
 	registerAction2(class extends Action2 {
 		constructor() {
 			super({

src/vs/workbench/browser/parts/editor/editorParts.ts

@@ -49,6 +49,8 @@ interface IModalEditorPartState {
 	readonly maximized: boolean;
 	readonly size?: { readonly width: number; readonly height: number };
 	readonly position?: { readonly left: number; readonly top: number };
+	readonly sidebarWidth?: number;
+	readonly sidebarHidden?: boolean;
 }
 
 interface IEditorPartsMemento {
@@ -87,6 +89,8 @@ export class EditorParts extends MultiWindowParts<EditorPart, IEditorPartsMement
 			this.modalEditorMaximized = modalState.maximized;
 			this.modalEditorSize = modalState.size;
 			this.modalEditorPosition = modalState.position;
+			this.modalEditorSidebarWidth = modalState.sidebarWidth;
+			this.modalEditorSidebarHidden = modalState.sidebarHidden;
 		}
 
 		this.mainPart = this._register(this.createMainEditorPart());
@@ -175,6 +179,8 @@ export class EditorParts extends MultiWindowParts<EditorPart, IEditorPartsMement
 	private modalEditorMaximized = false;
 	private modalEditorSize: IDimension | undefined;
 	private modalEditorPosition: { readonly left: number; readonly top: number } | undefined;
+	private modalEditorSidebarWidth: number | undefined;
+	private modalEditorSidebarHidden: boolean | undefined;
 
 	async createModalEditorPart(options?: IModalEditorPartOptions): Promise<IModalEditorPart> {
 
@@ -190,6 +196,11 @@ export class EditorParts extends MultiWindowParts<EditorPart, IEditorPartsMement
 			maximized: options?.maximized ?? this.modalEditorMaximized,
 			size: options?.size ?? this.modalEditorSize,
 			position: options?.position ?? this.modalEditorPosition,
+			sidebar: options?.sidebar ? {
+				...options.sidebar,
+				sidebarWidth: options.sidebar.sidebarWidth ?? this.modalEditorSidebarWidth,
+				sidebarHidden: options.sidebar.sidebarHidden ?? this.modalEditorSidebarHidden
+			} : undefined
 		});
 
 		// Keep instantiation service and reference to reuse
@@ -201,6 +212,10 @@ export class EditorParts extends MultiWindowParts<EditorPart, IEditorPartsMement
 			this.modalEditorMaximized = part.maximized;
 			this.modalEditorSize = part.size;
 			this.modalEditorPosition = part.position;
+			if (part.hasSidebar) {
+				this.modalEditorSidebarWidth = part.sidebarWidth;
+				this.modalEditorSidebarHidden = part.sidebarHidden || undefined;
+			}
 
 			this.modalPartInstantiationService = undefined;
 			this.modalEditorPart = undefined;
@@ -416,17 +431,23 @@ export class EditorParts extends MultiWindowParts<EditorPart, IEditorPartsMement
 			this.modalEditorMaximized = this.modalEditorPart.maximized;
 			this.modalEditorSize = this.modalEditorPart.size;
 			this.modalEditorPosition = this.modalEditorPart.position;
+			if (this.modalEditorPart.hasSidebar) {
+				this.modalEditorSidebarWidth = this.modalEditorPart.sidebarWidth;
+				this.modalEditorSidebarHidden = this.modalEditorPart.sidebarHidden || undefined;
+			}
 		}
 
 		// Only persist when there is meaningful state to restore.
 		// When all values are at their defaults (not maximized, no
 		// custom size or position), we delete the key to avoid
 		// storing unnecessary data.
-		if (this.modalEditorMaximized || this.modalEditorSize || this.modalEditorPosition) {
+		if (this.modalEditorMaximized || this.modalEditorSize || this.modalEditorPosition || this.modalEditorSidebarWidth || this.modalEditorSidebarHidden) {
 			this.profileMemento[EditorParts.MODAL_EDITOR_STATE_STORAGE_KEY] = {
 				maximized: this.modalEditorMaximized,
 				size: this.modalEditorSize ? { width: this.modalEditorSize.width, height: this.modalEditorSize.height } : undefined,
 				position: this.modalEditorPosition,
+				sidebarWidth: this.modalEditorSidebarWidth,
+				sidebarHidden: this.modalEditorSidebarHidden,
 			};
 		} else {
 			delete this.profileMemento[EditorParts.MODAL_EDITOR_STATE_STORAGE_KEY];

src/vs/workbench/browser/parts/editor/media/modalEditorPart.css

@@ -70,20 +70,21 @@
 	flex-direction: column;
 	overflow: hidden;
 	box-sizing: border-box;
+	padding: 8px;
 	background-color: var(--vscode-sideBar-background, var(--vscode-editor-background));
 	border-right: 1px solid var(--vscode-sideBarSectionHeader-border, var(--vscode-editorWidget-border, transparent));
 }
 
 .monaco-modal-editor-block .modal-editor-sidebar .monaco-tl-twistie.force-no-twistie {
-	width: 6px !important;
+	width: 10px !important;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 }
 
 /** Modal Editor Header */
 .monaco-modal-editor-block .modal-editor-header {
 	display: grid;
-	grid-template-columns: 1fr auto 1fr;
+	grid-template-columns: auto 1fr auto 1fr;
 	grid-column: 1 / -1;
 	align-items: center;
 	height: 32px;
@@ -93,9 +94,17 @@
 	background-color: var(--vscode-titleBar-activeBackground);
 	border-bottom: 1px solid var(--vscode-titleBar-border, transparent);
 
+	/* Modal Editor Sidebar Toggle */
+	.modal-editor-sidebar-toggle {
+		grid-column: 1;
+		display: flex;
+		align-items: center;
+		margin-right: 4px;
+	}
+
 	/* Modal Editor Title */
 	.modal-editor-title {
-		grid-column: 1;
+		grid-column: 2;
 		font-size: 12px;
 		font-weight: 500;
 		color: var(--vscode-titleBar-activeForeground);
@@ -115,7 +124,7 @@
 
 	/* Modal Editor Navigation */
 	.modal-editor-navigation {
-		grid-column: 2;
+		grid-column: 3;
 		display: flex;
 		align-items: center;
 		height: 22px;
@@ -159,7 +168,7 @@
 
 	/* Modal Editor Actions */
 	.modal-editor-action-container {
-		grid-column: 3;
+		grid-column: 4;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;