Update and patch loading React DevTools

Summary:
When trying to run some React component performance profiles, the updates registered made absolutely no sense (components rerendering without any parent or other cause causing them to render etc). That turned out to be caused by having an outdated version of the React devTools in Flipper.

Sadly the newer version of the React DevTools didn't work with our current Electron version anymore. Some horrible hacking is needed to work around that.

To help with updating the tools in the future (they are by default cached forever on the local machine), I've introduced the `FLIPPER_UPDATE_DEV_TOOLS` variable.

The plugin loading work around is inspired by https://github.com/electron/electron/issues/23662#issuecomment-787420799

Reviewed By: passy

Differential Revision: D27685981

fbshipit-source-id: c35e49aff9b2457b63122eeee0d5c042ddd3b08b

desktop/scripts/start-dev-server.ts

@@ -62,7 +62,7 @@ const argv = yargs
     },
     'open-dev-tools': {
       describe:
-        'Open Dev Tools window on startup. The flag is disabled by default. Env var FLIPPER_OPEN_DEV_TOOLS is equivalent to the command-line option "--open-dev-tools".',
+        'Open Dev Tools window on startup. The flag is disabled by default. Env var FLIPPER_OPEN_DEV_TOOLS is equivalent to the command-line option "--open-dev-tools". If "FLIPPER_UPDATE_DEV_TOOLS=true" is set additionally, Flipper will try to update the dev tools from the play store.',
       type: 'boolean',
     },
     'dev-server-port': {

desktop/static/main.ts

@@ -28,6 +28,7 @@ import setup from './setup';
 import isFB from './fb-stubs/isFB';
 import delegateToLauncher from './launcher';
 import yargs from 'yargs';
+import {promisify} from 'util';
 
 const VERSION: string = (global as any).__VERSION__;
 
@@ -170,7 +171,7 @@ app.on('will-finish-launching', () => {
 
 app.on('ready', () => {
   // If we delegate to the launcher, shut down this instance of the app.
-  delegateToLauncher(argv).then((hasLauncherInvoked: boolean) => {
+  delegateToLauncher(argv).then(async (hasLauncherInvoked: boolean) => {
     if (hasLauncherInvoked) {
       app.quit();
       return;
@@ -186,8 +187,39 @@ app.on('ready', () => {
         REACT_DEVELOPER_TOOLS,
         REDUX_DEVTOOLS,
       } = require('electron-devtools-installer');
-      installExtension(REACT_DEVELOPER_TOOLS.id);
+      // if set, try to download a newever version of the dev tools
-      installExtension(REDUX_DEVTOOLS.id);
+      const forceDownload = process.env.FLIPPER_UPDATE_DEV_TOOLS === 'true';
+      if (forceDownload) {
+        console.log('Force updating DevTools');
+      }
+      // Redux
+      await installExtension(REDUX_DEVTOOLS.id).catch((e: any) => {
+        console.error('Failed to install Redux devtools extension', e);
+      }, forceDownload);
+      // React
+      // Fix for extension loading (see D27685981)
+      // Work around per https://github.com/electron/electron/issues/23662#issuecomment-787420799
+      const reactDevToolsPath = `${os.homedir()}/Library/Application Support/Electron/extensions/${
+        REACT_DEVELOPER_TOOLS.id
+      }`;
+      if (await promisify(fs.exists)(reactDevToolsPath)) {
+        console.log('Loading React devtools from disk ' + reactDevToolsPath);
+        await session.defaultSession
+          .loadExtension(
+            reactDevToolsPath,
+            // @ts-ignore only supported (and needed) in Electron 12
+            {allowFileAccess: true},
+          )
+          .catch((e) => {
+            console.error('Failed to loa React devtools from disk: ', e);
+          });
+      } else {
+        await installExtension(REACT_DEVELOPER_TOOLS.id, {
+          loadExtensionOptions: {allowFileAccess: true, forceDownload},
+        }).catch((e: any) => {
+          console.error('Failed to install React devtools extension', e);
+        });
+      }
     }
   });
 });

docs/extending/dev-setup.mdx

@@ -120,7 +120,10 @@ Options:
                         which means that all plugins loaded.             [array]
   --open-dev-tools      Open Dev Tools window on startup. The flag is disabled
                         by default. Env var FLIPPER_OPEN_DEV_TOOLS is equivalent
-                        to the command-line option "--open-dev-tools". [boolean]
+                        to the command-line option "--open-dev-tools". If 
+                        "FLIPPER_UPDATE_DEV_TOOLS=true" is set additionally, 
+                        Flipper will try to update the dev tools from the play 
+                        store.                                         [boolean]
   --dev-server-port     Dev server port. 3000 by default. Env var "PORT=3001" is
                         equivalent to the command-line option "--dev-server-port
                         3001".                          [number] [default: 3000]