Add filtering for name and domain in the Cookie Report table

Filter behavior:
http://go/scrcast/NjAwMzk2NTE3ODE1MDkxMnwxM2RiODNiMi0wYQ

Bug: 395067568
Change-Id: I9695a76744334dc114cc91f243b8004ca8fa4f9f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6253558
Reviewed-by: Paul Irish <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Jalon Thomas <[email protected]>

Author: jalonthomas

front_end/panels/security/CookieReportView.ts

@@ -6,9 +6,11 @@ import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -188,6 +190,9 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface ViewInput {
   cookieRows: IssuesManager.CookieIssue.CookieReportInfo[];
   filterItems: UI.FilterBar.Item[];
+  filters: TextUtils.TextUtils.ParsedFilter[];
+  searchText: string;
+  onSearchFilterChanged: (e: CustomEvent<string>) => void;
   onFilterChanged: () => void;
   onSortingChanged: () => void;
   populateContextMenu: (event: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
@@ -213,6 +218,7 @@ export class CookieReportView extends UI.Widget.VBox {
   #cookieRows = new Map<string, IssuesManager.CookieIssue.CookieReportInfo>();
   #view: View;
   filterItems: UI.FilterBar.Item[] = [];
+  searchText: string;
 
   constructor(element?: HTMLElement, view: View = (input, output, target) => {
     // clang-format off
@@ -224,21 +230,32 @@ export class CookieReportView extends UI.Widget.VBox {
             </div>
             ${input.cookieRows.length > 0 ?
               html`
-                <devtools-named-bit-set-filter
-                  class="filter"
-                  aria-label="Third-party cookie status filters"
-                  @filterChanged=${input.onFilterChanged}
-                  .options=${{items: input.filterItems}}
-                  ${ref((el?: Element) => {
-                    if(el instanceof UI.FilterBar.NamedBitSetFilterUIElement){
-                      output.namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
-                    }
-                  })}
-                ></devtools-named-bit-set-filter>
+                <div class="filters-container">
+                  <devtools-toolbar>
+                    <devtools-toolbar-input
+                      type="filter"
+                      style="flex-grow: 0.4;"
+                      @change=${input.onSearchFilterChanged}
+                      value=${input.searchText}
+                    ></devtools-toolbar-input>
+                  </devtools-toolbar>
+                  <devtools-named-bit-set-filter
+                    class="filter"
+                    aria-label="Third-party cookie status filters"
+                    @filterChanged=${input.onFilterChanged}
+                    .options=${{items: input.filterItems}}
+                    ${ref((el?: Element) => {
+                      if(el instanceof UI.FilterBar.NamedBitSetFilterUIElement){
+                        output.namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
+                      }
+                    })}
+                  ></devtools-named-bit-set-filter>
+                </div>
                 <!-- @ts-ignore -->
                 <devtools-data-grid
                   name=${i18nString(UIStrings.report)}
                   striped
+                  .filters=${input.filters}
                   @sort=${input.onSortingChanged}
                   @contextmenu=${input.populateContextMenu.bind(input)}
                 >
@@ -287,6 +304,7 @@ export class CookieReportView extends UI.Widget.VBox {
     super(true, undefined, element);
     this.#view = view;
     this.registerRequiredCSS(cookieReportViewStyles);
+    this.searchText = Common.Settings.Settings.instance().createSetting('cookie-report-search-query', '').get();
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
@@ -313,7 +331,14 @@ export class CookieReportView extends UI.Widget.VBox {
         }
         return true;
       }),
+      filters: [{
+        key: 'name,domain',
+        regex: RegExp(Platform.StringUtilities.escapeForRegExp(this.searchText), 'i'),
+        negative: false,
+      }],
+      searchText: this.searchText,
       filterItems: this.filterItems,
+      onSearchFilterChanged: (e: CustomEvent<string>) => this.onSearchFilterChanged(e),
       onFilterChanged: () => this.requestUpdate(),
       onSortingChanged: () => this.requestUpdate(),
       populateContextMenu: this.populateContextMenu.bind(this),
@@ -344,6 +369,12 @@ export class CookieReportView extends UI.Widget.VBox {
     }
   }
 
+  onSearchFilterChanged(e: CustomEvent<string>): void {
+    this.searchText = e.detail ? e.detail : '';
+    Common.Settings.Settings.instance().createSetting('cookie-report-search-query', '').set(this.searchText);
+    this.requestUpdate();
+  }
+
   #buildFilterItems(): UI.FilterBar.Item[] {
     const filterItems: UI.FilterBar.Item[] = [];
 

front_end/panels/security/cookieReportView.css

@@ -40,11 +40,15 @@
 }
 
 .filter {
-  padding-left: var(--sys-size-5);
   padding-right: var(--sys-size-6);
   flex-shrink: 0;
 }
 
+.filters-container {
+  display: flex;
+  padding-left: var(--sys-size-5);
+}
+
 devtools-data-grid {
   flex: auto;
   margin-left: -1px;

front_end/ui/legacy/Toolbar.ts

@@ -864,6 +864,7 @@ class ToolbarInputElement extends HTMLElement {
 
   item!: ToolbarInput;
   datalist: HTMLDataListElement|null = null;
+  value: string|undefined = undefined;
 
   connectedCallback(): void {
     if (this.item) {
@@ -889,6 +890,9 @@ class ToolbarInputElement extends HTMLElement {
           /* shrinkFactor=*/ undefined, tooltip, this.datalist ? this.#onAutocomplete.bind(this) : undefined,
           /* dynamicCompletions=*/ undefined, jslogContext, this);
     }
+    if (this.value) {
+      this.item.setValue(this.value);
+    }
     this.item.addEventListener(ToolbarInput.Event.TEXT_CHANGED, event => {
       this.dispatchEvent(new CustomEvent('change', {detail: event.data}));
     });
@@ -910,6 +914,8 @@ class ToolbarInputElement extends HTMLElement {
     if (name === 'value') {
       if (this.item && this.item.value() !== newValue) {
         this.item.setValue(newValue, true);
+      } else {
+        this.value = newValue;
       }
     }
   }

front_end/ui/visual_logging/KnownContextValues.ts

@@ -876,6 +876,7 @@ export const knownContextValues = new Set([
   'cookie-flag-controls',
   'cookie-preview',
   'cookie-report',
+  'cookie-report-search-query',
   'cookie-view-show-decoded',
   'cookies',
   'cookies-data',

test/e2e/security/privacy_test.ts

@@ -1,10 +1,12 @@
 // Copyright 2020 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+import {assert} from 'chai';
 
 import {expectError} from '../../conductor/events.js';
 import {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';
@@ -50,4 +52,59 @@ describe('The Privacy and security panel', function() {
     // Infobar should be gone after clicking the close button
     infoBar.evaluate(el => assert.isNotNull(el));
   });
+
+  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',
+          },
+        },
+      };
+      // @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',
+          },
+        },
+      };
+      // @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');
+
+    // The second issue should be filtered out.
+    assert.lengthOf(await getDataGridRows(1, undefined, true), 1);
+  });
 });