Have InspectorView remove the Infobar instead of CookieControlsView

If CookieControlsView was responsible for listening for a
PrimaryPageChanged event and then removing the Infobar, the infobar
would not be removed if CookieControlsView was never created to
listen in the first place. This is a problem because the Infobar
might be created by the InspectorMain entrypoint which does not
guarantee that a CookieControlsView will be created as well.

By moving the listener to the InspectorView, we guarantee that the
Infobar is removed when the user reloads the page without needing
to open the Privacy and security panel.

Bug: 400962121
Change-Id: I612c4899e218e094fd31a3eda154ec69c20e8035
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6346989
Reviewed-by: Kim-Anh Tran <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Joshua Thomas <[email protected]>

Author: masnoble

front_end/panels/security/CookieControlsView.ts

@@ -352,8 +352,6 @@ export class CookieControlsView extends UI.Widget.VBox {
     this.checkGracePeriodActive().catch(error => {
       console.error(error);
     });
-
-    UI.InspectorView.InspectorView.instance().removeDebuggedTabReloadRequiredWarning();
   }
 
   async checkGracePeriodActive(event?: Common.EventTarget.EventTargetEvent<SDK.Resource.Resource>): Promise<void> {

front_end/ui/legacy/InspectorView.ts

@@ -32,6 +32,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
@@ -501,12 +502,19 @@ export class InspectorView extends VBox implements ViewLocationResolver {
       infobar.setCloseCallback(() => {
         delete this.reloadRequiredInfobar;
       });
+
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+          this.removeDebuggedTabReloadRequiredWarning, this);
     }
   }
 
   removeDebuggedTabReloadRequiredWarning(): void {
     if (this.reloadRequiredInfobar) {
       this.reloadRequiredInfobar.dispose();
+      SDK.TargetManager.TargetManager.instance().removeModelListener(
+          SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+          this.removeDebuggedTabReloadRequiredWarning, this);
     }
   }
 

test/e2e/security/privacy_test.ts

@@ -4,14 +4,14 @@
 import {assert} from 'chai';
 
 import {expectError} from '../../conductor/events.js';
-import {click, getBrowserAndPages, waitForAria} from '../../shared/helper.js';
+import {$textContent, click, getBrowserAndPages, waitForAria} from '../../shared/helper.js';
 import {reloadDevTools} from '../helpers/cross-tool-helper.js';
 import {getDataGridRows} from '../helpers/datagrid-helpers.js';
 import {
   navigateToSecurityTab,
 } from '../helpers/security-helpers.js';
 
