Skip to content

Commit 72b8929

Browse files
huntiehuntie
authored
Move Reconnect DevTools toolbar button to own module (#140)
1 parent 8831e78 commit 72b8929

File tree

4 files changed

+100
-75
lines changed

4 files changed

+100
-75
lines changed

‎config/gni/devtools_grd_files.gni‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -843,6 +843,7 @@ grd_files_debug_sources = [
843843
"front_end/entrypoints/node_app/NodeMain.js",
844844
"front_end/entrypoints/node_app/nodeConnectionsPanel.css.js",
845845
"front_end/entrypoints/rn_fusebox/FuseboxProfilingBuildObserver.js",
846+
"front_end/entrypoints/rn_fusebox/FuseboxReconnectDeviceButton.js",
846847
"front_end/entrypoints/shell/browser_compatibility_guard.js",
847848
"front_end/entrypoints/wasmparser_worker/WasmParserWorker.js",
848849
"front_end/entrypoints/worker_app/WorkerMain.js",

‎front_end/entrypoints/rn_fusebox/BUILD.gn‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import("../visibility.gni")
99

1010
devtools_module("rn_fusebox") {
1111
sources = [
12+
"FuseboxReconnectDeviceButton.ts",
1213
"FuseboxProfilingBuildObserver.ts",
1314
]
1415

‎front_end/entrypoints/rn_fusebox/FuseboxReconnectDeviceButton.ts‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
// Copyright (c) Meta Platforms, Inc. and affiliates.
2+
// Copyright 2024 The Chromium Authors. All rights reserved.
3+
// Use of this source code is governed by a BSD-style license that can be
4+
// found in the LICENSE file.
5+
6+
import * as Common from '../../core/common/common.js';
7+
import * as i18n from '../../core/i18n/i18n.js';
8+
import * as SDK from '../../core/sdk/sdk.js';
9+
import * as Protocol from '../../generated/protocol.js';
10+
import * as UI from '../../ui/legacy/legacy.js';
11+
12+
const UIStrings = {
13+
/**
14+
*@description Tooltip of the connection status toolbar button while disconnected
15+
*/
16+
connectionStatusDisconnectedTooltip: 'Debugging connection was closed',
17+
/**
18+
*@description Button label of the connection status toolbar button while disconnected
19+
*/
20+
connectionStatusDisconnectedLabel: 'Reconnect DevTools',
21+
};
22+
const str_ = i18n.i18n.registerUIStrings('entrypoints/rn_fusebox/ConnectionStatusToolbarItem.ts', UIStrings);
23+
const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
24+
25+
let connectionStatusIndicatorInstance: FuseboxReconnectDeviceButton;
26+
27+
export default class FuseboxReconnectDeviceButton extends SDK.TargetManager.Observer implements
28+
UI.Toolbar.Provider {
29+
#button = new UI.Toolbar.ToolbarButton('');
30+
31+
private constructor() {
32+
super();
33+
this.#button.setVisible(false);
34+
this.#button.element.classList.add('fusebox-connection-status');
35+
this.#button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.#handleClick.bind(this));
36+
37+
SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
38+
}
39+
40+
static instance(): FuseboxReconnectDeviceButton {
41+
if (!connectionStatusIndicatorInstance) {
42+
connectionStatusIndicatorInstance = new FuseboxReconnectDeviceButton();
43+
}
44+
return connectionStatusIndicatorInstance;
45+
}
46+
47+
override targetAdded(target: SDK.Target.Target): void {
48+
this.#onTargetChanged(target);
49+
}
50+
51+
override targetRemoved(target: SDK.Target.Target): void {
52+
this.#onTargetChanged(target);
53+
}
54+
55+
#onTargetChanged(target: SDK.Target.Target): void {
56+
const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
57+
this.#button.setTitle(i18nLazyString(UIStrings.connectionStatusDisconnectedTooltip)());
58+
this.#button.setText(i18nLazyString(UIStrings.connectionStatusDisconnectedLabel)());
59+
this.#button.setVisible(!rootTarget);
60+
61+
if (!rootTarget) {
62+
this.#printPreserveLogPrompt(target);
63+
}
64+
}
65+
66+
#printPreserveLogPrompt(target: SDK.Target.Target): void {
67+
if (Common.Settings.Settings.instance().moduleSetting('preserve-console-log').get()) {
68+
return;
69+
}
70+
71+
target.model(SDK.ConsoleModel.ConsoleModel)
72+
?.addMessage(new SDK.ConsoleModel.ConsoleMessage(
73+
target.model(SDK.RuntimeModel.RuntimeModel), Protocol.Log.LogEntrySource.Recommendation,
74+
Protocol.Log.LogEntryLevel.Info,
75+
'[React Native] Console messages are currently cleared upon DevTools disconnection. You can preserve logs in settings: ',
76+
{
77+
type: SDK.ConsoleModel.FrontendMessageType.System,
78+
context: 'fusebox_preserve_log_rec',
79+
}));
80+
}
81+
82+
#handleClick(): void {
83+
window.location.reload();
84+
}
85+
86+
item(): UI.Toolbar.ToolbarItem {
87+
return this.#button;
88+
}
89+
}

‎front_end/entrypoints/rn_fusebox/rn_fusebox.ts‎

