chrome-devtools-frontend 1.0.1521746 → 1.0.1522145

package/front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -5,10 +5,12 @@
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
+import * as TextUtils from '../../text_utils/text_utils.js';
 
 import {seconds} from './UnitFormatters.js';
 
 const MAX_HEADERS_SIZE = 1000;
+const MAX_BODY_SIZE = 10000;
 
 /**
  * Sanitizes the set of headers, removing values that are not on the allow-list and replacing them with '<redacted>'.
@@ -24,6 +26,8 @@ function sanitizeHeaders(headers: Array<{name: string, value: string}>): Array<{
 
 export class NetworkRequestFormatter {
   #calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
+  #request: SDK.NetworkRequest.NetworkRequest;
+
   static allowHeader(headerName: string): boolean {
     return allowedHeaders.has(headerName.toLowerCase().trim());
   }
@@ -37,6 +41,31 @@ export class NetworkRequestFormatter {
         MAX_HEADERS_SIZE);
   }
 
+  static async formatBody(title: string, request: SDK.NetworkRequest.NetworkRequest, maxBodySize: number):
+      Promise<string> {
+    const data = await request.requestContentData();
+
+    if (TextUtils.ContentData.ContentData.isError(data)) {
+      return '';
+    }
+
+    if (data.isEmpty) {
+      return `${title}\n<empty response>`;
+    }
+
+    if (data.isTextContent) {
+      const dataAsText = data.text;
+
+      if (dataAsText.length > maxBodySize) {
+        return `${title}\n${dataAsText.substring(0, maxBodySize) + '... <truncated>'}`;
+      }
+
+      return `${title}\n${dataAsText}`;
+    }
+
+    return `${title}\n<binary data>`;
+  }
+
   static formatInitiatorUrl(initiatorUrl: string, allowedOrigin: string): string {
     const initiatorOrigin = new URL(initiatorUrl).origin;
     if (initiatorOrigin === allowedOrigin) {
@@ -45,8 +74,6 @@ export class NetworkRequestFormatter {
     return '<redacted cross-origin initiator URL>';
   }
 
-  #request: SDK.NetworkRequest.NetworkRequest;
-
   constructor(
       request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator) {
     this.#request = request;
@@ -61,16 +88,27 @@ export class NetworkRequestFormatter {
     return NetworkRequestFormatter.formatHeaders('Response headers:', this.#request.responseHeaders);
   }
 
+  async formatResponseBody(): Promise<string> {
+    return await NetworkRequestFormatter.formatBody('Response body:', this.#request, MAX_BODY_SIZE);
+  }
+
   /**
    * Note: nothing here should include information from origins other than
    * the request's origin.
    */
