[Optimize flamechart][4/4] Split FlamechartView into row views

Allow the view system to render only affected flamechart rows. This
greatly improves flamechart hover performance, which has a high impact
on our app's performance as the flamechart is the slowest view to
render.

Also adds a new `ColorView` view that fills the flamechart area with a
solid background color to fix these issues:

1. Black empty areas appearing below flamecharts without much stack
   depth
2. Lines appearing between flamechart rows. My hypothesis is that these
   are appearing due to subpixel rendering, even though the flamechart
   rows' `visibleArea`s are all integers.

Related to #50.

* `yarn flow`: no errors in changed code
* `yarn lint`
* `yarn start`: 60 FPS hovers on our Facebook.com profile
* `yarn test`

src/CanvasPage.js

@@ -140,14 +140,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       surfaceRef.current,
       {origin: zeroPoint, size: {width, height}},
       data.flamechart,
-      data,
+      data.duration,
     );
     flamechartViewRef.current = flamechartView;
     const flamechartVScrollWrapper = new VerticalScrollView(
       surfaceRef.current,
       {origin: zeroPoint, size: {width, height}},
       flamechartView,
-      flamechartView.intrinsicSize.height,
     );
 
     const stackedZoomables = new StaticLayoutView(
@@ -166,7 +165,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       surfaceRef.current,
       {origin: zeroPoint, size: {width, height}},
       stackedZoomables,
-      flamechartView.intrinsicSize.width,
+      reactEventsView.intrinsicSize.width,
     );
 
     rootViewRef.current = new StaticLayoutView(
@@ -250,7 +249,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
 
     const {current: flamechartView} = flamechartViewRef;
     if (flamechartView) {
-      flamechartView.onHover = flamechartStackFrame => {
+      flamechartView.setOnHover(flamechartStackFrame => {
         if (
           !hoveredEvent ||
           hoveredEvent.flamechartStackFrame !== flamechartStackFrame
@@ -262,7 +261,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
             data,
           });
         }
-      };
+      });
     }
   }, [
     reactEventsViewRef,
@@ -287,7 +286,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
 
     const {current: flamechartView} = flamechartViewRef;
     if (flamechartView) {
-      flamechartView.setHoveredFlamechartNode(
+      flamechartView.setHoveredFlamechartStackFrame(
         hoveredEvent ? hoveredEvent.flamechartStackFrame : null,
       );
     }