chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

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

@@ -2,11 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Common from '../../../core/common/common.js';
 import type * as Handlers from '../handlers/handlers.js';
 import type * as Lantern from '../lantern/lantern.js';
 import type * as Types from '../types/types.js';
 
-import type * as InsightsRunners from './InsightRunners.js';
+import type * as Models from './Models.js';
 
 /**
  * Context for the portion of the trace an insight should look at.
@@ -33,7 +34,7 @@ export interface LanternContext {
   metrics: Record<string, Lantern.Metrics.MetricResult>;
 }
 
-export type InsightRunnersType = typeof InsightsRunners;
+export type InsightModelsType = typeof Models;
 
 export enum InsightWarning {
   NO_FP = 'NO_FP',
@@ -53,7 +54,19 @@ export interface MetricSavings {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
-export type InsightResult<R extends Record<string, unknown>> = R&{
+export enum InsightCategory {
+  ALL = 'All',
+  INP = 'INP',
+  LCP = 'LCP',
+  CLS = 'CLS',
+}
+
+export type InsightModel<R extends Record<string, unknown>> = R&{
+  title: Common.UIString.LocalizedString,
+  description: Common.UIString.LocalizedString,
+  category: InsightCategory,
+  /** True if there is anything of interest to display to the user. */
+  shouldShow: boolean,
   relatedEvents?: Types.Events.Event[],
   warnings?: InsightWarning[],
   metricSavings?: MetricSavings,
