Reattachment of the splash page event listeners (#22558) (#22560)
Gabriel Trompiz committed
Oct 15, 2021 at 08:16 UTC
9d3d03025cf2474286ee5d9ba642f3ea9377a435
2 files changed
+38
-22
packages/react-devtools-core/src/standalone.js
+10
@@ -42,11 +42,13 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
42
installHook(window);
43
44
export type StatusListener = (message: string) => void;
45
+export type OnDisconnectedCallback = () => void;
46
47
let node: HTMLElement = ((null: any): HTMLElement);
48
let nodeWaitingToConnectHTML: string = '';
49
let projectRoots: Array<string> = [];
50
let statusListener: StatusListener = (message: string) => {};
51
+let disconnectedCallback: OnDisconnectedCallback = () => {};
52
53
// TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
54
function hookNamesModuleLoaderFunction() {
@@ -73,6 +75,11 @@ function setStatusListener(value: StatusListener) {
75
return DevtoolsUI;
76
}
77
78
+function setDisconnectedCallback(value: OnDisconnectedCallback) {
79
+ disconnectedCallback = value;
80
+ return DevtoolsUI;
81
+}
82
+
83
let bridge: FrontendBridge | null = null;
84
let store: Store | null = null;
85
let root = null;
@@ -153,6 +160,8 @@ function onDisconnected() {
160
safeUnmount();
161
162
node.innerHTML = nodeWaitingToConnectHTML;
163
+
164
+ disconnectedCallback();
165
}
166
167
function onError({code, message}) {
@@ -389,6 +398,7 @@ const DevtoolsUI = {
398
setContentDOMNode,
399
setProjectRoots,
400
setStatusListener,
401
+ setDisconnectedCallback,
402
startServer,
403
openProfiler,
404
};
packages/react-devtools/app.html
+28
-22
@@ -182,11 +182,9 @@
182
const server = defaultPort ? `${protocol}://${host}` : `${protocol}://${host}:${port}`;
183
const serverIp = defaultPort ? `${protocol}://${localIp}` : `${protocol}://${localIp}:${port}`;
184
const $ = document.querySelector.bind(document);
185
- const $promptDiv = $("#box-content-prompt");
186
- const $confirmationDiv = $("#box-content-confirmation");
187
-
185
+
186
let timeoutID;
189
-
187
+
188
function selectAllAndCopy(event) {
189
const element = event.target;
190
if (window.getSelection) {
@@ -196,7 +194,9 @@
194
selection.removeAllRanges();
195
selection.addRange(range);
196
clipboard.writeText(event.target.textContent);
199
-
197
+
198
+ const $promptDiv = $("#box-content-prompt");
199
+ const $confirmationDiv = $("#box-content-confirmation");
200
$promptDiv.classList.add('hidden');
201
$confirmationDiv.classList.remove('hidden');
202
@@ -217,24 +217,29 @@
217
.openProfiler();
218
}
219
220
- const link = $('#rn-help-link');
221
- link.addEventListener('click', event => {
222
- event.preventDefault();
223
- require('electron').shell.openExternal(link.href);
224
- });
225
-
226
- const $localhost = $("#localhost");
227
- $localhost.innerText = `<script src="${server}"></` + 'script>';
228
- $localhost.addEventListener('click', selectAllAndCopy);
229
- $localhost.addEventListener('focus', selectAllAndCopy);
230
-
231
- const $byIp = $("#byip");
232
- $byIp.innerText = `<script src="${serverIp}"></` + 'script>';
233
- $byIp.addEventListener('click', selectAllAndCopy);
234
- $byIp.addEventListener('focus', selectAllAndCopy);
220
+ function attachListeners() {
221
+ const link = $('#rn-help-link');
222
+ link.addEventListener('click', event => {
223
+ event.preventDefault();
224
+ require('electron').shell.openExternal(link.href);
225
+ });
226
+
227
+ const $localhost = $("#localhost");
228
+ $localhost.innerText = `<script src="${server}"></` + 'script>';
229
+ $localhost.addEventListener('click', selectAllAndCopy);
230
+ $localhost.addEventListener('focus', selectAllAndCopy);
231
+
232
+ const $byIp = $("#byip");
233
+ $byIp.innerText = `<script src="${serverIp}"></` + 'script>';
234
+ $byIp.addEventListener('click', selectAllAndCopy);
235
+ $byIp.addEventListener('focus', selectAllAndCopy);
236
+
237
+ const $profiler = $("#profiler");
238
+ $profiler.addEventListener('click', openProfiler);
239
+ };
240
236
- const $profiler = $("#profiler");
237
- $profiler.addEventListener('click', openProfiler);
241
+ // Initially attach the listeners
242
+ attachListeners();
243
244
let devtools;
245
try {
@@ -248,6 +253,7 @@
253
window.devtools = devtools;
254
window.server = devtools
255
.setContentDOMNode(document.getElementById("container"))
256
+ .setDisconnectedCallback(attachListeners)
257
.setStatusListener(function(status) {
258
const element = document.getElementById("loading-status");
259
if (element) {