[DevTools] Emit new event when DevTools connects in standalone app (#…

…22848)

packages/react-devtools-core/src/standalone.js

@@ -41,13 +41,17 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 
 installHook(window);
 
-export type StatusListener = (message: string) => void;
+export type StatusTypes = 'server-connected' | 'devtools-connected' | 'error';
+export type StatusListener = (message: string, status: StatusTypes) => void;
 export type OnDisconnectedCallback = () => void;
 
 let node: HTMLElement = ((null: any): HTMLElement);
 let nodeWaitingToConnectHTML: string = '';
 let projectRoots: Array<string> = [];
-let statusListener: StatusListener = (message: string) => {};
+let statusListener: StatusListener = (
+  message: string,
+  status?: StatusTypes,
+) => {};
 let disconnectedCallback: OnDisconnectedCallback = () => {};
 
 // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
@@ -260,6 +264,7 @@ function initialize(socket: WebSocket) {
   });
 
   log('Connected');
+  statusListener('DevTools initialized.', 'devtools-connected');
   reload();
 }
 
@@ -372,12 +377,15 @@ function startServer(
 
   httpServer.on('error', event => {
     onError(event);
-    statusListener('Failed to start the server.');
+    statusListener('Failed to start the server.', 'error');
     startServerTimeoutID = setTimeout(() => startServer(port), 1000);
   });
 
   httpServer.listen(port, () => {
-    statusListener('The server is listening on the port ' + port + '.');
+    statusListener(
+      'The server is listening on the port ' + port + '.',
+      'server-connected',
+    );
   });
 
   return {