Reattachment of the splash page event listeners (facebook#22558)

gabrieltrompiz · Oct 14, 2021 · 001d632 · 001d632
1 parent c3a19e5
commit 001d632
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 22 deletions.
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
@@ -42,11 +42,13 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 installHook(window);
 
 export type StatusListener = (message: string) => void;
+export type OnShutdownCallback = () => void;
 
 let node: HTMLElement = ((null: any): HTMLElement);
 let nodeWaitingToConnectHTML: string = '';
 let projectRoots: Array<string> = [];
 let statusListener: StatusListener = (message: string) => {};
+let shutdownCallback: OnShutdownCallback = () => {};
 
 // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
 function hookNamesModuleLoaderFunction() {
@@ -73,6 +75,11 @@ function setStatusListener(value: StatusListener) {
  return DevtoolsUI;
 }
 
+function setDisconnectedCallback(value: OnShutdownCallback) {
+ shutdownCallback = value;
+ return DevtoolsUI;
+}
+
 let bridge: FrontendBridge | null = null;
 let store: Store | null = null;
 let root = null;
@@ -153,6 +160,8 @@ function onDisconnected() {
  safeUnmount();
 
  node.innerHTML = nodeWaitingToConnectHTML;
+
+ shutdownCallback();
 }
 
 function onError({code, message}) {
@@ -389,6 +398,7 @@ const DevtoolsUI = {
  setContentDOMNode,
  setProjectRoots,
  setStatusListener,
+ setDisconnectedCallback,
  startServer,
  openProfiler,
 };

diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
@@ -182,11 +182,9 @@
  const server = defaultPort ? `${protocol}://${host}` : `${protocol}://${host}:${port}`;
  const serverIp = defaultPort ? `${protocol}://${localIp}` : `${protocol}://${localIp}:${port}`;
  const $ = document.querySelector.bind(document);
- const $promptDiv = $("#box-content-prompt");
- const $confirmationDiv = $("#box-content-confirmation");
-
+
  let timeoutID;
-
+ 
  function selectAllAndCopy(event) {
  const element = event.target;
  if (window.getSelection) {
@@ -196,7 +194,9 @@
  selection.removeAllRanges();
  selection.addRange(range);
  clipboard.writeText(event.target.textContent);
-
+
+ const $promptDiv = $("#box-content-prompt");
+ const $confirmationDiv = $("#box-content-confirmation");
  $promptDiv.classList.add('hidden');
  $confirmationDiv.classList.remove('hidden');
 
@@ -217,24 +217,29 @@
  .openProfiler();
  }
 
- const link = $('#rn-help-link');
- link.addEventListener('click', event => {
- event.preventDefault();
- require('electron').shell.openExternal(link.href);
- });
-
- const $localhost = $("#localhost");
- $localhost.innerText = `<script src="${server}"></` + 'script>';
- $localhost.addEventListener('click', selectAllAndCopy);
- $localhost.addEventListener('focus', selectAllAndCopy);
-
- const $byIp = $("#byip");
- $byIp.innerText = `<script src="${serverIp}"></` + 'script>';
- $byIp.addEventListener('click', selectAllAndCopy);
- $byIp.addEventListener('focus', selectAllAndCopy);
+ function attachListeners() {
+ const link = $('#rn-help-link');
+ link.addEventListener('click', event => {
+ event.preventDefault();
+ require('electron').shell.openExternal(link.href);
+ });
+
+ const $localhost = $("#localhost");
+ $localhost.innerText = `<script src="${server}"></` + 'script>';
+ $localhost.addEventListener('click', selectAllAndCopy);
+ $localhost.addEventListener('focus', selectAllAndCopy);
+
+ const $byIp = $("#byip");
+ $byIp.innerText = `<script src="${serverIp}"></` + 'script>';
+ $byIp.addEventListener('click', selectAllAndCopy);
+ $byIp.addEventListener('focus', selectAllAndCopy);
+
+ const $profiler = $("#profiler");
+ $profiler.addEventListener('click', openProfiler);
+ };
 
- const $profiler = $("#profiler");
- $profiler.addEventListener('click', openProfiler);
+ // Initially attach the listeners
+ attachListeners();
 
  let devtools;
  try {
@@ -248,6 +253,7 @@
  window.devtools = devtools;
  window.server = devtools
  .setContentDOMNode(document.getElementById("container"))
+ .setDisconnectedCallback(attachListeners)
  .setStatusListener(function(status) {
  const element = document.getElementById("loading-status");
  if (element) {