chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

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

@@ -16,7 +16,7 @@ import {Directives, html, nothing, render} from '../../../ui/lit/lit.js';
 import {PatchWidget} from '../PatchWidget.js';
 
 import {ChatInput} from './ChatInput.js';
-import {ChatMessage, type Message, type ModelChatMessage} from './ChatMessage.js';
+import {ChatMessage, ChatMessageEntity, type Message, type ModelChatMessage} from './ChatMessage.js';
 import chatViewStyles from './chatView.css.js';
 import {ExportForAgentsDialog} from './ExportForAgentsDialog.js';
 
@@ -47,6 +47,33 @@ const lockedString = i18n.i18n.lockedString;
 
 const SCROLL_ROUNDING_OFFSET = 1;
 
+/**
+ * Determines which message should display the CSS change summary.
+ *
+ * If the AI is actively loading a new response, the summary is anchored to the
+ * last completed model response. Otherwise, it's anchored to the latest model
+ * message.
+ */
+export function getCSSChangeSummaryMessage(messages: Message[], isLoading: boolean): Message|undefined {
+  const modelMessages = messages.filter(m => m.entity === ChatMessageEntity.MODEL);
+  const lastModelMessage = modelMessages.at(-1);
+
+  if (!lastModelMessage) {
+    return undefined;
+  }
+
+  // If we are loading and the last message in the list is the one being loaded,
+  // we anchor the summary to the previous model message.
+  // If the last message is NOT a model message (e.g. it's the user's follow-up),
+  // we keep the summary on the current last model message until the new response
+  // starts appearing.
+  if (isLoading && messages.at(-1) === lastModelMessage) {
+    return modelMessages.at(-2);
+  }
+
+  return lastModelMessage;
+}
+
 interface ViewOutput {
   mainElement?: HTMLElement;
   input?: UI.Widget.WidgetElement<ChatInput>;
@@ -119,6 +146,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
 
   const shouldShowPatchWidget = !hasAiV2 && !input.isLoading;
 
+  const cssChangeSummaryMessage = getCSSChangeSummaryMessage(input.messages, input.isLoading);
+
   // clang-format off
     render(html`
       <style>${chatViewStyles}</style>
@@ -126,15 +155,21 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         <main @scroll=${input.handleScroll} ${ref(element => { output.mainElement = element as HTMLElement; } )}>
           ${input.messages.length > 0 ? html`
             <div class="messages-container" ${ref(input.handleMessageContainerRef)}>
-              ${repeat(input.messages, message =>
-                widget(ChatMessage, {
+              ${repeat(input.messages, (message, index) => {
+                const prevMessage = index > 0 ? input.messages[index - 1] : null;
+                const prompt = (message.entity === ChatMessageEntity.MODEL && prevMessage?.entity === ChatMessageEntity.USER) ?
+                    prevMessage.text :
+                    '';
+                return widget(ChatMessage, {
                   message,
-                  isLoading: input.isLoading && input.messages.at(-1) === message,
+                  isLoading: input.isLoading && index === input.messages.length - 1,
                   isReadOnly: input.isReadOnly,
                   canShowFeedbackForm: input.canShowFeedbackForm,
                   markdownRenderer: input.markdownRenderer,
-                  isLastMessage: input.messages.at(-1) === message,
-                  isFirstMessage: input.messages.at(0) === message,
+                  isLastMessage: index === input.messages.length - 1,
+                  isFirstMessage: index === 0,
+                  prompt,
+                  shouldShowCSSChangeSummary: message === cssChangeSummaryMessage,
                   onSuggestionClick: input.handleSuggestionClick,
                   onFeedbackSubmit: input.onFeedbackSubmit,
                   onCopyResponseClick: input.onCopyResponseClick,
@@ -143,8 +178,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   walkthrough: {
                     ...input.walkthrough,
                   }
-                })
-              )}
+                });
+              })}
               ${shouldShowPatchWidget ? widget(PatchWidget, {
                 changeSummary: input.changeSummary ?? '',
                 changeManager: input.changeManager,

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

@@ -99,6 +99,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             value="prompt"
             name="export-state"
             .checked=${isPrompt}
+            autofocus
             aria-label=${i18nString(UIStrings.asPrompt)}
             @change=${() => input.onStateChange(StateType.PROMPT)}
           >

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

@@ -0,0 +1,74 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * Truncates a string to a target length, attempting to cut at the nearest word boundary (space).
+ * If the string is truncated, it returns the truncated string and the number of characters removed.
+ *
+ * @param text The string to truncate.
+ * @param targetLength The desired length of the string.
+ * @returns An object containing the potentially truncated text and the number of characters removed.
+ */
+function smartTruncate(text: string, targetLength: number): {truncatedText: string, moreCharacters: number} {
+  if (text.length <= targetLength) {
+    return {truncatedText: text, moreCharacters: 0};
+  }
+
+  const lastSpaceBefore = text.lastIndexOf(' ', targetLength);
+  const firstSpaceAfter = text.indexOf(' ', targetLength);
+
+  let cutIndex = targetLength;
+  if (lastSpaceBefore === -1 && firstSpaceAfter === -1) {
+    cutIndex = targetLength;
+  } else if (lastSpaceBefore === -1) {
+    cutIndex = firstSpaceAfter;
+  } else if (firstSpaceAfter === -1) {
+    cutIndex = lastSpaceBefore;
+  } else {
+    // Both lastSpaceBefore and firstSpaceAfter exist.
+    // Choose the one that is closer to the targetLength.
+    const distanceToSpaceBefore = targetLength - lastSpaceBefore;
+    const distanceToSpaceAfter = firstSpaceAfter - targetLength;
+    cutIndex = distanceToSpaceBefore <= distanceToSpaceAfter ? lastSpaceBefore : firstSpaceAfter;
+  }
+
+  let truncatedText = text;
+  let moreCharacters = 0;
+  if (cutIndex < text.length) {
+    truncatedText = text.slice(0, cutIndex);
+    moreCharacters = text.length - cutIndex;
+  }
+
+  return {truncatedText, moreCharacters};
+}
+
+/**
+ * Returns a label for the walkthrough toggle button.
+ * The label includes the current action (Show/Hide) and a smart-truncated version of the prompt.
+ */
+export function getButtonLabel(input: {
+  isExpanded: boolean,
+  isLoading: boolean,
+  hasWidgets: boolean,
+  prompt: string,
+  stepTitle?: string,
+}): string {
+  let labelBase = '';
+  if (input.isLoading && !input.isExpanded && input.stepTitle) {
+    labelBase = input.stepTitle;
+  } else {
+    const action = input.isExpanded ? 'Hide' : 'Show';
+    const type = input.hasWidgets ? 'AI walkthrough' : 'thinking';
+    labelBase = `${action} ${type}`;
+  }
+
+  if (input.isLoading) {
+    return `Loading: ${labelBase}`;
+  }
+
+  const TARGET_LENGTH = 50;
+  const {truncatedText, moreCharacters} = smartTruncate(input.prompt, TARGET_LENGTH);
+  const promptSuffix = moreCharacters > 0 ? ` (and ${moreCharacters} more characters)` : '';
+  return `${labelBase} for prompt ${truncatedText}${promptSuffix}`;
+}

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

@@ -12,7 +12,14 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import chatMessageStyles from './chatMessage.css.js';
-import {type ModelChatMessage, renderStep, type Step, titleForStep} from './ChatMessage.js';
+import {
+  getDeduplicatedWidgetsMessage,
+  type ModelChatMessage,
+  renderStep,
+  type Step,
+  titleForStep
+} from './ChatMessage.js';
+import {getButtonLabel} from './WalkthroughUtils.js';
 import walkthroughViewStyles from './walkthroughView.css.js';
 
 const lockedString = i18n.i18n.lockedString;
@@ -60,6 +67,7 @@ export interface ViewInput {
   markdownRenderer: MarkdownLitRenderer;
   isInlined: boolean;
   isExpanded: boolean;
+  prompt: string;
   onToggle: (isOpen: boolean, message: ModelChatMessage) => void;
   onOpen: (message: ModelChatMessage) => void;
   handleScroll: (ev: Event) => void;
@@ -128,13 +136,22 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
         }
       </span>
       <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle} jslog=${VisualLogging.expand('walkthrough').track({click: true})}>
-        <summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
-          <span class="walkthrough-inline-title">
+        <summary
+          ?data-has-widgets=${!input.isLoading && hasWidgets}
+          aria-label=${getButtonLabel({
+            isExpanded: input.isExpanded,
+            isLoading: input.isLoading,
+            hasWidgets,
+            prompt: input.prompt,
+            stepTitle: titleForStep(lastStep),
+          })}
+        >
+          <h2 class="walkthrough-inline-title">
             ${input.isExpanded ?
               walkthroughCloseTitle({hasWidgets, isInlined: true}) :
               walkthroughTitle({isLoading: input.isLoading, lastStep, hasWidgets})
             }
-          </span>
+          </h2>
           <devtools-icon name="chevron-right"></devtools-icon>
         </summary>
 
@@ -240,6 +257,7 @@ export class WalkthroughView extends UI.Widget.Widget {
   #onOpen: (message: ModelChatMessage) => void = () => {};
   #isInlined = false;
   #isExpanded = false;
+  #prompt = '';
 
   #pinScrollToBottom = true;
   #isProgrammaticScroll = false;
@@ -386,10 +404,20 @@ export class WalkthroughView extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  get prompt(): string {
+    return this.#prompt;
+  }
+
+  set prompt(prompt: string) {
+    this.#prompt = prompt;
+    this.requestUpdate();
+  }
+
   override performUpdate(): void {
     if (!this.#markdownRenderer) {
       return;
     }
+    const message = this.#message ? getDeduplicatedWidgetsMessage(this.#message) : null;
     this.#view(
         {
           isLoading: this.#isLoading,
@@ -398,7 +426,8 @@ export class WalkthroughView extends UI.Widget.Widget {
           onOpen: this.#onOpen,
           isInlined: this.#isInlined,
           isExpanded: this.#isExpanded,
-          message: this.#message,
+          prompt: this.#prompt,
+          message,
           handleScroll: this.#handleScroll,
         },
         this.#output, this.contentElement);

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

@@ -263,6 +263,7 @@
     align-items: center;
 
     .title {
+      margin: 0;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
@@ -352,6 +353,10 @@
     &[open] {
       width: auto;
 
+      summary {
+        margin-bottom: var(--sys-size-2);
+      }
+
       .summary .title {
         white-space: normal;
         overflow: unset;
@@ -368,6 +373,11 @@
 
     summary {
       border-radius: 16px;
+
+      &:focus-visible {
+        outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+        outline-offset: var(--sys-size-2);
+      }
     }
 
     .step-details {
@@ -452,6 +462,7 @@
 
     .widget-name {
       font: var(--sys-typescale-body4-regular);
+      margin: 0;
       max-width: 80%;
       overflow: hidden;
       text-overflow: ellipsis;

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

@@ -158,11 +158,18 @@
     }
 
     > .walkthrough-inline-title {
+      font: var(--sys-typescale-body4-regular);
+      font-weight: var(--ref-typeface-weight-medium);
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       min-width: 0;
     }
+
+    &:focus-visible {
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+      outline-offset: calc(-1 * var(--sys-size-2));
+    }
   }
 
   .walkthrough-inline[open] > summary {

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -53,7 +53,7 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
     return false;
   }
 
-  showView(view: UI.Widget.Widget|null): void {
+  showView(view: UI.Widget.AnyWidget|null): void {
     this.resourcesPanel.showView(view);
   }
 }

package/front_end/panels/application/CookieItemsView.ts

@@ -128,7 +128,7 @@ export const DEFAULT_COOKIE_PREVIEW_WIDGET_VIEW: CookiePreviewWidgetView = (inpu
     </div>
   `,
       // clang-format on
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('cookie-preview')}`}}});
 };
 
 class CookiePreviewWidget extends UI.Widget.VBox {
@@ -137,7 +137,7 @@ class CookiePreviewWidget extends UI.Widget.VBox {
   private showDecodedSetting: Common.Settings.Setting<boolean>;
 
   constructor(element?: HTMLElement, view: CookiePreviewWidgetView = DEFAULT_COOKIE_PREVIEW_WIDGET_VIEW) {
-    super(element, {jslog: `${VisualLogging.section('cookie-preview')}`});
+    super(element);
     this.view = view;
     this.setMinimumSize(230, 45);
     this.#cookie = null;
@@ -186,12 +186,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format off
   render(html`<style>${cookieItemsViewStyles}</style>
     <devtools-widget class="storage-view" ${widget(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}>
-      <devtools-widget ${widget(StorageItemsToolbar, {
-          onDeleteSelectedCallback: input.onDeleteSelectedItems,
-          onDeleteAllCallback: input.onDeleteAllItems,
-          onRefreshCallback: input.onRefreshItems,
-        })}
+      <devtools-widget ${widget(StorageItemsToolbar, {filterRegex: null})}
         class=flex-none
+        @Refresh=${input.onRefreshItems}
+        @DeleteAll=${input.onDeleteAllItems}
+        @DeleteSelected=${input.onDeleteSelectedItems}
         ${UI.Widget.widgetRef(StorageItemsToolbar, toolbar => { output.toolbar = toolbar; })}
       ></devtools-widget>
       <devtools-split-view sidebar-position="second" name="cookie-items-split-view-state">
@@ -221,7 +220,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     </devtools-widget>
   `,
       // clang-format on
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('cookies-data')}`}}});
 };
 
 export class CookieItemsView extends UI.Widget.VBox {
@@ -235,7 +234,7 @@ export class CookieItemsView extends UI.Widget.VBox {
   #toolbar?: StorageItemsToolbar;
 
   constructor(model: SDK.CookieModel.CookieModel, cookieDomain: string, view: View = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.pane('cookies-data')}`});
+    super();
 
     this.view = view;
 

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -62,15 +62,15 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
   private eventListeners: Common.EventTarget.EventDescriptor[];
 
   constructor(domStorage: DOMStorage) {
-    super(i18nString(UIStrings.domStorageItems), 'dom-storage', true);
+    super(
+        i18nString(UIStrings.domStorageItems), 'dom-storage', true, /* view=*/ undefined, /* metadataView=*/ undefined,
+        /* jslog=*/ undefined, ['storage-view', 'table']);
 
     this.domStorage = domStorage;
     if (domStorage.storageKey) {
       this.toolbar?.setStorageKey(domStorage.storageKey);
     }
 
-    this.element.classList.add('storage-view', 'table');
-
     this.showPreview(null, null);
 
     this.eventListeners = [];

package/front_end/panels/application/DeviceBoundSessionsModel.ts

@@ -100,6 +100,13 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
         DeviceBoundSessionModelEvents.CLEAR_EVENTS, {emptySessions, emptySites, noLongerFailedSessions});
   }
 
+  deleteSession(site: string, id: string): void {
+    for (const networkManager of SDK.TargetManager.TargetManager.instance().models(
+             SDK.NetworkManager.NetworkManager, {scoped: true})) {
+      void networkManager.deleteDeviceBoundSession({site, id});
+    }
+  }
+
   isSiteVisible(site: string): boolean {
     return this.#visibleSites.has(site);
   }

package/front_end/panels/application/DeviceBoundSessionsTreeElement.ts

@@ -57,6 +57,10 @@ const UIStrings = {
    *@example {session_1} sessionName
    */
   sessionWithErrors: '{sessionName}, Session has errors',
+  /**
+   *@description Context menu item for clearing a session.
+   */
+  clear: 'Clear',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/DeviceBoundSessionsTreeElement.ts', UIStrings);
@@ -217,6 +221,23 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
         return false;
       };
 
+      sessionElement.listItemElement.addEventListener('keydown', (event: Event) => {
+        const keyboardEvent = event as KeyboardEvent;
+        if ((keyboardEvent.key === 'Delete' || keyboardEvent.key === 'Backspace') && sessionId !== undefined) {
+          this.#model.deleteSession(site, sessionId);
+          event.consume(true);
+        }
+      });
+
+      sessionElement.listItemElement.addEventListener('contextmenu', (event: MouseEvent) => {
+        if (sessionId !== undefined) {
+          const contextMenu = new UI.ContextMenu.ContextMenu(event);
+          contextMenu.defaultSection().appendItem(
+              i18nString(UIStrings.clear), () => this.#model.deleteSession(site, sessionId), {jslogContext: 'clear'});
+          void contextMenu.show();
+        }
+      });
+
       if (sessionId === undefined) {
         // The "No session" session is always listed at the top.
         siteMapEntry.siteTreeElement.insertChild(sessionElement, 0);

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -586,7 +586,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
       <devtools-widget ${widget(UI.EmptyWidget.EmptyWidget, {header: defaultTitle, text: defaultDescription})} jslog=${
             VisualLogging.pane('device-bound-sessions-empty')}></devtools-widget>
     `,
-        target);
+        target, {container: {attributes: {jslog: `${VisualLogging.pane('device-bound-sessions')}`}}});
     return;
   }
 
@@ -848,7 +848,7 @@ export class DeviceBoundSessionsView extends UI.Widget.VBox {
   #selectedEvent?: Protocol.Network.DeviceBoundSessionEventOccurredEvent;
 
   constructor(view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.pane('device-bound-sessions')}`});
+    super();
     this.#view = view;
   }
 

package/front_end/panels/application/ExtensionStorageItemsView.ts

@@ -75,7 +75,7 @@ export class ExtensionStorageItemsView extends KeyValueStorageItemsView {
   constructor(extensionStorage: ExtensionStorage, view?: KeyValueStorageItemsViewFunction) {
     super(
         i18nString(UIStrings.extensionStorageItems), 'extension-storage', true, view, undefined,
-        {jslog: `${VisualLogging.pane().context('extension-storage-data')}`, classes: ['storage-view', 'table']});
+        `${VisualLogging.pane().context('extension-storage-data')}`, ['storage-view', 'table']);
 
     this.extensionStorageItemsDispatcher =
         new Common.ObjectWrapper.ObjectWrapper<ExtensionStorageItemsDispatcher.EventTypes>();

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -31,7 +31,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Geometry from '../../models/geometry/geometry.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import type {WidgetOptions} from '../../ui/legacy/Widget.js';
 import {Directives as LitDirectives, html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -81,9 +80,13 @@ export interface ViewInput {
   onSelect: (item: {key: string, value: string}|null) => void;
   onSort: (ascending: boolean) => void;
   onCreate: (key: string, value: string) => void;
-  onReferesh: () => void;
+  onRefresh: () => void;
   onEdit: (key: string, value: string, columnId: string, valueBeforeEditing: string, newText: string) => void;
   onDelete: (key: string) => void;
+  onDeleteSelected: () => void;
+  onDeleteAll: () => void;
+  jslog?: string;
+  classes?: string[];
 }
 
 interface ViewOutput {
@@ -108,10 +111,18 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
   #editable: boolean;
   #toolbar: StorageItemsToolbar|undefined;
   readonly metadataView: ApplicationComponents.StorageMetadataView.StorageMetadataView;
+  #jslog?: string;
+  #classes?: string[];
 
   constructor(
-      title: string, id: string, editable: boolean, view?: View,
-      metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView, opts?: WidgetOptions) {
+      title: string,
+      id: string,
+      editable: boolean,
+      view?: View,
+      metadataView?: ApplicationComponents.StorageMetadataView.StorageMetadataView,
+      jslog?: string,
+      classes?: string[],
+  ) {
     metadataView ??= new ApplicationComponents.StorageMetadataView.StorageMetadataView();
     if (!view) {
       view = (input: ViewInput, output: ViewOutput, target: HTMLElement) => {
@@ -120,6 +131,9 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
             <devtools-widget
               ${widget(StorageItemsToolbar, {metadataView})}
               class=flex-none
+              @Refresh=${input.onRefresh}
+              @DeleteAll=${input.onDeleteAll}
+              @DeleteSelected=${input.onDeleteSelected}
               ${UI.Widget.widgetRef(StorageItemsToolbar, view => {output.toolbar = view;})}
             ></devtools-widget>
             <devtools-split-view sidebar-position="second" name="${id}-split-view-state">
@@ -131,7 +145,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
                   striped
                   style="flex: auto"
                   @sort=${(e: CustomEvent<{columnId: string, ascending: boolean}>) => input.onSort(e.detail.ascending)}
-                  @refresh=${input.onReferesh}
+                  @refresh=${input.onRefresh}
                   @create=${(e: CustomEvent<{key: string, value: string}>) => input.onCreate(e.detail.key, e.detail.value)}
                   @deselect=${() => input.onSelect(null)}
                 >
@@ -166,12 +180,14 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
               </devtools-widget>
             </devtools-split-view>`,
             // clang-format on
-            target);
+            target, {container: {attributes: {jslog: input.jslog}, classes: input.classes}});
       };
     }
-    super(opts);
+    super();
     this.metadataView = metadataView;
     this.#editable = editable;
+    this.#jslog = jslog;
+    this.#classes = classes;
     this.#view = view;
     this.performUpdate();
 
@@ -191,13 +207,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     const that = this;
     const viewOutput = {
       set toolbar(toolbar: StorageItemsToolbar) {
-        that.#toolbar?.removeEventListener(StorageItemsToolbar.Events.DELETE_SELECTED, that.deleteSelectedItem, that);
-        that.#toolbar?.removeEventListener(StorageItemsToolbar.Events.DELETE_ALL, that.deleteAllItems, that);
-        that.#toolbar?.removeEventListener(StorageItemsToolbar.Events.REFRESH, that.refreshItems, that);
         that.#toolbar = toolbar;
-        that.#toolbar.addEventListener(StorageItemsToolbar.Events.DELETE_SELECTED, that.deleteSelectedItem, that);
-        that.#toolbar.addEventListener(StorageItemsToolbar.Events.DELETE_ALL, that.deleteAllItems, that);
-        that.#toolbar.addEventListener(StorageItemsToolbar.Events.REFRESH, that.refreshItems, that);
       }
     };
     const viewInput = {
@@ -205,6 +215,8 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
       selectedKey: this.#selectedKey,
       editable: this.#editable,
       preview: this.#preview,
+      jslog: this.#jslog,
+      classes: this.#classes,
       onSelect: (item: {key: string, value: string}|null) => {
         this.#toolbar?.setCanDeleteSelected(Boolean(item));
         if (!item) {
@@ -225,7 +237,13 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
       onDelete: (key: string) => {
         this.#deleteCallback(key);
       },
-      onReferesh: () => {
+      onDeleteSelected: () => {
+        this.deleteSelectedItem();
+      },
+      onDeleteAll: () => {
+        this.deleteAllItems();
+      },
+      onRefresh: () => {
         this.refreshItems();
       },
     };

package/front_end/panels/application/ResourcesPanel.ts

@@ -28,8 +28,8 @@ let resourcesPanelInstance: ResourcesPanel;
 
 export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   private readonly resourcesLastSelectedItemSetting: Common.Settings.Setting<Platform.DevToolsPath.UrlString[]>;
-  visibleView: UI.Widget.Widget|null;
-  private pendingViewPromise: Promise<UI.Widget.Widget>|null;
+  visibleView: UI.Widget.AnyWidget|null;
+  private pendingViewPromise: Promise<UI.Widget.AnyWidget>|null;
   private categoryView: StorageCategoryView|null;
   storageViews: HTMLElement;
   private readonly storageViewToolbar: UI.Toolbar.Toolbar;
@@ -84,7 +84,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     return resourcesPanelInstance;
   }
 
-  private static shouldCloseOnReset(view: UI.Widget.Widget): boolean {
+  private static shouldCloseOnReset(view: UI.Widget.AnyWidget): boolean {
     const viewClassesToClose = [
       SourceFrame.ResourceSourceFrame.ResourceSourceFrame,
       SourceFrame.ImageView.ImageView,
@@ -117,7 +117,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     }
   }
 
-  showView(view: UI.Widget.Widget|null): void {
+  showView(view: UI.Widget.AnyWidget|null): void {
     this.pendingViewPromise = null;
     if (this.visibleView === view) {
       return;
@@ -142,7 +142,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     }
   }
 
-  async scheduleShowView(viewPromise: Promise<UI.Widget.Widget>): Promise<UI.Widget.Widget|null> {
+  async scheduleShowView(viewPromise: Promise<UI.Widget.AnyWidget>): Promise<UI.Widget.AnyWidget|null> {
     this.pendingViewPromise = viewPromise;
     const view = await viewPromise;
     if (this.pendingViewPromise !== viewPromise) {