Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: add actual stub view for React DevTools panel #17

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions config/gni/devtools_grd_files.gni
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion front_end/entrypoints/rn_fusebox/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 6 additions & 2 deletions front_end/entrypoints/rn_fusebox/rn_fusebox.ts
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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';
Expand Down Expand Up @@ -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,
);

Expand Down
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -16,38 +16,39 @@ 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/*",
]

visibility += devtools_panels_visibility
}

devtools_entrypoint("meta") {
entrypoint = "react_devtools_placeholder-meta.ts"
entrypoint = "react_devtools-meta.ts"

deps = [ ":bundle" ]

Expand Down
Original file line number Diff line number Diff line change
@@ -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.

Expand All @@ -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;
Expand Down
32 changes: 32 additions & 0 deletions front_end/panels/react_devtools/ReactDevToolsView.ts
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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.
*/
Expand Down
54 changes: 54 additions & 0 deletions front_end/panels/react_devtools/react_devtools-meta.ts
Original file line number Diff line number Diff line change
@@ -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<typeof ReactDevToolsPanelModule> {
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();
}
Comment on lines +44 to +49
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @huntie for future references on using experiments declaratively

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hoxyq how about creating a wiki page (GH or internal) with these learnings?


return Module.ReactDevToolsPlaceholder.ReactDevToolsPlaceholderImpl.instance();
},
});

Original file line number Diff line number Diff line change
@@ -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};

This file was deleted.

3 changes: 2 additions & 1 deletion scripts/eslint_rules/lib/check_license_header.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down
Loading