-  formatNetworkRequest(): string {
+  async formatNetworkRequest(): Promise<string> {
+    let responseBody = await this.formatResponseBody();
+
+    if (responseBody) {
+      // if we have a response then we add 2 new line to follow same structure of the context
+      responseBody = `\n\n${responseBody}`;
+    }
+
     return `Request: ${this.#request.url()}
 
 ${this.formatRequestHeaders()}
 
-${this.formatResponseHeaders()}
+${this.formatResponseHeaders()}${responseBody}
 
 Response status: ${this.#request.statusCode} ${this.#request.statusText}
 

package/front_end/models/badges/UserBadges.ts

@@ -4,7 +4,6 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
-import * as Root from '../../core/root/root.js';
 
 import {AiExplorerBadge} from './AiExplorerBadge.js';
 import type {Badge, BadgeAction, BadgeActionEvents, BadgeContext, TriggerOptions} from './Badge.js';
@@ -50,8 +49,7 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     super();
 
     this.#receiveBadgesSetting = Common.Settings.Settings.instance().moduleSetting('receive-gdp-badges');
-    if (Host.GdpClient.getGdpProfilesEnterprisePolicy() ===
-        Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED_WITHOUT_BADGES) {
+    if (!Host.GdpClient.isBadgesEnabled()) {
       this.#receiveBadgesSetting.set(false);
     }
     this.#receiveBadgesSetting.addChangeListener(this.#reconcileBadges, this);
@@ -106,10 +104,10 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     if (!badge.isStarterBadge) {
       shouldAwardBadge = true;
     } else {
-      const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+      const getProfileResponse = await Host.GdpClient.GdpClient.instance().getProfile();
       const receiveBadgesSettingEnabled = Boolean(this.#receiveBadgesSetting.get());
       // If there is a GDP profile and the user has enabled receiving badges, we award the starter badge as well.
-      if (gdpProfile && receiveBadgesSettingEnabled && !this.#isStarterBadgeDismissed() &&
+      if (getProfileResponse?.profile && receiveBadgesSettingEnabled && !this.#isStarterBadgeDismissed() &&
           !this.#isStarterBadgeSnoozed()) {
         shouldAwardBadge = true;
       }
@@ -157,27 +155,28 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       return;
     }
 
-    if (!Host.GdpClient.isGdpProfilesAvailable() ||
-        Host.GdpClient.getGdpProfilesEnterprisePolicy() !== Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED) {
+    if (!Host.GdpClient.isGdpProfilesAvailable() || !Host.GdpClient.isBadgesEnabled()) {
       this.#deactivateAllBadges();
       return;
     }
 
-    const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
-    let isEligibleToCreateProfile = Boolean(gdpProfile);
-    if (!gdpProfile) {
-      isEligibleToCreateProfile = await Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile();
+    const getProfileResponse = await Host.GdpClient.GdpClient.instance().getProfile();
+    if (!getProfileResponse) {
+      this.#deactivateAllBadges();
+      return;
     }
 
+    const hasGdpProfile = Boolean(getProfileResponse.profile);
+    const isEligibleToCreateProfile = getProfileResponse.isEligible;
     // User does not have a GDP profile & not eligible to create one.
     // So, we don't activate any badges for them.
-    if (!gdpProfile && !isEligibleToCreateProfile) {
+    if (!hasGdpProfile && !isEligibleToCreateProfile) {
       this.#deactivateAllBadges();
       return;
     }
 
     let awardedBadgeNames: Set<string>|null = null;
-    if (gdpProfile) {
+    if (hasGdpProfile) {
       awardedBadgeNames = await Host.GdpClient.GdpClient.instance().getAwardedBadgeNames(
           {names: this.#allBadges.map(badge => badge.name)});
       // This is a conservative approach. We bail out if `awardedBadgeNames` is null
@@ -202,9 +201,8 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       }
 
       const shouldActivateStarterBadge = badge.isStarterBadge && isEligibleToCreateProfile &&
-          !this.#isStarterBadgeDismissed() && !this.#isStarterBadgeSnoozed();
-      const shouldActivateActivityBasedBadge =
-          !badge.isStarterBadge && Boolean(gdpProfile) && receiveBadgesSettingEnabled;
+          Host.GdpClient.isStarterBadgeEnabled() && !this.#isStarterBadgeDismissed() && !this.#isStarterBadgeSnoozed();
+      const shouldActivateActivityBasedBadge = !badge.isStarterBadge && hasGdpProfile && receiveBadgesSettingEnabled;
       if (shouldActivateStarterBadge || shouldActivateActivityBasedBadge) {
         badge.activate();
       } else {

package/front_end/panels/ai_assistance/components/UserActionRow.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 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 rulesdir/no-lit-render-outside-of-view */
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -273,7 +272,7 @@ export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput,
       </div>
     </form>
     ` : Lit.nothing}
-  `, target, {host: target});
+  `, target);
   // clang-format on
 };
 

package/front_end/panels/application/IndexedDBViews.ts

@@ -146,6 +146,7 @@ export class IDBDatabaseView extends ApplicationComponents.StorageMetadataView.S
     super();
 
     this.model = model;
+    this.setShowOnlyBucket(false);
     if (database) {
       this.update(database);
     }

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -8,7 +8,6 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import * as ApplicationComponents from './components/components.js';
 import {ReportingApiView} from './ReportingApiView.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
 
@@ -37,7 +36,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = new ReportingApiView(new ApplicationComponents.EndpointsGrid.EndpointsGrid());
+      this.view = new ReportingApiView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('reporting-api');

package/front_end/panels/application/ReportingApiView.ts

