Add text previews to widget tree (#3218)

Author: tomgilder

packages/devtools_app/assets/scripts/inspector_polyfill_script.dart

@@ -111,6 +111,41 @@ String addServiceExtensions() {
     throw 'Enum value $name not found';
   }
 
+  /// This is identical to Flutter's getRootWidgetSummaryTree service extension,
+  /// but with the added properties.
+  Future<Map<String, dynamic>> getRootWidgetSummaryTreeWithPreviews(
+      Map<String, String> parameters) {
+    final instance = WidgetInspectorService.instance;
+    final groupName = parameters['groupName'];
+
+    final result = instance._nodeToJson(
+      WidgetsBinding.instance?.renderViewElement?.toDiagnosticsNode(),
+      InspectorSerializationDelegate(
+        groupName: groupName,
+        subtreeDepth: 1000000,
+        summaryTree: true,
+        service: instance,
+        addAdditionalPropertiesCallback: (DiagnosticsNode node, delegate) {
+          final additionalJson = <String, Object>{};
+
+          final value = node.value;
+          if (value is Element) {
+            final renderObject = value.renderObject;
+            if (renderObject is RenderParagraph) {
+              additionalJson['textPreview'] = renderObject.text.toPlainText();
+            }
+          }
+
+          return additionalJson;
+        },
+      ),
+    );
+
+    return Future.value(<String, dynamic>{
+      'result': result,
+    });
+  }
+
   Future<Map<String, dynamic>> getLayoutExplorerNode(
       Map<String, String> parameters) {
     final id = parameters['id'];
@@ -317,6 +352,11 @@ String addServiceExtensions() {
   registerHelper('setFlexFactor', setFlexFactor);
   registerHelper('setFlexProperties', setFlexProperties);
   registerHelper('getPubRootDirectories', getPubRootDirectories);
+  registerHelper(
+    'getRootWidgetSummaryTreeWithPreviews',
+    getRootWidgetSummaryTreeWithPreviews,
+  );
+
   return WidgetInspectorService.instance._safeJsonEncode(failures);
   // INSPECTOR_POLYFILL_SCRIPT_END
 }

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

@@ -82,9 +82,19 @@ class DiagnosticsNodeDescription extends StatelessWidget {
         return;
       }
     }
+
     if (description?.isNotEmpty == true) {
       yield TextSpan(text: description, style: textStyle);
     }
+
+    final textPreview = diagnostic.json['textPreview'];
+    if (textPreview is String) {
+      final preview = textPreview.replaceAll('\n', ' ');
+      yield TextSpan(
+        text: ': "$preview"',
+        style: textStyle.merge(inspector_text_styles.unimportant(colorScheme)),
+      );
+    }
   }
 
   Widget buildDescription(

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

@@ -38,6 +38,8 @@ class RegistrableServiceExtension {
   static const setFlexFactor = RegistrableServiceExtension('setFlexFactor');
   static const setFlexProperties =
       RegistrableServiceExtension('setFlexProperties');
+  static const getRootWidgetSummaryTreeWithPreviews =
+      RegistrableServiceExtension('getRootWidgetSummaryTreeWithPreviews');
 
   static const getPubRootDirectories =
       RegistrableServiceExtension('getPubRootDirectories');
@@ -974,7 +976,10 @@ class ObjectGroup implements Disposable {
   }
 
   Future<RemoteDiagnosticsNode> getRootWidget() {
-    return invokeServiceMethodReturningNode('getRootWidgetSummaryTree');
+    return parseDiagnosticsNodeDaemon(invokeServiceExtensionMethod(
+      RegistrableServiceExtension.getRootWidgetSummaryTreeWithPreviews,
+      {'groupName': groupName},
+    ));
   }
 
   Future<RemoteDiagnosticsNode> getRootWidgetFullTree() {

packages/devtools_app/test/inspector_tree_test.dart

@@ -9,24 +9,28 @@ import 'package:devtools_app/src/inspector/inspector_tree.dart';
 import 'package:devtools_app/src/inspector/inspector_tree_flutter.dart';
 import 'package:devtools_app/src/service_manager.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:flutter_test/flutter_test.dart' hide Fake;
 import 'package:mockito/mockito.dart';
 
+import 'support/inspector_tree.dart';
 import 'support/mocks.dart';
+import 'support/utils.dart';
 import 'support/wrappers.dart';
 
 void main() {
   FakeServiceManager fakeServiceManager;
-  group('InspectorTreeController', () {
-    setUp(() {
-      fakeServiceManager = FakeServiceManager();
-      when(fakeServiceManager.connectedApp.isFlutterAppNow).thenReturn(true);
-      when(fakeServiceManager.connectedApp.isProfileBuildNow).thenReturn(false);
 
-      setGlobal(ServiceConnectionManager, fakeServiceManager);
-      mockIsFlutterApp(serviceManager.connectedApp);
-    });
+  setUp(() {
+    fakeServiceManager = FakeServiceManager();
+    when(fakeServiceManager.connectedApp.isFlutterAppNow).thenReturn(true);
+    when(fakeServiceManager.connectedApp.isProfileBuildNow).thenReturn(false);
+
+    setGlobal(ServiceConnectionManager, fakeServiceManager);
+    mockIsFlutterApp(serviceManager.connectedApp);
+  });
 
+  group('InspectorTreeController', () {
     testWidgets('Row with negative index regression test',
         (WidgetTester tester) async {
       final controller = InspectorTreeControllerFlutter()
@@ -64,4 +68,62 @@ void main() {
       controller.scrollToRect(const Rect.fromLTWH(0, -20, 100, 100));
     });
   });
+
+  group('Inspector tree content preview', () {
+    testWidgets('Shows simple text preview', (WidgetTester tester) async {
+      final diagnosticNode = await widgetToInspectorTreeDiagnosticsNode(
+        widget: const Text('Content'),
+        tester: tester,
+      );
+
+      final treeController = inspectorTreeControllerFromNode(diagnosticNode);
+      await tester.pumpWidget(wrap(InspectorTree(
+        controller: treeController,
+        debuggerController: DebuggerController(),
+      )));
+
+      expect(find.richText('Text: "Content"'), findsOneWidget);
+    });
+
+    testWidgets('Shows preview from Text.rich', (WidgetTester tester) async {
+      final diagnosticNode = await widgetToInspectorTreeDiagnosticsNode(
+        widget: const Text.rich(
+          TextSpan(
+            children: [
+              TextSpan(text: 'Rich '),
+              TextSpan(text: 'text'),
+            ],
+          ),
+        ),
+        tester: tester,
+      );
+
+      final treeController = inspectorTreeControllerFromNode(diagnosticNode);
+      await tester.pumpWidget(wrap(InspectorTree(
+        controller: treeController,
+        debuggerController: DebuggerController(),
+      )));
+
+      expect(find.richText('Text: "Rich text"'), findsOneWidget);
+    });
+
+    testWidgets('Strips new lines from text preview',
+        (WidgetTester tester) async {
+      final diagnosticNode = await widgetToInspectorTreeDiagnosticsNode(
+        widget: const Text('Multiline\ntext\n\ncontent'),
+        tester: tester,
+      );
+
+      final treeController = inspectorTreeControllerFromNode(diagnosticNode);
+
+      await tester.pumpWidget(
+        wrap(InspectorTree(
+          controller: treeController,
+          debuggerController: DebuggerController(),
+        )),
+      );
+
+      expect(find.richText('Text: "Multiline text  content"'), findsOneWidget);
+    });
+  });
 }

packages/devtools_app/test/support/inspector_tree.dart

@@ -0,0 +1,67 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:devtools_app/src/inspector/diagnostics_node.dart';
+import 'package:devtools_app/src/inspector/inspector_service.dart';
+import 'package:devtools_app/src/inspector/inspector_tree.dart';
+import 'package:devtools_app/src/inspector/inspector_tree_flutter.dart';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import 'wrappers.dart';
+
+/// Create an `InspectorTreeControllerFlutter` from a single `RemoteDiagnosticsNode`
+InspectorTreeControllerFlutter inspectorTreeControllerFromNode(
+    RemoteDiagnosticsNode node) {
+  final controller = InspectorTreeControllerFlutter()
+    ..config = InspectorTreeConfig(
+      summaryTree: false,
+      treeType: FlutterTreeType.widget,
+      onNodeAdded: (_, __) {},
+      onClientActiveChange: (_) {},
+    );
+
+  controller.root = InspectorTreeNode()
+    ..appendChild(
+      InspectorTreeNode()..diagnostic = node,
+    );
+
+  return controller;
+}
+
+/// Replicates the functionality of `getRootWidgetSummaryTreeWithPreviews` from
+/// inspector_polyfill_script.dart
+Future<RemoteDiagnosticsNode> widgetToInspectorTreeDiagnosticsNode({
+  @required Widget widget,
+  @required WidgetTester tester,
+}) async {
+  await tester.pumpWidget(wrap(widget));
+  final element = find.byWidget(widget).evaluate().first;
+  final nodeJson =
+      element.toDiagnosticsNode(style: DiagnosticsTreeStyle.dense).toJsonMap(
+            InspectorSerializationDelegate(
+              service: WidgetInspectorService.instance,
+              subtreeDepth: 1000000,
+              summaryTree: true,
+              addAdditionalPropertiesCallback: (node, delegate) {
+                final additionalJson = <String, Object>{};
+
+                final value = node.value;
+                if (value is Element) {
+                  final renderObject = value.renderObject;
+                  if (renderObject is RenderParagraph) {
+                    additionalJson['textPreview'] =
+                        renderObject.text.toPlainText();
+                  }
+                }
+
+                return additionalJson;
+              },
+            ),
+          );
+
+  return RemoteDiagnosticsNode(nodeJson, null, false, null);
+}