Bubble and reset (#2751)

* Added update bubble at end of an updated timestamp display. * Fixed reset event to display a unique symbol. * Fixed light mode monitor track/reset color.
flutter · Feb 28, 2021 · d2c1d6b · d2c1d6b
1 parent aa47b83
commit d2c1d6b
Show file tree

Hide file tree

Showing 17 changed files with 222 additions and 26 deletions.
diff --git a/packages/devtools_app/lib/src/charts/chart.dart b/packages/devtools_app/lib/src/charts/chart.dart
@@ -603,26 +603,31 @@ class ChartPainter extends CustomPainter {
     bool aggregateEvents,
     Path symbolPathToDraw,
   ) {
-    PaintingStyle style;
+    PaintingStyle firstStyle;
+    PaintingStyle secondStyle;
     switch (characteristics.symbol) {
       case ChartSymbol.disc:
       case ChartSymbol.filledSquare:
       case ChartSymbol.filledTriangle:
       case ChartSymbol.filledTriangleDown:
-        style = PaintingStyle.fill;
+        firstStyle = PaintingStyle.fill;
         break;
       case ChartSymbol.ring:
       case ChartSymbol.square:
       case ChartSymbol.triangle:
       case ChartSymbol.triangleDown:
-        style = PaintingStyle.stroke;
+        firstStyle = PaintingStyle.stroke;
+        break;
+      case ChartSymbol.concentric:
+        firstStyle = PaintingStyle.stroke;
+        secondStyle = PaintingStyle.fill;
         break;
       case ChartSymbol.dashedLine:
         break;
     }
 
-    final paint = Paint()
-      ..style = style
+    final paintFirst = Paint()
+      ..style = firstStyle
       ..strokeWidth = characteristics.strokeWidth
       ..color = aggregateEvents
           ? characteristics.colorAggregate
@@ -640,7 +645,25 @@ class ChartPainter extends CustomPainter {
         break;
       case ChartSymbol.disc:
       case ChartSymbol.ring:
-        canvas.drawCircle(Offset(x, y), characteristics.diameter, paint);
+        canvas.drawCircle(Offset(x, y), characteristics.diameter, paintFirst);
+        break;
+      case ChartSymbol.concentric:
+        // Outer ring.
+        canvas.drawCircle(Offset(x, y), characteristics.diameter, paintFirst);
+
+        // Inner disc.
+        final paintSecond = Paint()
+          ..style = secondStyle
+          ..strokeWidth = 0
+          // TODO(terry): Aggregate for concentric maybe needed someday.
+          ..color = aggregateEvents
+              ? characteristics.colorAggregate
+              : characteristics.concentricCenterColor;
+        canvas.drawCircle(
+          Offset(x, y),
+          characteristics.concentricCenterDiameter,
+          paintSecond,
+        ); // Circle
         break;
       case ChartSymbol.filledSquare:
       case ChartSymbol.filledTriangle:
@@ -655,7 +678,7 @@ class ChartPainter extends CustomPainter {
             y - characteristics.height / 2,
           ),
         );
-        canvas.drawPath(path, paint);
+        canvas.drawPath(path, paintFirst);
         break;
       default:
         final message = 'Unknown symbol ${characteristics.symbol}';

diff --git a/packages/devtools_app/lib/src/charts/chart_trace.dart b/packages/devtools_app/lib/src/charts/chart_trace.dart
@@ -30,6 +30,22 @@ class PaintCharacteristics {
     this.symbol = ChartSymbol.ring,
     this.strokeWidth = 1,
     this.diameter = 1,
+    this.concentricCenterColor = Colors.black,
+    this.concentricCenterDiameter = 1,
+    this.width = 1,
+    this.height = 1,
+    this.fixedMinY,
+    this.fixedMaxY,
+  });
+
+  PaintCharacteristics.concentric({
+    @required this.color,
+    this.colorAggregate,
+    this.symbol = ChartSymbol.concentric,
+    this.strokeWidth = 1,
+    this.diameter = 1,
+    this.concentricCenterColor = Colors.black,
+    this.concentricCenterDiameter = 1,
     this.width = 1,
     this.height = 1,
     this.fixedMinY,
@@ -47,6 +63,12 @@ class PaintCharacteristics {
   /// Primary color.
   Color color;
 
+  /// Center circle color.
+  Color concentricCenterColor;
+
+  /// Center circle size.
+  double concentricCenterDiameter;
+
   /// Color to use if count > 1.
   ///
   /// See [DataAggregate.count].
@@ -254,6 +276,7 @@ enum ChartType {
 enum ChartSymbol {
   ring, // Lined circle
   disc, // Filled circle
+  concentric, // outer ring and inner disc
   square, // Lined square
   filledSquare, // Filled square
   triangle, // Lined triangle

diff --git a/packages/devtools_app/lib/src/memory/memory_controller.dart b/packages/devtools_app/lib/src/memory/memory_controller.dart
@@ -889,6 +889,10 @@ class MemoryController extends DisposableController
 
   DateTime monitorTimestamp;
 
+  ValueListenable<DateTime> get lastMonitorTimestampNotifier => lastMonitorTimestamp;
+
+  final lastMonitorTimestamp = ValueNotifier<DateTime>(null);
+
   /// Used for Allocations table search auto-complete.
 
   /// This finds and selects an exact match in the tree.

diff --git a/packages/devtools_app/lib/src/memory/memory_events_pane.dart b/packages/devtools_app/lib/src/memory/memory_events_pane.dart
@@ -174,8 +174,6 @@ class MemoryEventsPaneState extends State<MemoryEventsPane>
 
     // Line chart fixed Y range.
     _chartController.setFixedYRange(visibleVmEvent, extensionEvent);
-
-    setupTraces();
   }
 
   @override
@@ -184,11 +182,12 @@ class MemoryEventsPaneState extends State<MemoryEventsPane>
 
     _memoryController = Provider.of<MemoryController>(context);
 
-    colorScheme = Theme.of(context).colorScheme;
+    final themeData = Theme.of(context);
+    colorScheme = themeData.colorScheme;
 
     cancel();
 
-    setupTraces();
+    setupTraces(isDarkMode: themeData.isDarkTheme);
     _chartController.setupData();
 
     // Monitor heap samples.
@@ -218,7 +217,7 @@ class MemoryEventsPaneState extends State<MemoryEventsPane>
     return const SizedBox(width: denseSpacing);
   }
 
-  void setupTraces() {
+  void setupTraces({bool isDarkMode = true}) {
     if (_chartController.traces.isNotEmpty) {
       assert(_chartController.traces.length == TraceName.values.length);
 
@@ -317,11 +316,14 @@ class MemoryEventsPaneState extends State<MemoryEventsPane>
     assert(_chartController.trace(manualGCIndex).name ==
         TraceName.values[manualGCIndex].toString());
 
+    final mainMonitorColor =
+        isDarkMode ? Colors.yellowAccent : Colors.yellowAccent.shade400;
+
     // Monitor
     final monitorIndex = _chartController.createTrace(
       trace.ChartType.symbol,
       trace.PaintCharacteristics(
-        color: Colors.yellowAccent,
+        color: mainMonitorColor,
         strokeWidth: 3,
         diameter: 6,
         fixedMinY: visibleVmEvent,
@@ -335,12 +337,14 @@ class MemoryEventsPaneState extends State<MemoryEventsPane>
 
     final monitorResetIndex = _chartController.createTrace(
       trace.ChartType.symbol,
-      trace.PaintCharacteristics(
-        color: Colors.yellowAccent,
-        strokeWidth: 3,
+      trace.PaintCharacteristics.concentric(
+        color: Colors.grey[600],
+        strokeWidth: 4,
         diameter: 6,
         fixedMinY: visibleVmEvent,
         fixedMaxY: extensionEvent,
+        concentricCenterColor: mainMonitorColor,
+        concentricCenterDiameter: 4,
       ),
       name: TraceName.monitorReset.toString(),
     );