[DevTools] fix: dedupe file fetch requests and define a timeout (facebook#34566)

If there is a large owner stack, we could potentially spam multiple
fetch requests for the same source map. This adds a simple deduplication
logic, based on URL.

Also, this adds a timeout of 60 seconds to all fetch requests initiated
by fileFetcher content script.

Author: hoxyq

packages/react-devtools-extensions/src/contentScripts/fileFetcher.js

@@ -23,7 +23,7 @@ function fetchResource(url) {
     });
   };
 
-  fetch(url, {cache: 'force-cache'}).then(
+  fetch(url, {cache: 'force-cache', signal: AbortSignal.timeout(60000)}).then(
     response => {
       if (response.ok) {
         response

packages/react-devtools-extensions/src/main/fetchFileWithCaching.js

@@ -78,6 +78,18 @@ const fetchFromNetworkCache = (url, resolve, reject) => {
   });
 };
 
+const pendingFetchRequests = new Set();
+function pendingFetchRequestsCleanup({payload, source}) {
+  if (source === 'react-devtools-background') {
+    switch (payload?.type) {
+      case 'fetch-file-with-cache-complete':
+      case 'fetch-file-with-cache-error':
+        pendingFetchRequests.delete(payload.url);
+    }
+  }
+}
+chrome.runtime.onMessage.addListener(pendingFetchRequestsCleanup);
+
 const fetchFromPage = async (url, resolve, reject) => {
   debugLog('[main] fetchFromPage()', url);
 
@@ -97,7 +109,11 @@ const fetchFromPage = async (url, resolve, reject) => {
   }
 
   chrome.runtime.onMessage.addListener(onPortMessage);
+  if (pendingFetchRequests.has(url)) {
+    return;
+  }
 
+  pendingFetchRequests.add(url);
   chrome.runtime.sendMessage({
     source: 'devtools-page',
     payload: {