diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 35ec07d0752..746e614edeb 100644 --- a/config/gni/devtools_grd_files.gni +++ b/config/gni/devtools_grd_files.gni @@ -525,6 +525,8 @@ grd_files_release_sources = [ "front_end/panels/protocol_monitor/components/components.js", "front_end/panels/protocol_monitor/protocol_monitor-meta.js", "front_end/panels/protocol_monitor/protocol_monitor.js", + "front_end/panels/react_devtools/react_devtools-meta.js", + "front_end/panels/react_devtools/react_devtools.js", "front_end/panels/recorder/components/components.js", "front_end/panels/recorder/controllers/controllers.js", "front_end/panels/recorder/converters/converters.js", @@ -536,8 +538,6 @@ 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", @@ -1393,6 +1393,9 @@ grd_files_debug_sources = [ "front_end/panels/protocol_monitor/components/JSONEditor.css.js", "front_end/panels/protocol_monitor/components/JSONEditor.js", "front_end/panels/protocol_monitor/protocolMonitor.css.js", + "front_end/panels/react_devtools/reactDevToolsPlaceholder.css.js", + "front_end/panels/react_devtools/ReactDevToolsPlaceholder.js", + "front_end/panels/react_devtools/ReactDevToolsView.js", "front_end/panels/recorder/RecorderController.js", "front_end/panels/recorder/RecorderEvents.js", "front_end/panels/recorder/RecorderPanel.js", @@ -1458,8 +1461,6 @@ 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 37f8538f278..1e8b948d15c 100644 --- a/front_end/entrypoints/rn_fusebox/BUILD.gn +++ b/front_end/entrypoints/rn_fusebox/BUILD.gn @@ -28,7 +28,7 @@ devtools_entrypoint("entrypoint") { "../../panels/network:meta", "../../panels/performance_monitor:meta", "../../panels/recorder:meta", - "../../panels/react_devtools_placeholder:meta", + "../../panels/react_devtools: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 d0ef68b5a44..afb5505ce98 100644 --- a/front_end/entrypoints/rn_fusebox/rn_fusebox.ts +++ b/front_end/entrypoints/rn_fusebox/rn_fusebox.ts @@ -1,3 +1,7 @@ +// Copyright 2024 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. + // 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 @@ -12,7 +16,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/react_devtools/react_devtools-meta.js'; import '../../panels/rn_welcome/rn_welcome-meta.js'; import * as i18n from '../../core/i18n/i18n.js'; @@ -59,7 +63,7 @@ Root.Runtime.experiments.register( Root.Runtime.experiments.register( Root.Runtime.ExperimentName.ENABLE_REACT_DEVTOOLS_PANEL, - 'Enable React DevTools panel', + 'Enable React DevTools', /* unstable */ true, ); diff --git a/front_end/panels/react_devtools_placeholder/BUILD.gn b/front_end/panels/react_devtools/BUILD.gn similarity index 63% rename from front_end/panels/react_devtools_placeholder/BUILD.gn rename to front_end/panels/react_devtools/BUILD.gn index d82d75e5729..30885f373dc 100644 --- a/front_end/panels/react_devtools_placeholder/BUILD.gn +++ b/front_end/panels/react_devtools/BUILD.gn @@ -1,5 +1,5 @@ # Copyright (c) Meta Platforms, Inc. and affiliates. -# Copyright 2020 The Chromium Authors. All rights reserved. +# Copyright 2024 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. @@ -16,30 +16,31 @@ devtools_module("react_devtools_placeholder") { sources = [ "ReactDevToolsPlaceholder.ts" ] deps = [ - "../../core/host:bundle", + ":css_files", "../../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_module("react_devtools") { + sources = [ "ReactDevToolsView.ts" ] + + deps = [ + "../../ui/legacy:bundle", + ] +} + devtools_entrypoint("bundle") { - entrypoint = "react_devtools_placeholder.ts" + entrypoint = "react_devtools.ts" deps = [ - ":css_files", ":react_devtools_placeholder", + ":react_devtools", ] visibility = [ ":*", - "../../../test/unittests/front_end/entrypoints/missing_entrypoints/*", - # "../../../test/unittests/front_end/panels/react_devtools_placeholder/*", "../../entrypoints/*", ] @@ -47,7 +48,7 @@ devtools_entrypoint("bundle") { } devtools_entrypoint("meta") { - entrypoint = "react_devtools_placeholder-meta.ts" + entrypoint = "react_devtools-meta.ts" deps = [ ":bundle" ] diff --git a/front_end/panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts b/front_end/panels/react_devtools/ReactDevToolsPlaceholder.ts similarity index 92% rename from front_end/panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts rename to front_end/panels/react_devtools/ReactDevToolsPlaceholder.ts index cf671cf285a..bc960086990 100644 --- a/front_end/panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts +++ b/front_end/panels/react_devtools/ReactDevToolsPlaceholder.ts @@ -1,5 +1,5 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. -// Copyright 2018 The Chromium Authors. All rights reserved. +// Copyright 2024 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. @@ -15,7 +15,7 @@ const UIStrings = { }; const {render, html} = LitHtml; -const str_ = i18n.i18n.registerUIStrings('panels/react_devtools_placeholder/ReactDevToolsPlaceholder.ts', UIStrings); +const str_ = i18n.i18n.registerUIStrings('panels/react_devtools/ReactDevToolsPlaceholder.ts', UIStrings); const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); let instance: ReactDevToolsPlaceholderImpl; diff --git a/front_end/panels/react_devtools/ReactDevToolsView.ts b/front_end/panels/react_devtools/ReactDevToolsView.ts new file mode 100644 index 00000000000..df585b6fe84 --- /dev/null +++ b/front_end/panels/react_devtools/ReactDevToolsView.ts @@ -0,0 +1,32 @@ +// Copyright (c) Meta Platforms, Inc. and affiliates. +// Copyright 2024 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 UI from '../../ui/legacy/legacy.js'; + +let instance: ReactDevToolsViewImpl; + +export class ReactDevToolsViewImpl extends UI.Widget.VBox { + static instance(): ReactDevToolsViewImpl { + if (!instance) { + instance = new ReactDevToolsViewImpl(); + } + + return instance; + } + + private constructor() { + super(true, true); + } + + override wasShown(): void { + super.wasShown(); + + this.render(); + } + + render(): void { + return; + } +} diff --git a/front_end/panels/react_devtools_placeholder/reactDevToolsPlaceholder.css b/front_end/panels/react_devtools/reactDevToolsPlaceholder.css similarity index 94% rename from front_end/panels/react_devtools_placeholder/reactDevToolsPlaceholder.css rename to front_end/panels/react_devtools/reactDevToolsPlaceholder.css index 2a70828d027..91510513142 100644 --- a/front_end/panels/react_devtools_placeholder/reactDevToolsPlaceholder.css +++ b/front_end/panels/react_devtools/reactDevToolsPlaceholder.css @@ -1,6 +1,6 @@ /* * Copyright (c) Meta Platforms, Inc. and affiliates. - * Copyright 2021 The Chromium Authors. All rights reserved. + * Copyright 2024 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. */ diff --git a/front_end/panels/react_devtools/react_devtools-meta.ts b/front_end/panels/react_devtools/react_devtools-meta.ts new file mode 100644 index 00000000000..ba72f21d988 --- /dev/null +++ b/front_end/panels/react_devtools/react_devtools-meta.ts @@ -0,0 +1,54 @@ +// Copyright (c) Meta Platforms, Inc. and affiliates. +// Copyright 2024 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 ReactDevToolsPanelModule from './react_devtools.js'; + +const UIStrings = { + /** + * @description React DevTools panel title + */ + title: '⚛️ React DevTools', + + /** + * @description Command for showing the React DevTools panel + */ + command: 'Show React DevTools panel', +}; +const str_ = i18n.i18n.registerUIStrings('panels/react_devtools/react_devtools-meta.ts', UIStrings); +const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_); + +let loadedModule: (typeof ReactDevToolsPanelModule|undefined); + +async function loadModule(): Promise { + if (!loadedModule) { + loadedModule = await import('./react_devtools.js'); + } + return loadedModule; +} + +UI.ViewManager.registerViewExtension({ + location: UI.ViewManager.ViewLocationValues.PANEL, + id: 'react-devtools', + title: i18nLazyString(UIStrings.title), + commandPrompt: i18nLazyString(UIStrings.command), + persistence: UI.ViewManager.ViewPersistence.PERMANENT, + async loadView() { + const Module = await loadModule(); + + if (Root.Runtime.Runtime.isDescriptorEnabled({ + experiment: Root.Runtime.ExperimentName.ENABLE_REACT_DEVTOOLS_PANEL, + condition: null, + })) { + return Module.ReactDevToolsView.ReactDevToolsViewImpl.instance(); + } + + return Module.ReactDevToolsPlaceholder.ReactDevToolsPlaceholderImpl.instance(); + }, +}); + diff --git a/front_end/panels/react_devtools_placeholder/react_devtools_placeholder.ts b/front_end/panels/react_devtools/react_devtools.ts similarity index 57% rename from front_end/panels/react_devtools_placeholder/react_devtools_placeholder.ts rename to front_end/panels/react_devtools/react_devtools.ts index dd8d0b9ff31..4d7c2bfb3f0 100644 --- a/front_end/panels/react_devtools_placeholder/react_devtools_placeholder.ts +++ b/front_end/panels/react_devtools/react_devtools.ts @@ -1,12 +1,9 @@ // Copyright (c) Meta Platforms, Inc. and affiliates. -// Copyright 2019 The Chromium Authors. All rights reserved. +// Copyright 2024 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 ReactDevToolsView from './ReactDevToolsView.js'; import * as ReactDevToolsPlaceholder from './ReactDevToolsPlaceholder.js'; -export { - ReactDevToolsPlaceholder, -}; +export {ReactDevToolsView, ReactDevToolsPlaceholder}; 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 deleted file mode 100644 index 9b5a2ca64df..00000000000 --- a/front_end/panels/react_devtools_placeholder/react_devtools_placeholder-meta.ts +++ /dev/null @@ -1,46 +0,0 @@ -// 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/scripts/eslint_rules/lib/check_license_header.js b/scripts/eslint_rules/lib/check_license_header.js index 07747081faa..90f1e5ba59f 100644 --- a/scripts/eslint_rules/lib/check_license_header.js +++ b/scripts/eslint_rules/lib/check_license_header.js @@ -71,8 +71,9 @@ const META_CODE_PATHS = [ 'entrypoints/rn_inspector', 'global_typings/react_native.d.ts', 'models/react_native', - 'panels/react_devtools_placeholder', + 'panels/react_devtools', 'panels/rn_welcome', + 'models/react_native' ]; const OTHER_LICENSE_HEADERS = [