@theia/memory-inspector 1.45.0 → 1.46.0-next.72

package/src/browser/memory-widget/memory-options-widget.tsx

@@ -1,738 +1,738 @@
-/********************************************************************************
- * Copyright (C) 2021 Ericsson 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 { deepFreeze, Disposable, DisposableCollection, Emitter, nls } from '@theia/core';
-import { Key, KeyCode, Message, ReactWidget, StatefulWidget } from '@theia/core/lib/browser';
-import { Deferred } from '@theia/core/lib/common/promise-util';
-import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
-import * as React from '@theia/core/shared/react';
-import { DebugSession, DebugState } from '@theia/debug/lib/browser/debug-session';
-import { DebugSessionManager } from '@theia/debug/lib/browser/debug-session-manager';
-import * as Long from 'long';
-import { MemoryProviderService } from '../memory-provider/memory-provider-service';
-import { Recents } from '../utils/memory-recents';
-import { MWInput, MWInputWithSelect, MWSelect } from '../utils/memory-widget-components';
-import { Constants, Interfaces, MemoryWidgetOptions, Utils } from '../utils/memory-widget-utils';
-import { VariableRange } from '../utils/memory-widget-variable-utils';
-import { MWMultiSelect, SingleSelectItemProps } from '../utils/multi-select-bar';
-import debounce = require('@theia/core/shared/lodash.debounce');
-
-export const EMPTY_MEMORY: Interfaces.MemoryReadResult = deepFreeze({
-    bytes: new Uint8Array(),
-    address: new Long(0, 0, true),
-});
-
-export const LOCATION_FIELD_ID = 't-mv-location';
-export const LENGTH_FIELD_ID = 't-mv-length';
-export const LOCATION_OFFSET_FIELD_ID = 't-mv-location-offset';
-export const BYTES_PER_ROW_FIELD_ID = 't-mv-bytesrow';
-export const BYTES_PER_GROUP_FIELD_ID = 't-mv-bytesgroup';
-export const ENDIAN_SELECT_ID = 't-mv-endiannesss';
-export const ASCII_TOGGLE_ID = 't-mv-ascii-toggle';
-export const AUTO_UPDATE_TOGGLE_ID = 't-mv-auto-update-toggle';
-
-@injectable()
-export class MemoryOptionsWidget extends ReactWidget implements StatefulWidget {
-    static ID = 'memory-view-options-widget';
-    static LABEL = nls.localize('theia/memory-inspector/memoryTitle', 'Memory');
-    iconClass = 'memory-view-icon';
-    lockIconClass = 'memory-lock-icon';
-
-    static WIDGET_H2_CLASS = 'memory-widget-header';
-    static WIDGET_HEADER_INPUT_CLASS = 'memory-widget-header-input';
-
-    protected additionalColumnSelectLabel = nls.localize('theia/memory-inspector/extraColumn', 'Extra Column');
-
-    protected sessionListeners = new DisposableCollection();
-
-    protected readonly onOptionsChangedEmitter = new Emitter<string | undefined>();
-    readonly onOptionsChanged = this.onOptionsChangedEmitter.event;
-    protected readonly onMemoryChangedEmitter = new Emitter<Interfaces.MemoryReadResult>();
-    readonly onMemoryChanged = this.onMemoryChangedEmitter.event;
-    protected pinnedMemoryReadResult: Deferred<Interfaces.MemoryReadResult | false> | undefined;
-
-    protected memoryReadResult: Interfaces.MemoryReadResult = EMPTY_MEMORY;
-    protected columnsDisplayed: Interfaces.ColumnsDisplayed = {
-        address: {
-            label: nls.localizeByDefault('Address'),
-            doRender: true
-        },
-        data: {
-            label: nls.localize('theia/memory-inspector/data', 'Data'),
-            doRender: true
-        },
-        variables: {
-            label: nls.localizeByDefault('Variables'),
-            doRender: true
-        },
-        ascii: {
-            label: nls.localize('theia/memory-inspector/ascii', 'ASCII'),
-            doRender: false
-        },
-    };
-
-    protected byteSize = 8;
-
-    protected bytesPerGroup = 1;
-    protected groupsPerRow = 4;
-    protected variables: VariableRange[] = [];
-    protected endianness: Interfaces.Endianness = Interfaces.Endianness.Little;
-
-    protected memoryReadError = nls.localize('theia/memory-inspector/memory/readError/noContents', 'No memory contents currently available.');
-
-    protected address: string | number = 0;
-    protected offset = 0;
-    protected readLength = 256;
-    protected doDisplaySettings = false;
-    protected doUpdateAutomatically = true;
-    protected showMemoryError = false;
-    protected errorTimeout: NodeJS.Timeout | undefined = undefined;
-    protected addressField: HTMLInputElement | undefined;
-    protected offsetField: HTMLInputElement | undefined;
-    protected readLengthField: HTMLInputElement | undefined;
-    protected headerInputField: HTMLInputElement | undefined;
-    protected recentLocations = new Recents();
-    protected showTitleEditIcon = false;
-    protected isTitleEditable = false;
-
-    @inject(MemoryProviderService) protected readonly memoryProvider: MemoryProviderService;
-    @inject(DebugSessionManager) protected readonly sessionManager: DebugSessionManager;
-    @inject(MemoryWidgetOptions) protected readonly memoryWidgetOptions: MemoryWidgetOptions;
-
-    get memory(): Interfaces.WidgetMemoryState {
-        return {
-            ...this.memoryReadResult,
-            variables: this.variables,
-        };
-    }
-
-    get options(): Interfaces.MemoryOptions {
-        return this.storeState();
-    }
-
-    @postConstruct()
-    protected init(): void {
-        this.addClass(MemoryOptionsWidget.ID);
-
-        this.title.label = nls.localize('theia/memory-inspector/memory', 'Memory ({0})', this.memoryWidgetOptions.displayId);
-        this.title.caption = nls.localize('theia/memory-inspector/memory', 'Memory ({0})', this.memoryWidgetOptions.displayId);
-        this.title.iconClass = this.iconClass;
-        this.title.closable = true;
-
-        if (this.memoryWidgetOptions.dynamic !== false) {
-            this.toDispose.push(this.sessionManager.onDidChangeActiveDebugSession(({ current }) => {
-                this.setUpListeners(current);
-            }));
-
-            this.toDispose.push(this.sessionManager.onDidCreateDebugSession(current => {
-                this.setUpListeners(current);
-            }));
-            this.setUpListeners(this.sessionManager.currentSession);
-        }
-        this.toDispose.push(this.onOptionsChanged(() => this.update()));
-
-        this.update();
-    }
-
-    async setAddressAndGo(
-        newAddress: string,
-        newOffset?: number,
-        newLength?: number,
-        direction?: 'above' | 'below',
-    ): Promise<Interfaces.MemoryReadResult | false | undefined> {
-        let doUpdate = false;
-        const originalValues = {
-            offset: '',
-            length: '',
-        };
-        if (this.addressField) {
-            this.addressField.value = newAddress;
-            doUpdate = true;
-        }
-        if (this.offsetField && newOffset !== undefined) {
-            originalValues.offset = this.offsetField.value;
-            this.offsetField.value = newOffset.toString();
-            doUpdate = true;
-        }
-        if (this.readLengthField && newLength !== undefined) {
-            originalValues.length = this.readLengthField.value;
-            this.readLengthField.value = newLength.toString();
-            doUpdate = true;
-        }
-        if (doUpdate && this.readLengthField && this.offsetField) {
-            this.pinnedMemoryReadResult = new Deferred<Interfaces.MemoryReadResult>();
-            this.updateMemoryView();
-            const result = await this.pinnedMemoryReadResult.promise;
-            if (result === false) {
-                // Memory request errored
-                this.readLengthField.value = originalValues.length;
-                this.offsetField.value = originalValues.offset;
-            }
-            if (result) {
-                // Memory request returned some memory
-                const resultLength = result.bytes.length * 8 / this.byteSize;
-                const lengthFieldValue = parseInt(this.readLengthField.value);
-                if (lengthFieldValue !== resultLength) {
-                    this.memoryReadError = nls.localize('theia/memory-inspector/memory/readError/bounds', 'Memory bounds exceeded, result will be truncated.');
-                    this.doShowMemoryErrors();
-                    this.readLengthField.value = resultLength.toString();
-                    if (direction === 'above') {
-                        this.offsetField.value = `${parseInt(originalValues.offset) - (resultLength - parseInt(originalValues.length))}`;
-                    }
-                    this.update();
-                }
-            }
-        }
-        return undefined;
-    }
-
-    protected setUpListeners(session?: DebugSession): void {
-        this.sessionListeners.dispose();
-        this.sessionListeners = new DisposableCollection(Disposable.create(() => this.handleActiveSessionChange()));
-        if (session) {
-            this.sessionListeners.push(session.onDidChange(() => this.handleSessionChange()));
-        }
-    }
-
-    protected handleActiveSessionChange(): void {
-        const isDynamic = this.memoryWidgetOptions.dynamic !== false;
-        if (isDynamic && this.doUpdateAutomatically) {
-            this.memoryReadResult = EMPTY_MEMORY;
-            this.fireDidChangeMemory();
-        }
-    }
-
-    protected handleSessionChange(): void {
-        const isStopped = this.sessionManager.currentSession?.state === DebugState.Stopped;
-        const isReadyForQuery = !!this.sessionManager.currentSession?.currentFrame;
-        const isDynamic = this.memoryWidgetOptions.dynamic !== false;
-        if (isStopped && isReadyForQuery && isDynamic && this.doUpdateAutomatically && this.memoryReadResult !== EMPTY_MEMORY) {
-            this.updateMemoryView();
-        }
-    }
-
-    protected override onActivateRequest(msg: Message): void {
-        super.onActivateRequest(msg);
-        this.acceptFocus();
-    }
-
-    protected acceptFocus(): void {
-        if (this.doUpdateAutomatically) {
-            if (this.addressField) {
-                this.addressField.focus();
-                this.addressField.select();
-            }
-        } else {
-            const settingsCog = this.node.querySelector('.toggle-settings-click-zone') as HTMLDivElement;
-            settingsCog?.focus();
-        }
-    }
-
-    protected handleColumnSelectionChange = (columnLabel: string, doShow: boolean): void => this.doHandleColumnSelectionChange(columnLabel, doShow);
-
-    protected doHandleColumnSelectionChange(columnLabel: string, doShow: boolean): void {
-        if (columnLabel in this.columnsDisplayed) {
-            this.columnsDisplayed[columnLabel].doRender = doShow;
-            this.fireDidChangeOptions(ASCII_TOGGLE_ID);
-        }
-    }
-
-    protected toggleAutoUpdate = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {
-        if (e.nativeEvent.type === 'click') {
-            e.currentTarget.blur();
-        }
-        if ('key' in e && KeyCode.createKeyCode(e.nativeEvent).key?.keyCode === Key.TAB.keyCode) {
-            return;
-        }
-        this.doUpdateAutomatically = !this.doUpdateAutomatically;
-        if (this.doUpdateAutomatically) {
-            this.title.iconClass = this.iconClass;
-        } else {
-            this.title.iconClass = this.lockIconClass;
-        }
-        this.fireDidChangeOptions();
-    };
-
-    protected onByteSizeChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
-        this.byteSize = parseInt(event.target.value);
-        this.fireDidChangeOptions(event.target.id);
-    };
-
-    protected override onAfterAttach(msg: Message): void {
-        super.onAfterAttach(msg);
-        if (this.memoryWidgetOptions.dynamic !== false) {
-            if (this.addressField) {
-                this.addressField.value = this.address.toString();
-            }
-        }
-    }
-
-    protected toggleDoShowSettings = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {
-        if (!('key' in e) || KeyCode.createKeyCode(e.nativeEvent).key?.keyCode === Key.TAB.keyCode) {
-            this.doDisplaySettings = !this.doDisplaySettings;
-            this.update();
-        }
-    };
-
-    protected render(): React.ReactNode {
-        return (
-            <div className='t-mv-container'>
-                {this.renderInputContainer()}
-            </div>
-        );
-    }
-
-    protected renderInputContainer(): React.ReactNode {
-        return (
-            <div className='t-mv-settings-container'>
-                <div className='t-mv-wrapper'>
-                    {this.renderToolbar()}
-                    {this.renderMemoryLocationGroup()}
-                    {this.doDisplaySettings && (
-                        <div className='t-mv-toggle-settings-wrapper'>
-                            {this.renderByteDisplayGroup()}
-                        </div>
-                    )}
-                </div>
-            </div>
-        );
-    }
-
-    protected renderByteDisplayGroup(): React.ReactNode {
-        return (
-            <div className='t-mv-group settings-group'>
-                <MWSelect
-                    id='byte-size-select'
-                    label={nls.localize('theia/memory-inspector/byteSize', 'Byte Size')}
-                    value={this.byteSize.toString()}
-                    onChange={this.onByteSizeChange}
-                    options={['8', '16', '32', '64']}
-                />
-                <MWSelect
-                    id={BYTES_PER_GROUP_FIELD_ID}
-                    label={nls.localize('theia/memory-inspector/bytesPerGroup', 'Bytes Per Group')}
-                    value={this.bytesPerGroup.toString()}
-                    onChange={this.onBytesPerGroupChange}
-                    options={['1', '2', '4', '8', '16']}
-                />
-                <MWSelect
-                    id={BYTES_PER_ROW_FIELD_ID}
-                    label={nls.localize('theia/memory-inspector/groupsPerRow', 'Groups Per Row')}
-                    value={this.groupsPerRow.toString()}
-                    onChange={this.onGroupsPerRowChange}
-                    options={['1', '2', '4', '8', '16', '32']}
-                />
-                <MWSelect
-                    id={ENDIAN_SELECT_ID}
-                    label={nls.localize('theia/memory-inspector/endianness', 'Endianness')}
-                    value={this.endianness}
-                    onChange={this.onEndiannessChange}
-                    options={[Interfaces.Endianness.Little, Interfaces.Endianness.Big]}
-                />
-                <MWMultiSelect
-                    id={ASCII_TOGGLE_ID}
-                    label={nls.localize('theia/memory-inspector/columns', 'Columns')}
-                    items={this.getOptionalColumns()}
-                    onSelectionChanged={this.handleColumnSelectionChange}
-                />
-            </div>
-        );
-    }
-
-    protected getObligatoryColumnIds(): string[] {
-        return ['address', 'data'];
-    }
-
-    protected getOptionalColumns(): SingleSelectItemProps[] {
-        const obligatoryColumns = new Set(this.getObligatoryColumnIds());
-        return Object.entries(this.columnsDisplayed)
-            .reduce<SingleSelectItemProps[]>((accumulated, [id, { doRender, label }]) => {
-                if (!obligatoryColumns.has(id)) {
-                    accumulated.push({ id, label, defaultChecked: doRender });
-                }
-                return accumulated;
-            }, []);
-    }
-
-    protected assignLocationRef: React.LegacyRef<HTMLInputElement> = location => {
-        this.addressField = location ?? undefined;
-    };
-
-    protected assignReadLengthRef: React.LegacyRef<HTMLInputElement> = readLength => {
-        this.readLengthField = readLength ?? undefined;
-    };
-
-    protected assignOffsetRef: React.LegacyRef<HTMLInputElement> = offset => {
-        this.offsetField = offset ?? undefined;
-    };
-
-    protected setAddressFromSelect = (e: React.ChangeEvent<HTMLSelectElement>): void => {
-        if (this.addressField) {
-            this.addressField.value = e.target.value;
-        }
-    };
-
-    protected renderMemoryLocationGroup(): React.ReactNode {
-        return (
-            <>
-                <div className='t-mv-group view-group'>
-                    <MWInputWithSelect
-                        id={LOCATION_FIELD_ID}
-                        label={nls.localizeByDefault('Address')}
-                        title={nls.localize('theia/memory-inspector/addressTooltip', 'Memory location to display, an address or expression evaluating to an address')}
-                        defaultValue={`${this.address}`}
-                        onSelectChange={this.setAddressFromSelect}
-                        passRef={this.assignLocationRef}
-                        onKeyDown={this.doRefresh}
-                        options={[...this.recentLocations.values]}
-                        disabled={!this.doUpdateAutomatically}
-                    />
-                    <MWInput
-                        id={LOCATION_OFFSET_FIELD_ID}
-                        label={nls.localize('theia/memory-inspector/offset', 'Offset')}
-                        title={nls.localize('theia/memory-inspector/offsetTooltip', 'Offset to be added to the current memory location, when navigating')}
-                        defaultValue='0'
-                        passRef={this.assignOffsetRef}
-                        onKeyDown={this.doRefresh}
-                        disabled={!this.doUpdateAutomatically}
-                    />
-                    <MWInput
-                        id={LENGTH_FIELD_ID}
-                        label={nls.localize('theia/memory-inspector/length', 'Length')}
-                        title={nls.localize('theia/memory-inspector/lengthTooltip', 'Number of bytes to fetch, in decimal or hexadecimal')}
-                        defaultValue={this.readLength.toString()}
-                        passRef={this.assignReadLengthRef}
-                        onChange={Utils.validateNumericalInputs}
-                        onKeyDown={this.doRefresh}
-                        disabled={!this.doUpdateAutomatically}
-                    />
-                    <button
-                        type='button'
-                        className='theia-button main view-group-go-button'
-                        onClick={this.doRefresh}
-                        disabled={!this.doUpdateAutomatically}
-                        title={nls.localizeByDefault('Go')}
-                    >
-                        {nls.localizeByDefault('Go')}
-                    </button>
-                </div>
-                <div className={`t-mv-memory-fetch-error${this.showMemoryError ? ' show' : ' hide'}`}>
-                    {this.memoryReadError}
-                </div>
-            </>
-        );
-    }
-
-    protected activateHeaderInputField = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {
-        if (!this.isTitleEditable) {
-            const isMouseDown = !('key' in e);
-            const isActivationKey = 'key' in e && (
-                KeyCode.createKeyCode(e.nativeEvent).key?.keyCode === Key.SPACE.keyCode
-                || KeyCode.createKeyCode(e.nativeEvent).key?.keyCode === Key.ENTER.keyCode
-            );
-            if (isMouseDown || isActivationKey) {
-                if (isMouseDown) {
-                    e.currentTarget.blur();
-                }
-                this.isTitleEditable = true;
-                this.update();
-            }
-        }
-    };
-
-    protected saveHeaderInputValue = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {
-        const isMouseDown = !('key' in e);
-        const isSaveKey = 'key' in e && e.key === 'Enter';
-        const isCancelKey = 'key' in e && e.key === 'Escape';
-        e.stopPropagation();
-        if (isMouseDown || isSaveKey || isCancelKey) {
-            this.updateHeader(isCancelKey);
-        }
-    };
-
-    protected assignHeaderInputRef = (element: HTMLInputElement): void => {
-        if (element) {
-            this.headerInputField = element;
-            element.focus();
-        }
-    };
-
-    protected updateHeader(isCancelKey: boolean): void {
-        if (!isCancelKey && this.headerInputField) {
-            this.title.label = this.headerInputField.value;
-            this.title.caption = this.headerInputField.value;
-        }
-
-        this.isTitleEditable = false;
-        this.update();
-    }
-
-    protected renderToolbar(): React.ReactNode {
-        return (
-            <div className='memory-widget-toolbar'>
-                {this.renderLockIcon()}
-                {this.renderEditableTitleField()}
-                {this.renderSettingsContainer()}
-            </div>
-        );
-    }
-
-    protected renderSettingsContainer(): React.ReactNode {
-        return <div className='toggle-settings-container'>
-            <div
-                className='toggle-settings-click-zone no-select'
-                tabIndex={0}
-                aria-label={this.doDisplaySettings ?
-                    nls.localize('theia/memory-inspector/memory/hideSettings', 'Hide Settings Panel') :
-                    nls.localize('theia/memory-inspector/memory/showSettings', 'Show Settings Panel')}
-                role='button'
-                onClick={this.toggleDoShowSettings}
-                onKeyDown={this.toggleDoShowSettings}
-                title={this.doDisplaySettings ?
-                    nls.localize('theia/memory-inspector/memory/hideSettings', 'Hide Settings Panel') :
-                    nls.localize('theia/memory-inspector/memory/showSettings', 'Show Settings Panel')}>
-                <i className='codicon codicon-settings-gear' />
-                <span>{this.doDisplaySettings ?
-                    nls.localize('theia/memory-inspector/closeSettings', 'Close Settings') :
-                    nls.localizeByDefault('Settings')}
-                </span>
-            </div>
-        </div>;
-    }
-
-    protected renderLockIcon(): React.ReactNode {
-        return this.memoryWidgetOptions.dynamic !== false && (
-            <div className='memory-widget-auto-updates-container'>
-                <div
-                    className={`fa fa-${this.doUpdateAutomatically ? 'unlock' : 'lock'}`}
-                    id={AUTO_UPDATE_TOGGLE_ID}
-                    title={this.doUpdateAutomatically ?
-                        nls.localize('theia/memory-inspector/memory/freeze', 'Freeze Memory View') :
-                        nls.localize('theia/memory-inspector/memory/unfreeze', 'Unfreeze Memory View')}
-                    onClick={this.toggleAutoUpdate}
-                    onKeyDown={this.toggleAutoUpdate}
-                    role='button'
-                    tabIndex={0} />
-            </div>
-        );
-    }
-
-    protected renderEditableTitleField(): React.ReactNode {
-        return (
-            <div
-                className='memory-widget-header-click-zone'
-                tabIndex={0}
-                onClick={this.activateHeaderInputField}
-                onKeyDown={this.activateHeaderInputField}
-                role='button'
-            >
-                {!this.isTitleEditable
-                    ? (
-                        <h2 className={`${MemoryOptionsWidget.WIDGET_H2_CLASS}${!this.doUpdateAutomatically ? ' disabled' : ''} no-select`}>
-                            {this.title.label}
-                        </h2>
-                    )
-                    : <input
-                        className='theia-input'
-                        type='text'
-                        defaultValue={this.title.label}
-                        onKeyDown={this.saveHeaderInputValue}
-                        spellCheck={false}
-                        ref={this.assignHeaderInputRef}
-                    />}
-                {!this.isTitleEditable && (
-                    <div className={`fa fa-pencil${this.showTitleEditIcon ? ' show' : ' hide'}`} />
-                )}
-                {this.isTitleEditable && (
-                    <div
-                        className='fa fa-save'
-                        onClick={this.saveHeaderInputValue}
-                        onKeyDown={this.saveHeaderInputValue}
-                        role='button'
-                        tabIndex={0}
-                        title={nls.localizeByDefault('Save')}
-                    />
-                )}
-            </div>
-        );
-    }
-
-    storeState(): Interfaces.MemoryOptions {
-        return {
-            address: this.addressField?.value ?? this.address,
-            offset: parseInt(`${this.offsetField?.value}`) ?? this.offset,
-            length: parseInt(`${this.readLengthField?.value}`) ?? this.readLength,
-            byteSize: this.byteSize,
-            bytesPerGroup: this.bytesPerGroup,
-            groupsPerRow: this.groupsPerRow,
-            endianness: this.endianness,
-            doDisplaySettings: this.doDisplaySettings,
-            columnsDisplayed: this.columnsDisplayed,
-            recentLocationsArray: this.recentLocations.values,
-            isFrozen: !this.doUpdateAutomatically,
-            doUpdateAutomatically: this.doUpdateAutomatically,
-        };
-    }
-
-    restoreState(oldState: Interfaces.MemoryOptions): void {
-        this.address = oldState.address ?? this.address;
-        this.offset = oldState.offset ?? this.offset;
-        this.readLength = oldState.length ?? this.readLength;
-        this.byteSize = oldState.byteSize ?? this.byteSize;
-        this.bytesPerGroup = oldState.bytesPerGroup ?? this.bytesPerGroup;
-        this.groupsPerRow = oldState.groupsPerRow ?? this.groupsPerRow;
-        this.endianness = oldState.endianness ?? this.endianness;
-        this.recentLocations = new Recents(oldState.recentLocationsArray) ?? this.recentLocations;
-        this.doDisplaySettings = !!oldState.doDisplaySettings;
-        if (oldState.columnsDisplayed) {
-            this.columnsDisplayed = oldState.columnsDisplayed;
-        }
-    }
-
-    protected doShowMemoryErrors = (doClearError = false): void => {
-        if (this.errorTimeout !== undefined) {
-            clearTimeout(this.errorTimeout);
-        }
-        if (doClearError) {
-            this.showMemoryError = false;
-            this.update();
-            this.errorTimeout = undefined;
-            return;
-        }
-        this.showMemoryError = true;
-        this.update();
-        this.errorTimeout = setTimeout(() => {
-            this.showMemoryError = false;
-            this.update();
-            this.errorTimeout = undefined;
-        }, Constants.ERROR_TIMEOUT);
-    };
-
-    fetchNewMemory(): void {
-        this.updateMemoryView();
-    }
-
-    protected doRefresh = (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
-        if ('key' in event && event.key !== 'Enter') {
-            return;
-        }
-        this.updateMemoryView();
-    };
-
-    protected updateMemoryView = debounce(this.doUpdateMemoryView.bind(this), Constants.DEBOUNCE_TIME, { trailing: true });
-
-    protected async doUpdateMemoryView(): Promise<void> {
-        if (!(this.addressField && this.readLengthField)) { return; }
-
-        if (this.addressField?.value.trim().length === 0) {
-            this.memoryReadError = nls.localize('theia/memory-inspector/memory/addressField/memoryReadError', 'Enter an address or expression in the Location field.');
-            this.doShowMemoryErrors();
-            return;
-        }
-        if (this.readLengthField.value.trim().length === 0) {
-            this.memoryReadError = nls.localize('theia/memory-inspector/memory/readLength/memoryReadError', 'Enter a length (decimal or hexadecimal number) in the Length field.');
-            this.doShowMemoryErrors();
-            return;
-        }
-
-        const startAddress = this.addressField.value;
-        const locationOffset = parseInt(`${this.offsetField?.value}`) || 0;
-        const readLength = parseInt(this.readLengthField.value);
-
-        try {
-            this.memoryReadResult = await this.getMemory(startAddress, readLength, locationOffset);
-            this.fireDidChangeMemory();
-            if (this.pinnedMemoryReadResult) {
-                this.pinnedMemoryReadResult.resolve(this.memoryReadResult);
-            }
-            this.doShowMemoryErrors(true);
-        } catch (err) {
-            this.memoryReadError = this.getUserError(err);
-            console.error('Failed to read memory', err);
-            this.doShowMemoryErrors();
-            if (this.pinnedMemoryReadResult) {
-                this.pinnedMemoryReadResult.resolve(this.memoryReadResult);
-            }
-        } finally {
-            this.pinnedMemoryReadResult = undefined;
-            this.update();
-        }
-    }
-
-    protected getUserError(err: unknown): string {
-        return err instanceof Error ? err.message : nls.localize('theia/memory-inspector/memory/userError', 'There was an error fetching memory.');
-    }
-
-    protected async getMemory(memoryReference: string, count: number, offset: number): Promise<Interfaces.MemoryReadResult> {
-        const result = await this.retrieveMemory(memoryReference, count, offset);
-        try {
-            this.variables = await this.memoryProvider.getLocals();
-        } catch {
-            this.variables = [];
-        }
-        this.recentLocations.add(memoryReference);
-        this.updateDefaults(memoryReference, count, offset);
-        return result;
-    }
-
-    protected async retrieveMemory(memoryReference: string, count: number, offset: number): Promise<Interfaces.MemoryReadResult> {
-        return this.memoryProvider.readMemory({ memoryReference, count, offset });
-    }
-
-    // TODO: This may not be necessary if we change how state is stored (currently in the text fields themselves.)
-    protected updateDefaults(address: string, readLength: number, offset: number): void {
-        this.address = address;
-        this.readLength = readLength;
-        this.offset = offset;
-    }
-
-    // Callbacks for when the various view parameters change.
-    /**
-     * Handle bytes per row changed event.
-     */
-    protected onGroupsPerRowChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const { value, id } = event.target;
-        this.groupsPerRow = parseInt(value);
-        this.fireDidChangeOptions(id);
-    };
-
-    /**
-     * Handle bytes per group changed event.
-     */
-    protected onBytesPerGroupChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
-        const { value, id } = event.target;
-        this.bytesPerGroup = parseInt(value);
-        this.fireDidChangeOptions(id);
-    };
-
-    /**
-     * Handle endianness changed event.
-     */
-    protected onEndiannessChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
-        const { value, id } = event.target;
-        if (value !== Interfaces.Endianness.Big && value !== Interfaces.Endianness.Little) { return; }
-        this.endianness = value;
-        this.fireDidChangeOptions(id);
-    };
-
-    protected fireDidChangeOptions(targetId?: string): void {
-        this.onOptionsChangedEmitter.fire(targetId);
-    }
-
-    protected fireDidChangeMemory(): void {
-        this.onMemoryChangedEmitter.fire(this.memoryReadResult);
-    }
-}
+/********************************************************************************
+ * Copyright (C) 2021 Ericsson 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 { deepFreeze, Disposable, DisposableCollection, Emitter, nls } from '@theia/core';
+import { Key, KeyCode, Message, ReactWidget, StatefulWidget } from '@theia/core/lib/browser';
+import { Deferred } from '@theia/core/lib/common/promise-util';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import * as React from '@theia/core/shared/react';
+import { DebugSession, DebugState } from '@theia/debug/lib/browser/debug-session';
+import { DebugSessionManager } from '@theia/debug/lib/browser/debug-session-manager';
+import * as Long from 'long';
+import { MemoryProviderService } from '../memory-provider/memory-provider-service';
+import { Recents } from '../utils/memory-recents';
+import { MWInput, MWInputWithSelect, MWSelect } from '../utils/memory-widget-components';
+import { Constants, Interfaces, MemoryWidgetOptions, Utils } from '../utils/memory-widget-utils';
+import { VariableRange } from '../utils/memory-widget-variable-utils';
+import { MWMultiSelect, SingleSelectItemProps } from '../utils/multi-select-bar';
+import debounce = require('@theia/core/shared/lodash.debounce');
+
+export const EMPTY_MEMORY: Interfaces.MemoryReadResult = deepFreeze({
+    bytes: new Uint8Array(),
+    address: new Long(0, 0, true),
+});
+
+export const LOCATION_FIELD_ID = 't-mv-location';
+export const LENGTH_FIELD_ID = 't-mv-length';
+export const LOCATION_OFFSET_FIELD_ID = 't-mv-location-offset';
+export const BYTES_PER_ROW_FIELD_ID = 't-mv-bytesrow';
+export const BYTES_PER_GROUP_FIELD_ID = 't-mv-bytesgroup';
+export const ENDIAN_SELECT_ID = 't-mv-endiannesss';
+export const ASCII_TOGGLE_ID = 't-mv-ascii-toggle';
+export const AUTO_UPDATE_TOGGLE_ID = 't-mv-auto-update-toggle';
+
+@injectable()
+export class MemoryOptionsWidget extends ReactWidget implements StatefulWidget {
+    static ID = 'memory-view-options-widget';
+    static LABEL = nls.localize('theia/memory-inspector/memoryTitle', 'Memory');
+    iconClass = 'memory-view-icon';
+    lockIconClass = 'memory-lock-icon';
+
+    static WIDGET_H2_CLASS = 'memory-widget-header';
+    static WIDGET_HEADER_INPUT_CLASS = 'memory-widget-header-input';
+
+    protected additionalColumnSelectLabel = nls.localize('theia/memory-inspector/extraColumn', 'Extra Column');
+
+    protected sessionListeners = new DisposableCollection();
+
+    protected readonly onOptionsChangedEmitter = new Emitter<string | undefined>();
+    readonly onOptionsChanged = this.onOptionsChangedEmitter.event;
+    protected readonly onMemoryChangedEmitter = new Emitter<Interfaces.MemoryReadResult>();
+    readonly onMemoryChanged = this.onMemoryChangedEmitter.event;
+    protected pinnedMemoryReadResult: Deferred<Interfaces.MemoryReadResult | false> | undefined;
+
+    protected memoryReadResult: Interfaces.MemoryReadResult = EMPTY_MEMORY;
+    protected columnsDisplayed: Interfaces.ColumnsDisplayed = {
+        address: {
+            label: nls.localizeByDefault('Address'),
+            doRender: true
+        },
+        data: {
+            label: nls.localize('theia/memory-inspector/data', 'Data'),
+            doRender: true
+        },
+        variables: {
+            label: nls.localizeByDefault('Variables'),
+            doRender: true
+        },
+        ascii: {
+            label: nls.localize('theia/memory-inspector/ascii', 'ASCII'),
+            doRender: false
+        },
+    };
+
+    protected byteSize = 8;
+
+    protected bytesPerGroup = 1;
+    protected groupsPerRow = 4;
+    protected variables: VariableRange[] = [];
+    protected endianness: Interfaces.Endianness = Interfaces.Endianness.Little;
+
+    protected memoryReadError = nls.localize('theia/memory-inspector/memory/readError/noContents', 'No memory contents currently available.');
+
+    protected address: string | number = 0;
+    protected offset = 0;
+    protected readLength = 256;
+    protected doDisplaySettings = false;
+    protected doUpdateAutomatically = true;
+    protected showMemoryError = false;
+    protected errorTimeout: NodeJS.Timeout | undefined = undefined;
+    protected addressField: HTMLInputElement | undefined;
+    protected offsetField: HTMLInputElement | undefined;
+    protected readLengthField: HTMLInputElement | undefined;
+    protected headerInputField: HTMLInputElement | undefined;
+    protected recentLocations = new Recents();
+    protected showTitleEditIcon = false;
+    protected isTitleEditable = false;
+
+    @inject(MemoryProviderService) protected readonly memoryProvider: MemoryProviderService;
+    @inject(DebugSessionManager) protected readonly sessionManager: DebugSessionManager;
+    @inject(MemoryWidgetOptions) protected readonly memoryWidgetOptions: MemoryWidgetOptions;
+
+    get memory(): Interfaces.WidgetMemoryState {
+        return {
+            ...this.memoryReadResult,
+            variables: this.variables,
+        };
+    }
+
+    get options(): Interfaces.MemoryOptions {
+        return this.storeState();
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.addClass(MemoryOptionsWidget.ID);
+
+        this.title.label = nls.localize('theia/memory-inspector/memory', 'Memory ({0})', this.memoryWidgetOptions.displayId);
+        this.title.caption = nls.localize('theia/memory-inspector/memory', 'Memory ({0})', this.memoryWidgetOptions.displayId);
+        this.title.iconClass = this.iconClass;
+        this.title.closable = true;
+
+        if (this.memoryWidgetOptions.dynamic !== false) {
+            this.toDispose.push(this.sessionManager.onDidChangeActiveDebugSession(({ current }) => {
+                this.setUpListeners(current);
+            }));
+
+            this.toDispose.push(this.sessionManager.onDidCreateDebugSession(current => {
+                this.setUpListeners(current);
+            }));
+            this.setUpListeners(this.sessionManager.currentSession);
+        }
+        this.toDispose.push(this.onOptionsChanged(() => this.update()));
+
+        this.update();
+    }
+
+    async setAddressAndGo(
+        newAddress: string,
+        newOffset?: number,
+        newLength?: number,
+        direction?: 'above' | 'below',
+    ): Promise<Interfaces.MemoryReadResult | false | undefined> {
+        let doUpdate = false;
+        const originalValues = {
+            offset: '',
+            length: '',
+        };
+        if (this.addressField) {
+            this.addressField.value = newAddress;
+            doUpdate = true;
+        }
+        if (this.offsetField && newOffset !== undefined) {
+            originalValues.offset = this.offsetField.value;
+            this.offsetField.value = newOffset.toString();
+            doUpdate = true;
+        }
+        if (this.readLengthField && newLength !== undefined) {
+            originalValues.length = this.readLengthField.value;
+            this.readLengthField.value = newLength.toString();
+            doUpdate = true;
+        }
+        if (doUpdate && this.readLengthField && this.offsetField) {
+            this.pinnedMemoryReadResult = new Deferred<Interfaces.MemoryReadResult>();
+            this.updateMemoryView();
+            const result = await this.pinnedMemoryReadResult.promise;
+            if (result === false) {
+                // Memory request errored
+                this.readLengthField.value = originalValues.length;
+                this.offsetField.value = originalValues.offset;
+            }
+            if (result) {
+                // Memory request returned some memory
+                const resultLength = result.bytes.length * 8 / this.byteSize;
+                const lengthFieldValue = parseInt(this.readLengthField.value);
+                if (lengthFieldValue !== resultLength) {
+                    this.memoryReadError = nls.localize('theia/memory-inspector/memory/readError/bounds', 'Memory bounds exceeded, result will be truncated.');
+                    this.doShowMemoryErrors();
+                    this.readLengthField.value = resultLength.toString();
+                    if (direction === 'above') {
+                        this.offsetField.value = `${parseInt(originalValues.offset) - (resultLength - parseInt(originalValues.length))}`;
+                    }
+                    this.update();
+                }
+            }
+        }
+        return undefined;
+    }
+
+    protected setUpListeners(session?: DebugSession): void {
+        this.sessionListeners.dispose();
+        this.sessionListeners = new DisposableCollection(Disposable.create(() => this.handleActiveSessionChange()));
+        if (session) {
+            this.sessionListeners.push(session.onDidChange(() => this.handleSessionChange()));
+        }
+    }
+
+    protected handleActiveSessionChange(): void {
+        const isDynamic = this.memoryWidgetOptions.dynamic !== false;
+        if (isDynamic && this.doUpdateAutomatically) {
+            this.memoryReadResult = EMPTY_MEMORY;
+            this.fireDidChangeMemory();
+        }
+    }
+
+    protected handleSessionChange(): void {
+        const isStopped = this.sessionManager.currentSession?.state === DebugState.Stopped;
+        const isReadyForQuery = !!this.sessionManager.currentSession?.currentFrame;
+        const isDynamic = this.memoryWidgetOptions.dynamic !== false;
+        if (isStopped && isReadyForQuery && isDynamic && this.doUpdateAutomatically && this.memoryReadResult !== EMPTY_MEMORY) {
+            this.updateMemoryView();
+        }
+    }
+
+    protected override onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        this.acceptFocus();
+    }
+
+    protected acceptFocus(): void {
+        if (this.doUpdateAutomatically) {
+            if (this.addressField) {
+                this.addressField.focus();
+                this.addressField.select();
+            }
+        } else {
+            const settingsCog = this.node.querySelector('.toggle-settings-click-zone') as HTMLDivElement;
+            settingsCog?.focus();
+        }
+    }
+
+    protected handleColumnSelectionChange = (columnLabel: string, doShow: boolean): void => this.doHandleColumnSelectionChange(columnLabel, doShow);
+
+    protected doHandleColumnSelectionChange(columnLabel: string, doShow: boolean): void {
+        if (columnLabel in this.columnsDisplayed) {
+            this.columnsDisplayed[columnLabel].doRender = doShow;
+            this.fireDidChangeOptions(ASCII_TOGGLE_ID);
+        }
+    }
+
+    protected toggleAutoUpdate = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {
+        if (e.nativeEvent.type === 'click') {
+            e.currentTarget.blur();
+        }
+        if ('key' in e && KeyCode.createKeyCode(e.nativeEvent).key?.keyCode === Key.TAB.keyCode) {
+            return;
+        }
+        this.doUpdateAutomatically = !this.doUpdateAutomatically;
+        if (this.doUpdateAutomatically) {
+            this.title.iconClass = this.iconClass;
+        } else {
+            this.title.iconClass = this.lockIconClass;
+        }
+        this.fireDidChangeOptions();
+    };
+
+    protected onByteSizeChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+        this.byteSize = parseInt(event.target.value);
+        this.fireDidChangeOptions(event.target.id);
+    };
+
+    protected override onAfterAttach(msg: Message): void {
+        super.onAfterAttach(msg);
+        if (this.memoryWidgetOptions.dynamic !== false) {
+            if (this.addressField) {
+                this.addressField.value = this.address.toString();
+            }
+        }
+    }
+
+    protected toggleDoShowSettings = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {
+        if (!('key' in e) || KeyCode.createKeyCode(e.nativeEvent).key?.keyCode === Key.TAB.keyCode) {
+            this.doDisplaySettings = !this.doDisplaySettings;
+            this.update();
+        }
+    };
+
+    protected render(): React.ReactNode {
+        return (
+            <div className='t-mv-container'>
+                {this.renderInputContainer()}
+            </div>
+        );
+    }
+
+    protected renderInputContainer(): React.ReactNode {
+        return (
+            <div className='t-mv-settings-container'>
+                <div className='t-mv-wrapper'>
+                    {this.renderToolbar()}
+                    {this.renderMemoryLocationGroup()}
+                    {this.doDisplaySettings && (
+                        <div className='t-mv-toggle-settings-wrapper'>
+                            {this.renderByteDisplayGroup()}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+
+    protected renderByteDisplayGroup(): React.ReactNode {
+        return (
+            <div className='t-mv-group settings-group'>
+                <MWSelect
+                    id='byte-size-select'
+                    label={nls.localize('theia/memory-inspector/byteSize', 'Byte Size')}
+                    value={this.byteSize.toString()}
+                    onChange={this.onByteSizeChange}
+                    options={['8', '16', '32', '64']}
+                />
+                <MWSelect
+                    id={BYTES_PER_GROUP_FIELD_ID}
+                    label={nls.localize('theia/memory-inspector/bytesPerGroup', 'Bytes Per Group')}
+                    value={this.bytesPerGroup.toString()}
+                    onChange={this.onBytesPerGroupChange}
+                    options={['1', '2', '4', '8', '16']}
+                />
+                <MWSelect
+                    id={BYTES_PER_ROW_FIELD_ID}
+                    label={nls.localize('theia/memory-inspector/groupsPerRow', 'Groups Per Row')}
+                    value={this.groupsPerRow.toString()}
+                    onChange={this.onGroupsPerRowChange}
+                    options={['1', '2', '4', '8', '16', '32']}
+                />
+                <MWSelect
+                    id={ENDIAN_SELECT_ID}
+                    label={nls.localize('theia/memory-inspector/endianness', 'Endianness')}
+                    value={this.endianness}
+                    onChange={this.onEndiannessChange}
+                    options={[Interfaces.Endianness.Little, Interfaces.Endianness.Big]}
+                />
+                <MWMultiSelect
+                    id={ASCII_TOGGLE_ID}
+                    label={nls.localize('theia/memory-inspector/columns', 'Columns')}
+                    items={this.getOptionalColumns()}
+                    onSelectionChanged={this.handleColumnSelectionChange}
+                />
+            </div>
+        );
+    }
+
+    protected getObligatoryColumnIds(): string[] {
+        return ['address', 'data'];
+    }
+
+    protected getOptionalColumns(): SingleSelectItemProps[] {
+        const obligatoryColumns = new Set(this.getObligatoryColumnIds());
+        return Object.entries(this.columnsDisplayed)
+            .reduce<SingleSelectItemProps[]>((accumulated, [id, { doRender, label }]) => {
+                if (!obligatoryColumns.has(id)) {
+                    accumulated.push({ id, label, defaultChecked: doRender });
+                }
+                return accumulated;
+            }, []);
+    }
+
+    protected assignLocationRef: React.LegacyRef<HTMLInputElement> = location => {
+        this.addressField = location ?? undefined;
+    };
+
+    protected assignReadLengthRef: React.LegacyRef<HTMLInputElement> = readLength => {
+        this.readLengthField = readLength ?? undefined;
+    };
+
+    protected assignOffsetRef: React.LegacyRef<HTMLInputElement> = offset => {
+        this.offsetField = offset ?? undefined;
+    };
+
+    protected setAddressFromSelect = (e: React.ChangeEvent<HTMLSelectElement>): void => {
+        if (this.addressField) {
+            this.addressField.value = e.target.value;
+        }
+    };
+
+    protected renderMemoryLocationGroup(): React.ReactNode {
+        return (
+            <>
+                <div className='t-mv-group view-group'>
+                    <MWInputWithSelect
+                        id={LOCATION_FIELD_ID}
+                        label={nls.localizeByDefault('Address')}
+                        title={nls.localize('theia/memory-inspector/addressTooltip', 'Memory location to display, an address or expression evaluating to an address')}
+                        defaultValue={`${this.address}`}
+                        onSelectChange={this.setAddressFromSelect}
+                        passRef={this.assignLocationRef}
+                        onKeyDown={this.doRefresh}
+                        options={[...this.recentLocations.values]}
+                        disabled={!this.doUpdateAutomatically}
+                    />
+                    <MWInput
+                        id={LOCATION_OFFSET_FIELD_ID}
+                        label={nls.localize('theia/memory-inspector/offset', 'Offset')}
+                        title={nls.localize('theia/memory-inspector/offsetTooltip', 'Offset to be added to the current memory location, when navigating')}
+                        defaultValue='0'
+                        passRef={this.assignOffsetRef}
+                        onKeyDown={this.doRefresh}
+                        disabled={!this.doUpdateAutomatically}
+                    />
+                    <MWInput
+                        id={LENGTH_FIELD_ID}
+                        label={nls.localize('theia/memory-inspector/length', 'Length')}
+                        title={nls.localize('theia/memory-inspector/lengthTooltip', 'Number of bytes to fetch, in decimal or hexadecimal')}
+                        defaultValue={this.readLength.toString()}
+                        passRef={this.assignReadLengthRef}
+                        onChange={Utils.validateNumericalInputs}
+                        onKeyDown={this.doRefresh}
+                        disabled={!this.doUpdateAutomatically}
+                    />
+                    <button
+                        type='button'
+                        className='theia-button main view-group-go-button'
+                        onClick={this.doRefresh}
+                        disabled={!this.doUpdateAutomatically}
+                        title={nls.localizeByDefault('Go')}
+                    >
+                        {nls.localizeByDefault('Go')}
+                    </button>
+                </div>
+                <div className={`t-mv-memory-fetch-error${this.showMemoryError ? ' show' : ' hide'}`}>
+                    {this.memoryReadError}
+                </div>
+            </>
+        );
+    }
+
+    protected activateHeaderInputField = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {
+        if (!this.isTitleEditable) {
+            const isMouseDown = !('key' in e);
+            const isActivationKey = 'key' in e && (
+                KeyCode.createKeyCode(e.nativeEvent).key?.keyCode === Key.SPACE.keyCode
+                || KeyCode.createKeyCode(e.nativeEvent).key?.keyCode === Key.ENTER.keyCode
+            );
+            if (isMouseDown || isActivationKey) {
+                if (isMouseDown) {
+                    e.currentTarget.blur();
+                }
+                this.isTitleEditable = true;
+                this.update();
+            }
+        }
+    };
+
+    protected saveHeaderInputValue = (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {
+        const isMouseDown = !('key' in e);
+        const isSaveKey = 'key' in e && e.key === 'Enter';
+        const isCancelKey = 'key' in e && e.key === 'Escape';
+        e.stopPropagation();
+        if (isMouseDown || isSaveKey || isCancelKey) {
+            this.updateHeader(isCancelKey);
+        }
+    };
+
+    protected assignHeaderInputRef = (element: HTMLInputElement): void => {
+        if (element) {
+            this.headerInputField = element;
+            element.focus();
+        }
+    };
+
+    protected updateHeader(isCancelKey: boolean): void {
+        if (!isCancelKey && this.headerInputField) {
+            this.title.label = this.headerInputField.value;
+            this.title.caption = this.headerInputField.value;
+        }
+
+        this.isTitleEditable = false;
+        this.update();
+    }
+
+    protected renderToolbar(): React.ReactNode {
+        return (
+            <div className='memory-widget-toolbar'>
+                {this.renderLockIcon()}
+                {this.renderEditableTitleField()}
+                {this.renderSettingsContainer()}
+            </div>
+        );
+    }
+
+    protected renderSettingsContainer(): React.ReactNode {
+        return <div className='toggle-settings-container'>
+            <div
+                className='toggle-settings-click-zone no-select'
+                tabIndex={0}
+                aria-label={this.doDisplaySettings ?
+                    nls.localize('theia/memory-inspector/memory/hideSettings', 'Hide Settings Panel') :
+                    nls.localize('theia/memory-inspector/memory/showSettings', 'Show Settings Panel')}
+                role='button'
+                onClick={this.toggleDoShowSettings}
+                onKeyDown={this.toggleDoShowSettings}
+                title={this.doDisplaySettings ?
+                    nls.localize('theia/memory-inspector/memory/hideSettings', 'Hide Settings Panel') :
+                    nls.localize('theia/memory-inspector/memory/showSettings', 'Show Settings Panel')}>
+                <i className='codicon codicon-settings-gear' />
+                <span>{this.doDisplaySettings ?
+                    nls.localize('theia/memory-inspector/closeSettings', 'Close Settings') :
+                    nls.localizeByDefault('Settings')}
+                </span>
+            </div>
+        </div>;
+    }
+
+    protected renderLockIcon(): React.ReactNode {
+        return this.memoryWidgetOptions.dynamic !== false && (
+            <div className='memory-widget-auto-updates-container'>
+                <div
+                    className={`fa fa-${this.doUpdateAutomatically ? 'unlock' : 'lock'}`}
+                    id={AUTO_UPDATE_TOGGLE_ID}
+                    title={this.doUpdateAutomatically ?
+                        nls.localize('theia/memory-inspector/memory/freeze', 'Freeze Memory View') :
+                        nls.localize('theia/memory-inspector/memory/unfreeze', 'Unfreeze Memory View')}
+                    onClick={this.toggleAutoUpdate}
+                    onKeyDown={this.toggleAutoUpdate}
+                    role='button'
+                    tabIndex={0} />
+            </div>
+        );
+    }
+
+    protected renderEditableTitleField(): React.ReactNode {
+        return (
+            <div
+                className='memory-widget-header-click-zone'
+                tabIndex={0}
+                onClick={this.activateHeaderInputField}
+                onKeyDown={this.activateHeaderInputField}
+                role='button'
+            >
+                {!this.isTitleEditable
+                    ? (
+                        <h2 className={`${MemoryOptionsWidget.WIDGET_H2_CLASS}${!this.doUpdateAutomatically ? ' disabled' : ''} no-select`}>
+                            {this.title.label}
+                        </h2>
+                    )
+                    : <input
+                        className='theia-input'
+                        type='text'
+                        defaultValue={this.title.label}
+                        onKeyDown={this.saveHeaderInputValue}
+                        spellCheck={false}
+                        ref={this.assignHeaderInputRef}
+                    />}
+                {!this.isTitleEditable && (
+                    <div className={`fa fa-pencil${this.showTitleEditIcon ? ' show' : ' hide'}`} />
+                )}
+                {this.isTitleEditable && (
+                    <div
+                        className='fa fa-save'
+                        onClick={this.saveHeaderInputValue}
+                        onKeyDown={this.saveHeaderInputValue}
+                        role='button'
+                        tabIndex={0}
+                        title={nls.localizeByDefault('Save')}
+                    />
+                )}
+            </div>
+        );
+    }
+
+    storeState(): Interfaces.MemoryOptions {
+        return {
+            address: this.addressField?.value ?? this.address,
+            offset: parseInt(`${this.offsetField?.value}`) ?? this.offset,
+            length: parseInt(`${this.readLengthField?.value}`) ?? this.readLength,
+            byteSize: this.byteSize,
+            bytesPerGroup: this.bytesPerGroup,
+            groupsPerRow: this.groupsPerRow,
+            endianness: this.endianness,
+            doDisplaySettings: this.doDisplaySettings,
+            columnsDisplayed: this.columnsDisplayed,
+            recentLocationsArray: this.recentLocations.values,
+            isFrozen: !this.doUpdateAutomatically,
+            doUpdateAutomatically: this.doUpdateAutomatically,
+        };
+    }
+
+    restoreState(oldState: Interfaces.MemoryOptions): void {
+        this.address = oldState.address ?? this.address;
+        this.offset = oldState.offset ?? this.offset;
+        this.readLength = oldState.length ?? this.readLength;
+        this.byteSize = oldState.byteSize ?? this.byteSize;
+        this.bytesPerGroup = oldState.bytesPerGroup ?? this.bytesPerGroup;
+        this.groupsPerRow = oldState.groupsPerRow ?? this.groupsPerRow;
+        this.endianness = oldState.endianness ?? this.endianness;
+        this.recentLocations = new Recents(oldState.recentLocationsArray) ?? this.recentLocations;
+        this.doDisplaySettings = !!oldState.doDisplaySettings;
+        if (oldState.columnsDisplayed) {
+            this.columnsDisplayed = oldState.columnsDisplayed;
+        }
+    }
+
+    protected doShowMemoryErrors = (doClearError = false): void => {
+        if (this.errorTimeout !== undefined) {
+            clearTimeout(this.errorTimeout);
+        }
+        if (doClearError) {
+            this.showMemoryError = false;
+            this.update();
+            this.errorTimeout = undefined;
+            return;
+        }
+        this.showMemoryError = true;
+        this.update();
+        this.errorTimeout = setTimeout(() => {
+            this.showMemoryError = false;
+            this.update();
+            this.errorTimeout = undefined;
+        }, Constants.ERROR_TIMEOUT);
+    };
+
+    fetchNewMemory(): void {
+        this.updateMemoryView();
+    }
+
+    protected doRefresh = (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+        if ('key' in event && event.key !== 'Enter') {
+            return;
+        }
+        this.updateMemoryView();
+    };
+
+    protected updateMemoryView = debounce(this.doUpdateMemoryView.bind(this), Constants.DEBOUNCE_TIME, { trailing: true });
+
+    protected async doUpdateMemoryView(): Promise<void> {
+        if (!(this.addressField && this.readLengthField)) { return; }
+
+        if (this.addressField?.value.trim().length === 0) {
+            this.memoryReadError = nls.localize('theia/memory-inspector/memory/addressField/memoryReadError', 'Enter an address or expression in the Location field.');
+            this.doShowMemoryErrors();
+            return;
+        }
+        if (this.readLengthField.value.trim().length === 0) {
+            this.memoryReadError = nls.localize('theia/memory-inspector/memory/readLength/memoryReadError', 'Enter a length (decimal or hexadecimal number) in the Length field.');
+            this.doShowMemoryErrors();
+            return;
+        }
+
+        const startAddress = this.addressField.value;
+        const locationOffset = parseInt(`${this.offsetField?.value}`) || 0;
+        const readLength = parseInt(this.readLengthField.value);
+
+        try {
+            this.memoryReadResult = await this.getMemory(startAddress, readLength, locationOffset);
+            this.fireDidChangeMemory();
+            if (this.pinnedMemoryReadResult) {
+                this.pinnedMemoryReadResult.resolve(this.memoryReadResult);
+            }
+            this.doShowMemoryErrors(true);
+        } catch (err) {
+            this.memoryReadError = this.getUserError(err);
+            console.error('Failed to read memory', err);
+            this.doShowMemoryErrors();
+            if (this.pinnedMemoryReadResult) {
+                this.pinnedMemoryReadResult.resolve(this.memoryReadResult);
+            }
+        } finally {
+            this.pinnedMemoryReadResult = undefined;
+            this.update();
+        }
+    }
+
+    protected getUserError(err: unknown): string {
+        return err instanceof Error ? err.message : nls.localize('theia/memory-inspector/memory/userError', 'There was an error fetching memory.');
+    }
+
+    protected async getMemory(memoryReference: string, count: number, offset: number): Promise<Interfaces.MemoryReadResult> {
+        const result = await this.retrieveMemory(memoryReference, count, offset);
+        try {
+            this.variables = await this.memoryProvider.getLocals();
+        } catch {
+            this.variables = [];
+        }
+        this.recentLocations.add(memoryReference);
+        this.updateDefaults(memoryReference, count, offset);
+        return result;
+    }
+
+    protected async retrieveMemory(memoryReference: string, count: number, offset: number): Promise<Interfaces.MemoryReadResult> {
+        return this.memoryProvider.readMemory({ memoryReference, count, offset });
+    }
+
+    // TODO: This may not be necessary if we change how state is stored (currently in the text fields themselves.)
+    protected updateDefaults(address: string, readLength: number, offset: number): void {
+        this.address = address;
+        this.readLength = readLength;
+        this.offset = offset;
+    }
+
+    // Callbacks for when the various view parameters change.
+    /**
+     * Handle bytes per row changed event.
+     */
+    protected onGroupsPerRowChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const { value, id } = event.target;
+        this.groupsPerRow = parseInt(value);
+        this.fireDidChangeOptions(id);
+    };
+
+    /**
+     * Handle bytes per group changed event.
+     */
+    protected onBytesPerGroupChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+        const { value, id } = event.target;
+        this.bytesPerGroup = parseInt(value);
+        this.fireDidChangeOptions(id);
+    };
+
+    /**
+     * Handle endianness changed event.
+     */
+    protected onEndiannessChange = (event: React.ChangeEvent<HTMLSelectElement>): void => {
+        const { value, id } = event.target;
+        if (value !== Interfaces.Endianness.Big && value !== Interfaces.Endianness.Little) { return; }
+        this.endianness = value;
+        this.fireDidChangeOptions(id);
+    };
+
+    protected fireDidChangeOptions(targetId?: string): void {
+        this.onOptionsChangedEmitter.fire(targetId);
+    }
+
+    protected fireDidChangeMemory(): void {
+        this.onMemoryChangedEmitter.fire(this.memoryReadResult);
+    }
+}