[GM3Restyling] Update remote debugging dialog

Screenshot: https://imgur.com/a/2XUhSrM

Bug: 325442935
Change-Id: I0b2553180a40a3e68ef7ad34f73c27a0ed397df9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6282145
Auto-Submit: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>

Author: Kateryna Prokopenko

front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts

@@ -12,11 +12,16 @@ import {VBox} from './Widget.js';
 
 const UIStrings = {
   /**
-   * @description Text in a dialog box in DevTools stating why remote debugging has been terminated.
+   * @description Text in a dialog box in DevTools stating that 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/).
    */
-  debuggingConnectionWasClosed: 'Debugging connection was closed. Reason: ',
+  debuggingConnectionWasClosed: 'Debugging connection was closed',
+  /**
+   *@description Text in a dialog box in DevTools stating the reason for remote debugging being terminated.
+   *@example {target_closed} PH1
+   */
+  connectionClosedReason: 'Reason: {PH1}.',
   /**
    * @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
@@ -38,15 +43,15 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
   constructor(reason: string) {
     super(true);
     this.registerRequiredCSS(remoteDebuggingTerminatedScreenStyles);
-    const message = this.contentElement.createChild('div', 'message');
-    const span = message.createChild('span');
-    span.append(i18nString(UIStrings.debuggingConnectionWasClosed));
-    const reasonElement = span.createChild('span', 'reason');
-    reasonElement.textContent = reason;
-    this.contentElement.createChild('div', 'message').textContent = i18nString(UIStrings.reconnectWhenReadyByReopening);
+    this.contentElement.createChild('div', 'header').textContent = i18nString(UIStrings.debuggingConnectionWasClosed);
+    const contentContainer = this.contentElement.createChild('div', 'content');
+    contentContainer.createChild('div', 'reason').textContent =
+        i18nString(UIStrings.connectionClosedReason, {PH1: reason});
+    contentContainer.createChild('div', 'message').textContent = i18nString(UIStrings.reconnectWhenReadyByReopening);
+    const buttonContainer = this.contentElement.createChild('div', 'button-container');
     const button = createTextButton(
         i18nString(UIStrings.reconnectDevtools), () => window.location.reload(), {jslogContext: 'reconnect'});
-    this.contentElement.createChild('div', 'button').appendChild(button);
+    buttonContainer.createChild('div', 'button').appendChild(button);
   }
 
   static show(reason: string): void {

front_end/ui/legacy/remoteDebuggingTerminatedScreen.css

@@ -4,29 +4,24 @@
  * found in the LICENSE file.
  */
 
-.widget {
-  padding: 20px;
+.header {
+  padding-top: var(--sys-size-3);
+  margin: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);
+  font: var(--sys-typescale-body2-medium);
 }
 
-.message,
-.button {
-  font-size: larger;
-  white-space: pre;
-  margin: 5px;
+.close-button {
+  margin: var(--sys-size-3);
 }
 
-.button {
-  text-align: center;
-  margin-top: 10px;
+.content {
+  margin: 0 var(--sys-size-8);
 }
 
-.reason {
-  --override-reason-color: #8b0000;
-
-  color: var(--override-reason-color);
+.button-container {
+  margin: var(--sys-size-6) var(--sys-size-8) var(--sys-size-8) var(--sys-size-8);
 }
 
-.theme-with-dark-background .reason,
-:host-context(.theme-with-dark-background) .reason {
-  --override-reason-color: rgb(255 116 116);
+.reason {
+  color: var(--sys-color-error);
 }