From 6f29504d63ea3de4b07545fdfa59b978e30b05a9 Mon Sep 17 00:00:00 2001
From: Edmond Chui <1967998+EdmondChuiHW@users.noreply.github.com>
Date: Tue, 15 Oct 2024 12:15:25 +0100
Subject: [PATCH] Add recommendation to enable 'preserve log' (#125)

---
 front_end/panels/console/ConsoleView.ts              |  8 ++++++++
 front_end/panels/console/ConsoleViewMessage.ts       | 11 +++++++++++
 front_end/ui/components/settings/settingCheckbox.css |  1 +
 3 files changed, 20 insertions(+)

diff --git a/front_end/panels/console/ConsoleView.ts b/front_end/panels/console/ConsoleView.ts
index fd8ad50720d3..2b36b6c37ca0 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 a4b47b6b2d70..9df5076f34be 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 dcfb66736d35..53aa395baa34 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;
 }