Make collapsible buttons in inspector controls responsive to screen s…

…ize (#8396)

packages/devtools_app/lib/src/screens/inspector_shared/inspector_controls.dart

@@ -15,20 +15,21 @@ import '../../shared/feature_flags.dart';
 import '../../shared/globals.dart';
 import '../inspector_shared/inspector_settings_dialog.dart';
 import '../inspector_v2/inspector_controller.dart' as v2;
-import 'inspector_screen.dart';
 
 /// Control buttons for the inspector panel.
 class InspectorControls extends StatelessWidget {
   const InspectorControls({super.key, this.controller});
 
   final v2.InspectorController? controller;
 
-  static const serviceExtensionButtonsIncludeTextWidth = 1200.0;
+  static const minScreenWidthForTextBeforeTruncating = 800.0;
+  static const minScreenWidthForTextBeforeScaling = 550.0;
 
   @override
   Widget build(BuildContext context) {
     final activeButtonColor =
         Theme.of(context).colorScheme.activeToggleButtonColor;
+    final isInspectorV2 = controller != null && FeatureFlags.inspectorV2;
     return Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
@@ -47,11 +48,13 @@ class InspectorControls extends StatelessWidget {
                     : extensions.toggleOnDeviceWidgetInspector,
               ],
               minScreenWidthForTextBeforeScaling:
-                  InspectorScreen.minScreenWidthForTextBeforeScaling,
+                  minScreenWidthForTextBeforeScaling,
+              minScreenWidthForTextBeforeTruncating:
+                  isInspectorV2 ? minScreenWidthForTextBeforeTruncating : null,
             );
           },
         ),
-        if (controller != null) ...[
+        if (isInspectorV2) ...[
           const SizedBox(width: defaultSpacing),
           ShowImplementationWidgetsButton(controller: controller!),
         ],
@@ -69,6 +72,8 @@ class InspectorControls extends StatelessWidget {
             gaItem: gac.inspectorV2Enabled,
             activeColor: activeButtonColor,
             inactiveColor: Colors.transparent,
+            minScreenWidthForTextBeforeScaling:
+                minScreenWidthForTextBeforeScaling,
           ),
         ],
         const SizedBox(width: defaultSpacing),
@@ -140,11 +145,16 @@ class ShowImplementationWidgetsButton extends StatelessWidget {
           isSelected: !isHidden,
           message:
               'Show widgets created by the Flutter framework or other packages.',
-          label: 'Show Implementation Widgets',
+          label: isScreenWiderThan(
+            context,
+            InspectorControls.minScreenWidthForTextBeforeTruncating,
+          )
+              ? 'Show Implementation Widgets'
+              : 'Show',
           onPressed: controller.toggleImplementationWidgetsVisibility,
           icon: Icons.code,
           minScreenWidthForTextBeforeScaling:
-              InspectorScreen.minScreenWidthForTextBeforeScaling,
+              InspectorControls.minScreenWidthForTextBeforeScaling,
         );
       },
     );

packages/devtools_app/lib/src/service/service_extension_widgets.dart

@@ -48,11 +48,13 @@ class ServiceExtensionButtonGroup extends StatefulWidget {
   const ServiceExtensionButtonGroup({
     super.key,
     this.minScreenWidthForTextBeforeScaling,
+    this.minScreenWidthForTextBeforeTruncating,
     required this.extensions,
     this.fillColor,
   });
 
   final double? minScreenWidthForTextBeforeScaling;
+  final double? minScreenWidthForTextBeforeTruncating;
   final List<ToggleableServiceExtensionDescription> extensions;
   final Color? fillColor;
 
@@ -139,6 +141,8 @@ class _ServiceExtensionButtonGroupState
               extensionState: extensionState,
               minScreenWidthForTextBeforeScaling:
                   widget.minScreenWidthForTextBeforeScaling,
+              minScreenWidthForTextBeforeTruncating:
+                  widget.minScreenWidthForTextBeforeTruncating,
             ),
         ],
       ),
@@ -181,11 +185,13 @@ class ServiceExtensionButton extends StatelessWidget {
     super.key,
     required this.extensionState,
     required this.minScreenWidthForTextBeforeScaling,
+    required this.minScreenWidthForTextBeforeTruncating,
   });
 
   final ExtensionState extensionState;
 
   final double? minScreenWidthForTextBeforeScaling;
+  final double? minScreenWidthForTextBeforeTruncating;
 
   @override
   Widget build(BuildContext context) {
@@ -203,7 +209,9 @@ class ServiceExtensionButton extends StatelessWidget {
         ),
         child: ImageIconLabel(
           ServiceExtensionIcon(extensionState: extensionState),
-          description.title,
+          isScreenWiderThan(context, minScreenWidthForTextBeforeTruncating)
+              ? description.title
+              : description.shortTitle ?? description.title,
           unscaledMinIncludeTextWidth: minScreenWidthForTextBeforeScaling,
         ),
       ),

