chrome-devtools-frontend 1.0.1669021 → 1.0.1672388

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

@@ -423,23 +423,65 @@ const UIStringsNotTranslate = {
   inspectedFileNames: 'Inspected file names',
 } as const;
 
+/**
+ * Payload and confirmation handler for side-effect operations requiring user approval.
+ */
+export interface ConfirmSideEffectDialog {
+  /**
+   * Human-readable description explaining the pending side-effect action, or null if omitted.
+   */
+  description: string|null;
+  /**
+   * Callback invoked when the user resolves the dialog (true to confirm, false to decline).
+   */
+  onAnswer: (result: boolean) => void;
+}
+
+/**
+ * Represents the execution state of an individual agent action step:
+ * - `in_progress`: The step is actively querying context or parsing stream content.
+ * - `needs_approval`: The step is awaiting user confirmation for a side-effecting operation.
+ * - `canceled`: The step was canceled before execution.
+ * - `completed`: The step completed execution successfully.
+ */
+export type StepState = {
+  type: 'in_progress',
+}|{type: 'needs_approval', sideEffectDialog: ConfirmSideEffectDialog}|{type: 'canceled'}|{type: 'completed'};
+
+/**
+ * Represents an individual execution step within an agent response.
+ */
 export interface Step {
-  isLoading: boolean;
+  /**
+   * The current lifecycle state of this step.
+   */
+  state: StepState;
+  /**
+   * The agent's intermediate thought or rationale for taking this step.
+   */
   thought?: string;
+  /**
+   * The human-readable title describing the step action.
+   */
   title?: string;
+  /**
+   * Executable JavaScript code generated or executed in this step.
+   */
   code?: string;
+  /**
+   * Raw string output or data returned by code execution.
+   */
   output?: string;
+  /**
+   * Visual widgets rendered alongside this step (e.g. core web vitals, network traces).
+   */
   widgets?: AiWidget[];
-  canceled?: boolean;
-  requestApproval?: ConfirmSideEffectDialog;
+  /**
+   * Context item details gathered or inspected during this step.
+   */
   contextDetails?: [AiAssistanceModel.AiAgent.ContextDetail, ...AiAssistanceModel.AiAgent.ContextDetail[]];
 }
 
