Use i18n.ByteUtilities.bytesToString in heap profiler

This replaces displaying bytes as big numbers of bytes, to dynamically
adjusting the unit.

Bug: 388589515
Change-Id: I6d13841c1b5b13df424f00e2ea4c7c740ed7857e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6159568
Commit-Queue: Connor Clark <cjamcl@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Auto-Submit: Connor Clark <cjamcl@chromium.org>

Author: Connor Clark

front_end/panels/profiler/HeapProfileView.ts

@@ -28,11 +28,11 @@ const UIStrings = {
   /**
    *@description Name of column header that reports the size (in terms of bytes) used for a particular part of the heap, excluding the size of the children nodes of this part of the heap
    */
-  selfSizeBytes: 'Self size (bytes)',
+  selfSizeBytes: 'Self size',
   /**
    *@description Name of column header that reports the total size (in terms of bytes) used for a particular part of the heap
    */
-  totalSizeBytes: 'Total size (bytes)',
+  totalSizeBytes: 'Total size',
   /**
    *@description Button text to stop profiling the heap
    */
@@ -588,7 +588,7 @@ export class NodeFormatter implements Formatter {
   }
 
   formatValue(value: number): string {
-    return Platform.NumberUtilities.withThousandsSeparator(value);
+    return i18n.ByteUtilities.bytesToString(value);
   }
 
   formatValueAccessibleText(value: number): string {

front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -582,10 +582,11 @@ export abstract class HeapSnapshotGenericObjectNode extends HeapSnapshotGridNode
     const snapshot = (dataGrid.snapshot as HeapSnapshotProxy);
     const shallowSizePercent = this.shallowSize / snapshot.totalSize * 100.0;
     const retainedSizePercent = this.retainedSize / snapshot.totalSize * 100.0;
+
     this.data = {
       distance: this.toUIDistance(this.distance),
-      shallowSize: Platform.NumberUtilities.withThousandsSeparator(this.shallowSize),
-      retainedSize: Platform.NumberUtilities.withThousandsSeparator(this.retainedSize),
+      shallowSize: i18n.ByteUtilities.bytesToString(this.shallowSize),
+      retainedSize: i18n.ByteUtilities.bytesToString(this.retainedSize),
       'shallowSize-percent': this.toPercentString(shallowSizePercent),
       'retainedSize-percent': this.toPercentString(retainedSizePercent),
     };
@@ -1035,10 +1036,10 @@ export class HeapSnapshotInstanceNode extends HeapSnapshotGenericObjectNode {
       data['addedCount'] = '';
       data['addedSize'] = '';
       data['removedCount'] = '\u2022';
-      data['removedSize'] = Platform.NumberUtilities.withThousandsSeparator(this.shallowSize || 0);
+      data['removedSize'] = i18n.ByteUtilities.bytesToString(this.shallowSize || 0);
     } else {
       data['addedCount'] = '\u2022';
-      data['addedSize'] = Platform.NumberUtilities.withThousandsSeparator(this.shallowSize || 0);
+      data['addedSize'] = i18n.ByteUtilities.bytesToString(this.shallowSize || 0);
       data['removedCount'] = '';
       data['removedSize'] = '';
     }
@@ -1132,8 +1133,8 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
       object: this.nameInternal,
       count: Platform.NumberUtilities.withThousandsSeparator(this.count),
       distance: this.toUIDistance(this.distance),
-      shallowSize: Platform.NumberUtilities.withThousandsSeparator(this.shallowSize),
-      retainedSize: Platform.NumberUtilities.withThousandsSeparator(this.retainedSize),
+      shallowSize: i18n.ByteUtilities.bytesToString(this.shallowSize),
+      retainedSize: i18n.ByteUtilities.bytesToString(this.retainedSize),
       'shallowSize-percent': this.toPercentString(shallowSizePercent),
       'retainedSize-percent': this.toPercentString(retainedSizePercent),
     };
@@ -1301,10 +1302,9 @@ export class HeapSnapshotDiffNode extends HeapSnapshotGridNode {
       removedCount: Platform.NumberUtilities.withThousandsSeparator(this.removedCount),
       countDelta: this.signForDelta(this.countDelta) +
           Platform.NumberUtilities.withThousandsSeparator(Math.abs(this.countDelta)),
-      addedSize: Platform.NumberUtilities.withThousandsSeparator(this.addedSize),
-      removedSize: Platform.NumberUtilities.withThousandsSeparator(this.removedSize),
-      sizeDelta:
-          this.signForDelta(this.sizeDelta) + Platform.NumberUtilities.withThousandsSeparator(Math.abs(this.sizeDelta)),
+      addedSize: i18n.ByteUtilities.bytesToString(this.addedSize),
+      removedSize: i18n.ByteUtilities.bytesToString(this.removedSize),
+      sizeDelta: this.signForDelta(this.sizeDelta) + i18n.ByteUtilities.bytesToString(Math.abs(this.sizeDelta)),
     };
   }
 
