[Deploy preview] Add a function list

.eslintignore

@@ -2,3 +2,4 @@ src/profile-logic/import/proto
 src/types/libdef/npm
 docs-user
 coverage
+.jj

.prettierignore

@@ -7,3 +7,4 @@ dist
 coverage
 taskcluster/
 .taskcluster.yml
+.jj

locales/en-US/app.ftl

@@ -818,6 +818,7 @@ StackSettings--panel-search =
 ## Tab Bar for the bottom half of the analysis UI.
 
 TabBar--calltree-tab = Call Tree
+TabBar--function-list-tab = Function Table
 TabBar--flame-graph-tab = Flame Graph
 TabBar--stack-chart-tab = Stack Chart
 TabBar--marker-chart-tab = Marker Chart

res/css/style.css

@@ -57,7 +57,8 @@ body {
   flex-shrink: 1;
 }
 
-.treeAndSidebarWrapper {
+.treeAndSidebarWrapper,
+.functionTableAndSidebarWrapper {
   display: flex;
   flex: 1;
   flex-flow: column nowrap;

src/actions/profile-view.js

@@ -65,9 +65,9 @@ import type {
   Pid,
   IndexIntoSamplesTable,
   CallNodePath,
-  CallNodeInfo,
   IndexIntoCallNodeTable,
   IndexIntoResourceTable,
+  IndexIntoFuncTable,
   TrackIndex,
   MarkerIndex,
   Transform,
@@ -86,6 +86,7 @@ import {
 } from '../profile-logic/transforms';
 import { changeStoredProfileNameInDb } from 'firefox-profiler/app-logic/uploaded-profiles-db';
 import type { TabSlug } from '../app-logic/tabs-handling';
+import type { CallNodeInfo } from '../profile-logic/call-node-info';
 import { intersectSets } from 'firefox-profiler/utils/set';
 
 /**
@@ -124,7 +125,7 @@ export function changeSelectedCallNode(
     const isInverted = getInvertCallstack(getState());
     dispatch({
       type: 'CHANGE_SELECTED_CALL_NODE',
-      isInverted,
+      area: isInverted ? 'INVERTED_TREE' : 'NON_INVERTED_TREE',
       selectedCallNodePath,
       optionalExpandedToCallNodePath,
       threadsKey,
@@ -133,6 +134,52 @@ export function changeSelectedCallNode(
   };
 }
 
+export function changeLowerWingSelectedCallNode(
+  threadsKey: ThreadsKey,
+  selectedCallNodePath: CallNodePath,
+  context: SelectionContext = { source: 'auto' }
+): Action {
+  return {
+    type: 'CHANGE_SELECTED_CALL_NODE',
+    area: 'LOWER_WING',
+    selectedCallNodePath,
+    optionalExpandedToCallNodePath: [],
+    threadsKey,
+    context,
+  };
+}
+
+export function changeUpperWingSelectedCallNode(
+  threadsKey: ThreadsKey,
+  selectedCallNodePath: CallNodePath,
+  context: SelectionContext = { source: 'auto' }
+): Action {
+  return {
+    type: 'CHANGE_SELECTED_CALL_NODE',
+    area: 'UPPER_WING',
+    selectedCallNodePath,
+    optionalExpandedToCallNodePath: [],
+    threadsKey,
+    context,
+  };
+}
+
+/**
+ * Select a function for a given thread in the function list.
+ */
+export function changeSelectedFunctionIndex(
+  threadsKey: ThreadsKey,
+  selectedFunctionIndex: IndexIntoFuncTable | null,
+  context: SelectionContext = { source: 'auto' }
+): Action {
+  return {
+    type: 'CHANGE_SELECTED_FUNCTION',
+    selectedFunctionIndex,
+    threadsKey,
+    context,
+  };
+}
+
 /**
  * This action is used when the user right clicks on a call node (in panels such
  * as the call tree, the flame chart, or the stack chart). It's especially used
@@ -141,10 +188,49 @@ export function changeSelectedCallNode(
 export function changeRightClickedCallNode(
   threadsKey: ThreadsKey,
   callNodePath: CallNodePath | null
+): ThunkAction<void> {
+  return (dispatch, getState) => {
+    const isInverted = getInvertCallstack(getState());
+    dispatch({
+      type: 'CHANGE_RIGHT_CLICKED_CALL_NODE',
+      threadsKey,
+      area: isInverted ? 'INVERTED_TREE' : 'NON_INVERTED_TREE',
+      callNodePath,
+    });
+  };
+}
+
+export function changeRightClickedFunctionIndex(
+  threadsKey: ThreadsKey,
+  functionIndex: IndexIntoFuncTable | null
+) {
+  return {
+    type: 'CHANGE_RIGHT_CLICKED_FUNCTION',
+    threadsKey,
+    functionIndex,
+  };
+}
+
+export function changeLowerWingRightClickedCallNode(
+  threadsKey: ThreadsKey,
+  callNodePath: CallNodePath | null
+) {
+  return {
+    type: 'CHANGE_RIGHT_CLICKED_CALL_NODE',
+    threadsKey,
+    area: 'LOWER_WING',
+    callNodePath,
+  };
+}
+
+export function changeUpperWingRightClickedCallNode(
+  threadsKey: ThreadsKey,
+  callNodePath: CallNodePath | null
 ) {
   return {
     type: 'CHANGE_RIGHT_CLICKED_CALL_NODE',
     threadsKey,
+    area: 'UPPER_WING',
     callNodePath,
   };
 }
@@ -1632,12 +1718,37 @@ export function changeExpandedCallNodes(
     const isInverted = getInvertCallstack(getState());
     dispatch({
       type: 'CHANGE_EXPANDED_CALL_NODES',
-      isInverted,
+      area: isInverted ? 'INVERTED_TREE' : 'NON_INVERTED_TREE',
       threadsKey,
       expandedCallNodePaths,
     });
   };
 }
+
+export function changeLowerWingExpandedCallNodes(
+  threadsKey: ThreadsKey,
+  expandedCallNodePaths: Array<CallNodePath>
+): Action {
+  return {
+    type: 'CHANGE_EXPANDED_CALL_NODES',
+    area: 'LOWER_WING',
+    threadsKey,
+    expandedCallNodePaths,
+  };
+}
+
+export function changeUpperWingExpandedCallNodes(
+  threadsKey: ThreadsKey,
+  expandedCallNodePaths: Array<CallNodePath>
+): Action {
+  return {
+    type: 'CHANGE_EXPANDED_CALL_NODES',
+    area: 'UPPER_WING',
+    threadsKey,
+    expandedCallNodePaths,
+  };
+}
+
 export function changeSelectedMarker(
   threadsKey: ThreadsKey,
   selectedMarker: MarkerIndex | null,
@@ -2035,12 +2146,13 @@ export function handleCallNodeTransformShortcut(
     const threadSelectors = getThreadSelectorsFromThreadsKey(threadsKey);
     const unfilteredThread = threadSelectors.getThread(getState());
     const callNodeInfo = threadSelectors.getCallNodeInfo(getState());
-    const callNodeTable = callNodeInfo.getCallNodeTable();
     const implementation = getImplementationFilter(getState());
     const inverted = getInvertCallstack(getState());
     const callNodePath = callNodeInfo.getCallNodePathFromIndex(callNodeIndex);
-    const funcIndex = callNodeTable.func[callNodeIndex];
-    const category = callNodeTable.category[callNodeIndex];
+    const funcIndex = callNodeInfo.funcForNode(callNodeIndex);
+    const category = callNodeInfo.categoryForNode(callNodeIndex);
+
+    const nonInvertedCallNodeTable = callNodeInfo.getNonInvertedCallNodeTable();
 
     switch (event.key) {
       case 'F':
@@ -2099,7 +2211,7 @@ export function handleCallNodeTransformShortcut(
         break;
       }
       case 'r': {
-        if (funcHasRecursiveCall(callNodeTable, funcIndex)) {
+        if (funcHasRecursiveCall(nonInvertedCallNodeTable, funcIndex)) {
           dispatch(
             addTransformToStack(threadsKey, {
               type: 'collapse-recursion',
@@ -2110,7 +2222,7 @@ export function handleCallNodeTransformShortcut(
         break;
       }
       case 'R': {
-        if (funcHasDirectRecursiveCall(callNodeTable, funcIndex)) {
+        if (funcHasDirectRecursiveCall(nonInvertedCallNodeTable, funcIndex)) {
           dispatch(
             addTransformToStack(threadsKey, {
               type: 'collapse-direct-recursion',

src/app-logic/tabs-handling.js

@@ -11,6 +11,7 @@
  */
 export const tabsWithTitleL10nId = {
   calltree: 'TabBar--calltree-tab',
+  'function-list': 'TabBar--function-list-tab',
   'flame-graph': 'TabBar--flame-graph-tab',
   'stack-chart': 'TabBar--stack-chart-tab',
   'marker-chart': 'TabBar--marker-chart-tab',
@@ -43,6 +44,7 @@ export const tabsWithTitleL10nIdArray: $ReadOnlyArray<TabsWithTitleL10nId> =
 
 export const tabsShowingSampleData: $ReadOnlyArray<TabSlug> = [
   'calltree',
+  'function-list',
   'flame-graph',
   'stack-chart',
 ];

src/app-logic/url-handling.js

@@ -386,6 +386,7 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
   switch (selectedTab) {
     case 'stack-chart':
     case 'flame-graph':
+    case 'function-list':
     case 'calltree': {
       if (selectedTab === 'stack-chart') {
         // Stack chart uses all of the CallTree's query strings but also has an

src/components/app/BottomBox.js

@@ -18,10 +18,12 @@ import {
   getAssemblyViewIsOpen,
   getAssemblyViewNativeSymbol,
   getAssemblyViewScrollGeneration,
+  // getSelectedTab,
 } from 'firefox-profiler/selectors/url-state';
 import {
   selectedThreadSelectors,
   selectedNodeSelectors,
+  // selectedFunctionTableNodeSelectors,
 } from 'firefox-profiler/selectors/per-thread';
 import { closeBottomBox } from 'firefox-profiler/actions/profile-view';
 import { parseFileNameFromSymbolication } from 'firefox-profiler/utils/special-paths';
@@ -284,7 +286,10 @@ export const BottomBox = explicitConnect<{||}, StateProps, DispatchProps>({
   mapStateToProps: (state) => ({
     sourceViewFile: getSourceViewFile(state),
     sourceViewCode: getSourceViewCode(state),
-    globalLineTimings: selectedThreadSelectors.getSourceViewLineTimings(state),
+    globalLineTimings:
+      // getSelectedTab(state) === 'function-list'
+      //   ? selectedFunctionTableNodeSelectors.getSourceViewLineTimings(state) :
+      selectedNodeSelectors.getSourceViewLineTimings(state),
     selectedCallNodeLineTimings:
       selectedNodeSelectors.getSourceViewLineTimings(state),
     sourceViewScrollGeneration: getSourceViewScrollGeneration(state),

src/components/app/Details.js

@@ -12,6 +12,7 @@ import explicitConnect from 'firefox-profiler/utils/connect';
 import { TabBar } from './TabBar';
 import { LocalizedErrorBoundary } from './ErrorBoundary';
 import { ProfileCallTreeView } from 'firefox-profiler/components/calltree/ProfileCallTreeView';
+import { ProfileFunctionListView } from 'firefox-profiler/components/calltree/ProfileFunctionListView';
 import { MarkerTable } from 'firefox-profiler/components/marker-table';
 import { StackChart } from 'firefox-profiler/components/stack-chart/';
 import { MarkerChart } from 'firefox-profiler/components/marker-chart/';
@@ -113,6 +114,7 @@ class ProfileViewerImpl extends PureComponent<Props> {
             {
               {
                 calltree: <ProfileCallTreeView />,
+                'function-list': <ProfileFunctionListView />,
                 'flame-graph': <FlameGraph />,
                 'stack-chart': <StackChart />,
                 'marker-chart': <MarkerChart />,

src/components/app/DetailsContainer.css

@@ -4,7 +4,7 @@
   box-sizing: border-box;
 }
 
-.DetailsContainer .layout-pane:not(.layout-pane-primary) {
+.DetailsContainer > .layout-pane:not(.layout-pane-primary) {
   max-width: 600px;
 }
 
@@ -15,12 +15,12 @@
   position: unset;
 }
 
-.DetailsContainer .layout-splitter {
+.DetailsContainer > .layout-splitter {
   border-top: 1px solid var(--grey-30);
   border-left: 1px solid var(--grey-30);
   background: var(--grey-10); /* Same background as sidebars */
 }
 
-.DetailsContainer .layout-splitter:hover {
+.DetailsContainer > .layout-splitter:hover {
   background: var(--grey-30); /* same as the border above */
 }

src/components/calltree/Butterfly.css

@@ -0,0 +1,9 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.butterflyWrapper {
+  position: relative;
+  min-height: 0;
+  flex: 1;
+}