Remove panelLayoutGeneration.

We originally introduced this to resolve #1205 and #736, but these
days it's not needed anymore because we have ResizeObservers in the
relevant places.

Author: mstange

src/actions/app.ts

@@ -109,10 +109,6 @@ export function changeSidebarOpenState(tab: TabSlug, isOpen: boolean): Action {
   return { type: 'CHANGE_SIDEBAR_OPEN_STATE', tab, isOpen };
 }
 
-export function invalidatePanelLayout(): Action {
-  return { type: 'INCREMENT_PANEL_LAYOUT_GENERATION' as const };
-}
-
 /**
  * The viewport component provides a hint to use shift to zoom scroll. The first
  * time a user does this, the hint goes away.

src/components/app/DetailsContainer.tsx

@@ -7,7 +7,6 @@ import SplitterLayout from 'react-splitter-layout';
 import { Details } from './Details';
 import { selectSidebar } from 'firefox-profiler/components/sidebar';
 
-import { invalidatePanelLayout } from 'firefox-profiler/actions/app';
 import { getSelectedTab } from 'firefox-profiler/selectors/url-state';
 import { getIsSidebarOpen } from 'firefox-profiler/selectors/app';
 import explicitConnect from 'firefox-profiler/utils/connect';
@@ -22,39 +21,28 @@ type StateProps = {
   readonly isSidebarOpen: boolean;
 };
 
-type DispatchProps = {
-  readonly invalidatePanelLayout: typeof invalidatePanelLayout;
-};
-
-type Props = ConnectedProps<{}, StateProps, DispatchProps>;
+type Props = ConnectedProps<{}, StateProps, {}>;
 
-function DetailsContainerImpl({
-  selectedTab,
-  isSidebarOpen,
-  invalidatePanelLayout,
-}: Props) {
+function DetailsContainerImpl({ selectedTab, isSidebarOpen }: Props) {
   const Sidebar = selectSidebar(selectedTab);
 
   return (
     <SplitterLayout
       customClassName="DetailsContainer"
       percentage
       secondaryInitialSize={20}
-      onDragEnd={invalidatePanelLayout}
     >
       <Details />
       {Sidebar && isSidebarOpen ? <Sidebar /> : null}
     </SplitterLayout>
   );
 }
 
-export const DetailsContainer = explicitConnect<{}, StateProps, DispatchProps>({
+export const DetailsContainer = explicitConnect<{}, StateProps, {}>({
   mapStateToProps: (state) => ({
     selectedTab: getSelectedTab(state),
     isSidebarOpen: getIsSidebarOpen(state),
   }),
-  mapDispatchToProps: {
-    invalidatePanelLayout,
-  },
+  mapDispatchToProps: {},
   component: DetailsContainerImpl,
 });

src/components/app/ProfileViewer.tsx

@@ -21,7 +21,6 @@ import { returnToZipFileList } from 'firefox-profiler/actions/zipped-profiles';
 import { Timeline } from 'firefox-profiler/components/timeline';
 import { getHasZipFile } from 'firefox-profiler/selectors/zipped-profiles';
 import SplitterLayout from 'react-splitter-layout';
-import { invalidatePanelLayout } from 'firefox-profiler/actions/app';
 import { getTimelineHeight } from 'firefox-profiler/selectors/app';
 import { getIsBottomBoxOpen } from 'firefox-profiler/selectors/url-state';
 import {
@@ -54,7 +53,6 @@ type StateProps = {
 
 type DispatchProps = {
   readonly returnToZipFileList: typeof returnToZipFileList;
-  readonly invalidatePanelLayout: typeof invalidatePanelLayout;
 };
 
 type Props = ConnectedProps<{}, StateProps, DispatchProps>;
@@ -64,7 +62,6 @@ class ProfileViewerImpl extends PureComponent<Props> {
     const {
       hasZipFile,
       returnToZipFileList,
-      invalidatePanelLayout,
       timelineHeight,
       isUploading,
       uploadProgress,
@@ -136,7 +133,6 @@ class ProfileViewerImpl extends PureComponent<Props> {
             primaryIndex={1}
             // The Timeline is secondary.
             secondaryInitialSize={270}
-            onDragEnd={invalidatePanelLayout}
           >
             <Timeline />
             <SplitterLayout
@@ -146,7 +142,6 @@ class ProfileViewerImpl extends PureComponent<Props> {
               primaryIndex={0}
               // The BottomBox is secondary.
               secondaryInitialSize={40}
-              onDragEnd={invalidatePanelLayout}
             >
               <DetailsContainer />
               {isBottomBoxOpen ? <BottomBox /> : null}
@@ -178,7 +173,6 @@ export const ProfileViewer = explicitConnect<{}, StateProps, DispatchProps>({
   }),
   mapDispatchToProps: {
     returnToZipFileList,
-    invalidatePanelLayout,
   },
   component: ProfileViewerImpl,
 });

src/components/shared/chart/Viewport.tsx

@@ -6,10 +6,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import explicitConnect from 'firefox-profiler/utils/connect';
 import { getResizeObserverWrapper } from 'firefox-profiler/utils/resize-observer-wrapper';
-import {
-  getHasZoomedViaMousewheel,
-  getPanelLayoutGeneration,
-} from 'firefox-profiler/selectors/app';
+import { getHasZoomedViaMousewheel } from 'firefox-profiler/selectors/app';
 import { setHasZoomedViaMousewheel } from 'firefox-profiler/actions/app';
 import { updatePreviewSelection } from 'firefox-profiler/actions/profile-view';
 
@@ -132,7 +129,6 @@ export type Viewport = {
 };
 
 type ChartViewportImplStateProps = {
-  readonly panelLayoutGeneration: number;
   readonly hasZoomedViaMousewheel?: boolean;
 };
 
@@ -316,10 +312,6 @@ class ChartViewportImpl<OwnProps> extends React.PureComponent<
       this.setState({
         horizontalViewport,
       });
-    } else if (
-      this.props.panelLayoutGeneration !== newProps.panelLayoutGeneration
-    ) {
-      this._setSizeNextFrame();
     }
   }
 
@@ -871,7 +863,6 @@ export function withChartViewport<ChartProps>(
     ChartViewportImplDispatchProps
   >({
     mapStateToProps: (state) => ({
-      panelLayoutGeneration: getPanelLayoutGeneration(state),
       hasZoomedViaMousewheel: getHasZoomedViaMousewheel(state),
     }),
     mapDispatchToProps: { setHasZoomedViaMousewheel, updatePreviewSelection },

src/components/timeline/FullTimeline.tsx

@@ -21,7 +21,6 @@ import {
   getGlobalTrackReferences,
   getTrackCount,
   getGlobalTrackOrder,
-  getPanelLayoutGeneration,
 } from 'firefox-profiler/selectors';
 import { TimelineTrackContextMenu } from './TrackContextMenu';
 
@@ -57,7 +56,6 @@ type StateProps = {
   readonly globalTracks: GlobalTrack[];
   readonly globalTrackOrder: TrackIndex[];
   readonly globalTrackReferences: GlobalTrackReference[];
-  readonly panelLayoutGeneration: number;
   readonly zeroAt: Milliseconds;
   readonly profileTimelineUnit: TimelineUnit;
   readonly trackCount: TrackCount;
@@ -145,7 +143,6 @@ class FullTimelineImpl extends React.PureComponent<Props, State> {
       profileTimelineUnit,
       width,
       globalTrackReferences,
-      panelLayoutGeneration,
       trackCount,
       changeRightClickedTrack,
       innerElementRef,
@@ -173,7 +170,6 @@ class FullTimelineImpl extends React.PureComponent<Props, State> {
           </div>
           <OverflowEdgeIndicator
             className="tracksContainer timelineOverflowEdgeIndicator"
-            panelLayoutGeneration={panelLayoutGeneration}
             initialSelected={this.state.initialSelected}
           >
             <Reorderable
@@ -214,7 +210,6 @@ export const FullTimeline = explicitConnect<
     committedRange: getCommittedRange(state),
     zeroAt: getZeroAt(state),
     profileTimelineUnit: getProfileTimelineUnit(state),
-    panelLayoutGeneration: getPanelLayoutGeneration(state),
     trackCount: getTrackCount(state),
   }),
   mapDispatchToProps: {

src/components/timeline/OverflowEdgeIndicator.tsx

@@ -11,7 +11,6 @@ import './OverflowEdgeIndicator.css';
 type Props = {
   className: string;
   children: React.ReactNode;
-  panelLayoutGeneration: number;
   initialSelected: InitialSelectedTrackReference | null;
   forceLayoutGeneration?: number;
 };

src/reducers/app.ts

@@ -110,47 +110,6 @@ const isSidebarOpenPerPanel: Reducer<IsOpenPerPanelState> = (
   }
 };
 
-/**
- * The panels that make up the timeline, details view, and sidebar can all change
- * their sizes depending on the state that is fed to them. In order to control
- * the invalidations of this sizing information, provide a "generation" value that
- * increases monotonically for any change that potentially changes the sizing of
- * any of the panels. This provides a mechanism for subscribing components to
- * deterministically update their sizing correctly.
- */
-const panelLayoutGeneration: Reducer<number> = (state = 0, action) => {
-  switch (action.type) {
-    case 'INCREMENT_PANEL_LAYOUT_GENERATION':
-    // Sidebar: (fallthrough)
-    case 'CHANGE_SIDEBAR_OPEN_STATE':
-    // Timeline: (fallthrough)
-    case 'HIDE_GLOBAL_TRACK':
-    case 'SHOW_ALL_TRACKS':
-    case 'SHOW_PROVIDED_TRACKS':
-    case 'HIDE_PROVIDED_TRACKS':
-    case 'SHOW_GLOBAL_TRACK':
-    case 'SHOW_GLOBAL_TRACK_INCLUDING_LOCAL_TRACKS':
-    case 'ISOLATE_PROCESS':
-    case 'ISOLATE_PROCESS_MAIN_THREAD':
-    case 'HIDE_LOCAL_TRACK':
-    case 'SHOW_LOCAL_TRACK':
-    case 'ISOLATE_LOCAL_TRACK':
-    case 'TOGGLE_RESOURCES_PANEL':
-    case 'ENABLE_EXPERIMENTAL_CPU_GRAPHS':
-    case 'ENABLE_EXPERIMENTAL_PROCESS_CPU_TRACKS':
-    case 'CHANGE_TAB_FILTER':
-    // Committed range changes: (fallthrough)
-    case 'COMMIT_RANGE':
-    case 'POP_COMMITTED_RANGES':
-    // Bottom box: (fallthrough)
-    case 'UPDATE_BOTTOM_BOX':
-    case 'CLOSE_BOTTOM_BOX_FOR_TAB':
-      return state + 1;
-    default:
-      return state;
-  }
-};
-
 /**
  * Clicking on tracks can switch between different tabs. This piece of state holds
  * on to the last relevant thread-based tab that was viewed. This makes the UX nicer
@@ -365,7 +324,6 @@ const appStateReducer: Reducer<AppState> = combineReducers({
   urlSetupPhase,
   hasZoomedViaMousewheel,
   isSidebarOpenPerPanel,
-  panelLayoutGeneration,
   lastVisibleThreadTabSlug,
   trackThreadHeights,
   isNewlyPublished,

src/selectors/app.tsx

@@ -55,8 +55,6 @@ export const getHasZoomedViaMousewheel: Selector<boolean> = (state) => {
 };
 export const getIsSidebarOpen: Selector<boolean> = (state) =>
   getApp(state).isSidebarOpenPerPanel[getSelectedTab(state)];
-export const getPanelLayoutGeneration: Selector<number> = (state) =>
-  getApp(state).panelLayoutGeneration;
 export const getLastVisibleThreadTabSlug: Selector<TabSlug> = (state) =>
   getApp(state).lastVisibleThreadTabSlug;
 export const getTrackThreadHeights: Selector<{

src/test/components/Viewport.test.tsx

@@ -17,8 +17,6 @@ import {
   getPreviewSelection,
 } from '../../selectors/profile';
 
-import { changeSidebarOpenState } from '../../actions/app';
-
 import explicitConnect from '../../utils/connect';
 import { ensureExists } from '../../utils/types';
 
@@ -27,6 +25,7 @@ import {
   autoMockElementSize,
   setMockedElementSize,
 } from '../fixtures/mocks/element-size';
+import { triggerResizeObservers } from '../fixtures/mocks/resize-observer';
 import { mockRaf } from '../fixtures/mocks/request-animation-frame';
 import { storeWithProfile } from '../fixtures/stores';
 import { getProfileFromTextSamples } from '../fixtures/profiles/processed-profile';
@@ -589,8 +588,8 @@ describe('Viewport', function () {
     });
   });
 
-  it('reacts to changes to the panel layout generation', function () {
-    const { dispatch, getChartViewport, flushRafCalls } = setup();
+  it('reacts to container size changes', function () {
+    const { getChartViewport } = setup();
 
     expect(getChartViewport()).toMatchObject({
       containerWidth: BOUNDING_BOX_WIDTH,
@@ -606,10 +605,7 @@ describe('Viewport', function () {
       ...INITIAL_ELEMENT_SIZE,
       width: BOUNDING_BOX_WIDTH - boundingWidthDiff,
     });
-    act(() => {
-      dispatch(changeSidebarOpenState('calltree', true));
-    });
-    flushRafCalls();
+    triggerResizeObservers();
 
     expect(getChartViewport()).toMatchObject({
       containerWidth: BOUNDING_BOX_WIDTH - boundingWidthDiff,

src/test/store/app.test.ts

@@ -1,13 +1,11 @@
 /* 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 { storeWithSimpleProfile, storeWithProfile } from '../fixtures/stores';
+import { storeWithSimpleProfile } from '../fixtures/stores';
 import * as UrlStateSelectors from '../../selectors/url-state';
 import * as AppSelectors from '../../selectors/app';
 import createStore from '../../app-logic/create-store';
 import { withAnalyticsMock } from '../fixtures/mocks/analytics';
-import { isolateProcess } from '../../actions/profile-view';
-import { getProfileWithNiceTracks } from '../fixtures/profiles/tracks';
 
 import * as AppActions from '../../actions/app';
 
@@ -148,31 +146,4 @@ describe('app actions', function () {
       expect(UrlStateSelectors.getSelectedTab(getState())).toEqual('calltree');
     });
   });
-
-  describe('panelLayoutGeneration', function () {
-    it('can be manually updated using an action', function () {
-      const { dispatch, getState } = storeWithSimpleProfile();
-      expect(AppSelectors.getPanelLayoutGeneration(getState())).toBe(0);
-      dispatch(AppActions.invalidatePanelLayout());
-      expect(AppSelectors.getPanelLayoutGeneration(getState())).toBe(1);
-      dispatch(AppActions.invalidatePanelLayout());
-      expect(AppSelectors.getPanelLayoutGeneration(getState())).toBe(2);
-    });
-
-    it('will be updated when working with the sidebar', function () {
-      const { dispatch, getState } = storeWithSimpleProfile();
-      expect(AppSelectors.getPanelLayoutGeneration(getState())).toBe(0);
-      dispatch(AppActions.changeSidebarOpenState('flame-graph', false));
-      expect(AppSelectors.getPanelLayoutGeneration(getState())).toBe(1);
-    });
-
-    it('will be updated when working with the timeline', function () {
-      const { dispatch, getState } = storeWithProfile(
-        getProfileWithNiceTracks()
-      );
-      expect(AppSelectors.getPanelLayoutGeneration(getState())).toBe(0);
-      dispatch(isolateProcess(0));
-      expect(AppSelectors.getPanelLayoutGeneration(getState())).toBe(1);
-    });
-  });
 });