chrome-devtools-frontend 1.0.1660788 → 1.0.1662289

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -1,65 +0,0 @@
-// Copyright 2022 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-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 type * as Protocol from '../../generated/protocol.js';
-import {createIcon} from '../../ui/kit/kit.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import {InterestGroupStorageView} from './InterestGroupStorageView.js';
-import type {ResourcesPanel} from './ResourcesPanel.js';
-
-const UIStrings = {
-  /**
-   * @description Label for an item in the Application Panel Sidebar of the Application panel
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction. (https://developer.chrome.com/blog/fledge-api/)
-   */
-  interestGroups: 'Interest groups',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/application/InterestGroupTreeElement.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
-  private view: InterestGroupStorageView;
-
-  constructor(storagePanel: ResourcesPanel) {
-    super(storagePanel, i18nString(UIStrings.interestGroups), false, 'interest-groups');
-    const interestGroupIcon = createIcon('database');
-    this.setLeadingIcons([interestGroupIcon]);
-    this.view = new InterestGroupStorageView(this);
-  }
-
-  override get itemURL(): Platform.DevToolsPath.UrlString {
-    return 'interest-groups://' as Platform.DevToolsPath.UrlString;
-  }
-
-  async getInterestGroupDetails(owner: string, name: string): Promise<object|null> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!mainTarget) {
-      return null;
-    }
-    const response = await mainTarget.storageAgent().invoke_getInterestGroupDetails({ownerOrigin: owner, name});
-    return response.details;
-  }
-
-  override onselect(selectedByUser?: boolean): boolean {
-    super.onselect(selectedByUser);
-    this.showView(this.view);
-    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('interest-groups');
-    return false;
-  }
-
-  addEvent(event: Protocol.Storage.InterestGroupAccessedEvent): void {
-    this.view.addEvent(event);
-  }
-
-  clearEvents(): void {
-    this.view.clearEvents();
-  }
-}

package/front_end/panels/application/components/InterestGroupAccessGrid.ts

