From fa5a91a020035fd388f0e124e56768195dd2c697 Mon Sep 17 00:00:00 2001 From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com> Date: Mon, 25 Mar 2024 15:40:31 +0000 Subject: [PATCH 1/8] dynamic doc link --- front_end/panels/rn_welcome/RNWelcome.ts | 27 ++++++++++++++++-------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/front_end/panels/rn_welcome/RNWelcome.ts b/front_end/panels/rn_welcome/RNWelcome.ts index c0cc2646d585..f8dbd0998d76 100644 --- a/front_end/panels/rn_welcome/RNWelcome.ts +++ b/front_end/panels/rn_welcome/RNWelcome.ts @@ -3,11 +3,12 @@ // 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 * as Root from '../../core/root/root.js'; +import * as UI from '../../ui/legacy/legacy.js'; +import * as LitHtml from '../../ui/lit-html/lit-html.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 */ @@ -49,11 +50,9 @@ export class RNWelcomeImpl extends UI.Widget.VBox { } render(): void { - const welcomeIconUrl = new URL( - "../../Images/react_native/welcomeIcon.png", - import.meta.url, - ).toString(); - render(html` + const welcomeIconUrl = new URL('../../Images/react_native/welcomeIcon.png', import.meta.url).toString(); + render( + html`
@@ -68,7 +67,7 @@ export class RNWelcomeImpl extends UI.Widget.VBox { ${i18nString(UIStrings.welcomeMessage)}
- + ${i18nString(UIStrings.docsLabel)} @@ -76,6 +75,16 @@ export class RNWelcomeImpl extends UI.Widget.VBox {
- `, this.contentElement, {host: this}); + `, + this.contentElement, {host: this}); + } + + private getDocsLink(): string { + const experimentDocsLink = Root.Runtime.experiments.enabledExperiments() + .find(e => e.name === Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI) + ?.docLink; + const defaultDocsLink = 'https://reactnative.dev/docs/debugging'; + + return experimentDocsLink ?? defaultDocsLink; } } From ff09d8bdda172672a2883dc9b090350aea384b35 Mon Sep 17 00:00:00 2001 From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com> Date: Mon, 25 Mar 2024 15:54:19 +0000 Subject: [PATCH 2/8] format --- front_end/panels/rn_welcome/RNWelcome.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/front_end/panels/rn_welcome/RNWelcome.ts b/front_end/panels/rn_welcome/RNWelcome.ts index f8dbd0998d76..cd9c9adc9ffb 100644 --- a/front_end/panels/rn_welcome/RNWelcome.ts +++ b/front_end/panels/rn_welcome/RNWelcome.ts @@ -83,8 +83,7 @@ export class RNWelcomeImpl extends UI.Widget.VBox { const experimentDocsLink = Root.Runtime.experiments.enabledExperiments() .find(e => e.name === Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI) ?.docLink; - const defaultDocsLink = 'https://reactnative.dev/docs/debugging'; - return experimentDocsLink ?? defaultDocsLink; + return experimentDocsLink ?? 'https://reactnative.dev/docs/debugging'; } } From 1cd4508aa14e26ac90560e3e2ec8de8e52590b07 Mon Sep 17 00:00:00 2001 From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com> Date: Mon, 25 Mar 2024 17:25:38 +0000 Subject: [PATCH 3/8] spelling --- front_end/panels/rn_welcome/RNWelcome.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/front_end/panels/rn_welcome/RNWelcome.ts b/front_end/panels/rn_welcome/RNWelcome.ts index cd9c9adc9ffb..b3ceca6e297c 100644 --- a/front_end/panels/rn_welcome/RNWelcome.ts +++ b/front_end/panels/rn_welcome/RNWelcome.ts @@ -67,7 +67,7 @@ export class RNWelcomeImpl extends UI.Widget.VBox { ${i18nString(UIStrings.welcomeMessage)}
- + ${i18nString(UIStrings.docsLabel)} @@ -79,11 +79,11 @@ export class RNWelcomeImpl extends UI.Widget.VBox { this.contentElement, {host: this}); } - private getDocsLink(): string { - const experimentDocsLink = Root.Runtime.experiments.enabledExperiments() - .find(e => e.name === Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI) - ?.docLink; + private getDocLink(): string { + const experimentDocLink = Root.Runtime.experiments.enabledExperiments() + .find(e => e.name === Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI) + ?.docLink; - return experimentDocsLink ?? 'https://reactnative.dev/docs/debugging'; + return experimentDocLink ?? 'https://reactnative.dev/docs/debugging'; } } From f13a501d71aa6ba8907b9cc5e8e1eb421883f72d Mon Sep 17 00:00:00 2001 From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com> Date: Wed, 27 Mar 2024 12:20:14 +0000 Subject: [PATCH 4/8] revert RNWelcome.ts --- front_end/panels/rn_welcome/RNWelcome.ts | 26 ++++++++---------------- 1 file changed, 9 insertions(+), 17 deletions(-) diff --git a/front_end/panels/rn_welcome/RNWelcome.ts b/front_end/panels/rn_welcome/RNWelcome.ts index b3ceca6e297c..c0cc2646d585 100644 --- a/front_end/panels/rn_welcome/RNWelcome.ts +++ b/front_end/panels/rn_welcome/RNWelcome.ts @@ -3,12 +3,11 @@ // 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 * as LitHtml from '../../ui/lit-html/lit-html.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 */ @@ -50,9 +49,11 @@ export class RNWelcomeImpl extends UI.Widget.VBox { } render(): void { - const welcomeIconUrl = new URL('../../Images/react_native/welcomeIcon.png', import.meta.url).toString(); - render( - html` + const welcomeIconUrl = new URL( + "../../Images/react_native/welcomeIcon.png", + import.meta.url, + ).toString(); + render(html`
@@ -67,7 +68,7 @@ export class RNWelcomeImpl extends UI.Widget.VBox { ${i18nString(UIStrings.welcomeMessage)}
- + ${i18nString(UIStrings.docsLabel)} @@ -75,15 +76,6 @@ export class RNWelcomeImpl extends UI.Widget.VBox {
- `, - this.contentElement, {host: this}); - } - - private getDocLink(): string { - const experimentDocLink = Root.Runtime.experiments.enabledExperiments() - .find(e => e.name === Root.Runtime.ExperimentName.REACT_NATIVE_SPECIFIC_UI) - ?.docLink; - - return experimentDocLink ?? 'https://reactnative.dev/docs/debugging'; + `, this.contentElement, {host: this}); } } From a6e890717e2f8332bcdc380b795c455e4b644567 Mon Sep 17 00:00:00 2001 From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com> Date: Mon, 25 Mar 2024 16:22:13 +0000 Subject: [PATCH 5/8] add feedback link support --- front_end/entrypoints/rn_inspector/rn_inspector.ts | 1 + front_end/global_typings/react_native.d.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/front_end/entrypoints/rn_inspector/rn_inspector.ts b/front_end/entrypoints/rn_inspector/rn_inspector.ts index 094dd261e70b..085fcf8bdae9 100644 --- a/front_end/entrypoints/rn_inspector/rn_inspector.ts +++ b/front_end/entrypoints/rn_inspector/rn_inspector.ts @@ -47,6 +47,7 @@ Root.Runtime.experiments.register( 'Show React Native-specific UI', /* unstable */ false, /* docLink */ globalThis.reactNativeDocLink ?? 'https://reactnative.dev/docs/debugging', + /* feedbackLink */ globalThis.reactNativeFeedbackLink, ); Root.Runtime.experiments.register( diff --git a/front_end/global_typings/react_native.d.ts b/front_end/global_typings/react_native.d.ts index 7e55da40bc5c..07d575ce9656 100644 --- a/front_end/global_typings/react_native.d.ts +++ b/front_end/global_typings/react_native.d.ts @@ -10,5 +10,6 @@ declare global { var enableReactNativePerfMetrics: boolean|undefined; var enableReactNativePerfMetricsGlobalPostMessage: boolean|undefined; var reactNativeDocLink: string|undefined; + var reactNativeFeedbackLink: string|undefined; } } From 36550fa94ea4635847afcad1709e1ea758708fa1 Mon Sep 17 00:00:00 2001 From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com> Date: Mon, 25 Mar 2024 17:24:52 +0000 Subject: [PATCH 6/8] add feedback button --- .../entrypoints/rn_inspector/rn_inspector.ts | 41 +++++++++++++++++++ front_end/ui/legacy/ActionRegistration.ts | 1 + 2 files changed, 42 insertions(+) diff --git a/front_end/entrypoints/rn_inspector/rn_inspector.ts b/front_end/entrypoints/rn_inspector/rn_inspector.ts index 085fcf8bdae9..53a34fea549b 100644 --- a/front_end/entrypoints/rn_inspector/rn_inspector.ts +++ b/front_end/entrypoints/rn_inspector/rn_inspector.ts @@ -20,6 +20,7 @@ import * as Root from '../../core/root/root.js'; import * as SDK from '../../core/sdk/sdk.js'; import * as Main from '../main/main.js'; import * as UI from '../../ui/legacy/legacy.js'; +import type * as Platform from '../../core/platform/platform.js'; import type * as InspectorBackend from '../../core/protocol_client/InspectorBackend.js'; import type * as Sources from '../../panels/sources/sources.js'; @@ -98,6 +99,10 @@ const UIStrings = { *@description Command for showing the 'React Native' tool in the Network Navigator View, which is part of the Sources tool */ showReactNative: 'Show React Native', + /** + *@description Label of the 'send feedback' action button in the toolbar + */ + sendFeedback: 'Send feedback', }; const str_ = i18n.i18n.registerUIStrings('entrypoints/rn_inspector/rn_inspector.ts', UIStrings); @@ -128,3 +133,39 @@ UI.ViewManager.registerViewExtension({ // @ts-ignore Exposed for legacy layout tests self.runtime = Root.Runtime.Runtime.instance({forceNew: true}); new Main.MainImpl.MainImpl(); + +if (globalThis.reactNativeFeedbackLink) { + const actionId = 'react-native-send-feedback'; + const sendFeedbackActionDelegate: UI.ActionRegistration.ActionDelegate = { + handleAction(_context, incomingActionId): boolean { + if (incomingActionId !== actionId) { + return false; + } + + if (!globalThis.reactNativeFeedbackLink) { + return false; + } + + Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab( + globalThis.reactNativeFeedbackLink as Platform.DevToolsPath.UrlString, + ); + return true; + }, + }; + + UI.ActionRegistration.registerActionExtension({ + category: UI.ActionRegistration.ActionCategory.GLOBAL, + actionId, + title: i18nLazyString(UIStrings.sendFeedback), + async loadActionDelegate() { + return sendFeedbackActionDelegate; + }, + iconClass: UI.ActionRegistration.IconClass.BUG, + }); + + UI.Toolbar.registerToolbarItem({ + location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_RIGHT, + actionId, + showLabel: true, + }); +} diff --git a/front_end/ui/legacy/ActionRegistration.ts b/front_end/ui/legacy/ActionRegistration.ts index 926829e0e908..3c7f5168d222 100644 --- a/front_end/ui/legacy/ActionRegistration.ts +++ b/front_end/ui/legacy/ActionRegistration.ts @@ -369,6 +369,7 @@ export const enum IconClass { BREAKPOINT_CROSSED_FILLED = 'breakpoint-crossed-filled', BREAKPOINT_CROSSED = 'breakpoint-crossed', PLUS = 'plus', + BUG = 'bug', } export const enum KeybindSet { From 9663a9b41791bda5c7f53a8eecf4ad491adf3a91 Mon Sep 17 00:00:00 2001 From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com> Date: Wed, 27 Mar 2024 15:15:51 +0000 Subject: [PATCH 7/8] add fb-only prefix --- front_end/entrypoints/rn_inspector/rn_inspector.ts | 12 ++++++------ front_end/global_typings/react_native.d.ts | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/front_end/entrypoints/rn_inspector/rn_inspector.ts b/front_end/entrypoints/rn_inspector/rn_inspector.ts index 53a34fea549b..dd93ee9d0738 100644 --- a/front_end/entrypoints/rn_inspector/rn_inspector.ts +++ b/front_end/entrypoints/rn_inspector/rn_inspector.ts @@ -48,7 +48,7 @@ Root.Runtime.experiments.register( 'Show React Native-specific UI', /* unstable */ false, /* docLink */ globalThis.reactNativeDocLink ?? 'https://reactnative.dev/docs/debugging', - /* feedbackLink */ globalThis.reactNativeFeedbackLink, + /* feedbackLink */ globalThis.FB_ONLY__reactNativeFeedbackLink, ); Root.Runtime.experiments.register( @@ -100,9 +100,9 @@ const UIStrings = { */ showReactNative: 'Show React Native', /** - *@description Label of the 'send feedback' action button in the toolbar + *@description Label of the FB-only 'send feedback' action button in the toolbar */ - sendFeedback: 'Send feedback', + sendFeedback: '[FB-only] Send feedback', }; const str_ = i18n.i18n.registerUIStrings('entrypoints/rn_inspector/rn_inspector.ts', UIStrings); @@ -134,7 +134,7 @@ UI.ViewManager.registerViewExtension({ self.runtime = Root.Runtime.Runtime.instance({forceNew: true}); new Main.MainImpl.MainImpl(); -if (globalThis.reactNativeFeedbackLink) { +if (globalThis.FB_ONLY__reactNativeFeedbackLink) { const actionId = 'react-native-send-feedback'; const sendFeedbackActionDelegate: UI.ActionRegistration.ActionDelegate = { handleAction(_context, incomingActionId): boolean { @@ -142,12 +142,12 @@ if (globalThis.reactNativeFeedbackLink) { return false; } - if (!globalThis.reactNativeFeedbackLink) { + if (!globalThis.FB_ONLY__reactNativeFeedbackLink) { return false; } Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab( - globalThis.reactNativeFeedbackLink as Platform.DevToolsPath.UrlString, + globalThis.FB_ONLY__reactNativeFeedbackLink as Platform.DevToolsPath.UrlString, ); return true; }, diff --git a/front_end/global_typings/react_native.d.ts b/front_end/global_typings/react_native.d.ts index 07d575ce9656..2e3047d83cc1 100644 --- a/front_end/global_typings/react_native.d.ts +++ b/front_end/global_typings/react_native.d.ts @@ -10,6 +10,6 @@ declare global { var enableReactNativePerfMetrics: boolean|undefined; var enableReactNativePerfMetricsGlobalPostMessage: boolean|undefined; var reactNativeDocLink: string|undefined; - var reactNativeFeedbackLink: string|undefined; + var FB_ONLY__reactNativeFeedbackLink: string|undefined; } } From 5f7e8e02d0ae81cb2ba350243d12dba0c7c857ee Mon Sep 17 00:00:00 2001 From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com> Date: Wed, 27 Mar 2024 15:31:33 +0000 Subject: [PATCH 8/8] styling --- front_end/entrypoints/rn_inspector/rn_inspector.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/front_end/entrypoints/rn_inspector/rn_inspector.ts b/front_end/entrypoints/rn_inspector/rn_inspector.ts index dd93ee9d0738..029b45b816a2 100644 --- a/front_end/entrypoints/rn_inspector/rn_inspector.ts +++ b/front_end/entrypoints/rn_inspector/rn_inspector.ts @@ -135,6 +135,7 @@ self.runtime = Root.Runtime.Runtime.instance({forceNew: true}); new Main.MainImpl.MainImpl(); if (globalThis.FB_ONLY__reactNativeFeedbackLink) { + const feedbackLink = globalThis.FB_ONLY__reactNativeFeedbackLink as Platform.DevToolsPath.UrlString; const actionId = 'react-native-send-feedback'; const sendFeedbackActionDelegate: UI.ActionRegistration.ActionDelegate = { handleAction(_context, incomingActionId): boolean { @@ -142,12 +143,8 @@ if (globalThis.FB_ONLY__reactNativeFeedbackLink) { return false; } - if (!globalThis.FB_ONLY__reactNativeFeedbackLink) { - return false; - } - Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab( - globalThis.FB_ONLY__reactNativeFeedbackLink as Platform.DevToolsPath.UrlString, + feedbackLink, ); return true; },