add devtools disconnected reasons

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/ui/legacy/RemoteDebuggingTerminatedScreen.ts

@@ -25,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
@@ -68,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]);
 
@@ -81,21 +91,28 @@ 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>
-          <br/>
-          <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>
@@ -116,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);
   }

front_end/ui/legacy/remoteDebuggingTerminatedScreen.css

@@ -61,8 +61,11 @@
 
 .remote-debugging-terminated-reason {
   --override-reason-color: red;
-  line-height: 32px;
   color: var(--override-reason-color);
+  margin: 8px;
+  textarea {
+    width: 100%;
+  }
 }
 
 .theme-with-dark-background .reason,