Change implementation of withChartViewport (#5542)

This simplifies the types a bit, making it easier to port to TypeScript.

I've split it into two commits so that the indentation change doesn't
distract from the code changes.

The only real change here is the splitting of the inner component into a
`ChartViewportFunctionComponent` and a `ChartViewportImpl<ChartProps>`
component. The only purpose of the function component is to take the
wrapped component `chart` from the closure scope and put it into a prop
of the Impl component.

Author: mstange

src/components/flame-graph/Canvas.js

@@ -5,11 +5,7 @@
 // @flow
 import * as React from 'react';
 import memoize from 'memoize-immutable';
-import {
-  withChartViewport,
-  type WithChartViewport,
-  type Viewport,
-} from '../shared/chart/Viewport';
+import { withChartViewport, type Viewport } from '../shared/chart/Viewport';
 import { ChartCanvas } from '../shared/chart/Canvas';
 import { FastFillStyle } from '../../utils';
 import TextMeasurement from '../../utils/text-measurement';
@@ -525,7 +521,5 @@ class FlameGraphCanvasImpl extends React.PureComponent<Props> {
   }
 }
 
-export const FlameGraphCanvas = (withChartViewport: WithChartViewport<
-  OwnProps,
-  Props,
->)(FlameGraphCanvasImpl);
+export const FlameGraphCanvas =
+  withChartViewport<OwnProps>(FlameGraphCanvasImpl);

src/components/js-tracer/Canvas.js

@@ -12,7 +12,6 @@ import {
 } from 'firefox-profiler/app-logic/constants';
 import {
   withChartViewport,
-  type WithChartViewport,
   type Viewport,
 } from 'firefox-profiler/components/shared/chart/Viewport';
 import { ChartCanvas } from 'firefox-profiler/components/shared/chart/Canvas';
@@ -657,7 +656,4 @@ class JsTracerCanvasImpl extends React.PureComponent<Props, State> {
   }
 }
 
-export const JsTracerCanvas = (withChartViewport: WithChartViewport<
-  OwnProps,
-  Props,
->)(JsTracerCanvasImpl);
+export const JsTracerCanvas = withChartViewport<OwnProps>(JsTracerCanvasImpl);

src/components/marker-chart/Canvas.js

@@ -7,7 +7,6 @@ import { GREY_20, GREY_30, BLUE_60, BLUE_80 } from 'photon-colors';
 import * as React from 'react';
 import {
   withChartViewport,
-  type WithChartViewport,
   type Viewport,
 } from 'firefox-profiler/components/shared/chart/Viewport';
 import { ChartCanvas } from 'firefox-profiler/components/shared/chart/Canvas';
@@ -826,7 +825,6 @@ class MarkerChartCanvasImpl extends React.PureComponent<Props> {
   }
 }
 
-export const MarkerChartCanvas = (withChartViewport: WithChartViewport<
-  OwnProps,
-  Props,
->)(MarkerChartCanvasImpl);
+export const MarkerChartCanvas = withChartViewport<OwnProps>(
+  MarkerChartCanvasImpl
+);