Use the equalWidths values in the canvas drawing

Author: julienw

src/components/stack-chart/Canvas.js

@@ -48,6 +48,7 @@ import type {
 } from '../shared/chart/Canvas';
 
 import type {
+  StackTimingByDepth,
   StackTimingDepth,
   IndexIntoStackTiming,
 } from '../../profile-logic/stack-timing';
@@ -62,6 +63,7 @@ type OwnProps = {|
   +rangeStart: Milliseconds,
   +rangeEnd: Milliseconds,
   +combinedTimingRows: CombinedTimingRows,
+  +stackTimingRows: StackTimingByDepth,
   +stackFrameHeight: CssPixels,
   +updatePreviewSelection: WrapFunctionInDispatch<
     typeof updatePreviewSelection,
@@ -77,6 +79,7 @@ type OwnProps = {|
   +scrollToSelectionGeneration: number,
   +marginLeft: CssPixels,
   +displayStackType: boolean,
+  +stackChartSameWidths: boolean,
 |};
 
 type Props = $ReadOnly<{|
@@ -161,12 +164,14 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
       rangeStart,
       rangeEnd,
       combinedTimingRows,
+      stackTimingRows,
       stackFrameHeight,
       selectedCallNodeIndex,
       categories,
       callNodeInfo,
       getMarker,
       marginLeft,
+      stackChartSameWidths,
       viewport: {
         containerWidth,
         containerHeight,
@@ -223,6 +228,11 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
     const rangeLength: Milliseconds = rangeEnd - rangeStart;
     const viewportRangeLength: Milliseconds = rangeLength * viewportLength;
 
+    const timingAtDepthZero = stackTimingRows[0];
+    const sameWidthsLength =
+      timingAtDepthZero.sameWidthsEnd[timingAtDepthZero.length - 1] -
+      timingAtDepthZero.sameWidthsStart[0];
+
     const innerContainerWidth =
       containerWidth - marginLeft - TIMELINE_MARGIN_RIGHT;
     const innerDevicePixelsWidth = innerContainerWidth * cssToDeviceScale;
@@ -296,9 +306,13 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
 
           // First compute the left and right sides of the box.
           const viewportAtStartTime: UnitIntervalOfProfileRange =
-            (stackTiming.start[i] - rangeStart) / rangeLength;
+            stackChartSameWidths && stackTiming.sameWidthsStart
+              ? stackTiming.sameWidthsStart[i] / sameWidthsLength
+              : (stackTiming.start[i] - rangeStart) / rangeLength;
           const viewportAtEndTime: UnitIntervalOfProfileRange =
-            (stackTiming.end[i] - rangeStart) / rangeLength;
+            stackChartSameWidths && stackTiming.sameWidthsEnd
+              ? stackTiming.sameWidthsEnd[i] / sameWidthsLength
+              : (stackTiming.end[i] - rangeStart) / rangeLength;
           const floatX = pixelAtViewportPosition(viewportAtStartTime);
           const floatW: DevicePixels =
             ((viewportAtEndTime - viewportAtStartTime) *
@@ -555,6 +569,7 @@ class StackChartCanvasImpl extends React.PureComponent<Props> {
     const {
       rangeStart,
       rangeEnd,
+      stackTimingRows,
       combinedTimingRows,
       marginLeft,
       viewport: { viewportLeft, viewportRight, viewportTop, containerWidth },

src/components/stack-chart/index.js

@@ -19,11 +19,13 @@ import {
   getInnerWindowIDToPageMap,
   getProfileUsesMultipleStackTypes,
 } from '../../selectors/profile';
-import { selectedThreadSelectors } from '../../selectors/per-thread';
 import {
+  getStackChartSameWidths,
   getShowUserTimings,
   getSelectedThreadsKey,
-} from '../../selectors/url-state';
+} from 'firefox-profiler/selectors/url-state';
+import type { StackTimingByDepth } from 'firefox-profiler/profile-logic/stack-timing';
+import { selectedThreadSelectors } from '../../selectors/per-thread';
 import { getTimelineMarginLeft } from '../../selectors/app';
 import { StackChartEmptyReasons } from './StackChartEmptyReasons';
 import { ContextMenuTrigger } from '../shared/ContextMenuTrigger';
@@ -70,6 +72,7 @@ type StateProps = {|
   +weightType: WeightType,
   +innerWindowIDToPageMap: Map<InnerWindowID, Page> | null,
   +combinedTimingRows: CombinedTimingRows,
+  +stackTimingRows: StackTimingByDepth,
   +timeRange: StartEndRange,
   +interval: Milliseconds,
   +previewSelection: PreviewSelection,
@@ -84,6 +87,7 @@ type StateProps = {|
   +timelineMarginLeft: CssPixels,
   +displayStackType: boolean,
   +hasFilteredCtssSamples: boolean,
+  +stackChartSameWidths: boolean,
 |};
 
 type DispatchProps = {|
@@ -205,6 +209,7 @@ class StackChartImpl extends React.PureComponent<Props> {
       thread,
       threadsKey,
       combinedTimingRows,
+      stackTimingRows,
       timeRange,
       interval,
       previewSelection,
@@ -221,6 +226,7 @@ class StackChartImpl extends React.PureComponent<Props> {
       timelineMarginLeft,
       displayStackType,
       hasFilteredCtssSamples,
+      stackChartSameWidths,
     } = this.props;
 
     const maxViewportHeight = combinedTimingRows.length * STACK_FRAME_HEIGHT;
@@ -262,6 +268,7 @@ class StackChartImpl extends React.PureComponent<Props> {
                   innerWindowIDToPageMap,
                   threadsKey,
                   combinedTimingRows,
+                  stackTimingRows,
                   getMarker,
                   // $FlowFixMe Error introduced by upgrading to v0.96.0. See issue #1936.
                   updatePreviewSelection,
@@ -279,6 +286,7 @@ class StackChartImpl extends React.PureComponent<Props> {
                   scrollToSelectionGeneration,
                   marginLeft: timelineMarginLeft,
                   displayStackType: displayStackType,
+                  stackChartSameWidths,
                 }}
               />
             </div>
@@ -292,14 +300,17 @@ class StackChartImpl extends React.PureComponent<Props> {
 export const StackChart = explicitConnect<{||}, StateProps, DispatchProps>({
   mapStateToProps: (state) => {
     const showUserTimings = getShowUserTimings(state);
+    const stackTimingRows =
+      selectedThreadSelectors.getStackTimingByDepth(state);
     const combinedTimingRows = showUserTimings
       ? selectedThreadSelectors.getCombinedTimingRows(state)
-      : selectedThreadSelectors.getStackTimingByDepth(state);
+      : stackTimingRows;
 
     return {
       thread: selectedThreadSelectors.getFilteredThread(state),
       // Use the raw WeightType here, as the stack chart does not use the call tree
       weightType: selectedThreadSelectors.getSamplesWeightType(state),
+      stackTimingRows,
       combinedTimingRows,
       timeRange: getCommittedRange(state),
       interval: getProfileInterval(state),
@@ -319,6 +330,7 @@ export const StackChart = explicitConnect<{||}, StateProps, DispatchProps>({
       displayStackType: getProfileUsesMultipleStackTypes(state),
       hasFilteredCtssSamples:
         selectedThreadSelectors.getHasFilteredCtssSamples(state),
+      stackChartSameWidths: getStackChartSameWidths(state),
     };
   },
   mapDispatchToProps: {