From e29222fba76bc13b1aa48dc822a110ae12014fe8 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 15 Apr 2021 07:46:28 -0700
Subject: [PATCH] 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 |  2 +-
 desktop/static/main.ts              | 38 ++++++++++++++++++++++++++---
 docs/extending/dev-setup.mdx        |  5 +++-
 3 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/desktop/scripts/start-dev-server.ts b/desktop/scripts/start-dev-server.ts
index cc6d58ba7..e21edb523 100644
--- a/desktop/scripts/start-dev-server.ts
+++ b/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': {
diff --git a/desktop/static/main.ts b/desktop/static/main.ts
index 2305ce80f..e2b9a4108 100644
--- a/desktop/static/main.ts
+++ b/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);
-      installExtension(REDUX_DEVTOOLS.id);
+      // if set, try to download a newever version of the dev tools
+      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);
+        });
+      }
     }
   });
 });
diff --git a/docs/extending/dev-setup.mdx b/docs/extending/dev-setup.mdx
index dde4ad4f1..9c4153e17 100644
--- a/docs/extending/dev-setup.mdx
+++ b/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]