Update simulated devtools extension environment help dialogs (flutter…

…#7417)
kenzieschmoll · Mar 22, 2024 · 1d50f2b · 1d50f2b
1 parent d13d09a
commit 1d50f2b
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 52 deletions.
diff --git a/packages/devtools_extensions/CHANGELOG.md b/packages/devtools_extensions/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.1.1-wip
+* Update the simulated environment help dialogs with information about the
+new `--print-dtd` CLI flag.
+
 ## 0.1.0
 * Bump `devtools_app_shared` to ^0.1.0
 * Update readme to use `pub add` instead of explicit package version.

diff --git a/...tensions/lib/src/template/_simulated_devtools_environment/connection_ui/_dtd_connect.dart b/...tensions/lib/src/template/_simulated_devtools_environment/connection_ui/_dtd_connect.dart
@@ -58,47 +58,58 @@ class DTDConnectionDisplay extends StatelessWidget {
 class DtdHelp extends StatelessWidget {
   const DtdHelp({super.key});
 
-  static const dtdStartCommand = 'dart tooling-daemon --unrestricted';
+  static const printDtdFlag = '--print-dtd';
 
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     return DefaultTextStyle(
       style: theme.regularTextStyle,
       child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           RichText(
             text: TextSpan(
               style: theme.regularTextStyle,
               text:
                   'If your DevTools extension interacts with the Dart Tooling '
-                  'Daemon (DTD) through',
+                  'Daemon (DTD) through ',
               children: [
                 TextSpan(
-                  text: ' dtdManager ',
+                  text: 'dtdManager',
                   style: theme.boldTextStyle,
                 ),
                 const TextSpan(
-                  text: 'then you will need to start a local instance of DTD '
-                      'to debug these features in the simulated environment. '
-                      'To start DTD locally:\n\n1. Run the following command '
-                      'from your terminal:',
+                  text: ', then you will need to connect to a local instance '
+                      'of DTD to debug these features in the simulated '
+                      'environment. There are multiple ways to access a local '
+                      'instance of DTD:\n\n'
+                      '1. If you are running a Dart or Flutter application '
+                      'from command line, add the ',
+                ),
+                TextSpan(
+                  text: printDtdFlag,
+                  style: theme.boldTextStyle,
+                ),
+                const TextSpan(
+                  text: ' flag. This will output a Dart Tooling Daemon URI to '
+                      'the command line that you can copy.',
                 ),
               ],
             ),
           ),
           Padding(
             padding: const EdgeInsets.symmetric(vertical: defaultSpacing),
             child: Row(
-              mainAxisSize: MainAxisSize.min,
+              mainAxisAlignment: MainAxisAlignment.center,
               children: [
-                const SelectableText(dtdStartCommand),
+                const SelectableText(printDtdFlag),
                 const SizedBox(width: defaultSpacing),
                 DevToolsButton.iconOnly(
                   icon: Icons.content_copy,
                   onPressed: () async {
                     await Clipboard.setData(
-                      const ClipboardData(text: dtdStartCommand),
+                      const ClipboardData(text: printDtdFlag),
                     );
                   },
                 ),
@@ -108,58 +119,32 @@ class DtdHelp extends StatelessWidget {
           RichText(
             text: TextSpan(
               style: theme.regularTextStyle,
-              text: '2. This will output text to the command line:',
+              text: '2. If you have a Dart or Flutter project open in your IDE '
+                  '(VS Code, IntelliJ, or Android Studio), the IDE will have '
+                  'a running instance of DTD that you can use. Use the '
+                  'IDE\'s affordance to find an action (Command Pallette '
+                  'for VS Code or Find Action for IntelliJ / Android '
+                  'Studio) to search for the ',
               children: [
                 TextSpan(
-                  text: ' "The Dart Tooling Daemon is listening on '
-                      'ws://127.0.0.1:62630/". ',
+                  text: '"Copy DTD URI to Clipboard"',
                   style: theme.boldTextStyle,
                 ),
                 const TextSpan(
-                  text: 'Copy the DTD URI and paste it into the "Dart '
-                      'Tooling Daemon Connection" text field to connect.',
+                  text: ' action.\n\n'
+                      'Now, you should have a DTD URI in your clipboard. Paste '
+                      'this into the "Dart Tooling Daemon Connection" text '
+                      'field to connect.',
                 ),
               ],
             ),
           ),
           const SizedBox(height: defaultSpacing),
           Text(
-            'In a real environment, DTD will be started by the user\'s IDE or'
-            ' by DevTools, so your extension will inherit the existing DTD'
-            ' connection from DevTools.',
+            'In a real environment, your extension will inherit the existing '
+            'DTD connection from DevTools.',
             style: theme.subtleTextStyle,
           ),
-          const SizedBox(height: defaultSpacing),
-          RichText(
-            text: TextSpan(
-              text: 'WARNING: if you are using DTD\'s file system APIs (',
-              style: theme.regularTextStyle.copyWith(
-                color: theme.colorScheme.tertiary,
-              ),
-              children: [
-                TextSpan(
-                  text: 'readFileAsString, writeFileAsString, listDirectories',
-                  style: theme.fixedFontStyle.copyWith(
-                    color: theme.colorScheme.tertiary,
-                  ),
-                ),
-                TextSpan(
-                  text:
-                      '), these will be more restricted in a real environment. '
-                      'In the simulated environment, your extension can access '
-                      'the entire file system; in a real environment, your '
-                      'extension will only have access to files within the '
-                      'user\'s project, which are determined by the workspace '
-                      'directores in the IDE, or, if DevTools was launched from '
-                      'the command line, then the project directories will be '
-                      'determined by the project root of the connected app.',
-                  style: theme.regularTextStyle.copyWith(
-                    color: theme.colorScheme.tertiary,
-                  ),
-                ),
-              ],
-            ),
-          ),
         ],
       ),
     );

diff --git a/...s/lib/src/template/_simulated_devtools_environment/connection_ui/_vm_service_connect.dart b/...s/lib/src/template/_simulated_devtools_environment/connection_ui/_vm_service_connect.dart
@@ -49,10 +49,25 @@ class VmServiceHelp extends StatelessWidget {
           Text(
             'If your DevTools extension interacts with a running Dart '
             'application, then you will need to run a test application and '
-            'connect it to the simulated environment.\n\n'
-            '1. Run a Dart or Flutter application.\n',
+            'connect it to the simulated environment.\n\n',
             style: theme.regularTextStyle,
           ),
+          RichText(
+            text: TextSpan(
+              style: theme.regularTextStyle,
+              text: '1. Run a Dart or Flutter application. If you also need to '
+                  'connect your extension to the Dart Tooling Daemon, run your '
+                  'app with the ',
+              children: [
+                TextSpan(
+                  text: '--print-dtd',
+                  style: theme.boldTextStyle,
+                ),
+                const TextSpan(text: ' flag.'),
+              ],
+            ),
+          ),
+          const SizedBox(height: denseSpacing),
           RichText(
             text: TextSpan(
               style: theme.regularTextStyle,

diff --git a/packages/devtools_extensions/pubspec.yaml b/packages/devtools_extensions/pubspec.yaml
@@ -1,6 +1,6 @@
 name: devtools_extensions
 description: A package for building and supporting extensions for Dart DevTools.
-version: 0.1.0
+version: 0.1.1-wip
 
 repository: https://github.com/flutter/devtools/tree/master/packages/devtools_extensions