chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/security/CookieReportView.ts

@@ -2,7 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.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 * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -25,6 +30,30 @@ const UIStrings = {
    *@description A link the user can follow to learn more about third party cookie usage
    */
   learnMoreLink: 'Learn more about how third-party cookies are used',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the name of the cookie
+   */
+  name: 'Name',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the domain of the cookie
+   */
+  domain: 'Domain',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the type of the cookie. E.g. Advertisement, Marketing, etc.
+   */
+  type: 'Type',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the third-party of the cookie. E.g. Amazon Analytics, etc.
+   */
+  platform: 'Platform',
+  /**
+   *@description Column header for Cookie Report table, This column will contain the actionable step the user can take (if any) for the cookie
+   */
+  recommendation: 'Recommendation',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the blocked or allowed status of the cookie. See status strings below for more information on the different statuses
+   */
+  status: 'Status',
   /**
    *@description Status string in the cookie report for a third-party cookie that is allowed without any sort of exception. This is also used as filter chip text to allow the user to filter the table based on cookie status
    */
@@ -37,13 +66,128 @@ const UIStrings = {
    *@description Status string in the cookie report for a third-party cookie that was blocked. This is also used as filter chip text to allow the user to filter the table based on cookie status
    */
   blocked: 'Blocked',
+  /**
+   *@description String in the Cookie Report table. This is used when any data could not be fetched and that cell is unknown
+   */
+  unknown: 'Unknown',
+  /**
+   *@description Display name for the Cookie Report table. This string is used by the data grid for accessibility.
+   */
+  report: 'Third-Party Cookie Report',
+  /**
+   *@description The main string the user sees when there are no cookie issues to show. This will take place of the table
+   */
+  emptyReport: 'Not a crumb left',
+  /**
+   *@description Explanation to the user that there were no third-party cookie related issues found which is why they are not seeing the table/report
+   */
+  emptyReportExplanation: 'No issues with third-party cookies found',
+  /**
+   *@description String in Cookie Report table. This is used when a cookie's domain has an entry in the third-party cookie migration readiness list GitHub.
+   *@example {guidance} PH1
+   */
+  gitHubResource: 'Review {PH1} from third-party site.',
+  /**
+   *@description Label for a link to an entry in the third-party cookie migration readiness list GitHub.
+   */
+  guidance: 'guidance',
+  /**
+   *@description String in Cookie Report table. This is used when a cookie has a grace period exception.
+   *@example {reported issues} PH1
+   */
+  gracePeriod: 'Review {PH1}. Grace period exception is active.',
+  /**
+   *@description Label for a link to third-party cookie site compatability look-up.
+   */
+  reportedIssues: 'reported issues',
+  /**
+   *@description String in Cookie Report table. This is used when a cookie has a heuristics exception.
+   */
+  heuristics: 'Action needed later. Heuristics based exception is active',
+  /**
+   *@description String in Cookie Report table. This is used when a cookie's domain does not have an entry in the third-party cookie migration readiness list Github nor a grace period nor heuristics exception.
+   */
+  other: 'Contact third-party site for more info',
+  /**
+   *@description String representing the GitHubResource insight type. Used as filter chip text to allow the user to filter the table based on recommendation.
+   */
+  gitHubResourceInsightTypeString: 'Github',
+  /**
+   *@description String representing the GracePeriod insight type. Used as filter chip text to allow the user to filter the table based on recommendation.
+   */
+  gracePeriodInsightTypeString: 'Grace Period',
+  /**
+   *@description String representing the GitHubResource insight type. Used as filter chip text to allow the user to filter the table based on recommendation.
+   */
+  heuristicsInisightTypeString: 'Heuristics',
+  /**
+   *@description String representing a null insight type. Used as filter chip text to allow the user to filter the table based on recommendation.
+   */
+  otherInsightTypeString: 'Other',
+  /**
+   *@description String representing the Advertising cookie type. Used to format 'ad' category from the Third Party Web dataset.
+   */
+  adCookieTypeString: 'Advertising',
+  /**
+   *@description String representing the Analytics cookie type. Used to format 'analytics' category from the Third Party Web dataset.
+   */
+  analyticsCookieTypeString: 'Analytics',
+  /**
+   *@description String representing the Social cookie type. Used to format 'social' category from the Third Party Web dataset.
+   */
+  socialCookieTypeString: 'Social',
+  /**
+   *@description String representing the Video cookie type. Used to format 'video' category from the Third Party Web dataset.
+   */
+  videoCookieTypeString: 'Video',
+  /**
+   *@description String representing the Utility cookie type. Used to format 'utility' category from the Third Party Web dataset.
+   */
+  utilityCookieTypeString: 'Utility',
+  /**
+   *@description String representing the Hosting cookie type. Used to format 'hosting' category from the Third Party Web dataset.
+   */
+  hostingCookieTypeString: 'Hosting',
+  /**
+   *@description String representing the Marketing cookie type. Used to format 'marketing' category from the Third Party Web dataset.
+   */
+  marketingCookieTypeString: 'Marketing',
+  /**
+   *@description String representing the Customer Success cookie type. Used to format 'customer-success' category from the Third Party Web dataset.
+   */
+  customerSuccessCookieTypeString: 'Customer Success',
+  /**
+   *@description String representing the Content cookie type. Used to format 'content' category from the Third Party Web dataset.
+   */
+  contentCookieTypeString: 'Content',
+  /**
+   *@description String representing the CDN cookie type. Used to format 'cdn' category from the Third Party Web dataset.
+   */
+  cdnCookieTypeString: 'CDN',
+  /**
+   *@description String representing the Tag Manager cookie type. Used to format 'tag-manager' category from the Third Party Web dataset.
+   */
+  tagManagerCookieTypeString: 'Tag Manager',
+  /**
+   *@description String representing the Consent Provider cookie type. Used to format 'consent-provider' category from the Third Party Web dataset.
+   */
+  consentProviderCookieTypeString: 'Consent Provider',
+  /**
+   *@description String representing the Other cookie type. Used to format 'other' category from the Third Party Web dataset.
+   */
+  otherCookieTypeString: 'Other',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/security/CookieReportView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface ViewInput {}
+export interface ViewInput {
+  gridData: DataGrid.DataGrid.DataGridNode<CookieReportNodeData>[];
+  onFilterChanged: () => void;
+  onSortingChanged: () => void;
+}
 export interface ViewOutput {
   namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
+  dataGrid?: DataGrid.DataGrid.DataGridImpl<CookieReportNodeData>;
 }
 
 export interface CookieReportNodeData {
@@ -52,7 +196,7 @@ export interface CookieReportNodeData {
   type: string;
   platform: string;
   status: string;
-  recommendation: string;
+  recommendation: HTMLElement;
 }
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
@@ -79,10 +223,28 @@ const filterItems: UI.FilterBar.Item[] = [
 ];
 
 export class CookieReportView extends UI.Widget.VBox {
+  #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
   namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
+  #cookieRows: Map<string, IssuesManager.CookieIssue.CookieReportInfo> = new Map();
   #view: View;
+  dataGrid?: DataGrid.DataGrid.DataGridImpl<CookieReportNodeData>;
+  gridData: DataGrid.DataGrid.DataGridNode<CookieReportNodeData>[] = [];
 
   constructor(element?: HTMLElement, view: View = (input, output, target) => {
+    const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<CookieReportNodeData> = {
+      nodes: input.gridData,
+      displayName: i18nString(UIStrings.report),
+      columns: [
+        {id: 'name', title: i18nString(UIStrings.name), weight: 1, sortable: true},
+        {id: 'domain', title: i18nString(UIStrings.domain), weight: 1, sortable: true},
+        {id: 'type', title: i18nString(UIStrings.type), weight: 1, sortable: true},
+        {id: 'platform', title: i18nString(UIStrings.platform), weight: 1, sortable: true},
+        {id: 'status', title: i18nString(UIStrings.status), weight: 1, sortable: true},
+        {id: 'recommendation', title: i18nString(UIStrings.recommendation), weight: 1, sortable: true},
+      ],
+      striped: true,
+    };
+
     // clang-format off
     render(html `
         <div class="report overflow-auto">
@@ -90,15 +252,43 @@ export class CookieReportView extends UI.Widget.VBox {
               <div class="title">${i18nString(UIStrings.title)}</div>
               <div class="body">${i18nString(UIStrings.body)} <x-link class="x-link" href="https://developers.google.com/privacy-sandbox/cookies/prepare/audit-cookies" jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>
             </div>
-            <devtools-named-bit-set-filter
-              class="filter"
-              .options=${{items: filterItems}}
-              ${ref((el?: Element) => {
-                  if(el instanceof UI.FilterBar.NamedBitSetFilterUIElement){
-                    output.namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
-                  }
-              })}
-            ></devtools-named-bit-set-filter>
+            ${input.gridData.length > 0 ?
+              html`
+                <devtools-named-bit-set-filter
+                  class="filter"
+                  @filterChanged=${input.onFilterChanged}
+                  .options=${{items: filterItems}}
+                  ${ref((el?: Element) => {
+                    if(el instanceof UI.FilterBar.NamedBitSetFilterUIElement){
+                      output.namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
+                    }
+                  })}
+                ></devtools-named-bit-set-filter>
+                <!-- @ts-ignore -->
+                <devtools-data-grid-widget
+                  @sortingChanged=${input.onSortingChanged}
+                  .options=${dataGridOptions}
+                  ${UI.Widget.widgetRef(DataGrid.DataGrid.DataGridWidget, w => {
+                    output.dataGrid = w.dataGrid;
+                  })}
+                ></devtools-data-grid-widget>
+              ` :
+              html `
+                <div class="empty-report">
+                  <devtools-icon
+                    class="cookie-off"
+                    .name=${'cookie_off'}
+                  ></devtools-icon>
+                  <div class="empty-report-title">
+                    ${i18nString(UIStrings.emptyReport)}
+                  </div>
+                  <div class="body">
+                    ${i18nString(UIStrings.emptyReportExplanation)}
+                  </div>
+                </div>
+              `
+            }
+
         </div>
     `, target, {host: this});
     // clang-format on
@@ -106,15 +296,209 @@ export class CookieReportView extends UI.Widget.VBox {
     super(true, undefined, element);
     this.#view = view;
 
-    this.doUpdate();
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+        this.#onPrimaryPageChanged, this);
+
+    this.#issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
+    this.#issuesManager.addEventListener(
+        IssuesManager.IssuesManager.Events.ISSUE_ADDED, this.#onIssueEventReceived, this);
+    for (const issue of this.#issuesManager.issues()) {
+      if (issue instanceof IssuesManager.CookieIssue.CookieIssue) {
+        this.#onIssueAdded(issue);
+      }
+    }
+
+    this.update();
   }
 
-  doUpdate(): void {
+  override async doUpdate(): Promise<void> {
+    this.gridData = this.#buildNodes();
     this.#view(this, this, this.contentElement);
   }
 
+  onFilterChanged(): void {
+    this.update();
+  }
+
+  onSortingChanged(): void {
+    this.update();
+  }
+
+  #onPrimaryPageChanged(): void {
+    this.#cookieRows.clear();
+    this.update();
+  }
+
+  #onIssueEventReceived(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueAddedEvent>): void {
+    if (event.data.issue instanceof IssuesManager.CookieIssue.CookieIssue) {
+      if (this.#cookieRows.has(event.data.issue.cookieId())) {
+        return;
+      }
+      this.#onIssueAdded(event.data.issue);
+      this.update();
+    }
+  }
+
+  #onIssueAdded(issue: IssuesManager.CookieIssue.CookieIssue): void {
+    const info = issue.makeCookieReportEntry();
+    if (info) {
+      this.#cookieRows.set(issue.cookieId(), info);
+    }
+  }
+
+  #buildNodes(): DataGrid.DataGrid.DataGridNode<CookieReportNodeData>[] {
+    return [...this.#cookieRows.values()]
+        .filter(row => {
+          if (this.namedBitSetFilterUI) {
+            return this.namedBitSetFilterUI.accept(CookieReportView.getStatusString(row.status));
+          }
+          return true;
+        })
+        .sort((a, b) => {
+          if (!this.dataGrid) {
+            return 0;
+          }
+          const columnId = this.dataGrid.sortColumnId();
+          let result = 0;
+          if (columnId === 'name') {
+            result = a.name.localeCompare(b.name);
+          } else if (columnId === 'domain') {
+            result = a.domain.localeCompare(b.domain);
+          } else if (columnId === 'type') {
+            result = (a.type ?? i18nString(UIStrings.unknown)).localeCompare((b.type ?? i18nString(UIStrings.unknown)));
+          } else if (columnId === 'platform') {
+            result = (a.platform ?? i18nString(UIStrings.unknown))
+                         .localeCompare((b.platform ?? i18nString(UIStrings.unknown)));
+          } else if (columnId === 'status') {
+            result =
+                CookieReportView.getStatusString(a.status).localeCompare(CookieReportView.getStatusString(b.status));
+          } else if (columnId === 'recommendation') {
+            result = CookieReportView.getInsightTypeString(a.insight).localeCompare(
+                CookieReportView.getInsightTypeString(b.insight));
+          }
+          return this.dataGrid.isSortOrderAscending() ? result : -result;
+        })
+        .map(
+            row => new DataGrid.DataGrid.DataGridNode<CookieReportNodeData>(
+                {
+                  name: row.name,
+                  domain: row.domain,
+                  type: CookieReportView.getCookieTypeString(row.type),
+                  platform: row.platform ?? i18nString(UIStrings.unknown),
+                  status: CookieReportView.getStatusString(row.status),
+                  recommendation: CookieReportView.getRecommendation(row.domain, row.insight),
+                } as CookieReportNodeData,
+                ));
+  }
+
   override wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([cookieReportViewStyles]);
   }
+
+  static getStatusString(status: IssuesManager.CookieIssue.CookieStatus): string {
+    switch (status) {
+      case IssuesManager.CookieIssue.CookieStatus.BLOCKED:
+        return i18nString(UIStrings.blocked);
+      case IssuesManager.CookieIssue.CookieStatus.ALLOWED_BY_GRACE_PERIOD:
+      case IssuesManager.CookieIssue.CookieStatus.ALLOWED_BY_HEURISTICS:
+        return i18nString(UIStrings.allowedByException);
+      case IssuesManager.CookieIssue.CookieStatus.ALLOWED:
+        return i18nString(UIStrings.allowed);
+    }
+  }
+
+  static getInsightTypeString(insight?: Protocol.Audits.CookieIssueInsight): string {
+    if (!insight) {
+      return i18nString(UIStrings.otherInsightTypeString);
+    }
+
+    switch (insight.type) {
+      case Protocol.Audits.InsightType.GitHubResource:
+        return i18nString(UIStrings.gitHubResourceInsightTypeString);
+      case Protocol.Audits.InsightType.GracePeriod:
+        return i18nString(UIStrings.gracePeriodInsightTypeString);
+      case Protocol.Audits.InsightType.Heuristics:
+        return i18nString(UIStrings.heuristicsInisightTypeString);
+      default:
+        return i18nString(UIStrings.otherInsightTypeString);
+    }
+  }
+
+  static getRecommendation(domain: string, insight?: Protocol.Audits.CookieIssueInsight): HTMLElement {
+    const recElem = document.createElement('div');
+
+    render(CookieReportView.getRecommendationText(domain, insight), recElem, {host: this});
+    return recElem;
+  }
+
+  static getRecommendationText(domain: string, insight?: Protocol.Audits.CookieIssueInsight): LitHtml.TemplateResult {
+    if (!insight) {
+      return html`${i18nString(UIStrings.other)}`;
+    }
+
+    switch (insight.type) {
+      case Protocol.Audits.InsightType.GitHubResource: {
+        const githubLink = UI.XLink.XLink.create(
+            insight.tableEntryUrl ?
+                insight.tableEntryUrl :
+                'https://github.com/privacysandbox/privacy-sandbox-dev-support/blob/main/3pc-migration-readiness.md',
+            i18nString(UIStrings.guidance), undefined, undefined, 'readiness-list-link');
+
+        return html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.gitHubResource, {
+          PH1: githubLink,
+        })}`;
+      }
+      case Protocol.Audits.InsightType.GracePeriod: {
+        const gracePeriodLink = UI.XLink.XLink.create(
+            'https://developers.google.com/privacy-sandbox/cookies/dashboard?url=' +
+                (domain.charAt(0) === '.' ? domain.substring(1) : domain),
+            i18nString(UIStrings.reportedIssues), undefined, undefined, 'compatibility-lookup-link');
+
+        return html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.gracePeriod, {
+          PH1: gracePeriodLink,
+        })}`;
+      }
+      case Protocol.Audits.InsightType.Heuristics:
+        return html`${i18nString(UIStrings.heuristics)}`;
+      default:
+        return html`${i18nString(UIStrings.other)}`;
+    }
+  }
+
+  static getCookieTypeString(type?: string): string {
+    if (!type) {
+      return i18nString(UIStrings.otherCookieTypeString);
+    }
+
+    switch (type) {
+      case 'ad':
+        return i18nString(UIStrings.adCookieTypeString);
+      case 'analytics':
+        return i18nString(UIStrings.analyticsCookieTypeString);
+      case 'social':
+        return i18nString(UIStrings.socialCookieTypeString);
+      case 'video':
+        return i18nString(UIStrings.videoCookieTypeString);
+      case 'utility':
+        return i18nString(UIStrings.utilityCookieTypeString);
+      case 'hosting':
+        return i18nString(UIStrings.hostingCookieTypeString);
+      case 'marketing':
+        return i18nString(UIStrings.marketingCookieTypeString);
+      case 'customer-success':
+        return i18nString(UIStrings.customerSuccessCookieTypeString);
+      case 'content':
+        return i18nString(UIStrings.contentCookieTypeString);
+      case 'cdn':
+        return i18nString(UIStrings.cdnCookieTypeString);
+      case 'tag-manager':
+        return i18nString(UIStrings.tagManagerCookieTypeString);
+      case 'consent-provider':
+        return i18nString(UIStrings.consentProviderCookieTypeString);
+      default:
+        return i18nString(UIStrings.otherCookieTypeString);
+    }
+  }
 }

