Implement new selection UI for Timeline page

packages/devtools_app/lib/src/charts/flame_chart.dart

@@ -769,7 +769,6 @@ class FlameChartNode<T> {
         onSelected = ((_) {}),
         selectable = false;
 
-  static const _selectedNodeColor = lightSelection;
   static const _selectedTextColor = Colors.black;
   // We would like this value to be smaller, but zoom performance does not allow
   // for that. We should decrease this value if we can improve flame chart zoom
@@ -840,7 +839,7 @@ class FlameChartNode<T> {
   }
 
   Color _backgroundColor(bool selected) {
-    if (selected) return _selectedNodeColor;
+    if (selected) return timelineSelectionColor;
     return backgroundColor;
   }
 
@@ -965,3 +964,31 @@ class _ScrollingFlameChartRowExtentDelegate extends ExtentDelegate {
     return index;
   }
 }
+
+abstract class FlameChartPainter extends CustomPainter {
+  FlameChartPainter({
+    @required this.zoom,
+    @required this.constraints,
+    @required this.verticalScrollOffset,
+    @required this.horizontalScrollOffset,
+    @required this.chartStartInset,
+  }) : visible = Rect.fromLTWH(
+          horizontalScrollOffset,
+          verticalScrollOffset,
+          constraints.maxWidth,
+          constraints.maxHeight,
+        );
+
+  final double zoom;
+
+  final BoxConstraints constraints;
+
+  final double verticalScrollOffset;
+
+  final double horizontalScrollOffset;
+
+  final double chartStartInset;
+
+  /// The absolute coordinates of the flame chart's visible section.
+  final Rect visible;
+}

packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart

@@ -213,6 +213,11 @@ class FlutterFramesChartItem extends StatelessWidget {
 
   static const defaultFrameWidth = 32.0;
 
+  static const selectedIndicatorHeight = 8.0;
+
+  static const selectedFrameIndicatorKey =
+      Key('flutter frames chart - selected frame indicator');
+
   final TimelineFrame frame;
 
   final bool selected;
@@ -243,32 +248,42 @@ class FlutterFramesChartItem extends StatelessWidget {
           (frame.rasterDurationMs / msPerPx).clamp(0.0, availableChartHeight),
       color: janky ? rasterJankColor : mainRasterColor,
     );
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: densePadding),
-      color: selected ? selectedFrameBackgroundColor : null,
-      child: Column(
-        children: [
-          // Dummy child so that the InkWell does not take up the entire column.
-          const Expanded(child: SizedBox()),
-          InkWell(
-            // TODO(kenz): make tooltip to persist if the frame is selected.
-            // TODO(kenz): change color on hover.
-            onTap: onSelected,
-            child: Tooltip(
-              message: _tooltipText(frame),
-              padding: const EdgeInsets.all(denseSpacing),
-              preferBelow: false,
-              child: Row(
-                crossAxisAlignment: CrossAxisAlignment.end,
-                children: [
-                  ui,
-                  raster,
-                ],
+    return Stack(
+      children: [
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: densePadding),
+          color: selected ? selectedFrameBackgroundColor : null,
+          child: Column(
+            children: [
+              // Dummy child so that the InkWell does not take up the entire column.
+              const Expanded(child: SizedBox()),
+              InkWell(
+                // TODO(kenz): make tooltip to persist if the frame is selected.
+                // TODO(kenz): change color on hover.
+                onTap: onSelected,
+                child: Tooltip(
+                  message: _tooltipText(frame),
+                  padding: const EdgeInsets.all(denseSpacing),
+                  preferBelow: false,
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.end,
+                    children: [
+                      ui,
+                      raster,
+                    ],
+                  ),
+                ),
               ),
-            ),
+            ],
           ),
-        ],
-      ),
+        ),
+        if (selected)
+          Container(
+            key: selectedFrameIndicatorKey,
+            color: timelineSelectionColor,
+            height: selectedIndicatorHeight,
+          ),
+      ],
     );
   }