[MV3 Debug Extension] Extension sets the ide query parameter for the DevTools URI (#1943)

Author: elliette

dwds/debug_extension_mv3/web/debug_session.dart

@@ -267,7 +267,8 @@ Future<bool> _connectToDwds({
     ..instanceId = debugInfo.appInstanceId
     ..contextId = dartAppContextId
     ..tabUrl = tabUrl
-    ..uriOnly = true));
+    ..uriOnly = true
+    ..isMv3Extension = true));
   return true;
 }
 
@@ -358,7 +359,12 @@ void _openDevTools(String devToolsUri, {required int dartAppTabId}) async {
     final devToolsOpener = await fetchStorageObject<DevToolsOpener>(
         type: StorageObject.devToolsOpener);
     final devToolsTab = await createTab(
-      devToolsUri,
+      addQueryParameters(
+        devToolsUri,
+        queryParameters: {
+          'ide': 'DebugExtension',
+        },
+      ),
       inNewWindow: devToolsOpener?.newWindow ?? false,
     );
     debugSession.devToolsTabId = devToolsTab.id;

dwds/debug_extension_mv3/web/panel.dart

@@ -18,9 +18,10 @@ import 'debug_session.dart';
 import 'logger.dart';
 import 'messaging.dart';
 import 'storage.dart';
+import 'utils.dart';
 
 bool connecting = false;
-String devToolsBackgroundColor = darkColor;
+String backgroundColor = darkColor;
 bool isDartApp = true;
 
 const bugLinkId = 'bugLink';
@@ -148,10 +149,10 @@ void _setColorThemeToMatchChromeDevTools() async {
   final chromeTheme = chrome.devtools.panels.themeName;
   final panelBody = document.getElementById(panelBodyId);
   if (chromeTheme == 'dark') {
-    devToolsBackgroundColor = darkColor;
+    backgroundColor = darkColor;
     _updateColorThemeForElement(panelBody, isDarkTheme: true);
   } else {
-    devToolsBackgroundColor = lightColor;
+    backgroundColor = lightColor;
     _updateColorThemeForElement(panelBody, isDarkTheme: false);
   }
 }
@@ -246,10 +247,16 @@ void _injectDevToolsIframe(String devToolsUri) {
   final panelBody = document.getElementById(panelBodyId);
   final panelType = panelBody?.getAttribute(panelAttribute) ?? 'debugger';
   final iframe = document.createElement('iframe');
-  iframe.setAttribute(
-    'src',
-    '$devToolsUri&embed=true&page=$panelType&backgroundColor=$devToolsBackgroundColor',
+  final iframeSrc = addQueryParameters(
+    devToolsUri,
+    queryParameters: {
+      'ide': 'ChromeDevTools',
+      'embed': 'true',
+      'page': panelType,
+      'backgroundColor': backgroundColor,
+    },
   );
+  iframe.setAttribute('src', iframeSrc);
   _hideWarningBanner();
   _updateElementVisibility(landingPageId, visible: false);
   _updateElementVisibility(loadingSpinnerId, visible: false);

dwds/debug_extension_mv3/web/utils.dart

@@ -47,3 +47,15 @@ bool isDevMode() {
   final extensionName = getProperty(extensionManifest, 'name') ?? '';
   return extensionName.contains('DEV');
 }
+
+String addQueryParameters(
+  String uri, {
+  required Map<String, String> queryParameters,
+}) {
+  final originalUri = Uri.parse(uri);
+  final newUri = originalUri.replace(queryParameters: {
+    ...originalUri.queryParameters,
+    ...queryParameters,
+  });
+  return newUri.toString();
+}

dwds/lib/data/devtools_request.dart

@@ -40,11 +40,18 @@ abstract class DevToolsRequest
   /// correct `dartAppInstanceId` automatically.
   String? get tabUrl;
 
-  /// If this is a uri only request.
+  /// Designates this as a request to send back the DevTools URI instead of
+  /// opening DevTools in a new tab or window.
   ///
-  /// Only available on requests coming from dart debug extension.
-  /// If true, DevTools should open in an embedded Chrome DevTools tab.
+  /// Only available on requests coming from the Dart Debug Extension. Is `null`
+  /// for local debug service.
   bool? get uriOnly;
+
+  /// Whether or not the MV3 Dart Debug Extension sent the request. Is `null`
+  /// for local debug service.
+  ///
+  /// Only available on requests coming from the Dart Debug Extension.
+  bool? get isMv3Extension;
 }
 
 /// A response to a [DevToolsRequest].

dwds/lib/data/devtools_request.g.dart

@@ -546,28 +546,40 @@ class DevHandler {
         extensionDebugConnections.add(DebugConnection(appServices));
         _servicesByAppId[appId] = appServices;
       }
+      // If we don't have a DevTools instance, then are connecting to an IDE.
+      // Therefore return early instead of opening DevTools:
+      if (_devTools == null) return;
+
       final encodedUri = await appServices.debugService.encodedUri;
 
       appServices.dwdsStats.updateLoadTime(
           debuggerStart: debuggerStart, devToolsStart: DateTime.now());
 
-      if (_devTools != null) {
-        // If we only want the URI, this means we are embedding Dart DevTools in
-        // Chrome DevTools. Therefore return early.
-        if (devToolsRequest.uriOnly ?? false) {
-          final devToolsUri = _constructDevToolsUri(
-            encodedUri,
-            ideQueryParam: 'ChromeDevTools',
-          );
-          extensionDebugger.sendEvent('dwds.devtoolsUri', devToolsUri);
-          return;
-        }
-        final devToolsUri = _constructDevToolsUri(
+      // TODO(elliette): Remove handling requests from the MV2 extension after
+      // MV3 release.
+      // If we only want the URI, this means the Dart Debug Extension should
+      // handle how to open it. Therefore return early before opening a new
+      // tab or window:
+      if (devToolsRequest.uriOnly ?? false) {
+        // The MV3 extension is responsible for adding the IDE query
+        // parameter to the DevTools URI.
+        final devToolsUri = (devToolsRequest.isMv3Extension ?? false)
+            ? _constructDevToolsUri(encodedUri)
+            : _constructDevToolsUri(
+                encodedUri,
+                ideQueryParam: 'ChromeDevTools',
+              );
+        return extensionDebugger.sendEvent('dwds.devtoolsUri', devToolsUri);
+      }
+
+      // Otherwise, launch DevTools in a new tab / window:
+      await _launchDevTools(
+        extensionDebugger,
+        _constructDevToolsUri(
           encodedUri,
           ideQueryParam: 'DebugExtension',
-        );
-        await _launchDevTools(extensionDebugger, devToolsUri);
-      }
+        ),
+      );
     });
   }