@@ -64,22 +77,22 @@ export type InsightResult<R extends Record<string, unknown>> = R&{
  * this could instead represent the duration from the beginning of the trace up to the first recorded
  * navigation (or the end of the trace).
  */
-export type InsightSets = {
+export type InsightSet = {
   /** If for a navigation, this is the navigationId. Else it is Trace.Types.Events.NO_NAVIGATION. */
   id: Types.Events.NavigationId,
   /** The URL to show in the accordion list. */
   url: URL,
   frameId: string,
   bounds: Types.Timing.TraceWindowMicroSeconds,
-  data: InsightResults,
+  model: InsightModels,
   navigation?: Types.Events.NavigationStart,
 };
 
 /**
- * Contains insights for a specific navigation.
+ * Contains insights for a specific insight set.
  */
-export type InsightResults = {
-  [I in keyof InsightRunnersType]: ReturnType<InsightRunnersType[I]['generateInsight']>;
+export type InsightModels = {
+  [I in keyof InsightModelsType]: ReturnType<InsightModelsType[I]['generateInsight']>;
 };
 
 /**
@@ -88,7 +101,7 @@ export type InsightResults = {
  * If the analyzed trace started after the navigation, and has meaningful work with that span, there is no
  * navigation to map it to. In this case `Types.Events.NO_NAVIGATION` is used for the key.
  */
-export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSets>;
+export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSet>;
 
 /**
  * Represents the narrow set of dependencies defined by an insight's `deps()` function. `Meta` is always included regardless of `deps()`.

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

@@ -1,6 +1,8 @@
 // Copyright 2023 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 type * as Protocol from '../../../generated/protocol.js';
 
 import type {TraceWindowMicroSeconds} from './Timing.js';
@@ -177,7 +179,12 @@ export interface Modifications {
 export interface MetaData {
   source?: 'DevTools';
   startTime?: string;
+  emulatedDeviceTitle?: string;
+  // Only set if network throttling is active.
   networkThrottling?: string;
+  // Only set if network throttling is active.
+  networkThrottlingConditions?: Omit<SDK.NetworkManager.Conditions, 'title'>;
+  // Only set if CPU throttling is active.
   cpuThrottling?: number;
   hardwareConcurrency?: number;
   dataOrigin?: DataOrigin;

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

@@ -52,6 +52,8 @@ export const enum Phase {
   CLOCK_SYNC = 'c',
 }
 
+export type NonEmptyString = string&{_tag: 'NonEmptyString'};
+
 export function isNestableAsyncPhase(phase: Phase): boolean {
   return phase === Phase.ASYNC_NESTABLE_START || phase === Phase.ASYNC_NESTABLE_END ||
       phase === Phase.ASYNC_NESTABLE_INSTANT;
@@ -266,28 +268,38 @@ export interface End extends Event {
  */
 export type SyntheticComplete = Complete;
 
-export interface EventTiming extends Event {
-  ph: Phase.ASYNC_NESTABLE_START|Phase.ASYNC_NESTABLE_END;
+// TODO(paulirish): Migrate to the new (Sept 2024) EventTiming trace events.
+// See https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/window_performance.cc;l=900-901;drc=b503c262e425eae59ced4a80d59d176ed07152c7
+export type EventTimingBeginOrEnd = EventTimingBegin|EventTimingEnd;
+
+export interface EventTimingBegin extends Event {
+  ph: Phase.ASYNC_NESTABLE_START;
   name: Name.EVENT_TIMING;
   id: string;
   args: Args&{
-    frame: string,
-    data?: ArgsData&{
+    // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/timing/performance_event_timing.cc;l=297;drc=4f00803ca25c0d0480ed14844d6406933c21e80e
+    data: ArgsData & {
       cancelable: boolean,
       duration: MilliSeconds,
-      processingEnd: MilliSeconds,
-      processingStart: MilliSeconds,
-      timeStamp: MilliSeconds,
-      interactionId?: number, type: string,
+      type: string,
+      interactionId: number,
+      interactionOffset: number,
+      nodeId: Protocol.DOM.BackendNodeId,
+      frame?: string,  // From May 2022 onwards, this is where frame is located. https://chromium-review.googlesource.com/c/chromium/src/+/3632661
+      processingEnd?: MilliSeconds,
+      processingStart?: MilliSeconds,
+      timeStamp?: MilliSeconds,
+      enqueuedToMainThreadTime?: MilliSeconds,
+      commitFinishTime?: MilliSeconds,
     },
+    frame?: string,  // Prior to May 2022, `frame` was here in args.
   };
 }
-
-export interface EventTimingBegin extends EventTiming {
-  ph: Phase.ASYNC_NESTABLE_START;
-}
-export interface EventTimingEnd extends EventTiming {
+export interface EventTimingEnd extends Event {
   ph: Phase.ASYNC_NESTABLE_END;
+  name: Name.EVENT_TIMING;
+  id: string;
+  args: Args;
 }
 
 export interface GPUTask extends Complete {
@@ -584,11 +596,13 @@ export interface Mark extends Event {
   ph: Phase.MARK;
 }
 
-export interface NavigationStart extends Mark {
+// An unreliable and non-legit navigationStart. See NavigationStartWithUrl
+export interface NavigationStartUnreliable extends Mark {
   name: 'navigationStart';
   args: Args&{
     data?: ArgsData & {
-      documentLoaderURL: string,
+      /** An empty documentLoaderURL means this navigationStart is unreliable noise and can be ignored. */
+      documentLoaderURL: never,
       isLoadingMainFrame: boolean,
       // isOutermostMainFrame was introduced in crrev.com/c/3625434 and exists
       // because of Fenced Frames
@@ -613,6 +627,16 @@ export interface NavigationStart extends Mark {
   };
 }
 
+// NavigationStart but definitely has a populated documentLoaderURL
+export interface NavigationStart extends NavigationStartUnreliable {
+  args: NavigationStartUnreliable['args']&{
+    data: NavigationStartUnreliable['args']['data'] & {
+      /** This navigationStart is valid, as the documentLoaderURL isn't empty. */
+      documentLoaderURL: NonEmptyString,
+    },
+  };
+}
+
 export interface FirstContentfulPaint extends Mark {
   name: Name.MARK_FCP;
   args: Args&{
@@ -653,7 +677,10 @@ export interface MarkerEvent extends Event {
 }
 
 export function isMarkerEvent(event: Event): event is MarkerEvent {
-  return markerTypeGuards.some(fn => fn(event));
+  if (event.ph === Phase.INSTANT || event.ph === Phase.MARK) {
+    return markerTypeGuards.some(fn => fn(event));
+  }
+  return false;
 }
 
 const pageLoadEventTypeGuards = [
@@ -662,7 +689,10 @@ const pageLoadEventTypeGuards = [
 ];
 
 export function eventIsPageLoadEvent(event: Event): event is PageLoadEvent {
-  return pageLoadEventTypeGuards.some(fn => fn(event));
+  if (event.ph === Phase.INSTANT || event.ph === Phase.MARK) {
+    return pageLoadEventTypeGuards.some(fn => fn(event));
+  }
+  return false;
 }
 
 export interface LargestContentfulPaintCandidate extends Mark {
@@ -974,8 +1004,9 @@ export interface ResourceChangePriority extends Instant {
   };
 }
 
+/** Only sent for navigations. https://source.chromium.org/chromium/chromium/src/+/main:content/browser/devtools/devtools_instrumentation.cc;l=1612-1647;drc=ec7daf93d0479b758610c75f4e146fd4d2d6ed2b */
 export interface ResourceWillSendRequest extends Instant {
-  name: 'ResourceWillSendRequest';
+  name: Name.RESOURCE_WILL_SEND_REQUEST;
   args: Args&{
     data: ArgsData & {
       requestId: string,
@@ -1007,6 +1038,7 @@ export interface ResourceReceivedData extends Instant {
   };
 }
 
+/** See https://mdn.github.io/shared-assets/images/diagrams/api/performance/timestamp-diagram.svg  */
 interface ResourceReceiveResponseTimingData {
   connectEnd: MilliSeconds;
   connectStart: MilliSeconds;
@@ -1018,6 +1050,7 @@ interface ResourceReceiveResponseTimingData {
   pushStart: MilliSeconds;
   receiveHeadersEnd: MilliSeconds;
   receiveHeadersStart: MilliSeconds;
+  /** When the network service is about to handle a request, ie. just before going to the HTTP cache or going to the network for DNS/connection setup. */
   requestTime: Seconds;
   sendEnd: MilliSeconds;
   sendStart: MilliSeconds;
@@ -1449,7 +1482,7 @@ export type SyntheticConsoleTimingPair = SyntheticEventPair<ConsoleTime>;
 
 export type SyntheticAnimationPair = SyntheticEventPair<Animation>;
 
-export interface SyntheticInteractionPair extends SyntheticEventPair<EventTiming> {
+export interface SyntheticInteractionPair extends SyntheticEventPair<EventTimingBeginOrEnd> {
   // InteractionID and type are available within the beginEvent's data, but we
   // put them on the top level for ease of access.
   interactionId: number;
@@ -1923,9 +1956,10 @@ export function isCommitLoad(
   return event.name === 'CommitLoad';
 }
 
-export function isNavigationStart(
+/** @deprecated You probably want `isNavigationStart` instead. */
+export function isNavigationStartUnreliable(
     event: Event,
-    ): event is NavigationStart {
+    ): event is NavigationStartUnreliable {
   return event.name === 'navigationStart';
 }
 
@@ -1989,7 +2023,7 @@ export function isInteractiveTime(event: Event): event is InteractiveTime {
   return event.name === 'InteractiveTime';
 }
 
-export function isEventTiming(event: Event): event is EventTiming {
+export function isEventTiming(event: Event): event is EventTimingBeginOrEnd {
   return event.name === Name.EVENT_TIMING;
 }
 
@@ -2080,8 +2114,9 @@ export function isPrePaint(
   return event.name === 'PrePaint';
 }
 
-export function isNavigationStartWithURL(event: Event): event is NavigationStart {
-  return Boolean(isNavigationStart(event) && event.args.data && event.args.data.documentLoaderURL !== '');
+/** A VALID navigation start (as it has a populated documentLoaderURL) */
+export function isNavigationStart(event: Event): event is NavigationStart {
+  return Boolean(isNavigationStartUnreliable(event) && event.args.data && event.args.data.documentLoaderURL !== '');
 }
 
 export function isMainFrameViewport(
@@ -2606,6 +2641,7 @@ export function isJSInvocationEvent(event: Event): boolean {
   switch (event.name) {
     case Name.RUN_MICROTASKS:
     case Name.FUNCTION_CALL:
+    // TODO(paulirish): Define types for these Evaluate* events
     case Name.EVALUATE_SCRIPT:
     case Name.EVALUATE_MODULE:
     case Name.EVENT_DISPATCH:

package/front_end/panels/animation/AnimationTimeline.ts

@@ -860,7 +860,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
         this.#pauseButton.setEnabled(false);
       }
     } else {
-      this.setDuration(Math.max(500, group.finiteDuration() + 100));
+      this.setDuration(group.finiteDuration());
       this.#playbackRateButtons.forEach(button => {
         button.removeAttribute('disabled');
       });
@@ -966,7 +966,7 @@ export class AnimationTimeline extends UI.Widget.VBox implements
         lastDraw = gridWidth;
         const label = UI.UIUtils.createSVGChild(this.#grid, 'text', 'animation-timeline-grid-label');
         label.textContent = isScrollDriven ? `${time.toFixed(0)}px` : i18n.TimeUtilities.millisToString(time);
-        label.setAttribute('x', (gridWidth + 10).toString());
+        label.setAttribute('x', (gridWidth + 12).toString());
         label.setAttribute('y', '16');
       }
     }
@@ -1053,8 +1053,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
     this.setCurrentTimeText(this.#scrubberCurrentTime());
     if (this.#scrubberPlayer.playState.toString() === 'pending' || this.#scrubberPlayer.playState === 'running') {
       this.element.window().requestAnimationFrame(this.updateScrubber.bind(this));
-    } else if (this.#scrubberPlayer.playState === 'finished') {
-      this.clearCurrentTimeText();
     }
   }
 

package/front_end/panels/application/ApplicationPanelSidebar.test.ts

@@ -4,7 +4,6 @@
 
 import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
@@ -196,8 +195,6 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   });
 
   it('shows extension storage based on added models', async () => {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
-
     for (const useTreeView of [false, true]) {
       Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
       const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
@@ -241,8 +238,6 @@ describeWithMockConnection('ApplicationPanelSidebar', () => {
   });
 
   it('does not add extension storage if already added by another model', async () => {
-    Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER);
-
     Application.ResourcesPanel.ResourcesPanel.instance({forceNew: true});
     const sidebar = await Application.ResourcesPanel.ResourcesPanel.showAndGetSidebar();
 

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -36,7 +36,6 @@ 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 * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
@@ -281,7 +280,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   serviceWorkersTreeElement: ServiceWorkersTreeElement;
   localStorageListTreeElement: ExpandableApplicationPanelTreeElement;
   sessionStorageListTreeElement: ExpandableApplicationPanelTreeElement;
-  extensionStorageListTreeElement: ExpandableApplicationPanelTreeElement|undefined;
+  extensionStorageListTreeElement: ExpandableApplicationPanelTreeElement;
   indexedDBListTreeElement: IndexedDBTreeElement;
   interestGroupTreeElement: InterestGroupTreeElement;
   cookieListTreeElement: ExpandableApplicationPanelTreeElement;
@@ -364,17 +363,15 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     storageTreeElement.appendChild(this.sessionStorageListTreeElement);
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER)) {
-      this.extensionStorageListTreeElement =
-          new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.extensionStorage), 'extension-storage');
-      this.extensionStorageListTreeElement.setLink(
-          'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
-          Platform.DevToolsPath.UrlString);
-      const extensionStorageIcon = IconButton.Icon.create('table');
-      this.extensionStorageListTreeElement.setLeadingIcons([extensionStorageIcon]);
+    this.extensionStorageListTreeElement =
+        new ExpandableApplicationPanelTreeElement(panel, i18nString(UIStrings.extensionStorage), 'extension-storage');
+    this.extensionStorageListTreeElement.setLink(
+        'https://developer.chrome.com/docs/extensions/reference/api/storage/?utm_source=devtools' as
+        Platform.DevToolsPath.UrlString);
+    const extensionStorageIcon = IconButton.Icon.create('table');
+    this.extensionStorageListTreeElement.setLeadingIcons([extensionStorageIcon]);
 
-      storageTreeElement.appendChild(this.extensionStorageListTreeElement);
-    }
+    storageTreeElement.appendChild(this.extensionStorageListTreeElement);
 
     this.indexedDBListTreeElement = new IndexedDBTreeElement(panel);
     this.indexedDBListTreeElement.setLink(
@@ -472,14 +469,12 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
         },
         {scoped: true});
 
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.EXTENSION_STORAGE_VIEWER)) {
-      SDK.TargetManager.TargetManager.instance().observeModels(
-          ExtensionStorageModel, {
-            modelAdded: (model: ExtensionStorageModel) => this.extensionStorageModelAdded(model),
-            modelRemoved: (model: ExtensionStorageModel) => this.extensionStorageModelRemoved(model),
-          },
-          {scoped: true});
-    }
+    SDK.TargetManager.TargetManager.instance().observeModels(
+        ExtensionStorageModel, {
+          modelAdded: (model: ExtensionStorageModel) => this.extensionStorageModelAdded(model),
+          modelRemoved: (model: ExtensionStorageModel) => this.extensionStorageModelRemoved(model),
+        },
+        {scoped: true});
 
     SDK.TargetManager.TargetManager.instance().observeModels(
         IndexedDBModel, {
@@ -1190,7 +1185,6 @@ export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
     (this.parent as AppManifestTreeElement)?.showManifestView();
     this.#sectionElement.scrollIntoView();
     UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
-    Host.userMetrics.manifestSectionSelected(this.listItemElement.title);
   }
   // direct focus to the corresponding element
   onInvokeElementKeydown(event: KeyboardEvent): void {

package/front_end/panels/application/IndexedDBViews.ts

@@ -473,7 +473,10 @@ export class IDBDataView extends UI.View.SimpleView {
     this.updateData(true);
   }
 
-  update(objectStore: ObjectStore, index: Index|null): void {
+  override update(objectStore: ObjectStore|null = null, index: Index|null = null): void {
+    if (!objectStore) {
+      return;
+    }
     this.objectStore = objectStore;
     this.index = index;
 

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -285,7 +285,10 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     node.remove();
   }
 
-  update(cache: SDK.ServiceWorkerCacheModel.Cache): void {
+  override update(cache: SDK.ServiceWorkerCacheModel.Cache|null = null): void {
+    if (!cache) {
+      return;
+    }
     this.cache = cache;
     this.resetDataGrid();
     void this.updateData(true);

package/front_end/panels/application/SharedStorageItemsView.test.ts

@@ -1035,14 +1035,14 @@ describeWithMockConnection('SharedStorageItemsView', function() {
     const cellElement = getCellElementFromNodeAndColumnId(view.dataGrid, selectedNode, 'key');
     assert.exists(cellElement);
 
-    // Editing a key will cause `deleteEntry()`, `setEntry()`, `getMetadata()`, and `getEntries()` to be called.
+    // Editing a key will cause `setEntry()`, `getMetadata()`, and `getEntries()` to be called.
     const editedPromise = itemsListener.waitForItemsEditedTotal(1);
     cellElement.textContent = 'key4';
     dispatchKeyDownEvent(cellElement, {key: 'Enter'});
     await raf();
     await editedPromise;
 
-    assert.isTrue(deleteEntrySpy.calledOnceWithExactly({ownerOrigin: TEST_ORIGIN, key: ''}));
+    assert.isTrue(deleteEntrySpy.notCalled);
     assert.isTrue(
         setEntrySpy.calledOnceWithExactly({ownerOrigin: TEST_ORIGIN, key: 'key4', value: '', ignoreIfPresent: false}));
     assert.isTrue(getMetadataSpy.calledThrice);
@@ -1052,7 +1052,7 @@ describeWithMockConnection('SharedStorageItemsView', function() {
 
     assert.deepEqual(view.getEntriesForTesting(), ENTRIES_NEW_KEY);
     assert.deepEqual(itemsListener.editedEvents, [
-      {columnIdentifier: 'key', oldText: '', newText: 'key4'} as View.SharedStorageItemsDispatcher.ItemEditedEvent,
+      {columnIdentifier: 'key', oldText: null, newText: 'key4'},
     ]);
 
     // Verify that the preview loads.

package/front_end/panels/application/SharedStorageItemsView.ts

@@ -87,7 +87,7 @@ export namespace SharedStorageItemsDispatcher {
 
   export interface ItemEditedEvent {
     columnIdentifier: string;
-    oldText: string;
+    oldText: string|null;
     newText: string;
   }
 
@@ -241,7 +241,7 @@ export class SharedStorageItemsView extends StorageItemsView {
 
   async #editingCallback(
       editingNode: DataGrid.DataGrid.DataGridNode<Protocol.Storage.SharedStorageEntry>, columnIdentifier: string,
-      oldText: string, newText: string): Promise<void> {
+      oldText: string|null, newText: string): Promise<void> {
     if (columnIdentifier === 'key' && newText === '') {
       // The Shared Storage backend does not currently allow '' as a key, so we only set a new entry with a new key if its new key is nonempty.
       await this.refreshItems();
@@ -249,7 +249,9 @@ export class SharedStorageItemsView extends StorageItemsView {
       return;
     }
     if (columnIdentifier === 'key') {
-      await this.#sharedStorage.deleteEntry(oldText);
+      if (oldText !== null) {
+        await this.#sharedStorage.deleteEntry(oldText);
+      }
       await this.#sharedStorage.setEntry(newText, editingNode.data.value || '', false);
     } else {
       // The Shared Storage backend does not currently allow '' as a key, so we use ' ' as the default key instead.

package/front_end/panels/application/StorageView.test.ts

@@ -73,7 +73,7 @@ describeWithMockConnection('StorageView', () => {
     const container = view.element.shadowRoot?.querySelector('.clear-storage-header') || null;
     assert.instanceOf(container, HTMLDivElement);
     const customQuotaCheckbox =
-        container.shadowRoot!.querySelector('.quota-override-row span')!.shadowRoot!.querySelector(
+        container.shadowRoot!.querySelector('.quota-override-row dt-checkbox')!.shadowRoot!.querySelector(
             '[title="Simulate custom storage quota"]');
     assert.instanceOf(customQuotaCheckbox, HTMLInputElement);
     customQuotaCheckbox.checked = true;

package/front_end/panels/application/StorageView.ts

@@ -507,8 +507,8 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       return;
     }
     const quotaOverridden = response.overrideActive;
-    const quotaAsString = Platform.NumberUtilities.bytesToString(response.quota);
-    const usageAsString = Platform.NumberUtilities.bytesToString(response.usage);
+    const quotaAsString = i18n.ByteUtilities.bytesToString(response.quota);
+    const usageAsString = i18n.ByteUtilities.bytesToString(response.usage);
     const formattedQuotaAsString = i18nString(UIStrings.storageWithCustomMarker, {PH1: quotaAsString});
     const quota =
         quotaOverridden ? UI.Fragment.Fragment.build`<b>${formattedQuotaAsString}</b>`.element() : quotaAsString;
@@ -550,7 +550,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.pieChart.data = {
       chartName: i18nString(UIStrings.storageUsage),
       size: 110,
-      formatter: Platform.NumberUtilities.bytesToString,
+      formatter: i18n.ByteUtilities.bytesToString,
       showLegend: true,
       total,
       slices,

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

@@ -5,7 +5,6 @@
 import '../../../ui/components/report_view/report_view.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
@@ -216,7 +215,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
       ${this.key(i18nString(UIStrings.durability))}
       ${this.value(durability)}
       ${this.key(i18nString(UIStrings.quota))}
-      ${this.value(Platform.NumberUtilities.bytesToString(quota))}
+      ${this.value(i18n.ByteUtilities.bytesToString(quota))}
       ${this.key(i18nString(UIStrings.expiration))}
       ${this.value(this.#getExpirationString())}`;
   }

package/front_end/panels/application/resourcesSidebar.css

@@ -6,7 +6,7 @@
 
 .tree-outline {
   li.storage-group-list-item,
-  li.storage-group-list-item:not(:has(span[is="dt-checkbox"])) {
+  li.storage-group-list-item:not(:has(dt-checkbox)) {
     padding: 0 var(--sys-size-8) 0 var(--sys-size-3);
 
     &::before {

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -249,7 +249,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     return null;
   }
 
-  private update(): void {
+  override update(): void {
     const target = UI.Context.Context.instance().flavor(SDK.Target.Target);
     const debuggerModel = target ? target.model(SDK.DebuggerModel.DebuggerModel) : null;
     const details = debuggerModel ? debuggerModel.debuggerPausedDetails() : null;

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -349,7 +349,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     this.update();
   }
 
-  private update(): void {
+  override update(): void {
     const details = UI.Context.Context.instance().flavor(SDK.DebuggerModel.DebuggerPausedDetails);
     if (this.#highlightedBreakpoint) {
       const oldHighlightedBreakpoint = this.#highlightedBreakpoint;