@@ -1,135 +0,0 @@
-// Copyright 2022 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
-import '../../../ui/legacy/components/data_grid/data_grid.js';
-
-import * as i18n from '../../../core/i18n/i18n.js';
-import type * as Protocol from '../../../generated/protocol.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-
-import interestGroupAccessGridStyles from './interestGroupAccessGrid.css.js';
-
-const {html} = Lit;
-
-const UIStrings = {
-  /**
-   * @description Hover text for an info icon in the Interest Group Event panel
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction.
-   */
-  allInterestGroupStorageEvents: 'All interest group storage events.',
-  /**
-   * @description Text in InterestGroupStorage Items View of the Application panel
-   * Date and time of an Interest Group storage event in a locale-
-   * dependent format.
-   */
-  eventTime: 'Event Time',
-  /**
-   * @description Text in InterestGroupStorage Items View of the Application panel
-   * Type of interest group event such as 'join', 'bid', 'win', or 'leave'.
-   */
-  eventType: 'Access Type',
-  /**
-   * @description Text in InterestGroupStorage Items View of the Application panel
-   * Owner of the interest group. The origin that controls the
-   * content of information associated with the interest group such as which
-   * ads get displayed.
-   */
-  groupOwner: 'Owner',
-  /**
-   * @description Text in InterestGroupStorage Items View of the Application panel
-   * Name of the interest group. The name is unique per-owner and identifies the
-   * interest group.
-   */
-  groupName: 'Name',
-  /**
-   * @description Text shown when no interest groups are detected.
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction.
-   */
-  noEvents: 'No interest group events detected',
-  /**
-   * @description Text shown when no interest groups are detected and explains what this page is about.
-   * An interest group is an ad targeting group stored on the browser that can
-   * be used to show a certain set of advertisements in the future as the
-   * outcome of a FLEDGE auction.
-   */
-  interestGroupDescription: 'On this page you can inspect and analyze interest groups',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/application/components/InterestGroupAccessGrid.ts', UIStrings);
-export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class InterestGroupAccessGrid extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #datastores: Protocol.Storage.InterestGroupAccessedEvent[] = [];
-
-  connectedCallback(): void {
-    this.#render();
-  }
-
-  // eslint-disable-next-line @devtools/set-data-type-reference
-  set data(data: Protocol.Storage.InterestGroupAccessedEvent[]) {
-    this.#datastores = data;
-    this.#render();
-  }
-
-  #render(): void {
-    // clang-format off
-    Lit.render(html`
-      <style>${interestGroupAccessGridStyles}</style>
-      <style>${UI.inspectorCommonStyles}</style>
-      ${this.#datastores.length === 0 ?
-        html`
-          <div class="empty-state">
-            <span class="empty-state-header">${i18nString(UIStrings.noEvents)}</span>
-            <span class="empty-state-description">${i18nString(UIStrings.interestGroupDescription)}</span>
-          </div>`:
-        html`
-          <div>
-            <span class="heading">Interest Groups</span>
-            <devtools-icon class="info-icon medium" name="info"
-                          title=${i18nString(UIStrings.allInterestGroupStorageEvents)}>
-            </devtools-icon>
-            ${this.#renderGrid()}
-          </div>`}
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-
-  #renderGrid(): Lit.TemplateResult {
-    // clang-format off
-    return html`
-      <devtools-data-grid striped inline>
-        <table>
-          <tr>
-            <th id="event-time" sortable weight="10">${i18nString(UIStrings.eventTime)}</td>
-            <th id="event-type" sortable weight="5">${i18nString(UIStrings.eventType)}</td>
-            <th id="event-group-owner" sortable weight="10">${i18nString(UIStrings.groupOwner)}</td>
-            <th id="event-group-name" sortable weight="10">${i18nString(UIStrings.groupName)}</td>
-          </tr>
-          ${this.#datastores.map(event => html`
-          <tr @select=${() => this.dispatchEvent(new CustomEvent('select', {detail: event}))}>
-            <td>${new Date(1e3 * event.accessTime).toLocaleString()}</td>
-            <td>${event.type}</td>
-            <td>${event.ownerOrigin}</td>
-            <td>${event.name}</td>
-          </tr>
-        `)}
-        </table>
-      </devtools-data-grid>`;
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-interest-group-access-grid', InterestGroupAccessGrid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-interest-group-access-grid': InterestGroupAccessGrid;
-  }
-}

package/front_end/panels/application/components/interestGroupAccessGrid.css

@@ -1,27 +0,0 @@
-/*
- * Copyright 2021 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-:host {
-  display: flex;
-  padding: 20px;
-  height: 100%;
-}
-
-.heading {
-  font-size: 15px;
-}
-
-devtools-data-grid {
-  margin-top: 20px;
-}
-
-.info-icon {
-  vertical-align: text-bottom;
-  height: 14px;
-}
-
-.no-events-message {
-  margin-top: 20px;
-}

package/front_end/panels/application/interestGroupStorageView.css

@@ -1,9 +0,0 @@
-/*
- * Copyright 2021 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-devtools-interest-group-access-grid {
-  overflow: auto;
-}

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -1,182 +0,0 @@
-// Copyright 2021 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
-
-import * as Host from '../../core/host/host.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import type * as Protocol from '../../generated/protocol.js';
-import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-
-import {AffectedItem, AffectedResourcesView} from './AffectedResourcesView.js';
-
-const UIStrings = {
-  /**
-   * @description Label for number of rows in the issue details table.
-   */
-  nViolations: '{n, plural, =1 {# violation} other {# violations}}',
-  /**
-   * @description Noun, label for the column showing the associated HTML element in the issue details table.
-   */
-  element: 'Element',
-  /**
-   * @description Noun, label for the column showing the invalid header value in the issue details table.
-   */
-  invalidHeaderValue: 'Invalid Header Value',
-  /**
-   * @description Noun, label for the column showing the associated network request in the issue details table.
-   */
-  request: 'Request',
-  /**
-   * @description Label for the column showing the invalid URL used in an HTML anchor element ("a link").
-   * A origin is (roughly said) the front part of a URL.
-   */
-  untrustworthyOrigin: 'Untrustworthy origin',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/issues/AttributionReportingIssueDetailsView.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-export class AttributionReportingIssueDetailsView extends AffectedResourcesView {
-  protected override getResourceNameWithCount(count: number): string {
-    return i18nString(UIStrings.nViolations, {n: count});
-  }
-
-  override update(): void {
-    this.clear();
-    const issues = this.issue.getAttributionReportingIssues();
-    const issue = issues.values().next();
-    if (issue.done) {
-      this.updateAffectedResourceCount(0);
-    } else {
-      this.#appendDetails(issue.value.code(), issues);
-    }
-  }
-
-  #appendDetails(
-      issueCode: IssuesManager.AttributionReportingIssue.IssueCode,
-      issues: Iterable<IssuesManager.AttributionReportingIssue.AttributionReportingIssue>): void {
-    const header = document.createElement('tr');
-    switch (issueCode) {
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_SOURCE_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_TRIGGER_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_OS_SOURCE_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_OS_TRIGGER_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.OS_SOURCE_IGNORED:
-      case IssuesManager.AttributionReportingIssue.IssueCode.OS_TRIGGER_IGNORED:
-      case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_IGNORED:
-      case IssuesManager.AttributionReportingIssue.IssueCode.TRIGGER_IGNORED:
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_INFO_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_UNIQUE_SCOPE_ALREADY_SET:
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        this.appendColumnTitle(header, i18nString(UIStrings.invalidHeaderValue));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.INSECURE_CONTEXT:
-      case IssuesManager.AttributionReportingIssue.IssueCode.UNTRUSTWORTHY_REPORTING_ORIGIN:
-        this.appendColumnTitle(header, i18nString(UIStrings.element));
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        this.appendColumnTitle(header, i18nString(UIStrings.untrustworthyOrigin));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.PERMISSION_POLICY_DISABLED:
-        this.appendColumnTitle(header, i18nString(UIStrings.element));
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_AND_TRIGGER_HEADERS:
-      case IssuesManager.AttributionReportingIssue.IssueCode.WEB_AND_OS_HEADERS:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_WEB_OR_OS_SUPPORT:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_SOURCE_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_TRIGGER_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_SOURCE_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_TRIGGER_HEADER:
-        this.appendColumnTitle(header, i18nString(UIStrings.request));
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_WITHOUT_TRANSIENT_USER_ACTIVATION:
-        this.appendColumnTitle(header, i18nString(UIStrings.element));
-        break;
-    }
-
-    this.affectedResources.appendChild(header);
-    let count = 0;
-    for (const issue of issues) {
-      count++;
-      void this.#appendDetail(issueCode, issue);
-    }
-    this.updateAffectedResourceCount(count);
-  }
-
-  async #appendDetail(
-      issueCode: IssuesManager.AttributionReportingIssue.IssueCode,
-      issue: IssuesManager.AttributionReportingIssue.AttributionReportingIssue): Promise<void> {
-    const element = document.createElement('tr');
-    element.classList.add('affected-resource-directive');
-
-    const details = issue.details();
-
-    switch (issueCode) {
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_SOURCE_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_TRIGGER_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_OS_SOURCE_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_OS_TRIGGER_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.OS_SOURCE_IGNORED:
-      case IssuesManager.AttributionReportingIssue.IssueCode.OS_TRIGGER_IGNORED:
-      case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_IGNORED:
-      case IssuesManager.AttributionReportingIssue.IssueCode.TRIGGER_IGNORED:
-      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_INFO_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_UNIQUE_SCOPE_ALREADY_SET:
-        this.#appendRequestOrEmptyCell(element, details.request);
-        this.appendIssueDetailCell(element, details.invalidParameter || '');
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.INSECURE_CONTEXT:
-      case IssuesManager.AttributionReportingIssue.IssueCode.UNTRUSTWORTHY_REPORTING_ORIGIN:
-        await this.#appendElementOrEmptyCell(element, issue);
-        this.#appendRequestOrEmptyCell(element, details.request);
-        this.appendIssueDetailCell(element, details.invalidParameter || '');
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.PERMISSION_POLICY_DISABLED:
-        await this.#appendElementOrEmptyCell(element, issue);
-        this.#appendRequestOrEmptyCell(element, details.request);
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_AND_TRIGGER_HEADERS:
-      case IssuesManager.AttributionReportingIssue.IssueCode.WEB_AND_OS_HEADERS:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_WEB_OR_OS_SUPPORT:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_SOURCE_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_TRIGGER_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_SOURCE_HEADER:
-      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_TRIGGER_HEADER:
-        this.#appendRequestOrEmptyCell(element, details.request);
-        break;
-      case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_WITHOUT_TRANSIENT_USER_ACTIVATION:
-        await this.#appendElementOrEmptyCell(element, issue);
-        break;
-    }
-
-    this.affectedResources.appendChild(element);
-  }
-
-  async #appendElementOrEmptyCell(
-      parent: HTMLElement, issue: IssuesManager.AttributionReportingIssue.AttributionReportingIssue): Promise<void> {
-    const details = issue.details();
-    if (details.violatingNodeId !== undefined) {
-      const target = issue.model()?.target() || null;
-      parent.appendChild(await this.createElementCell(
-          {backendNodeId: details.violatingNodeId, target, nodeName: 'Attribution source element'},
-          issue.getCategory()));
-    } else {
-      this.appendIssueDetailCell(parent, '');
-    }
-  }
-
-  #appendRequestOrEmptyCell(parent: HTMLElement, request?: Protocol.Audits.AffectedRequest): void {
-    if (!request) {
-      this.appendIssueDetailCell(parent, '');
-      return;
-    }
-
-    const opts = {
-      additionalOnClickAction(): void {
-        Host.userMetrics.issuesPanelResourceOpened(
-            IssuesManager.Issue.IssueCategory.ATTRIBUTION_REPORTING, AffectedItem.REQUEST);
-      },
-    };
-    parent.appendChild(this.createRequestCell(request, opts));
-  }
-}

