chrome-devtools-frontend 1.0.1521880 → 1.0.1522585

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/models/javascript_metadata/NativeFunctions.js

@@ -7982,7 +7982,7 @@ export const NativeFunctions = [
   },
   {
     name: "constant",
-    signatures: [["tensor"],["desc","buffer"]]
+    signatures: [["tensor"],["desc","buffer"],["type","value"]]
   },
   {
     name: "argMin",

package/front_end/models/trace/LanternComputationData.ts

@@ -192,6 +192,7 @@ function createLanternRequest(
     priority: request.args.data.priority,
     frameId: request.args.data.frame,
     fromWorker,
+    serverResponseTime: request.args.data.lrServerResponseTime ?? undefined,
     // Set later.
     redirects: undefined,
     redirectSource: undefined,

package/front_end/models/trace/handlers/NetworkRequestsHandler.ts

@@ -295,6 +295,7 @@ export async function finalize(): Promise<void> {
      *
      * See `_updateTimingsForLightrider` in Lighthouse for more detail.
      */
+    let lrServerResponseTime;
     if (isLightrider && request.receiveResponse?.args.data.headers) {
       timing = {
         requestTime: Helpers.Timing.microToSeconds(request.sendRequests.at(0)?.ts ?? 0 as Types.Timing.Micro),
@@ -330,6 +331,14 @@ export async function finalize(): Promise<void> {
         timing.connectEnd = TCPMs as Types.Timing.Milli;
         timing.sslEnd = TCPMs as Types.Timing.Milli;
       }
+
+      // Lightrider does not have any equivalent for `sendEnd` timing values. The
+      // closest we can get to the server response time is from a header that
+      // Lightrider sets.
+      const ResponseMsHeader = request.receiveResponse.args.data.headers.find(h => h.name === 'X-ResponseMs');
+      if (ResponseMsHeader) {
+        lrServerResponseTime = Math.max(0, parseInt(ResponseMsHeader.value, 10)) as Types.Timing.Milli;
+      }
     }
 
     // TODO: consider allowing chrome / about.
@@ -526,6 +535,7 @@ export async function finalize(): Promise<void> {
               initiator: finalSendRequest.args.data.initiator,
               stackTrace: finalSendRequest.args.data.stackTrace,
               timing,
+              lrServerResponseTime,
               url,
               failed: request.resourceFinish?.args.data.didFail ?? false,
               finished: Boolean(request.resourceFinish),

package/front_end/models/trace/insights/DocumentLatency.ts

@@ -95,15 +95,14 @@ export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
   },
 }>;
 
-function getServerResponseTime(
-    request: Types.Events.SyntheticNetworkRequest, context: InsightSetContext): Types.Timing.Milli|null {
-  // Prefer the value as given by the Lantern provider.
-  // For PSI, Lighthouse uses this to set a better value for the server response
-  // time. For technical reasons, in Lightrider we do not have `sendEnd` timing
-  // values. See Lighthouse's `asLanternNetworkRequest` function for more.
-  const lanternRequest = context.navigation && context.lantern?.requests.find(r => r.rawRequest === request);
-  if (lanternRequest?.serverResponseTime !== undefined) {
-    return lanternRequest.serverResponseTime as Types.Timing.Milli;
+function getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.Milli|null {
+  // For technical reasons, Lightrider does not have `sendEnd` timing values. The
+  // closest we can get to the server response time is from a header that Lightrider
+  // sets.
+  // @ts-expect-error
+  const isLightrider = globalThis.isLightrider;
+  if (isLightrider) {
+    return request.args.data.lrServerResponseTime ?? null;
   }
 
   const timing = request.args.data.timing;
@@ -202,7 +201,7 @@ export function generateInsight(
     return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
   }
 
-  const serverResponseTime = getServerResponseTime(documentRequest, context);
+  const serverResponseTime = getServerResponseTime(documentRequest);
   if (serverResponseTime === null) {
     throw new Error('missing document request timing');
   }

package/front_end/models/trace/types/TraceEvents.ts

@@ -124,10 +124,10 @@ export interface TraceFrame {
   processId: ProcessID;
   url: string;
   parent?: string;
-  // Added to Chromium in April 2024:
+  // Added to Chrome in April 2024:
   // crrev.com/c/5424783
   isOutermostMainFrame?: boolean;
-  // Added to Chromium in June 2024:
+  // Added to Chrome in June 2024:
   // crrev.com/c/5595033
   isInPrimaryMainFrame?: boolean;
 }
@@ -415,6 +415,8 @@ export interface SyntheticNetworkRequest extends Complete, SyntheticBased<Phase.
       initiator?: Initiator,
       requestMethod?: string,
       timing?: ResourceReceiveResponseTimingData,
+      /** Server response time according to Lightrider. */
+      lrServerResponseTime?: Milli,
     },
   };
   cat: 'loading';
@@ -549,7 +551,6 @@ export function isAuctionWorkletDoneWithProcess(event: Event): event is AuctionW
  *    consuming screenshot events from the ScreenshotHandler, you must make sure
  *    to have your code deal with the two different formats.
  */
-// These are nullable because in January 2025 a CL in Chromium
 export interface LegacyScreenshot extends Event {
   /**
    * @deprecated This value is incorrect. Use ScreenshotHandler.getPresentationTimestamp()
@@ -745,7 +746,7 @@ export interface LargestContentfulPaintCandidate extends Mark {
       nodeId: Protocol.DOM.BackendNodeId,
       loadingAttr: string,
       type?: string,
-      // Landed in Chromium M140: crrev.com/c/6702010
+      // Landed in Chrome M140: crrev.com/c/6702010
       nodeName?: string,
     },
   };
@@ -990,7 +991,7 @@ export interface SyntheticLayoutShift extends Omit<LayoutShift, 'name'>, Synthet
 export const NO_NAVIGATION = 'NO_NAVIGATION';
 
 /**
- * This maybe be a navigation id string from Chromium, or `NO_NAVIGATION`, which represents the
+ * This maybe be a navigation id string from Chrome, or `NO_NAVIGATION`, which represents the
  * portion of the trace for which we don't have any navigation event for (as it happeneded prior
  * to the trace start).
  */

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