chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/panels/security/CookieControlsView.ts

@@ -0,0 +1,265 @@
+// 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 '../../ui/components/switch/switch.js';
+
+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 type * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Cards from '../../ui/components/cards/cards.js';  // eslint-disable-line @typescript-eslint/no-unused-vars
+import * as Input from '../../ui/components/input/input.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 cookieControlsViewStyles from './cookieControlsView.css.js';
+
+const {render, html} = LitHtml;
+
+const UIStrings = {
+  /**
+   *@description Title in the view's header for the controls tool in the Privacy & Security panel
+   */
+  viewTitle: 'Controls',
+  /**
+   *@description Explanation in the view's header about the purpose of this controls tool
+   */
+  viewExplanation: 'Test how this site will perform if a user chooses to restrict third-party cookies in Chrome',
+  /**
+   *@description Title in the card within the controls tool
+   */
+  cardTitle: 'Temporarily restrict third-party cookies',
+  /**
+   *@description Disclaimer beneath the card title to tell the user that the controls will only persist while devtools is open
+   */
+  cardDisclaimer: 'Only when DevTools is open',
+  /**
+   *@description Message as part of the banner that prompts the user to reload the page to see the changes take effect. This appears when the user makes any change within the tool
+   */
+  siteReloadMessage: 'To apply your updated controls, reload the page',
+  /**
+   *@description Title of controls section. These are exceptions that the user will be able to override to test their site
+   */
+  exceptions: 'Exceptions',
+  /**
+   *@description Explanation of what exceptions are in this context
+   */
+  exceptionsExplanation: 'Scenarios that grant access to third-party cookies',
+  /**
+   *@description Title for the grace period exception control
+   */
+  gracePeriodTitle: 'Third-party cookie grace period',
+  /**
+   *@description Explanation of the grace period and a link to learn more
+   *@example {grace period} PH1
+   */
+  gracePeriodExplanation:
+      'If this site or a site embedded on it is enrolled in the {PH1}, then the site can access third-party cookies',
+  /**
+   *@description Text used for link within the gracePeriodExplanation to let the user learn more about the grace period
+   */
+  gracePeriod: 'grace period',
+  /**
+   *@description Title for the heuristic exception control
+   */
+  heuristicTitle: 'Heuristics based exception',
+  /**
+   *@description Explanation of the heuristics with a link to learn more about the scenarios in which they apply
+   *@example {predefined scenarios} PH1
+   */
+  heuristicExplanation:
+      'In {PH1} like pop-ups or redirects, a site embedded on this site can access third-party cookies',
+  /**
+   *@description Text used for link within the heuristicExplanation to let the user learn more about the heuristic exception
+   */
+  scenarios: 'predefined scenarios',
+  /**
+   *@description Note at the bottom of the controls tool telling the user that their organization has an enterprise policy that controls cookies. This may disable the tool
+   */
+  enterpriseDisclaimer: 'Your organization manages third-party cookie access for this site',
+  /**
+   *@description Tooltip that appears when the user hovers over the card's enterprise icon
+   */
+  enterpriseTooltip: 'This setting is managed by your organization',
+  /**
+    +*@description Button with the enterpise disclaimer that takes the user to the relevant enterprise cookie chrome setting
+   */
+  viewDetails: 'View details',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/security/CookieControlsView.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  inputChanged: (newValue: boolean, setting: Common.Settings.Setting<boolean>) => void;
+  openChromeCookieSettings: () => void;
+}
+export interface ViewOutput {}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+export class CookieControlsView extends UI.Widget.VBox {
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = (input, output, target) => {
+    // TODO(crbug.com/365737493): Determine whether the enterprise is present based on UI bindings
+    const enterprisePresent = false;
+
+    const toggleSetting = Common.Settings.Settings.instance().moduleSetting('cookie-control-override-enabled');
+    const gracePeriodSetting = Common.Settings.Settings.instance().moduleSetting('grace-period-mitigation-disabled');
+    const heuristicSetting = Common.Settings.Settings.instance().moduleSetting('heuristic-mitigation-disabled');
+
+    // clang-format off
+    const cardHeader = html `
+      <div class="card-header">
+        <div class="lhs">
+          <div class="text">
+            <div class="card-title">${i18nString(UIStrings.cardTitle)}</div>
+            <div class="body">${i18nString(UIStrings.cardDisclaimer)}</div>
+          </div>
+          ${enterprisePresent ? html `
+            <devtools-icon
+              .name=${'domain'}
+              ${LitHtml.Directives.ref((el: Element|undefined) => {
+                UI.Tooltip.Tooltip.install(el as HTMLElement, i18nString(UIStrings.enterpriseTooltip));
+              })}>
+            </devtools-icon>` : LitHtml.nothing
+          }
+        </div>
+        <div>
+          <devtools-switch
+            .checked=${Boolean(toggleSetting.get())}
+            .disabled=${enterprisePresent}
+            @switchchange=${(e: Event)=>{
+                input.inputChanged((e.target as HTMLInputElement).checked, toggleSetting);
+              }}>
+          </devtools-switch>
+        </div>
+      </div>
+    `;
+
+    const gracePeriodControl = html`
+      <div class="card-row">
+        <label class='checkbox-label'>
+          <input type='checkbox'
+            ?disabled=${enterprisePresent || !Boolean(toggleSetting.get())}
+            ?checked=${!Boolean(gracePeriodSetting.get())}
+            @change=${(e: Event)=>{
+              input.inputChanged(!(e.target as HTMLInputElement).checked, gracePeriodSetting);
+            }}
+          >
+          <div class="text">
+            <div class="body">${i18nString(UIStrings.gracePeriodTitle)}</div>
+            <div class="body">
+              ${i18nFormatString(UIStrings.gracePeriodExplanation, {
+                  PH1: enterprisePresent ? i18nString(UIStrings.gracePeriod) :  UI.Fragment.html`<x-link class="x-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/grace-period" jslog=${VisualLogging.link('grace-period-link').track({click: true})}>${i18nString(UIStrings.gracePeriod)}</x-link>`,
+                })}
+            </div>
+          </div>
+        </label>
+      </div>
+    `;
+
+    const heuristicControl = html`
+      <div class="card-row">
+        <label class='checkbox-label'>
+          <input type='checkbox'
+            ?disabled=${enterprisePresent || !Boolean(toggleSetting.get())}
+            ?checked=${!Boolean(heuristicSetting.get())}
+            @change=${(e: Event)=>{
+              input.inputChanged(!(e.target as HTMLInputElement).checked, heuristicSetting);
+            }}
+          >
+          <div class="text">
+            <div class="body">${i18nString(UIStrings.heuristicTitle)}</div>
+            <div class="body">
+              ${i18nFormatString(UIStrings.heuristicExplanation, {
+                  PH1: enterprisePresent ? i18nString(UIStrings.scenarios) : UI.Fragment.html`<x-link class="x-link" href="https://developers.google.com/privacy-sandbox/cookies/temporary-exceptions/heuristics-based-exceptions" jslog=${VisualLogging.link('heuristic-link').track({click: true})}>${i18nString(UIStrings.scenarios)}</x-link>`,
+                })}
+            </div>
+          </div>
+        </label>
+      </div>
+    `;
+
+    const enterpriseDisclaimer = html`
+      <div class="enterprise">
+        <div class="text body">${i18nString(UIStrings.enterpriseDisclaimer)}</div>
+        <devtools-icon
+          .name=${'domain'}
+        ></devtools-icon>
+        <devtools-button
+          @click=${input.openChromeCookieSettings}
+          aria-label="View details"
+          .variant=${Buttons.Button.Variant.OUTLINED}
+          jslog=${VisualLogging.action('view-details').track({click: true})}>
+            ${i18nString(UIStrings.viewDetails)}
+        </devtools-button>
+      </div>
+    `;
+
+    render(html `
+      <div class="overflow-auto">
+        <div class="controls">
+          <div class="header">
+            <div class="title">${i18nString(UIStrings.viewTitle)}</div>
+            <div class="body">${i18nString(UIStrings.viewExplanation)}</div>
+          </div>
+          <devtools-card>
+            <div slot="content" class=${enterprisePresent ? 'card enterprise-disabled' : 'card'}>
+              ${cardHeader}
+              <div>
+                <div class="card-row text">
+                  <div class="card-row-title">${i18nString(UIStrings.exceptions)}</div>
+                  <div class="body">${i18nString(UIStrings.exceptionsExplanation)}</div>
+                </div>
+                ${gracePeriodControl}
+                ${heuristicControl}
+              </div>
+            </div>
+          </devtools-card>
+          ${enterprisePresent ? enterpriseDisclaimer : LitHtml.nothing}
+        </div>
+      </div>
+    `, target, {host: this});
+    // clang-format on
+  }) {
+    super(true, undefined, element);
+    this.#view = view;
+    this.update();
+  }
+
+  override async doUpdate(): Promise<void> {
+    this.#view(this, this, this.contentElement);
+  }
+
+  inputChanged(newValue: boolean, setting: Common.Settings.Setting<boolean>): void {
+    setting.set(newValue);
+    UI.InspectorView.InspectorView.instance().displayDebuggedTabReloadRequiredWarning(
+        i18nString(UIStrings.siteReloadMessage));
+    this.update();
+  }
+
+  openChromeCookieSettings(): void {
+    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
+    if (rootTarget === null) {
+      return;
+    }
+    const url = 'chrome://settings/cookies' as Platform.DevToolsPath.UrlString;
+    void rootTarget.targetAgent().invoke_createTarget({url}).then(result => {
+      if (result.getError()) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
+      }
+    });
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.registerCSSFiles([Input.checkboxStyles, cookieControlsViewStyles]);
+  }
+}

