Persist disclosure box state in the URL.

Author: mstange

src/actions/profile-view.ts

@@ -1775,6 +1775,17 @@ export function changeFunctionListSort(sort: SingleColumnSortState[]): Action {
   };
 }
 
+export function changeFunctionListSectionOpen(
+  section: 'descendants' | 'ancestors' | 'self',
+  isOpen: boolean
+): Action {
+  return {
+    type: 'CHANGE_FUNCTION_LIST_SECTION_OPEN',
+    section,
+    isOpen,
+  };
+}
+
 export function changeNetworkSearchString(searchString: string): Action {
   return {
     type: 'CHANGE_NETWORK_SEARCH_STRING',

src/app-logic/url-handling.ts

@@ -42,6 +42,7 @@ import type {
   IndexIntoFrameTable,
   MarkerIndex,
   SelectedMarkersPerThread,
+  FunctionListSectionsOpenState,
 } from 'firefox-profiler/types';
 import {
   decodeUintArrayFromUrlComponent,
@@ -187,6 +188,7 @@ type CallTreeQuery = BaseQuery & {
   hideIdleSamples: null | undefined;
   ctSummary: string;
   functionListSort?: string; // "total-desc~self-asc" — primary first
+  funcListSections?: string; // "descendants,self" — comma-separated open sections
 };
 
 type MarkersQuery = BaseQuery & {
@@ -235,6 +237,7 @@ type Query = BaseQuery & {
 
   // Function list specific
   functionListSort?: string;
+  funcListSections?: string;
 
   // Network specific
   networkSearch?: string;
@@ -394,6 +397,9 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
         query.functionListSort = convertFunctionListSortToString(
           urlState.profileSpecific.functionListSort
         );
+        query.funcListSections = convertFunctionListSectionsOpenToString(
+          urlState.profileSpecific.functionListSectionsOpen
+        );
       }
       break;
     }
@@ -652,6 +658,9 @@ export function stateFromLocation(
       functionListSort: convertFunctionListSortFromString(
         query.functionListSort
       ),
+      functionListSectionsOpen: convertFunctionListSectionsOpenFromString(
+        query.funcListSections
+      ),
     },
   };
 }
@@ -751,6 +760,58 @@ function convertFunctionListSortFromString(
   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;
+}
+
 function convertGlobalTrackOrderFromString(
   rawString: string | null | void
 ): TrackIndex[] {

src/components/calltree/ProfileFunctionListView.tsx

@@ -2,6 +2,9 @@
  * 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 } from './UpperWing';
@@ -10,37 +13,93 @@ import { DisclosureBox } from 'firefox-profiler/components/shared/DisclosureBox'
 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';
 
-export const ProfileFunctionListView = () => (
-  <div
-    className="treeAndSidebarWrapper"
-    id="function-list-tab"
-    role="tabpanel"
-    aria-labelledby="function-list-tab-button"
-  >
-    <StackSettings hideInvertCallstack />
-    <TransformNavigator />
-    <div className="butterflyWrapper">
-      <FunctionList />
-      <ResizableWithSplitter
-        className="butterflyWings"
-        splitterPosition="start"
-        controlledProperty="width"
-        percent={true}
-        initialSize="50%"
+type StateProps = {
+  readonly sectionsOpen: FunctionListSectionsOpenState;
+};
+
+type DispatchProps = {
+  readonly changeFunctionListSectionOpen: typeof changeFunctionListSectionOpen;
+};
+
+type Props = ConnectedProps<{}, StateProps, DispatchProps>;
+
+class ProfileFunctionListViewImpl extends React.PureComponent<Props> {
+  _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 (
+      <div
+        className="treeAndSidebarWrapper"
+        id="function-list-tab"
+        role="tabpanel"
+        aria-labelledby="function-list-tab-button"
       >
-        <DisclosureBox label="Descendants">
-          <UpperWing />
-        </DisclosureBox>
-        <DisclosureBox label="Ancestors" initialOpen={false}>
-          <LowerWing />
-        </DisclosureBox>
-        <DisclosureBox label="Self" initialOpen={false}>
-          <SelfWing />
-        </DisclosureBox>
-      </ResizableWithSplitter>
-    </div>
-  </div>
-);
+        <StackSettings hideInvertCallstack />
+        <TransformNavigator />
+        <div className="butterflyWrapper">
+          <FunctionList />
+          <ResizableWithSplitter
+            className="butterflyWings"
+            splitterPosition="start"
+            controlledProperty="width"
+            percent={true}
+            initialSize="50%"
+          >
+            <DisclosureBox
+              label="Descendants"
+              isOpen={sectionsOpen.descendants}
+              onToggle={this._onDescendantsToggle}
+            >
+              <UpperWing />
+            </DisclosureBox>
+            <DisclosureBox
+              label="Ancestors"
+              isOpen={sectionsOpen.ancestors}
+              onToggle={this._onAncestorsToggle}
+            >
+              <LowerWing />
+            </DisclosureBox>
+            <DisclosureBox
+              label="Self"
+              isOpen={sectionsOpen.self}
+              onToggle={this._onSelfToggle}
+            >
+              <SelfWing />
+            </DisclosureBox>
+          </ResizableWithSplitter>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const ProfileFunctionListView = explicitConnect<
+  {},
+  StateProps,
+  DispatchProps
+>({
+  mapStateToProps: (state) => ({
+    sectionsOpen: getFunctionListSectionsOpen(state),
+  }),
+  mapDispatchToProps: {
+    changeFunctionListSectionOpen,
+  },
+  component: ProfileFunctionListViewImpl,
+});

src/components/shared/DisclosureBox.tsx

@@ -9,6 +9,8 @@ import './DisclosureBox.css';
 type Props = {
   readonly label: string;
   readonly initialOpen?: boolean;
+  readonly isOpen?: boolean;
+  readonly onToggle?: (isOpen: boolean) => void;
   readonly children: React.ReactNode;
 };
 
@@ -22,12 +24,20 @@ export class DisclosureBox extends React.PureComponent<Props, State> {
   };
 
   _onToggle = () => {
+    const { isOpen, onToggle } = this.props;
+    if (isOpen !== undefined) {
+      if (onToggle) {
+        onToggle(!isOpen);
+      }
+      return;
+    }
     this.setState((state) => ({ isOpen: !state.isOpen }));
   };
 
   override render() {
-    const { label, children } = this.props;
-    const { isOpen } = this.state;
+    const { label, children, isOpen: controlledOpen } = this.props;
+    const isOpen =
+      controlledOpen !== undefined ? controlledOpen : this.state.isOpen;
 
     return (
       <div className={`disclosureBox ${isOpen ? 'open' : 'closed'}`}>

src/reducers/url-state.ts

@@ -24,6 +24,7 @@ import type {
   IsOpenPerPanelState,
   TabID,
   SelectedMarkersPerThread,
+  FunctionListSectionsOpenState,
 } from 'firefox-profiler/types';
 
 import type { TabSlug } from '../app-logic/tabs-handling';
@@ -218,6 +219,24 @@ const functionListSort: Reducer<SingleColumnSortState[]> = (
   }
 };
 
+const FUNCTION_LIST_SECTIONS_OPEN_DEFAULT: FunctionListSectionsOpenState = {
+  descendants: true,
+  ancestors: false,
+  self: false,
+};
+
+const functionListSectionsOpen: Reducer<FunctionListSectionsOpenState> = (
+  state = FUNCTION_LIST_SECTIONS_OPEN_DEFAULT,
+  action
+) => {
+  switch (action.type) {
+    case 'CHANGE_FUNCTION_LIST_SECTION_OPEN':
+      return { ...state, [action.section]: action.isOpen };
+    default:
+      return state;
+  }
+};
+
 const networkSearchString: Reducer<string> = (state = '', action) => {
   switch (action.type) {
     case 'CHANGE_NETWORK_SEARCH_STRING':
@@ -807,6 +826,7 @@ const profileSpecific = combineReducers({
   selectedMarkers,
   markerTableSort,
   functionListSort,
+  functionListSectionsOpen,
   // The timeline tracks used to be hidden and sorted by thread indexes, rather than
   // track indexes. The only way to migrate this information to tracks-based data is to
   // first retrieve the profile, so they can't be upgraded by the normal url upgrading

src/selectors/url-state.ts

@@ -32,6 +32,7 @@ import type {
   TabID,
   IndexIntoSourceTable,
   MarkerIndex,
+  FunctionListSectionsOpenState,
 } from 'firefox-profiler/types';
 
 import type { TabSlug } from '../app-logic/tabs-handling';
@@ -122,6 +123,9 @@ export const getMarkerTableSort: Selector<SingleColumnSortState[]> = (state) =>
   getProfileSpecificState(state).markerTableSort;
 export const getFunctionListSort: Selector<SingleColumnSortState[]> = (state) =>
   getProfileSpecificState(state).functionListSort;
+export const getFunctionListSectionsOpen: Selector<
+  FunctionListSectionsOpenState
+> = (state) => getProfileSpecificState(state).functionListSectionsOpen;
 export const getNetworkSearchString: Selector<string> = (state) =>
   getProfileSpecificState(state).networkSearchString;
 export const getSelectedTab: Selector<TabSlug> = (state) =>

src/types/actions.ts

@@ -565,6 +565,11 @@ type UrlStateAction =
       readonly type: 'CHANGE_FUNCTION_LIST_SORT';
       readonly sort: SingleColumnSortState[];
     }
+  | {
+      readonly type: 'CHANGE_FUNCTION_LIST_SECTION_OPEN';
+      readonly section: 'descendants' | 'ancestors' | 'self';
+      readonly isOpen: boolean;
+    }
   | {
       readonly type: 'CHANGE_NETWORK_SEARCH_STRING';
       readonly searchString: string;

src/types/state.ts

@@ -401,6 +401,13 @@ export type ProfileSpecificUrlState = {
   selectedMarkers: SelectedMarkersPerThread;
   markerTableSort: SingleColumnSortState[];
   functionListSort: SingleColumnSortState[];
+  functionListSectionsOpen: FunctionListSectionsOpenState;
+};
+
+export type FunctionListSectionsOpenState = {
+  descendants: boolean;
+  ancestors: boolean;
+  self: boolean;
 };
 
 export type UrlState = {