Allow to configure word size and add group separator

media/memory-table.css

@@ -30,7 +30,7 @@
 /* == MoreMemorySelect == */
 
 .bytes-select {
-  color: var(--vscode-dropdown-forground);
+  color: var(--vscode-dropdown-foreground);
   border-radius: 2px;
   font-size: var(--vscode-font-size);
   border: 1px solid var(--vscode-dropdown-border);
@@ -76,6 +76,10 @@
   background: var(--vscode-dropdown-background);
 }
 
+.byte-group:not(:last-of-type) {
+  margin-right: 0.2em;
+}
+
 .radix-prefix {
   opacity: .6;
 }

package.json

@@ -159,6 +159,18 @@
           "default": "on",
           "description": "Refresh memory views when debugger stops"
         },
+        "memory-inspector.groupings.bytesPerWord": {
+          "type": "number",
+          "enum": [
+            1,
+            2,
+            4,
+            8,
+            16
+          ],
+          "default": 1,
+          "description": "Default bytes per word"
+        },
         "memory-inspector.groupings.wordsPerGroup": {
           "type": "number",
           "enum": [

src/plugin/manifest.ts

@@ -25,6 +25,8 @@ export const DEFAULT_DEBUG_TYPES = ['gdb', 'embedded-debug', 'arm-debugger'];
 export const CONFIG_REFRESH_ON_STOP = 'refreshOnStop';
 export const DEFAULT_REFRESH_ON_STOP = 'on';
 
+export const CONFIG_BYTES_PER_WORD = 'groupings.bytesPerWord';
+export const DEFAULT_BYTES_PER_WORD = 1;
 export const CONFIG_WORDS_PER_GROUP = 'groupings.wordsPerGroup';
 export const DEFAULT_WORDS_PER_GROUP = 1;
 export const CONFIG_GROUPS_PER_ROW = 'groupings.groupsPerRow';

src/plugin/memory-webview-main.ts

@@ -218,6 +218,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
 
     protected getMemoryViewSettings(title: string): MemoryViewSettings {
         const memoryInspectorConfiguration = vscode.workspace.getConfiguration(manifest.PACKAGE_NAME);
+        const bytesPerWord = memoryInspectorConfiguration.get<number>(manifest.CONFIG_BYTES_PER_WORD, manifest.DEFAULT_BYTES_PER_WORD);
         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);
@@ -226,7 +227,7 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
             .map(columnId => columnId.replace('columns.', ''));
         const addressRadix = memoryInspectorConfiguration.get<number>(manifest.CONFIG_ADDRESS_RADIX, manifest.DEFAULT_ADDRESS_RADIX);
         const showRadixPrefix = memoryInspectorConfiguration.get<boolean>(manifest.CONFIG_SHOW_RADIX_PREFIX, manifest.DEFAULT_SHOW_RADIX_PREFIX);
-        return { title, wordsPerGroup, groupsPerRow, scrollingBehavior, visibleColumns, addressRadix, showRadixPrefix };
+        return { title, bytesPerWord, wordsPerGroup, groupsPerRow, scrollingBehavior, visibleColumns, addressRadix, showRadixPrefix };
     }
 
     protected async readMemory(request: DebugProtocol.ReadMemoryArguments): Promise<MemoryReadResult> {

src/webview/columns/ascii-column.ts

@@ -33,8 +33,9 @@ export class AsciiColumn implements ColumnContribution {
     readonly label = 'ASCII';
     readonly priority = 3;
     render(range: BigIntMemoryRange, memory: Memory, options: TableRenderOptions): ReactNode {
-        const startOffset = toOffset(memory.address, range.startAddress, options.wordSize);
-        const endOffset = toOffset(memory.address, range.endAddress, options.wordSize);
+        const wordSize = options.bytesPerWord * 8;
+        const startOffset = toOffset(memory.address, range.startAddress, wordSize);
+        const endOffset = toOffset(memory.address, range.endAddress, wordSize);
         let result = '';
         for (let i = startOffset; i < endOffset; i++) {
             result += getASCIIForSingleByte(memory.bytes[i]);

src/webview/columns/data-column.tsx

@@ -44,9 +44,8 @@ export class DataColumn implements ColumnContribution {
     }
 
     protected renderWord(memory: Memory, options: TableRenderOptions, currentAddress: bigint): React.ReactNode {
-        const itemsPerByte = options.wordSize / 8;
-        const initialOffset = toOffset(memory.address, currentAddress, options.wordSize);
-        const finalOffset = initialOffset + itemsPerByte;
+        const initialOffset = toOffset(memory.address, currentAddress, options.bytesPerWord * 8);
+        const finalOffset = initialOffset + options.bytesPerWord;
         const bytes = [];
         for (let i = initialOffset; i < finalOffset; i++) {
             bytes.push(this.renderEightBits(memory, currentAddress, i));

src/webview/components/memory-table.tsx

@@ -118,12 +118,12 @@ interface MemoryTableState {
     selection: DataTableCellSelection<MemoryRowData[]> | null;
 }
 
-type MemorySizeOptions = Pick<MemoryTableProps, 'wordSize' | 'wordsPerGroup' | 'groupsPerRow'>;
+type MemorySizeOptions = Pick<MemoryTableProps, 'bytesPerWord' | 'wordsPerGroup' | 'groupsPerRow'>;
 namespace MemorySizeOptions {
     export function create(props: MemoryTableProps): MemorySizeOptions {
-        const { groupsPerRow, wordSize, wordsPerGroup }: MemorySizeOptions = props;
+        const { groupsPerRow, bytesPerWord, wordsPerGroup }: MemorySizeOptions = props;
         return {
-            wordSize,
+            bytesPerWord,
             groupsPerRow,
             wordsPerGroup
         };
@@ -312,7 +312,7 @@ export class MemoryTable extends React.PureComponent<MemoryTableProps, MemoryTab
 
     protected createMemoryRowListOptions(memory: Memory, options: MemorySizeOptions): MemoryRowListOptions {
         const wordsPerRow = options.wordsPerGroup * options.groupsPerRow;
-        const numRows = Math.ceil((memory.bytes.length * 8) / (wordsPerRow * options.wordSize));
+        const numRows = Math.ceil((memory.bytes.length) / (wordsPerRow * options.bytesPerWord));
         const bigWordsPerRow = BigInt(wordsPerRow);
 
         return {

src/webview/components/memory-widget.tsx

@@ -41,12 +41,10 @@ interface MemoryWidgetProps extends MemoryDisplayConfiguration {
 
 interface MemoryWidgetState {
     endianness: Endianness;
-    wordSize: number;
 }
 
 const defaultOptions: MemoryWidgetState = {
     endianness: Endianness.Little,
-    wordSize: 8
 };
 
 export class MemoryWidget extends React.Component<MemoryWidgetProps, MemoryWidgetState> {
@@ -65,7 +63,7 @@ export class MemoryWidget extends React.Component<MemoryWidgetProps, MemoryWidge
                 offset={this.props.offset}
                 count={this.props.count}
                 endianness={this.state.endianness}
-                wordSize={this.state.wordSize}
+                bytesPerWord={this.props.bytesPerWord}
                 wordsPerGroup={this.props.wordsPerGroup}
                 groupsPerRow={this.props.groupsPerRow}
                 updateMemoryArguments={this.props.updateMemoryArguments}
@@ -81,7 +79,7 @@ export class MemoryWidget extends React.Component<MemoryWidgetProps, MemoryWidge
                 columnOptions={this.props.columns.filter(candidate => candidate.active)}
                 memory={this.props.memory}
                 endianness={this.state.endianness}
-                wordSize={this.state.wordSize}
+                bytesPerWord={this.props.bytesPerWord}
                 wordsPerGroup={this.props.wordsPerGroup}
                 groupsPerRow={this.props.groupsPerRow}
                 offset={this.props.offset}

src/webview/components/options-widget.tsx

@@ -51,6 +51,7 @@ const enum InputId {
     Address = 'address',
     Offset = 'offset',
     Length = 'length',
+    BytesPerWord = 'word-size',
     WordsPerGroup = 'words-per-group',
     GroupsPerRow = 'groups-per-row',
     AddressRadix = 'address-radix',
@@ -63,7 +64,8 @@ interface OptionsForm {
     count: string;
 }
 
-const allowedBytesPerGroup = [1, 2, 4, 8, 16];
+const allowedBytesPerWord = [1, 2, 4, 8, 16];
+const allowedWordsPerGroup = [1, 2, 4, 8, 16];
 const allowedGroupsPerRow = [1, 2, 4, 8, 16, 32];
 
 export class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWidgetState> {
@@ -263,18 +265,32 @@ export class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWi
                                     onSelectionChanged={this.handleColumnActivationChange}
                                 />
                             )}
+
                             <h2>Memory Format</h2>
+                            <label
+                                htmlFor={InputId.BytesPerWord}
+                                className='advanced-options-label mt-1'
+                            >
+                                Bytes per Word
+                            </label>
+                            <Dropdown
+                                id={InputId.BytesPerWord}
+                                value={this.props.bytesPerWord}
+                                onChange={this.handleAdvancedOptionsDropdownChange}
+                                options={allowedBytesPerWord}
+                                className='advanced-options-dropdown' />
+
                             <label
                                 htmlFor={InputId.WordsPerGroup}
                                 className='advanced-options-label mt-1'
                             >
-                                Bytes per Group
+                                Words per Group
                             </label>
                             <Dropdown
                                 id={InputId.WordsPerGroup}
                                 value={this.props.wordsPerGroup}
                                 onChange={this.handleAdvancedOptionsDropdownChange}
-                                options={allowedBytesPerGroup}
+                                options={allowedWordsPerGroup}
                                 className='advanced-options-dropdown' />
                             <label
                                 htmlFor={InputId.GroupsPerRow}
@@ -376,6 +392,9 @@ export class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWi
         const id = event.target.id as InputId;
         const value = event.target.value;
         switch (id) {
+            case InputId.BytesPerWord:
+                this.props.updateRenderOptions({ bytesPerWord: Number(value) });
+                break;
             case InputId.WordsPerGroup:
                 this.props.updateRenderOptions({ wordsPerGroup: Number(value) });
                 break;

src/webview/memory-webview-view.tsx

@@ -46,6 +46,7 @@ export interface MemoryAppState extends MemoryState, MemoryDisplayConfiguration
 }
 
 const MEMORY_DISPLAY_CONFIGURATION_DEFAULTS: MemoryDisplayConfiguration = {
+    bytesPerWord: 1,
     wordsPerGroup: 1,
     groupsPerRow: 4,
     scrollingBehavior: 'Paginate',
@@ -106,6 +107,7 @@ class App extends React.Component<{}, MemoryAppState> {
                 toggleColumn={this.toggleColumn}
                 fetchMemory={this.fetchMemory}
                 isMemoryFetching={this.state.isMemoryFetching}
+                bytesPerWord={this.state.bytesPerWord}
                 groupsPerRow={this.state.groupsPerRow}
                 wordsPerGroup={this.state.wordsPerGroup}
                 scrollingBehavior={this.state.scrollingBehavior}

src/webview/utils/view-types.ts

@@ -32,7 +32,7 @@ export interface Memory {
 export interface SerializedTableRenderOptions extends MemoryDisplayConfiguration {
     columnOptions: Array<{ label: string, doRender: boolean }>;
     endianness: Endianness;
-    wordSize: number;
+    bytesPerWord: number;
 }
 
 export interface Event<T> {
@@ -79,6 +79,7 @@ export interface MemoryViewSettings extends ColumnVisibilityStatus, MemoryDispla
 
 /** The memory display configuration that can be specified for the memory widget. */
 export interface MemoryDisplayConfiguration {
+    bytesPerWord: number;
     wordsPerGroup: number;
     groupsPerRow: number;
     scrollingBehavior: ScrollingBehavior;