[MV3 Debug Extension] Support Bolt workflow (#1983)

Author: elliette

dwds/CHANGELOG.md

@@ -13,8 +13,11 @@
 - Move shared test-only code to a new `test_common` package.
 
 **Breaking changes**
+
 - Require `sdkConfigurationProvider` in `ExpressionCompilerService`
   constructor.
+- Change DWDS parameter `isFlutterApp` from type `bool?` to type
+  `Future<bool> Function()?`.
 
 ## 17.0.0
 
@@ -40,6 +43,7 @@
 - Fix expression compiler throwing when weak SDK summary is not found.
 
 **Breaking changes**
+
 - Include an optional param to `Dwds.start` to indicate whether it is running
   internally or externally.
 - Include an optional param to `Dwds.start` to indicate whether it a Flutter

dwds/debug_extension_mv3/web/debug_session.dart

@@ -246,6 +246,10 @@ Future<void> _maybeConnectToDwds(int tabId, Object? params) async {
   if (debugInfo == null) return;
   if (contextOrigin != debugInfo.appOrigin) return;
   final contextId = context['id'] as int;
+  // Find the correct frame to connect to (this is necessary if the Dart app is
+  // embedded in an IFRAME):
+  final isDartFrame = await _isDartFrame(tabId: tabId, contextId: contextId);
+  if (!isDartFrame) return;
   final connected = await _connectToDwds(
     dartAppContextId: contextId,
     dartAppTabId: tabId,
@@ -258,6 +262,33 @@ Future<void> _maybeConnectToDwds(int tabId, Object? params) async {
   }
 }
 
+Future<bool> _isDartFrame({required int tabId, required int contextId}) {
+  final completer = Completer<bool>();
+  chrome.debugger.sendCommand(
+      Debuggee(tabId: tabId),
+      'Runtime.evaluate',
+      _InjectedParams(
+          expression:
+              '[window.\$dartAppId, window.\$dartAppInstanceId, window.\$dwdsVersion]',
+          returnByValue: true,
+          contextId: contextId), allowInterop((dynamic response) {
+    final evalResponse = response as _EvalResponse;
+    final value = evalResponse.result.value;
+    final appId = value?[0];
+    final instanceId = value?[1];
+    final dwdsVersion = value?[2];
+    final frameIdentifier = 'Frame at tab $tabId with context $contextId';
+    if (appId == null || instanceId == null) {
+      debugWarn('$frameIdentifier is not a Dart frame.');
+      completer.complete(false);
+    } else {
+      debugLog('Dart $frameIdentifier is using DWDS $dwdsVersion.');
+      completer.complete(true);
+    }
+  }));
+  return completer.future;
+}
+
 Future<bool> _connectToDwds({
   required int dartAppContextId,
   required int dartAppTabId,
@@ -689,3 +720,25 @@ class _DebugSession {
     }
   }
 }
+
+@JS()
+@anonymous
+class _EvalResponse {
+  external _EvalResult get result;
+}
+
+@JS()
+@anonymous
+class _EvalResult {
+  external List<String?>? get value;
+}
+
+@JS()
+@anonymous
+class _InjectedParams {
+  external String get expresion;
+  external bool get returnByValue;
+  external int get contextId;
+  external factory _InjectedParams(
+      {String? expression, bool? returnByValue, int? contextId});
+}

dwds/lib/dart_web_debug_service.dart

@@ -84,9 +84,10 @@ class Dwds {
     bool launchDevToolsInNewWindow = true,
     bool emitDebugEvents = true,
     bool isInternalBuild = false,
-    bool isFlutterApp = false,
+    Future<bool> Function()? isFlutterApp,
   }) async {
     globalLoadStrategy = loadStrategy;
+    isFlutterApp ??= () => Future.value(true);
 
     DevTools? devTools;
     Future<String>? extensionUri;

dwds/lib/src/handlers/injector.dart

@@ -36,16 +36,16 @@ class DwdsInjector {
   final bool _useSseForInjectedClient;
   final bool _emitDebugEvents;
   final bool _isInternalBuild;
-  final bool _isFlutterApp;
+  final Future<bool> Function() _isFlutterApp;
 
   DwdsInjector(
     this._loadStrategy, {
+    required bool enableDevtoolsLaunch,
+    required bool useSseForInjectedClient,
+    required bool emitDebugEvents,
+    required bool isInternalBuild,
+    required Future<bool> Function() isFlutterApp,
     Future<String>? extensionUri,
-    bool enableDevtoolsLaunch = false,
-    bool useSseForInjectedClient = true,
-    bool emitDebugEvents = true,
-    bool isInternalBuild = false,
-    bool isFlutterApp = false,
   })  : _extensionUri = extensionUri,
         _enableDevtoolsLaunch = enableDevtoolsLaunch,
         _useSseForInjectedClient = useSseForInjectedClient,
@@ -117,7 +117,7 @@ class DwdsInjector {
                 _enableDevtoolsLaunch,
                 _emitDebugEvents,
                 _isInternalBuild,
-                _isFlutterApp,
+                await _isFlutterApp(),
               );
               body += await _loadStrategy.bootstrapFor(entrypoint);
               _logger.info('Injected debugging metadata for '

dwds/test/fixtures/server.dart

@@ -116,7 +116,7 @@ class TestServer {
         urlEncoder: urlEncoder,
         expressionCompiler: expressionCompiler,
         isInternalBuild: isInternalBuild,
-        isFlutterApp: isFlutterApp,
+        isFlutterApp: () => Future.value(isFlutterApp),
         devtoolsLauncher: serveDevTools
             ? (hostname) async {
                 final server = await DevToolsServer().serveDevTools(

dwds/test/handlers/injector_test.dart

@@ -24,7 +24,14 @@ void main() {
   group('InjectedHandlerWithoutExtension', () {
     late DwdsInjector injector;
     setUp(() async {
-      injector = DwdsInjector(loadStrategy);
+      injector = DwdsInjector(
+        loadStrategy,
+        useSseForInjectedClient: true,
+        enableDevtoolsLaunch: true,
+        emitDebugEvents: true,
+        isInternalBuild: false,
+        isFlutterApp: () => Future.value(true),
+      );
       final pipeline = const Pipeline().addMiddleware(injector.middleware);
       server = await shelf_io.serve(pipeline.addHandler((request) {
         if (request.url.path.endsWith(bootstrapJsExtension)) {
@@ -223,7 +230,14 @@ void main() {
   group('InjectedHandlerWithoutExtension using WebSockets', () {
     late DwdsInjector injector;
     setUp(() async {
-      injector = DwdsInjector(loadStrategy, useSseForInjectedClient: false);
+      injector = DwdsInjector(
+        loadStrategy,
+        useSseForInjectedClient: false,
+        enableDevtoolsLaunch: true,
+        emitDebugEvents: true,
+        isInternalBuild: false,
+        isFlutterApp: () => Future.value(true),
+      );
       final pipeline = const Pipeline().addMiddleware(injector.middleware);
       server = await shelf_io.serve(pipeline.addHandler((request) {
         if (request.url.path.endsWith(bootstrapJsExtension)) {
@@ -269,9 +283,15 @@ void main() {
   group('InjectedHandlerWithExtension', () {
     setUp(() async {
       final extensionUri = 'http://localhost:4000';
-      final pipeline = const Pipeline().addMiddleware(
-          DwdsInjector(loadStrategy, extensionUri: Future.value(extensionUri))
-              .middleware);
+      final pipeline = const Pipeline().addMiddleware(DwdsInjector(
+        loadStrategy,
+        extensionUri: Future.value(extensionUri),
+        useSseForInjectedClient: true,
+        enableDevtoolsLaunch: true,
+        emitDebugEvents: true,
+        isInternalBuild: false,
+        isFlutterApp: () => Future.value(true),
+      ).middleware);
       server = await shelf_io.serve(pipeline.addHandler((request) {
         return Response.ok(
             '$entrypointExtensionMarker\n'

dwds/test/puppeteer/extension_test.dart

@@ -650,9 +650,12 @@ void main() async {
               expect(iframeTarget, isNotNull);
             });
 
-            // TODO(elliette): Pull TestServer out of TestContext, so we can add
-            // a test case for starting another test app, loading that app in
-            // the tab we were debugging, and be able to reconnect to that one.
+            // TODO(elliette): Pull TestServer out of TestContext, so we can add:
+            // 1. a test case for starting another test app, loading that app in
+            // the tab we were debugging, and being able to reconnect to that
+            // one.
+            // 2. a test case for embedding a Dart app in a tab with the same
+            // origin, and being able to connect to the embedded Dart app.
             // See https://github.com/dart-lang/webdev/issues/1779
 
             test('The Dart DevTools IFRAME has the correct query parameters',