Add setting for recording network log

Adds a "Record network log" setting, so that a page reload does not
reset the user's choice of whether to record or not.

This is a refactor of reverted https://crrev.com/c/2503513 and
abandoned https://crrev.com/c/2514439.

Fixed: chromium:1122580

Change-Id: I927869b2a756523e3aadb2019d2fc20b5512efc4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2523253
Commit-Queue: Wolfgang Beyer <wolfi@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>

front_end/browser_sdk/module.json

@@ -11,13 +11,22 @@
       "options": [
         {
           "value": true,
-          "title": "Do not preserve log on page reload / navigation"
+          "title": "Preserve log on page reload / navigation"
         },
         {
           "value": false,
-          "title": "Preserve log on page reload / navigation"
+          "title": "Do not preserve log on page reload / navigation"
         }
       ]
+    },
+    {
+      "type": "setting",
+      "category": "Network",
+      "title": "Record network log",
+      "settingName": "network_log.record-log",
+      "settingType": "boolean",
+      "storageType": "session",
+      "defaultValue": true
     }
   ],  "modules": [
     "browser_sdk.js",

front_end/langpacks/shared_strings.grdp

@@ -292,6 +292,9 @@
   <message name="IDS_DEVTOOLS_6bb61b1a929f2a0186f2671cd8258bd9" desc="Text to show something is not optimized">
     Not optimized: <ph name="REASON">$1s<ex>Optimized too many times</ex></ph>
   </message>
+  <message name="IDS_DEVTOOLS_6e68a529a38966508d348e9f65d7ea31" desc="Title of an action in the network tool to toggle recording">
+    Record network log
+  </message>
   <message name="IDS_DEVTOOLS_6f6cb72d544962fa333e2e34ce64f719" desc="Text for the size of something">
     Size
   </message>

front_end/main/MainImpl.js

@@ -270,6 +270,12 @@ export class MainImpl {
     UI.ContextMenu.ContextMenu.initialize();
     UI.ContextMenu.ContextMenu.installHandler(document);
     UI.Tooltip.Tooltip.installHandler(document);
+
+    // We need to force creation of the FrameManager early to make sure no issues are missed.
+    SDK.FrameManager.FrameManager.instance();
+    // We need to force creation of the NetworkLog early to make sure no requests are missed.
+    SDK.NetworkLog.NetworkLog.instance();
+
     // @ts-ignore layout test global
     self.SDK.consoleModel = SDK.ConsoleModel.ConsoleModel.instance();
     // @ts-ignore layout test global

front_end/network/NetworkLogView.js

@@ -740,15 +740,15 @@ export class NetworkLogView extends UI.Widget.VBox {
     this._recordingHint = this.element.createChild('div', 'network-status-pane fill');
     const hintText = this._recordingHint.createChild('div', 'recording-hint');
 
-    let reloadShortcutNode = null;
-    const reloadShortcut =
-        UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('inspector_main.reload')[0];
-    if (reloadShortcut) {
-      reloadShortcutNode = this._recordingHint.createChild('b');
-      reloadShortcutNode.textContent = reloadShortcut.title();
-    }
-
     if (this._recording) {
+      let reloadShortcutNode = null;
+      const reloadShortcut =
+          UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('inspector_main.reload')[0];
+      if (reloadShortcut) {
+        reloadShortcutNode = this._recordingHint.createChild('b');
+        reloadShortcutNode.textContent = reloadShortcut.title();
+      }
+
       const recordingText = hintText.createChild('span');
       recordingText.textContent = Common.UIString.UIString('Recording network activity…');
       if (reloadShortcutNode) {
@@ -760,12 +760,7 @@ export class NetworkLogView extends UI.Widget.VBox {
       const recordNode = hintText.createChild('b');
       recordNode.textContent =
           UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutTitleForAction('network.toggle-recording') || '';
-      if (reloadShortcutNode) {
-        hintText.appendChild(UI.UIUtils.formatLocalized(
-            'Record (%s) or reload (%s) to display network activity.', [recordNode, reloadShortcutNode]));
-      } else {
-        hintText.appendChild(UI.UIUtils.formatLocalized('Record (%s) to display network activity.', [recordNode]));
-      }
+      hintText.appendChild(UI.UIUtils.formatLocalized('Record (%s) to display network activity.', [recordNode]));
     }
     hintText.createChild('br');
     hintText.appendChild(UI.XLink.XLink.create(

front_end/network/NetworkPanel.js

@@ -171,11 +171,13 @@ export class NetworkPanel extends UI.Panel.Panel {
     this._networkRecordFilmStripSetting.addChangeListener(this._toggleRecordFilmStrip, this);
 
     this._preserveLogSetting = Common.Settings.Settings.instance().moduleSetting('network_log.preserve-log');
+    this._recordLogSetting = Common.Settings.Settings.instance().moduleSetting('network_log.record-log');
+    this._recordLogSetting.addChangeListener(({data}) => this._toggleRecord(data));
 
     this._throttlingSelect = this._createThrottlingConditionsSelect();
     this._setupToolbarButtons(splitWidget);
 
-    this._toggleRecord(true);
+    this._toggleRecord(this._recordLogSetting.get());
     this._toggleShowOverview();
     this._toggleLargerRequests();
     this._toggleRecordFilmStrip();
@@ -354,25 +356,19 @@ export class NetworkPanel extends UI.Panel.Panel {
     return toolbarItem;
   }
 
-  _toggleRecording() {
-    if (!this._preserveLogSetting.get() && !this._toggleRecordAction.toggled()) {
-      SDK.NetworkLog.NetworkLog.instance().reset();
-    }
-    this._toggleRecord(!this._toggleRecordAction.toggled());
-  }
-
   /**
    * @param {boolean} toggled
    */
   _toggleRecord(toggled) {
     this._toggleRecordAction.setToggled(toggled);
+    if (this._recordLogSetting.get() !== toggled) {
+      this._recordLogSetting.set(toggled);
+    }
+
     this._networkLogView.setRecording(toggled);
     if (!toggled && this._filmStripRecorder) {
       this._filmStripRecorder.stopRecording(this._filmStripAvailable.bind(this));
     }
-    // TODO(einbinder) This should be moved to a setting/action that NetworkLog owns but NetworkPanel controls, but
-    // always be present in the command menu.
-    SDK.NetworkLog.NetworkLog.instance().setIsRecording(toggled);
   }
 
   /**
@@ -416,7 +412,6 @@ export class NetworkPanel extends UI.Panel.Panel {
    * @param {!Common.EventTarget.EventTargetEvent} event
    */
   _willReloadPage(event) {
-    this._toggleRecord(true);
     if (this._pendingStopTimer) {
       clearTimeout(this._pendingStopTimer);
       delete this._pendingStopTimer;
@@ -913,7 +908,7 @@ export class ActionDelegate {
     }
     switch (actionId) {
       case 'network.toggle-recording': {
-        panel._toggleRecording();
+        panel._toggleRecord(!panel._recordLogSetting.get());
         return true;
       }
       case 'network.hide-request-details': {

front_end/network/network_strings.grdp

@@ -174,9 +174,6 @@
   <message name="IDS_DEVTOOLS_36d95f430159f0ac7a477e4ee6c5ad21" desc="Tooltip text that appears when hovering over the largeicon clear button in the Blocked URLs Pane of the Network panel">
     Remove all patterns
   </message>
-  <message name="IDS_DEVTOOLS_376815607a4b79934f79305216a8048c" desc="Text in Network Log View of the Network panel">
-    Record (<ph name="RECORDNODE">$1s<ex>network.toggle-recording</ex></ph>) or reload (<ph name="RELOADSHORTCUTNODE">$2s<ex>Ctrl + R</ex></ph>) to display network activity.
-  </message>
   <message name="IDS_DEVTOOLS_37bb3bd9caf5dafb7c8f9eccb3b9800e" desc="Text in Request Headers View of the Network panel">
     (unable to decode value)
   </message>
@@ -405,9 +402,6 @@
   <message name="IDS_DEVTOOLS_6e458346abf37cc727a811ea1d71034a" desc="Data grid name for Event Source data grids">
     Event Source
   </message>
-  <message name="IDS_DEVTOOLS_6e68a529a38966508d348e9f65d7ea31" desc="Title of an action in the network tool to toggle recording">
-    Record network log
-  </message>
   <message name="IDS_DEVTOOLS_71f5989793ddede100da3fde07d1f9f9" desc="An option in the user agent dropdown menu in the Network conditions tool">
     <ph name="LOCKED_1">Opera Mini — iOS</ph>
   </message>

front_end/sdk/NetworkLog.js

@@ -66,6 +66,15 @@ export class NetworkLog extends Common.ObjectWrapper.ObjectWrapper {
     /** @type {!WeakMap<!NetworkRequest, !InitiatorData>} */
     this._initiatorData = new WeakMap();
     TargetManager.instance().observeModels(NetworkManager, this);
+    /** @type {!Common.Settings.Setting<*>} */
+    const recordLogSetting = Common.Settings.Settings.instance().moduleSetting('network_log.record-log');
+    recordLogSetting.addChangeListener(() => {
+      const preserveLogSetting = Common.Settings.Settings.instance().moduleSetting('network_log.preserve-log');
+      if (!preserveLogSetting.get() && recordLogSetting.get()) {
+        this.reset();
+      }
+      this.setIsRecording(/** @type{boolean} */ (recordLogSetting.get()));
+    }, this);
   }
 
   /**

front_end/sdk/sdk.js

@@ -72,11 +72,6 @@ import * as TracingManager from './TracingManager.js';
 import * as TracingModel from './TracingModel.js';
 import * as WebAuthnModel from './WebAuthnModel.js';
 
-// We need to force creation of the FrameManager early to make sure no issues are missed.
-FrameManager.FrameManager.instance();
-// We need to force creation of the NetworkLog early to make sure no requests are missed.
-NetworkLog.NetworkLog.instance();
-
 export {
   ChildTargetManager,
   CompilerSourceMappingContentProvider,