Lines changed: 9 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,20 @@ import '../../panels/timeline/timeline-meta.js';
1919
import * as Host from '../../core/host/host.js';
2020
import * as i18n from '../../core/i18n/i18n.js';
2121
import * as Root from '../../core/root/root.js';
22+
import * as RNExperiments from '../../core/rn_experiments/rn_experiments.js';
2223
import * as SDK from '../../core/sdk/sdk.js';
2324
import * as UI from '../../ui/legacy/legacy.js';
2425
import * as Main from '../main/main.js';
2526
import * as Common from '../../core/common/common.js';
2627
import * as Protocol from '../../generated/protocol.js';
28+
import FuseboxReconnectDeviceButton from './FuseboxReconnectDeviceButton.js';
29+
import FuseboxProfilingBuildObserver from './FuseboxProfilingBuildObserver.js';
2730

2831
import type * as Platform from '../../core/platform/platform.js';
2932
import type * as Sources from '../../panels/sources/sources.js';
30-
import * as RNExperiments from '../../core/rn_experiments/rn_experiments.js';
31-
import FuseboxProfilingBuildObserver from './FuseboxProfilingBuildObserver.js';
3233

33-
/*
34-
* To ensure accurate timing measurements,
35-
* please make sure these perf metrics lines are called ahead of everything else
36-
*/
34+
// To ensure accurate timing measurements, please make sure these perf metrics
35+
// lines are called ahead of everything else
3736
Host.rnPerfMetrics.registerPerfMetricsGlobalPostMessageHandler();
3837
Host.rnPerfMetrics.registerGlobalErrorReporting();
3938
Host.rnPerfMetrics.setLaunchId(Root.Runtime.Runtime.queryParam('launchId'));
@@ -52,14 +51,6 @@ const UIStrings = {
5251
*@description Label of the FB-only 'send feedback' action button in the toolbar
5352
*/
5453
sendFeedback: '[FB-only] Send feedback',
55-
/**
56-
*@description Tooltip of the connection status toolbar button while disconnected
57-
*/
58-
connectionStatusDisconnectedTooltip: 'Debugging connection was closed',
59-
/**
60-
*@description Button label of the connection status toolbar button while disconnected
61-
*/
62-
connectionStatusDisconnectedLabel: 'Reconnect DevTools',
6354
};
6455
const str_ = i18n.i18n.registerUIStrings('entrypoints/rn_fusebox/rn_fusebox.ts', UIStrings);
6556
const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -141,9 +132,9 @@ if (globalThis.FB_ONLY__reactNativeFeedbackLink) {
141132
if (incomingActionId !== actionId) {
142133
return false;
143134
}
144-
Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
145-
feedbackLink,
146-
);
135+
Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
136+
feedbackLink,
137+
);
147138

148139
return true;
149140
},
@@ -166,67 +157,10 @@ if (globalThis.FB_ONLY__reactNativeFeedbackLink) {
166157
});
167158
}
168159

169-
class ConnectionStatusToolbarItemProvider extends SDK.TargetManager.Observer implements UI.Toolbar.Provider {
170-
#button = new UI.Toolbar.ToolbarButton('');
171-
172-
constructor() {
173-
super();
174-
this.#button.setVisible(false);
175-
this.#button.element.classList.add('fusebox-connection-status');
176-
this.#button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.onClick.bind(this));
177-
178-
SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
179-
}
180-
181-
override targetAdded(target: SDK.Target.Target): void {
182-
this.#onTargetChanged(target);
183-
}
184-
185-
override targetRemoved(target: SDK.Target.Target): void {
186-
this.#onTargetChanged(target);
187-
}
188-
189-
#onTargetChanged(target: SDK.Target.Target): void {
190-
const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
191-
this.#button.setTitle(i18nLazyString(UIStrings.connectionStatusDisconnectedTooltip)());
192-
this.#button.setText(i18nLazyString(UIStrings.connectionStatusDisconnectedLabel)());
193-
this.#button.setVisible(!rootTarget);
194-
195-
if (!rootTarget) {
196-
this.#printPreserveLogPrompt(target);
197-
}
198-
}
199-
200-
#printPreserveLogPrompt(target: SDK.Target.Target): void {
201-
if (Common.Settings.Settings.instance().moduleSetting('preserve-console-log').get()) {
202-
return;
203-
}
204-
205-
target.model(SDK.ConsoleModel.ConsoleModel)
206-
?.addMessage(new SDK.ConsoleModel.ConsoleMessage(
207-
target.model(SDK.RuntimeModel.RuntimeModel), Protocol.Log.LogEntrySource.Recommendation,
208-
Protocol.Log.LogEntryLevel.Info,
209-
'[React Native] Console messages are currently cleared upon DevTools disconnection. You can preserve logs in settings: ',
210-
{
211-
type: SDK.ConsoleModel.FrontendMessageType.System,
212-
context: 'fusebox_preserve_log_rec',
213-
}));
214-
}
215-
216-
onClick(): void {
217-
window.location.reload();
218-
}
219-
220-
item(): UI.Toolbar.ToolbarItem {
221-
return this.#button;
222-
}
223-
}
224-
225-
const connectionStatusToolbarItemProvider = new ConnectionStatusToolbarItemProvider();
226160
UI.Toolbar.registerToolbarItem({
227161
location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_RIGHT,
228162
loadItem: async () => {
229-
return connectionStatusToolbarItemProvider;
163+
return FuseboxReconnectDeviceButton.instance();
230164
},
231165
});
232166

0 commit comments

Comments
 (0)