Add debug disable layer toggles to the Performance page (#3441)

Author: kenzieschmoll

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

@@ -55,6 +55,9 @@ const refreshTimelineEvents = 'refreshTimelineEvents';
 const timelineFlameChartHelp = 'timelineFlameChartHelp';
 const selectFlutterFrame = 'selectFlutterFrame';
 const traceEventProcessingTime = 'traceEventProcessingTime';
+const disableClipLayersOption = 'disableClipLayers';
+const disableOpacityLayersOption = 'disableOpacityLayers';
+const disablePhysicalShapeLayersOption = 'disablePhysicalShapeLayers';
 
 // CPU profiler UX actions:
 const profileGranularityPrefix = 'profileGranularity';

packages/devtools_app/lib/src/common_widgets.dart

@@ -596,7 +596,7 @@ class DevToolsTooltip extends StatelessWidget {
     @required this.child,
     this.waitDuration = tooltipWait,
     this.preferBelow = false,
-    this.padding,
+    this.padding = const EdgeInsets.all(defaultSpacing),
     this.decoration,
     this.textStyle,
   }) : super(key: key);
@@ -1404,12 +1404,20 @@ class NotifierCheckbox extends StatelessWidget {
     Key key,
     @required this.notifier,
     this.onChanged,
+    this.enabled = true,
   }) : super(key: key);
 
+  /// The notifier this [NotifierCheckbox] is responsible for listening to and
+  /// updating.
   final ValueNotifier<bool> notifier;
 
+  /// The callback to be called on change in addition to the notifier changes
+  /// handled by this class.
   final void Function(bool newValue) onChanged;
 
+  /// Whether this checkbox should be enabled for interaction.
+  final bool enabled;
+
   void _updateValue(bool value) {
     if (notifier.value != value) {
       notifier.value = value;
@@ -1426,7 +1434,7 @@ class NotifierCheckbox extends StatelessWidget {
       builder: (context, value, _) {
         return Checkbox(
           value: value,
-          onChanged: _updateValue,
+          onChanged: enabled ? _updateValue : null,
         );
       },
     );
@@ -1441,6 +1449,7 @@ class CheckboxSetting extends StatelessWidget {
     this.description,
     this.tooltip,
     this.onChanged,
+    this.enabled = true,
   }) : super(key: key);
 
   final ValueListenable<bool> notifier;
@@ -1453,6 +1462,9 @@ class CheckboxSetting extends StatelessWidget {
 
   final void Function(bool newValue) onChanged;
 
+  /// Whether this checkbox setting should be enabled for interaction.
+  final bool enabled;
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
@@ -1461,7 +1473,7 @@ class CheckboxSetting extends StatelessWidget {
       overflow: TextOverflow.visible,
       text: TextSpan(
         text: title,
-        style: theme.regularTextStyle,
+        style: enabled ? theme.regularTextStyle : theme.subtleTextStyle,
       ),
     );
 
@@ -1488,6 +1500,7 @@ class CheckboxSetting extends StatelessWidget {
         NotifierCheckbox(
           notifier: notifier,
           onChanged: onChanged,
+          enabled: enabled,
         ),
         Flexible(
           child: textContent,

packages/devtools_app/lib/src/error_badge_manager.dart

@@ -36,8 +36,8 @@ class ErrorBadgeManager extends DisposableController
     // Ensure structured errors are enabled.
     serviceManager.serviceExtensionManager.setServiceExtensionState(
       extensions.structuredErrors.extension,
-      true,
-      true,
+      enabled: true,
+      value: true,
     );
 
     // Log Flutter extension events.

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

@@ -127,8 +127,8 @@ class InspectorController extends DisposableController
         if (_supportsToggleSelectWidgetMode.value) {
           serviceManager.serviceExtensionManager.setServiceExtensionState(
             extensions.enableOnDeviceInspector.extension,
-            true,
-            true,
+            enabled: true,
+            value: true,
           );
         }
       });

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

@@ -313,8 +313,8 @@ class _SecondaryControls extends StatelessWidget {
           profileGranularityFlagNotifier:
               controller.cpuProfilerController.profileGranularityFlagNotifier,
         ),
-        const SizedBox(width: defaultSpacing),
-        if (serviceManager.connectedApp.isFlutterAppNow)
+        const SizedBox(width: denseSpacing),
+        if (serviceManager.connectedApp.isFlutterAppNow) ...[
           ServiceExtensionButtonGroup(
             minScreenWidthForTextBeforeScaling:
                 _secondaryControlsMinIncludeTextWidth,
@@ -326,6 +326,15 @@ class _SecondaryControls extends StatelessWidget {
               //trackRebuildWidgets,
             ],
           ),
+          const SizedBox(width: denseSpacing),
+          IconLabelButton(
+            icon: Icons.build,
+            label: 'More debugging options',
+            tooltip:
+                'Opens a list of options you can use to help debug performance',
+            onPressed: () => _openDebuggingOptionsDialog(context),
+          ),
+        ],
         const SizedBox(width: defaultSpacing),
         ExportButton(
           onPressed: () => _exportPerformanceData(context),
@@ -351,6 +360,13 @@ class _SecondaryControls extends StatelessWidget {
     Notifications.of(context).push(successfulExportMessage(exportedFile));
   }
 
+  void _openDebuggingOptionsDialog(BuildContext context) {
+    showDialog(
+      context: context,
+      builder: (context) => DebuggingOptionsDialog(),
+    );
+  }
+
   void _openSettingsDialog(BuildContext context) {
     showDialog(
       context: context,
@@ -359,6 +375,39 @@ class _SecondaryControls extends StatelessWidget {
   }
 }
 
+class DebuggingOptionsDialog extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return DevToolsDialog(
+      title: dialogTitleText(theme, 'Debugging Options'),
+      includeDivider: false,
+      content: Container(
+        width: defaultDialogWidth,
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'When toggling on/off a rendering layer, you will need '
+              'to reproduce activity in your app to see the effects of the '
+              'debugging option.',
+              style: theme.subtleTextStyle,
+            ),
+            const SizedBox(height: defaultSpacing),
+            ServiceExtensionCheckbox(service: disableClipLayers),
+            ServiceExtensionCheckbox(service: disableOpacityLayers),
+            ServiceExtensionCheckbox(service: disablePhysicalShapeLayers),
+          ],
+        ),
+      ),
+      actions: [
+        DialogCloseButton(),
+      ],
+    );
+  }
+}
+
 class PerformanceSettingsDialog extends StatelessWidget {
   const PerformanceSettingsDialog(this.controller);