add launch id to termination screen

Author: vzaidman

front_end/panels/rn_welcome/RNWelcome.ts

@@ -7,6 +7,7 @@ import type * as Common from '../../core/common/common.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
 import rnWelcomeStyles from './rnWelcome.css.js';
@@ -25,6 +26,8 @@ const UIStrings = {
   docsLabel: 'Debugging docs',
   /** @description "What's new" link */
   whatsNewLabel: "What's new",
+  /** @description Description for sharing the session ID of the current session with the user */
+  sessionIdMessage: "[FB-only] The session ID for this React Native DevTools lauch is: ",
   /** @description "Debugging Basics" title (docs item 1) */
   docsDebuggingBasics: 'Debugging Basics',
   /** @description "Debugging Basics" item detail */
@@ -132,6 +135,8 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
       import.meta.url,
     ).toString();
 
+    const launchId = Root.Runtime.Runtime.queryParam('launchId');
+    
     render(html`
       <div class="rn-welcome-panel">
         <header class="rn-welcome-hero">
@@ -162,6 +167,13 @@ export class RNWelcomeImpl extends UI.Widget.VBox implements
               ${i18nString(UIStrings.whatsNewLabel)}
             </x-link>
           </div>
+          ${launchId ? html`
+            <div class="rn-session-id">
+              ${i18nString(UIStrings.sessionIdMessage)}
+              <br/>
+              ${launchId}
+            </div>
+          ` : ''}
           ${this.#reactNativeVersion !== null && this.#reactNativeVersion !== undefined ? html`
               <p class="rn-welcome-version">React Native: <code>${this.#reactNativeVersion}</code></p>
             ` : null}

front_end/panels/rn_welcome/rnWelcome.css

@@ -101,6 +101,13 @@
   border-right: 1px solid var(--color-details-hairline);
 }
 
+.rn-session-id {
+  display: flex;
+  align-items: center;
+  margin-top: 24px;
+  user-select: all;
+}
+
 .rn-welcome-version {
   position: fixed;
   top: 8px;

front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts

@@ -4,6 +4,7 @@
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Root from '../../core/root/root.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 
@@ -50,6 +51,11 @@ const UIStrings = {
    * @description Text in a dialog box to prompt for feedback if the disconnection is unexpected.
    */
   sendFeedbackMessage: '[FB-only] Please send feedback if this disconnection is unexpected.',
+  /**
+   * @description Text in a dialog box to prompt for feedback if the disconnection is unexpected,
+   * telling the user what's their session ID for easier debugging
+   */
+  sendFeedbackLaunchIdMessage: 'Please share the following session id when filing the feedback:',
   /**
    * @description Label of the FB-only 'send feedback' button.
    */
@@ -76,8 +82,10 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
         <h1 class="remote-debugging-terminated-title">${i18nString(UIStrings.title)}</h1>
         <div class="remote-debugging-terminated-message">
           <span>${i18nString(UIStrings.debuggingConnectionWasClosed)}</span>
+          <br/>
           <span class="remote-debugging-terminated-reason">${reason}</span>
         </div>
+        ${feedbackLink !== null && feedbackLink !== undefined ? this.#createFeedbackSection(feedbackLink) : null}
         <div class="remote-debugging-terminated-options">
           <div class="remote-debugging-terminated-label">
             ${i18nString(UIStrings.reconnectWhenReadyByReopening)}
@@ -95,7 +103,6 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
           jslogContext: 'dismiss',
         })}
         </div>
-        ${feedbackLink !== null && feedbackLink !== undefined ? this.#createFeedbackSection(feedbackLink) : null}
       `,
         this.contentElement,
         {host: this},
@@ -121,9 +128,22 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
       );
     };
 
+    const launchId = Root.Runtime.Runtime.queryParam('launchId');
+
     return html`
       <div class="remote-debugging-terminated-feedback-container">
         <div class="remote-debugging-terminated-feedback-label">${i18nString(UIStrings.sendFeedbackMessage)}</div>
+        ${launchId ?
+          html`
+            <div class="remote-debugging-terminated-feedback-label">
+              ${i18nString(UIStrings.sendFeedbackLaunchIdMessage)}
+            </div>
+            <div class="remote-debugging-terminated-feedback-launch-id">
+              ${launchId}
+            </div>
+          ` : ''
+        }
+        <br/>
         ${
         createTextButton(
             i18nString(UIStrings.sendFeedback),

front_end/ui/legacy/remoteDebuggingTerminatedScreen.css

@@ -6,6 +6,7 @@
 
 .widget {
   padding: 20px;
+  user-select: all;
 }
 
 .remote-debugging-terminated-title {
@@ -17,7 +18,7 @@
 .remote-debugging-terminated-message {
   font-size: 14px;
   margin: 5px 0;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .remote-debugging-terminated-options {
@@ -26,7 +27,6 @@
   grid-gap: 8px;
   align-items: center;
   padding-top: 12px;
-  border-top: 1px solid var(--color-details-hairline-light);
 }
 
 .remote-debugging-terminated-label {
@@ -45,7 +45,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 16px;
   padding: 12px 16px;
   background-color: var(--color-background-elevation-1);
   border-radius: 6px;
@@ -56,9 +55,13 @@
   margin-bottom: 8px;
 }
 
-.remote-debugging-terminated-reason {
-  --override-reason-color: #8b0000;
+.remote-debugging-terminated-feedback-launch-id {
+  color: red;
+}
 
+.remote-debugging-terminated-reason {
+  --override-reason-color: red;
+  line-height: 32px;
   color: var(--override-reason-color);
 }