package/front_end/panels/security/CookieReportView.test.ts

@@ -0,0 +1,157 @@
+// 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 SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
+import {createFakeSetting, createTarget} from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {getMainFrame, navigate} from '../../testing/ResourceTreeHelpers.js';
+
+import * as Security from './security.js';
+
+function getTestCookieIssue(
+    readCookie?: boolean, exclusionReason?: Protocol.Audits.CookieExclusionReason,
+    warningReason?: Protocol.Audits.CookieWarningReason, cookieName?: string): Protocol.Audits.InspectorIssue {
+  // if no exclusion or warning reason provided, use a default
+  if (!exclusionReason && !warningReason) {
+    exclusionReason = Protocol.Audits.CookieExclusionReason.ExcludeThirdPartyPhaseout;
+  }
+
+  return {
+    code: Protocol.Audits.InspectorIssueCode.CookieIssue,
+    details: {
+      cookieIssueDetails: {
+        cookie: {
+          name: cookieName + 'test',
+          path: '/',
+          domain: 'a.' + cookieName + 'test',
+        },
+        cookieExclusionReasons: exclusionReason ? [exclusionReason] : [],
+        cookieWarningReasons: warningReason ? [warningReason] : [],
+        operation: readCookie ? Protocol.Audits.CookieOperation.ReadCookie : Protocol.Audits.CookieOperation.SetCookie,
+        cookieUrl: 'a.' + cookieName + 'test',
+      },
+    },
+  };
+}
+
+describeWithMockConnection('CookieReportView', () => {
+  let mockView: sinon.SinonStub;
+  let target: SDK.Target.Target;
+
+  beforeEach(() => {
+    mockView = sinon.stub();
+    target = createTarget();
+    const showThirdPartyIssuesSetting = createFakeSetting('third party flag', true);
+    IssuesManager.IssuesManager.IssuesManager.instance({
+      forceNew: false,
+      ensureFirst: false,
+      showThirdPartyIssuesSetting,
+    });
+  });
+
+  it('should contain no rows if no issues were created', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    assert.strictEqual(view.gridData.length, 0);
+  });
+
+  it('should have row when there was a preexisting cookie issue', async () => {
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue());
+
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+    await view.pendingUpdate();
+
+    assert.strictEqual(view.gridData.length, 1);
+  });
+
+  it('should add row when issue added after view creation', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 0);
+
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue());
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 1);
+  });
+
+  it('should ignore non-third-party-cookie related exclusionReason', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    // @ts-ignore
+    globalThis.addIssueForTest(
+        getTestCookieIssue(undefined, Protocol.Audits.CookieExclusionReason.ExcludeSameSiteNoneInsecure));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 0);
+
+    // Make sure ExcludeThirdPartyPhaseout (default) is added.
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue());
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 1);
+    assert.strictEqual(view.gridData[0].data.status, 'Blocked');
+  });
+
+  it('should ignore non-third-party-cookie related warningReason', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    // @ts-ignore
+    globalThis.addIssueForTest(
+        getTestCookieIssue(undefined, undefined, Protocol.Audits.CookieWarningReason.WarnSameSiteLaxCrossDowngradeLax));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 0);
+
+    // Make sure warning 3pc warning reasons are added
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(
+        undefined, undefined, Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata, 'metadata'));
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(
+        undefined, undefined, Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic, 'heuristic'));
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(
+        undefined, undefined, Protocol.Audits.CookieWarningReason.WarnThirdPartyPhaseout, 'phaseout'));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 3);
+    assert.strictEqual(view.gridData[0].data.status, 'Allowed By Exception');
+    assert.strictEqual(view.gridData[1].data.status, 'Allowed By Exception');
+    assert.strictEqual(view.gridData[2].data.status, 'Allowed');
+  });
+
+  it('should only have a single entry for same cookie with a read and a write operations', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(true));
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(false));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 1);
+  });
+
+  it('should have zero entries after the primary page was changed', async () => {
+    const view = new Security.CookieReportView.CookieReportView(undefined, mockView);
+
+    // @ts-ignore
+    globalThis.addIssueForTest(getTestCookieIssue(true));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 1);
+
+    navigate(getMainFrame(target));
+
+    await view.pendingUpdate();
+    assert.strictEqual(view.gridData.length, 0);
+  });
+});