Update disconnected dialog styling (#123)

Author: huntie

config/gni/devtools_grd_files.gni

@@ -2169,7 +2169,7 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/popover.css.legacy.js",
   "front_end/ui/legacy/progressIndicator.css.legacy.js",
   "front_end/ui/legacy/radioButton.css.legacy.js",
-  "front_end/ui/legacy/remoteDebuggingTerminatedScreen.css.legacy.js",
+  "front_end/ui/legacy/remoteDebuggingTerminatedScreen.css.js",
   "front_end/ui/legacy/reportView.css.legacy.js",
   "front_end/ui/legacy/rootView.css.legacy.js",
   "front_end/ui/legacy/searchableView.css.legacy.js",

front_end/ui/legacy/BUILD.gn

@@ -12,6 +12,7 @@ generate_css("css_files") {
   sources = [
     "emptyWidget.css",
     "inspectorCommon.css",
+    "remoteDebuggingTerminatedScreen.css",
   ]
 }
 
@@ -35,7 +36,6 @@ generate_css("legacy_css_files") {
     "popover.css",
     "progressIndicator.css",
     "radioButton.css",
-    "remoteDebuggingTerminatedScreen.css",
     "reportView.css",
     "rootView.css",
     "searchableView.css",

front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts

@@ -5,14 +5,19 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
 
 import {Dialog} from './Dialog.js';
 import {SizeBehavior} from './GlassPane.js';
-import remoteDebuggingTerminatedScreenStyles from './remoteDebuggingTerminatedScreen.css.legacy.js';
+import remoteDebuggingTerminatedScreenStyles from './remoteDebuggingTerminatedScreen.css.js';
 import {createTextButton} from './UIUtils.js';
 import {VBox} from './Widget.js';
 
 const UIStrings = {
+  /**
+   * @description Title of a dialog box that appears when remote debugging has been terminated.
+   */
+  title: 'DevTools is disconnected',
   /**
    * @description Text in a dialog box in DevTools stating 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
@@ -26,63 +31,69 @@ const UIStrings = {
    * "Reconnect when ready", refers to the state of the mobile device. The developer first has to put the mobile
    * device back in a state where it can be inspected, before DevTools can reconnect to it.
    */
-  reconnectWhenReadyByReopening: 'Reconnect when ready (will reload 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',
+  reconnectWhenReadyByReopening: 'Reconnect when ready (will reload DevTools)',
   /**
    * @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 on a button to dismiss the dialog.
+   */
+  closeDialog: 'Dismiss',
+  /**
+   * @description Text in a dialog box to explain `DevTools` can still be used while disconnected.
+   */
+  closeDialogDetail: 'Dismiss this dialog and continue using `DevTools` while disconnected',
   /**
    * @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.
    */
-  sendFeedback: '[FB-only] Send feedback',
+  sendFeedback: 'Send feedback',
 };
+
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/RemoteDebuggingTerminatedScreen.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {render, html} = LitHtml;
+
 export class RemoteDebuggingTerminatedScreen extends VBox {
   constructor(reason: string, onClose?: () => void) {
     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);
-
-    const reconnectButton = createTextButton(
-        i18nString(UIStrings.reconnectDevtools), () => window.location.reload(), {jslogContext: 'reconnect'});
-    this.contentElement.createChild('div', 'button').appendChild(reconnectButton);
+    this.registerCSSFiles([remoteDebuggingTerminatedScreenStyles]);
 
-    if (onClose) {
-      this.contentElement.createChild('div', 'message').textContent = i18nString(UIStrings.perserveState);
+    const handleReconnect = () => {
+      window.location.reload();
+    };
+    const feedbackLink = globalThis.FB_ONLY__reactNativeFeedbackLink;
 
-      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'});
-      this.contentElement.createChild('div', 'button').appendChild(feedbackButton);
-    }
+    render(
+      html`
+        <h1 class="remote-debugging-terminated-title">${i18nString(UIStrings.title)}</h1>
+        <span class="remote-debugging-terminated-message">${i18nString(UIStrings.debuggingConnectionWasClosed)}<span class="remote-debugging-terminated-reason">${reason}</span></span>
+        <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"}
+          )}
+          <div class="remote-debugging-terminated-label">${i18nString(UIStrings.closeDialogDetail)}</div>
+          ${createTextButton(i18nString(UIStrings.closeDialog), onClose, {
+            jslogContext: "dismiss",
+          })}
+        </div>
+        ${feedbackLink !== null && feedbackLink !== undefined
+          ? this.#createFeedbackSection(feedbackLink!) : null}
+      `,
+      this.contentElement
+    );
   }
 
   static show(reason: string): void {
@@ -93,4 +104,23 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
     dialog.show();
     Host.rnPerfMetrics.remoteDebuggingTerminated(reason);
   }
+
+  #createFeedbackSection(feedbackLink: string): LitHtml.TemplateResult {
+    const handleSendFeedback = () => {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
+        feedbackLink as Platform.DevToolsPath.UrlString
+      );
+    };
+
+    return html`
+      <div class="remote-debugging-terminated-feedback-container">
+        <div class="remote-debugging-terminated-feedback-label">${i18nString(UIStrings.sendFeedbackMessage)}</div>
+        ${createTextButton(
+            i18nString(UIStrings.sendFeedback),
+            handleSendFeedback,
+            {jslogContext: "sendFeedback"}
+        )}
+      </div>
+    `;
+  }
 }

front_end/ui/legacy/remoteDebuggingTerminatedScreen.css

@@ -8,25 +8,62 @@
   padding: 20px;
 }
 
-.message,
-.button {
-  font-size: larger;
+.remote-debugging-terminated-title {
+  font-size: 17px;
+  font-weight: normal;
+  margin: 6px 0;
+}
+
+.remote-debugging-terminated-message {
+  font-size: 14px;
   white-space: pre;
-  margin: 5px;
+  margin: 5px 0;
+  margin-bottom: 24px;
+}
+
+.remote-debugging-terminated-options {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-gap: 8px;
+  align-items: center;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-details-hairline-light);
+}
+
+.remote-debugging-terminated-label {
+  grid-column: 1;
+  margin: 8px 0;
+  max-width: 300px;
+  font-size: larger;
+  line-height: 1.4;
+}
+
+.remote-debugging-terminated-options .text-button {
+  grid-column: 2;
+}
+
+.remote-debugging-terminated-feedback-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 16px;
+  padding: 12px 16px;
+  background-color: var(--color-background-elevation-1);
+  border-radius: 6px;
 }
 
-.button {
-  text-align: center;
-  margin-top: 10px;
+.remote-debugging-terminated-feedback-label {
+  font-size: 14px;
+  margin-bottom: 8px;
 }
 
-.reason {
+.remote-debugging-terminated-reason {
   --override-reason-color: #8b0000;
 
   color: var(--override-reason-color);
 }
 
-.-theme-with-dark-background .reason,
+.-theme-with-dark-background .remote-debugging-terminated-reason,
 :host-context(.-theme-with-dark-background) .reason {
   --override-reason-color: rgb(255 116 116);
 }