New NPM package react-devtools-inline (#363)

src/backend/views/Highlighter/Overlay.js

@@ -153,20 +153,11 @@ export default class Overlay {
 
   constructor() {
     // Find the root window, because overlays are positioned relative to it.
-    let currentWindow = window;
-    while (currentWindow !== currentWindow.parent) {
-      currentWindow = currentWindow.parent;
-    }
+    let currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
     this.window = currentWindow;
 
     // When opened in shells/dev, the tooltip should be bound by the app iframe, not by the topmost window.
-    let tipBoundsWindow = window;
-    while (
-      tipBoundsWindow !== tipBoundsWindow.parent &&
-      !tipBoundsWindow.hasOwnProperty('__REACT_DEVTOOLS_GLOBAL_HOOK__')
-    ) {
-      tipBoundsWindow = tipBoundsWindow.parent;
-    }
+    let tipBoundsWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window;
     this.tipBoundsWindow = tipBoundsWindow;
 
     const doc = currentWindow.document;

src/devtools/store.js

@@ -114,7 +114,7 @@ export default class Store extends EventEmitter<{|
 
   // These options may be initially set by a confiugraiton option when constructing the Store.
   // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
-  _supportsNativeInspection: boolean = false;
+  _supportsNativeInspection: boolean = true;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
 

src/devtools/views/DevTools.js

@@ -59,7 +59,6 @@ export type Props = {|
   // but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.
   componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
-  settingsPortalContainer?: Element,
 |};
 
 const componentsTab = {
@@ -85,7 +84,6 @@ export default function DevTools({
   componentsPortalContainer,
   overrideTab,
   profilerPortalContainer,
-  settingsPortalContainer,
   showTabBar = false,
   showWelcomeToTheNewDevToolsDialog = false,
   store,
@@ -113,7 +111,6 @@ export default function DevTools({
             browserTheme={browserTheme}
             componentsPortalContainer={componentsPortalContainer}
             profilerPortalContainer={profilerPortalContainer}
-            settingsPortalContainer={settingsPortalContainer}
           >
             <ViewElementSourceContext.Provider value={viewElementSource}>
               <TreeContextController>

src/devtools/views/Settings/SettingsContext.js

@@ -41,7 +41,6 @@ type Props = {|
   children: React$Node,
   componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
-  settingsPortalContainer?: Element,
 |};
 
 function SettingsContextController({
@@ -49,7 +48,6 @@ function SettingsContextController({
   children,
   componentsPortalContainer,
   profilerPortalContainer,
-  settingsPortalContainer,
 }: Props) {
   const bridge = useContext(BridgeContext);
 
@@ -82,18 +80,8 @@ function SettingsContextController({
           .documentElement: any): HTMLElement)
       );
     }
-    if (settingsPortalContainer != null) {
-      array.push(
-        ((settingsPortalContainer.ownerDocument
-          .documentElement: any): HTMLElement)
-      );
-    }
     return array;
-  }, [
-    componentsPortalContainer,
-    profilerPortalContainer,
-    settingsPortalContainer,
-  ]);
+  }, [componentsPortalContainer, profilerPortalContainer]);
 
   const computedStyle = getComputedStyle((document.body: any));
   const comfortableLineHeight = parseInt(