From 96fd2fb726130d2980e6d450f5d9e468f922b8b9 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Tue, 18 Apr 2023 20:39:22 -0400
Subject: [PATCH] (patch)[DevTools] bug fix: backend injection logic not
 working for undocked devtools window (#26665)

bugfix for #26492

This bug would cause users unable to use the devtools (component tree
empty).

The else-if logic is broken when user switch to undocked devtools mode
(separate window) because `sender.tab` would exist in that case.
<img width="314" alt="image"
src="https://user-images.githubusercontent.com/1001890/232930094-05a74445-9189-4d50-baf1-a0360b29ef7e.png">

Tested on Chrome with a local build
---
 packages/react-devtools-extensions/src/background.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 89d87724ddac2..8861b63f5894f 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -172,6 +172,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 
 chrome.runtime.onMessage.addListener((request, sender) => {
   const tab = sender.tab;
+  // sender.tab.id from content script points to the tab that injected the content script
   if (tab) {
     const id = tab.id;
     // This is sent from the hook content script.
@@ -214,7 +215,10 @@ chrome.runtime.onMessage.addListener((request, sender) => {
           break;
       }
     }
-  } else if (request.payload?.tabId) {
+  }
+  // sender.tab.id from devtools page may not exist, or point to the undocked devtools window
+  // so we use the payload to get the tab id
+  if (request.payload?.tabId) {
     const tabId = request.payload?.tabId;
     // This is sent from the devtools page when it is ready for injecting the backend
     if (request.payload.type === 'react-devtools-inject-backend-manager') {