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

Author: vzaidman

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,7 +6,7 @@
 
 .widget {
   padding: 20px;
-  user-select: all;
+  user-select: text;
 }
 
 .remote-debugging-terminated-title {
@@ -26,7 +26,6 @@
   grid-template-columns: 1fr auto;
   grid-gap: 8px;
   align-items: center;
-  padding-top: 12px;
 }
 
 .remote-debugging-terminated-label {
@@ -48,6 +47,7 @@
   padding: 12px 16px;
   background-color: var(--color-background-elevation-1);
   border-radius: 6px;
+  margin-bottom: 12px;
 }
 
 .remote-debugging-terminated-feedback-label {