Add Track Paints and Track Layouts toggles to the performance page.

packages/devtools_app/lib/src/analytics/constants.dart

@@ -44,7 +44,6 @@ const String paintBaseline = 'paintBaseline';
 const String slowAnimation = 'slowAnimation';
 const String repaintRainbow = 'repaintRainbow';
 const String debugBanner = 'debugBanner';
-const String trackRebuilds = 'trackRebuilds';
 const String togglePlatform = 'togglePlatform';
 const String selectWidgetMode = 'selectWidgetMode';
 const String enableOnDeviceInspector = 'enableOnDeviceInspector';
@@ -55,6 +54,9 @@ const refreshTimelineEvents = 'refreshTimelineEvents';
 const timelineFlameChartHelp = 'timelineFlameChartHelp';
 const selectFlutterFrame = 'selectFlutterFrame';
 const traceEventProcessingTime = 'traceEventProcessingTime';
+const String trackRebuilds = 'trackRebuilds';
+const String trackPaints = 'trackPaints';
+const String trackLayouts = 'trackLayouts';
 const disableClipLayersOption = 'disableClipLayers';
 const disableOpacityLayersOption = 'disableOpacityLayers';
 const disablePhysicalShapeLayersOption = 'disablePhysicalShapeLayers';

packages/devtools_app/lib/src/common_widgets.dart

@@ -77,6 +77,24 @@ TextStyle primaryColorLight(TextStyle style, BuildContext context) {
   );
 }
 
+class OutlinedIconButton extends IconLabelButton {
+  const OutlinedIconButton({
+    @required IconData icon,
+    @required VoidCallback onPressed,
+    String tooltip,
+  }) : super(
+          icon: icon,
+          label: '',
+          tooltip: tooltip,
+          onPressed: onPressed,
+          // TODO(jacobr): consider a more conservative min-width. To minimize the
+          // impact on the existing UI and deal with the fact that some of the
+          // existing label names are fairly verbose, we set a width that will
+          // never be hit.
+          minScreenWidthForTextBeforeScaling: 20000,
+        );
+}
+
 /// A button with an icon and a label.
 ///
 /// * `onPressed`: The callback to be called upon pressing the button.
@@ -122,7 +140,7 @@ class IconLabelButton extends StatelessWidget {
       label: label,
       iconData: icon,
       imageIcon: imageIcon,
-      unscaleIncludeTextWidth: minScreenWidthForTextBeforeScaling,
+      minScreenWidthForTextBeforeScaling: minScreenWidthForTextBeforeScaling,
       color: color,
     );
     if (elevatedButton) {
@@ -275,21 +293,15 @@ class StopRecordingButton extends IconLabelButton {
         );
 }
 
-class SettingsOutlinedButton extends IconLabelButton {
+class SettingsOutlinedButton extends OutlinedIconButton {
   const SettingsOutlinedButton({
     @required VoidCallback onPressed,
     @required String label,
     String tooltip,
   }) : super(
           onPressed: onPressed,
           icon: Icons.settings,
-          label: label,
           tooltip: tooltip,
-          // TODO(jacobr): consider a more conservative min-width. To minimize the
-          // impact on the existing UI and deal with the fact that some of the
-          // existing label names are fairly verbose, we set a width that will
-          // never be hit.
-          minScreenWidthForTextBeforeScaling: 20000,
         );
 }
 
@@ -735,36 +747,37 @@ BorderSide defaultBorderSide(ThemeData theme) {
   return BorderSide(color: theme.focusColor);
 }
 
-/// Toggle button for use as a child of a [ToggleButtons] widget.
-class ToggleButton extends StatelessWidget {
-  const ToggleButton({
-    @required this.icon,
-    @required this.text,
-    @required this.enabledTooltip,
-    @required this.disabledTooltip,
-    @required this.minScreenWidthForTextBeforeScaling,
-    @required this.selected,
-  });
+class DevToolsToggleButtonGroup extends StatelessWidget {
+  const DevToolsToggleButtonGroup({
+    Key key,
+    @required this.children,
+    @required this.selectedStates,
+    @required this.onPressed,
+  }) : super(key: key);
 
-  final IconData icon;
-  final String text;
-  final String enabledTooltip;
-  final String disabledTooltip;
-  final double minScreenWidthForTextBeforeScaling;
-  final bool selected;
+  final List<Widget> children;
+
+  final List<bool> selectedStates;
+
+  final void Function(int) onPressed;
 
   @override
   Widget build(BuildContext context) {
-    return DevToolsTooltip(
-      tooltip: selected ? enabledTooltip : disabledTooltip,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: defaultSpacing),
-        child: MaterialIconLabel(
-          label: text,
-          iconData: icon,
-          unscaleIncludeTextWidth: minScreenWidthForTextBeforeScaling,
-        ),
+    final theme = Theme.of(context);
+    return ToggleButtons(
+      borderRadius:
+          const BorderRadius.all(Radius.circular(defaultBorderRadius)),
+      color: theme.colorScheme.toggleButtonsTitle,
+      selectedColor: theme.colorScheme.toggleButtonsTitleSelected,
+      fillColor: theme.colorScheme.toggleButtonsFillSelected,
+      textStyle: theme.textTheme.bodyText1,
+      constraints: BoxConstraints(
+        minWidth: defaultButtonHeight,
+        minHeight: defaultButtonHeight,
       ),
+      children: children,
+      isSelected: selectedStates,
+      onPressed: onPressed,
     );
   }
 }
@@ -1507,7 +1520,7 @@ class CheckboxSetting extends StatelessWidget {
         ),
       ],
     );
-    if (tooltip != null) {
+    if (tooltip != null && tooltip.isNotEmpty) {
       return DevToolsTooltip(
         tooltip: tooltip,
         child: content,

packages/devtools_app/lib/src/debugger/controls.dart

@@ -238,7 +238,7 @@ class DebuggerButton extends StatelessWidget {
         child: MaterialIconLabel(
           label: title,
           iconData: icon,
-          unscaleIncludeTextWidth: mediumDeviceWidth,
+          minScreenWidthForTextBeforeScaling: mediumDeviceWidth,
         ),
       ),
     );

packages/devtools_app/lib/src/inspector/inspector_screen.dart

@@ -163,7 +163,7 @@ class InspectorScreenBodyState extends State<InspectorScreenBody>
               onPressed: _refreshInspector,
               icon: Icons.refresh,
               label: 'Refresh Tree',
-              color: Theme.of(context).colorScheme.serviceExtensionButtonsTitle,
+              color: Theme.of(context).colorScheme.toggleButtonsTitle,
               minScreenWidthForTextBeforeScaling:
                   unscaledIncludeRefreshTreeWidth,
             ),

packages/devtools_app/lib/src/performance/performance_controller.dart

@@ -322,6 +322,9 @@ class PerformanceController extends DisposableController
       return;
     }
 
+    data.selectedFrame = frame;
+    _selectedFrameNotifier.value = frame;
+
     if (!offlineController.offlineMode.value) {
       final bool frameBeforeFirstWellFormedFrame =
           firstWellFormedFrameMicros != null &&
@@ -352,9 +355,6 @@ class PerformanceController extends DisposableController
       if (_currentFrameBeingSelected != frame) return;
     }
 
-    data.selectedFrame = frame;
-    _selectedFrameNotifier.value = frame;
-
     // We do not need to pull the CPU profile because we will pull the profile
     // for the entire frame. The order of selecting the timeline event and
     // pulling the CPU profile for the frame (directly below) matters here.