From c9b08695d5f9138cfd6b838988b5bbfe4d2ed1c5 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Mon, 9 Nov 2020 06:56:03 -0800
Subject: [PATCH] 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                       | 24 ++++++++++---------
 desktop/app/src/sandy-chrome/SandyApp.tsx     | 23 ++++++++++++++++++
 .../hermesdebuggerrn/ChromeDevTools.tsx       |  4 ++++
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/desktop/app/src/App.tsx b/desktop/app/src/App.tsx
index bd2e7455d..6ab5eeb11 100644
--- a/desktop/app/src/App.tsx
+++ b/desktop/app/src/App.tsx
@@ -105,17 +105,19 @@ export class App extends React.Component<Props> {
               ) : (
                 <PluginContainer logger={this.props.logger} />
               )}
-              <div
-                id="flipper-out-of-contents-container"
-                style={{
-                  display: 'none',
-                  position: 'absolute',
-                  right: 0,
-                  bottom: 0,
-                  left: 0,
-                  top: 0,
-                }}
-              />
+              <div>
+                <div
+                  id="flipper-out-of-contents-container"
+                  style={{
+                    display: 'none',
+                    position: 'absolute',
+                    right: 0,
+                    bottom: 0,
+                    left: 0,
+                    top: 0,
+                  }}
+                />
+              </div>
             </PluginContent>
           </Layout.Left>
           <StatusBar />
diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx
index 863068adf..f108b90a3 100644
--- a/desktop/app/src/sandy-chrome/SandyApp.tsx
+++ b/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`,
diff --git a/desktop/plugins/hermesdebuggerrn/ChromeDevTools.tsx b/desktop/plugins/hermesdebuggerrn/ChromeDevTools.tsx
index 24cb98df6..45535e366 100644
--- a/desktop/plugins/hermesdebuggerrn/ChromeDevTools.tsx
+++ b/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';