Introduce Autofit choice for groups per row

media/memory-table.css

@@ -18,8 +18,8 @@
   border-bottom: 2px solid var(--vscode-editor-lineHighlightBorder);
 }
 
-.memory-inspector-table tr > th:not(.fit),
-.memory-inspector-table tr > td:not(.fit) {
+.memory-inspector-table tr > th:not(.content-width-fit),
+.memory-inspector-table tr > td:not(.content-width-fit) {
   min-width: 120px;
 }
 
@@ -76,10 +76,6 @@
   background: var(--vscode-dropdown-background);
 }
 
-.byte-group:not(:last-of-type) {
-  margin-right: 0.2em;
-}
-
 .radix-prefix {
-  opacity: .6;
+  opacity: 0.6;
 }

media/theme/components/table.css

@@ -48,12 +48,12 @@
   overflow-wrap: anywhere;
   white-space: unset;
 }
-.p-datatable .p-datatable-tbody > tr > td.fit {
+.p-datatable .p-datatable-tbody > tr > td.content-width-fit {
   width: 1%;
   word-wrap: break-word;
   word-break: unset;
 }
-.p-datatable .p-datatable-thead > tr > th.fit {
+.p-datatable .p-datatable-thead > tr > th.content-width-fit {
   min-width: 80px;
 }
 

package.json

@@ -184,8 +184,9 @@
           "description": "Default words per group"
         },
         "memory-inspector.groupings.groupsPerRow": {
-          "type": "number",
+          "type": ["string", "number"],
           "enum": [
+            "Autofit",
             1,
             2,
             4,

src/common/typescript.ts

@@ -0,0 +1,23 @@
+/********************************************************************************
+ * Copyright (C) 2024 EclipseSource 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 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+export type TypeOfArrayElement<T> = T extends readonly (infer E)[] ? E : never;
+
+export function tryToNumber(value?: string | number): number | undefined {
+    const asNumber = Number(value);
+    if (value === '' || isNaN(asNumber)) { return undefined; }
+    return asNumber;
+}

src/plugin/manifest.ts

@@ -14,29 +14,45 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+// Common
 export const PACKAGE_NAME = 'memory-inspector';
 export const DISPLAY_NAME = 'Memory Inspector';
 export const EDITOR_NAME = `${PACKAGE_NAME}.inspect`;
 
+// Misc
 export const CONFIG_LOGGING_VERBOSITY = 'loggingVerbosity';
 export const DEFAULT_LOGGING_VERBOSITY = 'warn';
 export const CONFIG_DEBUG_TYPES = 'debugTypes';
 export const DEFAULT_DEBUG_TYPES = ['gdb', 'embedded-debug', 'arm-debugger'];
 export const CONFIG_REFRESH_ON_STOP = 'refreshOnStop';
 export const DEFAULT_REFRESH_ON_STOP = 'on';
 
+// Words
+// - Bytes per Word
 export const CONFIG_BYTES_PER_WORD = 'groupings.bytesPerWord';
+export const CONFIG_BYTES_PER_WORD_CHOICES = [1, 2, 4, 8, 16];
 export const DEFAULT_BYTES_PER_WORD = 1;
+
+// - Words per Group
 export const CONFIG_WORDS_PER_GROUP = 'groupings.wordsPerGroup';
+export const CONFIG_WORDS_PER_GROUP_CHOICES = [1, 2, 4, 8, 16];
 export const DEFAULT_WORDS_PER_GROUP = 1;
+
+// - Groups per Row
+export type GroupsPerRowChoices = ['Autofit', ...number[]];
 export const CONFIG_GROUPS_PER_ROW = 'groupings.groupsPerRow';
+export const CONFIG_GROUPS_PER_ROW_NUMERIC_CHOICES = [1, 2, 4, 8, 16, 32] as const;
+export const CONFIG_GROUPS_PER_ROW_CHOICES: GroupsPerRowChoices = ['Autofit', ...CONFIG_GROUPS_PER_ROW_NUMERIC_CHOICES];
 export const DEFAULT_GROUPS_PER_ROW = 4;
+
+// Scroll
 export const CONFIG_SCROLLING_BEHAVIOR = 'scrollingBehavior';
 export const DEFAULT_SCROLLING_BEHAVIOR = 'Paginate';
 export const CONFIG_ADDRESS_RADIX = 'addressRadix';
 export const DEFAULT_ADDRESS_RADIX = 16;
 export const CONFIG_SHOW_RADIX_PREFIX = 'showRadixPrefix';
 export const DEFAULT_SHOW_RADIX_PREFIX = true;
 
+// Columns
 export const CONFIG_SHOW_VARIABLES_COLUMN = 'columns.variables';
 export const CONFIG_SHOW_ASCII_COLUMN = 'columns.ascii';

src/webview/columns/address-column.tsx

@@ -16,7 +16,7 @@
 
 import React, { ReactNode } from 'react';
 import { BigIntMemoryRange, getAddressString, getRadixMarker } from '../../common/memory-range';
-import { ColumnContribution } from './column-contribution-service';
+import { ColumnContribution, ColumnFittingType } from './column-contribution-service';
 import { Memory, MemoryDisplayConfiguration } from '../utils/view-types';
 
 export class AddressColumn implements ColumnContribution {
@@ -26,6 +26,8 @@ export class AddressColumn implements ColumnContribution {
     readonly label = 'Address';
     readonly priority = 0;
 
+    fittingType: ColumnFittingType = 'content-width';
+
     render(range: BigIntMemoryRange, _: Memory, options: MemoryDisplayConfiguration): ReactNode {
         return <span className='memory-start-address'>
             {options.showRadixPrefix && <span className='radix-prefix'>{getRadixMarker(options.addressRadix)}</span>}

src/webview/columns/column-contribution-service.ts

@@ -19,9 +19,14 @@ import type * as React from 'react';
 import { BigIntMemoryRange } from '../../common/memory-range';
 import type { Disposable, Memory, MemoryState, SerializedTableRenderOptions, UpdateExecutor } from '../utils/view-types';
 
+export type ColumnFittingType = 'content-width';
+
 export interface ColumnContribution {
-    readonly label: string;
     readonly id: string;
+    readonly className?: string;
+    readonly label: string;
+    /** Depending on the supported fitting mode, the column will be rendered differently */
+    fittingType?: ColumnFittingType;
     /** Sorted low to high. If ommitted, sorted alphabetically by ID after all contributions with numbers. */
     priority?: number;
     render(range: BigIntMemoryRange, memory: Memory, options: TableRenderOptions): React.ReactNode

src/webview/columns/data-column.tsx

@@ -19,12 +19,22 @@ import { BigIntMemoryRange, toOffset } from '../../common/memory-range';
 import { FullNodeAttributes, Memory } from '../utils/view-types';
 import { ColumnContribution, TableRenderOptions } from './column-contribution-service';
 import { decorationService } from '../decorations/decoration-service';
+import type { MemorySizeOptions } from '../components/memory-table';
+import { elementInnerWidth, characterWidthInContainer } from '../utils/window';
 
 export class DataColumn implements ColumnContribution {
-    readonly id = 'data';
+    static ID = 'data';
+    static CLASS_NAME = 'column-data';
+
+    readonly id = DataColumn.ID;
+    readonly className = DataColumn.CLASS_NAME;
     readonly label = 'Data';
     readonly priority = 1;
 
+    protected byteGroupStyle: React.CSSProperties = {
+        marginRight: `${DataColumn.Styles.MARGIN_RIGHT_PX}px`
+    };
+
     render(range: BigIntMemoryRange, memory: Memory, options: TableRenderOptions): React.ReactNode {
         return this.renderGroups(range, memory, options);
     }
@@ -35,7 +45,10 @@ export class DataColumn implements ColumnContribution {
         for (let i = range.startAddress; i < range.endAddress; i++) {
             words.push(this.renderWord(memory, options, i));
             if (words.length % options.wordsPerGroup === 0) {
-                groups.push(<span className='byte-group' key={i.toString(16)}>{words}</span>);
+                const isLast = i + 1n >= range.endAddress;
+                const style: React.CSSProperties | undefined = isLast ? undefined : this.byteGroupStyle;
+
+                groups.push(<span className='byte-group' style={style} key={i.toString(16)}>{words}</span>);
                 words = [];
             }
         }
@@ -74,3 +87,36 @@ export class DataColumn implements ColumnContribution {
         };
     }
 }
+
+export namespace DataColumn {
+    export namespace Styles {
+        export const MARGIN_RIGHT_PX = 2;
+    }
+
+    /**
+     * The approximation is done by:
+     *
+     * 1. Calculating the group width including factors such as character size
+     * 2. Dividing column width by group width
+     *
+     * @returns Approximated groups per row that will fit into the element
+     */
+    export function approximateGroupsPerRow(row: HTMLElement, options: MemorySizeOptions): number {
+        const element = row.querySelector<HTMLElement>(`.${DataColumn.CLASS_NAME}`);
+        // eslint-disable-next-line no-null/no-null
+        if (element === null) {
+            return 1;
+        }
+        const columnWidth = elementInnerWidth(element);
+        const characterWidth = characterWidthInContainer(element, '0');
+        const groupWidth = characterWidth
+            * 2 // characters per byte
+            * options.bytesPerWord
+            * options.wordsPerGroup
+            + Styles.MARGIN_RIGHT_PX;
+        // Accommodate the non-existent margin of the final element.
+        const maxGroups = Math.max((columnWidth + Styles.MARGIN_RIGHT_PX) / groupWidth, 1);
+
+        return Math.floor(maxGroups);
+    }
+}