From bfbe020f1d40ab11e2dc4794f868a28b800f4fdd Mon Sep 17 00:00:00 2001 From: Alex Hunt Date: Wed, 23 Aug 2023 08:33:29 +0100 Subject: [PATCH] Create Welcome panel in rn_inspector (#8) * Create Welcome panel in rn_inspector * Update RN debugger brand name to "React Native JS Inspector" --------- Co-authored-by: Moti Zilberman --- config/gni/devtools_grd_files.gni | 5 ++ config/gni/devtools_image_files.gni | 1 + front_end/Images/react_native/welcomeIcon.png | Bin 0 -> 7403 bytes front_end/core/root/Runtime.ts | 1 + front_end/entrypoints/rn_inspector/BUILD.gn | 1 + .../entrypoints/rn_inspector/rn_inspector.ts | 11 +++ front_end/panels/rn_welcome/BUILD.gn | 54 +++++++++++++ front_end/panels/rn_welcome/RNWelcome.ts | 71 ++++++++++++++++++ front_end/panels/rn_welcome/rnWelcome.css | 61 +++++++++++++++ .../panels/rn_welcome/rn_welcome-meta.ts | 46 ++++++++++++ front_end/panels/rn_welcome/rn_welcome.ts | 11 +++ 11 files changed, 262 insertions(+) create mode 100644 front_end/Images/react_native/welcomeIcon.png create mode 100644 front_end/panels/rn_welcome/BUILD.gn create mode 100644 front_end/panels/rn_welcome/RNWelcome.ts create mode 100644 front_end/panels/rn_welcome/rnWelcome.css create mode 100644 front_end/panels/rn_welcome/rn_welcome-meta.ts create mode 100644 front_end/panels/rn_welcome/rn_welcome.ts diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 9be8248b0fb..c94b512f407 100644 --- a/config/gni/devtools_grd_files.gni +++ b/config/gni/devtools_grd_files.gni @@ -177,6 +177,7 @@ grd_files_release_sources = [ "front_end/Images/popup.svg", "front_end/Images/preview_feature_video_thumbnail.svg", "front_end/Images/profile.svg", + "front_end/Images/react_native/welcomeIcon.png", "front_end/Images/record-start.svg", "front_end/Images/record-stop.svg", "front_end/Images/redo.svg", @@ -537,6 +538,10 @@ 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/rn_welcome/rn_welcome-meta.js", + "front_end/panels/rn_welcome/RNWelcome.js", + "front_end/panels/rn_welcome/rn_welcome.js", + "front_end/panels/rn_welcome/rnWelcome.css.js", "front_end/panels/screencast/screencast-meta.js", "front_end/panels/screencast/screencast.js", "front_end/panels/search/search-legacy.js", diff --git a/config/gni/devtools_image_files.gni b/config/gni/devtools_image_files.gni index f530c096a6f..19f3186ac48 100644 --- a/config/gni/devtools_image_files.gni +++ b/config/gni/devtools_image_files.gni @@ -15,6 +15,7 @@ devtools_image_files = [ "navigationControls.png", "nodeIcon.avif", "popoverArrows.png", + "react_native/welcomeIcon.png", "toolbarResizerVertical.png", "touchCursor_2x.png", "touchCursor.png", diff --git a/front_end/Images/react_native/welcomeIcon.png b/front_end/Images/react_native/welcomeIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..7246674207916addfc0137e4db968a549da91ab3 GIT binary patch literal 7403 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 KQxPt275RU2Nj1>` literal 0 HcmV?d00001 diff --git a/front_end/core/root/Runtime.ts b/front_end/core/root/Runtime.ts index d1a0f4b6ab4..99b7cb67f06 100644 --- a/front_end/core/root/Runtime.ts +++ b/front_end/core/root/Runtime.ts @@ -314,6 +314,7 @@ export enum ExperimentName { HIGHLIGHT_ERRORS_ELEMENTS_PANEL = 'highlightErrorsElementsPanel', SET_ALL_BREAKPOINTS_EAGERLY = 'setAllBreakpointsEagerly', SELF_XSS_WARNING = 'selfXssWarning', + REACT_NATIVE_SPECIFIC_UI = 'reactNativeSpecificUI', } // TODO(crbug.com/1167717): Make this a const enum again diff --git a/front_end/entrypoints/rn_inspector/BUILD.gn b/front_end/entrypoints/rn_inspector/BUILD.gn index feacd8bde3d..0e439d25f33 100644 --- a/front_end/entrypoints/rn_inspector/BUILD.gn +++ b/front_end/entrypoints/rn_inspector/BUILD.gn @@ -26,6 +26,7 @@ devtools_entrypoint("entrypoint") { "../../panels/network:meta", "../../panels/performance_monitor:meta", "../../panels/recorder:meta", + "../../panels/rn_welcome:meta", "../../panels/security:meta", "../../panels/sensors:meta", "../../panels/timeline:meta", diff --git a/front_end/entrypoints/rn_inspector/rn_inspector.ts b/front_end/entrypoints/rn_inspector/rn_inspector.ts index a6b1ba40c30..777b7b787bc 100644 --- a/front_end/entrypoints/rn_inspector/rn_inspector.ts +++ b/front_end/entrypoints/rn_inspector/rn_inspector.ts @@ -10,10 +10,21 @@ import '../inspector_main/inspector_main-meta.js'; import '../../panels/issues/issues-meta.js'; import '../../panels/mobile_throttling/mobile_throttling-meta.js'; import '../../panels/timeline/timeline-meta.js'; +import '../../panels/rn_welcome/rn_welcome-meta.js'; import * as Root from '../../core/root/root.js'; import * as Main from '../main/main.js'; +Root.Runtime.experiments.register( + Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI, + 'Show React Native-specific UI', + /* unstable */ false, +); + +Root.Runtime.experiments.enableExperimentsByDefault( + [Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI], +); + // @ts-ignore Exposed for legacy layout tests self.runtime = Root.Runtime.Runtime.instance({forceNew: true}); new Main.MainImpl.MainImpl(); diff --git a/front_end/panels/rn_welcome/BUILD.gn b/front_end/panels/rn_welcome/BUILD.gn new file mode 100644 index 00000000000..aac17b8c749 --- /dev/null +++ b/front_end/panels/rn_welcome/BUILD.gn @@ -0,0 +1,54 @@ +# 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 = [ "rnWelcome.css" ] +} + +devtools_module("rn_welcome") { + sources = [ "RNWelcome.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 = "rn_welcome.ts" + + deps = [ + ":css_files", + ":rn_welcome", + ] + + visibility = [ + ":*", + "../../../test/unittests/front_end/entrypoints/missing_entrypoints/*", + # "../../../test/unittests/front_end/panels/rn_welcome/*", + "../../entrypoints/*", + ] + + visibility += devtools_panels_visibility +} + +devtools_entrypoint("meta") { + entrypoint = "rn_welcome-meta.ts" + + deps = [ ":bundle" ] + + visibility = [ "../../entrypoints/*" ] +} diff --git a/front_end/panels/rn_welcome/RNWelcome.ts b/front_end/panels/rn_welcome/RNWelcome.ts new file mode 100644 index 00000000000..e3a17a4e42c --- /dev/null +++ b/front_end/panels/rn_welcome/RNWelcome.ts @@ -0,0 +1,71 @@ +// 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 UI from '../../ui/legacy/legacy.js'; +import * as i18n from '../../core/i18n/i18n.js'; + +import rnWelcomeStyles from './rnWelcome.css.js'; +import * as LitHtml from '../../ui/lit-html/lit-html.js'; + +const UIStrings = { + /** @description The name of the debugging product */ + debuggerBrandName: 'React Native JS Inspector', + /** @description Welcome text */ + welcomeMessage: 'Welcome to debugging in React Native', + /** @description "Debugging docs" link */ + docsLabel: 'Debugging docs', + /** @description "What's new" link */ + whatsNewLabel: "What's new", +}; +const {render, html} = LitHtml; + +const str_ = i18n.i18n.registerUIStrings('panels/rn_welcome/RNWelcome.ts', UIStrings); +const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); + +let rnWelcomeImplInstance: RNWelcomeImpl; + +export class RNWelcomeImpl extends UI.Widget.VBox { + static instance(opts: {forceNew: null|boolean} = {forceNew: null}): RNWelcomeImpl { + const {forceNew} = opts; + if (!rnWelcomeImplInstance || forceNew) { + rnWelcomeImplInstance = new RNWelcomeImpl(); + } + return rnWelcomeImplInstance; + } + + private constructor() { + super(true, true); + } + + override wasShown(): void { + super.wasShown(); + this.registerCSSFiles([rnWelcomeStyles]); + this.render(); + UI.InspectorView.InspectorView.instance().showDrawer(true); + } + + render(): void { + render(html` +
+
+ +
+ ${i18nString(UIStrings.debuggerBrandName)} +
+
+
+ ${i18nString(UIStrings.welcomeMessage)} +
+
+ + ${i18nString(UIStrings.docsLabel)} + + + ${i18nString(UIStrings.whatsNewLabel)} + +
+
+ `, this.contentElement, {host: this}); + } +} diff --git a/front_end/panels/rn_welcome/rnWelcome.css b/front_end/panels/rn_welcome/rnWelcome.css new file mode 100644 index 00000000000..872f4053b27 --- /dev/null +++ b/front_end/panels/rn_welcome/rnWelcome.css @@ -0,0 +1,61 @@ +/* + * 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-welcome-panel { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + padding: 16px; + text-align: center; + font-size: 1rem; + background-color: var(--color-background-elevation-0); +} + +.rn-welcome-header { + display: flex; + align-items: center; + margin-bottom: 16px; +} + +.rn-welcome-icon { + width: 30px; + height: 30px; + border-radius: 4px; + margin-right: 12px; +} + +.rn-welcome-title { + font-size: 20px; + color: var(--color-text-primary); +} + +.rn-welcome-tagline { + margin-bottom: 24px; + font-size: 1rem; + line-height: 1.3; + color: var(--color-text-secondary); +} + +.rn-welcome-links { + display: flex; + align-items: center; +} + +.rn-welcome-links > .devtools-link { + position: relative; + margin: 0 16px; + font-size: 14px; +} + +.rn-welcome-links > .devtools-link:not(:last-child)::after { + content: ""; + position: absolute; + right: -16px; + height: 16px; + border-right: 1px solid var(--color-details-hairline); +} diff --git a/front_end/panels/rn_welcome/rn_welcome-meta.ts b/front_end/panels/rn_welcome/rn_welcome-meta.ts new file mode 100644 index 00000000000..aaf2144e19b --- /dev/null +++ b/front_end/panels/rn_welcome/rn_welcome-meta.ts @@ -0,0 +1,46 @@ +// 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 RNWelcome from './rn_welcome.js'; + +const UIStrings = { + /** + * @description Title of the Welcome panel, plus an emoji symbolizing React Native + */ + rnWelcome: '⚛️ Welcome', + + /** + * @description Command for showing the Welcome panel + */ + showRnWelcome: 'Show React Native Welcome panel', +}; +const str_ = i18n.i18n.registerUIStrings('panels/rn_welcome/rn_welcome-meta.ts', UIStrings); +const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_); + +let loadedRNWelcomeModule: (typeof RNWelcome|undefined); + +async function loadRNWelcomeModule(): Promise { + if (!loadedRNWelcomeModule) { + loadedRNWelcomeModule = await import('./rn_welcome.js'); + } + return loadedRNWelcomeModule; +} + +UI.ViewManager.registerViewExtension({ + location: UI.ViewManager.ViewLocationValues.PANEL, + id: 'rn-welcome', + title: i18nLazyString(UIStrings.rnWelcome), + commandPrompt: i18nLazyString(UIStrings.showRnWelcome), + order: -10, + persistence: UI.ViewManager.ViewPersistence.PERMANENT, + async loadView() { + const RNWelcome = await loadRNWelcomeModule(); + return RNWelcome.RNWelcome.RNWelcomeImpl.instance(); + }, + experiment: Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI, +}); diff --git a/front_end/panels/rn_welcome/rn_welcome.ts b/front_end/panels/rn_welcome/rn_welcome.ts new file mode 100644 index 00000000000..8f89f6dbf7b --- /dev/null +++ b/front_end/panels/rn_welcome/rn_welcome.ts @@ -0,0 +1,11 @@ +// 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 './RNWelcome.js'; + +import * as RNWelcome from './RNWelcome.js'; + +export { + RNWelcome, +};