@@ -50,11 +50,10 @@ const REPORTING_API_EXPLANATION_URL =
 interface ViewInput {
   hasReports: boolean;
   hasEndpoints: boolean;
-  // TODO (crbug.com/407940329): port EndpointsGrid to a UI Widget and instantiate it in the view
-  endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid;
-  // TODO (crbug.com/407940381): port ReportsGrid to a UI Widget and instantiate it in the view
-  reportsGrid: ApplicationComponents.ReportsGrid.ReportsGrid;
+  endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
+  reports: Protocol.Network.ReportingApiReport[];
   focusedReport?: Protocol.Network.ReportingApiReport;
+  onReportSelected: (id: string) => void;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -68,7 +67,9 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         ${input.hasReports ? html`
           <devtools-split-view slot="main" sidebar-position="second" sidebar-initial-size="150">
             <div slot="main">
-              ${input.reportsGrid}
+              <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
+                reports: input.reports, onReportSelected: input.onReportSelected,
+              })}></devtools-widget>
             </div>
             <div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
               ${input.focusedReport ? html`
@@ -85,11 +86,15 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </devtools-split-view>
         ` : html`
           <div slot="main">
-            ${input.reportsGrid}
+            <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
+                reports: input.reports, onReportSelected: input.onReportSelected,
+              })}></devtools-widget>
           </div>
         `}
         <div slot="sidebar">
-          ${input.endpointsGrid}
+          <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.EndpointsGrid.EndpointsGrid, {
+            endpoints: input.endpoints,
+          })}></devtools-widget>
         </div>
       </devtools-split-view>
     `, target);
@@ -109,20 +114,16 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 
 export class ReportingApiView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager> {
-  readonly #endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid;
   #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
   #view: View;
   #networkManager?: SDK.NetworkManager.NetworkManager;
-  #reportsGrid = new ApplicationComponents.ReportsGrid.ReportsGrid();
   #reports: Protocol.Network.ReportingApiReport[] = [];
   #focusedReport?: Protocol.Network.ReportingApiReport;
 
-  constructor(endpointsGrid: ApplicationComponents.EndpointsGrid.EndpointsGrid, view = DEFAULT_VIEW) {
+  constructor(view = DEFAULT_VIEW) {
     super();
     this.#view = view;
-    this.#endpointsGrid = endpointsGrid;
     this.#endpoints = new Map();
-    this.#reportsGrid.addEventListener('select', this.#onFocus.bind(this));
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.NetworkManager.NetworkManager, this);
     this.requestUpdate();
   }
@@ -158,35 +159,32 @@ export class ReportingApiView extends UI.Widget.VBox implements
     const viewInput = {
       hasReports: this.#reports.length > 0,
       hasEndpoints: this.#endpoints.size > 0,
-      endpointsGrid: this.#endpointsGrid,
-      reportsGrid: this.#reportsGrid,
+      endpoints: this.#endpoints,
+      reports: this.#reports,
       focusedReport: this.#focusedReport,
+      onReportSelected: this.#onReportSelected.bind(this),
     };
     this.#view(viewInput, {}, this.element);
   }
 
   #onEndpointsChangedForOrigin({data}: {data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent}): void {
     this.#endpoints.set(data.origin, data.endpoints);
-    this.#endpointsGrid.data = {endpoints: this.#endpoints};
     this.requestUpdate();
   }
 
   #onReportAdded({data: report}: {data: Protocol.Network.ReportingApiReport}): void {
     this.#reports.push(report);
-    this.#reportsGrid.data = {reports: this.#reports};
     this.requestUpdate();
   }
 
   #onReportUpdated({data: report}: {data: Protocol.Network.ReportingApiReport}): void {
     const index = this.#reports.findIndex(oldReport => oldReport.id === report.id);
     this.#reports[index] = report;
-    this.#reportsGrid.data = {reports: this.#reports};
     this.requestUpdate();
   }
 
