diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index e2fe95c759d3..8d9faab8e7a2 100644 --- a/config/gni/devtools_grd_files.gni +++ b/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", diff --git a/front_end/ui/legacy/BUILD.gn b/front_end/ui/legacy/BUILD.gn index 706838fe18eb..141f1fcea987 100644 --- a/front_end/ui/legacy/BUILD.gn +++ b/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", diff --git a/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts b/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts index a39341151130..512e7f3b1a7c 100644 --- a/front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts +++ b/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,21 +31,21 @@ 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. */ @@ -48,41 +53,47 @@ const UIStrings = { /** * @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` +

${i18nString(UIStrings.title)}

+ ${i18nString(UIStrings.debuggingConnectionWasClosed)}${reason} +
+
+ ${i18nString(UIStrings.reconnectWhenReadyByReopening)} +
+ ${createTextButton( + i18nString(UIStrings.reconnectDevtools), + handleReconnect, + {className: "primary-button", jslogContext: "reconnect"} + )} +
${i18nString(UIStrings.closeDialogDetail)}
+ ${createTextButton(i18nString(UIStrings.closeDialog), onClose, { + jslogContext: "dismiss", + })} +
+ ${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` +
+
${i18nString(UIStrings.sendFeedbackMessage)}
+ ${createTextButton( + i18nString(UIStrings.sendFeedback), + handleSendFeedback, + {className: "primary-button", jslogContext: "sendFeedback"} + )} +
+ `; + } } diff --git a/front_end/ui/legacy/remoteDebuggingTerminatedScreen.css b/front_end/ui/legacy/remoteDebuggingTerminatedScreen.css index e9bb7e0dac50..2eb24a4b490c 100644 --- a/front_end/ui/legacy/remoteDebuggingTerminatedScreen.css +++ b/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); }