Improve naming and allow renaming of memory view instances

media/options-widget.css

@@ -14,13 +14,47 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+.memory-options-widget {
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+}
+
+.memory-options-widget .title-container {
+  display: flex;
+  align-items: center;
+}
+
+.memory-options-widget .title-container h1 {
+  flex-grow: 1;
+  font-size: 1.3em;
+  margin: 8px 0 4px;
+}
+
+.memory-options-widget .title-container input {
+  margin: 5px 0 0;
+  flex-grow: 1;
+}
+
+.memory-options-widget .edit-label-toggle {
+  position: absolute;
+  right: 24px;
+  top: 8px;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.memory-options-widget .title-container:hover .edit-label-toggle {
+  opacity: 1;
+}
+
 .core-options {
   display: flex;
   flex-direction: row;
   align-items: end;
   margin: 6px 0;
   flex-wrap: wrap;
   border-bottom: 1px solid var(--vscode-widget-border);
+  border-top: 1px solid var(--vscode-widget-border);
 }
 
 .form-options {

src/common/messaging.ts

@@ -26,6 +26,7 @@ export const readyType: NotificationType<void> = { method: 'ready' };
 export const logMessageType: RequestType<string, void> = { method: 'logMessage' };
 export const setMemoryViewSettingsType: NotificationType<Partial<MemoryViewSettings>> = { method: 'setMemoryViewSettings' };
 export const resetMemoryViewSettingsType: NotificationType<void> = { method: 'resetMemoryViewSettings' };
+export const setTitleType: NotificationType<string> = { method: 'setTitle' };
 export const setOptionsType: RequestType<Partial<DebugProtocol.ReadMemoryArguments | undefined>, void> = { method: 'setOptions' };
 export const readMemoryType: RequestType<DebugProtocol.ReadMemoryArguments, MemoryReadResult> = { method: 'readMemory' };
 export const writeMemoryType: RequestType<DebugProtocol.WriteMemoryArguments, MemoryWriteResult> = { method: 'writeMemory' };

src/plugin/memory-webview-main.ts

@@ -30,6 +30,7 @@ import {
     getVariables,
     setMemoryViewSettingsType,
     resetMemoryViewSettingsType,
+    setTitleType,
 } from '../common/messaging';
 import { MemoryProvider } from './memory-provider';
 import { outputChannelLogger } from './logger';
@@ -62,6 +63,8 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
     protected messenger: Messenger;
     protected refreshOnStop: RefreshEnum;
 
+    protected panelIndices: number = 1;
+
     public constructor(protected extensionUri: vscode.Uri, protected memoryProvider: MemoryProvider) {
         this.messenger = new Messenger();
 
@@ -125,7 +128,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
         };
 
         if (!panel) {
-            panel = vscode.window.createWebviewPanel(MemoryWebview.ViewType, 'Memory Inspector', vscode.ViewColumn.Active, options);
+            panel = vscode.window.createWebviewPanel(MemoryWebview.ViewType, `Memory ${this.panelIndices++}`, vscode.ViewColumn.Active, options);
         } else {
             panel.webview.options = options;
         }
@@ -135,10 +138,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
 
         // Sets up an event listener to listen for messages passed from the webview view context
         // and executes code based on the message that is received
-        const webviewParticipant = this.setWebviewMessageListener(panel, initialMemory);
-
-        // initialize with configuration
-        this.setInitialSettings(webviewParticipant);
+        this.setWebviewMessageListener(panel, initialMemory);
     }
 
     protected getRefresh(): RefreshEnum {
@@ -176,11 +176,12 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
         `;
     }
 
-    protected setWebviewMessageListener(panel: vscode.WebviewPanel, options?: Partial<DebugProtocol.ReadMemoryArguments>): WebviewIdMessageParticipant {
+    protected setWebviewMessageListener(panel: vscode.WebviewPanel, options?: Partial<DebugProtocol.ReadMemoryArguments>): void {
         const participant = this.messenger.registerWebviewPanel(panel);
 
         const disposables = [
             this.messenger.onNotification(readyType, () => {
+                this.setInitialSettings(participant, panel.title);
                 this.refresh(participant, options);
             }, { sender: participant }),
             this.messenger.onRequest(setOptionsType, o => {
@@ -190,7 +191,8 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
             this.messenger.onRequest(readMemoryType, request => this.readMemory(request), { sender: participant }),
             this.messenger.onRequest(writeMemoryType, request => this.writeMemory(request), { sender: participant }),
             this.messenger.onRequest(getVariables, request => this.getVariables(request), { sender: participant }),
-            this.messenger.onNotification(resetMemoryViewSettingsType, () => this.setInitialSettings(participant), { sender: participant }),
+            this.messenger.onNotification(resetMemoryViewSettingsType, () => this.setInitialSettings(participant, panel.title), { sender: participant }),
+            this.messenger.onNotification(setTitleType, title => { panel.title = title; }, { sender: participant }),
 
             this.memoryProvider.onDidStopDebug(() => {
                 if (this.refreshOnStop === RefreshEnum.on) {
@@ -204,27 +206,25 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
             }
         });
         panel.onDidDispose(() => disposables.forEach(disposable => disposable.dispose()));
-
-        return participant;
-    }
-
-    protected setInitialSettings(webviewParticipant: WebviewIdMessageParticipant): void {
-        this.messenger.sendNotification(setMemoryViewSettingsType, webviewParticipant, this.getMemoryViewSettings());
     }
 
     protected async refresh(participant: WebviewIdMessageParticipant, options?: Partial<DebugProtocol.ReadMemoryArguments>): Promise<void> {
         this.messenger.sendRequest(setOptionsType, participant, options);
     }
 
-    protected getMemoryViewSettings(): MemoryViewSettings {
+    protected setInitialSettings(webviewParticipant: WebviewIdMessageParticipant, title: string): void {
+        this.messenger.sendNotification(setMemoryViewSettingsType, webviewParticipant, this.getMemoryViewSettings(title));
+    }
+
+    protected getMemoryViewSettings(title: string): MemoryViewSettings {
         const memoryInspectorConfiguration = vscode.workspace.getConfiguration(manifest.PACKAGE_NAME);
         const wordsPerGroup = memoryInspectorConfiguration.get<number>(manifest.CONFIG_WORDS_PER_GROUP, manifest.DEFAULT_WORDS_PER_GROUP);
         const groupsPerRow = memoryInspectorConfiguration.get<number>(manifest.CONFIG_GROUPS_PER_ROW, manifest.DEFAULT_GROUPS_PER_ROW);
         const scrollingBehavior = memoryInspectorConfiguration.get<ScrollingBehavior>(manifest.CONFIG_SCROLLING_BEHAVIOR, manifest.DEFAULT_SCROLLING_BEHAVIOR);
         const visibleColumns = CONFIGURABLE_COLUMNS
             .filter(column => vscode.workspace.getConfiguration(manifest.PACKAGE_NAME).get<boolean>(column, false))
             .map(columnId => columnId.replace('columns.', ''));
-        return { wordsPerGroup, groupsPerRow, scrollingBehavior, visibleColumns };
+        return { title, wordsPerGroup, groupsPerRow, scrollingBehavior, visibleColumns };
     }
 
     protected async readMemory(request: DebugProtocol.ReadMemoryArguments): Promise<MemoryReadResult> {

src/webview/components/memory-widget.tsx

@@ -23,6 +23,7 @@ import { OptionsWidget } from './options-widget';
 
 interface MemoryWidgetProps extends MemoryDisplayConfiguration {
     memory?: Memory;
+    title: string;
     decorations: Decoration[];
     columns: ColumnStatus[];
     memoryReference: string;
@@ -34,6 +35,7 @@ interface MemoryWidgetProps extends MemoryDisplayConfiguration {
     toggleColumn(id: string, active: boolean): void;
     updateMemoryDisplayConfiguration: (memoryArguments: Partial<MemoryDisplayConfiguration>) => void;
     resetMemoryDisplayConfiguration: () => void;
+    updateTitle: (title: string) => void;
     fetchMemory(partialOptions?: Partial<DebugProtocol.ReadMemoryArguments>): Promise<void>
 }
 
@@ -56,6 +58,8 @@ export class MemoryWidget extends React.Component<MemoryWidgetProps, MemoryWidge
     override render(): React.ReactNode {
         return (<div className='flex flex-column h-full'>
             <OptionsWidget
+                title={this.props.title}
+                updateTitle={this.props.updateTitle}
                 columnOptions={this.props.columns}
                 memoryReference={this.props.memoryReference}
                 offset={this.props.offset}

src/webview/components/options-widget.tsx

@@ -21,7 +21,7 @@ import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
 import { InputText } from 'primereact/inputtext';
 import { OverlayPanel } from 'primereact/overlaypanel';
 import { classNames } from 'primereact/utils';
-import React, { KeyboardEvent, MouseEventHandler } from 'react';
+import React, { FocusEventHandler, KeyboardEvent, KeyboardEventHandler, MouseEventHandler } from 'react';
 import { TableRenderOptions } from '../columns/column-contribution-service';
 import {
     SerializedTableRenderOptions,
@@ -31,15 +31,21 @@ import { MultiSelectWithLabel } from './multi-select';
 export interface OptionsWidgetProps
     extends Omit<TableRenderOptions, 'scrollingBehavior'>,
     Required<DebugProtocol.ReadMemoryArguments> {
+    title: string;
     updateRenderOptions: (options: Partial<SerializedTableRenderOptions>) => void;
     resetRenderOptions: () => void;
+    updateTitle: (title: string) => void;
     updateMemoryArguments: (
         memoryArguments: Partial<DebugProtocol.ReadMemoryArguments>
     ) => void;
     refreshMemory: () => void;
     toggleColumn(id: string, isVisible: boolean): void;
 }
 
+interface OptionsWidgetState {
+    isTitleEditing: boolean;
+}
+
 const enum InputId {
     Address = 'address',
     Offset = 'offset',
@@ -57,9 +63,10 @@ interface OptionsForm {
 const allowedBytesPerGroup = [1, 2, 4, 8, 16];
 const allowedGroupsPerRow = [1, 2, 4, 8, 16, 32];
 
-export class OptionsWidget extends React.Component<OptionsWidgetProps, {}> {
+export class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWidgetState> {
     protected formConfig: FormikConfig<OptionsForm>;
     protected extendedOptions = React.createRef<OverlayPanel>();
+    protected labelEditInput = React.createRef<HTMLInputElement>();
 
     protected get optionsFormValues(): OptionsForm {
         return {
@@ -80,6 +87,7 @@ export class OptionsWidget extends React.Component<OptionsWidgetProps, {}> {
                 this.props.refreshMemory();
             },
         };
+        this.state = { isTitleEditing: false };
     }
 
     protected validate = (values: OptionsForm) => {
@@ -117,11 +125,43 @@ export class OptionsWidget extends React.Component<OptionsWidgetProps, {}> {
         return errors;
     };
 
+    componentDidUpdate(_: Readonly<OptionsWidgetProps>, prevState: Readonly<OptionsWidgetState>): void {
+        if (!prevState.isTitleEditing && this.state.isTitleEditing) {
+            this.labelEditInput.current?.focus();
+            this.labelEditInput.current?.select();
+        }
+    }
+
     override render(): React.ReactNode {
         this.formConfig.initialValues = this.optionsFormValues;
+        const isLabelEditing = this.state.isTitleEditing;
 
         return (
             <div className='memory-options-widget px-4'>
+                <div className='title-container'>
+                    <InputText
+                        ref={this.labelEditInput}
+                        type='text'
+                        onKeyDown={this.handleTitleEditingKeyDown}
+                        onBlur={this.confirmEditedTitle}
+                        style={{ display: isLabelEditing ? 'block' : 'none' }}
+                    />
+                    {!isLabelEditing && (
+                        <h1 onDoubleClick={this.enableTitleEditing}>{this.props.title}</h1>
+                    )}
+                    {!isLabelEditing && (
+                        <Button
+                            type='button'
+                            className='edit-label-toggle'
+                            icon='codicon codicon-edit'
+                            onClick={this.enableTitleEditing}
+                            title='Edit view title'
+                            aria-label='Edit view title'
+                            rounded
+                            aria-haspopup
+                        />
+                    )}
+                </div>
                 <div className='core-options py-2'>
                     <Formik {...this.formConfig}>
                         {formik => (
@@ -327,4 +367,34 @@ export class OptionsWidget extends React.Component<OptionsWidgetProps, {}> {
 
     protected handleResetAdvancedOptions: MouseEventHandler<HTMLButtonElement> | undefined = () => this.props.resetRenderOptions();
 
+    protected enableTitleEditing = () => this.doEnableTitleEditing();
+    protected doEnableTitleEditing(): void {
+        if (this.labelEditInput.current) {
+            this.labelEditInput.current.value = this.props.title;
+        }
+        this.setState({ isTitleEditing: true });
+    }
+
+    protected disableTitleEditing = () => this.doDisableTitleEditing();
+    protected doDisableTitleEditing(): void {
+        this.setState({ isTitleEditing: false });
+    }
+
+    protected handleTitleEditingKeyDown: KeyboardEventHandler<HTMLInputElement> | undefined = event => this.doHandleTitleEditingKeyDown(event);
+    protected doHandleTitleEditingKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
+        if (event.key === 'Enter' && this.labelEditInput.current) {
+            this.doConfirmEditedTitle();
+        } else if (event.key === 'Escape') {
+            this.disableTitleEditing();
+        }
+    }
+
+    protected confirmEditedTitle: FocusEventHandler<HTMLInputElement> | undefined = () => this.doConfirmEditedTitle();
+    protected doConfirmEditedTitle(): void {
+        if (this.state.isTitleEditing && this.labelEditInput.current) {
+            this.props.updateTitle(this.labelEditInput.current.value.trim());
+            this.disableTitleEditing();
+        }
+    }
+
 }

src/webview/memory-webview-view.tsx

@@ -22,6 +22,7 @@ import {
     logMessageType,
     setOptionsType,
     readMemoryType,
+    setTitleType,
     setMemoryViewSettingsType,
     resetMemoryViewSettingsType,
 } from '../common/messaging';
@@ -39,6 +40,7 @@ import { PrimeReactProvider } from 'primereact/api';
 import 'primeflex/primeflex.css';
 
 export interface MemoryAppState extends MemoryState, MemoryDisplayConfiguration {
+    title: string;
     decorations: Decoration[];
     columns: ColumnStatus[];
 }
@@ -59,6 +61,7 @@ class App extends React.Component<{}, MemoryAppState> {
         columnContributionService.register(new AsciiColumn());
         decorationService.register(variableDecorator);
         this.state = {
+            title: 'Memory',
             memory: undefined,
             memoryReference: '',
             offset: 0,
@@ -78,7 +81,11 @@ class App extends React.Component<{}, MemoryAppState> {
                 const configurable = column.configurable;
                 this.toggleColumn(id, !configurable || !!config.visibleColumns?.includes(id));
             }
-            this.setState(prevState => ({ ...prevState, ...(config as MemoryDisplayConfiguration) }));
+            this.setState(prevState => ({
+                ...prevState,
+                ...(config as MemoryDisplayConfiguration),
+                title: config.title ?? prevState.title,
+            }));
         });
         messenger.sendNotification(readyType, HOST_EXTENSION, undefined);
     }
@@ -92,9 +99,11 @@ class App extends React.Component<{}, MemoryAppState> {
                 memoryReference={this.state.memoryReference}
                 offset={this.state.offset ?? 0}
                 count={this.state.count}
+                title={this.state.title}
                 updateMemoryArguments={this.updateMemoryState}
                 updateMemoryDisplayConfiguration={this.updateMemoryDisplayConfiguration}
                 resetMemoryDisplayConfiguration={this.resetMemoryDisplayConfiguration}
+                updateTitle={this.updateTitle}
                 refreshMemory={this.refreshMemory}
                 toggleColumn={this.toggleColumn}
                 fetchMemory={this.fetchMemory}
@@ -109,6 +118,10 @@ class App extends React.Component<{}, MemoryAppState> {
     protected updateMemoryState = (newState: Partial<MemoryState>) => this.setState(prevState => ({ ...prevState, ...newState }));
     protected updateMemoryDisplayConfiguration = (newState: Partial<MemoryDisplayConfiguration>) => this.setState(prevState => ({ ...prevState, ...newState }));
     protected resetMemoryDisplayConfiguration = () => messenger.sendNotification(resetMemoryViewSettingsType, HOST_EXTENSION, undefined);
+    protected updateTitle = (title: string) => {
+        this.setState({ title });
+        messenger.sendNotification(setTitleType, HOST_EXTENSION, title);
+    };
 
     protected async setOptions(options?: Partial<DebugProtocol.ReadMemoryArguments>): Promise<void> {
         messenger.sendRequest(logMessageType, HOST_EXTENSION, `Setting options: ${JSON.stringify(options)}`);

src/webview/utils/view-types.ts

@@ -73,7 +73,9 @@ export interface FullNodeAttributes extends StylableNodeAttributes {
 }
 
 /** All settings related to memory view that can be specified for the webview from the extension "main". */
-export interface MemoryViewSettings extends ColumnVisibilityStatus, MemoryDisplayConfiguration { }
+export interface MemoryViewSettings extends ColumnVisibilityStatus, MemoryDisplayConfiguration {
+    title: string
+}
 
 /** The memory display configuration that can be specified for the memory widget. */
 export interface MemoryDisplayConfiguration {