Adjustments to VSCode <-> DevTools communication

.github/workflows/E2E.yml

@@ -16,7 +16,7 @@ jobs:
           - version: "stable"
             os: "windows-latest"
     steps:
-      - run: sudo apt update && sudo apt install -y libasound2 libgbm1 libgtk-3-0 libnss3 xvfb expect
+      - run: sudo apt update && sudo apt install -y libasound2t64 libgbm1 libgtk-3-0 libnss3 xvfb expect
         if: runner.os == 'Linux'
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4

package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.11.8",
-    "@apollo/client-devtools-vscode": "^4.18.17",
+    "@apollo/client-devtools-vscode": "https://pkg.pr.new/apollographql/apollo-client-devtools/@apollo/client-devtools-vscode@a9505f7",
     "@apollo/subgraph": "2.9.1",
     "@graphql-tools/schema": "10.0.6",
     "@wry/equality": "0.5.7",

src/devtools/DevToolsViewProvider.ts

@@ -1,5 +1,34 @@
 import * as vscode from "vscode";
-import { devtoolsEvents } from "./server";
+import { devtoolsEvents, sendToDevTools, serverState } from "./server";
+
+type ActorMessage = { type: "actor"; message: unknown };
+
+export function isActorMessage(message: any): message is ActorMessage {
+  return message && message.type === "actor";
+}
+
+type DevToolsOpenCommandMessage = {
+  type: "vscode:executeCommand";
+  command: string;
+  arguments?: unknown[];
+};
+
+export function isDevToolsExecuteCommandMessage(
+  message: any,
+): message is DevToolsOpenCommandMessage {
+  return message && message.type === "vscode:executeCommand";
+}
+
+type DevToolsOpenExternalMessage = {
+  type: "vscode:openExternal";
+  uri: string;
+};
+
+export function isDevToolsOpenExternalMessage(
+  message: any,
+): message is DevToolsOpenExternalMessage {
+  return message && message.type === "vscode:openExternal";
+}
 
 export class DevToolsViewProvider implements vscode.WebviewViewProvider {
   public static readonly viewType = "vscode-apollo-client-devtools";
@@ -20,16 +49,40 @@ export class DevToolsViewProvider implements vscode.WebviewViewProvider {
       panel.webview,
       this._extensionUri,
     );
-
-    panel.webview.onDidReceiveMessage((data) => {
-      devtoolsEvents.emit("fromDevTools", data);
-    });
+    const panelDisposables: vscode.Disposable[] = [];
+    panel.webview.onDidReceiveMessage(
+      (data) => {
+        if (data.source === "apollo-client-devtools") {
+          devtoolsEvents.emit("fromDevTools", data);
+        }
+        if (data.source === "vscode-panel") {
+          if (data.type === "mounted") {
+            sendToDevTools({
+              type: "initializePanel",
+              initialContext: {
+                port:
+                  serverState?.port ||
+                  vscode.workspace
+                    .getConfiguration("apollographql")
+                    .get("devTools.serverPort", 0),
+                listening: !!serverState?.port,
+              },
+            });
+          }
+        }
+      },
+      this,
+      panelDisposables,
+    );
     function forwardToDevTools(data: unknown) {
       panel.webview.postMessage(data);
     }
     devtoolsEvents.addListener("toDevTools", forwardToDevTools);
     panel.onDidDispose(() => {
       devtoolsEvents.removeListener("toDevTools", forwardToDevTools);
+      for (const disposable of panelDisposables) {
+        disposable.dispose();
+      }
     });
   }
 