-  async #onFocus(event: Event): Promise<void> {
-    const selectEvent = event as CustomEvent<string>;
-    const report = this.#reports.find(report => report.id === selectEvent.detail);
+  #onReportSelected(id: string): void {
+    const report = this.#reports.find(report => report.id === id);
     if (report) {
       this.#focusedReport = report;
       this.requestUpdate();

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -134,6 +134,9 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     const bucketInfo = this.model.target()
                            .model(SDK.StorageBucketsModel.StorageBucketsModel)
                            ?.getBucketByName(cache.storageBucket.storageKey, cache.storageBucket.name);
+
+    this.metadataView.setShowOnlyBucket(false);
+
     if (bucketInfo) {
       this.metadataView.setStorageBucket(bucketInfo);
     } else if (cache.storageKey) {

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

@@ -1,7 +1,6 @@
 // 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 rulesdir/no-lit-render-outside-of-view */
 
 import '../../../ui/legacy/components/data_grid/data_grid.js';
 
@@ -11,7 +10,7 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import reportingApiGridStyles from './reportingApiGrid.css.js';
+import endpointsGridStyles from './endpointsGrid.css.js';
 
 const UIStrings = {
   /**
@@ -23,76 +22,69 @@ const UIStrings = {
    * @description Placeholder text when there are no Reporting API endpoints.
    *(https://developers.google.com/web/updates/2018/09/reportingapi#tldr)
    */
-  endpointsDescription: 'Here you will find the list of endpoints that receive the reports'
+  endpointsDescription: 'Here you will find the list of endpoints that receive the reports',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/EndpointsGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = Lit;
 
-export interface EndpointsGridData {
+export interface ViewInput {
   endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
 }
 
-export class EndpointsGrid extends HTMLElement {
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <style>${endpointsGridStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <div class="endpoints-container" jslog=${VisualLogging.section('endpoints')}>
+      <div class="endpoints-header">${i18n.i18n.lockedString('Endpoints')}</div>
+      ${input.endpoints.size > 0 ? html`
+        <devtools-data-grid striped>
+         <table>
+          <tr>
+            <th id="origin" weight="30">${i18n.i18n.lockedString('Origin')}</th>
+            <th id="name" weight="20">${i18n.i18n.lockedString('Name')}</th>
+            <th id="url" weight="30">${i18n.i18n.lockedString('URL')}</th>
+          </tr>
+          ${Array.from(input.endpoints).map(([origin, endpointArray]) =>
+              endpointArray.map(endpoint => html`<tr>
+                <td>${origin}</td>
+                <td>${endpoint.groupName}</td>
+                <td>${endpoint.url}</td>
+              </tr>`))
+              .flat()}
+          </table>
+        </devtools-data-grid>
+      ` : html`
+        <div class="empty-state">
+          <span class="empty-state-header">${i18nString(UIStrings.noEndpointsToDisplay)}</span>
+          <span class="empty-state-description">${i18nString(UIStrings.endpointsDescription)}</span>
+        </div>
+      `}
+    </div>
+  `, target);
+  // clang-format on
+};
 
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #endpoints = new Map<string, Protocol.Network.ReportingApiEndpoint[]>();
+type View = typeof DEFAULT_VIEW;
 
-  connectedCallback(): void {
-    this.#render();
-  }
-
-  set data(data: EndpointsGridData) {
-    this.#endpoints = data.endpoints;
-    this.#render();
-  }
+export class EndpointsGrid extends UI.Widget.Widget {
+  endpoints = new Map<string, Protocol.Network.ReportingApiEndpoint[]>();
+  #view: View;
 
-  get data(): EndpointsGridData {
-    return {endpoints: this.#endpoints};
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+    this.requestUpdate();
   }
 
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${reportingApiGridStyles}</style>
-      <style>${UI.inspectorCommonStyles}</style>
-      <div class="reporting-container" jslog=${VisualLogging.section('endpoints')}>
-        <div class="reporting-header">${i18n.i18n.lockedString('Endpoints')}</div>
-        ${this.#endpoints.size > 0 ? html`
-          <devtools-data-grid striped>
-           <table>
-            <tr>
-              <th id="origin" weight="30">${i18n.i18n.lockedString('Origin')}</th>
-              <th id="name" weight="20">${i18n.i18n.lockedString('Name')}</th>
-              <th id="url" weight="30">${i18n.i18n.lockedString('URL')}</th>
-            </tr>
-            ${Array.from(this.#endpoints).map(([origin, endpointArray]) =>
-                endpointArray.map(endpoint => html`<tr>
-                  <td>${origin}</td>
-                  <td>${endpoint.groupName}</td>
-                  <td>${endpoint.url}</td>
-                </tr>`))
-                .flat()}
-            </table>
-          </devtools-data-grid>
-        ` : html`
-          <div class="empty-state">
-            <span class="empty-state-header">${i18nString(UIStrings.noEndpointsToDisplay)}</span>
-            <span class="empty-state-description">${i18nString(UIStrings.endpointsDescription)}</span>
-          </div>
-        `}
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
-  }
-}
-
-customElements.define('devtools-resources-endpoints-grid', EndpointsGrid);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-endpoints-grid': EndpointsGrid;
+  override performUpdate(): void {
+    this.#view(
+        {
+          endpoints: this.endpoints,
+        },
+        undefined, this.contentElement);
   }
 }