Add rounded border to timeline frames chart (#2093)

* Add rounded border to timeline frames chart

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

diff --git a/packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart b/packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart
index c2329e9..9298b11 100644
--- a/packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart
+++ b/packages/devtools_app/lib/src/timeline/flutter_frames_chart.dart
@@ -52,9 +52,6 @@
 
   double horizontalScrollOffset = 0.0;
 
-  double get totalChartWidth =>
-      widget.frames.length * defaultFrameWidthWithPadding;
-
   double get availableChartHeight => defaultChartHeight - defaultSpacing;
 
   double get msPerPx =>
@@ -122,17 +119,18 @@
     return LayoutBuilder(
       builder: (context, constraints) {
         final themeData = Theme.of(context);
-        final chart = ListView.builder(
-          controller: scrollController,
-          scrollDirection: Axis.horizontal,
-          itemCount: widget.frames.length,
-          itemExtent: defaultFrameWidthWithPadding,
-          itemBuilder: (context, index) => _buildFrame(widget.frames[index]),
+        final chart = RoundedOutlinedBorder(
+          child: ListView.builder(
+            controller: scrollController,
+            scrollDirection: Axis.horizontal,
+            itemCount: widget.frames.length,
+            itemExtent: defaultFrameWidthWithPadding,
+            itemBuilder: (context, index) => _buildFrame(widget.frames[index]),
+          ),
         );
         final chartAxisPainter = CustomPaint(
           painter: ChartAxisPainter(
             constraints: constraints,
-            totalWidth: totalChartWidth,
             displayRefreshRate: widget.displayRefreshRate,
             msPerPx: msPerPx,
             themeData: themeData,
@@ -141,7 +139,6 @@
         final fpsLinePainter = CustomPaint(
           painter: FPSLinePainter(
             constraints: constraints,
-            totalWidth: totalChartWidth,
             displayRefreshRate: widget.displayRefreshRate,
             msPerPx: msPerPx,
             themeData: themeData,
@@ -302,7 +299,6 @@
 class ChartAxisPainter extends CustomPainter {
   ChartAxisPainter({
     @required this.constraints,
-    @required this.totalWidth,
     @required this.displayRefreshRate,
     @required this.msPerPx,
     @required this.themeData,
@@ -312,8 +308,6 @@
 
   final BoxConstraints constraints;
 
-  final double totalWidth;
-
   final double displayRefreshRate;
 
   final double msPerPx;
@@ -330,20 +324,6 @@
       constraints.maxHeight,
     );
 
-    // Paint the Y axis.
-    canvas.drawLine(
-      chartArea.topLeft,
-      chartArea.bottomLeft,
-      Paint()..color = chartAccentColor,
-    );
-
-    // Paint the X axis
-    canvas.drawLine(
-      chartArea.bottomLeft,
-      chartArea.bottomRight,
-      Paint()..color = chartAccentColor,
-    );
-
     _paintYAxisLabels(canvas, chartArea);
   }
 
@@ -439,18 +419,15 @@
 class FPSLinePainter extends CustomPainter {
   FPSLinePainter({
     @required this.constraints,
-    @required this.totalWidth,
     @required this.displayRefreshRate,
     @required this.msPerPx,
     @required this.themeData,
   });
 
-  static const fpsTextSpace = 40.0;
+  static const fpsTextSpace = 45.0;
 
   final BoxConstraints constraints;
 
-  final double totalWidth;
-
   final double displayRefreshRate;
 
   final double msPerPx;

packages/devtools_app/test/goldens/timeline_flame_chart_with_selected_frame.png

diff --git a/packages/devtools_app/test/goldens/timeline_flame_chart_with_selected_frame.png b/packages/devtools_app/test/goldens/timeline_flame_chart_with_selected_frame.png
index e5fc3d3..7a1adc3 100644
--- a/packages/devtools_app/test/goldens/timeline_flame_chart_with_selected_frame.png
+++ b/packages/devtools_app/test/goldens/timeline_flame_chart_with_selected_frame.png
Binary files differ