Keep Network blocking setting in sync with checkbox

Previously, changing the setting via command menu does not dispatch a
BLOCKED_PATTERNS_CHANGED event. Therefore the checkbox is not updated.

With this change, changing the setting dispatches a B_P_C event, which
then correctly updates the checkbox and the list of blocked patterns.

Fixed: 378058733
Change-Id: I532cf323b3a5739b029b501ee4698ea6a19168d2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6022977
Auto-Submit: Yang Guo <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Yang Guo <[email protected]>

Author: hashseed

front_end/core/sdk/NetworkManager.test.ts

@@ -58,6 +58,56 @@ describeWithMockConnection('MultitargetNetworkManager', () => {
     }
     assert.isTrue(expectedCall.calledOnceWith({origin: 'https://example.com'}));
   });
+
+  it('blocking settings are consistent after change', async () => {
+    const multitargetNetworkManager = SDK.NetworkManager.MultitargetNetworkManager.instance({forceNew: true});
+    let eventCounter = 0;
+    multitargetNetworkManager.addEventListener(
+        SDK.NetworkManager.MultitargetNetworkManager.Events.BLOCKED_PATTERNS_CHANGED, () => eventCounter++);
+    const blockingEnabledSetting = Common.Settings.Settings.instance().moduleSetting('request-blocking-enabled');
+    const blockedPatternsSetting: Common.Settings.Setting<SDK.NetworkManager.BlockedPattern[]> =
+        Common.Settings.Settings.instance().createSetting('network-blocked-patterns', []);
+
+    // Change blocking setting via Common.Settings.Settings.
+    assert.isFalse(multitargetNetworkManager.isBlocking());
+    assert.isFalse(multitargetNetworkManager.blockingEnabled());
+    blockingEnabledSetting.set(true);
+    assert.strictEqual(eventCounter, 1);
+    assert.isFalse(multitargetNetworkManager.isBlocking());
+    assert.isTrue(multitargetNetworkManager.blockingEnabled());
+    blockedPatternsSetting.set([{url: 'example.com', enabled: true}]);
+    assert.strictEqual(eventCounter, 2);
+    assert.isTrue(multitargetNetworkManager.isBlocking());
+    assert.isTrue(multitargetNetworkManager.blockingEnabled());
+    blockedPatternsSetting.set([]);
+    assert.strictEqual(eventCounter, 3);
+    assert.isFalse(multitargetNetworkManager.isBlocking());
+    assert.isTrue(multitargetNetworkManager.blockingEnabled());
+    blockingEnabledSetting.set(false);
+    assert.strictEqual(eventCounter, 4);
+    assert.isFalse(multitargetNetworkManager.isBlocking());
+    assert.isFalse(multitargetNetworkManager.blockingEnabled());
+
+    // Change blocking setting via MultitargetNetworkManager.
+    assert.isFalse(multitargetNetworkManager.isBlocking());
+    assert.isFalse(multitargetNetworkManager.blockingEnabled());
+    multitargetNetworkManager.setBlockingEnabled(true);
+    assert.strictEqual(eventCounter, 5);
+    assert.isFalse(multitargetNetworkManager.isBlocking());
+    assert.isTrue(multitargetNetworkManager.blockingEnabled());
+    multitargetNetworkManager.setBlockedPatterns([{url: 'example.com', enabled: true}]);
+    assert.strictEqual(eventCounter, 6);
+    assert.isTrue(multitargetNetworkManager.isBlocking());
+    assert.isTrue(multitargetNetworkManager.blockingEnabled());
+    multitargetNetworkManager.setBlockedPatterns([]);
+    assert.strictEqual(eventCounter, 7);
+    assert.isFalse(multitargetNetworkManager.isBlocking());
+    assert.isTrue(multitargetNetworkManager.blockingEnabled());
+    multitargetNetworkManager.setBlockingEnabled(false);
+    assert.strictEqual(eventCounter, 8);
+    assert.isFalse(multitargetNetworkManager.isBlocking());
+    assert.isFalse(multitargetNetworkManager.blockingEnabled());
+  });
 });
 
 describe('NetworkDispatcher', () => {

front_end/core/sdk/NetworkManager.ts

@@ -1295,8 +1295,14 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
     this.#updatingInterceptionPatternsPromise = null;
 
     // TODO(allada) Remove these and merge it with request interception.
+    const blockedPatternChanged: () => void = () => {
+      this.updateBlockedPatterns();
+      this.dispatchEventToListeners(MultitargetNetworkManager.Events.BLOCKED_PATTERNS_CHANGED);
+    };
     this.#blockingEnabledSetting = Common.Settings.Settings.instance().moduleSetting('request-blocking-enabled');
+    this.#blockingEnabledSetting.addChangeListener(blockedPatternChanged);
     this.#blockedPatternsSetting = Common.Settings.Settings.instance().createSetting('network-blocked-patterns', []);
+    this.#blockedPatternsSetting.addChangeListener(blockedPatternChanged);
     this.#effectiveBlockedURLs = [];
     this.updateBlockedPatterns();
 
@@ -1537,17 +1543,13 @@ export class MultitargetNetworkManager extends Common.ObjectWrapper.ObjectWrappe
 
   setBlockedPatterns(patterns: BlockedPattern[]): void {
     this.#blockedPatternsSetting.set(patterns);
-    this.updateBlockedPatterns();
-    this.dispatchEventToListeners(MultitargetNetworkManager.Events.BLOCKED_PATTERNS_CHANGED);
   }
 
   setBlockingEnabled(enabled: boolean): void {
     if (this.#blockingEnabledSetting.get() === enabled) {
       return;
     }
     this.#blockingEnabledSetting.set(enabled);
-    this.updateBlockedPatterns();
-    this.dispatchEventToListeners(MultitargetNetworkManager.Events.BLOCKED_PATTERNS_CHANGED);
   }
 
   private updateBlockedPatterns(): void {