Make disconnect dialog customizable

The current disconnect dialog is hard coded to websocket disconnect. In
order to utilize the disconnect dialog in rehydrated session while
supplying customizable message, we need to make the following small
refactor so we're able to provide customized message in the dialog.

Example: https://imgur.com/a/xTUuNj1

Bug: 337909145
Change-Id: I5d869bc54fb6b46e4dcbfa17d5d9c2a755262d37
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6074656
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>
Reviewed-by: Robert Paveza <[email protected]>

Author: Jayson Chen

front_end/core/sdk/Connections.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../core/i18n/i18n.js';
 import * as Common from '../common/common.js';
 import * as Host from '../host/host.js';
 import type * as Platform from '../platform/platform.js';
@@ -10,6 +11,14 @@ import * as Root from '../root/root.js';
 
 import {RehydratingConnection} from './RehydratingConnection.js';
 
+const UIStrings = {
+  /**
+   *@description Text on the remote debugging window to indicate the connection is lost
+   */
+  websocketDisconnected: 'WebSocket disconnected',
+};
+const str_ = i18n.i18n.registerUIStrings('core/sdk/Connections.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class MainConnection implements ProtocolClient.InspectorBackend.Connection {
   onMessage: ((arg0: (Object|string)) => void)|null;
   #onDisconnect: ((arg0: string) => void)|null;
@@ -80,10 +89,12 @@ export class WebSocketConnection implements ProtocolClient.InspectorBackend.Conn
   #socket: WebSocket|null;
   onMessage: ((arg0: (Object|string)) => void)|null;
   #onDisconnect: ((arg0: string) => void)|null;
-  #onWebSocketDisconnect: (() => void)|null;
+  #onWebSocketDisconnect: ((message: Platform.UIString.LocalizedString) => void)|null;
   #connected: boolean;
   #messages: string[];
-  constructor(url: Platform.DevToolsPath.UrlString, onWebSocketDisconnect: () => void) {
+  constructor(
+      url: Platform.DevToolsPath.UrlString,
+      onWebSocketDisconnect: (message: Platform.UIString.LocalizedString) => void) {
     this.#socket = new WebSocket(url);
     this.#socket.onerror = this.onError.bind(this);
     this.#socket.onopen = this.onOpen.bind(this);
@@ -111,7 +122,7 @@ export class WebSocketConnection implements ProtocolClient.InspectorBackend.Conn
 
   private onError(): void {
     if (this.#onWebSocketDisconnect) {
-      this.#onWebSocketDisconnect.call(null);
+      this.#onWebSocketDisconnect.call(null, i18nString(UIStrings.websocketDisconnected));
     }
     if (this.#onDisconnect) {
       // This is called if error occurred while connecting.
@@ -133,7 +144,7 @@ export class WebSocketConnection implements ProtocolClient.InspectorBackend.Conn
 
   private onClose(): void {
     if (this.#onWebSocketDisconnect) {
-      this.#onWebSocketDisconnect.call(null);
+      this.#onWebSocketDisconnect.call(null, i18nString(UIStrings.websocketDisconnected));
     }
     if (this.#onDisconnect) {
       this.#onDisconnect.call(null, 'websocket closed');
@@ -266,21 +277,23 @@ export class ParallelConnection implements ParallelConnectionInterface {
 }
 
 export async function initMainConnection(
-    createRootTarget: () => Promise<void>, websocketConnectionLost: () => void): Promise<void> {
-  ProtocolClient.InspectorBackend.Connection.setFactory(createMainConnection.bind(null, websocketConnectionLost));
+    createRootTarget: () => Promise<void>,
+    onConnectionLost: (message: Platform.UIString.LocalizedString) => void): Promise<void> {
+  ProtocolClient.InspectorBackend.Connection.setFactory(createMainConnection.bind(null, onConnectionLost));
   await createRootTarget();
   Host.InspectorFrontendHost.InspectorFrontendHostInstance.connectionReady();
 }
 
-function createMainConnection(websocketConnectionLost: () => void): ProtocolClient.InspectorBackend.Connection {
+function createMainConnection(onConnectionLost: (message: Platform.UIString.LocalizedString) => void):
+    ProtocolClient.InspectorBackend.Connection {
   if (Root.Runtime.getPathName().includes('rehydrated_devtools_app')) {
-    return new RehydratingConnection();
+    return new RehydratingConnection(onConnectionLost);
   }
   const wsParam = Root.Runtime.Runtime.queryParam('ws');
   const wssParam = Root.Runtime.Runtime.queryParam('wss');
   if (wsParam || wssParam) {
     const ws = (wsParam ? `ws://${wsParam}` : `wss://${wssParam}`) as Platform.DevToolsPath.UrlString;
-    return new WebSocketConnection(ws, websocketConnectionLost);
+    return new WebSocketConnection(ws, onConnectionLost);
   }
   if (Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {
     return new StubConnection();

front_end/core/sdk/RehydratingConnection.ts

@@ -26,7 +26,7 @@
 import * as Common from '../../core/common/common.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as i18n from '../i18n/i18n.js';
-import {UserVisibleError} from '../platform/platform.js';
+import type * as Platform from '../platform/platform.js';
 import type * as ProtocolClient from '../protocol_client/protocol_client.js';
 
 import * as EnhancedTraces from './EnhancedTracesParser.js';
@@ -68,19 +68,21 @@ export class RehydratingConnection implements ProtocolClient.InspectorBackend.Co
   onMessage: ((arg0: Object) => void)|null = null;
   traceEvents: unknown[] = [];
   sessions: Map<number, RehydratingSessionBase> = new Map();
+  #onConnectionLost: (message: Platform.UIString.LocalizedString) => void;
   #rehydratingWindow: Window&typeof globalThis;
   #onReceiveHostWindowPayloadBound = this.#onReceiveHostWindowPayload.bind(this);
 
-  constructor() {
+  constructor(onConnectionLost: (message: Platform.UIString.LocalizedString) => void) {
     // If we're invoking this class, we're in the rehydrating pop-up window. Rename window for clarity.
+    this.#onConnectionLost = onConnectionLost;
     this.#rehydratingWindow = window;
     this.#setupMessagePassing();
   }
 
   #setupMessagePassing(): void {
     this.#rehydratingWindow.addEventListener('message', this.#onReceiveHostWindowPayloadBound);
     if (!this.#rehydratingWindow.opener) {
-      throw new UserVisibleError.UserVisibleError(i18nString(UIStrings.noHostWindow));
+      this.#onConnectionLost(i18nString(UIStrings.noHostWindow));
     }
     this.#rehydratingWindow.opener.postMessage({type: 'REHYDRATING_WINDOW_READY'});
   }
@@ -97,7 +99,7 @@ export class RehydratingConnection implements ProtocolClient.InspectorBackend.Co
         await this.startHydration(reader.result as string);
       };
       reader.onerror = (): void => {
-        throw new UserVisibleError.UserVisibleError(i18nString(UIStrings.errorLoadingLog));
+        this.#onConnectionLost(i18nString(UIStrings.errorLoadingLog));
       };
       reader.readAsText(traceFile);
     }

front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -107,7 +107,7 @@ export class InspectorMainImpl implements Common.Runnable.Runnable {
       if (type !== SDK.Target.Type.TAB) {
         void target.runtimeAgent().invoke_runIfWaitingForDebugger();
       }
-    }, Components.TargetDetachedDialog.TargetDetachedDialog.webSocketConnectionLost);
+    }, Components.TargetDetachedDialog.TargetDetachedDialog.connectionLost);
 
     new SourcesPanelIndicator();
     new BackendSettingsSync();

front_end/entrypoints/js_app/js_app.ts

@@ -60,7 +60,7 @@ export class JsMainImpl implements Common.Runnable.Runnable {
       const target = SDK.TargetManager.TargetManager.instance().createTarget(
           'main', i18nString(UIStrings.main), SDK.Target.Type.NODE, null);
       void target.runtimeAgent().invoke_runIfWaitingForDebugger();
-    }, Components.TargetDetachedDialog.TargetDetachedDialog.webSocketConnectionLost);
+    }, Components.TargetDetachedDialog.TargetDetachedDialog.connectionLost);
   }
 }
 

front_end/entrypoints/node_app/NodeMain.ts

@@ -46,7 +46,7 @@ export class NodeMainImpl implements Common.Runnable.Runnable {
       const target = SDK.TargetManager.TargetManager.instance().createTarget(
           'main', i18nString(UIStrings.main), SDK.Target.Type.BROWSER, null);
       target.setInspectedURL('Node.js' as Platform.DevToolsPath.UrlString);
-    }, Components.TargetDetachedDialog.TargetDetachedDialog.webSocketConnectionLost);
+    }, Components.TargetDetachedDialog.TargetDetachedDialog.connectionLost);
   }
 }
 

