Allow to configure word size and add group separator

* Introduces user option for bytes per word (VS Code settings & per view) * Rename "Bytes per Group" into "Words per Group" * Add right margin to groups Fixes #74 Fixes #75
eclipse-cdt-cloud · Feb 22, 2024 · 37fa1dc · 37fa1dc
1 parent bc14fef
commit 37fa1dc
Show file tree

Hide file tree

Showing 11 changed files with 59 additions and 19 deletions.
diff --git a/media/memory-table.css b/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);
@@ -75,3 +75,7 @@
 .more-memory-select select:hover {
   background: var(--vscode-dropdown-background);
 }
+
+.byte-group {
+  margin-right: 0.2em;
+}
diff --git a/package.json b/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": [

diff --git a/src/plugin/manifest.ts b/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';

diff --git a/src/plugin/memory-webview-main.ts b/src/plugin/memory-webview-main.ts
@@ -218,13 +218,14 @@ export class MemoryWebview implements vscode.CustomReadonlyEditorProvider {
 
     protected getMemoryViewSettings(): 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);
         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 { bytesPerWord, wordsPerGroup, groupsPerRow, scrollingBehavior, visibleColumns };
     }
 
     protected async readMemory(request: DebugProtocol.ReadMemoryArguments): Promise<MemoryReadResult> {

diff --git a/src/webview/columns/ascii-column.ts b/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]);

diff --git a/src/webview/columns/data-column.tsx b/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));

diff --git a/src/webview/components/memory-table.tsx b/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 * 8) / (wordsPerRow * options.bytesPerWord));
         const bigWordsPerRow = BigInt(wordsPerRow);
 
         return {

diff --git a/src/webview/components/memory-widget.tsx b/src/webview/components/memory-widget.tsx
@@ -39,12 +39,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> {
@@ -61,7 +59,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}
@@ -75,7 +73,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}

diff --git a/src/webview/components/options-widget.tsx b/src/webview/components/options-widget.tsx
@@ -44,6 +44,7 @@ const enum InputId {
     Address = 'address',
     Offset = 'offset',
     Length = 'length',
+    BytesPerWord = 'word-size',
     WordsPerGroup = 'words-per-group',
     GroupsPerRow = 'groups-per-row',
 }
@@ -54,7 +55,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, {}> {
@@ -220,17 +222,32 @@ export class OptionsWidget extends React.Component<OptionsWidgetProps, {}> {
                                     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}
@@ -304,6 +321,9 @@ export class OptionsWidget extends React.Component<OptionsWidgetProps, {}> {
         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;

diff --git a/src/webview/memory-webview-view.tsx b/src/webview/memory-webview-view.tsx
@@ -44,6 +44,7 @@ export interface MemoryAppState extends MemoryState, MemoryDisplayConfiguration
 }
 
 const MEMORY_DISPLAY_CONFIGURATION_DEFAULTS: MemoryDisplayConfiguration = {
+    bytesPerWord: 1,
     wordsPerGroup: 1,
     groupsPerRow: 4,
     scrollingBehavior: 'Paginate'
@@ -99,6 +100,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}

diff --git a/src/webview/utils/view-types.ts b/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> {
@@ -77,6 +77,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;