Fix connection and DOM management of React DevTools

Summary:
This diff fixes several existing issues in the React DevTools:

Every time the user opened the plugin we re-instantiated the devtools, which has a few problems: 1) it looses all state (e.g. selection), and 2) this causes the tools to start a websocket listener on a new port, that was never cleaned up, or ever used, since React Native always connects to port 8097 anyway.

To preserve the state the idea of the original implementation was to move the devTools out of the current view, without disposing it. This actually didn't work in practice due to a faulty implementation, causing a full reinialization of the tools every time. Addressed this by reusing the mechanism that is used by the Hermes debugger tools as well.

By properly managing the port (e.g. closing it), there is no need to start (in vain) the devTools on a random port.

Port reversal for physical devices needs to happen only once, in principle upon connecting the device, so moved it to the device logic, which also avoids the need to hack into the global Flipper store.

Avoiding recreating the devTools makes plugin switching near instant, instead of needing to wait for a few seconds until the devTools connect.

When multiple apps are connected the behavior is now consistent: the application that refreshed last will be the one visible in the devTools. (That is still pretty suboptimal, but at least predicable and not a use case that is requested / supported in the DevTools themselves atm)

There is still ugly DOM business going on, did put that in a stand alone component for now.
Didn't extract the shared logic with Hermes plugin yet, but did verify both are still working correctly.

Changelog: [React DevTools] Several improvements that should improve the overal experience, the plugin should load much quicker and behave more predictably.

Reviewed By: bvaughn

Differential Revision: D28382587

fbshipit-source-id: 0f2787b24fa2afdf5014dbf1d79240606405199a

desktop/plugins/public/hermesdebuggerrn/ChromeDevTools.tsx

@@ -16,6 +16,7 @@ const devToolsNodeId = (url: string) =>
   `hermes-chromedevtools-out-of-react-node-${url.replace(/\W+/g, '-')}`;
 
 // TODO: build abstraction of this: T62306732
+// TODO: reuse reactdevtools/DevToolsEmbedder for this
 const TARGET_CONTAINER_ID = 'flipper-out-of-contents-container'; // should be a hook in the future
 
 function createDevToolsNode(
@@ -62,6 +63,8 @@ function attachDevTools(devToolsNode: HTMLElement) {
   document.getElementById(TARGET_CONTAINER_ID)!.style.display = 'block';
   document.getElementById(TARGET_CONTAINER_ID)!.parentElement!.style.display =
     'block';
+  document.getElementById(TARGET_CONTAINER_ID)!.parentElement!.style.height =
+    '100%';
 }
 
 function detachDevTools(devToolsNode: HTMLElement | null) {