Add type info and have all inputs used fixed font

Author: elliette

packages/devtools_app/lib/src/standalone_ui/ide_shared/property_editor/property_editor_view.dart

@@ -148,12 +148,15 @@ class _PropertyInputState extends State<_PropertyInput> {
 
   @override
   Widget build(BuildContext context) {
+    // TODO(elliette): Refactor to split each argument type into its own input
+    // widget class for readability.
+    final theme = Theme.of(context);
     final argument = widget.argument;
     final decoration = InputDecoration(
       helperText: argument.isRequired ? '*required' : '',
       errorText: argument.errorText,
       isDense: true,
-      label: Text('${argument.name}${argument.isRequired ? '*' : ''}'),
+      label: _inputLabel(argument, theme: theme),
       border: const OutlineInputBorder(),
     );
     final argType = widget.argument.type;
@@ -179,7 +182,7 @@ class _PropertyInputState extends State<_PropertyInput> {
                   value: option,
                   // TODO(https://github.com/flutter/devtools/issues/8531) Handle onTap.
                   onTap: () {},
-                  child: Text(option),
+                  child: Text(option, style: theme.fixedFontStyle),
                 );
               }).toList(),
           onChanged: (newValue) async {
@@ -214,6 +217,54 @@ class _PropertyInputState extends State<_PropertyInput> {
     }
   }
 
+  Widget _inputLabel(EditableArgument argument, {required ThemeData theme}) {
+    final type = _typeForLabel(argument);
+    return RichText(
+      overflow: TextOverflow.ellipsis,
+      text: TextSpan(
+        text: type != null ? '$type ' : ':',
+        style: theme.fixedFontStyle,
+        children: [
+          TextSpan(
+            text: argument.name,
+            style: theme.fixedFontStyle.copyWith(
+              fontWeight: FontWeight.bold,
+              color: theme.colorScheme.primary,
+            ),
+            children: [
+              TextSpan(
+                text: argument.isRequired ? '*' : '',
+                style: theme.fixedFontStyle,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  String? _typeForLabel(EditableArgument argument) {
+    String? typeName;
+    switch (argument.type) {
+      case 'string':
+        typeName = 'String';
+        break;
+      case 'int':
+      case 'double':
+      case 'bool':
+        typeName = argument.type;
+        break;
+      case 'enum':
+        typeName = argument.options?.first.split('.').first;
+        break;
+      default:
+        break;
+    }
+
+    if (typeName == null) return null;
+    return argument.isNullable ? '$typeName?' : typeName;
+  }
+
   Future<void> _editArgument(String? valueAsString) async {
     final argName = widget.argument.name;
 

packages/devtools_app/test/standalone_ui/ide_shared/property_editor_test.dart

@@ -137,9 +137,9 @@ void main() {
       controller.initForTestsOnly(editableArgs: result1.args);
       await tester.pumpAndSettle();
 
-      final titleInput = _findTextFormField('title');
-      final widthInput = _findTextFormField('width');
-      final heightInput = _findTextFormField('height');
+      final titleInput = _findTextFormField('String? title');
+      final widthInput = _findTextFormField('double width');
+      final heightInput = _findTextFormField('double? height');
 
       // Verify the inputs are expected.
       expect(_findNoPropertiesMessage, findsNothing);
@@ -169,8 +169,8 @@ void main() {
       controller.initForTestsOnly(editableArgs: result2.args);
       await tester.pumpAndSettle();
 
-      final softWrapInput = _findDropdownButtonFormField('softWrap');
-      final alignInput = _findDropdownButtonFormField('align');
+      final softWrapInput = _findDropdownButtonFormField('bool softWrap');
+      final alignInput = _findDropdownButtonFormField('Alignment? align');
 
       // Verify the inputs are expected.
       expect(_findNoPropertiesMessage, findsNothing);
@@ -422,7 +422,7 @@ final _findNoPropertiesMessage = find.text(
 );
 
 Finder _findTextFormField(String inputName) => find.ancestor(
-  of: find.textContaining(inputName),
+  of: find.richTextContaining(inputName),
   matching: find.byType(TextFormField),
 );
 
@@ -444,7 +444,7 @@ Finder _helperTextForInput(Finder inputFinder, {required String matching}) {
 }
 
 Finder _findDropdownButtonFormField(String inputName) => find.ancestor(
-  of: find.text(inputName),
+  of: find.richTextContaining(inputName),
   matching: find.byType(DropdownButtonFormField<String>),
 );