Add React Devtools

ACKNOWLEDGMENTS.md

@@ -2566,6 +2566,10 @@ Signal Desktop makes use of the following open source projects.
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
+## react-devtools-core
+
+    License: MIT
+
 ## react-dom
 
     MIT License

app/config.ts

@@ -39,6 +39,7 @@ if (getEnvironment() === Environment.PackagedApp) {
   process.env.SIGNAL_ENABLE_HTTP = '';
   process.env.SIGNAL_CI_CONFIG = '';
   process.env.GENERATE_PRELOAD_CACHE = '';
+  process.env.REACT_DEVTOOLS = '';
 }
 
 // We load config after we've made our modifications to NODE_ENV

app/main.ts

@@ -2004,7 +2004,9 @@ app.on('ready', async () => {
   }
 
   installWebHandler({
-    enableHttp: Boolean(process.env.SIGNAL_ENABLE_HTTP),
+    enableHttp:
+      Boolean(process.env.SIGNAL_ENABLE_HTTP) ||
+      Boolean(process.env.REACT_DEVTOOLS),
     session: session.defaultSession,
   });
 

package.json

@@ -93,7 +93,9 @@
     "verify": "run-p --print-label verify:*",
     "verify:ts": "tsc --noEmit",
     "electron:install-app-deps": "electron-builder install-app-deps",
-    "check-upgradeable-deps": "ts-node ts/scripts/check-upgradeable-deps.ts"
+    "check-upgradeable-deps": "ts-node ts/scripts/check-upgradeable-deps.ts",
+    "react-devtools": "react-devtools",
+    "run-with-devtools": "cross-env REACT_DEVTOOLS=1 run-p --print-label react-devtools start"
   },
   "optionalDependencies": {
     "fs-xattr": "0.3.0"
@@ -171,6 +173,7 @@
     "react-aria-components": "1.4.1",
     "react-blurhash": "0.3.0",
     "react-contextmenu": "2.14.0",
+    "react-devtools-core": "6.0.1",
     "react-dom": "17.0.2",
     "react-hot-loader": "4.13.1",
     "react-intl": "6.8.7",
@@ -314,6 +317,7 @@
     "pngjs": "7.0.0",
     "prettier": "3.3.3",
     "protobufjs-cli": "1.1.1",
+    "react-devtools": "6.0.1",
     "resedit": "2.0.2",
     "resolve-url-loader": "5.0.0",
     "sass": "1.80.7",

ts/devtools-core.d.ts

@@ -0,0 +1,14 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+declare module 'react-devtools-core' {
+  type DevToolsOptions = {
+    useHttps?: boolean;
+  };
+
+  function initialize(): void;
+
+  function connectToDevTools(options?: DevToolsOptions): void;
+
+  export { initialize, connectToDevTools };
+}

ts/util/lint/exceptions.json

@@ -2803,5 +2803,48 @@
     "line": "  message.innerHTML = window.i18n('icu:optimizingApplication');",
     "reasonCategory": "usageTrusted",
     "updated": "2021-09-17T21:02:59.414Z"
+  },
+  {
+    "rule": "thenify-multiArgs",
+    "path": "node_modules/p-event/index.js",
+    "line": "\t\t\tmultiArgs: false,",
+    "reasonCategory": "falseMatch",
+    "updated": "2024-12-20T19:43:51.589Z"
+  },
+  {
+    "rule": "thenify-multiArgs",
+    "path": "node_modules/p-event/index.js",
+    "line": "\t\t\tconst value = options.multiArgs ? args : args[0];",
+    "reasonCategory": "falseMatch|testCode|exampleCode|otherUtilityCode|regexMatchedSafeCode|notExercisedByOurApp|ruleNeeded|usageTrusted",
+    "updated": "2024-12-20T19:43:51.589Z",
+    "reasonDetail": "<optional>"
+  },
+  {
+    "rule": "thenify-multiArgs",
+    "path": "node_modules/p-event/index.js",
+    "line": "\t\tmultiArgs: false,",
+    "reasonCategory": "falseMatch",
+    "updated": "2024-12-20T19:43:51.589Z"
+  },
+  {
+    "rule": "thenify-multiArgs",
+    "path": "node_modules/p-event/index.js",
+    "line": "\t\tconst value = options.multiArgs ? args : args[0];",
+    "reasonCategory": "otherUtilityCode",
+    "updated": "2024-12-20T19:43:51.589Z"
+  },
+  {
+    "rule": "thenify-multiArgs",
+    "path": "node_modules/p-event/index.js",
+    "line": "\t\terror = options.multiArgs ? args : args[0];",
+    "reasonCategory": "otherUtilityCode",
+    "updated": "2024-12-20T19:46:49.191Z"
+  },
+  {
+    "rule": "thenify-multiArgs",
+    "path": "node_modules/p-event/index.js",
+    "line": "\t\tconst value = options.multiArgs ? args : args[0];",
+    "reasonCategory": "otherUtilityCode",
+    "updated": "2024-12-20T19:46:49.191Z"
   }
 ]

ts/util/lint/linter.ts

@@ -227,6 +227,8 @@ const excludedFilesRegexp = RegExp(
     '^node_modules/protobufjs/cli/.+',
     '^node_modules/ramda/.+',
     '^node_modules/rambda/.+',
+    '^node_modules/react-devtools/.+',
+    '^node_modules/react-devtools-core/.+',
     '^node_modules/react-dev-utils/.+',
     '^node_modules/react-docgen/.+',
     '^node_modules/react-error-overlay/.+',

ts/windows/main/phase0-devtools.ts

@@ -0,0 +1,14 @@
+// Copyright 2025 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import '../context';
+import { initialize, connectToDevTools } from 'react-devtools-core';
+import { Environment, getEnvironment } from '../../environment';
+
+if (
+  getEnvironment() === Environment.Development &&
+  Boolean(process.env.REACT_DEVTOOLS)
+) {
+  initialize();
+  connectToDevTools();
+}

ts/windows/main/start.ts

@@ -6,6 +6,7 @@ import { contextBridge } from 'electron';
 
 import * as log from '../../logging/log';
 
+import './phase0-devtools';
 import './phase1-ipc';
 import '../preload';
 import './phase2-dependencies';