package/front_end/panels/recorder/components/components.ts

@@ -1,25 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as ControlButton from './ControlButton.js';
-import * as CreateRecordingView from './CreateRecordingView.js';
-import * as RecordingListView from './RecordingListView.js';
-import * as RecordingView from './RecordingView.js';
-import * as ReplaySection from './ReplaySection.js';
-import * as SelectorPicker from './SelectorPicker.js';
-import * as StepEditor from './StepEditor.js';
-import * as StepView from './StepView.js';
-import * as TimelineSection from './TimelineSection.js';
-
-export {
-  ControlButton,
-  CreateRecordingView,
-  RecordingListView,
-  RecordingView,
-  ReplaySection,
-  SelectorPicker,
-  StepEditor,
-  StepView,
-  TimelineSection,
-};

package/front_end/panels/recorder/components/util.ts

@@ -1,116 +0,0 @@
-// Copyright 2023 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-export const mod = (a: number, n: number): number => {
-  return ((a % n) + n) % n;
-};
-
-export function assert<T>(
-    predicate: T,
-    message = 'Assertion failed!',
-    ): asserts predicate {
-  if (!predicate) {
-    throw new Error(message);
-  }
-}
-
-export type Keys<T> = T extends T ? keyof T : never;
-
-export type RequiredKeys<T> = {
-  [K in keyof T] -?: Record<string|number|symbol, unknown> extends Pick<T, K>? never : K;
-}[keyof T];
-
-export type OptionalKeys<T> = {
-  [K in keyof T] -?: Record<string|number|symbol, unknown> extends Pick<T, K>? K : never;
-}[keyof T];
-
-export type DeepImmutable<T> = {
-  readonly[K in keyof T]: DeepImmutable<T[K]>;
-};
-
-export type DeepMutable<T> = {
-  -readonly[K in keyof T]: DeepMutable<T[K]>;
-};
-
-export type DeepPartial<T> = {
-  [K in keyof T]?: DeepPartial<Exclude<T[K], undefined>>;
-};
-
-export type Mutable<T> = {
-  -readonly[K in keyof T]: T[K];
-};
-
-export const deepFreeze = <T extends object>(object: T): DeepImmutable<T> => {
-  for (const name of Reflect.ownKeys(object)) {
-    const value = object[name as keyof T];
-    if ((value && typeof value === 'object') || typeof value === 'function') {
-      deepFreeze(value);
-    }
-  }
-  return Object.freeze(object);
-};
-
-export class InsertAssignment<T> {
-  value: T;
-  constructor(value: T) {
-    this.value = value;
-  }
-}
-
-export class ArrayAssignments<T> {
-  value: Record<number, T>;
-  constructor(value: Record<number, T>) {
-    this.value = value;
-  }
-}
-
-export type Assignments<T> = T extends Readonly<Array<infer R>>?
-    R[]|ArrayAssignments<Assignments<R>|InsertAssignment<R>>:
-    {[K in keyof T]: Assignments<T[K]>};
-
-export const immutableDeepAssign = <T>(
-    object: DeepImmutable<T>,
-    assignments: DeepImmutable<DeepPartial<Assignments<T>>>,
-    ): DeepImmutable<T> => {
-  if (assignments instanceof ArrayAssignments) {
-    assert(Array.isArray(object), `Expected an array. Got ${typeof object}.`);
-    const updatedObject = [...object] as Mutable<typeof object>;
-    const keys = Object.keys(assignments.value)
-                     .sort(
-                         (a, b) => Number(b) - Number(a),
-                         ) as Array<keyof typeof updatedObject>;
-    for (const key of keys) {
-      const update = assignments.value[Number(key)];
-      if (update === undefined) {
-        updatedObject.splice(Number(key), 1);
-      } else if (update instanceof InsertAssignment) {
-        updatedObject.splice(Number(key), 0, update.value);
-      } else {
-        updatedObject[Number(key)] = immutableDeepAssign(
-            updatedObject[key],
-            update,
-        );
-      }
-    }
-    return Object.freeze(updatedObject);
-  }
-  if (typeof assignments === 'object' && !Array.isArray(assignments)) {
-    assert(!Array.isArray(object), 'Expected an object. Got an array.');
-    const updatedObject = {...object} as Mutable<typeof object>;
-    const keys = Object.keys(assignments) as Array<keyof typeof assignments&keyof typeof updatedObject>;
-    for (const key of keys) {
-      const update = assignments[key];
-      if (update === undefined) {
-        delete updatedObject[key];
-      } else {
-        updatedObject[key] = immutableDeepAssign(
-            updatedObject[key],
-            update as typeof updatedObject[typeof key],
-        );
-      }
-    }
-    return Object.freeze(updatedObject);
-  }
-  return assignments as DeepImmutable<T>;
-};