Display correct unit in Stack Chart tooltips for size profiles. (#5658)

Author: fqueze

src/components/stack-chart/Canvas.tsx

@@ -8,7 +8,7 @@ import { withChartViewport, type Viewport } from '../shared/chart/Viewport';
 import { ChartCanvas } from '../shared/chart/Canvas';
 import { FastFillStyle } from '../../utils';
 import TextMeasurement from '../../utils/text-measurement';
-import { formatMilliseconds } from '../../utils/format-numbers';
+import { formatMilliseconds, formatBytes } from '../../utils/format-numbers';
 import { bisectionLeft, bisectionRight } from '../../utils/bisect';
 import type {
   updatePreviewSelection,
@@ -36,6 +36,7 @@ import type {
   Marker,
   InnerWindowID,
   Page,
+  TimelineUnit,
 } from 'firefox-profiler/types';
 import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
@@ -77,6 +78,7 @@ type OwnProps = {
   readonly marginLeft: CssPixels;
   readonly displayStackType: boolean;
   readonly useStackChartSameWidths: boolean;
+  readonly timelineUnit: TimelineUnit;
 };
 
 type Props = Readonly<
@@ -617,6 +619,12 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
     const duration =
       timing.end[stackTimingIndex] - timing.start[stackTimingIndex];
 
+    const { timelineUnit } = this.props;
+    const durationText =
+      timelineUnit === 'bytes'
+        ? formatBytes(duration)
+        : formatMilliseconds(duration);
+
     return (
       <TooltipCallNode
         thread={thread}
@@ -628,7 +636,7 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
         categories={categories}
         // The stack chart doesn't support other call tree summary types.
         callTreeSummaryStrategy="timing"
-        durationText={formatMilliseconds(duration)}
+        durationText={durationText}
         displayStackType={displayStackType}
       />
     );

src/components/stack-chart/index.tsx

@@ -17,6 +17,7 @@ import {
   getCategories,
   getInnerWindowIDToPageMap,
   getProfileUsesMultipleStackTypes,
+  getProfileTimelineUnit,
 } from '../../selectors/profile';
 import {
   getStackChartSameWidths,
@@ -55,6 +56,7 @@ import type {
   ThreadsKey,
   InnerWindowID,
   Page,
+  TimelineUnit,
 } from 'firefox-profiler/types';
 import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
 
@@ -84,6 +86,7 @@ type StateProps = {
   readonly displayStackType: boolean;
   readonly hasFilteredCtssSamples: boolean;
   readonly useStackChartSameWidths: boolean;
+  readonly timelineUnit: TimelineUnit;
 };
 
 type DispatchProps = {
@@ -223,6 +226,7 @@ class StackChartImpl extends React.PureComponent<Props> {
       displayStackType,
       hasFilteredCtssSamples,
       useStackChartSameWidths,
+      timelineUnit,
     } = this.props;
 
     const maxViewportHeight = combinedTimingRows.length * STACK_FRAME_HEIGHT;
@@ -282,6 +286,7 @@ class StackChartImpl extends React.PureComponent<Props> {
                   marginLeft: TIMELINE_MARGIN_LEFT,
                   displayStackType: displayStackType,
                   useStackChartSameWidths,
+                  timelineUnit,
                 }}
               />
             </div>
@@ -324,6 +329,7 @@ export const StackChart = explicitConnect<{}, StateProps, DispatchProps>({
       hasFilteredCtssSamples:
         selectedThreadSelectors.getHasFilteredCtssSamples(state),
       useStackChartSameWidths: getStackChartSameWidths(state),
+      timelineUnit: getProfileTimelineUnit(state),
     };
   },
   mapDispatchToProps: {