Skip to content

Commit a99bf5c

Browse files
omarsyJoel DSouzaDamien Maillardbvaughn
authored
DevTools: Improve browser extension iframe support (#19854)
 Co-authored-by: Joel DSouza <joel.dsouza@kapturecrm.com> Co-authored-by: Damien Maillard <damien.maillard@dailymotion.com> Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
1 parent c691734 commit a99bf5c

30 files changed

Lines changed: 149 additions & 134 deletions

‎fixtures/devtools/iframe/iframe-in-component.html‎

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

‎fixtures/devtools/iframe/iframe-other-origin.html‎

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

‎fixtures/devtools/iframe/iframe-same-origin-sandbox.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head></head>
4+
<body>
5+
<iframe sandbox="allow-scripts" src="./main.html"></iframe>
6+
</body>
7+
</html>

‎fixtures/devtools/iframe/iframe-same-origin.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head></head>
4+
<body>
5+
<iframe src="./main.html"></iframe>
6+
</body>
7+
</html>

‎fixtures/devtools/iframe/index.html‎

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

‎fixtures/devtools/iframe/main.html‎

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

‎fixtures/devtools/iframe/server.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 14.9</title>
66
<link rel="stylesheet" href="styles.css" />
77

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-
148
<script src="https://unpkg.com/react@0.14.9/dist/react.js"></script>
159
<script src="https://unpkg.com/react-dom@0.14.9/dist/react-dom.js"></script>
1610

‎fixtures/devtools/regression/15.0.html‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@
55
<title>React 15.0</title>
66
<link rel="stylesheet" href="styles.css" />
77

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>
138

149
<script src="https://unpkg.com/react@15.0/dist/react.js"></script>
1510
<script src="https://unpkg.com/react-dom@15.0/dist/react-dom.js"></script>

‎fixtures/devtools/regression/15.1.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 15.1</title>
66
<link rel="stylesheet" href="styles.css" />
77

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-
148
<script src="https://unpkg.com/react@15.1/dist/react.js"></script>
159
<script src="https://unpkg.com/react-dom@15.1/dist/react-dom.js"></script>
1610

0 commit comments

Comments
 (0)
⚡