Revert "DevTools: Improve browser extension iframe support (#19827)" (#19852)
This reverts commit ec39a5e9017dfa2c3311bc2b74a4d535ea2630a2.
Brian Vaughn committed
Sep 17, 2020 at 14:57 UTC
26857ecfa924c05119773dae7e59577e730f8faf
30 files changed
+134
-151
fixtures/devtools/iframe/iframe-in-component.html
deleted
-23
@@ -1,23 +0,0 @@
1
-<!DOCTYPE html>
2
-<html>
3
- <head>
4
- <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
5
- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
6
- </head>
7
- <body>
8
- <div id="root"></div>
9
- <script>
10
- const MyComponent = () => {
11
- return React.createElement("h1", null, "Parent", React.createElement(MainIframe, null, null));
12
- };
13
-
14
- const MainIframe = () => {
15
- return React.createElement("iframe", {src: "./main.html", sandbox:"allow-same-origin allow-scripts"}, null);
16
- }
17
-
18
- const el = () => React.createElement(MyComponent, null)
19
-
20
- ReactDOM.render(el(), document.getElementById('root'))
21
- </script>
22
- </body>
23
-</html>
\ No newline at end of file
fixtures/devtools/iframe/iframe-other-origin.html
deleted
-7
@@ -1,7 +0,0 @@
1
-<!DOCTYPE html>
2
-<html>
3
- <head></head>
4
- <body>
5
- <iframe src="http://127.0.0.1:3000/main.html"></iframe>
6
- </body>
7
-</html>
\ No newline at end of file
fixtures/devtools/iframe/iframe-same-origin-sandbox.html
deleted
-7
@@ -1,7 +0,0 @@
1
-<!DOCTYPE html>
2
-<html>
3
- <head></head>
4
- <body>
5
- <iframe sandbox="allow-scripts" src="./main.html"></iframe>
6
- </body>
7
-</html>
\ No newline at end of file
fixtures/devtools/iframe/iframe-same-origin.html
deleted
-7
@@ -1,7 +0,0 @@
1
-<!DOCTYPE html>
2
-<html>
3
- <head></head>
4
- <body>
5
- <iframe src="./main.html"></iframe>
6
- </body>
7
-</html>
\ No newline at end of file
fixtures/devtools/iframe/index.html
deleted
-14
@@ -1,14 +0,0 @@
1
-<!DOCTYPE html>
2
-<html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>React DevTools iframe test</title>
6
- <link rel="stylesheet" href="styles.css" />
7
- </head>
8
- <body>
9
- <iframe src="iframe-in-component.html"></iframe>
10
- <iframe src="iframe-other-origin.html"></iframe>
11
- <iframe src="iframe-same-origin-sandbox.html"></iframe>
12
- <iframe src="iframe-same-origin.html"></iframe>
13
- </body>
14
-</html>
\ No newline at end of file
fixtures/devtools/iframe/main.html
deleted
-19
@@ -1,19 +0,0 @@
1
-<!DOCTYPE html>
2
-<html>
3
- <head>
4
- <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
5
- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
6
- </head>
7
- <body>
8
- <div id="root"></div>
9
- <script>
10
- const MyComponent = () => {
11
- return React.createElement("h1", null, "Coucou");
12
- };
13
-
14
- const el = () => React.createElement(MyComponent, null)
15
-
16
- ReactDOM.render(el(), document.getElementById('root'))
17
- </script>
18
- </body>
19
-</html>
\ No newline at end of file
fixtures/devtools/iframe/server.js
deleted
-18
@@ -1,18 +0,0 @@
1
-#!/usr/bin/env node
2
-
3
-const finalhandler = require('finalhandler');
4
-const http = require('http');
5
-const serveStatic = require('serve-static');
6
-
7
-// Serve fixtures folder
8
-const serve = serveStatic(__dirname);
9
-
10
-// Create server
11
-const server = http.createServer(function onRequest(req, res) {
12
- serve(req, res, finalhandler(req, res));
13
-});
14
-
15
-console.log('Listening on http://localhost:3000');
16
-
17
-// Listen
18
-server.listen(3000);
fixtures/devtools/regression/14.9.html
+6
@@ -5,6 +5,12 @@
5
<title>React 14.9</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@0.14.9/dist/react.js"></script>
15
<script src="https://unpkg.com/react-dom@0.14.9/dist/react-dom.js"></script>
16
fixtures/devtools/regression/15.0.html
+5
@@ -5,6 +5,11 @@
5
<title>React 15.0</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
14
<script src="https://unpkg.com/react@15.0/dist/react.js"></script>
15
<script src="https://unpkg.com/react-dom@15.0/dist/react-dom.js"></script>
fixtures/devtools/regression/15.1.html
+6
@@ -5,6 +5,12 @@
5
<title>React 15.1</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@15.1/dist/react.js"></script>
15
<script src="https://unpkg.com/react-dom@15.1/dist/react-dom.js"></script>
16
fixtures/devtools/regression/15.2.html
+6
@@ -5,6 +5,12 @@
5
<title>React 15.2</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@15.2/dist/react.js"></script>
15
<script src="https://unpkg.com/react-dom@15.2/dist/react-dom.js"></script>
16
fixtures/devtools/regression/15.3.html
+6
@@ -5,6 +5,12 @@
5
<title>React 15.3</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@15.3/dist/react.js"></script>
15
<script src="https://unpkg.com/react-dom@15.3/dist/react-dom.js"></script>
16
fixtures/devtools/regression/15.4.html
+6
@@ -5,6 +5,12 @@
5
<title>React 15.4</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@15.4/dist/react.js"></script>
15
<script src="https://unpkg.com/react-dom@15.4/dist/react-dom.js"></script>
16
fixtures/devtools/regression/15.5.html
+6
@@ -5,6 +5,12 @@
5
<title>React 15.5</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@15.5/dist/react.js"></script>
15
<script src="https://unpkg.com/react-dom@15.5/dist/react-dom.js"></script>
16
fixtures/devtools/regression/15.6.html
+6
@@ -5,6 +5,12 @@
5
<title>React 15.6</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@15.6/dist/react.js"></script>
15
<script src="https://unpkg.com/react-dom@15.6/dist/react-dom.js"></script>
16
fixtures/devtools/regression/16.0.html
+6
@@ -5,6 +5,12 @@
5
<title>React 16.0</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@16.0/umd/react.development.js"></script>
15
<script src="https://unpkg.com/react-dom@16.0/umd/react-dom.development.js"></script>
16
fixtures/devtools/regression/16.1.html
+6
@@ -5,6 +5,12 @@
5
<title>React 16.1</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@16.1/umd/react.development.js"></script>
15
<script src="https://unpkg.com/react-dom@16.1/umd/react-dom.development.js"></script>
16
fixtures/devtools/regression/16.2.html
+6
@@ -5,6 +5,12 @@
5
<title>React 16.2</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@16.2/umd/react.development.js"></script>
15
<script src="https://unpkg.com/react-dom@16.2/umd/react-dom.development.js"></script>
16
fixtures/devtools/regression/16.3.html
+6
@@ -5,6 +5,12 @@
5
<title>React 16.3</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@16.3/umd/react.development.js"></script>
15
<script src="https://unpkg.com/react-dom@16.3/umd/react-dom.development.js"></script>
16
fixtures/devtools/regression/16.4.html
+6
@@ -5,6 +5,12 @@
5
<title>React 16.4</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/react@16.4/umd/react.development.js"></script>
15
<script src="https://unpkg.com/react-dom@16.4/umd/react-dom.development.js"></script>
16
fixtures/devtools/regression/16.5.html
+6
@@ -5,6 +5,12 @@
5
<title>React 16.5</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/schedule@0.5.0/umd/schedule.development.js"></script>
15
<script src="https://unpkg.com/schedule@0.5.0/umd/schedule-tracing.development.js"></script>
16
<script src="https://unpkg.com/react@16.5/umd/react.development.js"></script>
fixtures/devtools/regression/16.6.html
+6
@@ -5,6 +5,12 @@
5
<title>React 16.6</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler.development.js"></script>
15
<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler-tracing.development.js"></script>
16
<script src="https://unpkg.com/react@16.6/umd/react.development.js"></script>
fixtures/devtools/regression/16.7.html
+6
@@ -5,6 +5,12 @@
5
<title>React 16.7</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler.development.js"></script>
15
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler-tracing.development.js"></script>
16
<script src="https://unpkg.com/react@16.7/umd/react.development.js"></script>
fixtures/devtools/regression/canary.html
+6
@@ -5,6 +5,12 @@
5
<title>React canary</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/scheduler@canary/umd/scheduler.development.js"></script>
15
<script src="https://unpkg.com/scheduler@canary/umd/scheduler-tracing.development.js"></script>
16
<script src="https://unpkg.com/react@canary/umd/react.development.js"></script>
fixtures/devtools/regression/next.html
+6
@@ -5,6 +5,12 @@
5
<title>React next</title>
6
<link rel="stylesheet" href="styles.css" />
7
8
+ <script type="text/javascript">
9
+ // Enable DevTools to inspect React inside of an <iframe>
10
+ // This must run before React is loaded
11
+ __REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12
+ </script>
13
+
14
<script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
15
<script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
16
<script src="https://unpkg.com/react@next/umd/react.development.js"></script>
packages/react-devtools-extensions/README.md
-3
@@ -34,7 +34,4 @@ yarn run test:chrome # Test Chrome extension
34
35
yarn build:firefox # => packages/react-devtools-extensions/firefox/build
36
yarn run test:firefox # Test Firefox extension
37
-
38
-yarn build:edge # => packages/react-devtools-extensions/edge/build
39
-yarn run test:edge # Test Edge extension
37
```
packages/react-devtools-extensions/chrome/manifest.json
+1
-2
@@ -46,8 +46,7 @@
46
{
47
"matches": ["<all_urls>"],
48
"js": ["build/injectGlobalHook.js"],
49
- "run_at": "document_start",
50
- "all_frames": true
49
+ "run_at": "document_start"
50
}
51
]
52
}
packages/react-devtools-extensions/edge/manifest.json
+1
-2
@@ -46,8 +46,7 @@
46
{
47
"matches": ["<all_urls>"],
48
"js": ["build/injectGlobalHook.js"],
49
- "run_at": "document_start",
50
- "all_frames": true
49
+ "run_at": "document_start"
50
}
51
]
52
}
packages/react-devtools-extensions/firefox/manifest.json
+1
-2
@@ -50,8 +50,7 @@
50
{
51
"matches": ["<all_urls>"],
52
"js": ["build/injectGlobalHook.js"],
53
- "run_at": "document_start",
54
- "all_frames": true
53
+ "run_at": "document_start"
54
}
55
]
56
}
packages/react-devtools-shared/src/hook.js
+24
-47
@@ -21,25 +21,6 @@ export function installHook(target: any): DevToolsHook | null {
21
return null;
22
}
23
24
- function getMainWindow(targetWindow: any): any {
25
- if (!canAccessParentWindow(targetWindow) || isMainWindow(targetWindow)) {
26
- return targetWindow;
27
- }
28
- return getMainWindow(targetWindow.parent);
29
- }
30
-
31
- function isMainWindow(targetWindow: any): boolean {
32
- return targetWindow.self === targetWindow.top;
33
- }
34
-
35
- function canAccessParentWindow(targetWindow: any): boolean {
36
- try {
37
- return !!targetWindow.parent.origin;
38
- } catch (error) {
39
- return false;
40
- }
41
- }
42
-
24
function detectReactBuildType(renderer) {
25
try {
26
if (typeof renderer.version === 'string') {
@@ -301,34 +282,30 @@ export function installHook(target: any): DevToolsHook | null {
282
const listeners = {};
283
const renderers = new Map();
284
304
- let hook: DevToolsHook;
305
- if (!canAccessParentWindow(target) || isMainWindow(target)) {
306
- hook = {
307
- rendererInterfaces,
308
- listeners,
309
-
310
- // Fast Refresh for web relies on this.
311
- renderers,
312
-
313
- emit,
314
- getFiberRoots,
315
- inject,
316
- on,
317
- off,
318
- sub,
319
-
320
- // This is a legacy flag.
321
- // React v16 checks the hook for this to ensure DevTools is new enough.
322
- supportsFiber: true,
323
-
324
- // React calls these methods.
325
- checkDCE,
326
- onCommitFiberUnmount,
327
- onCommitFiberRoot,
328
- };
329
- } else {
330
- hook = getMainWindow(target).__REACT_DEVTOOLS_GLOBAL_HOOK__;
331
- }
285
+ const hook: DevToolsHook = {
286
+ rendererInterfaces,
287
+ listeners,
288
+
289
+ // Fast Refresh for web relies on this.
290
+ renderers,
291
+
292
+ emit,
293
+ getFiberRoots,
294
+ inject,
295
+ on,
296
+ off,
297
+ sub,
298
+
299
+ // This is a legacy flag.
300
+ // React v16 checks the hook for this to ensure DevTools is new enough.
301
+ supportsFiber: true,
302
+
303
+ // React calls these methods.
304
+ checkDCE,
305
+ onCommitFiberUnmount,
306
+ onCommitFiberRoot,
307
+ };
308
+
309
Object.defineProperty(
310
target,
311
'__REACT_DEVTOOLS_GLOBAL_HOOK__',