Improve termination screen (#160)

* add launch id to termination screen

* add devtools disconnected reasons

* allow displaying custom errors to the user for when devtools is disconnected

Author: vzaidman

front_end/global_typings/react_native.d.ts

@@ -10,6 +10,7 @@ declare global {
     var enableReactNativePerfMetrics: boolean|undefined;
     var enableReactNativePerfMetricsGlobalPostMessage: boolean|undefined;
     var enableReactNativeOpenInExternalEditor: boolean|undefined;
+    var enableDisplayingFullDisconnectedReason: boolean|undefined;
     var reactNativeOpenInEditorButtonImage: string|undefined;
     var FB_ONLY__reactNativeFeedbackLink: string|undefined;
     var FB_ONLY__enablePerformance: any;

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';
 
@@ -24,6 +25,12 @@ const UIStrings = {
    * (see https://developer.chrome.com/docs/devtools/remote-debugging/).
    */
   debuggingConnectionWasClosed: 'Debugging connection was closed. Reason: ',
+  /**
+   * @description Text in a dialog box in DevTools providing extra details on why remote debugging has been terminated.
+   * "Remote debugging" here means that DevTools on a PC is inspecting a website running on an actual mobile device
+   * (see https://developer.chrome.com/docs/devtools/remote-debugging/).
+   */
+  debuggingConnectionWasClosedDetails: 'Details: ',
   /**
    * @description Text in a dialog box showing how to reconnect to DevTools when remote debugging has been terminated.
    * "Remote debugging" here means that DevTools on a PC is inspecting a website running on an actual mobile device
@@ -50,6 +57,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 include the following session ID:',
   /**
    * @description Label of the FB-only 'send feedback' button.
    */
@@ -62,7 +74,11 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = LitHtml;
 
 export class RemoteDebuggingTerminatedScreen extends VBox {
-  constructor(reason: string, onClose?: () => void) {
+  constructor(
+    reason: string,
+    connectionLostDetails?: {reason?: string, code?: string, errorType?: string},
+    onClose?: () => void
+  ) {
     super(true);
     this.registerCSSFiles([remoteDebuggingTerminatedScreenStyles]);
 
@@ -75,27 +91,35 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
         html`
         <h1 class="remote-debugging-terminated-title">${i18nString(UIStrings.title)}</h1>
         <div class="remote-debugging-terminated-message">
-          <span>${i18nString(UIStrings.debuggingConnectionWasClosed)}</span>
-          <span class="remote-debugging-terminated-reason">${reason}</span>
+          <div>${i18nString(UIStrings.debuggingConnectionWasClosed)}</div>
+          <div class="remote-debugging-terminated-reason">${reason}</div>
+          ${globalThis.enableDisplayingFullDisconnectedReason ?
+            html`
+              <div>
+                ${i18nString(UIStrings.debuggingConnectionWasClosedDetails)}
+              </div>
+              <div class="remote-debugging-terminated-reason">
+                <textarea disabled rows="5">${JSON.stringify(connectionLostDetails, null, 2)}</textarea>
+              </div>
+            ` : ''}
         </div>
+        ${feedbackLink !== null && feedbackLink !== undefined ? this.#createFeedbackSection(feedbackLink) : null}
         <div class="remote-debugging-terminated-options">
           <div class="remote-debugging-terminated-label">
             ${i18nString(UIStrings.reconnectWhenReadyByReopening)}
           </div>
-          ${
-            createTextButton(
-                i18nString(UIStrings.reconnectDevtools),
-                handleReconnect,
-                {className: 'primary-button', jslogContext: 'reconnect'},
-                )}
+          ${createTextButton(
+            i18nString(UIStrings.reconnectDevtools),
+            handleReconnect,
+            {className: 'primary-button', jslogContext: 'reconnect'},
+          )}
           <div class="remote-debugging-terminated-label">
             ${i18nString(UIStrings.closeDialogDetail)}
           </div>
           ${createTextButton(i18nString(UIStrings.closeDialog), onClose, {
           jslogContext: 'dismiss',
         })}
         </div>
-        ${feedbackLink !== null && feedbackLink !== undefined ? this.#createFeedbackSection(feedbackLink) : null}
       `,
         this.contentElement,
         {host: this},
@@ -109,7 +133,7 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
     const dialog = new Dialog('remote-debnugging-terminated');
     dialog.setSizeBehavior(SizeBehavior.MeasureContent);
     dialog.setDimmed(true);
-    new RemoteDebuggingTerminatedScreen(uiMessage, () => dialog.hide()).show(dialog.contentElement);
+    new RemoteDebuggingTerminatedScreen(uiMessage, connectionLostDetails, () => dialog.hide()).show(dialog.contentElement);
     dialog.show();
     Host.rnPerfMetrics.remoteDebuggingTerminated(connectionLostDetails);
   }
@@ -121,9 +145,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/components/utils/TargetDetachedDialog.ts

@@ -13,7 +13,21 @@ const UIStrings = {
    *@description Text on the remote debugging window to indicate the connection is lost
    */
   websocketDisconnected: 'WebSocket disconnected',
+  /**
+   *@description Text on the remote debugging window to indicate the connection cannot be made because the device is not connected
+   */
+  websocketDisconnectedUnregisteredDevice: 'The corresponding app for this DevTools session cannot be found. Please relaunch DevTools from the terminal.',
+  /**
+ *@description Text on the remote debugging window to indicate the connection to corresponding device was lost
+  */
+  websocketDisconnectedConnectionLost: 'Connection lost to corresponding device'
 };
+
+const DisconnectedReasonsUIStrings = {
+  UREGISTERED_DEVICE: UIStrings.websocketDisconnectedUnregisteredDevice,
+  CONNECTION_LOST: UIStrings.websocketDisconnectedConnectionLost
+}
+
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/utils/TargetDetachedDialog.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TargetDetachedDialog extends SDK.SDKModel.SDKModel<void> implements ProtocolProxyApi.InspectorDispatcher {
@@ -33,9 +47,25 @@ export class TargetDetachedDialog extends SDK.SDKModel.SDKModel<void> implements
     UI.RemoteDebuggingTerminatedScreen.RemoteDebuggingTerminatedScreen.show(reason);
   }
 
+  static getCustomUiReason(connectionLostDetails?: {reason?: string, code?: string, errorType?: string}): string | null {
+    if (!connectionLostDetails) {
+      return null;
+    }
+
+    if (connectionLostDetails.code === "1011" && connectionLostDetails.reason?.includes('[UREGISTERED_DEVICE]')) {
+      return i18nString(DisconnectedReasonsUIStrings.UREGISTERED_DEVICE);
+    }
+
+    if (connectionLostDetails.code === "1000" && connectionLostDetails.reason?.includes('[CONNECTION_LOST]')) {
+      return i18nString(DisconnectedReasonsUIStrings.CONNECTION_LOST);
+    }
+
+    return null;
+  }
+
   static webSocketConnectionLost(connectionLostDetails?: {reason?: string, code?: string, errorType?: string}): void {
-    UI.RemoteDebuggingTerminatedScreen.RemoteDebuggingTerminatedScreen.show(
-        i18nString(UIStrings.websocketDisconnected), connectionLostDetails);
+    const uiReason = TargetDetachedDialog.getCustomUiReason(connectionLostDetails) || i18nString(UIStrings.websocketDisconnected);
+    UI.RemoteDebuggingTerminatedScreen.RemoteDebuggingTerminatedScreen.show(uiReason, connectionLostDetails);
   }
 
   targetCrashed(): void {

front_end/ui/legacy/remoteDebuggingTerminatedScreen.css

@@ -6,6 +6,7 @@
 
 .widget {
   padding: 20px;
+  user-select: text;
 }
 
 .remote-debugging-terminated-title {
@@ -17,16 +18,14 @@
 .remote-debugging-terminated-message {
   font-size: 14px;
   margin: 5px 0;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .remote-debugging-terminated-options {
   display: grid;
   grid-template-columns: 1fr auto;
   grid-gap: 8px;
   align-items: center;
-  padding-top: 12px;
-  border-top: 1px solid var(--color-details-hairline-light);
 }
 
 .remote-debugging-terminated-label {
@@ -45,21 +44,28 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 16px;
   padding: 12px 16px;
   background-color: var(--color-background-elevation-1);
   border-radius: 6px;
+  margin-bottom: 12px;
 }
 
 .remote-debugging-terminated-feedback-label {
   font-size: 14px;
   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;
   color: var(--override-reason-color);
+  margin: 8px;
+  textarea {
+    width: 100%;
+  }
 }
 
 .theme-with-dark-background .reason,