chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/security/CookieReportView.ts

@@ -0,0 +1,316 @@
+// 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.
+
+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 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';
+
+import cookieReportViewStyles from './cookieReportView.css.js';
+
+const {render, html, Directives: {ref}} = LitHtml;
+
+const UIStrings = {
+  /**
+   *@description Title in the header for the third-party cookie report in the Security & Privacy Panel
+   */
+  title: 'Third-party cookies',
+  /**
+   *@description Explaination in the header about the cookies listed in the report
+   */
+  body:
+      'Third-party cookies that might be restricted by users, depending on their settings. If a user chooses to restrict cookies, then this site might not work for them.',
+  /**
+   *@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
+   */
+  allowed: 'Allowed',
+  /**
+   *@description Status string in the cookie report for a third-party cookie that is allowed due to a grace period or heuristic exception. Otherwise, this would have been blocked. This is also used as filter chip text to allow the user to filter the table based on cookie status
+   */
+  allowedByException: 'Allowed By Exception',
+  /**
+   *@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',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/security/CookieReportView.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+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 {
+  name: string;
+  domain: string;
+  type: string;
+  platform: string;
+  status: string;
+  recommendation: string;
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+const filterItems: UI.FilterBar.Item[] = [
+  {
+    name: UIStrings.blocked,
+    label: () => i18nString(UIStrings.blocked),
+    title: UIStrings.blocked,
+    jslogContext: UIStrings.blocked,
+  },
+  {
+    name: UIStrings.allowed,
+    label: () => i18nString(UIStrings.allowed),
+    title: UIStrings.allowed,
+    jslogContext: UIStrings.allowed,
+  },
+  {
+    name: UIStrings.allowedByException,
+    label: () => i18nString(UIStrings.allowedByException),
+    title: UIStrings.allowedByException,
+    jslogContext: UIStrings.allowedByException,
+  },
+];
+
+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">
+            <div class="header">
+              <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>
+            ${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
+  }) {
+    super(true, undefined, element);
+    this.#view = view;
+
+    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();
+  }
+
+  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 = (a.recommendation ?? i18nString(UIStrings.unknown))
+                         .localeCompare((b.recommendation ?? i18nString(UIStrings.unknown)));
+          }
+          return this.dataGrid.isSortOrderAscending() ? result : -result;
+        })
+        .map(
+            row => new DataGrid.DataGrid.DataGridNode<CookieReportNodeData>(
+                {
+                  name: row.name,
+                  domain: row.domain,
+                  type: row.type ?? i18nString(UIStrings.unknown),
+                  platform: row.platform ?? i18nString(UIStrings.unknown),
+                  status: CookieReportView.getStatusString(row.status),
+                  recommendation: row.recommendation ?? i18nString(UIStrings.unknown),
+                } 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);
+    }
+  }
+}

package/front_end/panels/security/SecurityPanel.ts

@@ -14,6 +14,8 @@ 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';
 import {ShowOriginEvent} from './OriginTreeElement.js';
@@ -534,6 +536,7 @@ export type ViewInput = {
   panel: SecurityPanel,
 };
 export type ViewOutput = {
+  setVisibleView: (view: UI.Widget.VBox) => void,
   splitWidget: UI.SplitWidget.SplitWidget,
   mainView: SecurityMainView,
   visibleView: UI.Widget.VBox|null,
@@ -560,7 +563,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     <devtools-split-widget
     .options=${{vertical: true, settingName: 'security'}}
     ${UI.Widget.widgetRef(UI.SplitWidget.SplitWidget, e => {output.splitWidget = e;})}>
-          <devtools-widget
+        <devtools-widget
           slot="main"
           .widgetClass=${SecurityMainView}
           .widgetParams=${[input.panel] as SecurityMainViewProps}
@@ -569,6 +572,8 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
         <devtools-widget
           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>`,
@@ -577,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');
@@ -637,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);
   }
 
@@ -654,6 +659,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     // The sidebar element will trigger displaying the main view. Rather than making a redundant call to display the main view, we rely on this.
     this.sidebar.securityOverviewElement.select(true);
   }
+
   showOrigin(origin: Platform.DevToolsPath.UrlString): void {
     const originState = this.origins.get(origin);
     if (!originState) {
@@ -821,7 +827,9 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     const {frame} = event.data;
     const request = this.lastResponseReceivedForLoaderId.get(frame.loaderId);
 
-    this.selectAndSwitchToMainView();
+    if (!(this.visibleView instanceof CookieReportView) && !(this.visibleView instanceof CookieControlsView)) {
+      this.selectAndSwitchToMainView();
+    }
     this.sidebar.clearOrigins();
     this.origins.clear();
     this.lastResponseReceivedForLoaderId.clear();

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;
+}

package/front_end/panels/security/cookieReportView.css

@@ -0,0 +1,69 @@
+/*
+ * 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.
+ */
+
+.report {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  gap: var(--sys-size-6);
+  padding-top: var(--sys-size-5);
+  padding-bottom: var(--sys-size-5);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  gap: var(--sys-size-5);
+  padding-left: var(--sys-size-6);
+  padding-right: var(--sys-size-6);
+  min-width: var(--sys-size-31);
+
+  .title {
+    font: var(--sys-typescale-headline4);
+  }
+}
+
+.body {
+  font: var(--sys-typescale-body4-regular);
+}
+
+.x-link {
+  color: var(--sys-color-primary);
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+.filter {
+  padding-left: var(--sys-size-5);
+  padding-right: var(--sys-size-6);
+  flex-shrink: 0;
+}
+
+.data-grid {
+  flex: auto;
+}
+
+.empty-report {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-2);
+  padding: var(--sys-size-11) var(--sys-size-6) 0 var(--sys-size-6);
+  flex-shrink: 0;
+  min-width: var(--sys-size-31);
+}
+
+.empty-report-title {
+  font: var(--sys-typescale-headline5);
+}
+
+.cookie-off {
+  width: var(--sys-size-11);
+  height: var(--sys-size-11);
+}

package/front_end/panels/security/security.ts

@@ -2,10 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as CookieControlsView from './CookieControlsView.js';
+import * as CookieReportView from './CookieReportView.js';
 import * as SecurityModel from './SecurityModel.js';
 import * as SecurityPanel from './SecurityPanel.js';
 
 export {
+  CookieControlsView,
+  CookieReportView,
   SecurityModel,
   SecurityPanel,
 };

package/front_end/panels/security/sidebar.css

@@ -43,11 +43,10 @@
 .security-main-view-reload-message,
 .tree-outline li.security-sidebar-origins,
 .tree-outline li.security-group-list-item,
-.tree-outline span  {
-
+.tree-outline span {
   font: var(--sys-typescale-body4-medium);
 
-  &:hover:not(:has(span[is="dt-checkbox"])) .selection {
+  &:hover:not(:has(dt-checkbox)) .selection {
     background: transparent;
   }
 }