Skip to content

Commit 4eb5891

Browse files
sktguhasktguha
authored
DevTools: Handle restricted browser pages properly like new tab page, extensions page etc(only chrome and edge for now) (#20023)
1 parent 6d50a9d commit 4eb5891

13 files changed

+61
-33
lines changed

‎packages/react-devtools-extensions/icons/128-restricted.png

4.68 KB
Loading

‎packages/react-devtools-extensions/icons/16-restricted.png

494 Bytes
Loading

‎packages/react-devtools-extensions/icons/32-restricted.png

1.07 KB
Loading

‎packages/react-devtools-extensions/icons/48-restricted.png

1.53 KB
Loading

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

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
<script src="shared.js"></script>
2+
<link rel="stylesheet" href="shared.css" />
23
<style>
34
html, body {
4-
font-size: 14px;
55
min-width: 460px;
66
min-height: 133px;
77
}
88

9-
body {
10-
margin: 8px;
11-
}
12-
139
hr {
1410
width: 100%;
1511
}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
<script src="shared.js"></script>
2+
<link rel="stylesheet" href="shared.css" />
23
<style>
34
html, body {
4-
font-size: 14px;
55
min-width: 460px;
66
min-height: 101px;
77
}
88

9-
body {
10-
margin: 8px;
11-
}
12-
139
hr {
1410
width: 100%;
1511
}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
<script src="shared.js"></script>
2+
<link rel="stylesheet" href="shared.css" />
23
<style>
34
html, body {
4-
font-size: 14px;
55
min-width: 410px;
66
min-height: 33px;
77
}
88

9-
body {
10-
margin: 8px;
11-
}
12-
139
hr {
1410
width: 100%;
1511
}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
<script src="shared.js"></script>
2+
<link rel="stylesheet" href="shared.css" />
23
<style>
34
html, body {
4-
font-size: 14px;
55
min-width: 460px;
66
min-height: 117px;
77
}
88

9-
body {
10-
margin: 8px;
11-
}
12-
139
hr {
1410
width: 100%;
1511
}

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
<script src="shared.js"></script>
2+
<link rel="stylesheet" href="shared.css" />
23
<style>
34
html, body {
4-
font-size: 14px;
55
min-width: 460px;
66
min-height: 39px;
77
}
88

9-
body {
10-
margin: 8px;
11-
}
12-
139
hr {
1410
width: 100%;
1511
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
html, body {
2+
font-size: 14px;
3+
}
4+
5+
body {
6+
margin: 8px;
7+
}

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

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -78,17 +78,43 @@ function setIconAndPopup(reactBuildType, tabId) {
7878
});
7979
}
8080

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.
87108
if (tab.active && changeInfo.status === 'loading') {
88109
setIconAndPopup('disabled', tabId);
89110
}
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+
});
92118

93119
chrome.runtime.onMessage.addListener((request, sender) => {
94120
if (sender.tab) {

0 commit comments

Comments
 (0)