Fix null marker stack substitution (#5613)

Example with Focus function transform:
[Production](https://share.firefox.dev/4mW78M3) | [Deploy
preview](https://deploy-preview-5613--perf-html.netlify.app/public/ggqb1y28h0nmwyxaqjdhvrnmfpn58hyeg25cza8/calltree/?globalTrackOrder=q0phkm7in1c9f5g862boela34dj&hiddenGlobalTracks=1wo&hiddenLocalTracksByPid=2465-1w4~92294-0~36702-0~2523-0~36259-0w2~71663-01~71664-0&search=oae&thread=x6&transforms=ff-280&v=11)
Example with JS-only view:
[Production](https://share.firefox.dev/4poRI4M) | [Deploy
preview](https://deploy-preview-5613--perf-html.netlify.app/public/rpnres9s7rdrsfb240wtskvrq5sv7xzn3f4m2p0/calltree/?globalTrackOrder=30w2&hiddenGlobalTracks=01&hiddenLocalTracksByPid=2588-1w3~2591-01&implementation=js&range=9133m2135~9517m70&search=aoeu&tabID=25&thread=f&v=11)

Fixes #5612.

The more stringent array bounds checks from #5599 revealed a bug that I
introduced in #5549: Marker stacks were not being substituted if the
`convertStack` lambda returned null. This PR fixes the type and restores
the working code from before the TypeScript migration.

Author: mstange

src/components/shared/MarkerContextMenu.tsx

@@ -145,10 +145,10 @@ class MarkerContextMenuImpl extends PureComponent<Props> {
     return !marker || marker.end === null;
   }
 
-  _convertStackToString(stack: IndexIntoStackTable): string {
+  _convertStackToString(stack: IndexIntoStackTable | null): string {
     const { thread, implementationFilter } = this.props;
 
-    if (thread === null) {
+    if (thread === null || stack === null) {
       return '';
     }
 

src/components/tooltip/Marker.tsx

@@ -423,40 +423,43 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
       categories,
     } = this.props;
     const { data, start } = marker;
-    if (data && 'cause' in data && data.cause) {
-      const { cause } = data;
-      const causeAge = cause.time !== undefined ? start - cause.time : 0;
-      return [
-        <TooltipDetailSeparator key="backtrace-separator" />,
-        <TooltipDetail label="Stack" key="backtrace">
-          <div className="tooltipDetailsBackTrace">
-            {
-              /* The cause's time might be later than the marker's start. For
+    if (!data || !('cause' in data) || !data.cause) {
+      return null;
+    }
+    const { time, stack } = data.cause;
+    if (stack === null) {
+      return null;
+    }
+    const causeAge = time !== undefined ? start - time : 0;
+    return [
+      <TooltipDetailSeparator key="backtrace-separator" />,
+      <TooltipDetail label="Stack" key="backtrace">
+        <div className="tooltipDetailsBackTrace">
+          {
+            /* The cause's time might be later than the marker's start. For
                 example this happens in some usual cases when the cause is
                 captured right when setting the end marker for tracing pairs of
                 markers. */
-              causeAge > 0 ? (
-                <h2 className="tooltipBackTraceTitle">
-                  {data.type === 'Styles' || marker.name === 'Reflow'
-                    ? `First invalidated ${formatTimestamp(
-                        causeAge
-                      )} before the flush, at:`
-                    : `Triggered ${formatTimestamp(causeAge)} ago, at:`}
-                </h2>
-              ) : null
-            }
-            <Backtrace
-              maxStacks={restrictHeightWidth ? 20 : Infinity}
-              stackIndex={cause.stack}
-              thread={thread}
-              implementationFilter={implementationFilter}
-              categories={categories}
-            />
-          </div>
-        </TooltipDetail>,
-      ];
-    }
-    return null;
+            causeAge > 0 ? (
+              <h2 className="tooltipBackTraceTitle">
+                {data.type === 'Styles' || marker.name === 'Reflow'
+                  ? `First invalidated ${formatTimestamp(
+                      causeAge
+                    )} before the flush, at:`
+                  : `Triggered ${formatTimestamp(causeAge)} ago, at:`}
+              </h2>
+            ) : null
+          }
+          <Backtrace
+            maxStacks={restrictHeightWidth ? 20 : Infinity}
+            stackIndex={stack}
+            thread={thread}
+            implementationFilter={implementationFilter}
+            categories={categories}
+          />
+        </div>
+      </TooltipDetail>,
+    ];
   }
 
   _maybeRenderNetworkPhases() {

src/profile-logic/merge-compare.ts

@@ -1356,7 +1356,8 @@ function mergeMarkers(
       if (oldData && 'cause' in oldData && oldData.cause) {
         // The old data has a cause, we need to convert the stack.
         const oldStack = oldData.cause.stack;
-        const newStack = translationMapForStacks.get(oldStack);
+        const newStack =
+          oldStack !== null ? translationMapForStacks.get(oldStack) : null;
         if (newStack === undefined) {
           throw new Error(
             `Missing old stack entry ${oldStack} in the translation map.`

src/profile-logic/profile-data.ts

@@ -2465,17 +2465,14 @@ export function updateThreadStacks(
     oldData: MarkerPayload | null
   ): MarkerPayload | null {
     if (oldData && 'cause' in oldData && oldData.cause) {
-      const stack = convertStack(oldData.cause.stack);
-      if (stack) {
-        // Replace the cause with the right stack index.
-        return {
-          ...oldData,
-          cause: {
-            ...oldData.cause,
-            stack,
-          },
-        };
-      }
+      // Replace the cause with the right stack index.
+      return {
+        ...oldData,
+        cause: {
+          ...oldData.cause,
+          stack: convertStack(oldData.cause.stack),
+        },
+      };
     }
     return oldData;
   }
@@ -2536,17 +2533,14 @@ export function updateRawThreadStacksSeparate(
     oldData: MarkerPayload | null
   ): MarkerPayload | null {
     if (oldData && 'cause' in oldData && oldData.cause) {
-      const stack = convertSyncBacktraceStack(oldData.cause.stack);
-      if (stack) {
-        // Replace the cause with the right stack index.
-        return {
-          ...oldData,
-          cause: {
-            ...oldData.cause,
-            stack,
-          },
-        };
-      }
+      // Replace the cause with the right stack index.
+      return {
+        ...oldData,
+        cause: {
+          ...oldData.cause,
+          stack: convertSyncBacktraceStack(oldData.cause.stack),
+        },
+      };
     }
     return oldData;
   }

src/types/markers.ts

@@ -201,7 +201,7 @@ export type CauseBacktrace = {
   // No upgrader was written for this change.
   tid?: Tid;
   time?: Milliseconds;
-  stack: IndexIntoStackTable;
+  stack: IndexIntoStackTable | null;
 };
 
 /**