Add recommendation to enable 'preserve log'

Author: EdmondChuiHW

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',
+          }));
     }
   }
 

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