front_end/entrypoints/worker_app/WorkerMain.ts

@@ -39,7 +39,7 @@ export class WorkerMainImpl implements Common.Runnable.Runnable {
       }
       SDK.TargetManager.TargetManager.instance().createTarget(
           'main', i18nString(UIStrings.main), SDK.Target.Type.ServiceWorker, null);
-    }, Components.TargetDetachedDialog.TargetDetachedDialog.webSocketConnectionLost);
+    }, Components.TargetDetachedDialog.TargetDetachedDialog.connectionLost);
     new MobileThrottling.NetworkPanelIndicator.NetworkPanelIndicator();
   }
 }

front_end/ui/legacy/components/utils/TargetDetachedDialog.ts

@@ -2,20 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as i18n from '../../../../core/i18n/i18n.js';
+import type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as UI from '../../legacy.js';
 
-const UIStrings = {
-  /**
-   *@description Text on the remote debugging window to indicate the connection is lost
-   */
-  websocketDisconnected: 'WebSocket disconnected',
-};
-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 {
   private static hideCrashedDialog: (() => void)|null;
   constructor(target: SDK.Target.Target) {
@@ -33,9 +25,8 @@ export class TargetDetachedDialog extends SDK.SDKModel.SDKModel<void> implements
     UI.RemoteDebuggingTerminatedScreen.RemoteDebuggingTerminatedScreen.show(reason);
   }
 
-  static webSocketConnectionLost(): void {
-    UI.RemoteDebuggingTerminatedScreen.RemoteDebuggingTerminatedScreen.show(
-        i18nString(UIStrings.websocketDisconnected));
+  static connectionLost(message: Platform.UIString.LocalizedString): void {
+    UI.RemoteDebuggingTerminatedScreen.RemoteDebuggingTerminatedScreen.show(message);
   }
 
   targetCrashed(): void {