packages/devtools_app/lib/src/service/service_extensions.dart

@@ -31,6 +31,8 @@ abstract class ServiceExtensionInterface {
   String? get gaDocsItem;
 
   String get gaItemTooltipLink;
+
+  String? get shortTitle;
 }
 
 /// A subclass of [extensions.ToggleableServiceExtension] that includes metadata
@@ -53,6 +55,7 @@ class ToggleableServiceExtensionDescription<T extends Object> extends extensions
     this.gaDocsItem,
     this.iconAsset,
     this.iconData,
+    this.shortTitle,
   })  : displayValues =
             [enabledValue, disabledValue].map((v) => v.toString()).toList(),
         assert((iconAsset == null) != (iconData == null)),
@@ -69,6 +72,7 @@ class ToggleableServiceExtensionDescription<T extends Object> extends extensions
     String? gaDocsItem,
     String? iconAsset,
     IconData? iconData,
+    String? shortTitle,
   }) {
     return ToggleableServiceExtensionDescription._(
       extension: extension.extension,
@@ -85,6 +89,7 @@ class ToggleableServiceExtensionDescription<T extends Object> extends extensions
       gaDocsItem: gaDocsItem,
       iconAsset: iconAsset,
       iconData: iconData,
+      shortTitle: shortTitle,
     );
   }
 
@@ -118,6 +123,9 @@ class ToggleableServiceExtensionDescription<T extends Object> extends extensions
   @override
   final String? gaDocsItem;
 
+  @override
+  final String? shortTitle;
+
   @override
   String get gaItemTooltipLink => '${gaItem}TooltipLink';
 }
@@ -139,6 +147,7 @@ class ServiceExtensionDescription<T> extends extensions.ServiceExtension<T>
     required this.tooltip,
     this.description,
     this.documentationUrl,
+    this.shortTitle,
     this.gaDocsItem,
   })  : displayValues =
             displayValues ?? values.map((v) => v.toString()).toList(),
@@ -156,6 +165,7 @@ class ServiceExtensionDescription<T> extends extensions.ServiceExtension<T>
     String? gaDocsItem,
     String? iconAsset,
     IconData? iconData,
+    String? shortTitle,
     List<String>? displayValues,
   }) {
     return ServiceExtensionDescription._(
@@ -171,6 +181,7 @@ class ServiceExtensionDescription<T> extends extensions.ServiceExtension<T>
       gaDocsItem: gaDocsItem,
       iconAsset: iconAsset,
       iconData: iconData,
+      shortTitle: shortTitle,
       displayValues: displayValues,
     );
   }
@@ -205,6 +216,9 @@ class ServiceExtensionDescription<T> extends extensions.ServiceExtension<T>
   @override
   final String? gaDocsItem;
 
+  @override
+  final String? shortTitle;
+
   @override
   String get gaItemTooltipLink => '${gaItem}TooltipLink';
 }
@@ -426,6 +440,7 @@ final toggleOnDeviceWidgetInspector =
   // versions of package:flutter it makes sense to describe this extension as
   // toggling widget select mode as it is the only way to toggle that mode.
   title: 'Select Widget Mode',
+  shortTitle: 'Select',
   iconAsset: 'icons/widget-select-white.png',
   gaScreenName: gac.inspector,
   gaItem: gac.showOnDeviceInspector,

packages/devtools_app/lib/src/shared/common_widgets.dart

@@ -1716,6 +1716,7 @@ class SwitchSetting extends StatelessWidget {
     this.gaItem,
     this.activeColor,
     this.inactiveColor,
+    this.minScreenWidthForTextBeforeScaling,
   });
 
   final ValueNotifier<bool> notifier;
@@ -1734,6 +1735,8 @@ class SwitchSetting extends StatelessWidget {
 
   final Color? inactiveColor;
 
+  final double? minScreenWidthForTextBeforeScaling;
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
@@ -1742,16 +1745,20 @@ class SwitchSetting extends StatelessWidget {
       child: Row(
         mainAxisSize: MainAxisSize.min,
         children: [
-          Flexible(
-            child: RichText(
-              overflow: TextOverflow.visible,
-              maxLines: 3,
-              text: TextSpan(
-                text: title,
-                style: theme.regularTextStyle,
+          if (isScreenWiderThan(
+            context,
+            minScreenWidthForTextBeforeScaling,
+          ))
+            Flexible(
+              child: RichText(
+                overflow: TextOverflow.visible,
+                maxLines: 3,
+                text: TextSpan(
+                  text: title,
+                  style: theme.regularTextStyle,
+                ),
               ),
             ),
-          ),
           NotifierSwitch(
             padding: const EdgeInsets.only(left: borderPadding),
             activeColor: activeColor,