refactor(devtools): slightly optimize extension initialization messaging

- Stop indefinite `detectAngular` messages after the backend is installed.
- Do not attempt handshake with the BE (from content scripts) until it's installed.

devtools/projects/protocol/src/lib/messages.ts

@@ -447,6 +447,7 @@ export interface Events {
   enableFrameConnection: (frameId: number, tabId: number) => void;
   frameConnected: (frameId: number) => void;
   detectAngular: (detectionResult: AngularDetection) => void;
+  backendInstalled: () => void;
   backendReady: () => void;
 
   log: (logEvent: {message: string; level: 'log' | 'warn' | 'debug' | 'error'}) => void;

devtools/projects/shell-browser/src/app/content-script.ts

@@ -13,7 +13,6 @@ import {BACKEND_URI, CONTENT_SCRIPT_URI, DETECT_ANGULAR_SCRIPT_URI} from './comm
 import {SamePageMessageBus} from './same-page-message-bus';
 
 let backgroundDisconnected = false;
-let backendInstalled = false;
 let backendInitialized = false;
 
 const port = chrome.runtime.connect({
@@ -21,13 +20,28 @@ const port = chrome.runtime.connect({
 });
 
 const handleDisconnect = (): void => {
-  // console.log('Background disconnected', new Date());
   localMessageBus.emit('shutdown');
   localMessageBus.destroy();
   chromeMessageBus.destroy();
   backgroundDisconnected = true;
 };
 
+function attemptBackendHandshake() {
+  if (!backendInitialized) {
+    // tslint:disable-next-line:no-console
+    console.log('Attempting handshake with backend', new Date());
+
+    const retry = () => {
+      if (backendInitialized || backgroundDisconnected) {
+        return;
+      }
+      handshakeWithBackend();
+      setTimeout(retry, 500);
+    };
+    retry();
+  }
+}
+
 port.onDisconnect.addListener(handleDisconnect);
 
 const detectAngularMessageBus = new SamePageMessageBus(
@@ -36,11 +50,6 @@ const detectAngularMessageBus = new SamePageMessageBus(
 );
 
 detectAngularMessageBus.on('detectAngular', (detectionResult) => {
-  // only install backend once
-  if (backendInstalled) {
-    return;
-  }
-
   if (detectionResult.isAngularDevTools !== true) {
     return;
   }
@@ -61,7 +70,10 @@ detectAngularMessageBus.on('detectAngular', (detectionResult) => {
   script.src = chrome.runtime.getURL('app/backend_bundle.js');
   document.documentElement.appendChild(script);
   document.documentElement.removeChild(script);
-  backendInstalled = true;
+
+  detectAngularMessageBus.emit('backendInstalled');
+
+  attemptBackendHandshake();
 });
 
 const localMessageBus = new SamePageMessageBus(CONTENT_SCRIPT_URI, BACKEND_URI);
@@ -71,28 +83,19 @@ const handshakeWithBackend = (): void => {
   localMessageBus.emit('handshake');
 };
 
+// Relaying messages from FE to BE
 chromeMessageBus.onAny((topic, args) => {
   localMessageBus.emit(topic, args);
 });
 
+// Relaying messages from BE to FE
 localMessageBus.onAny((topic, args) => {
-  backendInitialized = true;
   chromeMessageBus.emit(topic, args);
 });
 
-if (!backendInitialized) {
-  // tslint:disable-next-line:no-console
-  console.log('Attempting initialization', new Date());
-
-  const retry = () => {
-    if (backendInitialized || backgroundDisconnected) {
-      return;
-    }
-    handshakeWithBackend();
-    setTimeout(retry, 500);
-  };
-  retry();
-}
+localMessageBus.on('backendReady', () => {
+  backendInitialized = true;
+});
 
 const proxyEventFromWindowToDevToolsExtension = (event: MessageEvent) => {
   if (event.source === window && event.data && event.data.__NG_DEVTOOLS_EVENT__) {

devtools/projects/shell-browser/src/app/detect-angular-for-extension-icon.ts

@@ -22,6 +22,8 @@ const detectAngularMessageBus = new SamePageMessageBus(
   CONTENT_SCRIPT_URI,
 );
 
+let detectAngularTimeout: ReturnType<typeof setTimeout>;
+
 function detectAngular(win: Window): void {
   const isAngular = appIsAngular();
   const isSupportedAngularVersion = appIsSupportedAngularVersion();
@@ -50,7 +52,11 @@ function detectAngular(win: Window): void {
     },
   ]);
 
-  setTimeout(() => detectAngular(win), 1000);
+  detectAngularTimeout = setTimeout(() => detectAngular(win), 1000);
 }
 
+detectAngularMessageBus.on('backendInstalled', () => {
+  clearTimeout(detectAngularTimeout);
+});
+
 detectAngular(window);