@@ -107,11 +160,9 @@ export class DevToolsViewProvider implements vscode.WebviewViewProvider {
     </script>
     <script nonce="${nonce}" src="${scriptUri}"></script>
     <script nonce="${nonce}">
-      window.originalPostMessage({
-        id: 123,
-        source: "apollo-client-devtools",
-        type: "actor",
-        message: { type: "initializePanel" },
+      window.postMessage({
+        source: "vscode-panel",
+        type: "mounted",
       });
     </script>
   </body>

src/devtools/server.ts

@@ -15,8 +15,51 @@ devtoolsEvents.addListener("fromDevTools", (msg) => {
   Debug.info("DevTools > WS: " + JSON.stringify(msg));
 });
 
-export function startServer(port: number): Disposable {
+let id = 1;
+
+export function sendToDevTools(message: unknown) {
+  devtoolsEvents.emit("toDevTools", {
+    id: `vscode-${id++}`,
+    source: "apollo-client-devtools",
+    type: "actor",
+    message,
+  });
+}
+
+export let serverState:
+  | { port: false | number; disposable: Disposable }
+  | undefined = undefined;
+
+export function startServer(port: number) {
+  const state = {
+    port: false as false | number,
+    disposable: new Disposable(() => {
+      if (wss) {
+        wss.close();
+        wss = null;
+      }
+      if (serverState === state) {
+        serverState = undefined;
+      }
+      sendToDevTools({ type: "port.changed", port, listening: false });
+    }),
+  };
+
+  if (serverState?.port === port) {
+    // nothing to do
+    return;
+  }
+  // changing port, stop the old server
+  serverState?.disposable.dispose();
+  serverState = state;
   let wss: WebSocketServer | null = new WebSocketServer({ port });
+  wss.on("listening", () => {
+    state.port = port;
+    sendToDevTools({ type: "port.changed", port, listening: true });
+  });
+  wss.on("close", () => {
+    state.disposable.dispose();
+  });
   runServer(wss, {
     addListener: (listener) => {
       devtoolsEvents.addListener("fromDevTools", listener);
@@ -28,9 +71,4 @@ export function startServer(port: number): Disposable {
       devtoolsEvents.emit("toDevTools", message);
     },
   });
-
-  return new Disposable(() => {
-    wss?.close();
-    wss = null;
-  });
 }

src/extension.ts

@@ -8,10 +8,10 @@ import {
   DecorationOptions,
   commands,
   QuickPickItem,
-  Disposable,
   OutputChannel,
   MarkdownString,
   Range,
+  env,
 } from "vscode";
 import StatusBar from "./statusBar";
 import { getLanguageServerClient } from "./languageServerClient";
@@ -27,8 +27,13 @@ import {
   printStatsToClientOutputChannel,
 } from "./utils";
 import { Debug } from "./debug";
-import { DevToolsViewProvider } from "./devtools/DevToolsViewProvider";
-import { startServer } from "./devtools/server";
+import {
+  DevToolsViewProvider,
+  isActorMessage,
+  isDevToolsExecuteCommandMessage,
+  isDevToolsOpenExternalMessage,
+} from "./devtools/DevToolsViewProvider";
+import { devtoolsEvents, serverState, startServer } from "./devtools/server";
 
 const { version } = require("../package.json");
 
@@ -346,21 +351,46 @@ export async function activate(
   context.subscriptions.push(
     window.registerWebviewViewProvider(DevToolsViewProvider.viewType, provider),
   );
-  let devtoolServer: Disposable | null = null;
+
+  function devToolsEventListener(event: unknown) {
+    if (!isActorMessage(event)) return;
+    const message = event.message;
+    if (isDevToolsExecuteCommandMessage(message)) {
+      commands.executeCommand(message.command, ...(message.arguments || []));
+    }
+    if (isDevToolsOpenExternalMessage(message)) {
+      env.openExternal(
+        // if we `Uri.parse` here, we end up with something that somehow double-encodes some things like `#`
+        // interestingly enough, the implementation of `openExternal` also allows for strings to be passed in
+        // directly, and that works - so we just pass in the string directly
+        message.uri as any as Uri,
+      );
+    }
+  }
+  devtoolsEvents.addListener("fromDevTools", devToolsEventListener);
+  context.subscriptions.push({
+    dispose: () =>
+      devtoolsEvents.removeListener("fromDevTools", devToolsEventListener),
+  });
+
   context.subscriptions.push(
     commands.registerCommand("apollographql/startDevToolsServer", () => {
       const port = workspace
         .getConfiguration("apollographql")
         .get("devTools.serverPort", 0);
-      if (!devtoolServer && port) {
-        context.subscriptions.push((devtoolServer = startServer(port)));
-      }
+      startServer(port);
     }),
   );
+  context.subscriptions.push({
+    dispose() {
+      if (serverState) {
+        serverState.disposable.dispose();
+      }
+    },
+  });
   context.subscriptions.push(
     commands.registerCommand("apollographql/stopDevToolsServer", () => {
-      devtoolServer?.dispose();
-      devtoolServer = null;
+      serverState?.disposable.dispose();
     }),
   );