chrome-devtools-frontend 1.0.1661063 → 1.0.1662289

package/front_end/panels/application/InterestGroupStorageView.ts

@@ -1,151 +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 i18n from '../../core/i18n/i18n.js';
-import * as Protocol from '../../generated/protocol.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-
-import * as ApplicationComponents from './components/components.js';
-import interestGroupStorageViewStyles from './interestGroupStorageView.css.js';
-
-const UIStrings = {
-  /**
-   * @description Placeholder text shown when nothing has been selected for display
-   *details.
-   * 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.
-   */
-  noValueSelected: 'No interest group selected',
-  /**
-   * @description Placeholder text instructing the user how to display interest group
-   *details.
-   * 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.
-   */
-  clickToDisplayBody: 'Select any interest group event to display the group\'s current state',
-  /**
-   * @description Placeholder text telling the user no details are available for
-   *the selected interest group.
-   */
-  noDataAvailable: 'No details available',
-  /**
-   * @description Placeholder text explaining to the user a potential reason for not having details on
-   * the interest groups.
-   * 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.
-   */
-  noDataDescription: 'The browser may have left the group.',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/application/InterestGroupStorageView.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-interface InterestGroupDetailsGetter {
-  getInterestGroupDetails: (owner: string, name: string) => Promise<object|null>;
-}
-
-function eventEquals(
-    a: Protocol.Storage.InterestGroupAccessedEvent, b: Protocol.Storage.InterestGroupAccessedEvent): boolean {
-  return (a.accessTime === b.accessTime && a.type === b.type && a.ownerOrigin === b.ownerOrigin && a.name === b.name);
-}
-
-export class InterestGroupStorageView extends UI.SplitWidget.SplitWidget {
-  private readonly interestGroupGrid = new ApplicationComponents.InterestGroupAccessGrid.InterestGroupAccessGrid();
-  private events: Protocol.Storage.InterestGroupAccessedEvent[] = [];
-  private detailsGetter: InterestGroupDetailsGetter;
-  private noDataView: UI.Widget.VBox;
-  private noDisplayView: UI.Widget.VBox;
-
-  constructor(detailsGetter: InterestGroupDetailsGetter) {
-    super(/* isVertical */ false, /* secondIsSidebar: */ true);
-    this.element.setAttribute('jslog', `${VisualLogging.pane('interest-groups')}`);
-    this.detailsGetter = detailsGetter;
-
-    const topPanel = new UI.Widget.VBox();
-    this.noDisplayView =
-        new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noValueSelected), i18nString(UIStrings.clickToDisplayBody));
-    this.noDataView =
-        new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noDataAvailable), i18nString(UIStrings.noDataDescription));
-
-    topPanel.setMinimumSize(0, 120);
-    this.setMainWidget(topPanel);
-    this.noDisplayView.setMinimumSize(0, 80);
-    this.setSidebarWidget(this.noDisplayView);
-    this.noDataView.setMinimumSize(0, 80);
-    this.noDisplayView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-    this.noDataView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-    this.hideSidebar();
-
-    topPanel.contentElement.appendChild(this.interestGroupGrid);
-    this.interestGroupGrid.addEventListener('select', this.onFocus.bind(this));
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    const mainWidget = this.mainWidget();
-    if (mainWidget) {
-      mainWidget.registerRequiredCSS(interestGroupStorageViewStyles);
-    }
-  }
-
-  addEvent(event: Protocol.Storage.InterestGroupAccessedEvent): void {
-    if (this.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
-      this.showBoth();
-    }
-    // Only add if not already present.
-    const foundEvent = this.events.find(t => eventEquals(t, event));
-    if (!foundEvent) {
-      this.events.push(event);
-      this.interestGroupGrid.data = this.events;
-    }
-  }
-
-  clearEvents(): void {
-    this.events = [];
-    this.interestGroupGrid.data = this.events;
-    this.setSidebarWidget(this.noDisplayView);
-    this.sidebarUpdatedForTesting();
-  }
-
-  private async onFocus(event: Event): Promise<void> {
-    const focusedEvent = event as CustomEvent<Protocol.Storage.InterestGroupAccessedEvent>;
-    const {ownerOrigin, name, type: eventType} = focusedEvent.detail;
-
-    let details = null;
-    // Details of additional bids can't be looked up like regular bids,
-    // they are ephemeral to the auction.
-    if (eventType !== Protocol.Storage.InterestGroupAccessType.AdditionalBid &&
-        eventType !== Protocol.Storage.InterestGroupAccessType.AdditionalBidWin &&
-        eventType !== Protocol.Storage.InterestGroupAccessType.TopLevelAdditionalBid) {
-      details = await this.detailsGetter.getInterestGroupDetails(ownerOrigin, name);
-    }
-    if (details) {
-      const jsonView = await SourceFrame.JSONView.JSONView.createView(JSON.stringify(details));
-      jsonView?.setMinimumSize(0, 40);
-      if (jsonView) {
-        jsonView.contentElement.setAttribute('jslog', `${VisualLogging.pane('details').track({resize: true})}`);
-        this.setSidebarWidget(jsonView);
-      }
-    } else {
-      this.setSidebarWidget(this.noDataView);
-    }
-    this.sidebarUpdatedForTesting();
-  }
-
-  getEventsForTesting(): Protocol.Storage.InterestGroupAccessedEvent[] {
-    return this.events;
-  }
-
-  getInterestGroupGridForTesting(): ApplicationComponents.InterestGroupAccessGrid.InterestGroupAccessGrid {
-    return this.interestGroupGrid;
-  }
-
-  sidebarUpdatedForTesting(): void {
-  }
-}

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/sources/InplaceFormatterEditorAction.ts

