Better VSCode detection

src/Explorer/Explorer.tsx

@@ -31,6 +31,7 @@ import { readDatabases } from "../Common/dataAccess/readDatabases";
 import * as DataModels from "../Contracts/DataModels";
 import { ContainerConnectionInfo, IPhoenixServiceInfo, IProvisionData, IResponse } from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
+import { UploadDetailsRecord } from "../Contracts/ViewModels";
 import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
 import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
@@ -71,7 +72,6 @@ import { ResourceTreeAdapter } from "./Tree/ResourceTreeAdapter";
 import StoredProcedure from "./Tree/StoredProcedure";
 import { useDatabases } from "./useDatabases";
 import { useSelectedNode } from "./useSelectedNode";
-import { UploadDetailsRecord } from "../Contracts/ViewModels";
 
 BindingHandlersRegisterer.registerBindingHandlers();
 
@@ -292,6 +292,69 @@ export default class Explorer {
     const baseUrl = `vscode://ms-azuretools.vscode-cosmosdb?resourceId=${resourceId}`;
     const vscodeUrl = activeTab ? `${baseUrl}&database=${database}&container=${container}` : baseUrl;
 
+    // Detect if VS Code is installed
+    const detectVSCode = () => {
+      return new Promise<boolean>((resolve) => {
+        // Create hidden iframe to detect protocol handler
+        const iframe = document.createElement('iframe');
+        iframe.style.display = 'none';
+        document.body.appendChild(iframe);
+        
+        // Set timeout to handle case where protocol isn't supported
+        const timeoutId = setTimeout(() => {
+          // Clean up iframe
+          if (document.body.contains(iframe)) {
+            document.body.removeChild(iframe);
+          }
+          // Could not open VS Code within timeout period
+          resolve(false);
+        }, 1000);
+        
+        // Try to navigate to VS Code protocol
+        try {
+          // Listen for blur event which might indicate app was launched
+          window.addEventListener('blur', function onBlur() {
+            clearTimeout(timeoutId);
+            window.removeEventListener('blur', onBlur);
+            if (document.body.contains(iframe)) {
+              document.body.removeChild(iframe);
+            }
+            // Window lost focus, likely because VS Code opened
+            resolve(true);
+          }, { once: true });
+          
+          // Navigate iframe to the VSCode URL
+          iframe.src = vscodeUrl;
+        } catch (error) {
+          clearTimeout(timeoutId);
+          if (document.body.contains(iframe)) {
+            document.body.removeChild(iframe);
+          }
+          resolve(false);
+        }
+      });
+    };
+    
+    // Try to open VS Code directly first
+    detectVSCode().then((isVSCodeInstalled) => {
+      if (isVSCodeInstalled) {
+        try {
+          // VS Code is likely installed, open URL directly
+          window.location.href = vscodeUrl;
+          TelemetryProcessor.traceStart(Action.OpenVSCode);
+        } catch (error) {
+          logConsoleError(`Failed to open VS Code: ${getErrorMessage(error)}`);
+          // If opening fails, show the dialog as fallback
+          showVSCodeDialog();
+        }
+      } else {
+        // VS Code not detected, show installation dialog
+        showVSCodeDialog();
+      }
+    });
+    
+    // Helper function to show the VS Code dialog
+    const showVSCodeDialog = () => {
       const openVSCodeDialogProps: DialogProps = {
         linkProps: {
           linkText: "Download Visual Studio Code",
@@ -318,6 +381,7 @@ export default class Explorer {
         },
       };
       useDialog.getState().openDialog(openVSCodeDialogProps);
+    };
   }
 
   public async openCESCVAFeedbackBlade(): Promise<void> {