diff --git a/fixtures/devtools/iframe/iframe-in-component.html b/fixtures/devtools/iframe/iframe-in-component.html new file mode 100644 index 0000000000..4e123c82e1 --- /dev/null +++ b/fixtures/devtools/iframe/iframe-in-component.html @@ -0,0 +1,23 @@ + + + + + + + +
+ + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/iframe-other-origin.html b/fixtures/devtools/iframe/iframe-other-origin.html new file mode 100644 index 0000000000..cab1851e98 --- /dev/null +++ b/fixtures/devtools/iframe/iframe-other-origin.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/iframe-same-origin-sandbox.html b/fixtures/devtools/iframe/iframe-same-origin-sandbox.html new file mode 100644 index 0000000000..370e5b549d --- /dev/null +++ b/fixtures/devtools/iframe/iframe-same-origin-sandbox.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/iframe-same-origin.html b/fixtures/devtools/iframe/iframe-same-origin.html new file mode 100644 index 0000000000..51d0b2ced4 --- /dev/null +++ b/fixtures/devtools/iframe/iframe-same-origin.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/index.html b/fixtures/devtools/iframe/index.html new file mode 100644 index 0000000000..a941775a54 --- /dev/null +++ b/fixtures/devtools/iframe/index.html @@ -0,0 +1,14 @@ + + + + + React DevTools iframe test + + + + + + + + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/main.html b/fixtures/devtools/iframe/main.html new file mode 100644 index 0000000000..e2b2a449e9 --- /dev/null +++ b/fixtures/devtools/iframe/main.html @@ -0,0 +1,19 @@ + + + + + + + +
+ + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/server.js b/fixtures/devtools/iframe/server.js new file mode 100755 index 0000000000..87e5ce0942 --- /dev/null +++ b/fixtures/devtools/iframe/server.js @@ -0,0 +1,18 @@ +#!/usr/bin/env node + +const finalhandler = require('finalhandler'); +const http = require('http'); +const serveStatic = require('serve-static'); + +// Serve fixtures folder +const serve = serveStatic(__dirname); + +// Create server +const server = http.createServer(function onRequest(req, res) { + serve(req, res, finalhandler(req, res)); +}); + +console.log('Listening on http://localhost:3000'); + +// Listen +server.listen(3000); diff --git a/fixtures/devtools/regression/14.9.html b/fixtures/devtools/regression/14.9.html index 524ff19688..c6d6d36fe6 100644 --- a/fixtures/devtools/regression/14.9.html +++ b/fixtures/devtools/regression/14.9.html @@ -5,12 +5,6 @@ React 14.9 - - diff --git a/fixtures/devtools/regression/15.0.html b/fixtures/devtools/regression/15.0.html index fde26012c6..37590fdda3 100644 --- a/fixtures/devtools/regression/15.0.html +++ b/fixtures/devtools/regression/15.0.html @@ -5,11 +5,6 @@ React 15.0 - diff --git a/fixtures/devtools/regression/15.1.html b/fixtures/devtools/regression/15.1.html index 49813d80a1..347540a50d 100644 --- a/fixtures/devtools/regression/15.1.html +++ b/fixtures/devtools/regression/15.1.html @@ -5,12 +5,6 @@ React 15.1 - - diff --git a/fixtures/devtools/regression/15.2.html b/fixtures/devtools/regression/15.2.html index 2be6f7c41a..1a9604370c 100644 --- a/fixtures/devtools/regression/15.2.html +++ b/fixtures/devtools/regression/15.2.html @@ -5,12 +5,6 @@ React 15.2 - - diff --git a/fixtures/devtools/regression/15.3.html b/fixtures/devtools/regression/15.3.html index cc5c3960d2..4011bc352c 100644 --- a/fixtures/devtools/regression/15.3.html +++ b/fixtures/devtools/regression/15.3.html @@ -5,12 +5,6 @@ React 15.3 - - diff --git a/fixtures/devtools/regression/15.4.html b/fixtures/devtools/regression/15.4.html index 93b425a644..f47452a624 100644 --- a/fixtures/devtools/regression/15.4.html +++ b/fixtures/devtools/regression/15.4.html @@ -5,12 +5,6 @@ React 15.4 - - diff --git a/fixtures/devtools/regression/15.5.html b/fixtures/devtools/regression/15.5.html index 75f722ccab..6150198a41 100644 --- a/fixtures/devtools/regression/15.5.html +++ b/fixtures/devtools/regression/15.5.html @@ -5,12 +5,6 @@ React 15.5 - - diff --git a/fixtures/devtools/regression/15.6.html b/fixtures/devtools/regression/15.6.html index 0ec03ee51d..ed4bd18586 100644 --- a/fixtures/devtools/regression/15.6.html +++ b/fixtures/devtools/regression/15.6.html @@ -5,12 +5,6 @@ React 15.6 - - diff --git a/fixtures/devtools/regression/16.0.html b/fixtures/devtools/regression/16.0.html index 1e1403372c..75a527525e 100644 --- a/fixtures/devtools/regression/16.0.html +++ b/fixtures/devtools/regression/16.0.html @@ -5,12 +5,6 @@ React 16.0 - - diff --git a/fixtures/devtools/regression/16.1.html b/fixtures/devtools/regression/16.1.html index a6131e9ae1..a04afe853f 100644 --- a/fixtures/devtools/regression/16.1.html +++ b/fixtures/devtools/regression/16.1.html @@ -5,12 +5,6 @@ React 16.1 - - diff --git a/fixtures/devtools/regression/16.2.html b/fixtures/devtools/regression/16.2.html index 4d0468d343..457f807365 100644 --- a/fixtures/devtools/regression/16.2.html +++ b/fixtures/devtools/regression/16.2.html @@ -5,12 +5,6 @@ React 16.2 - - diff --git a/fixtures/devtools/regression/16.3.html b/fixtures/devtools/regression/16.3.html index 335adaeffe..97f079455e 100644 --- a/fixtures/devtools/regression/16.3.html +++ b/fixtures/devtools/regression/16.3.html @@ -5,12 +5,6 @@ React 16.3 - - diff --git a/fixtures/devtools/regression/16.4.html b/fixtures/devtools/regression/16.4.html index 8a881ea3fe..66cd698f9c 100644 --- a/fixtures/devtools/regression/16.4.html +++ b/fixtures/devtools/regression/16.4.html @@ -5,12 +5,6 @@ React 16.4 - - diff --git a/fixtures/devtools/regression/16.5.html b/fixtures/devtools/regression/16.5.html index ad91102b1b..cc5c6dcc2e 100644 --- a/fixtures/devtools/regression/16.5.html +++ b/fixtures/devtools/regression/16.5.html @@ -5,12 +5,6 @@ React 16.5 - - diff --git a/fixtures/devtools/regression/16.6.html b/fixtures/devtools/regression/16.6.html index aa8ae33837..5bd63653ee 100644 --- a/fixtures/devtools/regression/16.6.html +++ b/fixtures/devtools/regression/16.6.html @@ -5,12 +5,6 @@ React 16.6 - - diff --git a/fixtures/devtools/regression/16.7.html b/fixtures/devtools/regression/16.7.html index 76fb982301..85acad6674 100644 --- a/fixtures/devtools/regression/16.7.html +++ b/fixtures/devtools/regression/16.7.html @@ -5,12 +5,6 @@ React 16.7 - - diff --git a/fixtures/devtools/regression/canary.html b/fixtures/devtools/regression/canary.html index 88cadef4cc..20c7ed452c 100644 --- a/fixtures/devtools/regression/canary.html +++ b/fixtures/devtools/regression/canary.html @@ -5,12 +5,6 @@ React canary - - diff --git a/fixtures/devtools/regression/next.html b/fixtures/devtools/regression/next.html index 4ac0751a0c..2dde165ba3 100644 --- a/fixtures/devtools/regression/next.html +++ b/fixtures/devtools/regression/next.html @@ -5,12 +5,6 @@ React next - - diff --git a/packages/react-devtools-extensions/README.md b/packages/react-devtools-extensions/README.md index cef2bc9c6d..aada529ded 100644 --- a/packages/react-devtools-extensions/README.md +++ b/packages/react-devtools-extensions/README.md @@ -34,4 +34,7 @@ yarn run test:chrome # Test Chrome extension yarn build:firefox # => packages/react-devtools-extensions/firefox/build yarn run test:firefox # Test Firefox extension + +yarn build:edge # => packages/react-devtools-extensions/edge/build +yarn run test:edge # Test Edge extension ``` diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json index 60fd566a5e..784231770c 100644 --- a/packages/react-devtools-extensions/chrome/manifest.json +++ b/packages/react-devtools-extensions/chrome/manifest.json @@ -53,7 +53,8 @@ { "matches": [""], "js": ["build/injectGlobalHook.js"], - "run_at": "document_start" + "run_at": "document_start", + "all_frames": true } ] } diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json index 3fbb2900bd..ab4ae6df26 100644 --- a/packages/react-devtools-extensions/edge/manifest.json +++ b/packages/react-devtools-extensions/edge/manifest.json @@ -53,7 +53,8 @@ { "matches": [""], "js": ["build/injectGlobalHook.js"], - "run_at": "document_start" + "run_at": "document_start", + "all_frames": true } ] } diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index ebe8547f10..92f89a3b45 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/packages/react-devtools-extensions/firefox/manifest.json @@ -57,7 +57,8 @@ { "matches": [""], "js": ["build/injectGlobalHook.js"], - "run_at": "document_start" + "run_at": "document_start", + "all_frames": true } ] } diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index f9f65df7fb..79d0120a49 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -21,6 +21,25 @@ export function installHook(target: any): DevToolsHook | null { return null; } + function getMainWindow(targetWindow: any): any { + if (!canAccessParentWindow(targetWindow) || isMainWindow(targetWindow)) { + return targetWindow; + } + return getMainWindow(targetWindow.parent); + } + + function isMainWindow(targetWindow: any): boolean { + return targetWindow.self === targetWindow.top; + } + + function canAccessParentWindow(targetWindow: any): boolean { + try { + return !!targetWindow.parent.origin; + } catch (error) { + return false; + } + } + function detectReactBuildType(renderer) { try { if (typeof renderer.version === 'string') { @@ -282,30 +301,32 @@ export function installHook(target: any): DevToolsHook | null { const listeners = {}; const renderers = new Map(); - const hook: DevToolsHook = { - rendererInterfaces, - listeners, + let hook: DevToolsHook = getMainWindow(target).__REACT_DEVTOOLS_GLOBAL_HOOK__; + if (!hook) { + hook = { + rendererInterfaces, + listeners, - // Fast Refresh for web relies on this. - renderers, + // Fast Refresh for web relies on this. + renderers, - emit, - getFiberRoots, - inject, - on, - off, - sub, + emit, + getFiberRoots, + inject, + on, + off, + sub, - // This is a legacy flag. - // React v16 checks the hook for this to ensure DevTools is new enough. - supportsFiber: true, - - // React calls these methods. - checkDCE, - onCommitFiberUnmount, - onCommitFiberRoot, - }; + // This is a legacy flag. + // React v16 checks the hook for this to ensure DevTools is new enough. + supportsFiber: true, + // React calls these methods. + checkDCE, + onCommitFiberUnmount, + onCommitFiberRoot, + }; + } Object.defineProperty( target, '__REACT_DEVTOOLS_GLOBAL_HOOK__',