Fix long string overlay in debugger Variables panel (#7112)

Author: khanak0509

packages/devtools_app/lib/src/shared/console/widgets/display_provider.dart

@@ -46,11 +46,17 @@ class _DisplayProviderState extends State<DisplayProvider> {
       return InteractivityWrapper(
         onTap: widget.onTap,
         menuButtons: _getMenuButtons(context),
-        child: Text.rich(
-          TextSpan(
-            children: textSpansFromAnsi(
-              widget.variable.text!,
-              theme.subtleFixedFontStyle,
+        child: DevToolsTooltip(
+          message: widget.variable.text,
+          child: Text.rich(
+            maxLines: 1,
+            softWrap: false,
+            overflow: TextOverflow.ellipsis,
+            TextSpan(
+              children: textSpansFromAnsi(
+                widget.variable.text!,
+                theme.subtleFixedFontStyle,
+              ),
             ),
           ),
         ),
@@ -88,6 +94,7 @@ class _DisplayProviderState extends State<DisplayProvider> {
               Expanded(
                 child: Text.rich(
                   maxLines: 1,
+                  softWrap: false,
                   overflow: TextOverflow.ellipsis,
                   TextSpan(
                     text: hasName ? widget.variable.name : null,
@@ -248,18 +255,27 @@ class DapDisplayProvider extends StatelessWidget {
     // TODO(https://github.com/flutter/devtools/issues/6056): Wrap in
     // interactivity wrapper to provide inspect and re-root functionality. Add
     // tooltip on hover to provide type information.
-    return Text.rich(
-      TextSpan(
-        text: name,
-        style: theme.fixedFontStyle.apply(
-          color: theme.colorScheme.controlFlowSyntaxColor,
+    return DevToolsTooltip(
+      message: value,
+      child: Text.rich(
+        maxLines: 1,
+        softWrap: false,
+        overflow: TextOverflow.ellipsis,
+        TextSpan(
+          text: name,
+          style: theme.fixedFontStyle.apply(
+            color: theme.colorScheme.controlFlowSyntaxColor,
+          ),
+          children: [
+            TextSpan(text: ': ', style: theme.fixedFontStyle),
+            // TODO(https://github.com/flutter/devtools/issues/6056): Change text
+            // style based on variable type.
+            TextSpan(
+              text: value.replaceAll('\n', '\\n'),
+              style: theme.subtleFixedFontStyle,
+            ),
+          ],
         ),
-        children: [
-          TextSpan(text: ': ', style: theme.fixedFontStyle),
-          // TODO(https://github.com/flutter/devtools/issues/6056): Change text
-          // style based on variable type.
-          TextSpan(text: value, style: theme.subtleFixedFontStyle),
-        ],
       ),
     );
   }

packages/devtools_app/test/screens/debugger/debugger_screen_dap_variables_test.dart

@@ -126,4 +126,39 @@ void main() {
     // String is now visible.
     expect(stringFinder, findsOneWidget);
   });
+  testWidgetsWithWindowSize(
+    'Truncates long variables to a single line with tooltip',
+    windowSize,
+    (WidgetTester tester) async {
+      final longString = 'a' * 1000;
+      final node = DapObjectNode(
+        service: vmService,
+        variable: dap.Variable(
+          name: 'longVar',
+          value: longString,
+          variablesReference: 0,
+        ),
+      );
+
+      fakeServiceConnection.appState.setDapVariables([node]);
+      await pumpDebuggerScreen(tester, debuggerController);
+
+      final tooltipFinder = find.byWidgetPredicate(
+        (widget) => widget is DevToolsTooltip && widget.message == longString,
+      );
+      expect(tooltipFinder, findsOneWidget);
+
+      final finder = find.byType(RichText);
+      bool foundTruncated = false;
+      for (final widget in tester.widgetList<RichText>(finder)) {
+        if (widget.text.toPlainText().contains('longVar: $longString')) {
+          expect(widget.maxLines, 1);
+          expect(widget.softWrap, false);
+          expect(widget.overflow, TextOverflow.ellipsis);
+          foundTruncated = true;
+        }
+      }
+      expect(foundTruncated, isTrue);
+    },
+  );
 }