Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the messaging for the 'disconnected' dialog #116

Merged
merged 1 commit into from
Sep 23, 2024
Merged

Update the messaging for the 'disconnected' dialog #116

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 28 additions & 8 deletions front_end/ui/legacy/RemoteDebuggingTerminatedScreen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,25 @@ 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 by reopening DevTools.',
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.',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unnecessary backticks around "DevTools"

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CDT has those in some existing strings. I suppose it gets swapped for something else if some build flags are specified? Let's do a pass on all of those and see if they fit our needs.

/**
* @description Text on a button to dismiss the dialog
*/
closeDialog: 'Dismiss dialog',
/**
* @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 in a dialog box to prompt for feedback if the disconnection is unexpected.
*/
sendFeedbackMessage: '[FB-only] Please send feedback if this disconnection is unexpected.',
Comment on lines +30 to +47
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Welcome any alternatives that's more concise!

/**
* @description Label of the FB-only 'send feedback' button.
*/
Expand All @@ -41,7 +53,7 @@ const UIStrings = {
const str_ = i18n.i18n.registerUIStrings('ui/legacy/RemoteDebuggingTerminatedScreen.ts', UIStrings);
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
export class RemoteDebuggingTerminatedScreen extends VBox {
constructor(reason: string) {
constructor(reason: string, onClose?: () => void) {
super(true);
this.registerRequiredCSS(remoteDebuggingTerminatedScreenStyles);
const message = this.contentElement.createChild('div', 'message');
Expand All @@ -50,26 +62,34 @@ export class RemoteDebuggingTerminatedScreen extends VBox {
const reasonElement = span.createChild('span', 'reason');
reasonElement.textContent = reason;
this.contentElement.createChild('div', 'message').textContent = i18nString(UIStrings.reconnectWhenReadyByReopening);
const button = createTextButton(

const reconnectButton = createTextButton(
i18nString(UIStrings.reconnectDevtools), () => window.location.reload(), {jslogContext: 'reconnect'});
const buttonRow = this.contentElement.createChild('div', 'button');
buttonRow.appendChild(button);
this.contentElement.createChild('div', 'button').appendChild(reconnectButton);

if (onClose) {
this.contentElement.createChild('div', 'message').textContent = i18nString(UIStrings.perserveState);

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'});
buttonRow.appendChild(feedbackButton);
this.contentElement.createChild('div', 'button').appendChild(feedbackButton);
}
}

static show(reason: string): void {
const dialog = new Dialog('remote-debnugging-terminated');
dialog.setSizeBehavior(SizeBehavior.MeasureContent);
dialog.addCloseButton();
dialog.setDimmed(true);
new RemoteDebuggingTerminatedScreen(reason).show(dialog.contentElement);
new RemoteDebuggingTerminatedScreen(reason, () => dialog.hide()).show(dialog.contentElement);
dialog.show();
Host.rnPerfMetrics.remoteDebuggingTerminated(reason);
}
Expand Down
Loading