diff --git a/front_end/panels/rn_welcome/RNWelcome.ts b/front_end/panels/rn_welcome/RNWelcome.ts index bb62f48dab3c..269bb7316b54 100644 --- a/front_end/panels/rn_welcome/RNWelcome.ts +++ b/front_end/panels/rn_welcome/RNWelcome.ts @@ -56,6 +56,8 @@ type RNWelcomeOptions = { export class RNWelcomeImpl extends UI.Widget.VBox implements SDK.TargetManager.SDKModelObserver { private readonly options: RNWelcomeOptions; + private reactNativeVersion: string | undefined; + static instance(options: RNWelcomeOptions): RNWelcomeImpl { if (!rnWelcomeImplInstance) { rnWelcomeImplInstance = new RNWelcomeImpl(options); @@ -96,9 +98,16 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements SDK.TargetManager.S } private _updateReactNativeVersion(event: Common.EventTarget.EventTargetEvent): void { + const {appDisplayName, deviceName, reactNativeVersion} = event.data; + + if (reactNativeVersion != null) { + this.reactNativeVersion = reactNativeVersion; + this.render(); + } + // Side-effect: Update window title - if (event.data.appDisplayName != null && event.data.deviceName != null) { - document.title = `${event.data.appDisplayName} (${event.data.deviceName}) - React Native DevTools`; + if (appDisplayName != null && deviceName != null) { + document.title = `${appDisplayName} (${deviceName}) - React Native DevTools`; } } diff --git a/front_end/panels/rn_welcome/rnWelcome.css b/front_end/panels/rn_welcome/rnWelcome.css index e1d7180505ab..e22821d82658 100644 --- a/front_end/panels/rn_welcome/rnWelcome.css +++ b/front_end/panels/rn_welcome/rnWelcome.css @@ -94,6 +94,18 @@ border-right: 1px solid var(--color-details-hairline); } +.rn-welcome-version { + position: fixed; + bottom: 0; + right: 8px; + margin-top: 24px; + padding: 4px 12px; + border-radius: 6px; + background-color: var(--color-background-hover-overlay); + color: var(--color-text-secondary); + font-size: 11px; +} + .rn-welcome-docsfeed { display: flex; flex-direction: column;