Clear selected and expanded call node paths on browser back button if it removes transforms (#5701)

Fixes #5689.

The root cause of this issue was that expanded call node paths from the
transformed tree remained in state when navigating back via the browser.
These paths were invalid in the untransformed tree, and they were
causing errors when the transform was re-applied.

The fix adds a lastSeenTransformCount field to ThreadViewOptions to
track the number of transforms applied to each thread. When
UPDATE_URL_STATE fires via browser back button, we compare the new
transform count with the old count. If we notice that a transform was
removed, we reset all call node paths to ensure they're always valid for
the current tree structure.

This matches the existing behavior of POP_TRANSFORMS_FROM_STACK
(removing the transform from the filter navigator bar), which already
resets paths.

Author: canova

src/profile-logic/transforms.ts

@@ -600,7 +600,7 @@ function _dropFunctionInCallNodePath(
   return callNodePath.includes(funcIndex) ? [] : callNodePath;
 }
 
-// removes all functions that are not in the category from the callNodePath
+// Removes all functions that are not in the category from the callNodePath
 function _removeOtherCategoryFunctionsInNodePathWithFunction(
   category: IndexIntoCategoryList,
   callNodePath: CallNodePath,

src/reducers/profile-view.ts

@@ -139,6 +139,7 @@ export const defaultThreadViewOptions: ThreadViewOptions = {
   expandedInvertedCallNodePaths: new PathSet(),
   selectedMarker: null,
   selectedNetworkMarker: null,
+  lastSeenTransformCount: 0,
 };
 
 function _getThreadViewOptions(
@@ -378,11 +379,15 @@ const viewOptionsPerThread: Reducer<ThreadViewOptionsPerThreads> = (
         threadViewOptions.expandedInvertedCallNodePaths
       );
 
+      const lastSeenTransformCount =
+        threadViewOptions.lastSeenTransformCount + 1;
+
       return _updateThreadViewOptions(state, threadsKey, {
         selectedNonInvertedCallNodePath,
         selectedInvertedCallNodePath,
         expandedNonInvertedCallNodePaths,
         expandedInvertedCallNodePaths,
+        lastSeenTransformCount,
       });
     }
     case 'POP_TRANSFORMS_FROM_STACK': {
@@ -394,6 +399,38 @@ const viewOptionsPerThread: Reducer<ThreadViewOptionsPerThreads> = (
         selectedInvertedCallNodePath: [],
         expandedNonInvertedCallNodePaths: new PathSet(),
         expandedInvertedCallNodePaths: new PathSet(),
+        lastSeenTransformCount: 0,
+      });
+    }
+    case 'UPDATE_URL_STATE': {
+      // When the URL state changes (e.g., via browser back button), check if the
+      // transform stack has been popped for each thread. If so, reset the stored paths
+      // because they may reference call nodes that only exist in a transformed tree.
+      // See: https://github.com/firefox-devtools/profiler/issues/5689
+      if (!action.newUrlState) {
+        return state;
+      }
+
+      const { transforms } = action.newUrlState.profileSpecific;
+      return objectMap(state, (viewOptions, threadsKey) => {
+        const transformStack = transforms[threadsKey] || [];
+        const newTransformCount = transformStack.length;
+        const oldTransformCount = viewOptions.lastSeenTransformCount;
+
+        // If transform count changed, reset the paths.
+        if (newTransformCount < oldTransformCount) {
+          return {
+            ...viewOptions,
+            selectedNonInvertedCallNodePath: [],
+            selectedInvertedCallNodePath: [],
+            expandedNonInvertedCallNodePaths: new PathSet(),
+            expandedInvertedCallNodePaths: new PathSet(),
+            lastSeenTransformCount: newTransformCount,
+          };
+        }
+
+        // No change needed.
+        return viewOptions;
       });
     }
     case 'CHANGE_IMPLEMENTATION_FILTER': {

src/test/store/__snapshots__/profile-view.test.ts.snap

@@ -4393,6 +4393,7 @@ Object {
       ],
     },
   },
+  "lastSeenTransformCount": 1,
   "selectedInvertedCallNodePath": Array [],
   "selectedMarker": 1,
   "selectedNetworkMarker": null,

src/test/store/transforms.test.ts

@@ -25,6 +25,8 @@ import {
   changeSelectedCallNode,
   changeCallTreeSummaryStrategy,
 } from '../../actions/profile-view';
+import * as AppActions from '../../actions/app';
+import * as UrlStateSelectors from '../../selectors/url-state';
 import { selectedThreadSelectors } from '../../selectors/per-thread';
 
 describe('"focus-subtree" transform', function () {
@@ -819,6 +821,70 @@ describe('"focus-category" transform', function () {
       expect(selectedCallNodePath).toEqual([A, A]);
     });
   });
+
+  describe('browser back button behavior', function () {
+    // This test ensures that when using browser back button after applying
+    // a focus-category transform, re-applying the transform doesn't fail.
+    // The bug occurred because expanded paths from the transformed tree
+    // weren't being reset when the URL state changed via browser navigation.
+    const { threadIndex, categoryIndex, funcNamesDict, getState, dispatch } =
+      setup(`
+        A[cat:Other]  A[cat:Other]
+        B[cat:Other]  B[cat:Other]
+        C[cat:Graphics]  C[cat:Graphics]
+        D[cat:Graphics]  D[cat:Graphics]
+        E[cat:Graphics]  F[cat:Graphics]
+      `);
+
+    it('can re-apply transform after browser back without error', function () {
+      const { C, D, E } = funcNamesDict;
+
+      // Apply focus-category transform.
+      dispatch(
+        addTransformToStack(threadIndex, {
+          type: 'focus-category',
+          category: categoryIndex,
+        })
+      );
+
+      // Select a deep node in the transformed tree, which expands paths.
+      // In the transformed tree, C becomes a root since A and B are filtered out.
+      dispatch(changeSelectedCallNode(threadIndex, [C, D, E]));
+
+      expect(
+        selectedThreadSelectors.getSelectedCallNodePath(getState())
+      ).toEqual([C, D, E]);
+
+      // Capture the current URL state with transforms.
+      const urlStateWithTransforms = UrlStateSelectors.getUrlState(getState());
+
+      // Simulate browser back button by creating a URL state without transforms.
+      const urlStateWithoutTransforms = {
+        ...urlStateWithTransforms,
+        profileSpecific: {
+          ...urlStateWithTransforms.profileSpecific,
+          transforms: {},
+        },
+      };
+
+      // Apply the URL state change (simulating browser back).
+      dispatch(AppActions.updateUrlState(urlStateWithoutTransforms));
+
+      // Re-apply the same transform. This should not throw an error.
+      expect(() => {
+        dispatch(
+          addTransformToStack(threadIndex, {
+            type: 'focus-category',
+            category: categoryIndex,
+          })
+        );
+      }).not.toThrow();
+
+      expect(
+        selectedThreadSelectors.getSelectedCallNodePath(getState())
+      ).toEqual([]);
+    });
+  });
 });
 
 describe('"collapse-resource" transform', function () {

src/types/state.ts

@@ -58,6 +58,10 @@ export type ThreadViewOptions = {
   readonly expandedInvertedCallNodePaths: PathSet;
   readonly selectedMarker: MarkerIndex | null;
   readonly selectedNetworkMarker: MarkerIndex | null;
+  // Track the number of transforms to detect when they change via browser
+  // navigation. This helps us know when to reset paths that may be invalid
+  // in the new transform state.
+  readonly lastSeenTransformCount: number;
 };
 
 export type ThreadViewOptionsPerThreads = {