DevTools: Handle restricted browser pages properly like new tab page,…

… extensions page etc(only chrome and edge for now) (#20023)

packages/react-devtools-extensions/popups/deadcode.html

@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 460px;
     min-height: 133px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }

packages/react-devtools-extensions/popups/development.html

@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 460px;
     min-height: 101px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }

packages/react-devtools-extensions/popups/disabled.html

@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 410px;
     min-height: 33px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }

packages/react-devtools-extensions/popups/outdated.html

@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 460px;
     min-height: 117px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }

packages/react-devtools-extensions/popups/production.html

@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 460px;
     min-height: 39px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }

packages/react-devtools-extensions/popups/restricted.html

@@ -0,0 +1,14 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 286px;
+    min-height: 33px;
+  }
+
+</style>
+<p>
+  <b>This is a restricted browser page.</b>
+  <br />
+  React devtools cannot access this page.
+</p>

packages/react-devtools-extensions/popups/shared.css

@@ -0,0 +1,7 @@
+html, body {
+  font-size: 14px;
+}
+
+body {
+  margin: 8px;
+}

packages/react-devtools-extensions/src/background.js

@@ -78,17 +78,43 @@ function setIconAndPopup(reactBuildType, tabId) {
   });
 }
 
-// Listen to URL changes on the active tab and reset the DevTools icon.
-// This prevents non-disabled icons from sticking in Firefox.
-// Don't listen to this event in Chrome though.
-// It fires more frequently, often after onMessage() has been called.
-if (IS_FIREFOX) {
-  chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+function isRestrictedBrowserPage(url) {
+  return !url || new URL(url).protocol === 'chrome:';
+}
+
+function checkAndHandleRestrictedPageIfSo(tab) {
+  if (tab && isRestrictedBrowserPage(tab.url)) {
+    setIconAndPopup('restricted', tab.id);
+  }
+}
+
+// update popup page of any existing open tabs, if they are restricted browser pages.
+// we can't update for any other types (prod,dev,outdated etc)
+// as the content script needs to be injected at document_start itself for those kinds of detection
+// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed
+if (!IS_FIREFOX) {
+  chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
+  chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =>
+    checkAndHandleRestrictedPageIfSo(tab),
+  );
+}
+
+// Listen to URL changes on the active tab and update the DevTools icon.
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (IS_FIREFOX) {
+    // We don't properly detect protected URLs in Firefox at the moment.
+    // However we can reset the DevTools icon to its loading state when the URL changes.
+    // It will be updated to the correct icon by the onMessage callback below.
     if (tab.active && changeInfo.status === 'loading') {
       setIconAndPopup('disabled', tabId);
     }
-  });
-}
+  } else {
+    // Don't reset the icon to the loading state for Chrome or Edge.
+    // The onUpdated callback fires more frequently for these browsers,
+    // often after onMessage has been called.
+    checkAndHandleRestrictedPageIfSo(tab);
+  }
+});
 
 chrome.runtime.onMessage.addListener((request, sender) => {
   if (sender.tab) {