Deploy Dec 5, 2023

.prettierignore

@@ -1,6 +1,6 @@
 src/types/libdef/npm
 docs-user
-src/test/fixtures/
+src/test/fixtures/upgrades
 res/zee-worker.js
 dist
 coverage

.prettierrc.js

@@ -15,7 +15,7 @@ module.exports = {
       },
     },
     {
-      files: 'bin/*',
+      files: 'bin/*.js',
       options: {
         // Files in bin/ are javascript files that may use Flow comments. We
         // don't want the content of these Flow comments to be output outside of

package.json

@@ -58,20 +58,20 @@
     "@codemirror/lang-rust": "^6.0.1",
     "@codemirror/language": "^6.9.2",
     "@codemirror/state": "^6.3.1",
-    "@codemirror/view": "^6.21.3",
+    "@codemirror/view": "^6.22.0",
     "@firefox-devtools/react-contextmenu": "^5.1.1",
     "@fluent/bundle": "^0.18.0",
     "@fluent/langneg": "^0.7.0",
     "@fluent/react": "^0.15.2",
-    "@lezer/highlight": "^1.1.6",
-    "@tgwf/co2": "^0.13.8",
+    "@lezer/highlight": "^1.2.0",
+    "@tgwf/co2": "^0.13.9",
     "array-move": "^3.0.1",
     "array-range": "^1.0.1",
     "clamp": "^1.0.1",
     "classnames": "^2.3.2",
     "common-tags": "^1.8.2",
     "copy-to-clipboard": "^3.3.3",
-    "core-js": "^3.33.1",
+    "core-js": "^3.33.2",
     "escape-string-regexp": "^4.0.0",
     "gecko-profiler-demangle": "^0.3.3",
     "idb": "^7.1.1",
@@ -84,7 +84,7 @@
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-intersection-observer": "^9.5.2",
+    "react-intersection-observer": "^9.5.3",
     "react-redux": "^8.1.3",
     "react-splitter-layout": "^4.0.0",
     "react-transition-group": "^4.4.5",
@@ -98,16 +98,16 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.2",
-    "@babel/eslint-parser": "^7.22.15",
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
     "@babel/eslint-plugin": "^7.22.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-flow": "^7.22.15",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-flow": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
     "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.1.2",
     "alex": "^11.0.1",
     "autoprefixer": "^10.4.16",
     "babel-jest": "^29.7.0",
@@ -122,7 +122,7 @@
     "css-loader": "^6.8.1",
     "cssnano": "^6.0.1",
     "devtools-license-check": "^0.9.0",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-flowtype": "^8.0.3",
@@ -131,7 +131,7 @@
     "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-testing-library": "^6.1.0",
+    "eslint-plugin-testing-library": "^6.1.2",
     "espree": "^9.6.1",
     "fake-indexeddb": "^4.0.2",
     "fetch-mock-jest": "^1.5.1",
@@ -154,7 +154,7 @@
     "open": "^9.1.0",
     "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "raw-loader": "^4.0.2",
     "rimraf": "^5.0.5",
     "style-loader": "^3.3.3",

src/actions/profile-view.js

@@ -105,26 +105,30 @@ export function changeSelectedCallNode(
   selectedCallNodePath: CallNodePath,
   context: SelectionContext = { source: 'auto' },
   optionalExpandedToCallNodePath?: CallNodePath
-): Action {
-  if (optionalExpandedToCallNodePath) {
-    for (let i = 0; i < selectedCallNodePath.length; i++) {
-      if (selectedCallNodePath[i] !== optionalExpandedToCallNodePath[i]) {
-        // This assertion ensures that the selectedCallNode will be correctly expanded.
-        throw new Error(
-          oneLine`
-            The optional expanded call node path provided to the changeSelectedCallNode
-            must contain the selected call node path.
-          `
-        );
+): ThunkAction<void> {
+  return (dispatch, getState) => {
+    if (optionalExpandedToCallNodePath) {
+      for (let i = 0; i < selectedCallNodePath.length; i++) {
+        if (selectedCallNodePath[i] !== optionalExpandedToCallNodePath[i]) {
+          // This assertion ensures that the selectedCallNode will be correctly expanded.
+          throw new Error(
+            oneLine`
+              The optional expanded call node path provided to the changeSelectedCallNode
+              must contain the selected call node path.
+            `
+          );
+        }
       }
     }
-  }
-  return {
-    type: 'CHANGE_SELECTED_CALL_NODE',
-    selectedCallNodePath,
-    optionalExpandedToCallNodePath,
-    threadsKey,
-    context,
+    const isInverted = getInvertCallstack(getState());
+    dispatch({
+      type: 'CHANGE_SELECTED_CALL_NODE',
+      isInverted,
+      selectedCallNodePath,
+      optionalExpandedToCallNodePath,
+      threadsKey,
+      context,
+    });
   };
 }
 
@@ -1637,14 +1641,17 @@ export function expandAllCallNodeDescendants(
 export function changeExpandedCallNodes(
   threadsKey: ThreadsKey,
   expandedCallNodePaths: Array<CallNodePath>
-): Action {
-  return {
-    type: 'CHANGE_EXPANDED_CALL_NODES',
-    threadsKey,
-    expandedCallNodePaths,
+): ThunkAction<void> {
+  return (dispatch, getState) => {
+    const isInverted = getInvertCallstack(getState());
+    dispatch({
+      type: 'CHANGE_EXPANDED_CALL_NODES',
+      isInverted,
+      threadsKey,
+      expandedCallNodePaths,
+    });
   };
 }
-
 export function changeSelectedMarker(
   threadsKey: ThreadsKey,
   selectedMarker: MarkerIndex | null,
@@ -1772,13 +1779,16 @@ export function changeInvertCallstack(
       eventCategory: 'profile',
       eventAction: 'change invert callstack',
     });
+    const callTree = selectedThreadSelectors.getCallTree(getState());
+    const selectedCallNode =
+      selectedThreadSelectors.getSelectedCallNodeIndex(getState());
+    const newSelectedCallNodePath =
+      callTree.findHeavyPathToSameFunctionAfterInversion(selectedCallNode);
     dispatch({
       type: 'CHANGE_INVERT_CALLSTACK',
       invertCallstack,
       selectedThreadIndexes: getSelectedThreadIndexes(getState()),
-      callTree: selectedThreadSelectors.getCallTree(getState()),
-      callNodeTable: selectedThreadSelectors.getCallNodeInfo(getState())
-        .callNodeTable,
+      newSelectedCallNodePath,
     });
   };
 }

src/components/calltree/CallTree.js

@@ -71,7 +71,7 @@ type StateProps = {|
   +disableOverscan: boolean,
   +invertCallstack: boolean,
   +implementationFilter: ImplementationFilter,
-  +callNodeMaxDepth: number,
+  +callNodeMaxDepthPlusOne: number,
   +weightType: WeightType,
   +tableViewOptions: TableViewOptions,
 |};
@@ -359,7 +359,7 @@ class CallTreeImpl extends PureComponent<Props> {
       expandedCallNodeIndexes,
       searchStringsRegExp,
       disableOverscan,
-      callNodeMaxDepth,
+      callNodeMaxDepthPlusOne,
       weightType,
       tableViewOptions,
       onTableViewOptionsChange,
@@ -383,7 +383,7 @@ class CallTreeImpl extends PureComponent<Props> {
         disableOverscan={disableOverscan}
         ref={this._takeTreeViewRef}
         contextMenuId="CallNodeContextMenu"
-        maxNodeDepth={callNodeMaxDepth}
+        maxNodeDepth={callNodeMaxDepthPlusOne}
         rowHeight={16}
         indentWidth={10}
         onKeyDown={this._onKeyDown}
@@ -417,8 +417,8 @@ export const CallTree = explicitConnect<{||}, StateProps, DispatchProps>({
     // Use the filtered call node max depth, rather than the preview filtered call node
     // max depth so that the width of the TreeView component is stable across preview
     // selections.
-    callNodeMaxDepth:
-      selectedThreadSelectors.getFilteredCallNodeMaxDepth(state),
+    callNodeMaxDepthPlusOne:
+      selectedThreadSelectors.getFilteredCallNodeMaxDepthPlusOne(state),
     weightType: selectedThreadSelectors.getWeightTypeForCallTree(state),
     tableViewOptions: getCurrentTableViewOptions(state),
   }),

src/components/flame-graph/Canvas.js

@@ -57,7 +57,7 @@ export type OwnProps = {|
   +innerWindowIDToPageMap: Map<InnerWindowID, Page> | null,
   +unfilteredThread: Thread,
   +sampleIndexOffset: number,
-  +maxStackDepth: number,
+  +maxStackDepthPlusOne: number,
   +flameGraphTiming: FlameGraphTiming,
   +callNodeInfo: CallNodeInfo,
   +callTree: CallTree,
@@ -128,10 +128,11 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
     // selection or applying a transform), move the viewport
     // vertically so that its offset from the base of the flame graph
     // is maintained.
-    if (prevProps.maxStackDepth !== this.props.maxStackDepth) {
+    if (prevProps.maxStackDepthPlusOne !== this.props.maxStackDepthPlusOne) {
       this.props.viewport.moveViewport(
         0,
-        (prevProps.maxStackDepth - this.props.maxStackDepth) * ROW_HEIGHT
+        (prevProps.maxStackDepthPlusOne - this.props.maxStackDepthPlusOne) *
+          ROW_HEIGHT
       );
     }
 
@@ -155,7 +156,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
   _scrollSelectionIntoView = () => {
     const {
       selectedCallNodeIndex,
-      maxStackDepth,
+      maxStackDepthPlusOne,
       callNodeInfo: { callNodeTable },
     } = this.props;
 
@@ -164,7 +165,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
     }
 
     const depth = callNodeTable.depth[selectedCallNodeIndex];
-    const y = (maxStackDepth - depth - 1) * ROW_HEIGHT;
+    const y = (maxStackDepthPlusOne - depth - 1) * ROW_HEIGHT;
 
     if (y < this.props.viewport.viewportTop) {
       this.props.viewport.moveViewport(0, this.props.viewport.viewportTop - y);
@@ -186,7 +187,7 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       flameGraphTiming,
       callNodeInfo: { callNodeTable },
       stackFrameHeight,
-      maxStackDepth,
+      maxStackDepthPlusOne,
       rightClickedCallNodeIndex,
       selectedCallNodeIndex,
       categories,
@@ -237,9 +238,11 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
     ctx.fillRect(0, 0, deviceContainerWidth, deviceContainerHeight);
 
     const startDepth = Math.floor(
-      maxStackDepth - viewportBottom / stackFrameHeight
+      maxStackDepthPlusOne - viewportBottom / stackFrameHeight
+    );
+    const endDepth = Math.ceil(
+      maxStackDepthPlusOne - viewportTop / stackFrameHeight
     );
-    const endDepth = Math.ceil(maxStackDepth - viewportTop / stackFrameHeight);
 
     // Only draw the stack frames that are vertically within view.
     // The graph is drawn from bottom to top, in order of increasing depth.
@@ -252,9 +255,9 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
       }
 
       const cssRowTop: CssPixels =
-        (maxStackDepth - depth - 1) * ROW_HEIGHT - viewportTop;
+        (maxStackDepthPlusOne - depth - 1) * ROW_HEIGHT - viewportTop;
       const cssRowBottom: CssPixels =
-        (maxStackDepth - depth) * ROW_HEIGHT - viewportTop;
+        (maxStackDepthPlusOne - depth) * ROW_HEIGHT - viewportTop;
       const deviceRowTop: DevicePixels = snap(cssRowTop * cssToDeviceScale);
       const deviceRowBottom: DevicePixels =
         snap(cssRowBottom * cssToDeviceScale) - 1;
@@ -473,11 +476,13 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
   _hitTest = (x: CssPixels, y: CssPixels): HoveredStackTiming | null => {
     const {
       flameGraphTiming,
-      maxStackDepth,
+      maxStackDepthPlusOne,
       viewport: { viewportTop, containerWidth },
     } = this.props;
     const pos = x / containerWidth;
-    const depth = Math.floor(maxStackDepth - (y + viewportTop) / ROW_HEIGHT);
+    const depth = Math.floor(
+      maxStackDepthPlusOne - (y + viewportTop) / ROW_HEIGHT
+    );
     const stackTiming = flameGraphTiming[depth];
 
     if (!stackTiming) {

src/components/flame-graph/FlameGraph.js

@@ -72,7 +72,7 @@ type StateProps = {|
   +innerWindowIDToPageMap: Map<InnerWindowID, Page> | null,
   +unfilteredThread: Thread,
   +sampleIndexOffset: number,
-  +maxStackDepth: number,
+  +maxStackDepthPlusOne: number,
   +timeRange: StartEndRange,
   +previewSelection: PreviewSelection,
   +flameGraphTiming: FlameGraphTiming,
@@ -327,7 +327,7 @@ class FlameGraphImpl extends React.PureComponent<Props> {
       unfilteredThread,
       sampleIndexOffset,
       threadsKey,
-      maxStackDepth,
+      maxStackDepthPlusOne,
       flameGraphTiming,
       callTree,
       callNodeInfo,
@@ -349,7 +349,7 @@ class FlameGraphImpl extends React.PureComponent<Props> {
       displayStackType,
     } = this.props;
 
-    const maxViewportHeight = maxStackDepth * STACK_FRAME_HEIGHT;
+    const maxViewportHeight = maxStackDepthPlusOne * STACK_FRAME_HEIGHT;
 
     return (
       <div className="flameGraphContent" onKeyDown={this._handleKeyDown}>
@@ -381,7 +381,7 @@ class FlameGraphImpl extends React.PureComponent<Props> {
               weightType,
               unfilteredThread,
               sampleIndexOffset,
-              maxStackDepth,
+              maxStackDepthPlusOne,
               flameGraphTiming,
               callTree,
               callNodeInfo,
@@ -427,7 +427,8 @@ export const FlameGraph = explicitConnect<{||}, StateProps, DispatchProps>({
       selectedThreadSelectors.getSampleIndexOffsetFromCommittedRange(state),
     // Use the filtered call node max depth, rather than the preview filtered one, so
     // that the viewport height is stable across preview selections.
-    maxStackDepth: selectedThreadSelectors.getFilteredCallNodeMaxDepth(state),
+    maxStackDepthPlusOne:
+      selectedThreadSelectors.getFilteredCallNodeMaxDepthPlusOne(state),
     flameGraphTiming: selectedThreadSelectors.getFlameGraphTiming(state),
     callTree: selectedThreadSelectors.getCallTree(state),
     timeRange: getCommittedRange(state),

src/components/flame-graph/MaybeFlameGraph.js

@@ -16,6 +16,10 @@ import type { ConnectedProps } from 'firefox-profiler/utils/connect';
 
 import './MaybeFlameGraph.css';
 
+// TODO: This component isn't needed any more. Whenever the selected tab
+// is "flame-graph", `invertCallstack` will be `false`. <MaybeFlameGraph /> is
+// only used in the "flame-graph" tab.
+
 type StateProps = {|
   +isPreviewSelectionEmpty: boolean,
   +invertCallstack: boolean,
@@ -72,8 +76,9 @@ export const MaybeFlameGraph = explicitConnect<{||}, StateProps, DispatchProps>(
       return {
         invertCallstack: getInvertCallstack(state),
         isPreviewSelectionEmpty:
-          selectedThreadSelectors.getPreviewFilteredCallNodeMaxDepth(state) ===
-          0,
+          selectedThreadSelectors.getPreviewFilteredCallNodeMaxDepthPlusOne(
+            state
+          ) === 0,
       };
     },
     mapDispatchToProps: {