package/front_end/panels/security/SecurityPanel.ts

@@ -14,6 +14,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {CookieControlsView} from './CookieControlsView.js';
 import {CookieReportView} from './CookieReportView.js';
 import lockIconStyles from './lockIcon.css.js';
 import mainViewStyles from './mainView.css.js';
@@ -572,6 +573,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
           slot="sidebar"
           .widgetClass=${SecurityPanelSidebar}
           @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
+          @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
           ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
         </devtools-widget>
     </devtools-split-widget>`,
@@ -580,7 +582,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   }) {
     super('security');
 
-    this.doUpdate();
+    void this.doUpdate();
 
     this.sidebar.setMinimumSize(100, 25);
     this.sidebar.element.classList.add('panel-sidebar');
@@ -640,7 +642,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     return certificateButton;
   }
 
-  private doUpdate(): void {
+  override async doUpdate(): Promise<void> {
     this.view({panel: this}, this, this.contentElement);
   }
 
@@ -825,7 +827,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     const {frame} = event.data;
     const request = this.lastResponseReceivedForLoaderId.get(frame.loaderId);
 
-    if (!(this.visibleView instanceof CookieReportView)) {
+    if (!(this.visibleView instanceof CookieReportView) && !(this.visibleView instanceof CookieControlsView)) {
       this.selectAndSwitchToMainView();
     }
     this.sidebar.clearOrigins();
@@ -1314,8 +1316,7 @@ export class SecurityMainView extends UI.Widget.VBox {
       return;
     }
 
-    const requestsAnchor =
-        element.createChild('button', 'security-mixed-content devtools-link text-button link-style') as HTMLElement;
+    const requestsAnchor = element.createChild('button', 'security-mixed-content devtools-link text-button link-style');
     UI.ARIAUtils.markAsLink(requestsAnchor);
     requestsAnchor.tabIndex = 0;
     requestsAnchor.textContent = i18nString(UIStrings.viewDRequestsInNetworkPanel, {n: filterRequestCount});

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -8,6 +8,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import {CookieControlsTreeElement} from './CookieControlsTreeElement.js';
 import {CookieReportTreeElement} from './CookieReportTreeElement.js';
 import lockIconStyles from './lockIcon.css.js';
 import {OriginTreeElement} from './OriginTreeElement.js';
@@ -33,6 +34,10 @@ const UIStrings = {
    *@description Sidebar element text in the Security panel
    */
   cookieReport: 'Third-party cookies',
+  /**
+   *@description Sidebar element text in the Security panel
+   */
+  flagControls: 'Controls',
   /**
    *@description Text in Security Panel of the Security panel
    */
@@ -90,6 +95,7 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
 
     if (Common.Settings.Settings.instance().getHostConfig().devToolsPrivacyUI?.enabled) {
       const privacyTreeSection = this.#addSidebarSection(i18nString(UIStrings.privacy), 'privacy');
+      privacyTreeSection.appendChild(new CookieControlsTreeElement(i18nString(UIStrings.flagControls)));
       privacyTreeSection.appendChild(new CookieReportTreeElement(i18nString(UIStrings.cookieReport)));
     }
 
@@ -148,7 +154,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
   #createOriginGroupElement(originGroupTitle: string): UI.TreeOutline.TreeElement {
     const originGroup = new UI.TreeOutline.TreeElement(originGroupTitle, true);
     originGroup.selectable = false;
-    originGroup.setCollapsible(false);
     originGroup.expand();
     originGroup.listItemElement.classList.add('security-sidebar-origins');
     UI.ARIAUtils.setLabel(originGroup.childrenListElement, originGroupTitle);

package/front_end/panels/security/cookieControlsView.css

@@ -0,0 +1,101 @@
+/*
+ * Copyright 2024 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.
+ */
+
+.overflow-auto {
+  height: 100%;
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sys-size-5) var(--sys-size-8) var(--sys-size-5) var(--sys-size-5);
+  min-width: var(--sys-size-33);
+}
+
+.header {
+  padding-left: var(--sys-size-5);
+}
+
+.title {
+  font: var(--sys-typescale-headline4);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sys-size-6) var(--sys-size-8);
+  gap: var(--sys-size-6);
+
+  &.enterprise-disabled {
+    color: var(--sys-color-token-subtle);
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+}
+
+.card-header > .lhs {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: var(--sys-size-9);
+
+  & > devtools-icon {
+    height: var(--sys-size-11);
+    width: var(--sys-size-11);
+  }
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-size-2);
+}
+
+.card-title {
+  font: var(--sys-typescale-headline5);
+}
+
+.body {
+  font: var(--sys-typescale-body4-regular);
+}
+
+.checkbox-label {
+  gap: var(--sys-size-8);
+  display: flex;
+  align-items: center;
+}
+
+.card-row {
+  padding-top: var(--sys-size-4);
+  padding-bottom: var(--sys-size-4);
+  padding-left: var(--sys-size-8);
+}
+
+.card-row-title {
+  font: var(--sys-typescale-body4-medium);
+}
+
+.x-link {
+  color: var(--sys-color-primary);
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+.enterprise {
+  display: flex;
+  flex-direction: row;
+  gap: var(--sys-size-9);
+  padding: var(--sys-size-6) var(--sys-size-8) var(--sys-size-6) var(--sys-size-11);
+  align-items: center;
+}
+
+input[type="checkbox"] {
+  flex-shrink: 0;
+}