diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index b730919b256..35ec07d0752 100644 --- a/config/gni/devtools_grd_files.gni +++ b/config/gni/devtools_grd_files.gni @@ -536,6 +536,8 @@ grd_files_release_sources = [ "front_end/panels/recorder/recorder-meta.js", "front_end/panels/recorder/recorder.js", "front_end/panels/recorder/util/util.js", + "front_end/panels/react_devtools_placeholder/react_devtools_placeholder-meta.js", + "front_end/panels/react_devtools_placeholder/react_devtools_placeholder.js", "front_end/panels/rn_welcome/rn_welcome-meta.js", "front_end/panels/rn_welcome/rn_welcome.js", "front_end/panels/screencast/screencast-meta.js", @@ -1456,6 +1458,8 @@ grd_files_debug_sources = [ "front_end/panels/recorder/models/Tooltip.js", "front_end/panels/recorder/recorderController.css.js", "front_end/panels/recorder/util/SharedObject.js", + "front_end/panels/react_devtools_placeholder/ReactDevToolsPlaceholder.js", + "front_end/panels/react_devtools_placeholder/reactDevToolsPlaceholder.css.js", "front_end/panels/rn_welcome/RNWelcome.js", "front_end/panels/rn_welcome/rnWelcome.css.js", "front_end/panels/screencast/InputModel.js", diff --git a/front_end/entrypoints/rn_fusebox/BUILD.gn b/front_end/entrypoints/rn_fusebox/BUILD.gn index 556d62a1e90..37f8538f278 100644 --- a/front_end/entrypoints/rn_fusebox/BUILD.gn +++ b/front_end/entrypoints/rn_fusebox/BUILD.gn @@ -28,6 +28,7 @@ devtools_entrypoint("entrypoint") { "../../panels/network:meta", "../../panels/performance_monitor:meta", "../../panels/recorder:meta", + "../../panels/react_devtools_placeholder:meta", "../../panels/rn_welcome:meta", "../../panels/security:meta", "../../panels/sensors:meta", diff --git a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts index 53a686695ae..d0ef68b5a44 100644 --- a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts +++ b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts @@ -12,6 +12,7 @@ import '../../panels/issues/issues-meta.js'; import '../../panels/mobile_throttling/mobile_throttling-meta.js'; import '../../panels/network/network-meta.js'; import '../../panels/js_profiler/js_profiler-meta.js'; +import '../../panels/react_devtools_placeholder/react_devtools_placeholder-meta.js'; import '../../panels/rn_welcome/rn_welcome-meta.js'; import * as i18n from '../../core/i18n/i18n.js'; diff --git a/front_end/panels/react_devtools_placeholder/BUILD.gn b/front_end/panels/react_devtools_placeholder/BUILD.gn new file mode 100644 index 00000000000..d82d75e5729 --- /dev/null +++ b/front_end/panels/react_devtools_placeholder/BUILD.gn @@ -0,0 +1,55 @@ +# Copyright (c) Meta Platforms, Inc. and affiliates. +# Copyright 2020 The Chromium Authors. All rights reserved. +# Use of this source code is governed by a BSD-style license that can be +# found in the LICENSE file. + +import("../../../scripts/build/ninja/devtools_entrypoint.gni") +import("../../../scripts/build/ninja/devtools_module.gni") +import("../../../scripts/build/ninja/generate_css.gni") +import("../visibility.gni") + +generate_css("css_files") { + sources = [ "reactDevToolsPlaceholder.css" ] +} + +devtools_module("react_devtools_placeholder") { + sources = [ "ReactDevToolsPlaceholder.ts" ] + + deps = [ + "../../core/host:bundle", + "../../core/i18n:bundle", + "../../core/protocol_client:bundle", + "../../core/sdk:bundle", + "../../models/text_utils:bundle", + "../../ui/components/data_grid:bundle", + "../../ui/components/icon_button:bundle", + "../../ui/legacy:bundle", + "../../ui/lit-html:bundle", + ] +} + +devtools_entrypoint("bundle") { + entrypoint = "react_devtools_placeholder.ts" + + deps = [ + ":css_files", + ":react_devtools_placeholder", + ] + + visibility = [ + ":*", + "../../../test/unittests/front_end/entrypoints/missing_entrypoints/*", + # "../../../test/unittests/front_end/panels/react_devtools_placeholder/*", + "../../entrypoints/*", + ] + + visibility += devtools_panels_visibility +} + +devtools_entrypoint("meta") { + entrypoint = "react_devtools_placeholder-meta.ts" + + deps = [ ":bundle" ] + + visibility = [ "../../entrypoints/*" ] +} diff --git a/front_end/panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts b/front_end/panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts new file mode 100644 index 00000000000..1b1ece621d9 --- /dev/null +++ b/front_end/panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts @@ -0,0 +1,78 @@ +// Copyright (c) Meta Platforms, Inc. and affiliates. +// Copyright 2018 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import * as i18n from '../../core/i18n/i18n.js'; +import * as UI from '../../ui/legacy/legacy.js'; +import * as LitHtml from '../../ui/lit-html/lit-html.js'; + +import ReactDevToolsPlaceholderStyles from './reactDevToolsPlaceholder.css.js'; + +const UIStrings = { + /** @description Placeholder message */ + placeholderMessage: '[FB-only] React DevTools is coming soon! ⚡', +}; +const {render, html} = LitHtml; + +const str_ = i18n.i18n.registerUIStrings('panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts', UIStrings); +const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); + +let instance: ReactDevToolsPlaceholderImpl; + +export class ReactDevToolsPlaceholderImpl extends UI.Widget.VBox { + static instance(opts: {forceNew: null|boolean} = {forceNew: null}): ReactDevToolsPlaceholderImpl { + const {forceNew} = opts; + if (!instance || forceNew) { + instance = new ReactDevToolsPlaceholderImpl(); + } + return instance; + } + + private constructor() { + super(true, true); + } + + override wasShown(): void { + super.wasShown(); + this.registerCSSFiles([ReactDevToolsPlaceholderStyles]); + this.render(); + UI.InspectorView.InspectorView.instance().setDrawerMinimized(true); + } + + override willHide(): void { + UI.InspectorView.InspectorView.instance().setDrawerMinimized(false); + } + + render(): void { + render( + html` +
+
+
+ ${i18nString(UIStrings.placeholderMessage)} +
+
+ Soon, you will be able to use React DevTools within this panel and + inspect multiple apps at once. In the meantime, you can connect to + your app using the standalone React DevTools. +
+
+ js1 devtools + or + npx react-devtools +
+ https://fburl.com/workplace/og7mt427 +
+
+ `, + this.contentElement, {host: this}); + } +} diff --git a/front_end/panels/react_devtools_placeholder/reactDevToolsPlaceholder.css b/front_end/panels/react_devtools_placeholder/reactDevToolsPlaceholder.css new file mode 100644 index 00000000000..cde82dd57d8 --- /dev/null +++ b/front_end/panels/react_devtools_placeholder/reactDevToolsPlaceholder.css @@ -0,0 +1,53 @@ +/* + * Copyright (c) Meta Platforms, Inc. and affiliates. + * Copyright 2021 The Chromium Authors. All rights reserved. + * Use of this source code is governed by a BSD-style license that can be + * found in the LICENSE file. + */ + +.rn-devtools-placeholder-panel { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + padding: 16px; + text-align: center; + background-color: var(--color-background); +} + +.rn-devtoools-placeholder-main { + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 16px; + padding: 24px; + max-width: 560px; + border-radius: 4px; + background-color: var(--color-background-elevation-1); +} + +.rn-devtoools-placeholder-title { + font-size: 1rem; + color: var(--color-text-primary); +} + +.rn-devtools-placeholder-detail { + margin-top: 16px; + font-size: 14px; + line-height: 1.5; + color: var(--color-text-secondary); +} + +.rn-devtools-placeholder-code { + padding: 2px 8px; + border-radius: 4px; + background-color: var(--color-background); + pointer-events: all; + cursor: auto; + user-select: all; +} + +.rn-devtools-placeholder-link { + margin-top: 12px; +} diff --git a/front_end/panels/react_devtools_placeholder/react_devtools_placeholder-meta.ts b/front_end/panels/react_devtools_placeholder/react_devtools_placeholder-meta.ts new file mode 100644 index 00000000000..9b5a2ca64df --- /dev/null +++ b/front_end/panels/react_devtools_placeholder/react_devtools_placeholder-meta.ts @@ -0,0 +1,46 @@ +// Copyright (c) Meta Platforms, Inc. and affiliates. +// Copyright 2020 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import * as i18n from '../../core/i18n/i18n.js'; +import * as Root from '../../core/root/root.js'; +import * as UI from '../../ui/legacy/legacy.js'; + +import type * as ReactDevToolsPlaceholder from './react_devtools_placeholder.js'; + +const UIStrings = { + /** + * @description Title of the React DevTools placeholder panel, plus an emoji symbolizing React Native + */ + reactDevToolsWelcome: '⚛️ React DevTools', + + /** + * @description Command for showing the React DevTools placeholder panel + */ + showReactDevTools: 'Show React DevTools panel', +}; +const str_ = i18n.i18n.registerUIStrings('panels/react_devtools_placeholder/react_devtools_placeholder-meta.ts', UIStrings); +const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_); + +let loadedReactDevToolsPlaceholderModule: (typeof ReactDevToolsPlaceholder|undefined); + +async function loadReactDevToolsPlaceholderModule(): Promise { + if (!loadedReactDevToolsPlaceholderModule) { + loadedReactDevToolsPlaceholderModule = await import('./react_devtools_placeholder.js'); + } + return loadedReactDevToolsPlaceholderModule; +} + +UI.ViewManager.registerViewExtension({ + location: UI.ViewManager.ViewLocationValues.PANEL, + id: 'react-devtools-placeholder', + title: i18nLazyString(UIStrings.reactDevToolsWelcome), + commandPrompt: i18nLazyString(UIStrings.showReactDevTools), + order: 110, + persistence: UI.ViewManager.ViewPersistence.PERMANENT, + async loadView() { + const ReactDevToolsPlaceholder = await loadReactDevToolsPlaceholderModule(); + return ReactDevToolsPlaceholder.ReactDevToolsPlaceholder.ReactDevToolsPlaceholderImpl.instance(); + }, +}); diff --git a/front_end/panels/react_devtools_placeholder/react_devtools_placeholder.ts b/front_end/panels/react_devtools_placeholder/react_devtools_placeholder.ts new file mode 100644 index 00000000000..dd8d0b9ff31 --- /dev/null +++ b/front_end/panels/react_devtools_placeholder/react_devtools_placeholder.ts @@ -0,0 +1,12 @@ +// Copyright (c) Meta Platforms, Inc. and affiliates. +// Copyright 2019 The Chromium Authors. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import './ReactDevToolsPlaceholder.js'; + +import * as ReactDevToolsPlaceholder from './ReactDevToolsPlaceholder.js'; + +export { + ReactDevToolsPlaceholder, +}; diff --git a/scripts/eslint_rules/lib/check_license_header.js b/scripts/eslint_rules/lib/check_license_header.js index c23b6d9eeac..f1e6059c930 100644 --- a/scripts/eslint_rules/lib/check_license_header.js +++ b/scripts/eslint_rules/lib/check_license_header.js @@ -68,6 +68,7 @@ const EXCLUDED_FILES = [ const META_CODE_PATHS = [ 'entrypoints/rn_inspector', + 'panels/react_devtools_placeholder', 'panels/rn_welcome', 'core/host/RNPerfMetrics.ts', 'global_typings/react_native.d.ts',