Improve startup performance of DevTools by using lazy initialization for debugger and console service (flutter#3468)

Author: kenzieschmoll

packages/devtools_app/lib/src/console_service.dart

@@ -151,14 +151,21 @@ class ConsoleService extends Disposer {
     // will grow to kMaxLogItemsUpperBound then truncate to
     // kMaxLogItemsLowerBound.
     if (_stdio.value.length > kMaxLogItemsUpperBound) {
-      _stdio.trimToSublist(stdio.value.length - kMaxLogItemsLowerBound);
+      _stdio.trimToSublist(_stdio.value.length - kMaxLogItemsLowerBound);
     }
   }
 
   /// Return the stdout and stderr emitted from the application.
   ///
   /// Note that this output might be truncated after significant output.
-  ValueListenable<List<ConsoleLine>> get stdio => _stdio;
+  ValueListenable<List<ConsoleLine>> get stdio {
+    assert(
+      _serviceInitialized,
+      '`ConsoleService.ensureServiceInitialized` must be called before '
+      'interacting with the ConsoleService.',
+    );
+    return _stdio;
+  }
 
   void _handleStdoutEvent(Event event) {
     final String text = decodeBase64(event.bytes);
@@ -174,16 +181,42 @@ class ConsoleService extends Disposer {
 
   void vmServiceOpened(VmServiceWrapper service) {
     cancel();
+    // The debug stream listener must be added as soon as the service is opened
+    // because this stream does not send event history upon the first
+    // subscription like the streams in [ensureServiceInitialized].
     autoDispose(service.onDebugEvent.listen(_handleDebugEvent));
-    autoDispose(service.onStdoutEventWithHistory.listen(_handleStdoutEvent));
-    autoDispose(service.onStderrEventWithHistory.listen(_handleStderrEvent));
-    autoDispose(
-        service.onExtensionEventWithHistory.listen(_handleExtensionEvent));
     addAutoDisposeListener(serviceManager.isolateManager.mainIsolate, () {
       clearStdio();
     });
   }
 
+  /// Whether the console service has been initialized.
+  bool _serviceInitialized = false;
+
+  /// Initialize the console service.
+  ///
+  /// Consumers of [ConsoleService] should call this method before using the
+  /// console service in any way.
+  ///
+  /// These stream listeners are added here instead of in [vmServiceOpened] for
+  /// performance reasons. Since these streams have event history, we will not
+  /// be missing any events by listening after [vmServiceOpened], and listening
+  /// only when this data is needed will improve performance for connecting to
+  /// low-end devices, as well as when DevTools pages that don't need the
+  /// [ConsoleService] are being used.
+  void ensureServiceInitialized() {
+    assert(serviceManager.isServiceAvailable);
+    if (!_serviceInitialized && serviceManager.isServiceAvailable) {
+      autoDispose(serviceManager.service.onStdoutEventWithHistory
+          .listen(_handleStdoutEvent));
+      autoDispose(serviceManager.service.onStderrEventWithHistory
+          .listen(_handleStderrEvent));
+      autoDispose(serviceManager.service.onExtensionEventWithHistory
+          .listen(_handleExtensionEvent));
+      _serviceInitialized = true;
+    }
+  }
+
   void _handleExtensionEvent(Event e) async {
     if (e.extensionKind == 'Flutter.Error' ||
         e.extensionKind == 'Flutter.Print') {
@@ -210,6 +243,7 @@ class ConsoleService extends Disposer {
 
   void handleVmServiceClosed() {
     cancel();
+    _serviceInitialized = false;
   }
 
   void _handleDebugEvent(Event event) async {

packages/devtools_app/lib/src/debugger/console.dart

@@ -17,7 +17,7 @@ import 'evaluate.dart';
 // TODO(devoncarew): Show some small UI indicator when we receive stdout/stderr.
 
 /// Display the stdout and stderr output from the process under debug.
-class DebuggerConsole extends StatelessWidget {
+class DebuggerConsole extends StatefulWidget {
   const DebuggerConsole({
     Key key,
   }) : super(key: key);
@@ -26,9 +26,39 @@ class DebuggerConsole extends StatelessWidget {
       Key('debugger_console_copy_to_clipboard_button');
   static const clearStdioButtonKey = Key('debugger_console_clear_stdio_button');
 
+  @override
+  State<DebuggerConsole> createState() => _DebuggerConsoleState();
+
+  static PreferredSizeWidget buildHeader() {
+    return AreaPaneHeader(
+      title: const Text('Console'),
+      needsTopBorder: false,
+      rightActions: [
+        CopyToClipboardControl(
+          dataProvider: () =>
+              serviceManager.consoleService.stdio.value?.join('\n') ?? '',
+          buttonKey: DebuggerConsole.copyToClipboardButtonKey,
+        ),
+        DeleteControl(
+          buttonKey: DebuggerConsole.clearStdioButtonKey,
+          tooltip: 'Clear console output',
+          onPressed: () => serviceManager.consoleService.clearStdio(),
+        ),
+      ],
+    );
+  }
+}
+
+class _DebuggerConsoleState extends State<DebuggerConsole> {
   ValueListenable<List<ConsoleLine>> get stdio =>
       serviceManager.consoleService.stdio;
 
+  @override
+  void initState() {
+    super.initState();
+    serviceManager.consoleService.ensureServiceInitialized();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -48,23 +78,4 @@ class DebuggerConsole extends StatelessWidget {
       ],
     );
   }
-
-  static PreferredSizeWidget buildHeader() {
-    return AreaPaneHeader(
-      title: const Text('Console'),
-      needsTopBorder: false,
-      rightActions: [
-        CopyToClipboardControl(
-          dataProvider: () =>
-              serviceManager.consoleService.stdio.value?.join('\n') ?? '',
-          buttonKey: DebuggerConsole.copyToClipboardButtonKey,
-        ),
-        DeleteControl(
-          buttonKey: DebuggerConsole.clearStdioButtonKey,
-          tooltip: 'Clear console output',
-          onPressed: () => serviceManager.consoleService.clearStdio(),
-        ),
-      ],
-    );
-  }
 }

packages/devtools_app/lib/src/debugger/debugger_controller.dart

@@ -39,21 +39,39 @@ class DebuggerController extends DisposableController
     );
     autoDispose(serviceManager.onConnectionAvailable
         .listen(_handleConnectionAvailable));
+    if (_service != null) {
+      initialize();
+    }
     _scriptHistoryListener = () {
       _showScriptLocation(ScriptLocation(scriptsHistory.current.value));
     };
     scriptsHistory.current.addListener(_scriptHistoryListener);
-    addAutoDisposeListener(currentScriptRef, () {
-      if (!programExplorerController.initialized.value) {
-        programExplorerController.initialize();
-      }
-      if (currentScriptRef.value != null) {
-        programExplorerController.selectScriptNode(currentScriptRef.value);
-      }
-    });
+  }
 
-    if (_service != null) {
-      initialize();
+  bool _firstDebuggerScreenLoaded = false;
+
+  /// Callback to be called when the debugger screen is first loaded.
+  ///
+  /// We delay calling this method until the debugger screen is first loaded
+  /// for performance reasons. None of the code here needs to be called when
+  /// DevTools first connects to an app, and doing so inhibits DevTools from
+  /// connecting to low-end devices.
+  void onFirstDebuggerScreenLoad() {
+    if (!_firstDebuggerScreenLoaded) {
+      _maybeSetUpProgramExplorer();
+      addAutoDisposeListener(currentScriptRef, _maybeSetUpProgramExplorer);
+      _firstDebuggerScreenLoaded = true;
+    }
+  }
+
+  void _maybeSetUpProgramExplorer() {
+    if (!programExplorerController.initialized.value) {
+      programExplorerController
+        ..initListeners()
+        ..initialize();
+    }
+    if (currentScriptRef.value != null) {
+      programExplorerController.selectScriptNode(currentScriptRef.value);
     }
   }
 
@@ -82,6 +100,7 @@ class DebuggerController extends DisposableController
     _selectedBreakpoint.value = null;
     _librariesVisible.value = false;
     isolateRef = null;
+    _firstDebuggerScreenLoaded = false;
   }
 
   VmServiceWrapper _lastService;

packages/devtools_app/lib/src/debugger/debugger_screen.dart

@@ -116,6 +116,7 @@ class DebuggerScreenBodyState extends State<DebuggerScreenBody>
     final newController = Provider.of<DebuggerController>(context);
     if (newController == controller) return;
     controller = newController;
+    controller.onFirstDebuggerScreenLoad();
   }
 
   void _onLocationSelected(ScriptLocation location) {

packages/devtools_app/lib/src/debugger/evaluate.dart

@@ -42,6 +42,8 @@ class _ExpressionEvalFieldState extends State<ExpressionEvalField>
   void initState() {
     super.initState();
 
+    serviceManager.consoleService.ensureServiceInitialized();
+
     _autoCompleteController = AutoCompleteController();
 
     addAutoDisposeListener(_autoCompleteController.searchNotifier, () {
@@ -54,9 +56,13 @@ class _ExpressionEvalFieldState extends State<ExpressionEvalField>
       );
     });
     addAutoDisposeListener(
-        _autoCompleteController.selectTheSearchNotifier, _handleSearch);
+      _autoCompleteController.selectTheSearchNotifier,
+      _handleSearch,
+    );
     addAutoDisposeListener(
-        _autoCompleteController.searchNotifier, _handleSearch);
+      _autoCompleteController.searchNotifier,
+      _handleSearch,
+    );
   }
 
   void _handleSearch() async {

packages/devtools_app/lib/src/debugger/program_explorer.dart

@@ -62,7 +62,11 @@ class _ProgramExplorerRow extends StatelessWidget {
                 text,
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
-                style: theme.fixedFontStyle,
+                style: theme.fixedFontStyle.copyWith(
+                  color: node.isSelected
+                      ? Colors.white
+                      : theme.fixedFontStyle.color,
+                ),
               ),
             ),
           ],
@@ -320,7 +324,6 @@ class _ProgramOutlineView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    print(controller.isLoadingOutline);
     return ValueListenableBuilder<bool>(
       valueListenable: controller.isLoadingOutline,
       builder: (context, isLoadingOutline, _) {

packages/devtools_app/lib/src/debugger/program_explorer_controller.dart

@@ -15,17 +15,7 @@ import 'program_explorer_model.dart';
 
 class ProgramExplorerController extends DisposableController
     with AutoDisposeControllerMixin {
-  ProgramExplorerController({@required this.debuggerController}) {
-    addAutoDisposeListener(
-      serviceManager.isolateManager.selectedIsolate,
-      refresh,
-    );
-    // Re-initialize after reload.
-    addAutoDisposeListener(
-      debuggerController.sortedScripts,
-      refresh,
-    );
-  }
+  ProgramExplorerController({@required this.debuggerController});
 
   /// The outline view nodes for the currently selected library.
   ValueListenable<List<VMServiceObjectNode>> get outlineNodes => _outlineNodes;
@@ -68,6 +58,7 @@ class ProgramExplorerController extends DisposableController
       return;
     }
     _initializing = true;
+
     _isolate = serviceManager.isolateManager.selectedIsolate.value;
     final libraries = _isolate != null
         ? serviceManager.isolateManager
@@ -85,6 +76,18 @@ class ProgramExplorerController extends DisposableController
     _initialized.value = true;
   }
 
+  void initListeners() {
+    addAutoDisposeListener(
+      serviceManager.isolateManager.selectedIsolate,
+      refresh,
+    );
+    // Re-initialize after reload.
+    addAutoDisposeListener(
+      debuggerController.sortedScripts,
+      refresh,
+    );
+  }
+
   void selectScriptNode(ScriptRef script) {
     if (!initialized.value) {
       return;

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

@@ -143,6 +143,8 @@ class InspectorController extends DisposableController
     autoDispose(
       serviceManager.onConnectionClosed.listen(_handleConnectionStop),
     );
+
+    serviceManager.consoleService.ensureServiceInitialized();
   }
 
   void _handleConnectionStart(VmService service) {

packages/devtools_app/lib/src/routing.dart

@@ -8,6 +8,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
 import 'globals.dart';
+import 'utils.dart';
 
 /// The page ID (used in routing) for the standalone app-size page.
 ///
@@ -31,10 +32,27 @@ class DevToolsRouteConfiguration {
 /// in the address bar/state objects).
 class DevToolsRouteInformationParser
     extends RouteInformationParser<DevToolsRouteConfiguration> {
+  DevToolsRouteInformationParser();
+
+  @visibleForTesting
+  DevToolsRouteInformationParser.test(this._forceVmServiceUri);
+
+  /// The value for the 'uri' query parameter in a DevTools uri.
+  ///
+  /// This is to be used in a testing environment only and can be set via the
+  /// [DevToolsRouteInformationParser.test] constructor.
+  String _forceVmServiceUri;
+
   @override
   Future<DevToolsRouteConfiguration> parseRouteInformation(
       RouteInformation routeInformation) {
-    final uri = Uri.parse(routeInformation.location);
+    var uri = Uri.parse(routeInformation.location);
+
+    if (_forceVmServiceUri != null) {
+      final newQueryParams = Map<String, dynamic>.from(uri.queryParameters);
+      newQueryParams['uri'] = _forceVmServiceUri;
+      uri = uri.copyWith(queryParameters: newQueryParams);
+    }
 
     // If the uri has been modified and we do not have a vm service uri as a
     // query parameter, ensure we manually disconnect from any previously

packages/devtools_app/lib/src/scaffold.dart

@@ -360,6 +360,7 @@ class DevToolsScaffoldState extends State<DevToolsScaffold>
           children: tabBodies,
         ),
         if (serviceManager.connectedAppInitialized &&
+            !serviceManager.connectedApp.isProfileBuildNow &&
             !offlineController.offlineMode.value &&
             _currentScreen.showFloatingDebuggerControls)
           Container(
@@ -391,6 +392,7 @@ class DevToolsScaffoldState extends State<DevToolsScaffold>
                 child: Scaffold(
                   appBar: widget.embed ? null : _buildAppBar(scaffoldTitle),
                   body: (serviceManager.connectedAppInitialized &&
+                          !serviceManager.connectedApp.isProfileBuildNow &&
                           !offlineController.offlineMode.value &&
                           _currentScreen.showConsole(widget.embed))
                       ? Split(