@@ -1,149 +0,0 @@
-// Copyright 2014 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 Common from '../../core/common/common.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import * as Formatter from '../../models/formatter/formatter.js';
-import * as Persistence from '../../models/persistence/persistence.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as Workspace from '../../models/workspace/workspace.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import {
-  type EditorAction,
-  type EditorClosedEvent,
-  Events,
-  registerEditorAction,
-  type SourcesView,
-} from './SourcesView.js';
-import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
-
-const UIStrings = {
-  /**
-   * @description Title of the format button in the Sources panel
-   * @example {file name} PH1
-   */
-  formatS: 'Format {PH1}',
-  /**
-   * @description Tooltip text that appears when hovering over the largeicon pretty print button in the Inplace Formatter Editor Action of the Sources panel
-   */
-  format: 'Format',
-} as const;
-const str_ = i18n.i18n.registerUIStrings('panels/sources/InplaceFormatterEditorAction.ts', UIStrings);
-const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-
-let inplaceFormatterEditorActionInstance: InplaceFormatterEditorAction;
-
-export class InplaceFormatterEditorAction implements EditorAction {
-  private button!: UI.Toolbar.ToolbarButton;
-  private sourcesView!: SourcesView;
-  private uiSourceCodeTitleChangedEvent: Common.EventTarget.EventDescriptor|null = null;
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): InplaceFormatterEditorAction {
-    const {forceNew} = opts;
-    if (!inplaceFormatterEditorActionInstance || forceNew) {
-      inplaceFormatterEditorActionInstance = new InplaceFormatterEditorAction();
-    }
-
-    return inplaceFormatterEditorActionInstance;
-  }
-
-  private editorSelected(event: Common.EventTarget.EventTargetEvent<Workspace.UISourceCode.UISourceCode>): void {
-    const uiSourceCode = event.data;
-    this.updateButton(uiSourceCode);
-  }
-
-  private editorClosed(event: Common.EventTarget.EventTargetEvent<EditorClosedEvent>): void {
-    const {wasSelected} = event.data;
-    if (wasSelected) {
-      this.updateButton(null);
-    }
-  }
-
-  private updateButton(uiSourceCode: Workspace.UISourceCode.UISourceCode|null): void {
-    if (this.uiSourceCodeTitleChangedEvent) {
-      Common.EventTarget.removeEventListeners([this.uiSourceCodeTitleChangedEvent]);
-    }
-    this.uiSourceCodeTitleChangedEvent = uiSourceCode ?
-        uiSourceCode.addEventListener(
-            Workspace.UISourceCode.Events.TitleChanged, event => this.updateButton(event.data), this) :
-        null;
-    const isFormattable = this.isFormattable(uiSourceCode);
-    this.button.element.classList.toggle('hidden', !isFormattable);
-    if (uiSourceCode && isFormattable) {
-      this.button.setTitle(i18nString(UIStrings.formatS, {PH1: uiSourceCode.name()}));
-    }
-  }
-
-  getOrCreateButton(sourcesView: SourcesView): UI.Toolbar.ToolbarButton {
-    if (this.button) {
-      return this.button;
-    }
-
-    this.sourcesView = sourcesView;
-    this.sourcesView.addEventListener(Events.EDITOR_SELECTED, this.editorSelected.bind(this));
-    this.sourcesView.addEventListener(Events.EDITOR_CLOSED, this.editorClosed.bind(this));
-
-    this.button = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.format), 'brackets');
-    this.button.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.formatSourceInPlace, this);
-    this.updateButton(sourcesView.currentUISourceCode());
-
-    return this.button;
-  }
-
-  private isFormattable(uiSourceCode: Workspace.UISourceCode.UISourceCode|null): boolean {
-    if (!uiSourceCode) {
-      return false;
-    }
-    // Only show Format button for editable files
-    if (!Persistence.Persistence.PersistenceImpl.instance().hasEditableContent(uiSourceCode)) {
-      return false;
-    }
-    // Only show Format button for JavaScript files. For other file types (JSON, CSS),
-    // the pretty-print toggle in the status bar should be used instead, which provides
-    // reversible formatting (fixes issue 378870233).
-    const mimeType = Common.ResourceType.ResourceType.simplifyContentType(uiSourceCode.mimeType());
-    return Common.ResourceType.ResourceType.isJavaScriptMimeType(mimeType);
-  }
-
-  private formatSourceInPlace(): void {
-    const sourceFrame = this.sourcesView.currentSourceFrame();
-    if (!sourceFrame) {
-      return;
-    }
-    const uiSourceCode = sourceFrame.uiSourceCode();
-    if (!this.isFormattable(uiSourceCode)) {
-      return;
-    }
-
-    if (uiSourceCode.isDirty()) {
-      void this.contentLoaded(uiSourceCode, sourceFrame, uiSourceCode.workingCopy());
-    } else {
-      void uiSourceCode.requestContentData()
-          .then(contentDataOrError => TextUtils.ContentData.ContentData.textOr(contentDataOrError, ''))
-          .then(content => {
-            void this.contentLoaded(uiSourceCode, sourceFrame, content);
-          });
-    }
-  }
-
-  private async contentLoaded(
-      uiSourceCode: Workspace.UISourceCode.UISourceCode, sourceFrame: UISourceCodeFrame,
-      content: string): Promise<void> {
-    const {formattedContent, formattedMapping} = await Formatter.ScriptFormatter.format(
-        Common.Settings.Settings.instance(), uiSourceCode.contentType(), sourceFrame.contentType, content);
-    if (uiSourceCode.workingCopy() === formattedContent) {
-      return;
-    }
-    const selection = sourceFrame.textEditor.toLineColumn(sourceFrame.textEditor.state.selection.main.head);
-    const [lineNumber, columnNumber] =
-        formattedMapping.originalToFormatted(selection.lineNumber, selection.columnNumber);
-    uiSourceCode.setWorkingCopy(formattedContent);
-    this.sourcesView.showSourceLocation(uiSourceCode, {lineNumber, columnNumber});
-  }
-}
-
-registerEditorAction(InplaceFormatterEditorAction.instance);