fix(dev): properly pass HMR HTML reporter message when React devtools installed (#35657)

packages/html-reporter/src/index.tsx

@@ -61,12 +61,14 @@ class ZipReport implements LoadedReport {
       if (window.playwrightReportBase64)
         return resolve(window.playwrightReportBase64);
       if (window.opener) {
-        window.addEventListener('message', event => {
+        const listener = (event: MessageEvent) => {
           if (event.source === window.opener) {
             localStorage.setItem(kPlaywrightReportStorageForHMR, event.data);
             resolve(event.data);
+            window.removeEventListener('message', listener);
           }
-        }, { once: true });
+        };
+        window.addEventListener('message', listener);
         window.opener.postMessage('ready', '*');
       } else {
         const oldReport = localStorage.getItem(kPlaywrightReportStorageForHMR);

packages/playwright/src/reporters/html.ts

@@ -324,12 +324,15 @@ class HtmlBuilder {
       async function redirect() {
         const hmrURL = new URL('http://localhost:44224'); // dev server, port is harcoded in build.js
         const popup = window.open(hmrURL);
-        window.addEventListener('message', evt => {
+        const listener = (evt: MessageEvent) => {
           if (evt.source === popup && evt.data === 'ready') {
             popup!.postMessage((window as any).playwrightReportBase64, hmrURL.origin);
+            window.removeEventListener('message', listener);
+            // This is generally not allowed
             window.close();
           }
-        }, { once: true });
+        };
+        window.addEventListener('message', listener);
       }
 
       fs.appendFileSync(redirectFile, `<script>(${redirect.toString()})()</script>`);