Make sure out-of-contents rendering is supported in Sandy

Summary: For RN Debugger an ugly hack is used that roars its head now again; to make sure that the embedded debugger state isn't lost when switching to a different plugin, the chrome devtools are rendered _outside_ the domNode where they should normally appeared, and made invisible rather than removed when becoming invisible. Since at this moment this is the only place where we apply the trick, figured for now to condone it, rather than making a neater abstraction out of it (or kiling it all together)

Reviewed By: passy

Differential Revision: D24786771

fbshipit-source-id: 726617899bc620fc8b9db677d9413b31d5ad7653

desktop/app/src/App.tsx

@@ -105,17 +105,19 @@ export class App extends React.Component<Props> {
               ) : (
                 <PluginContainer logger={this.props.logger} />
               )}
-              <div
+              <div>
-                id="flipper-out-of-contents-container"
+                <div
-                style={{
+                  id="flipper-out-of-contents-container"
-                  display: 'none',
+                  style={{
-                  position: 'absolute',
+                    display: 'none',
-                  right: 0,
+                    position: 'absolute',
-                  bottom: 0,
+                    right: 0,
-                  left: 0,
+                    bottom: 0,
-                  top: 0,
+                    left: 0,
-                }}
+                    top: 0,
-              />
+                  }}
+                />
+              </div>
             </PluginContent>
           </Layout.Left>
           <StatusBar />

desktop/app/src/sandy-chrome/SandyApp.tsx

@@ -108,6 +108,7 @@ export function SandyApp({logger}: {logger: Logger}) {
             </Sidebar>
           </Layout.Horizontal>
           <MainContainer>
+            {outOfContentsContainer}
             {staticView ? (
               <ContentContainer>
                 {React.createElement(staticView, {
@@ -124,6 +125,28 @@ export function SandyApp({logger}: {logger: Logger}) {
   );
 }
 
+const outOfContentsContainer = (
+  <div
+    style={{
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      display: 'none',
+    }}>
+    <div
+      id="flipper-out-of-contents-container"
+      style={{
+        display: 'none',
+        position: 'absolute',
+        right: 0,
+        bottom: 0,
+        left: 0,
+        top: 0,
+      }}
+    />
+  </div>
+);
+
 const MainContainer = styled(Layout.Container)({
   background: theme.backgroundWash,
   padding: `${theme.space.large}px ${theme.space.large}px ${theme.space.large}px 0`,

desktop/plugins/hermesdebuggerrn/ChromeDevTools.tsx

@@ -60,10 +60,14 @@ function findDevToolsNode(url: string): HTMLElement | null {
 function attachDevTools(devToolsNode: HTMLElement) {
   devToolsNode.style.display = 'block';
   document.getElementById(TARGET_CONTAINER_ID)!.style.display = 'block';
+  document.getElementById(TARGET_CONTAINER_ID)!.parentElement!.style.display =
+    'block';
 }
 
 function detachDevTools(devToolsNode: HTMLElement | null) {
   document.getElementById(TARGET_CONTAINER_ID)!.style.display = 'none';
+  document.getElementById(TARGET_CONTAINER_ID)!.parentElement!.style.display =
+    'none';
 
   if (devToolsNode) {
     devToolsNode.style.display = 'none';