From d1d0e8052d9d041da4e5900c3da70c6e61a14312 Mon Sep 17 00:00:00 2001
From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:52:27 +0100
Subject: [PATCH] Update the messaging for the 'disconnected' dialog

---
 .../legacy/RemoteDebuggingTerminatedScreen.ts | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts b/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts
index cd1fd5e7ed1a..99a00a693678 100644
--- a/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts
+++ b/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts
@@ -27,12 +27,24 @@ const UIStrings = {
    * device back in a state where it can be inspected, before DevTools can reconnect to it.
    */
   reconnectWhenReadyByReopening: 'Reconnect when ready by reopening DevTools.',
+  /**
+   * @description Text in a dialog box to explain `DevTools` can still be used while disconnected.
+   */
+  perserveState: 'Dismiss this dialog and continue using `DevTools` while disconnected.',
+  /**
+   * @description Text on a button to dismiss the dialog
+   */
+  closeDialog: 'Dismiss dialog',
   /**
    * @description Text on a button to reconnect Devtools when remote debugging 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/).
    */
   reconnectDevtools: 'Reconnect `DevTools`',
+  /**
+   * @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 Label of the FB-only 'send feedback' button.
    */
@@ -41,7 +53,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/RemoteDebuggingTerminatedScreen.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class RemoteDebuggingTerminatedScreen extends VBox {
-  constructor(reason: string) {
+  constructor(reason: string, onClose?: () => void) {
     super(true);
     this.registerRequiredCSS(remoteDebuggingTerminatedScreenStyles);
     const message = this.contentElement.createChild('div', 'message');
@@ -50,26 +62,34 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
     const reasonElement = span.createChild('span', 'reason');
     reasonElement.textContent = reason;
     this.contentElement.createChild('div', 'message').textContent = i18nString(UIStrings.reconnectWhenReadyByReopening);
-    const button = createTextButton(
+
+    const reconnectButton = createTextButton(
         i18nString(UIStrings.reconnectDevtools), () => window.location.reload(), {jslogContext: 'reconnect'});
-    const buttonRow = this.contentElement.createChild('div', 'button');
-    buttonRow.appendChild(button);
+    this.contentElement.createChild('div', 'button').appendChild(reconnectButton);
+
+    if (onClose) {
+      this.contentElement.createChild('div', 'message').textContent = i18nString(UIStrings.perserveState);
+
+      const closeButton = createTextButton(i18nString(UIStrings.closeDialog), onClose, {jslogContext: 'dismiss'});
+      this.contentElement.createChild('div', 'button').appendChild(closeButton);
+    }
 
     if (globalThis.FB_ONLY__reactNativeFeedbackLink) {
+      this.contentElement.createChild('div', 'message').textContent = i18nString(UIStrings.sendFeedbackMessage);
+
       const feedbackLink = globalThis.FB_ONLY__reactNativeFeedbackLink as Platform.DevToolsPath.UrlString;
       const feedbackButton = createTextButton(i18nString(UIStrings.sendFeedback), () => {
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(feedbackLink);
       }, {className: 'primary-button', jslogContext: 'sendFeedback'});
-      buttonRow.appendChild(feedbackButton);
+      this.contentElement.createChild('div', 'button').appendChild(feedbackButton);
     }
   }
 
   static show(reason: string): void {
     const dialog = new Dialog('remote-debnugging-terminated');
     dialog.setSizeBehavior(SizeBehavior.MeasureContent);
-    dialog.addCloseButton();
     dialog.setDimmed(true);
-    new RemoteDebuggingTerminatedScreen(reason).show(dialog.contentElement);
+    new RemoteDebuggingTerminatedScreen(reason, () => dialog.hide()).show(dialog.contentElement);
     dialog.show();
     Host.rnPerfMetrics.remoteDebuggingTerminated(reason);
   }