-export interface ConfirmSideEffectDialog {
-  description: string|null;
-  onAnswer: (result: boolean) => void;
-}
-
 export const enum ChatMessageEntity {
   MODEL = 'model',
   USER = 'user',
@@ -651,7 +693,7 @@ export function titleForStep(step: Step): string {
 }
 
 function renderTitle(step: Step): Lit.LitTemplate {
-  const paused = step.requestApproval && !step.canceled ?
+  const paused = step.state.type === 'needs_approval' ?
       html`<span class="paused">${lockedString(UIStringsNotTranslate.paused)}: </span>` :
       Lit.nothing;
 
@@ -665,8 +707,9 @@ function renderStepCode(step: Step): Lit.LitTemplate {
 
   // If there is no "output" yet, it means we didn't execute the code yet (e.g. maybe it is still waiting for confirmation from the user)
   // thus we show "Code to execute" text rather than "Code executed" text on the heading of the code block.
-  const codeHeadingText = (step.output && !step.canceled) ? lockedString(UIStringsNotTranslate.codeExecuted) :
-                                                            lockedString(UIStringsNotTranslate.codeToExecute);
+  const codeHeadingText = (step.output && step.state.type !== 'canceled') ?
+      lockedString(UIStringsNotTranslate.codeExecuted) :
+      lockedString(UIStringsNotTranslate.codeToExecute);
 
   // If there is output, we don't show notice on this code block and instead show
   // it in the data returned code block.
@@ -705,7 +748,8 @@ function renderStepDetails({
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
-  const sideEffects = isLast && step.requestApproval ? renderSideEffectConfirmationUi(step) : Lit.nothing;
+  const sideEffects =
+      isLast && step.state.type === 'needs_approval' ? renderSideEffectConfirmationUi(step) : Lit.nothing;
   const thought = step.thought ? html`<p>${renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` : Lit.nothing;
 
   // clang-format off
@@ -781,12 +825,12 @@ function renderWalkthroughSidebarButton(
       <devtools-button
         .variant=${variant}
         .size=${Buttons.Button.Size.SMALL}
-        .title=${lastStep.isLoading ? titleForStep(lastStep) : title}
+        .title=${lastStep.state.type === 'in_progress' ? titleForStep(lastStep) : title}
         .accessibleLabel=${accessibleLabel}
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
-          if(walkthrough.activeSidebarMessage?.id === input.message.id && walkthrough.isExpanded) {
+          if (walkthrough.activeSidebarMessage?.id === input.message.id && walkthrough.isExpanded) {
             walkthrough.onToggle(false, message as ModelChatMessage);
           } else {
             // Can't just toggle the visibility here; we need to ensure we
@@ -848,7 +892,7 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
 }
 
 function renderSideEffectStepsUI(input: ChatMessageViewInput, steps: Step[]): Lit.LitTemplate {
-  const sideEffectSteps = steps.filter(s => s.requestApproval);
+  const sideEffectSteps = steps.filter(s => s.state.type === 'needs_approval' || s.state.type === 'canceled');
   if (sideEffectSteps.length === 0) {
     return Lit.nothing;
   }
@@ -858,7 +902,6 @@ function renderSideEffectStepsUI(input: ChatMessageViewInput, steps: Step[]): Li
       <div class="side-effect-container">
         ${renderStep({
            step,
-           isLoading: input.isLoading,
            markdownRenderer: input.markdownRenderer,
            isLast: true,
         })}
@@ -867,25 +910,27 @@ function renderSideEffectStepsUI(input: ChatMessageViewInput, steps: Step[]): Li
   // clang-format on
 }
 
-function renderStepBadge({step, isLoading, isLast}: {
+function renderStepBadge({step, isLast}: {
   step: Step,
-  isLoading: boolean,
   isLast: boolean,
 }): Lit.LitTemplate {
-  if (isLoading && isLast && !step.requestApproval) {
+  if (isLast && step.state.type === 'in_progress') {
     return html`<devtools-spinner aria-label=${lockedString(UIStringsNotTranslate.inProgress)}></devtools-spinner>`;
   }
 
   let iconName = 'checkmark';
   let ariaLabel: string|undefined = lockedString(UIStringsNotTranslate.completed);
   let role: 'button'|undefined = 'button';
-  if (step.canceled) {
-    ariaLabel = lockedString(UIStringsNotTranslate.aborted);
-    iconName = 'cross';
-  } else if (isLast && step.requestApproval) {
+  if (step.state.type === 'needs_approval') {
+    if (!isLast) {
+      console.error('A step in needs_approval state must be the last step.');
+    }
     role = undefined;
     ariaLabel = lockedString(UIStringsNotTranslate.paused);
     iconName = 'pause-circle';
+  } else if (step.state.type === 'canceled') {
+    ariaLabel = lockedString(UIStringsNotTranslate.aborted);
+    iconName = 'cross';
   }
 
   return html`<devtools-icon
@@ -896,26 +941,25 @@ function renderStepBadge({step, isLoading, isLast}: {
     ></devtools-icon>`;
 }
 
-export function renderStep({step, isLoading, markdownRenderer, isLast}: {
+export function renderStep({step, markdownRenderer, isLast}: {
   step: Step,
-  isLoading: boolean,
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
   const stepClasses = Lit.Directives.classMap({
     step: true,
-    empty: !step.thought && !step.code && !step.contextDetails && !step.requestApproval,
-    paused: Boolean(step.requestApproval && !step.canceled),
-    canceled: Boolean(step.canceled),
+    empty: !step.thought && !step.code && !step.contextDetails && step.state.type !== 'needs_approval',
+    paused: step.state.type === 'needs_approval',
+    canceled: step.state.type === 'canceled',
   });
   // clang-format off
   return html`
     <details class=${stepClasses}
       jslog=${VisualLogging.expand('step').track({click: true})}
-      .open=${Boolean(step.requestApproval)}>
+      .open=${step.state.type === 'needs_approval'}>
       <summary>
         <div class="summary">
-          ${renderStepBadge({ step, isLoading, isLast })}
+          ${renderStepBadge({ step, isLast })}
           ${renderTitle(step)}
           <devtools-icon
             class="arrow"
@@ -1755,16 +1799,17 @@ async function renderWidgets(
 }
 
 function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
-  if (!step.requestApproval || step.canceled) {
+  if (step.state.type !== 'needs_approval') {
     return Lit.nothing;
   }
+  const dialog = step.state.sideEffectDialog;
 
   // clang-format off
   return html`<div
     class="side-effect-confirmation"
     jslog=${VisualLogging.section('side-effect-confirmation')}
   >
-    ${step.requestApproval.description ? html`<p>${step.requestApproval.description}</p>` : Lit.nothing}
+    ${dialog.description ? html`<p>${dialog.description}</p>` : Lit.nothing}
     <div class="side-effect-buttons-container">
       <devtools-button
         .data=${
@@ -1773,7 +1818,7 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
             jslogContext: 'decline-execute-code',
           } as Buttons.Button.ButtonData
         }
-        @click=${() => step.requestApproval?.onAnswer(false)}
+        @click=${() => dialog.onAnswer(false)}
       >${lockedString(
         UIStringsNotTranslate.declineActionRequestApproval,
       )}</devtools-button>
@@ -1785,7 +1830,7 @@ function renderSideEffectConfirmationUi(step: Step): Lit.LitTemplate {
             iconName: 'play',
           } as Buttons.Button.ButtonData
         }
-        @click=${() => step.requestApproval?.onAnswer(true)}
+        @click=${() => dialog.onAnswer(true)}
       >${
           lockedString(UIStringsNotTranslate.confirmActionRequestApproval)
       }</devtools-button>

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

@@ -206,7 +206,7 @@ export const DEFAULT_VIEW = (
   // Ensure that we render steps but not ones that need approval; a
   // step that needs approval is always rendered into the main chat
   // view regardless of if the walkthrough is open or not.
-  const renderableSteps = allSteps.filter(s => !s.requestApproval);
+  const renderableSteps = allSteps.filter(s => s.state.type !== 'needs_approval');
 
   // clang-format off
   const stepsOutput = renderableSteps.length > 0 ? html`
@@ -222,7 +222,6 @@ export const DEFAULT_VIEW = (
             <div class="step-wrapper">
               ${renderStep({
                 step,
-                isLoading: input.isLoading,
                 markdownRenderer: input.markdownRenderer,
                 isLast: index === renderableSteps.length - 1,
               })}

package/front_end/panels/ai_assistance/components/walkthroughView.css

@@ -99,7 +99,7 @@
 
   .inline-wrapper {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--sys-size-2);
     justify-content: flex-start;
 

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -80,13 +80,6 @@ import type {ResourcesPanel} from './ResourcesPanel.js';
 import resourcesSidebarStyles from './resourcesSidebar.css.js';
 import {ServiceWorkerCacheTreeElement} from './ServiceWorkerCacheTreeElement.js';
 import {ServiceWorkersView} from './ServiceWorkersView.js';
-import {SharedStorageListTreeElement} from './SharedStorageListTreeElement.js';
-import {
-  Events as SharedStorageModelEvents,
-  type SharedStorageForOrigin,
-  SharedStorageModel,
-} from './SharedStorageModel.js';
-import {SharedStorageTreeElement} from './SharedStorageTreeElement.js';
 import {StorageBucketsTreeParentElement} from './StorageBucketsTreeElement.js';
 import {StorageView} from './StorageView.js';
 import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
@@ -322,20 +315,6 @@ function nameForExtensionStorageArea(storageArea: Protocol.Extensions.StorageAre
   }
 }
 
-export namespace SharedStorageTreeElementDispatcher {
-  export const enum Events {
-    SHARED_STORAGE_TREE_ELEMENT_ADDED = 'SharedStorageTreeElementAdded',
-  }
-
-  export interface SharedStorageTreeElementAddedEvent {
-    origin: string;
-  }
-
-  export interface EventTypes {
-    [Events.SHARED_STORAGE_TREE_ELEMENT_ADDED]: SharedStorageTreeElementAddedEvent;
-  }
-}
-
 export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.TargetManager.Observer {
   panel: ResourcesPanel;
   private readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
@@ -348,7 +327,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   cookieListTreeElement: ExpandableApplicationPanelTreeElement;
   trustTokensTreeElement: TrustTokensTreeElement;
   cacheStorageListTreeElement: ServiceWorkerCacheTreeElement;
-  sharedStorageListTreeElement: SharedStorageListTreeElement;
   storageBucketsTreeElement: StorageBucketsTreeParentElement|undefined;
   private backForwardCacheListTreeElement?: BackForwardCacheTreeElement;
   backgroundFetchTreeElement: BackgroundServiceTreeElement;
@@ -369,13 +347,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   private extensionIdToStorageTreeParentElement: Map<string, ExtensionStorageTreeParentElement>;
   private extensionStorageModels: ExtensionStorageModel[];
   private extensionStorageTreeElements: Map<string, ExtensionStorageTreeElement>;
-  private sharedStorageTreeElements: Map<string, SharedStorageTreeElement>;
   private domains: Record<string, boolean>;
   // Holds main frame target.
   private target?: SDK.Target.Target;
   private previousHoveredElement?: FrameTreeElement;
-  readonly sharedStorageTreeElementDispatcher:
-      Common.ObjectWrapper.ObjectWrapper<SharedStorageTreeElementDispatcher.EventTypes>;
 
   constructor(panel: ResourcesPanel) {
     super();
@@ -481,9 +456,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.trustTokensTreeElement = new TrustTokensTreeElement(panel);
     storageTreeElement.appendChild(this.trustTokensTreeElement);
 
-    this.sharedStorageListTreeElement = new SharedStorageListTreeElement(panel);
-    storageTreeElement.appendChild(this.sharedStorageListTreeElement);
-
     this.cacheStorageListTreeElement = new ServiceWorkerCacheTreeElement(panel);
     storageTreeElement.appendChild(this.cacheStorageListTreeElement);
 
@@ -540,7 +512,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.extensionIdToStorageTreeParentElement = new Map();
     this.extensionStorageTreeElements = new Map();
     this.extensionStorageModels = [];
-    this.sharedStorageTreeElements = new Map();
     this.domains = {};
 
     this.sidebarTree.contentElement.addEventListener('mousemove', this.onmousemove.bind(this), false);
@@ -576,24 +547,12 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
           modelRemoved: (model: IndexedDBModel) => this.indexedDBModelRemoved(model),
         },
         {scoped: true});
-    SDK.TargetManager.TargetManager.instance().observeModels(
-        SharedStorageModel, {
-          modelAdded: (model: SharedStorageModel) => this.sharedStorageModelAdded(model).catch(err => {
-            console.error(err);
-          }),
-          modelRemoved: (model: SharedStorageModel) => this.sharedStorageModelRemoved(model),
-        },
-        {scoped: true});
     SDK.TargetManager.TargetManager.instance().observeModels(
         SDK.StorageBucketsModel.StorageBucketsModel, {
           modelAdded: (model: SDK.StorageBucketsModel.StorageBucketsModel) => this.storageBucketsModelAdded(model),
           modelRemoved: (model: SDK.StorageBucketsModel.StorageBucketsModel) => this.storageBucketsModelRemoved(model),
         },
         {scoped: true});
-
-    this.sharedStorageTreeElementDispatcher =
-        new Common.ObjectWrapper.ObjectWrapper<SharedStorageTreeElementDispatcher.EventTypes>();
-
     this.contentElement.style.contain = 'layout style';
   }
 
@@ -708,27 +667,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   private indexedDBModelRemoved(model: IndexedDBModel): void {
     this.indexedDBListTreeElement.removeIndexedDBForModel(model);
   }
-
-  private async sharedStorageModelAdded(model: SharedStorageModel): Promise<void> {
-    await model.enable();
-    for (const storage of model.storages()) {
-      await this.addSharedStorage(storage);
-    }
-    model.addEventListener(SharedStorageModelEvents.SHARED_STORAGE_ADDED, this.sharedStorageAdded, this);
-    model.addEventListener(SharedStorageModelEvents.SHARED_STORAGE_REMOVED, this.sharedStorageRemoved, this);
-    model.addEventListener(SharedStorageModelEvents.SHARED_STORAGE_ACCESS, this.sharedStorageAccess, this);
-  }
-
-  private sharedStorageModelRemoved(model: SharedStorageModel): void {
-    model.disable();
-    for (const storage of model.storages()) {
-      this.removeSharedStorage(storage);
-    }
-    model.removeEventListener(SharedStorageModelEvents.SHARED_STORAGE_ADDED, this.sharedStorageAdded, this);
-    model.removeEventListener(SharedStorageModelEvents.SHARED_STORAGE_REMOVED, this.sharedStorageRemoved, this);
-    model.removeEventListener(SharedStorageModelEvents.SHARED_STORAGE_ACCESS, this.sharedStorageAccess, this);
-  }
-
   private storageBucketsModelAdded(model: SDK.StorageBucketsModel.StorageBucketsModel): void {
     model.enable();
   }
@@ -787,6 +725,15 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     if (frame.isOutermostFrame()) {
       this.reset();
+      const selectedElement = this.sidebarTree.selectedTreeElement;
+      if (selectedElement instanceof ExpandableApplicationPanelTreeElement) {
+        // Only update AI Assistance storage context for expandable category headers,
+        // as all other tree elements are re-rendered on reset.
+        const item = selectedElement.createGenericStorageAiContext();
+        if (item) {
+          UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, item);
+        }
+      }
     }
     this.addCookieDocument(frame);
   }
@@ -962,50 +909,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.extensionStorageTreeElements.delete(extensionStorage.key);
   }
 
-  private async sharedStorageAdded(event: Common.EventTarget.EventTargetEvent<SharedStorageForOrigin>): Promise<void> {
-    await this.addSharedStorage(event.data);
-  }
-
-  private async addSharedStorage(sharedStorage: SharedStorageForOrigin): Promise<void> {
-    const sharedStorageTreeElement = await SharedStorageTreeElement.createElement(this.panel, sharedStorage);
-
-    // A tree element for `sharedStorage.securityOrigin` may have been added while we were waiting for `sharedStorageTreeElement` to be created.
-    if (this.sharedStorageTreeElements.has(sharedStorage.securityOrigin)) {
-      return;
-    }
-    this.sharedStorageTreeElements.set(sharedStorage.securityOrigin, sharedStorageTreeElement);
-    this.sharedStorageListTreeElement.appendChild(sharedStorageTreeElement);
-    this.sharedStorageTreeElementDispatcher.dispatchEventToListeners(
-        SharedStorageTreeElementDispatcher.Events.SHARED_STORAGE_TREE_ELEMENT_ADDED,
-        {origin: sharedStorage.securityOrigin});
-  }
-
-  private sharedStorageRemoved(event: Common.EventTarget.EventTargetEvent<SharedStorageForOrigin>): void {
-    this.removeSharedStorage(event.data);
-  }
-
-  private removeSharedStorage(sharedStorage: SharedStorageForOrigin): void {
-    const treeElement = this.sharedStorageTreeElements.get(sharedStorage.securityOrigin);
-    if (!treeElement) {
-      return;
-    }
-    const wasSelected = treeElement.selected;
-    const parentListTreeElement = treeElement.parent;
-    if (parentListTreeElement) {
-      parentListTreeElement.removeChild(treeElement);
-      parentListTreeElement.setExpandable(parentListTreeElement.childCount() > 0);
-      if (wasSelected) {
-        parentListTreeElement.select();
-      }
-    }
-    this.sharedStorageTreeElements.delete(sharedStorage.securityOrigin);
-  }
-
-  private sharedStorageAccess(event: Common.EventTarget.EventTargetEvent<Protocol.Storage.SharedStorageAccessedEvent>):
-      void {
-    this.sharedStorageListTreeElement.addEvent(event.data);
-  }
-
   async showResource(resource: SDK.Resource.Resource, line?: number, column?: number): Promise<void> {
     await this.resourcesSection.revealResource(resource, line, column);
   }

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -133,7 +133,7 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
     this.categoryDescription = categoryDescription;
   }
 
-  protected createGenericStorageAiContext(): AiAssistance.StorageItem.StorageItem|null {
+  createGenericStorageAiContext(): AiAssistance.StorageItem.StorageItem|null {
     const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     const mainPageOrigin =
         target?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(target.inspectedURL()) : '';

package/front_end/panels/application/application.ts

@@ -31,11 +31,6 @@ import * as ServiceWorkerCacheTreeElement from './ServiceWorkerCacheTreeElement.
 import * as ServiceWorkerCacheViews from './ServiceWorkerCacheViews.js';
 import * as ServiceWorkersView from './ServiceWorkersView.js';
 import * as ServiceWorkerUpdateCycleView from './ServiceWorkerUpdateCycleView.js';
-import * as SharedStorageEventsView from './SharedStorageEventsView.js';
-import * as SharedStorageItemsView from './SharedStorageItemsView.js';
-import * as SharedStorageListTreeElement from './SharedStorageListTreeElement.js';
-import * as SharedStorageModel from './SharedStorageModel.js';
-import * as SharedStorageTreeElement from './SharedStorageTreeElement.js';
 import * as StorageBucketsTreeElement from './StorageBucketsTreeElement.js';
 import * as StorageItemsToolbar from './StorageItemsToolbar.js';
 import * as StorageView from './StorageView.js';
@@ -74,11 +69,6 @@ export {
   ServiceWorkerCacheViews,
   ServiceWorkersView,
   ServiceWorkerUpdateCycleView,
-  SharedStorageEventsView,
-  SharedStorageItemsView,
-  SharedStorageListTreeElement,
-  SharedStorageModel,
-  SharedStorageTreeElement,
   StorageBucketsTreeElement,
   StorageItemsToolbar,
   StorageView,

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

@@ -11,8 +11,6 @@ import * as PermissionsPolicySection from './PermissionsPolicySection.js';
 import * as ProtocolHandlersView from './ProtocolHandlersView.js';
 import * as ReportsGrid from './ReportsGrid.js';
 import * as ServiceWorkerRouterView from './ServiceWorkerRouterView.js';
-import * as SharedStorageAccessGrid from './SharedStorageAccessGrid.js';
-import * as SharedStorageMetadataView from './SharedStorageMetadataView.js';
 import * as StorageMetadataView from './StorageMetadataView.js';
 import * as TrustTokensView from './TrustTokensView.js';
 
@@ -26,8 +24,6 @@ export {
   ProtocolHandlersView,
   ReportsGrid,
   ServiceWorkerRouterView,
-  SharedStorageAccessGrid,
-  SharedStorageMetadataView,
   StorageMetadataView,
   TrustTokensView,
 };

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -89,10 +89,6 @@ const UIStrings = {
    * @description Category of event listener breakpoints for script events.
    */
   script: 'Script',
-  /**
-   * @description Category of event listener breakpoints for shared storage worklet events.
-   */
-  sharedStorageWorklet: 'Shared storage worklet',
   /**
    * @description Category of event listener breakpoints for timer events.
    */
@@ -386,7 +382,6 @@ const LOCALIZED_CATEGORIES: Record<SDK.CategorizedBreakpoint.Category, () => Pla
   [SDK.CategorizedBreakpoint.Category.PICTURE_IN_PICTURE]: i18nLazyString(UIStrings.pictureinpicture),
   [SDK.CategorizedBreakpoint.Category.POINTER]: i18nLazyString(UIStrings.pointer),
   [SDK.CategorizedBreakpoint.Category.SCRIPT]: i18nLazyString(UIStrings.script),
-  [SDK.CategorizedBreakpoint.Category.SHARED_STORAGE_WORKLET]: i18nLazyString(UIStrings.sharedStorageWorklet),
   [SDK.CategorizedBreakpoint.Category.TIMER]: i18nLazyString(UIStrings.timer),
   [SDK.CategorizedBreakpoint.Category.TOUCH]: i18nLazyString(UIStrings.touch),
   [SDK.CategorizedBreakpoint.Category.TRUSTED_TYPE_VIOLATION]: i18nLazyString(UIStrings.trustedTypeViolations),

package/front_end/panels/browser_debugger/EventListenerBreakpointsSidebarPane.ts

@@ -7,25 +7,19 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {CategorizedBreakpointsSidebarPane} from './CategorizedBreakpointsSidebarPane.js';
 
-let eventListenerBreakpointsSidebarPaneInstance: EventListenerBreakpointsSidebarPane;
-
 export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsSidebarPane {
-  private constructor() {
+  readonly #eventBreakpointsManager: SDK.EventBreakpointsModel.EventBreakpointsManager;
+
+  constructor(eventBreakpointsManager: SDK.EventBreakpointsModel.EventBreakpointsManager) {
     let breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[] =
         SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints();
-    const nonDomBreakpoints = SDK.EventBreakpointsModel.EventBreakpointsManager.instance().eventListenerBreakpoints();
+    const nonDomBreakpoints = eventBreakpointsManager.eventListenerBreakpoints();
     breakpoints = breakpoints.concat(nonDomBreakpoints);
 
     super(
         breakpoints, `${VisualLogging.section('sources.event-listener-breakpoints')}`,
         'sources.event-listener-breakpoints');
-  }
-
-  static instance(): EventListenerBreakpointsSidebarPane {
-    if (!eventListenerBreakpointsSidebarPaneInstance) {
-      eventListenerBreakpointsSidebarPaneInstance = new EventListenerBreakpointsSidebarPane();
-    }
-    return eventListenerBreakpointsSidebarPaneInstance;
+    this.#eventBreakpointsManager = eventBreakpointsManager;
   }
 
   override getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
@@ -39,6 +33,6 @@ export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsS
     if (domBreakpoint) {
       return domBreakpoint;
     }
-    return SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpoint(auxData);
+    return this.#eventBreakpointsManager.resolveEventListenerBreakpoint(auxData);
   }
 }

package/front_end/panels/browser_debugger/browser_debugger-meta.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -116,10 +117,11 @@ async function loadSourcesModule(): Promise<typeof Sources> {
 }
 
 UI.ViewManager.registerViewExtension({
-  async loadView() {
+  loadView: Common.Lazy.lazy(async universe => {
     const BrowserDebugger = await loadBrowserDebuggerModule();
-    return BrowserDebugger.EventListenerBreakpointsSidebarPane.EventListenerBreakpointsSidebarPane.instance();
-  },
+    return new BrowserDebugger.EventListenerBreakpointsSidebarPane.EventListenerBreakpointsSidebarPane(
+        universe.eventBreakpointsManager);
+  }),
   id: 'sources.event-listener-breakpoints',
   location: UI.ViewManager.ViewLocationValues.SOURCES_SIDEBAR_BOTTOM,
   commandPrompt: i18nLazyString(UIStrings.showEventListenerBreakpoints),