@samitouri / QOS-React / commits / 4eb589169c

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

Saikat Guha committed Oct 14, 2020 at 23:29 UTC 4eb589169c83ba9d5cf4ecb2cf07c1f1576bba32
13 files changed +61 -33
packages/react-devtools-extensions/icons/128-restricted.png
Binary files /dev/null and b/packages/react-devtools-extensions/icons/128-restricted.png differ
packages/react-devtools-extensions/icons/16-restricted.png
Binary files /dev/null and b/packages/react-devtools-extensions/icons/16-restricted.png differ
packages/react-devtools-extensions/icons/32-restricted.png
Binary files /dev/null and b/packages/react-devtools-extensions/icons/32-restricted.png differ
packages/react-devtools-extensions/icons/48-restricted.png
Binary files /dev/null and b/packages/react-devtools-extensions/icons/48-restricted.png differ
packages/react-devtools-extensions/icons/restricted.svg new
+1
@@ -0,0 +1 @@
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>
\ No newline at end of file
packages/react-devtools-extensions/popups/deadcode.html
+1 -5
@@ -1,15 +1,11 @@
1 <script src="shared.js"></script>
2 +<link rel="stylesheet" href="shared.css" />
3 <style>
4 html, body {
4 - font-size: 14px;
5 min-width: 460px;
6 min-height: 133px;
7 }
8
9 - body {
10 - margin: 8px;
11 - }
12 -
9 hr {
10 width: 100%;
11 }
packages/react-devtools-extensions/popups/development.html
+1 -5
@@ -1,15 +1,11 @@
1 <script src="shared.js"></script>
2 +<link rel="stylesheet" href="shared.css" />
3 <style>
4 html, body {
4 - font-size: 14px;
5 min-width: 460px;
6 min-height: 101px;
7 }
8
9 - body {
10 - margin: 8px;
11 - }
12 -
9 hr {
10 width: 100%;
11 }
packages/react-devtools-extensions/popups/disabled.html
+1 -5
@@ -1,15 +1,11 @@
1 <script src="shared.js"></script>
2 +<link rel="stylesheet" href="shared.css" />
3 <style>
4 html, body {
4 - font-size: 14px;
5 min-width: 410px;
6 min-height: 33px;
7 }
8
9 - body {
10 - margin: 8px;
11 - }
12 -
9 hr {
10 width: 100%;
11 }
packages/react-devtools-extensions/popups/outdated.html
+1 -5
@@ -1,15 +1,11 @@
1 <script src="shared.js"></script>
2 +<link rel="stylesheet" href="shared.css" />
3 <style>
4 html, body {
4 - font-size: 14px;
5 min-width: 460px;
6 min-height: 117px;
7 }
8
9 - body {
10 - margin: 8px;
11 - }
12 -
9 hr {
10 width: 100%;
11 }
packages/react-devtools-extensions/popups/production.html
+1 -5
@@ -1,15 +1,11 @@
1 <script src="shared.js"></script>
2 +<link rel="stylesheet" href="shared.css" />
3 <style>
4 html, body {
4 - font-size: 14px;
5 min-width: 460px;
6 min-height: 39px;
7 }
8
9 - body {
10 - margin: 8px;
11 - }
12 -
9 hr {
10 width: 100%;
11 }
packages/react-devtools-extensions/popups/restricted.html new
+14
@@ -0,0 +1,14 @@
1 +<script src="shared.js"></script>
2 +<link rel="stylesheet" href="shared.css" />
3 +<style>
4 + html, body {
5 + min-width: 286px;
6 + min-height: 33px;
7 + }
8 +
9 +</style>
10 +<p>
11 + <b>This is a restricted browser page.</b>
12 + <br />
13 + React devtools cannot access this page.
14 +</p>
packages/react-devtools-extensions/popups/shared.css new
+7
@@ -0,0 +1,7 @@
1 +html, body {
2 + font-size: 14px;
3 +}
4 +
5 +body {
6 + margin: 8px;
7 +}
\ No newline at end of file
packages/react-devtools-extensions/src/background.js
+34 -8
@@ -78,17 +78,43 @@ function setIconAndPopup(reactBuildType, tabId) {
78 });
79 }
80
81 -// Listen to URL changes on the active tab and reset the DevTools icon.
82 -// This prevents non-disabled icons from sticking in Firefox.
83 -// Don't listen to this event in Chrome though.
84 -// It fires more frequently, often after onMessage() has been called.
85 -if (IS_FIREFOX) {
86 - chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
81 +function isRestrictedBrowserPage(url) {
82 + return !url || new URL(url).protocol === 'chrome:';
83 +}
84 +
85 +function checkAndHandleRestrictedPageIfSo(tab) {
86 + if (tab && isRestrictedBrowserPage(tab.url)) {
87 + setIconAndPopup('restricted', tab.id);
88 + }
89 +}
90 +
91 +// update popup page of any existing open tabs, if they are restricted browser pages.
92 +// we can't update for any other types (prod,dev,outdated etc)
93 +// as the content script needs to be injected at document_start itself for those kinds of detection
94 +// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed
95 +if (!IS_FIREFOX) {
96 + chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
97 + chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =>
98 + checkAndHandleRestrictedPageIfSo(tab),
99 + );
100 +}
101 +
102 +// Listen to URL changes on the active tab and update the DevTools icon.
103 +chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
104 + if (IS_FIREFOX) {
105 + // We don't properly detect protected URLs in Firefox at the moment.
106 + // However we can reset the DevTools icon to its loading state when the URL changes.
107 + // It will be updated to the correct icon by the onMessage callback below.
108 if (tab.active && changeInfo.status === 'loading') {
109 setIconAndPopup('disabled', tabId);
110 }
90 - });
91 -}
111 + } else {
112 + // Don't reset the icon to the loading state for Chrome or Edge.
113 + // The onUpdated callback fires more frequently for these browsers,
114 + // often after onMessage has been called.
115 + checkAndHandleRestrictedPageIfSo(tab);
116 + }
117 +});
118
119 chrome.runtime.onMessage.addListener((request, sender) => {
120 if (sender.tab) {