Skip to content

Commit fe5f2a7

Browse files
huntiehuntie
committed
Create FB-only react_devtools_placeholder panel
1 parent 3c57538 commit fe5f2a7

File tree

9 files changed

+251
-0
lines changed

9 files changed

+251
-0
lines changed

‎config/gni/devtools_grd_files.gni‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -536,6 +536,8 @@ grd_files_release_sources = [
536536
"front_end/panels/recorder/recorder-meta.js",
537537
"front_end/panels/recorder/recorder.js",
538538
"front_end/panels/recorder/util/util.js",
539+
"front_end/panels/react_devtools_placeholder/react_devtools_placeholder-meta.js",
540+
"front_end/panels/react_devtools_placeholder/react_devtools_placeholder.js",
539541
"front_end/panels/rn_welcome/rn_welcome-meta.js",
540542
"front_end/panels/rn_welcome/rn_welcome.js",
541543
"front_end/panels/screencast/screencast-meta.js",
@@ -1456,6 +1458,8 @@ grd_files_debug_sources = [
14561458
"front_end/panels/recorder/models/Tooltip.js",
14571459
"front_end/panels/recorder/recorderController.css.js",
14581460
"front_end/panels/recorder/util/SharedObject.js",
1461+
"front_end/panels/react_devtools_placeholder/ReactDevToolsPlaceholder.js",
1462+
"front_end/panels/react_devtools_placeholder/reactDevToolsPlaceholder.css.js",
14591463
"front_end/panels/rn_welcome/RNWelcome.js",
14601464
"front_end/panels/rn_welcome/rnWelcome.css.js",
14611465
"front_end/panels/screencast/InputModel.js",

‎front_end/entrypoints/rn_fusebox/BUILD.gn‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ devtools_entrypoint("entrypoint") {
2828
"../../panels/network:meta",
2929
"../../panels/performance_monitor:meta",
3030
"../../panels/recorder:meta",
31+
"../../panels/react_devtools_placeholder:meta",
3132
"../../panels/rn_welcome:meta",
3233
"../../panels/security:meta",
3334
"../../panels/sensors:meta",

‎front_end/entrypoints/rn_fusebox/rn_fusebox.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import '../../panels/issues/issues-meta.js';
1212
import '../../panels/mobile_throttling/mobile_throttling-meta.js';
1313
import '../../panels/network/network-meta.js';
1414
import '../../panels/js_profiler/js_profiler-meta.js';
15+
import '../../panels/react_devtools_placeholder/react_devtools_placeholder-meta.js';
1516
import '../../panels/rn_welcome/rn_welcome-meta.js';
1617

1718
import * as i18n from '../../core/i18n/i18n.js';

‎front_end/panels/react_devtools_placeholder/BUILD.gn‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Copyright (c) Meta Platforms, Inc. and affiliates.
2+
# Copyright 2020 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("../../../scripts/build/ninja/devtools_entrypoint.gni")
7+
import("../../../scripts/build/ninja/devtools_module.gni")
8+
import("../../../scripts/build/ninja/generate_css.gni")
9+
import("../visibility.gni")
10+
11+
generate_css("css_files") {
12+
sources = [ "reactDevToolsPlaceholder.css" ]
13+
}
14+
15+
devtools_module("react_devtools_placeholder") {
16+
sources = [ "ReactDevToolsPlaceholder.ts" ]
17+
18+
deps = [
19+
"../../core/host:bundle",
20+
"../../core/i18n:bundle",
21+
"../../core/protocol_client:bundle",
22+
"../../core/sdk:bundle",
23+
"../../models/text_utils:bundle",
24+
"../../ui/components/data_grid:bundle",
25+
"../../ui/components/icon_button:bundle",
26+
"../../ui/legacy:bundle",
27+
"../../ui/lit-html:bundle",
28+
]
29+
}
30+
31+
devtools_entrypoint("bundle") {
32+
entrypoint = "react_devtools_placeholder.ts"
33+
34+
deps = [
35+
":css_files",
36+
":react_devtools_placeholder",
37+
]
38+
39+
visibility = [
40+
":*",
41+
"../../../test/unittests/front_end/entrypoints/missing_entrypoints/*",
42+
# "../../../test/unittests/front_end/panels/react_devtools_placeholder/*",
43+
"../../entrypoints/*",
44+
]
45+
46+
visibility += devtools_panels_visibility
47+
}
48+
49+
devtools_entrypoint("meta") {
50+
entrypoint = "react_devtools_placeholder-meta.ts"
51+
52+
deps = [ ":bundle" ]
53+
54+
visibility = [ "../../entrypoints/*" ]
55+
}

‎front_end/panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// Copyright (c) Meta Platforms, Inc. and affiliates.
2+
// Copyright 2018 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 i18n from '../../core/i18n/i18n.js';
7+
import * as UI from '../../ui/legacy/legacy.js';
8+
import * as LitHtml from '../../ui/lit-html/lit-html.js';
9+
10+
import ReactDevToolsPlaceholderStyles from './reactDevToolsPlaceholder.css.js';
11+
12+
const UIStrings = {
13+
/** @description Placeholder message */
14+
placeholderMessage: '[FB-only] React DevTools is coming soon! ⚡',
15+
};
16+
const {render, html} = LitHtml;
17+
18+
const str_ = i18n.i18n.registerUIStrings('panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts', UIStrings);
19+
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
20+
21+
let instance: ReactDevToolsPlaceholderImpl;
22+
23+
export class ReactDevToolsPlaceholderImpl extends UI.Widget.VBox {
24+
static instance(opts: {forceNew: null|boolean} = {forceNew: null}): ReactDevToolsPlaceholderImpl {
25+
const {forceNew} = opts;
26+
if (!instance || forceNew) {
27+
instance = new ReactDevToolsPlaceholderImpl();
28+
}
29+
return instance;
30+
}
31+
32+
private constructor() {
33+
super(true, true);
34+
}
35+
36+
override wasShown(): void {
37+
super.wasShown();
38+
this.registerCSSFiles([ReactDevToolsPlaceholderStyles]);
39+
this.render();
40+
UI.InspectorView.InspectorView.instance().setDrawerMinimized(true);
41+
}
42+
43+
override willHide(): void {
44+
UI.InspectorView.InspectorView.instance().setDrawerMinimized(false);
45+
}
46+
47+
render(): void {
48+
render(
49+
html`
50+
<div class="rn-devtools-placeholder-panel">
51+
<div class="rn-devtoools-placeholder-main">
52+
<div class="rn-devtoools-placeholder-title">
53+
${i18nString(UIStrings.placeholderMessage)}
54+
</div>
55+
<div class="rn-devtools-placeholder-detail">
56+
Soon, you will be able to use React DevTools within this panel and
57+
inspect multiple apps at once. In the meantime, you can connect to
58+
your app using the standalone React DevTools.
59+
</div>
60+
<div class="rn-devtools-placeholder-detail">
61+
<code class="rn-devtools-placeholder-code">js1 devtools</code>
62+
or
63+
<code class="rn-devtools-placeholder-code"
64+
>npx react-devtools</code
65+
>
66+
</div>
67+
<a
68+
class="devtools-link rn-devtools-placeholder-link"
69+
href="https://fburl.com/workplace/og7mt427"
70+
target="_blank"
71+
>https://fburl.com/workplace/og7mt427</a
72+
>
73+
</div>
74+
</div>
75+
`,
76+
this.contentElement, {host: this});
77+
}
78+
}

‎front_end/panels/react_devtools_placeholder/reactDevToolsPlaceholder.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
* Copyright 2021 The Chromium Authors. All rights reserved.
4+
* Use of this source code is governed by a BSD-style license that can be
5+
* found in the LICENSE file.
6+
*/
7+
8+
.rn-devtools-placeholder-panel {
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100%;
14+
padding: 16px;
15+
text-align: center;
16+
background-color: var(--color-background);
17+
}
18+
19+
.rn-devtoools-placeholder-main {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
margin-bottom: 16px;
24+
padding: 24px;
25+
max-width: 560px;
26+
border-radius: 4px;
27+
background-color: var(--color-background-elevation-1);
28+
}
29+
30+
.rn-devtoools-placeholder-title {
31+
font-size: 1rem;
32+
color: var(--color-text-primary);
33+
}
34+
35+
.rn-devtools-placeholder-detail {
36+
margin-top: 16px;
37+
font-size: 14px;
38+
line-height: 1.5;
39+
color: var(--color-text-secondary);
40+
}
41+
42+
.rn-devtools-placeholder-code {
43+
padding: 2px 8px;
44+
border-radius: 4px;
45+
background-color: var(--color-background);
46+
pointer-events: all;
47+
cursor: auto;
48+
user-select: all;
49+
}
50+
51+
.rn-devtools-placeholder-link {
52+
margin-top: 12px;
53+
}

‎front_end/panels/react_devtools_placeholder/react_devtools_placeholder-meta.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// Copyright (c) Meta Platforms, Inc. and affiliates.
2+
// Copyright 2020 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 i18n from '../../core/i18n/i18n.js';
7+
import * as Root from '../../core/root/root.js';
8+
import * as UI from '../../ui/legacy/legacy.js';
9+
10+
import type * as ReactDevToolsPlaceholder from './react_devtools_placeholder.js';
11+
12+
const UIStrings = {
13+
/**
14+
* @description Title of the React DevTools placeholder panel, plus an emoji symbolizing React Native
15+
*/
16+
reactDevToolsWelcome: '⚛️ React DevTools',
17+
18+
/**
19+
* @description Command for showing the React DevTools placeholder panel
20+
*/
21+
showReactDevTools: 'Show React DevTools panel',
22+
};
23+
const str_ = i18n.i18n.registerUIStrings('panels/react_devtools_placeholder/react_devtools_placeholder-meta.ts', UIStrings);
24+
const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
25+
26+
let loadedReactDevToolsPlaceholderModule: (typeof ReactDevToolsPlaceholder|undefined);
27+
28+
async function loadReactDevToolsPlaceholderModule(): Promise<typeof ReactDevToolsPlaceholder> {
29+
if (!loadedReactDevToolsPlaceholderModule) {
30+
loadedReactDevToolsPlaceholderModule = await import('./react_devtools_placeholder.js');
31+
}
32+
return loadedReactDevToolsPlaceholderModule;
33+
}
34+
35+
UI.ViewManager.registerViewExtension({
36+
location: UI.ViewManager.ViewLocationValues.PANEL,
37+
id: 'react-devtools-placeholder',
38+
title: i18nLazyString(UIStrings.reactDevToolsWelcome),
39+
commandPrompt: i18nLazyString(UIStrings.showReactDevTools),
40+
order: 110,
41+
persistence: UI.ViewManager.ViewPersistence.PERMANENT,
42+
async loadView() {
43+
const ReactDevToolsPlaceholder = await loadReactDevToolsPlaceholderModule();
44+
return ReactDevToolsPlaceholder.ReactDevToolsPlaceholder.ReactDevToolsPlaceholderImpl.instance();
45+
},
46+
});

‎front_end/panels/react_devtools_placeholder/react_devtools_placeholder.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Copyright (c) Meta Platforms, Inc. and affiliates.
2+
// Copyright 2019 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 './ReactDevToolsPlaceholder.js';
7+
8+
import * as ReactDevToolsPlaceholder from './ReactDevToolsPlaceholder.js';
9+
10+
export {
11+
ReactDevToolsPlaceholder,
12+
};

‎scripts/eslint_rules/lib/check_license_header.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const EXCLUDED_FILES = [
6868

6969
const META_CODE_PATHS = [
7070
'entrypoints/rn_inspector',
71+
'panels/react_devtools_placeholder',
7172
'panels/rn_welcome',
7273
'core/host/RNPerfMetrics.ts',
7374
'global_typings/react_native.d.ts',

0 commit comments

Comments
 (0)