@@ -1400,8 +1400,8 @@ export class AllocationGridNode extends HeapSnapshotGridNode {
     this.data = {
       liveCount: Platform.NumberUtilities.withThousandsSeparator(data.liveCount),
       count: Platform.NumberUtilities.withThousandsSeparator(data.count),
-      liveSize: Platform.NumberUtilities.withThousandsSeparator(data.liveSize),
-      size: Platform.NumberUtilities.withThousandsSeparator(data.size),
+      liveSize: i18n.ByteUtilities.bytesToString(data.liveSize),
+      size: i18n.ByteUtilities.bytesToString(data.size),
       name: data.name,
     };
   }

test/e2e/helpers/memory-helpers.ts

@@ -313,8 +313,18 @@ export async function expandFocusedRow() {
   await waitFor('.selected.data-grid-data-grid-node.expanded');
 }
 
-function parseNumberWithSpaces(number: string): number {
-  return parseInt(number.replaceAll('\xa0', ''), 10);
+function parseByteString(str: string): number {
+  const number = parseFloat(str);
+  if (str.endsWith('kB')) {
+    return number * 1000;
+  }
+  if (str.endsWith('MB')) {
+    return number * 1000 * 1000;
+  }
+  if (str.endsWith('GB')) {
+    return number * 1000 * 1000 * 1000;
+  }
+  return number;
 }
 
 async function getSizesFromRow(row: puppeteer.ElementHandle<Element>) {
@@ -323,8 +333,8 @@ async function getSizesFromRow(row: puppeteer.ElementHandle<Element>) {
   function readNumber(e: Element): string {
     return e.textContent as string;
   }
-  const shallowSize = parseNumberWithSpaces(await numericData[0].evaluate(readNumber));
-  const retainedSize = parseNumberWithSpaces(await numericData[2].evaluate(readNumber));
+  const shallowSize = parseByteString(await numericData[0].evaluate(readNumber));
+  const retainedSize = parseByteString(await numericData[2].evaluate(readNumber));
   assert.isTrue(retainedSize >= shallowSize);
   return {shallowSize, retainedSize};
 }
@@ -368,13 +378,13 @@ export async function getAddedCountFromComparisonRowWithName(text: string) {
 export async function getAddedCountFromComparisonRow(row: puppeteer.ElementHandle<Element>) {
   const addedCountCell = await waitFor('.addedCount-column', row);
   const countText = await addedCountCell.evaluate(e => e.textContent ?? '');
-  return parseNumberWithSpaces(countText);
+  return parseByteString(countText);
 }
 
 export async function getRemovedCountFromComparisonRow(row: puppeteer.ElementHandle<Element>) {
   const addedCountCell = await waitFor('.removedCount-column', row);
   const countText = await addedCountCell.evaluate(e => e.textContent ?? '');
-  return parseNumberWithSpaces(countText);
+  return parseByteString(countText);
 }
 
 export async function clickOnContextMenuForRetainer(retainerName: string, menuItem: string) {

test/e2e/memory/memory_test.ts

@@ -454,8 +454,10 @@ describe('The Memory Panel', function() {
     // The Set object is small, regardless of the contained content.
     assert.isTrue(sizes.sizesForSet.shallowSize <= 100);
     // The Set retains its backing storage.
+    // Note: 16 bytes is added to retainedSize to account for rounding present in the UI layer.
     assert.isTrue(
-        sizes.sizesForSet.retainedSize >= sizes.sizesForSet.shallowSize + sizes.sizesForBackingStorage.retainedSize);
+        sizes.sizesForSet.retainedSize + 16 >=
+        sizes.sizesForSet.shallowSize + sizes.sizesForBackingStorage.retainedSize);
     // The backing storage contains 100 items, which occupy at least one pointer per item.
     assert.isTrue(sizes.sizesForBackingStorage.shallowSize >= 400);
     // The backing storage retains 100 strings, which occupy at least 16 bytes each.