Change withSize to accept PropsWithoutSize as its type parameter

src/components/network-chart/index.js

@@ -43,7 +43,8 @@ import './index.css';
 
 const ROW_HEIGHT = 16;
 
-// The SizeProps are injected by the WithSize higher order component.
+type OwnProps = {||};
+
 type DispatchProps = {|
   +changeSelectedNetworkMarker: typeof changeSelectedNetworkMarker,
   +changeRightClickedMarker: typeof changeRightClickedMarker,
@@ -62,9 +63,10 @@ type StateProps = {|
   +scrollToSelectionGeneration: number,
 |};
 
-type OwnProps = {| ...SizeProps |};
-
-type Props = ConnectedProps<OwnProps, StateProps, DispatchProps>;
+type Props = {|
+  ...SizeProps,
+  ...ConnectedProps<OwnProps, StateProps, DispatchProps>,
+|};
 
 class NetworkChartImpl extends React.PureComponent<Props> {
   _virtualListRef = React.createRef<VirtualList<MarkerIndex>>();
@@ -368,33 +370,33 @@ class NetworkChartImpl extends React.PureComponent<Props> {
  * Wrap the component in the WithSize higher order component, as well as the redux
  * connected component.
  */
-const ConnectedComponent = explicitConnect<OwnProps, StateProps, DispatchProps>(
-  {
-    mapStateToProps: (state) => ({
-      markerIndexes:
-        selectedThreadSelectors.getSearchFilteredNetworkMarkerIndexes(state),
-      scrollToSelectionGeneration: getScrollToSelectionGeneration(state),
-      getMarker: selectedThreadSelectors.getMarkerGetter(state),
-      selectedNetworkMarkerIndex:
-        selectedThreadSelectors.getSelectedNetworkMarkerIndex(state),
-      rightClickedMarkerIndex:
-        selectedThreadSelectors.getRightClickedMarkerIndex(state),
-      hoveredMarkerIndexFromState:
-        selectedThreadSelectors.getHoveredMarkerIndex(state),
-      timeRange: getPreviewSelectionRange(state),
-      disableOverscan: getPreviewSelection(state).isModifying,
-      threadsKey: getSelectedThreadsKey(state),
-    }),
-    mapDispatchToProps: {
-      changeSelectedNetworkMarker,
-      changeRightClickedMarker,
-      changeHoveredMarker,
-    },
-    component: NetworkChartImpl,
-  }
-);
-
-export const NetworkChart = withSize<OwnProps>(ConnectedComponent);
+export const NetworkChart = explicitConnect<
+  OwnProps,
+  StateProps,
+  DispatchProps,
+>({
+  mapStateToProps: (state) => ({
+    markerIndexes:
+      selectedThreadSelectors.getSearchFilteredNetworkMarkerIndexes(state),
+    scrollToSelectionGeneration: getScrollToSelectionGeneration(state),
+    getMarker: selectedThreadSelectors.getMarkerGetter(state),
+    selectedNetworkMarkerIndex:
+      selectedThreadSelectors.getSelectedNetworkMarkerIndex(state),
+    rightClickedMarkerIndex:
+      selectedThreadSelectors.getRightClickedMarkerIndex(state),
+    hoveredMarkerIndexFromState:
+      selectedThreadSelectors.getHoveredMarkerIndex(state),
+    timeRange: getPreviewSelectionRange(state),
+    disableOverscan: getPreviewSelection(state).isModifying,
+    threadsKey: getSelectedThreadsKey(state),
+  }),
+  mapDispatchToProps: {
+    changeSelectedNetworkMarker,
+    changeRightClickedMarker,
+    changeHoveredMarker,
+  },
+  component: withSize(NetworkChartImpl),
+});
 
 /**
  * Our definition of markers does not currently have the ability to refine

src/components/shared/WithSize.js

@@ -15,6 +15,8 @@ type State = {|
 
 export type SizeProps = $ReadOnly<State>;
 
+export type PropsWithSize<Props> = {| ...Props, ...SizeProps |};
+
 /**
  * Wraps a React component and makes 'width' and 'height' available in the
  * wrapped component's props. These props start out at zero and are updated to
@@ -24,26 +26,14 @@ export type SizeProps = $ReadOnly<State>;
  *
  * Note that the props are *not* updated if the size of the element changes
  * for reasons other than a window resize.
- *
- * Usage: withSize must be used with explicit type arguments.
- *
- * Correct: withSize<Props>(ComponentClass)
- * Incorrect: withSize(ComponentClass)
  */
-export function withSize<
-  // The SizeProps act as a bounds on the generic props. This ensures that the props
-  // that passed in take into account they are being given the width and height.
-  Props: $ReadOnly<{ ...SizeProps }>,
->(Wrapped: React.ComponentType<Props>): React.ComponentType<
-  // The component that is returned does not accept width and height parameters, as
-  // they are injected by this higher order component.
-  $ReadOnly<$Diff<Props, SizeProps>>,
-> {
-  // An existential type in a generic is a bit tricky to remove. Perhaps this can
-  // use a hook instead.
-  // See: https://github.com/firefox-devtools/profiler/issues/3062
-  // eslint-disable-next-line flowtype/no-existential-type
-  return class WithSizeWrapper extends React.PureComponent<*, State> {
+export function withSize<Props>(
+  Wrapped: React.ComponentType<PropsWithSize<Props>>
+): React.ComponentType<Props> {
+  return class WithSizeWrapper<Props> extends React.PureComponent<
+    Props,
+    State,
+  > {
     state = { width: 0, height: 0 };
     _container: HTMLElement | null = null;
 

src/components/shared/thread/ActivityGraph.js

@@ -199,4 +199,6 @@ class ThreadActivityGraphImpl extends React.PureComponent<Props, State> {
   }
 }
 
-export const ThreadActivityGraph = withSize<Props>(ThreadActivityGraphImpl);
+export const ThreadActivityGraph = withSize<$Diff<Props, SizeProps>>(
+  ThreadActivityGraphImpl
+);

src/components/shared/thread/SampleGraph.js

@@ -393,4 +393,6 @@ export class ThreadSampleGraphImpl extends PureComponent<Props, State> {
   }
 }
 
-export const ThreadSampleGraph = withSize<Props>(ThreadSampleGraphImpl);
+export const ThreadSampleGraph = withSize<$Diff<Props, SizeProps>>(
+  ThreadSampleGraphImpl
+);

src/components/timeline/EmptyThreadIndicator.js

@@ -143,4 +143,6 @@ export function getIndicatorPositions(props: Props): {|
   return { startup, shutdown, emptyBufferStart };
 }
 
-export const EmptyThreadIndicator = withSize<Props>(EmptyThreadIndicatorImpl);
+export const EmptyThreadIndicator = withSize<$Diff<Props, SizeProps>>(
+  EmptyThreadIndicatorImpl
+);

src/components/timeline/FullTimeline.js

@@ -222,5 +222,5 @@ export const FullTimeline = explicitConnect<
     changeGlobalTrackOrder,
     changeRightClickedTrack,
   },
-  component: withSize<Props>(FullTimelineImpl),
+  component: withSize(FullTimelineImpl),
 });

src/components/timeline/Markers.js

@@ -219,7 +219,7 @@ class TimelineMarkersCanvas extends React.PureComponent<CanvasProps> {
         this._requestedAnimationFrame = false;
         const c = this._canvas.current;
         if (c) {
-          timeCode('TimelineMarkersImplementation render', () => {
+          timeCode('TimelineMarkers render', () => {
             this.drawCanvas(c);
           });
         }
@@ -316,7 +316,7 @@ type State = {
   mouseY: CssPixels,
 };
 
-class TimelineMarkersImplementation extends React.PureComponent<Props, State> {
+class TimelineMarkers extends React.PureComponent<Props, State> {
   state = {
     hoveredMarkerIndex: null,
     mouseDownMarker: null,
@@ -505,12 +505,6 @@ class TimelineMarkersImplementation extends React.PureComponent<Props, State> {
   }
 }
 
-/**
- * Combine the base implementation of the TimelineMarkers with the
- * WithSize component.
- */
-export const TimelineMarkers = withSize<Props>(TimelineMarkersImplementation);
-
 /**
  * Memoize the isSelected result of the markers since this is user multiple times.
  */
@@ -543,7 +537,7 @@ export const TimelineMarkersJank = explicitConnect<
     };
   },
   mapDispatchToProps: { changeRightClickedMarker },
-  component: TimelineMarkers,
+  component: withSize(TimelineMarkers),
 });
 
 /**
@@ -572,7 +566,7 @@ export const TimelineMarkersOverview = explicitConnect<
     };
   },
   mapDispatchToProps: { changeRightClickedMarker },
-  component: TimelineMarkers,
+  component: withSize(TimelineMarkers),
 });
 
 /**
@@ -598,7 +592,7 @@ export const TimelineMarkersFileIo = explicitConnect<
     };
   },
   mapDispatchToProps: { changeRightClickedMarker },
-  component: TimelineMarkers,
+  component: withSize(TimelineMarkers),
 });
 
 /**
@@ -625,7 +619,7 @@ export const TimelineMarkersMemory = explicitConnect<
     };
   },
   mapDispatchToProps: { changeRightClickedMarker },
-  component: TimelineMarkers,
+  component: withSize(TimelineMarkers),
 });
 
 /**
@@ -652,5 +646,5 @@ export const TimelineMarkersIPC = explicitConnect<
     };
   },
   mapDispatchToProps: { changeRightClickedMarker },
-  component: TimelineMarkers,
+  component: withSize(TimelineMarkers),
 });

src/components/timeline/TrackBandwidthGraph.js

@@ -711,5 +711,5 @@ export const TrackBandwidthGraph = explicitConnect<
       previewSelection: getPreviewSelection(state),
     };
   },
-  component: withSize<Props>(TrackBandwidthGraphImpl),
+  component: withSize(TrackBandwidthGraphImpl),
 });

src/components/timeline/TrackCustomMarkerGraph.js

@@ -631,5 +631,5 @@ export const TrackCustomMarkerGraph = explicitConnect<
       getMarker: selectors.getMarkerGetter(state),
     };
   },
-  component: withSize<Props>(TrackCustomMarkerGraphImpl),
+  component: withSize(TrackCustomMarkerGraphImpl),
 });

src/components/timeline/TrackEventDelayGraph.js

@@ -380,5 +380,5 @@ export const TrackEventDelayGraph = explicitConnect<
       eventDelays: selectors.getProcessedEventDelays(state),
     };
   },
-  component: withSize<Props>(TrackEventDelayGraphImpl),
+  component: withSize(TrackEventDelayGraphImpl),
 });

src/components/timeline/TrackMemoryGraph.js

@@ -550,5 +550,5 @@ export const TrackMemoryGraph = explicitConnect<
       unfilteredSamplesRange: selectors.unfilteredSamplesRange(state),
     };
   },
-  component: withSize<Props>(TrackMemoryGraphImpl),
+  component: withSize(TrackMemoryGraphImpl),
 });

src/components/timeline/TrackNetwork.js

@@ -445,5 +445,5 @@ export const TrackNetwork = explicitConnect<
     changeSelectedNetworkMarker,
     changeHoveredMarker,
   },
-  component: withSize<Props>(Network),
+  component: withSize(Network),
 });

src/components/timeline/TrackPowerGraph.js

@@ -575,5 +575,5 @@ export const TrackPowerGraph = explicitConnect<
       unfilteredSamplesRange: selectors.unfilteredSamplesRange(state),
     };
   },
-  component: withSize<Props>(TrackPowerGraphImpl),
+  component: withSize(TrackPowerGraphImpl),
 });

src/components/timeline/TrackProcessCPUGraph.js

@@ -478,5 +478,5 @@ export const TrackProcessCPUGraph = explicitConnect<
       unfilteredSamplesRange: selectors.unfilteredSamplesRange(state),
     };
   },
-  component: withSize<Props>(TrackProcessCPUGraphImpl),
+  component: withSize(TrackProcessCPUGraphImpl),
 });

src/components/timeline/TrackScreenshots.js

@@ -211,7 +211,7 @@ export const TimelineTrackScreenshots = explicitConnect<
   mapDispatchToProps: {
     updatePreviewSelection,
   },
-  component: withSize<Props>(Screenshots),
+  component: withSize(Screenshots),
 });
 
 type HoverPreviewProps = {|

src/components/timeline/TrackThread.js

@@ -384,5 +384,5 @@ export const TimelineTrackThread = explicitConnect<
     selectSelfCallNode,
     reportTrackThreadHeight,
   },
-  component: withSize<Props>(TimelineTrackThreadImpl),
+  component: withSize(TimelineTrackThreadImpl),
 });

src/components/timeline/TrackVisualProgressGraph.js

@@ -348,5 +348,5 @@ export const TrackVisualProgressGraph = explicitConnect<
       interval: getProfileInterval(state),
     };
   },
-  component: withSize<Props>(TrackVisualProgressGraphImpl),
+  component: withSize(TrackVisualProgressGraphImpl),
 });

src/test/types/with-size.js

@@ -48,7 +48,8 @@ const example2 = (
   />
 );
 
-const ExampleComponentWithSize = withSize<Props>(ExampleComponent);
+const ExampleComponentWithSize =
+  withSize<$Diff<Props, SizeProps>>(ExampleComponent);
 
 // This it the correct use
 const exampleWithSize1 = <ExampleComponentWithSize ownPropA="a" ownPropB="b" />;
@@ -79,5 +80,9 @@ class NoSizing extends React.PureComponent<NoSizingProps> {
   }
 }
 
-// $FlowExpectError - The component does not have sizing props.
-const exampleNoSizing = withSize<Props>(NoSizing);
+// This test no longer works.
+// Not sure why Flow accepts NoSizing as a React.ComponentType<PropsWithSize<Props>>
+// TypeScript catches this particular error, so this test will be re-enabled once
+// we migrate.
+// /*$*/FlowExpectError - The component does not have sizing props.
+const exampleNoSizing = withSize(NoSizing);