diff --git a/front_end/panels/console/ConsoleView.ts b/front_end/panels/console/ConsoleView.ts index fd8ad50720d..2b36b6c37ca 100644 --- a/front_end/panels/console/ConsoleView.ts +++ b/front_end/panels/console/ConsoleView.ts @@ -628,6 +628,14 @@ export class ConsoleView extends UI.Widget.VBox implements if (!Common.Settings.Settings.instance().moduleSetting('preserve-console-log').get() && model.target().outermostTarget() === model.target()) { this.consoleCleared(); + this.addConsoleMessage(new SDK.ConsoleModel.ConsoleMessage( + model.target().model(SDK.RuntimeModel.RuntimeModel), Protocol.Log.LogEntrySource.Recommendation, + Protocol.Log.LogEntryLevel.Info, + '[React Native] Console messages are currently cleared upon DevTools disconnection. You can preserve logs in settings: ', + { + type: SDK.ConsoleModel.FrontendMessageType.System, + context: 'fusebox_preserve_log_rec', + })); } } diff --git a/front_end/panels/console/ConsoleViewMessage.ts b/front_end/panels/console/ConsoleViewMessage.ts index a4b47b6b2d7..9df5076f34b 100644 --- a/front_end/panels/console/ConsoleViewMessage.ts +++ b/front_end/panels/console/ConsoleViewMessage.ts @@ -445,6 +445,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement { formattedMessage.appendChild(this.anchorElement); } formattedMessage.appendChild(messageElement); + + if (this.message.context === 'fusebox_preserve_log_rec') { + const link = document.createElement('button'); + link.classList.add('devtools-link', 'text-button', 'link-style'); + link.appendChild(link.ownerDocument.createTextNode('show settings')); + link.addEventListener('click', async () => { + await Common.Revealer.reveal(Common.Settings.Settings.instance().moduleSetting('preserve-console-log')); + }); + formattedMessage.appendChild(link); + } + return formattedMessage; } diff --git a/front_end/ui/components/settings/settingCheckbox.css b/front_end/ui/components/settings/settingCheckbox.css index dcfb66736d3..53aa395baa3 100644 --- a/front_end/ui/components/settings/settingCheckbox.css +++ b/front_end/ui/components/settings/settingCheckbox.css @@ -5,6 +5,7 @@ */ :host { + display: block; padding: 0; margin: 0; }