Add recommendation to enable 'preserve log'

Author: EdmondChuiHW

front_end/entrypoints/rn_fusebox/rn_fusebox.ts

@@ -22,10 +22,10 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Main from '../main/main.js';
+import * as Protocol from '../../generated/protocol.js';
+import * as Common from '../../core/common/common.js';
 
-import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
-import type * as Protocol from '../../generated/protocol.js';
 import type * as Sources from '../../panels/sources/sources.js';
 import * as RNExperiments from '../../core/rn_experiments/rn_experiments.js';
 
@@ -106,6 +106,18 @@ class FuseboxClientMetadataModel extends SDK.SDKModel.SDKModel<void> {
           const success = false;
           Host.rnPerfMetrics.fuseboxSetClientMetadataFinished(success, reason);
         });
+
+    if (!Common.Settings.Settings.instance().moduleSetting('preserve-console-log').get()) {
+      target.model(SDK.ConsoleModel.ConsoleModel)
+          ?.addMessage(new SDK.ConsoleModel.ConsoleMessage(
+              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',
+              }));
+    }
   }
 }
 

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;
   }
 

front_end/ui/components/settings/settingCheckbox.css

@@ -5,6 +5,7 @@
  */
 
 :host {
+  display: block;
   padding: 0;
   margin: 0;
 }