Attempt to reconnect to DTD automatically if the connection drops

Take 2

Author: DanTup

.vscode/settings.json

@@ -2,4 +2,7 @@
     // Set current working directory to devtools_app.
     "terminal.integrated.cwd": "packages/devtools_app",
     "dart.showTodos": false,
+    "dart.analysisExcludedFolders": [
+        "tool/flutter-sdk"
+    ]
 }

.vscode/tasks.json

@@ -5,7 +5,7 @@
 			"label": "Start DTD on Port 8500",
 			"detail": "Starts a DTD instance running on port 8500",
 			"type": "shell",
-			"command": "${workspaceFolder}/../tool/flutter-sdk/bin/cache/dart-sdk/bin/dart",
+			"command": "${workspaceFolder}/tool/flutter-sdk/bin/cache/dart-sdk/bin/dart",
 			"args": [
 				"tooling-daemon",
 				"--disable-service-auth-codes",

packages/devtools_app/lib/src/shared/editor/editor_client.dart

@@ -29,8 +29,6 @@ class EditorClient extends DisposableController
 
   String get gaId => EditorSidebar.id;
 
-  bool get isDtdClosed => _dtd.isClosed;
-
   Future<void> _initialize() async {
     autoDisposeStreamSubscription(
       _dtd.onEvent(CoreDtdServiceConstants.servicesStreamId).listen((data) {

packages/devtools_app/lib/src/standalone_ui/ide_shared/not_connected_overlay.dart

@@ -0,0 +1,61 @@
+// Copyright 2025 The Flutter Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file or at https://developers.google.com/open-source/licenses/bsd.
+
+import 'package:devtools_app_shared/service.dart';
+import 'package:devtools_app_shared/ui.dart';
+import 'package:flutter/material.dart';
+
+import '../../shared/globals.dart';
+import '../../shared/ui/common_widgets.dart';
+
+/// An overlay to show when we are not connected to DTD based on the
+/// [DTDConnectionState] classes.
+class NotConnectedOverlay extends StatefulWidget {
+  const NotConnectedOverlay(this.connectionState, {super.key});
+
+  final DTDConnectionState connectionState;
+
+  @override
+  State<NotConnectedOverlay> createState() => _NotConnectedOverlayState();
+}
+
+class _NotConnectedOverlayState extends State<NotConnectedOverlay> {
+  @override
+  Widget build(BuildContext context) {
+    final connectionState = widget.connectionState;
+    final theme = Theme.of(context);
+
+    final showSpinner = connectionState is! ConnectionFailedDTDState;
+    final showReconnectButton = connectionState is ConnectionFailedDTDState;
+    final stateLabel = switch (connectionState) {
+      NotConnectedDTDState() => 'Waiting to connect...',
+      ConnectingDTDState() => 'Connecting...',
+      WaitingToRetryDTDState(seconds: final seconds) =>
+        'Reconnecting in $seconds...',
+      ConnectionFailedDTDState() => 'Connection Failed',
+      // We should never present this widget when connected, but provide a label
+      // for debugging if it happens.
+      ConnectedDTDState() => 'Connected',
+    };
+
+    return DevToolsOverlay(
+      fullScreen: true,
+      content: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          if (showSpinner) ...const [
+            CircularProgressIndicator(),
+            SizedBox(height: defaultSpacing),
+          ],
+          Text(stateLabel, style: theme.textTheme.headlineMedium),
+          if (showReconnectButton)
+            ElevatedButton(
+              onPressed: () => dtdManager.reconnect(),
+              child: const Text('Retry'),
+            ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -55,20 +55,13 @@ class PropertyEditorController extends DisposableController
   String? get fileUri => _editableWidgetData.value?.fileUri;
   EditorRange? get widgetRange => _editableWidgetData.value?.range;
 
-  ValueListenable<bool> get shouldReconnect => _shouldReconnect;
-  final _shouldReconnect = ValueNotifier<bool>(false);
-
   bool get waitingForFirstEvent => _waitingForFirstEvent;
   bool _waitingForFirstEvent = true;
 
   late final Debouncer _requestDebouncer;
 
-  late final Timer _checkConnectionTimer;
-
   static const _requestDebounceDuration = Duration(milliseconds: 600);
 
-  static const _checkConnectionInterval = Duration(minutes: 1);
-
   static const _setPropertiesFilterId = 'set-properties-filter';
 
   @visibleForTesting
@@ -85,9 +78,6 @@ class PropertyEditorController extends DisposableController
   void init() {
     super.init();
     _requestDebouncer = Debouncer(duration: _requestDebounceDuration);
-    _checkConnectionTimer = _periodicallyCheckConnection(
-      _checkConnectionInterval,
-    );
 
     // Update in response to ActiveLocationChanged events.
     autoDisposeStreamSubscription(
@@ -134,7 +124,6 @@ class PropertyEditorController extends DisposableController
   @override
   void dispose() {
     _requestDebouncer.dispose();
-    _checkConnectionTimer.cancel();
     super.dispose();
   }
 
@@ -268,16 +257,6 @@ class PropertyEditorController extends DisposableController
   List<CodeActionCommand> _extractRefactors(CodeActionResult? result) =>
       (result?.actions ?? <CodeActionCommand>[]).toList();
 
-  Timer _periodicallyCheckConnection(Duration interval) {
-    return Timer.periodic(interval, (timer) {
-      final isClosed = editorClient.isDtdClosed;
-      if (isClosed) {
-        _shouldReconnect.value = true;
-        timer.cancel();
-      }
-    });
-  }
-
   bool _filteredOutBySettings(
     EditableProperty property, {
     required Filter filter,

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

@@ -17,7 +17,6 @@ import '../../../shared/primitives/query_parameters.dart';
 import '../../../shared/ui/common_widgets.dart';
 import 'property_editor_controller.dart';
 import 'property_editor_view.dart';
-import 'reconnecting_overlay.dart';
 
 /// The side panel for the Property Editor.
 class PropertyEditorPanel extends StatefulWidget {
@@ -106,43 +105,31 @@ class _PropertyEditorConnectedPanelState
 
   @override
   Widget build(BuildContext context) {
-    return ValueListenableBuilder<bool>(
-      valueListenable: widget.controller.shouldReconnect,
-      builder: (context, shouldReconnect, _) {
-        return Stack(
-          children: [
-            Scrollbar(
+    return Scrollbar(
+      controller: scrollController,
+      thumbVisibility: true,
+      child: Column(
+        children: [
+          Expanded(
+            child: SingleChildScrollView(
               controller: scrollController,
-              thumbVisibility: true,
-              child: Column(
-                children: [
-                  Expanded(
-                    child: SingleChildScrollView(
-                      controller: scrollController,
-                      child: Padding(
-                        padding: const EdgeInsets.fromLTRB(
-                          denseSpacing,
-                          defaultSpacing,
-                          defaultSpacing, // Additional right padding for scroll bar.
-                          defaultSpacing,
-                        ),
-                        child: Column(
-                          crossAxisAlignment: CrossAxisAlignment.start,
-                          children: [
-                            PropertyEditorView(controller: widget.controller),
-                          ],
-                        ),
-                      ),
-                    ),
-                  ),
-                  const _PropertyEditorFooter(),
-                ],
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(
+                  denseSpacing,
+                  defaultSpacing,
+                  defaultSpacing, // Additional right padding for scroll bar.
+                  defaultSpacing,
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [PropertyEditorView(controller: widget.controller)],
+                ),
               ),
             ),
-            if (shouldReconnect) const ReconnectingOverlay(),
-          ],
-        );
-      },
+          ),
+          const _PropertyEditorFooter(),
+        ],
+      ),
     );
   }
 }

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

@@ -3,7 +3,6 @@
 // found in the LICENSE file or at https://developers.google.com/open-source/licenses/bsd.
 
 import 'package:flutter/widgets.dart';
-import '_utils_desktop.dart' if (dart.library.js_interop) '_utils_web.dart';
 
 /// Converts a [dartDocText] String into a [Text] widget.
 class DartDocConverter {
@@ -133,10 +132,3 @@ class DartDocConverter {
     return result;
   }
 }
-
-/// Workaround to force reload the Property Editor when it disconnects.
-///
-/// See https://github.com/flutter/devtools/issues/9028 for details.
-void forceReload() {
-  reloadIframe();
-}