diff --git a/src/actions/profile-view.ts b/src/actions/profile-view.ts
index 80c350cfd9..d53d90b1d4 100644
--- a/src/actions/profile-view.ts
+++ b/src/actions/profile-view.ts
@@ -34,6 +34,7 @@ import {
getHiddenLocalTracks,
getInvertCallstack,
getHash,
+ getUrlState,
} from 'firefox-profiler/selectors/url-state';
import {
assertExhaustiveCheck,
@@ -74,12 +75,16 @@ import type {
TableViewOptions,
SelectionContext,
BottomBoxInfo,
+ IndexIntoFuncTable,
+ CallNodeArea,
+ WingName,
} from 'firefox-profiler/types';
import {
funcHasDirectRecursiveCall,
funcHasRecursiveCall,
} from '../profile-logic/transforms';
import { changeStoredProfileNameInDb } from 'firefox-profiler/app-logic/uploaded-profiles-db';
+import { replaceHistoryWithUrlState } from 'firefox-profiler/app-logic/url-handling';
import type { TabSlug } from '../app-logic/tabs-handling';
import type { CallNodeInfo } from '../profile-logic/call-node-info';
import type { SingleColumnSortState } from '../components/shared/TreeView';
@@ -121,7 +126,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,
@@ -130,6 +135,53 @@ export function changeSelectedCallNode(
};
}
+const WING_AREAS: Record
= {
+ upper: 'UPPER_WING',
+ lower: 'LOWER_WING',
+};
+
+export function changeWingSelectedCallNode(
+ wing: WingName,
+ threadsKey: ThreadsKey,
+ selectedCallNodePath: CallNodePath,
+ context: SelectionContext = { source: 'auto' }
+): Action {
+ return {
+ type: 'CHANGE_SELECTED_CALL_NODE',
+ area: WING_AREAS[wing],
+ selectedCallNodePath,
+ optionalExpandedToCallNodePath: [],
+ threadsKey,
+ context,
+ };
+}
+
+/**
+ * Select a function for a given thread in the function list.
+ *
+ * Replaces the current history entry rather than pushing a new one, so that
+ * holding e.g. the down arrow key in the function list doesn't get rate-limited
+ * by the browser and doesn't flood the back/forward history.
+ */
+export function changeSelectedFunctionIndex(
+ threadsKey: ThreadsKey,
+ selectedFunctionIndex: IndexIntoFuncTable | null,
+ context: SelectionContext = { source: 'auto' }
+): ThunkAction {
+ return (dispatch, getState) => {
+ dispatch({
+ type: 'CHANGE_SELECTED_FUNCTION',
+ selectedFunctionIndex,
+ threadsKey,
+ context,
+ });
+ // Update window.history synchronously instead of waiting for the
+ // UrlManager's componentDidUpdate, which is deferred by React's render
+ // scheduling and would otherwise pushState a new entry.
+ replaceHistoryWithUrlState(getUrlState(getState()));
+ };
+}
+
/**
* 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
@@ -138,10 +190,38 @@ export function changeSelectedCallNode(
export function changeRightClickedCallNode(
threadsKey: ThreadsKey,
callNodePath: CallNodePath | null
+): ThunkAction {
+ 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
+): Action {
+ return {
+ type: 'CHANGE_RIGHT_CLICKED_FUNCTION',
+ threadsKey,
+ functionIndex,
+ };
+}
+
+export function changeWingRightClickedCallNode(
+ wing: WingName,
+ threadsKey: ThreadsKey,
+ callNodePath: CallNodePath | null
): Action {
return {
type: 'CHANGE_RIGHT_CLICKED_CALL_NODE',
threadsKey,
+ area: WING_AREAS[wing],
callNodePath,
};
}
@@ -208,6 +288,40 @@ export function selectSelfCallNode(
};
}
+/**
+ * Like selectSelfCallNode, but selects the function of the self call node
+ * instead. Used when the function list tab is active.
+ */
+export function selectSelfFunction(
+ threadsKey: ThreadsKey,
+ sampleIndex: IndexIntoSamplesTable | null
+): ThunkAction {
+ return (dispatch, getState) => {
+ if (sampleIndex === null || sampleIndex < 0) {
+ dispatch(changeSelectedFunctionIndex(threadsKey, null));
+ return;
+ }
+ const threadSelectors = getThreadSelectorsFromThreadsKey(threadsKey);
+ const sampleCallNodes =
+ threadSelectors.getSampleIndexToNonInvertedCallNodeIndexForFilteredThread(
+ getState()
+ );
+ if (sampleIndex >= sampleCallNodes.length) {
+ dispatch(changeSelectedFunctionIndex(threadsKey, null));
+ return;
+ }
+ const nonInvertedSelfCallNode = sampleCallNodes[sampleIndex];
+ if (nonInvertedSelfCallNode === null) {
+ dispatch(changeSelectedFunctionIndex(threadsKey, null));
+ return;
+ }
+ const callNodeInfo = threadSelectors.getCallNodeInfo(getState());
+ const funcIndex =
+ callNodeInfo.getCallNodeTable().func[nonInvertedSelfCallNode];
+ dispatch(changeSelectedFunctionIndex(threadsKey, funcIndex));
+ };
+}
+
/**
* This selects a set of thread from thread indexes.
* Please use it in tests only.
@@ -1546,12 +1660,26 @@ 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 changeWingExpandedCallNodes(
+ wing: WingName,
+ threadsKey: ThreadsKey,
+ expandedCallNodePaths: Array
+): Action {
+ return {
+ type: 'CHANGE_EXPANDED_CALL_NODES',
+ area: WING_AREAS[wing],
+ threadsKey,
+ expandedCallNodePaths,
+ };
+}
+
export function changeSelectedMarker(
threadsKey: ThreadsKey,
selectedMarker: MarkerIndex | null,
@@ -1625,6 +1753,37 @@ export function changeMarkerTableSort(
};
}
+export function changeFunctionListSort(
+ sort: SingleColumnSortState[] | null
+): Action {
+ return {
+ type: 'CHANGE_FUNCTION_LIST_SORT',
+ sort,
+ };
+}
+
+export function changeFunctionListSectionOpen(
+ section: 'descendants' | 'ancestors' | 'self',
+ isOpen: boolean
+): Action {
+ return {
+ type: 'CHANGE_FUNCTION_LIST_SECTION_OPEN',
+ section,
+ isOpen,
+ };
+}
+
+export function changeWingView(
+ wing: 'upper' | 'lower' | 'self',
+ view: 'flame-graph' | 'call-tree'
+): Action {
+ return {
+ type: 'CHANGE_WING_VIEW',
+ wing,
+ view,
+ };
+}
+
export function changeNetworkSearchString(searchString: string): Action {
return {
type: 'CHANGE_NETWORK_SEARCH_STRING',
@@ -2033,49 +2192,89 @@ export function handleCallNodeTransformShortcut(
if (event.metaKey || event.ctrlKey || event.altKey) {
return;
}
- const threadSelectors = getThreadSelectorsFromThreadsKey(threadsKey);
- const unfilteredThread = threadSelectors.getThread(getState());
- const implementation = getImplementationFilter(getState());
- const inverted = getInvertCallstack(getState());
- const callNodePath = callNodeInfo.getCallNodePathFromIndex(callNodeIndex);
const funcIndex = callNodeInfo.funcForNode(callNodeIndex);
- const category = callNodeInfo.categoryForNode(callNodeIndex);
-
- const callNodeTable = callNodeInfo.getCallNodeTable();
switch (event.key) {
- case 'F':
+ case 'F': {
+ const callNodePath =
+ callNodeInfo.getCallNodePathFromIndex(callNodeIndex);
+ const implementation = getImplementationFilter(getState());
+ const inverted = getInvertCallstack(getState());
dispatch(
addTransformToStack(threadsKey, {
type: 'focus-subtree',
- callNodePath: callNodePath,
+ callNodePath,
implementation,
inverted,
})
);
break;
- case 'f':
+ }
+ case 'M': {
+ const callNodePath =
+ callNodeInfo.getCallNodePathFromIndex(callNodeIndex);
+ const implementation = getImplementationFilter(getState());
dispatch(
addTransformToStack(threadsKey, {
- type: 'focus-function',
- funcIndex,
+ type: 'merge-call-node',
+ callNodePath,
+ implementation,
})
);
break;
- case 'S':
+ }
+ case 'g': {
+ const category = callNodeInfo.categoryForNode(callNodeIndex);
dispatch(
addTransformToStack(threadsKey, {
- type: 'focus-self',
+ type: 'focus-category',
+ category,
+ })
+ );
+ break;
+ }
+ default:
+ dispatch(
+ handleFunctionTransformShortcut(
+ event,
+ threadsKey,
+ callNodeInfo,
+ funcIndex
+ )
+ );
+ }
+ };
+}
+
+export function handleFunctionTransformShortcut(
+ event: React.KeyboardEvent,
+ threadsKey: ThreadsKey,
+ callNodeInfo: CallNodeInfo,
+ funcIndex: IndexIntoFuncTable
+): ThunkAction {
+ return (dispatch, getState) => {
+ if (event.metaKey || event.ctrlKey || event.altKey) {
+ return;
+ }
+ const threadSelectors = getThreadSelectorsFromThreadsKey(threadsKey);
+ const implementation = getImplementationFilter(getState());
+ const callNodeTable = callNodeInfo.getCallNodeTable();
+ const unfilteredThread = threadSelectors.getThread(getState());
+
+ switch (event.key) {
+ case 'f':
+ dispatch(
+ addTransformToStack(threadsKey, {
+ type: 'focus-function',
funcIndex,
- implementation,
})
);
break;
- case 'M':
+ case 'S':
dispatch(
addTransformToStack(threadsKey, {
- type: 'merge-call-node',
- callNodePath: callNodePath,
+ type: 'focus-self',
+ funcIndex,
implementation,
})
);
@@ -2097,8 +2296,7 @@ export function handleCallNodeTransformShortcut(
);
break;
case 'C': {
- const { funcTable } = unfilteredThread;
- const resourceIndex = funcTable.resource[funcIndex];
+ const resourceIndex = unfilteredThread.funcTable.resource[funcIndex];
dispatch(
addCollapseResourceTransformToStack(
threadsKey,
@@ -2131,7 +2329,7 @@ export function handleCallNodeTransformShortcut(
}
break;
}
- case 'c': {
+ case 'c':
dispatch(
addTransformToStack(threadsKey, {
type: 'collapse-function-subtree',
@@ -2139,17 +2337,8 @@ export function handleCallNodeTransformShortcut(
})
);
break;
- }
- case 'g':
- dispatch(
- addTransformToStack(threadsKey, {
- type: 'focus-category',
- category,
- })
- );
- break;
default:
- // This did not match a call tree transform.
+ // This did not match a function transform.
}
};
}
diff --git a/src/app-logic/tabs-handling.ts b/src/app-logic/tabs-handling.ts
index 3e2f205c3b..20f3742b48 100644
--- a/src/app-logic/tabs-handling.ts
+++ b/src/app-logic/tabs-handling.ts
@@ -9,6 +9,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',
@@ -41,6 +42,7 @@ export const tabsWithTitleL10nIdArray: readonly TabsWithTitleL10nId[] =
export const tabsShowingSampleData: readonly TabSlug[] = [
'calltree',
+ 'function-list',
'flame-graph',
'stack-chart',
];
diff --git a/src/app-logic/url-handling.ts b/src/app-logic/url-handling.ts
index 85a0b35e88..7f6d57959c 100644
--- a/src/app-logic/url-handling.ts
+++ b/src/app-logic/url-handling.ts
@@ -42,6 +42,9 @@ import type {
IndexIntoFrameTable,
MarkerIndex,
SelectedMarkersPerThread,
+ SelectedFunctionsPerThread,
+ FunctionListSectionsOpenState,
+ WingViewsState,
} from 'firefox-profiler/types';
import {
decodeUintArrayFromUrlComponent,
@@ -120,6 +123,19 @@ export function getIsHistoryReplaceState(): boolean {
return _isReplaceState;
}
+/**
+ * Synchronously replace the current history entry to match the given UrlState.
+ *
+ * Use this from action thunks for high-frequency actions (e.g. arrow-key
+ * navigation) where deferring the URL update to UrlManager.componentDidUpdate
+ * would result in unwanted pushState calls and history-flooding. By updating
+ * window.history synchronously here, the URL already matches the new state by
+ * the time UrlManager's componentDidUpdate runs, so it becomes a no-op.
+ */
+export function replaceHistoryWithUrlState(urlState: UrlState): void {
+ window.history.replaceState(urlState, document.title, urlFromState(urlState));
+}
+
function getPathParts(urlState: UrlState): string[] {
const { dataSource } = urlState;
switch (dataSource) {
@@ -187,6 +203,10 @@ type CallTreeQuery = BaseQuery & {
invertFlameGraph: null | undefined;
hideIdleSamples: null | undefined;
ctSummary: string;
+ functionListSort?: string; // "total-desc~self-asc" — primary first
+ funcListSections?: string; // "descendants,self" — comma-separated open sections
+ wingViews?: string; // "upper:call-tree,lower:call-tree" — non-default wing views
+ selectedFunc?: number; // Selected function index for the current thread, e.g. 42
};
type MarkersQuery = BaseQuery & {
@@ -235,6 +255,12 @@ type Query = BaseQuery & {
marker?: MarkerIndex;
markerSort?: string;
+ // Function list specific
+ functionListSort?: string;
+ funcListSections?: string;
+ wingViews?: string;
+ selectedFunc?: number;
+
// Network specific
networkSearch?: string;
@@ -341,6 +367,7 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
: undefined;
/* fallsthrough */
case 'flame-graph':
+ case 'function-list':
case 'calltree': {
query = baseQuery as CallTreeQueryShape;
@@ -391,6 +418,25 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
query.bottomFullscreen = true;
}
}
+ if (selectedTab === 'function-list') {
+ query.functionListSort = convertFunctionListSortToString(
+ urlState.profileSpecific.functionListSort
+ );
+ query.funcListSections = convertFunctionListSectionsOpenToString(
+ urlState.profileSpecific.functionListSectionsOpen
+ );
+ query.wingViews = convertWingViewsToString(
+ urlState.profileSpecific.wingViews
+ );
+ query.selectedFunc =
+ selectedThreadsKey !== null &&
+ urlState.profileSpecific.selectedFunctions[selectedThreadsKey] !==
+ null &&
+ urlState.profileSpecific.selectedFunctions[selectedThreadsKey] !==
+ undefined
+ ? urlState.profileSpecific.selectedFunctions[selectedThreadsKey]
+ : undefined;
+ }
break;
}
case 'marker-table':
@@ -555,6 +601,19 @@ export function stateFromLocation(
}
}
+ // Parse the selected function for the current thread
+ const selectedFunctions: SelectedFunctionsPerThread = {};
+ if (
+ selectedThreadsKey !== null &&
+ query.selectedFunc !== undefined &&
+ query.selectedFunc !== null
+ ) {
+ const funcIndex = Number(query.selectedFunc);
+ if (Number.isInteger(funcIndex) && funcIndex >= 0) {
+ selectedFunctions[selectedThreadsKey] = funcIndex;
+ }
+ }
+
// tabID is used for the tab selector that we have in our full view.
let tabID = null;
if (query.tabID && Number.isInteger(Number(query.tabID))) {
@@ -647,7 +706,15 @@ export function stateFromLocation(
? query.hiddenThreads.split('-').map((index) => Number(index))
: null,
selectedMarkers,
+ selectedFunctions,
markerTableSort: convertMarkerTableSortFromString(query.markerSort),
+ functionListSort: convertFunctionListSortFromString(
+ query.functionListSort
+ ),
+ functionListSectionsOpen: convertFunctionListSectionsOpenFromString(
+ query.funcListSections
+ ),
+ wingViews: convertWingViewsFromString(query.wingViews),
},
};
}
@@ -694,6 +761,141 @@ function convertMarkerTableSortFromString(
return parsed;
}
+// FunctionList sort URL encoding. Same convention as the marker table:
+// internal storage is primary-last, URL is primary-first. `null` means "at the
+// function list's default", encoded as an absent query parameter.
+const VALID_FUNCTION_LIST_SORT_COLUMNS = new Set(['total', 'self']);
+
+function convertFunctionListSortToString(
+ sort: SingleColumnSortState[] | null
+): string | undefined {
+ if (sort === null) {
+ return undefined;
+ }
+ return sort
+ .slice()
+ .reverse()
+ .map((s) => `${s.column}-${s.ascending ? 'asc' : 'desc'}`)
+ .join('~');
+}
+
+function convertFunctionListSortFromString(
+ raw: string | null | void
+): SingleColumnSortState[] | null {
+ if (!raw) {
+ return null;
+ }
+ const parsed: SingleColumnSortState[] = [];
+ for (const part of raw.split('~')) {
+ const dashIndex = part.lastIndexOf('-');
+ if (dashIndex === -1) {
+ return null;
+ }
+ const column = part.slice(0, dashIndex);
+ const dir = part.slice(dashIndex + 1);
+ if (
+ !VALID_FUNCTION_LIST_SORT_COLUMNS.has(column) ||
+ (dir !== 'asc' && dir !== 'desc')
+ ) {
+ return null;
+ }
+ parsed.push({ column, ascending: dir === 'asc' });
+ }
+ // URL is primary-first; internal storage is primary-last.
+ return parsed.reverse();
+}
+
+// FunctionList section disclosure-box open/closed state. The URL stores a
+// comma-separated list of the open sections; the param is omitted when the
+// state matches the default (only "descendants" open). The value "none" is
+// used as a sentinel for the all-closed case so the param is non-empty.
+const FUNCTION_LIST_SECTION_NAMES: ReadonlyArray<
+ keyof FunctionListSectionsOpenState
+> = ['descendants', 'ancestors', 'self'];
+const FUNCTION_LIST_SECTIONS_OPEN_DEFAULT: FunctionListSectionsOpenState = {
+ descendants: true,
+ ancestors: false,
+ self: false,
+};
+
+function convertFunctionListSectionsOpenToString(
+ state: FunctionListSectionsOpenState
+): string | undefined {
+ const matchesDefault = FUNCTION_LIST_SECTION_NAMES.every(
+ (name) => state[name] === FUNCTION_LIST_SECTIONS_OPEN_DEFAULT[name]
+ );
+ if (matchesDefault) {
+ return undefined;
+ }
+ const open = FUNCTION_LIST_SECTION_NAMES.filter((name) => state[name]);
+ return open.length === 0 ? 'none' : open.join(',');
+}
+
+function convertFunctionListSectionsOpenFromString(
+ raw: string | null | void
+): FunctionListSectionsOpenState {
+ if (raw === undefined || raw === null) {
+ return { ...FUNCTION_LIST_SECTIONS_OPEN_DEFAULT };
+ }
+ const result: FunctionListSectionsOpenState = {
+ descendants: false,
+ ancestors: false,
+ self: false,
+ };
+ if (raw === 'none' || raw === '') {
+ return result;
+ }
+ for (const part of raw.split(',')) {
+ if (part === 'descendants' || part === 'ancestors' || part === 'self') {
+ result[part] = true;
+ }
+ }
+ return result;
+}
+
+// WingView visualization choice for the Descendants ("upper"), Ancestors
+// ("lower"), and Self wings of the FunctionList tab. The URL stores a
+// comma-separated list of "wing:view" pairs for wings whose view differs from
+// the default (flame-graph), e.g. "upper:call-tree". The param is omitted
+// when all wings use the default.
+const WING_VIEWS_DEFAULT: WingViewsState = {
+ upper: 'flame-graph',
+ lower: 'flame-graph',
+ self: 'flame-graph',
+};
+const WING_VIEW_NAMES: ReadonlyArray = [
+ 'upper',
+ 'lower',
+ 'self',
+];
+
+function convertWingViewsToString(state: WingViewsState): string | undefined {
+ const parts: string[] = [];
+ for (const wing of WING_VIEW_NAMES) {
+ if (state[wing] !== WING_VIEWS_DEFAULT[wing]) {
+ parts.push(`${wing}:${state[wing]}`);
+ }
+ }
+ return parts.length === 0 ? undefined : parts.join(',');
+}
+
+function convertWingViewsFromString(raw: string | null | void): WingViewsState {
+ const result: WingViewsState = { ...WING_VIEWS_DEFAULT };
+ if (raw === undefined || raw === null || raw === '') {
+ return result;
+ }
+ for (const part of raw.split(',')) {
+ const [wing, view] = part.split(':');
+ if (
+ (wing === 'upper' || wing === 'lower' || wing === 'self') &&
+ (view === 'flame-graph' || view === 'call-tree')
+ ) {
+ result[wing] = view;
+ }
+ }
+ return result;
+}
+
function convertGlobalTrackOrderFromString(
rawString: string | null | void
): TrackIndex[] {
diff --git a/src/components/app/Details.tsx b/src/components/app/Details.tsx
index 643e6c5929..0ac75ddc70 100644
--- a/src/components/app/Details.tsx
+++ b/src/components/app/Details.tsx
@@ -10,6 +10,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/';
@@ -26,6 +27,10 @@ import { getSelectedTab } from 'firefox-profiler/selectors/url-state';
import { getIsSidebarOpen } from 'firefox-profiler/selectors/app';
import { selectedThreadSelectors } from 'firefox-profiler/selectors/per-thread';
import { CallNodeContextMenu } from 'firefox-profiler/components/shared/CallNodeContextMenu';
+import {
+ FunctionListContextMenu,
+ LowerWingContextMenu,
+} from 'firefox-profiler/components/shared/WingContextMenu';
import { MaybeMarkerContextMenu } from 'firefox-profiler/components/shared/MarkerContextMenu';
import { toValidTabSlug } from 'firefox-profiler/utils/types';
@@ -122,6 +127,7 @@ class ProfileViewerImpl extends PureComponent {
{
{
calltree: ,
+ 'function-list': ,
'flame-graph': ,
'stack-chart': ,
'marker-chart': ,
@@ -133,6 +139,8 @@ class ProfileViewerImpl extends PureComponent {
+
+
);
diff --git a/src/components/calltree/Butterfly.css b/src/components/calltree/Butterfly.css
new file mode 100644
index 0000000000..62f236e0cb
--- /dev/null
+++ b/src/components/calltree/Butterfly.css
@@ -0,0 +1,55 @@
+/* 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;
+ display: flex;
+ min-height: 0;
+ flex: 1;
+}
+
+.butterflyWings > .resizableWithSplitterInner {
+ display: flex;
+ flex-flow: column nowrap;
+}
+
+/* Provide 3px extra grabbable surface on each side of the splitter */
+.butterflyWrapper .resizableWithSplitterSplitter {
+ position: relative; /* containing block for absolute ::before */
+ border: none;
+ background-color: var(--base-border-color) !important;
+}
+
+.butterflyWrapper .resizableWithSplitterSplitter::before {
+ position: absolute;
+ z-index: var(--z-bottom-box);
+ display: block;
+ content: '';
+}
+
+.butterflyWrapper .resizableWithSplitterSplitter.resizesWidth {
+ width: 1px;
+}
+
+.butterflyWrapper .resizableWithSplitterSplitter.resizesWidth::before {
+ inset: 0 -3px;
+}
+
+.butterflyWrapper .resizableWithSplitterSplitter.resizesHeight {
+ height: 1px;
+ margin-bottom: -1px;
+}
+
+.butterflyWrapper .resizableWithSplitterSplitter.resizesHeight::before {
+ inset: -3px 0;
+}
+
+.functionListTreeWrapper {
+ display: flex;
+ flex-flow: column nowrap;
+}
+
+.functionListTreeWrapper .treeRowToggleButton {
+ display: none;
+}
diff --git a/src/components/calltree/CallTree.css b/src/components/calltree/CallTree.css
index 73e7f3935c..2efc3e8b38 100644
--- a/src/components/calltree/CallTree.css
+++ b/src/components/calltree/CallTree.css
@@ -7,8 +7,9 @@
text-align: right;
}
-/* The header for the totalPercent column is not visible */
-.treeViewHeaderColumn.totalPercent {
+/* The headers for the percent columns are not visible */
+.treeViewHeaderColumn.totalPercent,
+.treeViewHeaderColumn.selfPercent {
display: none;
}
@@ -26,6 +27,7 @@
.treeViewRowColumn.total,
.treeViewRowColumn.totalPercent,
.treeViewRowColumn.self,
+.treeViewRowColumn.selfPercent,
.treeViewRowColumn.timestamp {
text-align: right;
}
diff --git a/src/components/calltree/CallTree.tsx b/src/components/calltree/CallTree.tsx
index a86053f130..9ec2279d9d 100644
--- a/src/components/calltree/CallTree.tsx
+++ b/src/components/calltree/CallTree.tsx
@@ -7,7 +7,6 @@ import { TreeView } from 'firefox-profiler/components/shared/TreeView';
import { CallTreeEmptyReasons } from './CallTreeEmptyReasons';
import {
getInvertCallstack,
- getImplementationFilter,
getSearchStringsAsRegExp,
getSelectedThreadsKey,
} from 'firefox-profiler/selectors/url-state';
@@ -31,7 +30,6 @@ import {
import type {
State,
- ImplementationFilter,
ThreadsKey,
IndexIntoCategoryList,
IndexIntoCallNodeTable,
@@ -61,7 +59,6 @@ type StateProps = {
readonly searchStringsRegExp: RegExp | null;
readonly disableOverscan: boolean;
readonly invertCallstack: boolean;
- readonly implementationFilter: ImplementationFilter;
readonly callNodeMaxDepthPlusOne: number;
readonly weightType: WeightType;
readonly tableViewOptions: TableViewOptions;
@@ -291,7 +288,6 @@ export const CallTree = explicitConnect<{}, StateProps, DispatchProps>({
searchStringsRegExp: getSearchStringsAsRegExp(state),
disableOverscan: getPreviewSelectionIsBeingModified(state),
invertCallstack: getInvertCallstack(state),
- implementationFilter: getImplementationFilter(state),
// 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.
diff --git a/src/components/calltree/FunctionList.tsx b/src/components/calltree/FunctionList.tsx
new file mode 100644
index 0000000000..09d8b2e371
--- /dev/null
+++ b/src/components/calltree/FunctionList.tsx
@@ -0,0 +1,272 @@
+/* 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/. */
+// @flow
+
+import { PureComponent } from 'react';
+import memoize from 'memoize-immutable';
+import explicitConnect from 'firefox-profiler/utils/connect';
+import {
+ TreeView,
+ ColumnSortState,
+} from 'firefox-profiler/components/shared/TreeView';
+import { CallTreeEmptyReasons } from './CallTreeEmptyReasons';
+import {
+ getSearchStringsAsRegExp,
+ getSelectedThreadsKey,
+ getFunctionListSort,
+} from 'firefox-profiler/selectors/url-state';
+import {
+ getScrollToSelectionGeneration,
+ getFocusCallTreeGeneration,
+ getCurrentTableViewOptions,
+ getPreviewSelectionIsBeingModified,
+} from 'firefox-profiler/selectors/profile';
+import { selectedThreadSelectors } from 'firefox-profiler/selectors/per-thread';
+import {
+ changeRightClickedFunctionIndex,
+ changeSelectedFunctionIndex,
+ addTransformToStack,
+ changeTableViewOptions,
+ updateBottomBoxContentsAndMaybeOpen,
+ changeFunctionListSort,
+ handleFunctionTransformShortcut,
+} from 'firefox-profiler/actions/profile-view';
+import {
+ nameColumn,
+ libColumn,
+ functionListColumnsForWeightType,
+} from './columns';
+
+import type {
+ State,
+ ThreadsKey,
+ IndexIntoFuncTable,
+ CallNodeDisplayData,
+ WeightType,
+ TableViewOptions,
+ SelectionContext,
+} from 'firefox-profiler/types';
+import type { CallTree } from 'firefox-profiler/profile-logic/call-tree';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
+
+import type { SingleColumnSortState } from 'firefox-profiler/components/shared/TreeView';
+import type { ConnectedProps } from 'firefox-profiler/utils/connect';
+
+import './CallTree.css';
+
+const DEFAULT_FUNCTION_LIST_SORT: SingleColumnSortState[] = [
+ { column: 'total', ascending: false },
+];
+const DEFAULT_FUNCTION_LIST_SORT_STATE = new ColumnSortState(
+ DEFAULT_FUNCTION_LIST_SORT
+);
+
+type StateProps = {
+ readonly threadsKey: ThreadsKey;
+ readonly callNodeInfo: CallNodeInfo;
+ readonly scrollToSelectionGeneration: number;
+ readonly focusCallTreeGeneration: number;
+ readonly tree: CallTree;
+ readonly selectedFunctionIndex: IndexIntoFuncTable | null;
+ readonly rightClickedFunctionIndex: IndexIntoFuncTable | null;
+ readonly searchStringsRegExp: RegExp | null;
+ readonly disableOverscan: boolean;
+ readonly weightType: WeightType;
+ readonly tableViewOptions: TableViewOptions;
+ readonly sort: SingleColumnSortState[] | null;
+};
+
+type DispatchProps = {
+ readonly changeSelectedFunctionIndex: typeof changeSelectedFunctionIndex;
+ readonly changeRightClickedFunctionIndex: typeof changeRightClickedFunctionIndex;
+ readonly addTransformToStack: typeof addTransformToStack;
+ readonly updateBottomBoxContentsAndMaybeOpen: typeof updateBottomBoxContentsAndMaybeOpen;
+ readonly handleFunctionTransformShortcut: typeof handleFunctionTransformShortcut;
+ readonly onTableViewOptionsChange: (opts: TableViewOptions) => any;
+ readonly changeFunctionListSort: typeof changeFunctionListSort;
+};
+
+type Props = ConnectedProps<{}, StateProps, DispatchProps>;
+
+class FunctionListImpl extends PureComponent
{
+ _treeView: TreeView | null = null;
+ _takeTreeViewRef = (treeView: TreeView | null) => {
+ this._treeView = treeView;
+ };
+
+ _expandedIndexes: Array = [];
+
+ _getColumnSort = memoize((sort: SingleColumnSortState[] | null) =>
+ sort === null ? DEFAULT_FUNCTION_LIST_SORT_STATE : new ColumnSortState(sort)
+ );
+
+ _onColumnSortChange = (columnSort: ColumnSortState) => {
+ // Normalize matches-default to null so the URL omits the param and every
+ // client can treat "user hasn't overridden the default" uniformly.
+ this.props.changeFunctionListSort(
+ columnSort.equals(DEFAULT_FUNCTION_LIST_SORT_STATE)
+ ? null
+ : columnSort.entries
+ );
+ };
+
+ override componentDidMount() {
+ this.focus();
+ this.maybeProcureInitialSelection();
+
+ if (this.props.selectedFunctionIndex !== null && this._treeView) {
+ this._treeView.scrollSelectionIntoView();
+ }
+ }
+
+ override componentDidUpdate(prevProps: Props) {
+ if (
+ this.props.focusCallTreeGeneration > prevProps.focusCallTreeGeneration
+ ) {
+ this.focus();
+ }
+
+ if (
+ this.props.selectedFunctionIndex !== null &&
+ this.props.scrollToSelectionGeneration >
+ prevProps.scrollToSelectionGeneration &&
+ this._treeView
+ ) {
+ this._treeView.scrollSelectionIntoView();
+ }
+ }
+
+ maybeProcureInitialSelection() {
+ if (this.props.selectedFunctionIndex !== null) {
+ return;
+ }
+ const { tree, threadsKey, changeSelectedFunctionIndex } = this.props;
+ const firstRoot = tree.getRoots()[0];
+ if (firstRoot !== undefined) {
+ changeSelectedFunctionIndex(threadsKey, firstRoot, { source: 'auto' });
+ }
+ }
+
+ focus() {
+ if (this._treeView) {
+ this._treeView.focus();
+ }
+ }
+
+ _onSelectionChange = (
+ newSelectedFunction: IndexIntoFuncTable,
+ context: SelectionContext
+ ) => {
+ const { threadsKey, changeSelectedFunctionIndex } = this.props;
+ changeSelectedFunctionIndex(threadsKey, newSelectedFunction, context);
+ };
+
+ _onRightClickSelection = (newSelectedFunction: IndexIntoFuncTable) => {
+ const { threadsKey, changeRightClickedFunctionIndex } = this.props;
+ changeRightClickedFunctionIndex(threadsKey, newSelectedFunction);
+ };
+
+ _onExpandedCallNodesChange = (
+ _newExpandedCallNodeIndexes: Array
+ ) => {};
+
+ _onKeyDown = (event: React.KeyboardEvent) => {
+ const {
+ selectedFunctionIndex,
+ rightClickedFunctionIndex,
+ threadsKey,
+ callNodeInfo,
+ handleFunctionTransformShortcut,
+ } = this.props;
+ const funcIndex =
+ rightClickedFunctionIndex !== null
+ ? rightClickedFunctionIndex
+ : selectedFunctionIndex;
+ if (funcIndex === null) {
+ return;
+ }
+ handleFunctionTransformShortcut(event, threadsKey, callNodeInfo, funcIndex);
+ };
+
+ _onEnterOrDoubleClick = (nodeId: IndexIntoFuncTable) => {
+ const { tree, updateBottomBoxContentsAndMaybeOpen } = this.props;
+ const bottomBoxInfo = tree.getBottomBoxInfoForFunction(nodeId);
+ updateBottomBoxContentsAndMaybeOpen('function-list', bottomBoxInfo);
+ };
+
+ override render() {
+ const {
+ tree,
+ selectedFunctionIndex,
+ rightClickedFunctionIndex,
+ searchStringsRegExp,
+ disableOverscan,
+ weightType,
+ tableViewOptions,
+ onTableViewOptionsChange,
+ sort,
+ } = this.props;
+ if (tree.getRoots().length === 0) {
+ return ;
+ }
+ return (
+
+ );
+ }
+}
+
+export const FunctionList = explicitConnect<{}, StateProps, DispatchProps>({
+ mapStateToProps: (state: State) => ({
+ threadsKey: getSelectedThreadsKey(state),
+ callNodeInfo: selectedThreadSelectors.getCallNodeInfo(state),
+ scrollToSelectionGeneration: getScrollToSelectionGeneration(state),
+ focusCallTreeGeneration: getFocusCallTreeGeneration(state),
+ tree: selectedThreadSelectors.getFunctionListTree(state),
+ selectedFunctionIndex:
+ selectedThreadSelectors.getSelectedFunctionIndex(state),
+ rightClickedFunctionIndex:
+ selectedThreadSelectors.getRightClickedFunctionIndex(state),
+ searchStringsRegExp: getSearchStringsAsRegExp(state),
+ disableOverscan: getPreviewSelectionIsBeingModified(state),
+ weightType: selectedThreadSelectors.getWeightTypeForCallTree(state),
+ tableViewOptions: getCurrentTableViewOptions(state),
+ sort: getFunctionListSort(state),
+ }),
+ mapDispatchToProps: {
+ changeSelectedFunctionIndex,
+ changeRightClickedFunctionIndex,
+ addTransformToStack,
+ updateBottomBoxContentsAndMaybeOpen,
+ handleFunctionTransformShortcut,
+ onTableViewOptionsChange: (options: TableViewOptions) =>
+ changeTableViewOptions('calltree', options),
+ changeFunctionListSort,
+ },
+ component: FunctionListImpl,
+});
diff --git a/src/components/calltree/LowerWingFlameGraph.tsx b/src/components/calltree/LowerWingFlameGraph.tsx
new file mode 100644
index 0000000000..fc27795c8d
--- /dev/null
+++ b/src/components/calltree/LowerWingFlameGraph.tsx
@@ -0,0 +1,262 @@
+/* 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/. */
+
+import * as React from 'react';
+
+import { explicitConnectWithForwardRef } from 'firefox-profiler/utils/connect';
+import { FlameGraph } from 'firefox-profiler/components/flame-graph/FlameGraph';
+
+import {
+ getCategories,
+ getCommittedRange,
+ getPreviewSelection,
+ getScrollToSelectionGeneration,
+ getProfileInterval,
+ getInnerWindowIDToPageMap,
+ getProfileUsesMultipleStackTypes,
+} from 'firefox-profiler/selectors/profile';
+import { selectedThreadSelectors } from 'firefox-profiler/selectors/per-thread';
+import { getSelectedThreadsKey } from 'firefox-profiler/selectors/url-state';
+import {
+ changeWingSelectedCallNode,
+ changeWingRightClickedCallNode,
+ handleCallNodeTransformShortcut,
+ updateBottomBoxContentsAndMaybeOpen,
+} from 'firefox-profiler/actions/profile-view';
+
+import type {
+ Thread,
+ CategoryList,
+ Milliseconds,
+ StartEndRange,
+ WeightType,
+ SamplesLikeTable,
+ PreviewSelection,
+ CallTreeSummaryStrategy,
+ IndexIntoCallNodeTable,
+ ThreadsKey,
+ InnerWindowID,
+ Page,
+ SampleCategoriesAndSubcategories,
+ SelectionContext,
+ CallNodePath,
+} from 'firefox-profiler/types';
+
+import type { FlameGraphTiming } from 'firefox-profiler/profile-logic/flame-graph';
+import type { CallNodeInfo } from 'firefox-profiler/profile-logic/call-node-info';
+
+import type {
+ CallTree,
+ CallTreeTimings,
+} from 'firefox-profiler/profile-logic/call-tree';
+
+import type { ConnectedProps } from 'firefox-profiler/utils/connect';
+
+type StateProps = {
+ readonly thread: Thread;
+ readonly weightType: WeightType;
+ readonly innerWindowIDToPageMap: Map | null;
+ readonly maxStackDepthPlusOne: number;
+ readonly timeRange: StartEndRange;
+ readonly previewSelection: PreviewSelection | null;
+ readonly flameGraphTiming: FlameGraphTiming;
+ readonly callTree: CallTree;
+ readonly callNodeInfo: CallNodeInfo;
+ readonly threadsKey: ThreadsKey;
+ readonly selectedCallNodeIndex: IndexIntoCallNodeTable | null;
+ readonly rightClickedCallNodeIndex: IndexIntoCallNodeTable | null;
+ readonly scrollToSelectionGeneration: number;
+ readonly categories: CategoryList;
+ readonly interval: Milliseconds;
+ readonly callTreeSummaryStrategy: CallTreeSummaryStrategy;
+ readonly ctssSamples: SamplesLikeTable;
+ readonly ctssSampleCategoriesAndSubcategories: SampleCategoriesAndSubcategories;
+ readonly tracedTiming: CallTreeTimings | null;
+ readonly displayStackType: boolean;
+};
+
+type DispatchProps = {
+ readonly changeSelectedCallNode: (
+ threadsKey: ThreadsKey,
+ path: CallNodePath,
+ context?: SelectionContext
+ ) => any;
+ readonly changeRightClickedCallNode: (
+ threadsKey: ThreadsKey,
+ path: CallNodePath | null
+ ) => any;
+ readonly handleCallNodeTransformShortcut: typeof handleCallNodeTransformShortcut;
+ readonly updateBottomBoxContentsAndMaybeOpen: typeof updateBottomBoxContentsAndMaybeOpen;
+};
+
+type Props = ConnectedProps<{}, StateProps, DispatchProps>;
+
+export interface LowerWingFlameGraphHandle {
+ focus(): void;
+}
+
+class LowerWingFlameGraphImpl
+ extends React.PureComponent
+ implements LowerWingFlameGraphHandle
+{
+ _flameGraph: React.RefObject = React.createRef();
+
+ // eslint-disable-next-line react/no-unused-class-component-methods -- called via LowerWingFlameGraphHandle ref from LowerWingImpl
+ focus() {
+ this._flameGraph.current?.focus();
+ }
+
+ _onSelectedCallNodeChange = (
+ callNodeIndex: IndexIntoCallNodeTable | null
+ ) => {
+ const { callNodeInfo, threadsKey, changeSelectedCallNode } = this.props;
+ const context: SelectionContext = { source: 'pointer' };
+ changeSelectedCallNode(
+ threadsKey,
+ callNodeInfo.getCallNodePathFromIndex(callNodeIndex),
+ context
+ );
+ };
+
+ _onRightClickedCallNodeChange = (
+ callNodeIndex: IndexIntoCallNodeTable | null
+ ) => {
+ const { callNodeInfo, threadsKey, changeRightClickedCallNode } = this.props;
+ changeRightClickedCallNode(
+ threadsKey,
+ callNodeInfo.getCallNodePathFromIndex(callNodeIndex)
+ );
+ };
+
+ _onCallNodeEnterOrDoubleClick = (
+ callNodeIndex: IndexIntoCallNodeTable | null
+ ) => {
+ if (callNodeIndex === null) {
+ return;
+ }
+ const { callTree, updateBottomBoxContentsAndMaybeOpen } = this.props;
+ const bottomBoxInfo = callTree.getBottomBoxInfoForCallNode(callNodeIndex);
+ updateBottomBoxContentsAndMaybeOpen('function-list', bottomBoxInfo);
+ };
+
+ _onKeyboardTransformShortcut = (
+ event: React.KeyboardEvent,
+ nodeIndex: IndexIntoCallNodeTable
+ ) => {
+ const { threadsKey, callNodeInfo, handleCallNodeTransformShortcut } =
+ this.props;
+ handleCallNodeTransformShortcut(event, threadsKey, callNodeInfo, nodeIndex);
+ };
+
+ override render() {
+ const {
+ thread,
+ threadsKey,
+ maxStackDepthPlusOne,
+ flameGraphTiming,
+ callTree,
+ callNodeInfo,
+ timeRange,
+ previewSelection,
+ rightClickedCallNodeIndex,
+ selectedCallNodeIndex,
+ scrollToSelectionGeneration,
+ callTreeSummaryStrategy,
+ categories,
+ interval,
+ innerWindowIDToPageMap,
+ weightType,
+ ctssSamples,
+ ctssSampleCategoriesAndSubcategories,
+ tracedTiming,
+ displayStackType,
+ } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+export const LowerWingFlameGraph = explicitConnectWithForwardRef<
+ {},
+ StateProps,
+ DispatchProps,
+ LowerWingFlameGraphHandle
+>({
+ mapStateToProps: (state) => ({
+ thread: selectedThreadSelectors.getPreviewFilteredThread(state),
+ weightType: selectedThreadSelectors.getWeightTypeForCallTree(state),
+ maxStackDepthPlusOne:
+ selectedThreadSelectors.getLowerWingFlameGraphMaxDepthPlusOne(state),
+ flameGraphTiming:
+ selectedThreadSelectors.getLowerWingFlameGraphTiming(state),
+ callTree: selectedThreadSelectors.getLowerWingCallTree(state),
+ timeRange: getCommittedRange(state),
+ previewSelection: getPreviewSelection(state),
+ callNodeInfo: selectedThreadSelectors.getLowerWingCallNodeInfo(state),
+ categories: getCategories(state),
+ threadsKey: getSelectedThreadsKey(state),
+ selectedCallNodeIndex:
+ selectedThreadSelectors.getLowerWingSelectedCallNodeIndex(state),
+ rightClickedCallNodeIndex:
+ selectedThreadSelectors.getLowerWingRightClickedCallNodeIndex(state),
+ scrollToSelectionGeneration: getScrollToSelectionGeneration(state),
+ interval: getProfileInterval(state),
+ callTreeSummaryStrategy:
+ selectedThreadSelectors.getCallTreeSummaryStrategy(state),
+ innerWindowIDToPageMap: getInnerWindowIDToPageMap(state),
+ ctssSamples: selectedThreadSelectors.getPreviewFilteredCtssSamples(state),
+ ctssSampleCategoriesAndSubcategories:
+ selectedThreadSelectors.getPreviewFilteredCtssSampleCategoriesAndSubcategories(
+ state
+ ),
+ tracedTiming: selectedThreadSelectors.getTracedTiming(state),
+ displayStackType: getProfileUsesMultipleStackTypes(state),
+ }),
+ mapDispatchToProps: {
+ changeSelectedCallNode: (
+ threadsKey: ThreadsKey,
+ path: CallNodePath,
+ context?: SelectionContext
+ ) => changeWingSelectedCallNode('lower', threadsKey, path, context),
+ changeRightClickedCallNode: (
+ threadsKey: ThreadsKey,
+ path: CallNodePath | null
+ ) => changeWingRightClickedCallNode('lower', threadsKey, path),
+ handleCallNodeTransformShortcut,
+ updateBottomBoxContentsAndMaybeOpen,
+ },
+ component: LowerWingFlameGraphImpl,
+});
diff --git a/src/components/calltree/ProfileFunctionListView.tsx b/src/components/calltree/ProfileFunctionListView.tsx
new file mode 100644
index 0000000000..a3c2f0900b
--- /dev/null
+++ b/src/components/calltree/ProfileFunctionListView.tsx
@@ -0,0 +1,108 @@
+/* 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/. */
+
+import * as React from 'react';
+
+import explicitConnect from 'firefox-profiler/utils/connect';
+import { FunctionList } from './FunctionList';
+import { SelfWing } from './SelfWing';
+import { UpperWing, LowerWing } from './WingTreeView';
+import { DisclosureBox } from 'firefox-profiler/components/shared/DisclosureBox';
+import { WingViewToggle } from './WingViewToggle';
+import { StackSettings } from 'firefox-profiler/components/shared/StackSettings';
+import { TransformNavigator } from 'firefox-profiler/components/shared/TransformNavigator';
+import { ResizableWithSplitter } from '../shared/ResizableWithSplitter';
+import { getFunctionListSectionsOpen } from 'firefox-profiler/selectors/url-state';
+import { changeFunctionListSectionOpen } from 'firefox-profiler/actions/profile-view';
+
+import type { FunctionListSectionsOpenState } from 'firefox-profiler/types';
+import type { ConnectedProps } from 'firefox-profiler/utils/connect';
+
+import './Butterfly.css';
+
+type StateProps = {
+ readonly sectionsOpen: FunctionListSectionsOpenState;
+};
+
+type DispatchProps = {
+ readonly changeFunctionListSectionOpen: typeof changeFunctionListSectionOpen;
+};
+
+type Props = ConnectedProps<{}, StateProps, DispatchProps>;
+
+class ProfileFunctionListViewImpl extends React.PureComponent {
+ _onDescendantsToggle = (isOpen: boolean) => {
+ this.props.changeFunctionListSectionOpen('descendants', isOpen);
+ };
+ _onAncestorsToggle = (isOpen: boolean) => {
+ this.props.changeFunctionListSectionOpen('ancestors', isOpen);
+ };
+ _onSelfToggle = (isOpen: boolean) => {
+ this.props.changeFunctionListSectionOpen('self', isOpen);
+ };
+
+ override render() {
+ const { sectionsOpen } = this.props;
+ return (
+
+
+
+
+
+
+ }
+ >
+
+
+ }
+ >
+
+
+ }
+ >
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export const WingViewToggle = explicitConnect<
+ OwnProps,
+ StateProps,
+ DispatchProps
+>({
+ mapStateToProps: (state: State, ownProps: OwnProps) => {
+ let view;
+ switch (ownProps.wing) {
+ case 'upper':
+ view = getUpperWingView(state);
+ break;
+ case 'lower':
+ view = getLowerWingView(state);
+ break;
+ case 'self':
+ view = getSelfWingView(state);
+ break;
+ default:
+ throw assertExhaustiveCheck(ownProps.wing, 'Unhandled wing.');
+ }
+ return { view };
+ },
+ mapDispatchToProps: {
+ changeWingView,
+ },
+ component: WingViewToggleImpl,
+});
diff --git a/src/components/calltree/columns.ts b/src/components/calltree/columns.ts
index 14f597410a..a3f92fa837 100644
--- a/src/components/calltree/columns.ts
+++ b/src/components/calltree/columns.ts
@@ -128,3 +128,47 @@ export function treeColumnsForWeightType(
throw assertExhaustiveCheck(weightType, 'Unhandled WeightType.');
}
}
+
+function withSelfPercentColumn(
+ columns: MaybeResizableColumn[]
+): MaybeResizableColumn[] {
+ const selfPercentColumn = {
+ propName: 'selfPercent',
+ titleL10nId: '',
+ initialWidth: 55,
+ hideDividerAfter: true,
+ };
+ const selfColumnIndex = columns.findIndex((c) => c.propName === 'self');
+ const selfColumn = {
+ ...columns[selfColumnIndex],
+ headerWidthAdjustment: selfPercentColumn.initialWidth,
+ };
+ const newColumns = columns.slice();
+ newColumns[selfColumnIndex] = selfColumn;
+ newColumns.splice(selfColumnIndex, 0, selfPercentColumn);
+ return newColumns;
+}
+
+export const functionListColumnsForTracingMs: MaybeResizableColumn[] =
+ withSelfPercentColumn(treeColumnsForTracingMs);
+export const functionListColumnsForSamples: MaybeResizableColumn[] =
+ withSelfPercentColumn(treeColumnsForSamples);
+export const functionListColumnsForBytes: MaybeResizableColumn[] =
+ withSelfPercentColumn(treeColumnsForBytes);
+
+// Like `treeColumnsForWeightType`, but for the FunctionList table (which has
+// an extra selfPercent column compared to the call-tree variants).
+export function functionListColumnsForWeightType(
+ weightType: WeightType
+): MaybeResizableColumn[] {
+ switch (weightType) {
+ case 'tracing-ms':
+ return functionListColumnsForTracingMs;
+ case 'samples':
+ return functionListColumnsForSamples;
+ case 'bytes':
+ return functionListColumnsForBytes;
+ default:
+ throw assertExhaustiveCheck(weightType, 'Unhandled WeightType.');
+ }
+}
diff --git a/src/components/flame-graph/Canvas.tsx b/src/components/flame-graph/Canvas.tsx
index 655f51ede9..c13669f601 100644
--- a/src/components/flame-graph/Canvas.tsx
+++ b/src/components/flame-graph/Canvas.tsx
@@ -392,10 +392,10 @@ class FlameGraphCanvasImpl extends React.PureComponent {
return null;
}
- const ratio =
- stackTiming.end[flameGraphTimingIndex] -
- stackTiming.start[flameGraphTimingIndex];
-
+ const ratio = flameGraphTiming.getRatioOfRootTotalSummary(
+ depth,
+ flameGraphTimingIndex
+ );
let percentage = formatPercent(ratio);
if (tracedTiming) {
const { total } = getSelfAndTotalForCallNode(
diff --git a/src/components/shared/ContextMenu.css b/src/components/shared/ContextMenu.css
index 756fcd0b12..25931c5f39 100644
--- a/src/components/shared/ContextMenu.css
+++ b/src/components/shared/ContextMenu.css
@@ -141,8 +141,8 @@
}
.react-contextmenu-item--selected.checked:not(
- .react-contextmenu-item--disabled
-)::before {
+ .react-contextmenu-item--disabled
+ )::before {
/* Invert the colors of the checkmark when selected */
border-color: var(--internal-active-foreground-color);
}
diff --git a/src/components/shared/DisclosureBox.css b/src/components/shared/DisclosureBox.css
new file mode 100644
index 0000000000..2b91918d85
--- /dev/null
+++ b/src/components/shared/DisclosureBox.css
@@ -0,0 +1,72 @@
+/* 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/. */
+
+.disclosureBox {
+ display: flex;
+ min-height: 0;
+ flex-direction: column;
+}
+
+.disclosureBox.open {
+ flex: 1;
+}
+
+.disclosureBoxHeader {
+ display: flex;
+ flex-shrink: 0;
+ align-items: stretch;
+ border-top: 1px solid var(--base-border-color);
+ background: var(--panel-background-color);
+}
+
+.disclosureBoxButton {
+ display: flex;
+ min-width: 0;
+ flex: 1;
+ align-items: center;
+ padding: 2px 6px;
+ border: none;
+ background: transparent;
+ color: var(--panel-foreground-color);
+ cursor: pointer;
+ font-size: 11px;
+ font-weight: bold;
+ gap: 4px;
+ text-align: start;
+}
+
+.disclosureBoxButton:hover {
+ background: var(--clickable-ghost-hover-background-color);
+}
+
+.disclosureBoxButton:active {
+ background: var(--clickable-ghost-active-background-color);
+}
+
+.disclosureBoxHeaderActions {
+ display: flex;
+ flex-shrink: 0;
+ align-items: center;
+ padding-right: 4px;
+ gap: 2px;
+}
+
+.disclosureBoxArrow {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ border-top: 4px solid transparent;
+ border-bottom: 4px solid transparent;
+ border-left: 6px solid currentcolor;
+}
+
+.disclosureBox.open .disclosureBoxArrow {
+ transform: rotate(90deg);
+}
+
+.disclosureBoxContents {
+ display: flex;
+ min-height: 0;
+ flex: 1;
+}
diff --git a/src/components/shared/DisclosureBox.tsx b/src/components/shared/DisclosureBox.tsx
new file mode 100644
index 0000000000..22e5d0d610
--- /dev/null
+++ b/src/components/shared/DisclosureBox.tsx
@@ -0,0 +1,48 @@
+/* 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/. */
+
+import * as React from 'react';
+import { useCallback } from 'react';
+
+import './DisclosureBox.css';
+
+type Props = {
+ readonly label: string;
+ readonly isOpen: boolean;
+ readonly onToggle: (isOpen: boolean) => void;
+ readonly headerActions?: React.ReactNode;
+ readonly children: React.ReactNode;
+};
+
+export function DisclosureBox({
+ label,
+ isOpen,
+ onToggle,
+ headerActions,
+ children,
+}: Props) {
+ const handleToggle = useCallback(() => {
+ onToggle(!isOpen);
+ }, [isOpen, onToggle]);
+
+ return (
+
+
+
+ {headerActions ? (
+
{headerActions}
+ ) : null}
+
+ {isOpen ?
{children}
: null}
+
+
+
+`;
diff --git a/src/test/fixtures/utils.ts b/src/test/fixtures/utils.ts
index b57a898e8b..c766fc00d2 100644
--- a/src/test/fixtures/utils.ts
+++ b/src/test/fixtures/utils.ts
@@ -7,6 +7,7 @@ import {
computeCallNodeSelfAndSummary,
computeCallTreeTimings,
computeFunctionListTimings,
+ computeLowerWingTimings,
type CallTree,
} from 'firefox-profiler/profile-logic/call-tree';
import { getEmptyThread } from 'firefox-profiler/profile-logic/data-structures';
@@ -14,6 +15,7 @@ import {
computeCallNodeFuncIsDuplicate,
getCallNodeInfo,
getInvertedCallNodeInfo,
+ getLowerWingCallNodeInfo,
getSampleIndexToCallNodeIndex,
getOriginAnnotationForFunc,
createThreadFromDerivedTables,
@@ -22,6 +24,7 @@ import {
computeSamplesTableFromRawSamplesTable,
computeJsAllocationsTableFromRawJsAllocationsTable,
computeNativeAllocationsTableFromRawNativeAllocationsTable,
+ createUpperWingCallNodeInfo,
} from 'firefox-profiler/profile-logic/profile-data';
import { getProfileWithDicts } from './profiles/processed-profile';
import { StringTable } from '../../utils/string-table';
@@ -281,6 +284,111 @@ export function functionListTreeFromProfile(
);
}
+/**
+ * This function creates the "upper wing" CallTree for a profile and a selected
+ * function. The upper wing shows the call subtrees that are rooted at the
+ * selected function, i.e. it answers "where is this function called from / what
+ * does it call".
+ */
+export function upperWingTreeFromProfile(
+ profile: Profile,
+ selectedFuncName: string,
+ threadIndex: number = 0
+): CallTree {
+ const { derivedThreads, defaultCategory } = getProfileWithDicts(profile);
+ const thread = derivedThreads[threadIndex];
+ const callNodeInfo = getCallNodeInfo(
+ thread.stackTable,
+ thread.frameTable,
+ defaultCategory
+ );
+ const selectedFunc =
+ thread.funcTable.name.findIndex(
+ (i) => thread.stringTable.getString(i) === selectedFuncName
+ ) ?? null;
+ const upperWingCallNodeInfo = createUpperWingCallNodeInfo(
+ callNodeInfo,
+ selectedFunc === -1 ? null : selectedFunc,
+ thread.stackTable,
+ thread.frameTable,
+ thread.funcTable.length,
+ defaultCategory
+ );
+ const selfAndSummary = computeCallNodeSelfAndSummary(
+ thread.samples,
+ getSampleIndexToCallNodeIndex(
+ thread.samples.stack,
+ upperWingCallNodeInfo.getStackIndexToNonInvertedCallNodeIndex()
+ ),
+ upperWingCallNodeInfo.getCallNodeTable().length
+ );
+ const timings = computeCallTreeTimings(upperWingCallNodeInfo, selfAndSummary);
+ return getCallTree(
+ thread,
+ upperWingCallNodeInfo,
+ ensureExists(profile.meta.categories),
+ thread.samples,
+ timings,
+ 'samples'
+ );
+}
+
+/**
+ * This function creates the "lower wing" CallTree for a profile and a selected
+ * function. The lower wing is an inverted call tree where each root's total
+ * counts only samples where the selected function appears in the call stack.
+ *
+ * Pass `null` (or a name that does not exist in the thread) to exercise the
+ * "no function selected" path.
+ */
+export function lowerWingTreeFromProfile(
+ profile: Profile,
+ selectedFuncName: string | null,
+ threadIndex: number = 0
+): CallTree {
+ const { derivedThreads, defaultCategory } = getProfileWithDicts(profile);
+ const thread = derivedThreads[threadIndex];
+ const callNodeInfo = getCallNodeInfo(
+ thread.stackTable,
+ thread.frameTable,
+ defaultCategory
+ );
+ const selectedFunc =
+ selectedFuncName === null
+ ? -1
+ : (thread.funcTable.name.findIndex(
+ (i) => thread.stringTable.getString(i) === selectedFuncName
+ ) ?? -1);
+ const selectedFuncIndex = selectedFunc === -1 ? null : selectedFunc;
+ const lowerWingCallNodeInfo = getLowerWingCallNodeInfo(
+ callNodeInfo,
+ defaultCategory,
+ thread.funcTable.length,
+ selectedFuncIndex
+ );
+ const selfAndSummary = computeCallNodeSelfAndSummary(
+ thread.samples,
+ getSampleIndexToCallNodeIndex(
+ thread.samples.stack,
+ callNodeInfo.getStackIndexToNonInvertedCallNodeIndex()
+ ),
+ callNodeInfo.getCallNodeTable().length
+ );
+ const timings = computeLowerWingTimings(
+ lowerWingCallNodeInfo,
+ selfAndSummary,
+ selectedFuncIndex
+ );
+ return getCallTree(
+ thread,
+ lowerWingCallNodeInfo,
+ ensureExists(profile.meta.categories),
+ thread.samples,
+ timings,
+ 'samples'
+ );
+}
+
/**
* This function formats a call tree into a human readable form, to make it easy
* to assert certain relationships about the data structure in a really terse
diff --git a/src/test/store/__snapshots__/profile-view.test.ts.snap b/src/test/store/__snapshots__/profile-view.test.ts.snap
index 409c516cca..02a99ab3e0 100644
--- a/src/test/store/__snapshots__/profile-view.test.ts.snap
+++ b/src/test/store/__snapshots__/profile-view.test.ts.snap
@@ -2350,6 +2350,7 @@ CallTree {
0,
0,
],
+ "flameGraphWidthTotal": 2,
"rootTotalSummary": 2,
"self": Float64Array [
0,
@@ -4420,26 +4421,38 @@ Process: \\"default\\" (0)"
exports[`snapshots of selectors/profile matches the last stored run of selectedThreadSelector.getViewOptions 1`] = `
Object {
- "expandedInvertedCallNodePaths": PathSet {
- "_table": Map {},
- },
- "expandedNonInvertedCallNodePaths": PathSet {
- "_table": Map {
- "0" => Array [
- 0,
- ],
- "0-1" => Array [
- 0,
- 1,
- ],
+ "expandedCallNodePaths": Object {
+ "INVERTED_TREE": PathSet {
+ "_table": Map {},
+ },
+ "LOWER_WING": PathSet {
+ "_table": Map {},
+ },
+ "NON_INVERTED_TREE": PathSet {
+ "_table": Map {
+ "0" => Array [
+ 0,
+ ],
+ "0-1" => Array [
+ 0,
+ 1,
+ ],
+ },
+ },
+ "UPPER_WING": PathSet {
+ "_table": Map {},
},
},
"lastSeenTransformCount": 1,
- "selectedInvertedCallNodePath": Array [],
+ "selectedCallNodePaths": Object {
+ "INVERTED_TREE": Array [],
+ "LOWER_WING": Array [],
+ "NON_INVERTED_TREE": Array [
+ 0,
+ 1,
+ ],
+ "UPPER_WING": Array [],
+ },
"selectedNetworkMarker": null,
- "selectedNonInvertedCallNodePath": Array [
- 0,
- 1,
- ],
}
`;
diff --git a/src/test/store/bottom-box.test.ts b/src/test/store/bottom-box.test.ts
index 32a6e1c1a4..600c43db74 100644
--- a/src/test/store/bottom-box.test.ts
+++ b/src/test/store/bottom-box.test.ts
@@ -8,7 +8,10 @@ import * as UrlStateSelectors from '../../selectors/url-state';
import * as ProfileSelectors from '../../selectors/profile';
import { selectedThreadSelectors } from '../../selectors/per-thread';
import { emptyAddressTimings } from '../../profile-logic/address-timings';
-import { getBottomBoxInfoForCallNode } from '../../profile-logic/bottom-box';
+import {
+ getBottomBoxInfoForCallNode,
+ getBottomBoxInfoForFunction,
+} from '../../profile-logic/bottom-box';
import {
changeSelectedCallNode,
updateBottomBoxContentsAndMaybeOpen,
@@ -373,3 +376,81 @@ describe('bottom box', function () {
// - A test with multiple threads: Open the assembly view for a symbol, switch
// to a different thread, check timings
});
+
+describe('getBottomBoxInfoForFunction', function () {
+ it('uses the innermost frame when a function appears multiple times due to recursion (A->B->A->B)', function () {
+ // Stack: A[line:20] -> B[line:30] -> A[line:21] -> B[line:31]
+ // B appears at line 30 (outer) and line 31 (inner/leaf).
+ // Double-clicking B in the function list should use line 31 (innermost).
+ const { derivedThreads, funcNamesDictPerThread } =
+ getProfileFromTextSamples(`
+ A[file:a.js][line:20]
+ B[file:b.js][line:30]
+ A[file:a.js][line:21]
+ B[file:b.js][line:31]
+ `);
+ const [thread] = derivedThreads;
+ const [{ B }] = funcNamesDictPerThread;
+
+ const bottomBoxInfo = getBottomBoxInfoForFunction(
+ B,
+ thread,
+ thread.samples
+ );
+
+ // scrollToLineNumber should be 31 (the innermost B), not 30 (the outer B).
+ expect(bottomBoxInfo.scrollToLineNumber).toBe(31);
+ });
+
+ it('uses the innermost frame when a function appears multiple times due to recursion via another function (A->B->C->B->D)', function () {
+ // Stack: A[line:20] -> B[line:30] -> C[line:40] -> B[line:31] -> D[line:50]
+ // B appears at line 30 (outer) and line 31 (inner), with C and D in between.
+ // Double-clicking B in the function list should use line 31 (innermost B).
+ const { derivedThreads, funcNamesDictPerThread } =
+ getProfileFromTextSamples(`
+ A[file:a.js][line:20]
+ B[file:b.js][line:30]
+ C[file:c.js][line:40]
+ B[file:b.js][line:31]
+ D[file:d.js][line:50]
+ `);
+ const [thread] = derivedThreads;
+ const [{ B }] = funcNamesDictPerThread;
+
+ const bottomBoxInfo = getBottomBoxInfoForFunction(
+ B,
+ thread,
+ thread.samples
+ );
+
+ // scrollToLineNumber should be 31 (the innermost B), not 30 (the outer B).
+ expect(bottomBoxInfo.scrollToLineNumber).toBe(31);
+ });
+
+ it('opens the source view when double-clicking a function in the function list', function () {
+ const { profile, derivedThreads, funcNamesDictPerThread } =
+ getProfileFromTextSamples(`
+ A[file:a.js][line:20]
+ B[file:b.js][line:30]
+ `);
+ const { dispatch, getState } = storeWithProfile(profile);
+ const [thread] = derivedThreads;
+ const [{ B }] = funcNamesDictPerThread;
+
+ dispatch(changeSelectedTab('function-list'));
+
+ const bottomBoxInfo = getBottomBoxInfoForFunction(
+ B,
+ thread,
+ thread.samples
+ );
+ dispatch(
+ updateBottomBoxContentsAndMaybeOpen('function-list', bottomBoxInfo)
+ );
+
+ expect(UrlStateSelectors.getIsBottomBoxOpen(getState())).toBeTrue();
+ expect(UrlStateSelectors.getSourceViewScrollToLineNumber(getState())).toBe(
+ 30
+ );
+ });
+});
diff --git a/src/test/store/icons.test.ts b/src/test/store/icons.test.ts
index 3a9d3df13f..c1b77810b9 100644
--- a/src/test/store/icons.test.ts
+++ b/src/test/store/icons.test.ts
@@ -37,6 +37,7 @@ describe('actions/icons', function () {
totalPercent: '0',
self: '0',
selfWithUnit: '0 ms',
+ selfPercent: '0',
name: 'icon',
lib: 'icon',
isFrameLabel: false,
diff --git a/src/test/store/profile-view.test.ts b/src/test/store/profile-view.test.ts
index 127d1bca69..3e364e6772 100644
--- a/src/test/store/profile-view.test.ts
+++ b/src/test/store/profile-view.test.ts
@@ -3626,6 +3626,7 @@ describe('right clicked call node info', () => {
expect(getRightClickedCallNodeInfo(getState())).toEqual({
threadsKey: 0,
+ area: 'NON_INVERTED_TREE',
callNodePath: [0, 1],
});
});
@@ -3637,6 +3638,7 @@ describe('right clicked call node info', () => {
expect(getRightClickedCallNodeInfo(getState())).toEqual({
threadsKey: 0,
+ area: 'NON_INVERTED_TREE',
callNodePath: [0, 1],
});
diff --git a/src/test/store/useful-tabs.test.ts b/src/test/store/useful-tabs.test.ts
index 0d63df2759..5c84982d43 100644
--- a/src/test/store/useful-tabs.test.ts
+++ b/src/test/store/useful-tabs.test.ts
@@ -24,6 +24,7 @@ describe('getUsefulTabs', function () {
const { getState } = storeWithProfile(profile);
expect(selectedThreadSelectors.getUsefulTabs(getState())).toEqual([
'calltree',
+ 'function-list',
'flame-graph',
'stack-chart',
'marker-chart',
@@ -62,6 +63,7 @@ describe('getUsefulTabs', function () {
});
expect(selectedThreadSelectors.getUsefulTabs(getState())).toEqual([
'calltree',
+ 'function-list',
'flame-graph',
'stack-chart',
'marker-chart',
@@ -89,6 +91,7 @@ describe('getUsefulTabs', function () {
const { getState } = storeWithProfile(profile);
expect(selectedThreadSelectors.getUsefulTabs(getState())).toEqual([
'calltree',
+ 'function-list',
'flame-graph',
'stack-chart',
'marker-chart',
@@ -121,6 +124,7 @@ describe('getUsefulTabs', function () {
const { getState } = storeWithProfile(profile);
expect(selectedThreadSelectors.getUsefulTabs(getState())).toEqual([
'calltree',
+ 'function-list',
'flame-graph',
'stack-chart',
'marker-chart',
diff --git a/src/test/unit/profile-data.test.ts b/src/test/unit/profile-data.test.ts
index 206e8a07b6..228d6d7272 100644
--- a/src/test/unit/profile-data.test.ts
+++ b/src/test/unit/profile-data.test.ts
@@ -19,6 +19,7 @@ import {
getSampleIndexToCallNodeIndex,
getTreeOrderComparator,
getSampleSelectedStates,
+ getSamplesSelectedStatesForFunction,
extractProfileFilterPageData,
findAddressProofForFile,
calculateFunctionSizeLowerBound,
@@ -1234,6 +1235,149 @@ describe('getSampleSelectedStates', function () {
});
});
+describe('getSamplesSelectedStatesForFunction', function () {
+ function setup(textSamples: string) {
+ const {
+ derivedThreads,
+ funcNamesDictPerThread: [funcNamesDict],
+ } = getProfileFromTextSamples(textSamples);
+ const [thread] = derivedThreads;
+ const callNodeInfo = getCallNodeInfo(
+ thread.stackTable,
+ thread.frameTable,
+ 0
+ );
+ const sampleCallNodes = getSampleIndexToCallNodeIndex(
+ thread.samples.stack,
+ callNodeInfo.getStackIndexToNonInvertedCallNodeIndex()
+ );
+ return {
+ callNodeTable: callNodeInfo.getCallNodeTable(),
+ sampleCallNodes,
+ funcNamesDict,
+ };
+ }
+
+ it('marks all non-filtered samples as selected when nothing is selected', function () {
+ const { callNodeTable, sampleCallNodes } = setup(`
+ A A A
+ B C
+ `);
+ expect(
+ Array.from(
+ getSamplesSelectedStatesForFunction(
+ sampleCallNodes,
+ null,
+ callNodeTable
+ )
+ )
+ ).toEqual([
+ SelectedState.Selected,
+ SelectedState.Selected,
+ SelectedState.Selected,
+ ]);
+ });
+
+ it('marks samples as selected when their call stack contains the selected function', function () {
+ // 0 1 2 3 4
+ // A A A A A
+ // B D B D D
+ // C E F G
+ const {
+ callNodeTable,
+ sampleCallNodes,
+ funcNamesDict: { B, D },
+ } = setup(`
+ A A A A A
+ B D B D D
+ C E F G
+ `);
+
+ // Selecting function B: samples 0, 2 have B in their stack
+ expect(
+ Array.from(
+ getSamplesSelectedStatesForFunction(sampleCallNodes, B, callNodeTable)
+ )
+ ).toEqual([
+ SelectedState.Selected,
+ SelectedState.UnselectedOrderedBeforeSelected,
+ SelectedState.Selected,
+ SelectedState.UnselectedOrderedBeforeSelected,
+ SelectedState.UnselectedOrderedBeforeSelected,
+ ]);
+
+ // Selecting function D: samples 1, 3, 4 have D in their stack
+ expect(
+ Array.from(
+ getSamplesSelectedStatesForFunction(sampleCallNodes, D, callNodeTable)
+ )
+ ).toEqual([
+ SelectedState.UnselectedOrderedBeforeSelected,
+ SelectedState.Selected,
+ SelectedState.UnselectedOrderedBeforeSelected,
+ SelectedState.Selected,
+ SelectedState.Selected,
+ ]);
+ });
+
+ it('marks filtered-out samples as FilteredOutByTransform', function () {
+ const {
+ callNodeTable,
+ sampleCallNodes,
+ funcNamesDict: { B },
+ } = setup(`
+ A A A
+ B C
+ `);
+ // Sample 2 has no stack (null), treated as filtered out.
+ // Manually null out sample 2's call node.
+ sampleCallNodes[2] = null;
+
+ expect(
+ Array.from(
+ getSamplesSelectedStatesForFunction(sampleCallNodes, B, callNodeTable)
+ )
+ ).toEqual([
+ SelectedState.Selected,
+ SelectedState.UnselectedOrderedBeforeSelected,
+ SelectedState.FilteredOutByTransform,
+ ]);
+ });
+
+ it('selects samples whose ancestor call node contains the function, not just the leaf', function () {
+ // 0 1
+ // A A
+ // B C
+ // D
+ // Selecting A should match all samples (A is an ancestor of everything).
+ const {
+ callNodeTable,
+ sampleCallNodes,
+ funcNamesDict: { A, B },
+ } = setup(`
+ A A
+ B C
+ D
+ `);
+
+ expect(
+ Array.from(
+ getSamplesSelectedStatesForFunction(sampleCallNodes, A, callNodeTable)
+ )
+ ).toEqual([SelectedState.Selected, SelectedState.Selected]);
+
+ // Selecting B only matches sample 0 (B is in the path A->B->D).
+ expect(
+ Array.from(
+ getSamplesSelectedStatesForFunction(sampleCallNodes, B, callNodeTable)
+ )
+ ).toEqual([
+ SelectedState.Selected,
+ SelectedState.UnselectedOrderedBeforeSelected,
+ ]);
+ });
+});
+
describe('extractProfileFilterPageData', function () {
const pages = {
mozilla: {
diff --git a/src/test/unit/profile-tree.test.ts b/src/test/unit/profile-tree.test.ts
index 90f8a59a91..234560f63c 100644
--- a/src/test/unit/profile-tree.test.ts
+++ b/src/test/unit/profile-tree.test.ts
@@ -11,11 +11,20 @@ import {
computeCallNodeSelfAndSummary,
computeCallTreeTimings,
} from '../../profile-logic/call-tree';
-import { computeFlameGraphRows } from '../../profile-logic/flame-graph';
+import {
+ computeFlameGraphRows,
+ createLowerWingFlameGraphTiming,
+} from '../../profile-logic/flame-graph';
+import type {
+ FlameGraphTiming,
+ FlameGraphTimingRow,
+} from '../../profile-logic/flame-graph';
import {
computeFrameTableFromRawFrameTable,
+ computeLowerWingMaxDepthPlusOne,
getCallNodeInfo,
getInvertedCallNodeInfo,
+ getLowerWingCallNodeInfo,
getOriginAnnotationForFunc,
getOriginalPositionForFrame,
filterRawThreadSamplesToRange,
@@ -25,6 +34,8 @@ import { ResourceType } from 'firefox-profiler/types';
import {
callTreeFromProfile,
functionListTreeFromProfile,
+ upperWingTreeFromProfile,
+ lowerWingTreeFromProfile,
formatTree,
formatTreeIncludeCategories,
addSourceToTable,
@@ -85,6 +96,7 @@ describe('unfiltered call tree', function () {
type: 'NON_INVERTED',
timings: {
rootTotalSummary: 3,
+ flameGraphWidthTotal: 3,
callNodeHasChildren: new Uint8Array([1, 1, 1, 1, 0, 1, 0, 1, 0]),
self: new Float64Array([0, 0, 0, 0, 1, 0, 1, 0, 1]),
total: new Float64Array([3, 3, 2, 1, 1, 1, 1, 1, 1]),
@@ -138,6 +150,243 @@ describe('unfiltered call tree', function () {
});
});
+ describe('lower wing flame graph', function () {
+ // The shared fixture profile (see `getProfile` above) has every sample
+ // rooted at A, so A has no callers in the inverted (lower wing) view.
+ // This used to render an empty flame graph; the regression test below
+ // exercises the fix that emits a single root cell with the full total.
+ function setup(selectedFuncIndex: number | null) {
+ const { derivedThreads, defaultCategory } = getProfile();
+ const [thread] = derivedThreads;
+ const callNodeInfo = getCallNodeInfo(
+ thread.stackTable,
+ thread.frameTable,
+ defaultCategory
+ );
+ const lowerWing = getLowerWingCallNodeInfo(
+ callNodeInfo,
+ defaultCategory,
+ thread.funcTable.length,
+ selectedFuncIndex
+ );
+ const selfAndSummary = computeCallNodeSelfAndSummary(
+ thread.samples,
+ getSampleIndexToCallNodeIndex(
+ thread.samples.stack,
+ callNodeInfo.getStackIndexToNonInvertedCallNodeIndex()
+ ),
+ callNodeInfo.getCallNodeTable().length
+ );
+ const timing = createLowerWingFlameGraphTiming(
+ lowerWing,
+ selfAndSummary,
+ callNodeInfo.getCallNodeTable(),
+ selectedFuncIndex,
+ thread.funcTable,
+ thread.stringTable
+ );
+ return { thread, callNodeInfo, lowerWing, selfAndSummary, timing };
+ }
+
+ // Materialize every row of a lazy timing into a flat array for compact
+ // assertions. Equivalent to the old `flameGraphTiming.rows` field.
+ function materializeRows(timing: FlameGraphTiming): FlameGraphTimingRow[] {
+ const rows: FlameGraphTimingRow[] = [];
+ for (let depth = 0; depth < timing.rowCount; depth++) {
+ rows.push(timing.getRow(depth));
+ }
+ return rows;
+ }
+
+ it('renders a single full-width root cell when the selected function has no callers', function () {
+ const { timing } = setup(A);
+
+ // Every one of the 3 samples passes through A at the bottom of the
+ // stack, so A's lower-wing row is a single full-width cell with full
+ // self time.
+ expect(timing.rowCount).toBe(1);
+ expect(timing.getRow(0)).toEqual({
+ start: [0],
+ end: [1],
+ selfRelative: [1],
+ callNode: [A],
+ length: 1,
+ });
+ });
+
+ it('builds a multi-row flame graph for a function with callers', function () {
+ // C appears in two samples and is called by B in both, so the lower
+ // wing tree has C as root with one caller chain (B -> A).
+ const { lowerWing, timing } = setup(C);
+
+ // Three rows: [C], [B], [A]. Each cell occupies the full width since
+ // it's the only sibling at its depth.
+ expect(timing.rowCount).toBe(3);
+ const rows = materializeRows(timing);
+ // Cell values are InvertedCallNodeHandle values (root === funcIndex,
+ // non-roots come from the lower-wing handle scheme); translate via
+ // funcForNode for a clear func-based assertion.
+ expect(
+ rows.map((r) => r.callNode.map((h) => lowerWing.funcForNode(h)))
+ ).toEqual([[C], [B], [A]]);
+ expect(rows.map((r) => ({ start: r.start, end: r.end }))).toEqual([
+ { start: [0], end: [1] },
+ { start: [0], end: [1] },
+ { start: [0], end: [1] },
+ ]);
+ // Only the deepest inverted node (A, the topmost expanded caller)
+ // accumulates self; intermediate nodes' self is zero.
+ expect(rows.map((r) => r.selfRelative)).toEqual([[0], [0], [1]]);
+ });
+
+ it('extends the lower-wing tree lazily as rows are requested', function () {
+ // E sits at the deepest leaf of the fixture (A -> B -> C -> D -> E),
+ // so its lower-wing tree has rows E, D, C, B, A (max depth 4).
+ const { lowerWing, timing } = setup(E);
+
+ // The cheap max-depth selector knows the row count up front, without
+ // building any of the tree.
+ expect(timing.rowCount).toBe(5);
+
+ // Before any rows are fetched: only the root row of the lower-wing
+ // tree exists; no BFS work has happened.
+ expect(lowerWing.getLowerWingTableUpToDepth(-1).length).toBe(1);
+
+ // Fetching row 0 extends the BFS just enough to process the root and
+ // emit its depth-1 child. The internal table is now length 2.
+ timing.getRow(0);
+ expect(lowerWing.getLowerWingTableUpToDepth(-1).length).toBe(2);
+
+ // Fetching row 2 extends through depth 2, growing the table further.
+ timing.getRow(2);
+ expect(lowerWing.getLowerWingTableUpToDepth(-1).length).toBe(4);
+
+ // Materializing every row matches an independently-built eager
+ // baseline (one row per depth, each cell full-width).
+ const rows = materializeRows(timing);
+ expect(
+ rows.map((r) => r.callNode.map((h) => lowerWing.funcForNode(h)))
+ ).toEqual([[E], [D], [C], [B], [A]]);
+ expect(rows.map((r) => ({ start: r.start, end: r.end }))).toEqual([
+ { start: [0], end: [1] },
+ { start: [0], end: [1] },
+ { start: [0], end: [1] },
+ { start: [0], end: [1] },
+ { start: [0], end: [1] },
+ ]);
+ // Only the deepest caller (A, the topmost expanded ancestor) carries
+ // self time. Self values stay correct as the tree is grown one row at
+ // a time because each `getRow(D)` extends the CNI to depth D, which
+ // emits depth D+1 children needed to compute self = total − Σchildren.
+ expect(rows.map((r) => r.selfRelative)).toEqual([
+ [0],
+ [0],
+ [0],
+ [0],
+ [1],
+ ]);
+ });
+
+ it('builds the lower wing tree incrementally via getLowerWingTableUpToDepth', function () {
+ // E sits at the deepest leaf of the fixture (A -> B -> C -> D -> E),
+ // so its lower-wing tree has rows E, D, C, B, A (max depth 4).
+ const { derivedThreads, defaultCategory } = getProfile();
+ const [thread] = derivedThreads;
+ const callNodeInfo = getCallNodeInfo(
+ thread.stackTable,
+ thread.frameTable,
+ defaultCategory
+ );
+
+ const lowerWing = getLowerWingCallNodeInfo(
+ callNodeInfo,
+ defaultCategory,
+ thread.funcTable.length,
+ E
+ );
+
+ // Before any extension: only the root row (placeholder children) exists.
+ // The cached snapshot is invalidated as the BFS grows the table, so each
+ // partial call returns a snapshot whose `length` reflects how far the
+ // tree has been expanded.
+ const tableAtRoot = lowerWing.getLowerWingTableUpToDepth(0);
+ // Processing depth 0 emits the single depth-1 child (D), so the table
+ // length is 2.
+ expect(tableAtRoot.length).toBe(2);
+ expect(tableAtRoot.depth).toEqual([0, 1]);
+
+ // Extending by one more level reveals depth-2 children of D (only C).
+ const tableAtDepth1 = lowerWing.getLowerWingTableUpToDepth(1);
+ expect(tableAtDepth1.length).toBe(3);
+ expect(tableAtDepth1.depth).toEqual([0, 1, 2]);
+
+ // Going past the tree's real depth caps at the actual max (4 + 1 = 5).
+ const tableFull = lowerWing.getLowerWingTableUpToDepth(99);
+ expect(tableFull.length).toBe(5);
+ expect(tableFull.depth).toEqual([0, 1, 2, 3, 4]);
+
+ // The lazy build must match the eager build that getLowerWingTable
+ // returns (which is just getLowerWingTableUpToDepth(Infinity)).
+ const eager = getLowerWingCallNodeInfo(
+ callNodeInfo,
+ defaultCategory,
+ thread.funcTable.length,
+ E
+ ).getLowerWingTable();
+ expect(tableFull.length).toBe(eager.length);
+ expect(tableFull.prefix).toEqual(eager.prefix);
+ expect(tableFull.func).toEqual(eager.func);
+ expect(tableFull.depth).toEqual(eager.depth);
+ expect(tableFull.suffixOrderIndexRangeStart).toEqual(
+ eager.suffixOrderIndexRangeStart
+ );
+ expect(tableFull.suffixOrderIndexRangeEnd).toEqual(
+ eager.suffixOrderIndexRangeEnd
+ );
+ });
+
+ it('computes max depth without building the lower wing tree, matching the eager build', function () {
+ const { derivedThreads, defaultCategory } = getProfile();
+ const [thread] = derivedThreads;
+ const callNodeInfo = getCallNodeInfo(
+ thread.stackTable,
+ thread.frameTable,
+ defaultCategory
+ );
+ const callNodeTable = callNodeInfo.getCallNodeTable();
+
+ // No selection → single empty root row.
+ expect(computeLowerWingMaxDepthPlusOne(callNodeTable, null)).toBe(1);
+
+ // For every func in the fixture, the cheap helper should agree with the
+ // depth read off the fully-built lower-wing table.
+ const funcCount = thread.funcTable.length;
+ for (let f = 0; f < funcCount; f++) {
+ const lowerWing = getLowerWingCallNodeInfo(
+ callNodeInfo,
+ defaultCategory,
+ funcCount,
+ f
+ );
+ const table = lowerWing.getLowerWingTable();
+ const eagerMaxDepthPlusOne = table.depth[table.length - 1] + 1;
+ expect(computeLowerWingMaxDepthPlusOne(callNodeTable, f)).toBe(
+ eagerMaxDepthPlusOne
+ );
+ }
+
+ // Spot-check the absolute values for a few funcs in the fixture:
+ // A (root, no callers) -> 1
+ // B (called by A) -> 2
+ // C (called by B, A) -> 3
+ // E (deepest leaf chain) -> 5
+ expect(computeLowerWingMaxDepthPlusOne(callNodeTable, A)).toBe(1);
+ expect(computeLowerWingMaxDepthPlusOne(callNodeTable, B)).toBe(2);
+ expect(computeLowerWingMaxDepthPlusOne(callNodeTable, C)).toBe(3);
+ expect(computeLowerWingMaxDepthPlusOne(callNodeTable, E)).toBe(5);
+ });
+ });
+
/**
* Explicitly test the structure of the unfiltered call tree.
*/
@@ -331,6 +580,7 @@ describe('unfiltered call tree', function () {
name: 'A',
self: '—',
selfWithUnit: '—',
+ selfPercent: '0%',
total: '3',
totalWithUnit: '3 samples',
totalPercent: '100%',
@@ -347,6 +597,7 @@ describe('unfiltered call tree', function () {
name: 'I',
self: '1',
selfWithUnit: '1 sample',
+ selfPercent: '33%',
total: '1',
totalWithUnit: '1 sample',
totalPercent: '33%',
@@ -578,6 +829,177 @@ describe('function list', function () {
});
});
+describe('upper wing', function () {
+ // Samples: A->B->C, A->B->D, A->E->C, A->E->F
+ const textSamples = `
+ A A A A
+ B B E E
+ C D C F
+ `;
+
+ it('shows all callee subtrees of the selected function', function () {
+ const { profile } = getProfileFromTextSamples(textSamples);
+ // Select B: show subtrees rooted at B (i.e. B->C and B->D)
+ const callTree = upperWingTreeFromProfile(profile, 'B');
+ expect(formatTree(callTree)).toEqual([
+ '- B (total: 2, self: —)',
+ ' - C (total: 1, self: 1)',
+ ' - D (total: 1, self: 1)',
+ ]);
+ });
+
+ it('merges call nodes with the same function across different callers', function () {
+ const { profile } = getProfileFromTextSamples(textSamples);
+ // C appears under both B and E; the upper wing for C should show both
+ // subtrees merged into one root C node
+ const callTree = upperWingTreeFromProfile(profile, 'C');
+ expect(formatTree(callTree)).toEqual(['- C (total: 2, self: 2)']);
+ });
+
+ it('returns an empty tree when no function is selected', function () {
+ const { profile } = getProfileFromTextSamples(textSamples);
+ // null selection: no subtrees to show
+ const callTree = upperWingTreeFromProfile(profile, 'NONEXISTENT');
+ expect(formatTree(callTree)).toEqual([]);
+ });
+});
+
+describe('lower wing', function () {
+ // Samples: A->B->C, A->B->D, A->E->C, A->E->F
+ const textSamples = `
+ A A A A
+ B B E E
+ C D C F
+ `;
+
+ it('shows callers of the selected function as inverted roots', function () {
+ const { profile } = getProfileFromTextSamples(textSamples);
+ // Select C: C has self-time in both A->B->C and A->E->C, so C becomes the
+ // inverted root with total 2. Its callers B and E appear as children.
+ const callTree = lowerWingTreeFromProfile(profile, 'C');
+ expect(formatTree(callTree)).toEqual([
+ '- C (total: 2, self: 2)',
+ ' - B (total: 1, self: —)',
+ ' - A (total: 1, self: —)',
+ ' - E (total: 1, self: —)',
+ ' - A (total: 1, self: —)',
+ ]);
+ });
+
+ it('only counts samples where the selected function is present', function () {
+ const { profile } = getProfileFromTextSamples(textSamples);
+ // Select B: the self-time of B's subtree (C and D) gets attributed to B in
+ // the non-inverted table, so the inverted tree shows B as the root with
+ // total 2, and its caller A as a child.
+ const callTree = lowerWingTreeFromProfile(profile, 'B');
+ expect(formatTree(callTree)).toEqual([
+ '- B (total: 2, self: 2)',
+ ' - A (total: 2, self: —)',
+ ]);
+ });
+
+ it('returns an empty tree when no function is selected', function () {
+ const { profile } = getProfileFromTextSamples(textSamples);
+ const callTree = lowerWingTreeFromProfile(profile, 'NONEXISTENT');
+ expect(formatTree(callTree)).toEqual([]);
+ });
+
+ it('returns an empty tree when null is passed', function () {
+ // Exercises the `selectedFuncIndex === null` early return in
+ // _buildLowerWingTree.
+ const { profile } = getProfileFromTextSamples(textSamples);
+ const callTree = lowerWingTreeFromProfile(profile, null);
+ expect(formatTree(callTree)).toEqual([]);
+ });
+
+ it('does not double-count nested re-entries of the selected function', function () {
+ // C calls itself: A->C->B->C. The inner C must not contribute a second
+ // entry point — the outer C's entry already covers the whole stack. This
+ // exercises the subtree skip-ahead at the `entries` collection loop.
+ const { profile } = getProfileFromTextSamples(`
+ A
+ C
+ B
+ C
+ `);
+ const callTree = lowerWingTreeFromProfile(profile, 'C');
+ expect(formatTree(callTree)).toEqual([
+ '- C (total: 1, self: 1)',
+ ' - A (total: 1, self: —)',
+ ]);
+ });
+
+ it('sorts caller children by func index', function () {
+ // Three distinct callers of X. Func indices follow column-major discovery
+ // order: Z=0, X=1, A=2, M=3. The lower wing must list the children sorted
+ // by func index (Z, then A, then M), not by stack iteration order.
+ const { profile } = getProfileFromTextSamples(`
+ Z A M
+ X X X
+ `);
+ const callTree = lowerWingTreeFromProfile(profile, 'X');
+ expect(formatTree(callTree)).toEqual([
+ '- X (total: 3, self: 3)',
+ ' - Z (total: 1, self: —)',
+ ' - A (total: 1, self: —)',
+ ' - M (total: 1, self: —)',
+ ]);
+ });
+
+ it('partitions callers across multiple depths', function () {
+ // Two stacks share a depth-4 ancestor chain through D. Exercising the
+ // partition loop past depth 1 ensures the suffix-ordered ranges and
+ // per-iteration scratch buffers behave correctly across iterations.
+ const { profile } = getProfileFromTextSamples(`
+ A A
+ B E
+ C C
+ D D
+ `);
+ const callTree = lowerWingTreeFromProfile(profile, 'D');
+ expect(formatTree(callTree)).toEqual([
+ '- D (total: 2, self: 2)',
+ ' - C (total: 2, self: —)',
+ ' - B (total: 1, self: —)',
+ ' - A (total: 1, self: —)',
+ ' - E (total: 1, self: —)',
+ ' - A (total: 1, self: —)',
+ ]);
+ });
+
+ it('attributes self time to a parent when an entry runs out of ancestors mid-walk', function () {
+ // Two entry points for X: one is at the top of its stack (no ancestor),
+ // the other has B above it. At root X the first entry is a "leaf" in the
+ // ancestor walk (newDeep === -1) and contributes to X's self only; the
+ // second contributes to child B.
+ const { profile } = getProfileFromTextSamples(`
+ X B
+ _ X
+ `);
+ const callTree = lowerWingTreeFromProfile(profile, 'X');
+ expect(formatTree(callTree)).toEqual([
+ '- X (total: 2, self: 2)',
+ ' - B (total: 1, self: —)',
+ ]);
+ });
+
+ it('falls back to the default category when entry points disagree', function () {
+ // Two entry points for C with conflicting categories. The non-inverted
+ // call nodes have different categories (Graphics vs DOM), and the lower
+ // wing root for C must resolve to the default category ('Other').
+ const { profile } = getProfileFromTextSamples(`
+ A B
+ C[cat:Graphics] C[cat:DOM]
+ `);
+ const callTree = lowerWingTreeFromProfile(profile, 'C');
+ expect(formatTreeIncludeCategories(callTree)).toEqual([
+ '- C [Other] (total: 2, self: 2)',
+ ' - A [Other] (total: 1, self: —)',
+ ' - B [Other] (total: 1, self: —)',
+ ]);
+ });
+});
+
describe('diffing trees', function () {
function getProfile() {
return getMergedProfileFromTextSamples([
diff --git a/src/test/url-handling.test.ts b/src/test/url-handling.test.ts
index 8855e4094f..4c433962ae 100644
--- a/src/test/url-handling.test.ts
+++ b/src/test/url-handling.test.ts
@@ -23,6 +23,7 @@ import {
changeIncludeIdleSamples,
changeSelectedMarker,
changeMarkerTableSort,
+ changeFunctionListSort,
} from '../actions/profile-view';
import { changeSelectedTab, changeProfilesToCompare } from '../actions/app';
import {
@@ -551,6 +552,57 @@ describe('marker table sort', function () {
});
});
+describe('function list sort', function () {
+ function _getStoreOnFunctionList() {
+ const store = _getStoreWithURL();
+ store.dispatch(changeSelectedTab('function-list'));
+ return store;
+ }
+
+ it('omits the default sort from the URL', function () {
+ const { getState } = _getStoreOnFunctionList();
+ expect(getQueryStringFromState(getState())).not.toContain(
+ 'functionListSort'
+ );
+ });
+
+ it('serializes a non-default sort with primary first', function () {
+ const { getState, dispatch } = _getStoreOnFunctionList();
+ // self desc primary, total asc tiebreaker (internal: primary last)
+ dispatch(
+ changeFunctionListSort([
+ { column: 'total', ascending: true },
+ { column: 'self', ascending: false },
+ ])
+ );
+ expect(getQueryStringFromState(getState())).toContain(
+ 'functionListSort=self-desc~total-asc'
+ );
+ });
+
+ it('round-trips a non-default sort through the URL', function () {
+ const { getState, dispatch } = _getStoreOnFunctionList();
+ dispatch(changeFunctionListSort([{ column: 'self', ascending: false }]));
+ const url = urlFromState(getState().urlState);
+ const restored = stateFromLocation({
+ pathname: new URL(url, 'http://localhost').pathname,
+ search: new URL(url, 'http://localhost').search,
+ hash: '',
+ });
+ expect(restored.profileSpecific.functionListSort).toEqual([
+ { column: 'self', ascending: false },
+ ]);
+ });
+
+ it('falls back to the default when the URL has an invalid column', function () {
+ const { getState } = _getStoreWithURL({
+ pathname: '/public/abc/function-list/',
+ search: '?functionListSort=bogus-desc',
+ });
+ expect(getState().urlState.profileSpecific.functionListSort).toBeNull();
+ });
+});
+
describe('profileName', function () {
it('serializes the profileName in the URL', function () {
const { getState, dispatch } = _getStoreWithURL();
diff --git a/src/types/actions.ts b/src/types/actions.ts
index 9b495473f3..58fb75df0b 100644
--- a/src/types/actions.ts
+++ b/src/types/actions.ts
@@ -18,6 +18,7 @@ import type {
RawFrameTable,
SourceLocationTable,
SourceTable,
+ IndexIntoFuncTable,
} from './profile';
import type {
Thread,
@@ -46,6 +47,7 @@ import type {
ApiQueryError,
TableViewOptions,
DecodedInstruction,
+ CallNodeArea,
} from './state';
import type { CssPixels, StartEndRange, Milliseconds } from './units';
import type { BrowserConnectionStatus } from '../app-logic/browser-connection';
@@ -186,12 +188,18 @@ type ProfileAction =
}
| {
readonly type: 'CHANGE_SELECTED_CALL_NODE';
- readonly isInverted: boolean;
+ readonly area: CallNodeArea;
readonly threadsKey: ThreadsKey;
readonly selectedCallNodePath: CallNodePath;
readonly optionalExpandedToCallNodePath: CallNodePath | undefined;
readonly context: SelectionContext;
}
+ | {
+ readonly type: 'CHANGE_SELECTED_FUNCTION';
+ readonly threadsKey: ThreadsKey;
+ readonly selectedFunctionIndex: IndexIntoFuncTable | null;
+ readonly context: SelectionContext;
+ }
| {
readonly type: 'UPDATE_TRACK_THREAD_HEIGHT';
readonly height: CssPixels;
@@ -200,15 +208,21 @@ type ProfileAction =
| {
readonly type: 'CHANGE_RIGHT_CLICKED_CALL_NODE';
readonly threadsKey: ThreadsKey;
+ readonly area: CallNodeArea;
readonly callNodePath: CallNodePath | null;
}
+ | {
+ readonly type: 'CHANGE_RIGHT_CLICKED_FUNCTION';
+ readonly threadsKey: ThreadsKey;
+ readonly functionIndex: IndexIntoFuncTable | null;
+ }
| {
readonly type: 'FOCUS_CALL_TREE';
}
| {
readonly type: 'CHANGE_EXPANDED_CALL_NODES';
readonly threadsKey: ThreadsKey;
- readonly isInverted: boolean;
+ readonly area: CallNodeArea;
readonly expandedCallNodePaths: Array;
}
| {
@@ -564,6 +578,20 @@ type UrlStateAction =
readonly type: 'CHANGE_MARKER_TABLE_SORT';
readonly sort: SingleColumnSortState[] | null;
}
+ | {
+ readonly type: 'CHANGE_FUNCTION_LIST_SORT';
+ readonly sort: SingleColumnSortState[] | null;
+ }
+ | {
+ readonly type: 'CHANGE_FUNCTION_LIST_SECTION_OPEN';
+ readonly section: 'descendants' | 'ancestors' | 'self';
+ readonly isOpen: boolean;
+ }
+ | {
+ readonly type: 'CHANGE_WING_VIEW';
+ readonly wing: 'upper' | 'lower' | 'self';
+ readonly view: 'flame-graph' | 'call-tree';
+ }
| {
readonly type: 'CHANGE_NETWORK_SEARCH_STRING';
readonly searchString: string;
diff --git a/src/types/profile-derived.ts b/src/types/profile-derived.ts
index e5da9bd510..3d56d3bf4a 100644
--- a/src/types/profile-derived.ts
+++ b/src/types/profile-derived.ts
@@ -591,6 +591,7 @@ export type CallNodeDisplayData = Readonly<{
totalPercent: string;
self: string;
selfWithUnit: string;
+ selfPercent: string;
name: string;
lib: string;
isFrameLabel: boolean;
@@ -803,6 +804,12 @@ export type CallNodeSelfAndSummary = {
// The sum of absolute values in callNodeSelf.
// This is used for computing the percentages displayed in the call tree.
rootTotalSummary: number;
+ // The total used as the 100% reference for flame graph box widths.
+ // Usually equals rootTotalSummary, but for the upper wing it is set to the
+ // total of samples that contain the selected function, so that the root node
+ // fills the full flame graph width while percentages remain relative to all
+ // filtered samples.
+ flameGraphWidthTotal: number;
};
/**
diff --git a/src/types/state.ts b/src/types/state.ts
index 7ea92a0ba9..ebcdbda96c 100644
--- a/src/types/state.ts
+++ b/src/types/state.ts
@@ -23,6 +23,7 @@ import type {
TabID,
IndexIntoLibs,
IndexIntoSourceTable,
+ IndexIntoFuncTable,
} from './profile';
import type {
@@ -56,11 +57,10 @@ export type SourceMapSymbolicationStatus =
| 'INACTIVE'
| 'FETCHING'
| 'SYMBOLICATING';
+
export type ThreadViewOptions = {
- readonly selectedNonInvertedCallNodePath: CallNodePath;
- readonly selectedInvertedCallNodePath: CallNodePath;
- readonly expandedNonInvertedCallNodePaths: PathSet;
- readonly expandedInvertedCallNodePaths: PathSet;
+ readonly selectedCallNodePaths: Record;
+ readonly expandedCallNodePaths: Record;
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
@@ -78,11 +78,28 @@ export type TableViewOptions = {
export type TableViewOptionsPerTab = { [K in TabSlug]: TableViewOptions };
+export type CallNodeArea =
+ | 'NON_INVERTED_TREE'
+ | 'INVERTED_TREE'
+ | 'LOWER_WING'
+ | 'UPPER_WING';
+
+// State-bearing function-list wings: each has its own selected/expanded/
+// right-clicked call node path. The self wing has no such state of its own
+// (it shares it with the main tree).
+export type WingName = 'upper' | 'lower';
+
export type RightClickedCallNode = {
readonly threadsKey: ThreadsKey;
+ readonly area: CallNodeArea;
readonly callNodePath: CallNodePath;
};
+export type RightClickedFunction = {
+ readonly threadsKey: ThreadsKey;
+ readonly functionIndex: IndexIntoFuncTable;
+};
+
export type MarkerReference = {
readonly threadsKey: ThreadsKey;
readonly markerIndex: MarkerIndex;
@@ -92,6 +109,10 @@ export type SelectedMarkersPerThread = {
[key: ThreadsKey]: MarkerIndex | null;
};
+export type SelectedFunctionsPerThread = {
+ [key: ThreadsKey]: IndexIntoFuncTable | null;
+};
+
/**
* Profile view state
*/
@@ -108,6 +129,7 @@ export type ProfileViewState = {
lastNonShiftClick: LastNonShiftClickInformation | null;
rightClickedTrack: TrackReference | null;
rightClickedCallNode: RightClickedCallNode | null;
+ rightClickedFunction: RightClickedFunction | null;
rightClickedMarker: MarkerReference | null;
hoveredMarker: MarkerReference | null;
mouseTimePosition: Milliseconds | null;
@@ -385,7 +407,25 @@ export type ProfileSpecificUrlState = {
legacyThreadOrder: ThreadIndex[] | null;
legacyHiddenThreads: ThreadIndex[] | null;
selectedMarkers: SelectedMarkersPerThread;
+ selectedFunctions: SelectedFunctionsPerThread;
markerTableSort: SingleColumnSortState[] | null;
+ functionListSort: SingleColumnSortState[] | null;
+ functionListSectionsOpen: FunctionListSectionsOpenState;
+ wingViews: WingViewsState;
+};
+
+export type FunctionListSectionsOpenState = {
+ descendants: boolean;
+ ancestors: boolean;
+ self: boolean;
+};
+
+export type WingViewType = 'flame-graph' | 'call-tree';
+
+export type WingViewsState = {
+ upper: WingViewType;
+ lower: WingViewType;
+ self: WingViewType;
};
export type UrlState = {
diff --git a/src/utils/types.ts b/src/utils/types.ts
index 1d6df05f5e..9b41c5b1d9 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -42,6 +42,7 @@ export function toValidTabSlug(tabSlug: any): TabSlug | null {
const coercedTabSlug = tabSlug as TabSlug;
switch (coercedTabSlug) {
case 'calltree':
+ case 'function-list':
case 'stack-chart':
case 'marker-chart':
case 'network-chart':