[Property Editor] Densify Property Editor inputs (#8803)
diff --git a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_inputs.dart b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_inputs.dart index f83b3bd..0a6fa25 100644 --- a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_inputs.dart +++ b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_inputs.dart
@@ -100,7 +100,7 @@ final theme = Theme.of(context); return DropdownButtonFormField( value: property.valueDisplay, - decoration: decoration(property, theme: theme), + decoration: decoration(property, theme: theme, padding: denseSpacing), isExpanded: true, items: property.propertyOptions.map((option) { @@ -133,6 +133,8 @@ class _TextInputState extends State<_TextInput> { String currentValue = ''; + double paddingDiffComparedToDropdown = 1.0; + @override Widget build(BuildContext context) { final theme = Theme.of(context); @@ -142,7 +144,14 @@ autovalidateMode: AutovalidateMode.onUserInteraction, validator: widget.property.inputValidator, inputFormatters: [FilteringTextInputFormatter.singleLineFormatter], - decoration: widget.decoration(widget.property, theme: theme), + decoration: widget.decoration( + widget.property, + theme: theme, + // Note: The text input has an extra pixel compared to the dropdown + // input. Therefore, to have their sizes match, subtract a half pixel + // from the padding. + padding: defaultSpacing - (paddingDiffComparedToDropdown / 2), + ), style: theme.fixedFontStyle, onChanged: (newValue) { setState(() { @@ -179,15 +188,17 @@ return; } - final value = property.convertFromString(valueAsString) as T?; + final value = property.convertFromInputString(valueAsString) as T?; await controller.editArgument(name: argName, value: value); } InputDecoration decoration( EditableProperty property, { required ThemeData theme, + required double padding, }) { return InputDecoration( + contentPadding: EdgeInsets.all(padding), helperText: property.isRequired ? '*required' : '', errorText: property.errorText, isDense: true,
diff --git a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_types.dart b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_types.dart index 96f73c5..200926c 100644 --- a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_types.dart +++ b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_types.dart
@@ -11,7 +11,7 @@ EditableString(super.argument); @override - String? convertFromString(String? valueAsString) => valueAsString; + String? convertFromInputString(String? valueAsString) => valueAsString; @override String get dartType => 'String'; @@ -26,7 +26,7 @@ EditableBool(super.argument); @override - Object? convertFromString(String? valueAsString) => + Object? convertFromInputString(String? valueAsString) => valueAsString == 'true' || valueAsString == 'false' ? valueAsString == 'true' : valueAsString; // The boolean value might be an expression. @@ -41,7 +41,7 @@ EditableDouble(super.argument); @override - double? convertFromString(String? valueAsString) => + double? convertFromInputString(String? valueAsString) => toNumber(valueAsString) as double?; } @@ -49,7 +49,7 @@ EditableInt(super.argument); @override - int? convertFromString(String? valueAsString) => + int? convertFromInputString(String? valueAsString) => toNumber(valueAsString) as int?; } @@ -57,14 +57,33 @@ EditableEnum(super.argument); @override - String? convertFromString(String? valueAsString) => valueAsString; + String? convertFromInputString(String? valueAsString) => + valueAsString == null ? null : _enumLonghand(valueAsString); @override String get dartType => options?.first.split('.').first ?? type; @override + String get valueDisplay => _enumShorthand(displayValue ?? value.toString()); + + @override Set<String> get propertyOptions { - return {...(options ?? []), valueDisplay, if (isNullable) 'null'}; + final shorthandOptions = (options ?? <String>[]).map(_enumShorthand); + return {...shorthandOptions, valueDisplay, if (isNullable) 'null'}; + } + + String _enumShorthand(String fullEnumValue) { + if (fullEnumValue.startsWith(dartType)) { + return fullEnumValue.split(dartType).last; + } + return fullEnumValue; + } + + String _enumLonghand(String enumShorthandValue) { + if (enumShorthandValue.startsWith('.')) { + return '$dartType$enumShorthandValue'; + } + return enumShorthandValue; } } @@ -101,7 +120,7 @@ } @mustBeOverridden - Object? convertFromString(String? _) { + Object? convertFromInputString(String? _) { throw UnimplementedError(); } }
diff --git a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_view.dart b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_view.dart index 8aa9b5c..f342e1b 100644 --- a/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_view.dart +++ b/packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_view.dart
@@ -50,7 +50,7 @@ final PropertyEditorController controller; - static const itemPadding = densePadding; + static const itemPadding = borderPadding; @override Widget build(BuildContext context) { @@ -118,36 +118,46 @@ final EditableProperty property; + static const _widthForFullLabels = 60; + @override Widget build(BuildContext context) { final colorScheme = Theme.of(context).colorScheme; final isSet = property.hasArgument; final isDefault = property.isDefault; - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (isSet) - Padding( - padding: const EdgeInsets.all(_PropertiesList.itemPadding), - child: RoundedLabel( - labelText: 'set', - backgroundColor: colorScheme.primary, - textColor: colorScheme.onPrimary, - tooltipText: 'Property argument is set.', - ), - ), - if (isDefault) - const Padding( - padding: EdgeInsets.all(_PropertiesList.itemPadding), - child: RoundedLabel( - labelText: 'default', - tooltipText: 'Property argument matches the default value.', - ), - ), - ], + return LayoutBuilder( + builder: (context, constraints) { + final width = constraints.maxWidth; + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (isSet) + Padding( + padding: const EdgeInsets.all(_PropertiesList.itemPadding), + child: RoundedLabel( + labelText: _maybeTruncateLabel('set', width: width), + backgroundColor: colorScheme.primary, + textColor: colorScheme.onPrimary, + tooltipText: 'Property argument is set.', + ), + ), + if (isDefault) + Padding( + padding: const EdgeInsets.all(_PropertiesList.itemPadding), + child: RoundedLabel( + labelText: _maybeTruncateLabel('default', width: width), + tooltipText: 'Property argument matches the default value.', + ), + ), + ], + ); + }, ); } + + String _maybeTruncateLabel(String labelText, {required double width}) => + width >= _widthForFullLabels ? labelText : labelText[0].toUpperCase(); } class _PropertyInput extends StatelessWidget {
diff --git a/packages/devtools_app/test/standalone_ui/ide_shared/property_editor_test.dart b/packages/devtools_app/test/standalone_ui/ide_shared/property_editor_test.dart index 6c3f811..3cdd703 100644 --- a/packages/devtools_app/test/standalone_ui/ide_shared/property_editor_test.dart +++ b/packages/devtools_app/test/standalone_ui/ide_shared/property_editor_test.dart
@@ -224,17 +224,17 @@ await _verifyDropdownMenuItems( alignInput, menuOptions: [ - 'Alignment.bottomCenter', - 'Alignment.bottomLeft', - 'Alignment.bottomRight', - 'Alignment.center', - 'Alignment.centerLeft', - 'Alignment.centerRight', - 'Alignment.topCenter', - 'Alignment.topLeft', - 'Alignment.topRight', + '.bottomCenter', + '.bottomLeft', + '.bottomRight', + '.center', + '.centerLeft', + '.centerRight', + '.topCenter', + '.topLeft', + '.topRight', ], - selectedOption: 'Alignment.center', + selectedOption: '.center', tester: tester, ); }); @@ -368,8 +368,8 @@ final alignInput = _findDropdownButtonFormField('align'); await _selectDropdownMenuItem( alignInput, - optionToSelect: 'Alignment.topLeft', - currentlySelected: 'Alignment.center', + optionToSelect: '.topLeft', + currentlySelected: '.center', tester: tester, ); @@ -390,7 +390,7 @@ await _selectDropdownMenuItem( alignInput, optionToSelect: 'null', - currentlySelected: 'Alignment.center', + currentlySelected: '.center', tester: tester, );