-describe('The Privacy and security panel', function() {
+describe('Privacy tools', function() {
   let preloadScriptId: string;
 
   afterEach(async () => {
@@ -37,74 +37,111 @@ describe('The Privacy and security panel', function() {
     await reloadDevTools();
   });
 
-  it('shows reload bar when controls are changed', async () => {
-    await navigateToSecurityTab(/* privcayEnabled=*/ true);
-    await click('[aria-label="Temporarily limit third-party cookies, only when DevTools is open"]');
+  describe('The controls tool without the Privacy and security panel open', function() {
+    before(async () => {
+      const {frontend} = getBrowserAndPages();
+      await frontend.evaluate(`(async () => {
+        const Common = await import('./core/common/common.js');
+        const setting = Common.Settings.Settings.instance().createSetting('cookie-control-override-enabled', true);
+        setting.set(true);
+      })()`);
 
-    // Infobar should appear after changing control
-    const infoBar = await waitForAria('To apply your updated controls, reload the page');
-    infoBar.evaluate(el => assert.isNotNull(el));
+      await reloadDevTools();
+    });
+
+    after(async () => {
+      const {frontend} = getBrowserAndPages();
+      await frontend.evaluate(`(async () => {
+        const Common = await import('./core/common/common.js');
+        const setting = Common.Settings.Settings.instance().clearAll()
+      })()`);
+
+      await reloadDevTools();
+    });
 
-    // Allow time for infobar to animate in before clicking the button
-    await new Promise<void>(resolve => setTimeout(resolve, 550));
-    await click('dt-close-button', {root: infoBar});
+    it('will remove reload bar without privacy module loaded', async () => {
+      // Infobar should be presenet since the setting was set in the before
+      const infoBar = await waitForAria('To apply your updated controls, reload the page');
+      assert.isNotNull(infoBar);
 
-    // Infobar should be gone after clicking the close button
-    infoBar.evaluate(el => assert.isNotNull(el));
+      const {target} = getBrowserAndPages();
+      await target.reload();
+
+      // Infobar should be gone after reloading the page
+      assert.isNull(await $textContent('To apply your updated controls, reload the page'));
+    });
   });
 
-  it('filters rows when the search filter is populated', async () => {
-    await navigateToSecurityTab(/* privcayEnabled=*/ true);
-    await click('[aria-label="Third-party cookies"]');
+  describe('The Privacy and security panel', function() {
+    it('shows reload bar when controls are changed', async () => {
+      await navigateToSecurityTab(/* privcayEnabled=*/ true);
+      await click('[aria-label="Temporarily limit third-party cookies, only when DevTools is open"]');
 
-    // Populate with test issues to be filtered
-    const {frontend} = getBrowserAndPages();
-    frontend.evaluate(() => {
-      const issue1 = {
-        code: 'CookieIssue',
-        details: {
-          cookieIssueDetails: {
-            cookie: {
-              name: 'a',
-              path: '/',
-              domain: 'a.test',
+      // Infobar should appear after changing control
+      const infoBar = await waitForAria('To apply your updated controls, reload the page');
+      assert.isNotNull(infoBar);
+
+      // Allow time for infobar to animate in before clicking the button
+      await new Promise<void>(resolve => setTimeout(resolve, 550));
+      await click('dt-close-button', {root: infoBar});
+
+      // Infobar should be gone after clicking the close button
+      assert.isNull(await $textContent('To apply your updated controls, reload the page'));
+    });
+
+    it('filters rows when the search filter is populated', async () => {
+      await navigateToSecurityTab(/* privcayEnabled=*/ true);
+      await click('[aria-label="Third-party cookies"]');
+
+      // Populate with test issues to be filtered
+      const {frontend} = getBrowserAndPages();
+      frontend.evaluate(() => {
+        const issue1 = {
+          code: 'CookieIssue',
+          details: {
+            cookieIssueDetails: {
+              cookie: {
+                name: 'a',
+                path: '/',
+                domain: 'a.test',
+              },
+              cookieExclusionReasons: ['ExcludeThirdPartyPhaseout'],
+              cookieWarningReasons: [],
+              operation: 'ReadCookie',
+              cookieUrl: 'a.test',
             },
-            cookieExclusionReasons: ['ExcludeThirdPartyPhaseout'],
-            cookieWarningReasons: [],
-            operation: 'ReadCookie',
-            cookieUrl: 'a.test',
           },
-        },
-      };
-      // @ts-expect-error
-      window.addIssueForTest(issue1);
-
-      const issue2 = {
-        code: 'CookieIssue',
-        details: {
-          cookieIssueDetails: {
-            cookie: {
-              name: 'b',
-              path: '/',
-              domain: 'b.test',
+        };
+        // @ts-expect-error
+        window.addIssueForTest(issue1);
+
+        const issue2 = {
+          code: 'CookieIssue',
+          details: {
+            cookieIssueDetails: {
+              cookie: {
+                name: 'b',
+                path: '/',
+                domain: 'b.test',
+              },
+              cookieExclusionReasons: ['ExcludeThirdPartyPhaseout'],
+              cookieWarningReasons: [],
+              operation: 'ReadCookie',
+              cookieUrl: 'b.test',
             },
-            cookieExclusionReasons: ['ExcludeThirdPartyPhaseout'],
-            cookieWarningReasons: [],
-            operation: 'ReadCookie',
-            cookieUrl: 'b.test',
           },
-        },
-      };
-      // @ts-expect-error
-      window.addIssueForTest(issue2);
-    });
-    assert.lengthOf(await getDataGridRows(2, undefined, true), 2);
+        };
+        // @ts-expect-error
+        window.addIssueForTest(issue2);
+      });
+      assert.lengthOf(await getDataGridRows(2, undefined, true), 2);
 
-    const searchFilter = await waitForAria('Filter');
-    searchFilter.evaluate(el => assert.isNotNull(el));
-    searchFilter.type('a.test');
+      const searchFilter = await waitForAria('Filter');
+      searchFilter.evaluate(el => assert.isNotNull(el));
+      searchFilter.type('a.test');
 
-    // The second issue should be filtered out.
-    assert.lengthOf(await getDataGridRows(1, undefined, true), 1);
+      // The second issue should be filtered out.
+      assert.lengthOf(await getDataGridRows(1, undefined, true), 1);
+    });
   });
 });