DevTools: Handle restricted browser pages properly like new tab page, extensions page etc(only chrome and edge for now) (#20023)

packages/react-devtools-extensions/icons/restricted.svg

@@ -0,0 +1 @@
+<svg id="Disabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><defs><style>.cls-1{fill:#aaa;}.cls-2{fill:#fff;}</style></defs><title>disabled</title><g id="Background"><rect class="cls-1" width="1024" height="1024" rx="96" ry="96"/></g><g id="Rings"><path class="cls-2" d="M959,509c0-62-74-117-189-150,27-115,17-207-37-238s-139,6-224,88c-86-81-171-118-224-87s-64,123-36,239C135,394,61,449,61,511s74,117,189,150c-27,115-17,207,37,238s139-6,224-88c86,81,171,118,224,87s64-123,36-239C885,626,959,571,959,509ZM713,157c40,23,45,97,21,193a900,900,0,0,0-121-19,900,900,0,0,0-78-94C606,166,673,133,713,157ZM635,583c-14,24-28,47-43,69-27,2-54,3-83,3l-81-3c-15-22-30-46-44-70s-27-48-38-72c12-24,24-49,39-73s28-47,43-69c27-2,54-3,83-3l81,3c15,22,30,46,44,70s27,48,38,72C662,534,649,558,635,583Zm60-27c11,26,21,52,29,77-25,6-52,10-81,14l26-44ZM511,757c-17-19-35-40-52-63H563C546,716,528,738,511,757ZM378,647c-29-3-56-8-81-13,8-25,17-50,28-77l25,45ZM325,464c-11-26-21-52-29-77,25-6,52-10,81-14l-26,44ZM509,263c17,19,35,40,52,63H457C474,304,492,282,509,263ZM670,418l-28-45c29,3,56,8,81,13-8,25-17,50-28,77ZM305,158c40-23,106,9,177,78a900,900,0,0,0-77,95,900,900,0,0,0-120,20C260,255,265,181,305,158ZM102,511c0-46,61-88,156-114a900,900,0,0,0,44,114,900,900,0,0,0-43,114C164,599,102,558,102,511ZM307,863c-40-23-45-97-21-193a900,900,0,0,0,121,19,900,900,0,0,0,78,94C414,854,347,887,307,863Zm408-1c-40,23-106-9-177-78a900,900,0,0,0,77-95,900,900,0,0,0,120-20C760,765,755,839,715,862Zm46-239a900,900,0,0,0-44-114,900,900,0,0,0,43-114c96,26,157,67,157,114S856,597,761,623Z"/></g><g id="Circle"><circle class="cls-2" cx="510" cy="510" r="80"/></g></svg>

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) {