Address some devtools extensions feedback related to Windows (#6639)

packages/devtools_extensions/CHANGELOG.md

@@ -1,4 +1,7 @@
 ## 0.0.10
+* Fix some bugs with the `build_and_copy` command for Windows.
+* Add an example `launch.json` file in the `example/foo` directory.
+* Clean up the package readme to make instructions Windows-compatible.
 * Update the README with instructions for joining the Flutter Discord server.
 * Bump the `devtools_shared` dependency to ^5.0.0
 

packages/devtools_extensions/README.md

@@ -111,18 +111,19 @@ devtools_extensions: ^0.0.9
 In `lib/main.dart`, place a `DevToolsExtension` widget at the root of your app:
 ```dart
 import 'package:devtools_extensions/devtools_extensions.dart';
+import 'package:flutter/material.dart';
 
 void main() {
-  runApp(const FooPackageDevToolsExtension());
+  runApp(const FooDevToolsExtension());
 }
 
-class FooPackageDevToolsExtension extends StatelessWidget {
-  const FooPackageDevToolsExtension({super.key});
+class FooDevToolsExtension extends StatelessWidget {
+  const FooDevToolsExtension({super.key});
 
   @override
   Widget build(BuildContext context) {
     return const DevToolsExtension(
-      child: FooDevToolsExtension(),
+      child: Placeholder(),
     );
   }
 }
@@ -159,7 +160,7 @@ file in VS code:
         ...
         {
             "name": "foo_devtools_extension + simulated environment",
-            "program": "foo/extension/foo_devtools_extension/lib/main.dart",
+            "cwd": "packages/foo_devtools_extension",
             "request": "launch",
             "type": "dart",
             "args": [
@@ -183,13 +184,11 @@ To use a real DevTools environment, you will need to perform a series of setup s
 real DevTools environment. Build your flutter web app and copy the built assets from
 `your_extension_web_app/build` to your pub package's `extension/devtools/build` directory.
 
-Use the `build_extension` command from `package:devtools_extensions` to help with this step.
+Use the `build_and_copy` command from `package:devtools_extensions` to help with this step.
 ```sh
-cd your_extension_web_app &&
-flutter pub get &&
-dart run devtools_extensions build_and_copy \
-  --source=. \
-  --dest=path/to/your_pub_package/extension/devtools 
+cd your_extension_web_app;
+flutter pub get;
+dart run devtools_extensions build_and_copy --source=. --dest=../foo/extension/devtools
 ```
 
 2. Prepare and run a test application that depends on your pub package. You'll need to change the
@@ -222,11 +221,9 @@ expected content in the `your_package/extension/devtools/` directory (see the
 2. Use the `build_and_copy` command provided by `package:devtools_extensions` to build
 your extension and copy the output to the `extension/devtools` directory:
 ```sh
-cd your_extension_web_app &&
-flutter pub get &&
-dart run devtools_extensions build_and_copy \
-  --source=. \
-  --dest=path/to/your_pub_package/extension/devtools 
+cd your_extension_web_app;
+flutter pub get;
+dart run devtools_extensions build_and_copy --source=. --dest=../foo/extension/devtools
 ```
 
 Then publish your package.
@@ -253,10 +250,8 @@ script to your repo that looks something like this:
 ```sh
 pushd your_extension_web_app
 
-flutter pub get &&
-dart run devtools_extensions build_and_copy \
-  --source=. \
-  --dest=path/to/your_pub_package/extension/devtools 
+flutter pub get
+dart run devtools_extensions build_and_copy --source=. --dest=../foo/extension/devtools
 
 popd
 

packages/devtools_extensions/bin/_build_and_copy.dart

@@ -56,7 +56,7 @@ class BuildExtensionCommand extends Command {
     _log('Building the extension Flutter web app...');
     await _runProcess(
       processManager,
-      'flutter',
+      Platform.isWindows ? 'flutter.bat' : 'flutter',
       [
         'build',
         'web',
@@ -69,24 +69,25 @@ class BuildExtensionCommand extends Command {
       workingDirectory: source,
     );
 
-    _log('Setting canvaskit permissions...');
-    await _runProcess(
-      processManager,
-      'chmod',
-      [
-        '0755',
-        // Note: using a wildcard `canvaskit.*` throws.
-        'build/web/canvaskit/canvaskit.js',
-        'build/web/canvaskit/canvaskit.wasm',
-      ],
-      workingDirectory: source,
-    );
+    // TODO(kenz): investigate if we need to perform a windows equivalent of
+    // `chmod` or if we even need to perform `chmod` for linux / mac anymore.
+    if (!Platform.isWindows) {
+      _log('Setting canvaskit permissions...');
+      await _runProcess(
+        processManager,
+        'chmod',
+        [
+          '0755',
+          // Note: using a wildcard `canvaskit.*` throws.
+          'build/web/canvaskit/canvaskit.js',
+          'build/web/canvaskit/canvaskit.wasm',
+        ],
+        workingDirectory: source,
+      );
+    }
 
     _log('Copying built output to the extension destination...');
     await _copyBuildToDestination(source: source, dest: destination);
-
-    // Closes stdin for the entire program.
-    await sharedStdIn.terminate();
   }
 
   Future<void> _copyBuildToDestination({

packages/devtools_extensions/bin/devtools_extensions.dart

@@ -9,5 +9,5 @@ void main(List<String> arguments) async {
   final command = BuildExtensionCommand();
   final runner = CommandRunner('devtools_extensions', command.description)
     ..addCommand(BuildExtensionCommand());
-  await runner.run(arguments);
+  await runner.run(arguments).whenComplete(sharedStdIn.terminate);
 }

packages/devtools_extensions/example/foo/.vscode/launch.json

@@ -0,0 +1,37 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "foo_devtools_extension + simulated environment",
+            "cwd": "packages/foo_devtools_extension",
+            "request": "launch",
+            "type": "dart",
+            "args": [
+                "--dart-define=use_simulated_environment=true"
+            ],
+        },
+        {
+            "name": "foo_devtools_extension + simulated environment (profile mode)",
+            "cwd": "packages/foo_devtools_extension",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "profile",
+            "args": [
+                "--dart-define=use_simulated_environment=true"
+            ],
+        },
+        {
+            "name": "foo_devtools_extension + simulated environment (release mode)",
+            "cwd": "packages/foo_devtools_extension",
+            "request": "launch",
+            "type": "dart",
+            "flutterMode": "release",
+            "args": [
+                "--dart-define=use_simulated_environment=true"
+            ],
+        }
+    ]
+}

packages/devtools_extensions/extension_config_spec.md

@@ -3,7 +3,8 @@ The `config.yaml` file for a DevTools extension must follow the format below.
 ## Required fields
 
 - `name` : the package name that this DevTools extension belongs to. The value of this field
-will be used in the extension page title bar.
+will be used in the extension page title bar. This name should contain only lowercase letters
+and underscores (no spaces or special characters like `'` or `.`).
 - `issueTracker`: the url for the extension's issue tracker. When a user clicks the “Report an 
 issue” link in the DevTools UI, they will be directed to this url.
 - `version`: the version of the DevTools extension. This version number should evolve over time