Add React Native version label to welcome panel

facebookexperimental · Jul 3, 2024 · d4f9bec · d4f9bec
1 parent 31936d7
commit d4f9bec
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git 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<ReactNativeApplicationModel> {
   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<Protocol.ReactNativeApplication.MetadataUpdatedEvent>): 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
@@ -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;