From 0e633b5be3ba69e0a7d871f6ce43237bd2805645 Mon Sep 17 00:00:00 2001 From: Elliott Brooks <21270878+elliette@users.noreply.github.com> Date: Wed, 2 Oct 2024 17:55:37 -0700 Subject: [PATCH] Make collapsible buttons in inspector controls responsive to screen size (#8396) --- .../inspector_shared/inspector_controls.dart | 22 +++++++++++++----- .../service/service_extension_widgets.dart | 10 +++++++- .../lib/src/service/service_extensions.dart | 15 ++++++++++++ .../lib/src/shared/common_widgets.dart | 23 ++++++++++++------- 4 files changed, 55 insertions(+), 15 deletions(-) diff --git a/packages/devtools_app/lib/src/screens/inspector_shared/inspector_controls.dart b/packages/devtools_app/lib/src/screens/inspector_shared/inspector_controls.dart index 143d8a4a031..9f622287442 100644 --- a/packages/devtools_app/lib/src/screens/inspector_shared/inspector_controls.dart +++ b/packages/devtools_app/lib/src/screens/inspector_shared/inspector_controls.dart @@ -15,7 +15,6 @@ 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 { @@ -23,12 +22,14 @@ class InspectorControls extends StatelessWidget { 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, ); }, ); diff --git a/packages/devtools_app/lib/src/service/service_extension_widgets.dart b/packages/devtools_app/lib/src/service/service_extension_widgets.dart index 90e1bfe9b22..3394f16909b 100644 --- a/packages/devtools_app/lib/src/service/service_extension_widgets.dart +++ b/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 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, ), ), diff --git a/packages/devtools_app/lib/src/service/service_extensions.dart b/packages/devtools_app/lib/src/service/service_extensions.dart index 5205eb09391..4a32575a3d6 100644 --- a/packages/devtools_app/lib/src/service/service_extensions.dart +++ b/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 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 extends extensions String? gaDocsItem, String? iconAsset, IconData? iconData, + String? shortTitle, }) { return ToggleableServiceExtensionDescription._( extension: extension.extension, @@ -85,6 +89,7 @@ class ToggleableServiceExtensionDescription extends extensions gaDocsItem: gaDocsItem, iconAsset: iconAsset, iconData: iconData, + shortTitle: shortTitle, ); } @@ -118,6 +123,9 @@ class ToggleableServiceExtensionDescription extends extensions @override final String? gaDocsItem; + @override + final String? shortTitle; + @override String get gaItemTooltipLink => '${gaItem}TooltipLink'; } @@ -139,6 +147,7 @@ class ServiceExtensionDescription extends extensions.ServiceExtension 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 extends extensions.ServiceExtension String? gaDocsItem, String? iconAsset, IconData? iconData, + String? shortTitle, List? displayValues, }) { return ServiceExtensionDescription._( @@ -171,6 +181,7 @@ class ServiceExtensionDescription extends extensions.ServiceExtension gaDocsItem: gaDocsItem, iconAsset: iconAsset, iconData: iconData, + shortTitle: shortTitle, displayValues: displayValues, ); } @@ -205,6 +216,9 @@ class ServiceExtensionDescription extends extensions.ServiceExtension @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, diff --git a/packages/devtools_app/lib/src/shared/common_widgets.dart b/packages/devtools_app/lib/src/shared/common_widgets.dart index a0c39ddaa9d..b1035212e4d 100644 --- a/packages/devtools_app/lib/src/shared/common_widgets.dart +++ b/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 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,