chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -92,178 +92,178 @@ import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
 
 const UIStrings = {
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   application: 'Application',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   storage: 'Storage',
   /**
-   *@description Text in Application Panelthat shows if no local storage
+   * @description Text in Application Panelthat shows if no local storage
    *             can be shown.
    */
   noLocalStorage: 'No local storage detected',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   localStorage: 'Local storage',
   /**
-   *@description Text in the Application panel describing the local storage tab.
+   * @description Text in the Application panel describing the local storage tab.
    */
   localStorageDescription: 'On this page you can view, add, edit, and delete local storage key-value pairs.',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   sessionStorage: 'Session storage',
   /**
-   *@description Text in Application Panel if no session storage can be shown.
+   * @description Text in Application Panel if no session storage can be shown.
    */
   noSessionStorage: 'No session storage detected',
   /**
-   *@description Text in the Application panel describing the session storage tab.
+   * @description Text in the Application panel describing the session storage tab.
    */
   sessionStorageDescription: 'On this page you can view, add, edit, and delete session storage key-value pairs.',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   extensionStorage: 'Extension storage',
   /**
-   *@description Text in Application Panel if no extension storage can be shown
+   * @description Text in Application Panel if no extension storage can be shown
    */
   noExtensionStorage: 'No extension storage detected',
   /**
-   *@description Text in the Application panel describing the extension storage tab.
+   * @description Text in the Application panel describing the extension storage tab.
    */
   extensionStorageDescription: 'On this page you can view, add, edit, and delete extension storage key-value pairs.',
   /**
-   *@description Text for extension session storage in Application panel
+   * @description Text for extension session storage in Application panel
    */
   extensionSessionStorage: 'Session',
   /**
-   *@description Text for extension local storage in Application panel
+   * @description Text for extension local storage in Application panel
    */
   extensionLocalStorage: 'Local',
   /**
-   *@description Text for extension sync storage in Application panel
+   * @description Text for extension sync storage in Application panel
    */
   extensionSyncStorage: 'Sync',
   /**
-   *@description Text for extension managed storage in Application panel
+   * @description Text for extension managed storage in Application panel
    */
   extensionManagedStorage: 'Managed',
   /**
-   *@description Text for web cookies
+   * @description Text for web cookies
    */
   cookies: 'Cookies',
   /**
-   *@description Text in the Application Panel if no cookies are set
+   * @description Text in the Application Panel if no cookies are set
    */
   noCookies: 'No cookies set',
   /**
-   *@description Text for web cookies
+   * @description Text for web cookies
    */
   cookiesDescription: 'On this page you can view, add, edit, and delete cookies.',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   backgroundServices: 'Background services',
   /**
-   *@description Text for rendering frames
+   * @description Text for rendering frames
    */
   frames: 'Frames',
   /**
-   *@description Text that appears on a button for the manifest resource type filter.
+   * @description Text that appears on a button for the manifest resource type filter.
    */
   manifest: 'Manifest',
   /**
-   *@description Text in App Manifest View of the Application panel
+   * @description Text in App Manifest View of the Application panel
    */
   noManifestDetected: 'No manifest detected',
   /**
-   *@description Description text on manifests in App Manifest View of the Application panel which describes the app manifest view tab
+   * @description Description text on manifests in App Manifest View of the Application panel which describes the app manifest view tab
    */
   manifestDescription:
       'A manifest defines how your app appears on phone’s home screens and what the app looks like on launch.',
   /**
-   *@description Text in App Manifest View of the Application panel
+   * @description Text in App Manifest View of the Application panel
    */
   appManifest: 'Manifest',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   indexeddb: 'IndexedDB',
   /**
-   *@description Text in Application Panel if no indexedDB is detected
+   * @description Text in Application Panel if no indexedDB is detected
    */
   noIndexeddb: 'No indexedDB detected',
   /**
-   *@description Text in the Application panel describing the extension storage tab.
+   * @description Text in the Application panel describing the extension storage tab.
    */
   indexeddbDescription: 'On this page you can view and delete indexedDB key-value pairs and databases.',
   /**
-   *@description A context menu item in the Application Panel Sidebar of the Application panel
+   * @description A context menu item in the Application Panel Sidebar of the Application panel
    */
   refreshIndexeddb: 'Refresh IndexedDB',
   /**
-   *@description Tooltip in Application Panel Sidebar of the Application panel
-   *@example {1.0} PH1
+   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @example {1.0} PH1
    */
   versionSEmpty: 'Version: {PH1} (empty)',
   /**
-   *@description Tooltip in Application Panel Sidebar of the Application panel
-   *@example {1.0} PH1
+   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @example {1.0} PH1
    */
   versionS: 'Version: {PH1}',
   /**
-   *@description Text to clear content
+   * @description Text to clear content
    */
   clear: 'Clear',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
-   *@example {"key path"} PH1
+   * @description Text in Application Panel Sidebar of the Application panel
+   * @example {"key path"} PH1
    */
   keyPathS: 'Key path: {PH1}',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   localFiles: 'Local Files',
   /**
-   *@description Tooltip in Application Panel Sidebar of the Application panel
-   *@example {https://example.com} PH1
+   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @example {https://example.com} PH1
    */
   cookiesUsedByFramesFromS: 'Cookies used by frames from {PH1}',
   /**
-   *@description Text in Frames View of the Application panel
+   * @description Text in Frames View of the Application panel
    */
   openedWindows: 'Opened Windows',
   /**
-   *@description Text in Frames View of the Application panel
+   * @description Text in Frames View of the Application panel
    */
   openedWindowsDescription: 'On this page you can view windows opened via window\.open\(\).',
   /**
-   *@description Label for plural of worker type: web workers
+   * @description Label for plural of worker type: web workers
    */
   webWorkers: 'Web Workers',
   /**
-   *@description Label in frame tree for unavailable document
+   * @description Label in frame tree for unavailable document
    */
   documentNotAvailable: 'No document detected',
   /**
-   *@description Description of content of unavailable document in Application panel
+   * @description Description of content of unavailable document in Application panel
    */
   theContentOfThisDocumentHasBeen:
       'The content of this document has been generated dynamically via \'document.write()\'.',
   /**
-   *@description Text in Frames View of the Application panel
+   * @description Text in Frames View of the Application panel
    */
   windowWithoutTitle: 'Window without title',
   /**
-   *@description Default name for worker
+   * @description Default name for worker
    */
   worker: 'worker',
   /**
-   *@description Description text for describing the dedicated worker tab.
+   * @description Description text for describing the dedicated worker tab.
    */
   workerDescription: 'On this page you can view dedicated workers that are created by the parent frame.',
   /**
@@ -285,8 +285,8 @@ const UIStrings = {
    */
   applicationSidebarPanel: 'Application panel sidebar',
   /**
-   *@description Tooltip in Application Panel Sidebar of the Application panel
-   *@example {https://example.com} PH1
+   * @description Tooltip in Application Panel Sidebar of the Application panel
+   * @example {https://example.com} PH1
    */
   thirdPartyPhaseout: 'Cookies from {PH1} may have been blocked due to third-party cookie phaseout.',
   /**
@@ -377,7 +377,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.sidebarTree = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
     this.sidebarTree.registerRequiredCSS(resourcesSidebarStyles);
     this.sidebarTree.element.classList.add('resources-sidebar');
-    this.sidebarTree.hideOverflow();
+    this.sidebarTree.setHideOverflow(true);
 
     this.sidebarTree.element.classList.add('filter-all');
     // Listener needs to have been set up before the elements are added
@@ -640,8 +640,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     this.cacheStorageListTreeElement.initialize();
     const backgroundServiceModel = this.target?.model(BackgroundServiceModel) || null;
-    this.backgroundFetchTreeElement && this.backgroundFetchTreeElement.initialize(backgroundServiceModel);
-    this.backgroundSyncTreeElement && this.backgroundSyncTreeElement.initialize(backgroundServiceModel);
+    this.backgroundFetchTreeElement.initialize(backgroundServiceModel);
+    this.backgroundSyncTreeElement.initialize(backgroundServiceModel);
     this.notificationsTreeElement.initialize(backgroundServiceModel);
     this.paymentHandlerTreeElement.initialize(backgroundServiceModel);
     this.periodicBackgroundSyncTreeElement.initialize(backgroundServiceModel);
@@ -1193,7 +1193,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
 
   onInvoke(): void {
     this.view.getManifestElement().scrollIntoView();
-    UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
   }
 
   showManifestView(): void {
@@ -1225,7 +1225,7 @@ export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
   onInvoke(): void {
     (this.parent as AppManifestTreeElement)?.showManifestView();
     this.#sectionElement.scrollIntoView();
-    UI.ARIAUtils.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
   }
   // direct focus to the corresponding element
   onInvokeElementKeydown(event: KeyboardEvent): void {
@@ -1856,7 +1856,6 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     // Note that we cannot use `cookieDomainInternal` here since it contains scheme.
     if (IssuesManager.RelatedIssue.hasThirdPartyPhaseoutCookieIssueForDomain(cookieUrl.domain())) {
       icon.name = 'warning-filled';
-      icon.classList.add('warn-icon');
       this.tooltip = i18nString(UIStrings.thirdPartyPhaseout, {PH1: this.cookieDomainInternal});
     }
     this.setLeadingIcons([icon]);

package/front_end/panels/application/BackForwardCacheTreeElement.ts

@@ -15,7 +15,7 @@ import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   backForwardCache: 'Back/forward cache',
 } as const;

package/front_end/panels/application/BackgroundServiceView.ts

@@ -23,118 +23,117 @@ import backgroundServiceViewStyles from './backgroundServiceView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   backgroundFetch: 'Background fetch',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   backgroundSync: 'Background sync',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   pushMessaging: 'Push messaging',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   notifications: 'Notifications',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   paymentHandler: 'Payment handler',
   /**
-   *@description Text in the Periodic Background Service View of the Application panel
+   * @description Text in the Periodic Background Service View of the Application panel
    */
   periodicBackgroundSync: 'Periodic background sync',
   /**
-   *@description Text to clear content
+   * @description Text to clear content
    */
   clear: 'Clear',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon download button in the Background Service View of the Application panel
+   * @description Tooltip text that appears when hovering over the largeicon download button in the Background Service View of the Application panel
    */
   saveEvents: 'Save events',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   showEventsFromOtherDomains: 'Show events from other domains',
   /**
-   *@description Text of a checkbox to show events for other storage keys
+   * @description Text of a checkbox to show events for other storage keys
    */
   showEventsForOtherStorageKeys: 'Show events from other storage partitions',
   /**
-   *@description Title of an action under the Background Services category that can be invoked through the Command Menu
+   * @description Title of an action under the Background Services category that can be invoked through the Command Menu
    */
   stopRecordingEvents: 'Stop recording events',
   /**
-   *@description Title of an action under the Background Services category that can be invoked through the Command Menu
+   * @description Title of an action under the Background Services category that can be invoked through the Command Menu
    */
   startRecordingEvents: 'Start recording events',
   /**
-   *@description Text for timestamps of items
+   * @description Text for timestamps of items
    */
   timestamp: 'Timestamp',
   /**
-   *@description Text that refers to some events
+   * @description Text that refers to some events
    */
   event: 'Event',
   /**
-   *@description Text for the origin of something
+   * @description Text for the origin of something
    */
   origin: 'Origin',
   /**
-   *@description Text for the storage key of something
+   * @description Text for the storage key of something
    */
   storageKey: 'Storage Key',
   /**
-   *@description Text in Background Service View of the Application panel. The Scope is a URL associated with the Service Worker, which limits which pages/sites the Service Worker operates on.
+   * @description Text in Background Service View of the Application panel. The Scope is a URL associated with the Service Worker, which limits which pages/sites the Service Worker operates on.
    */
   swScope: 'Service Worker Scope',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   instanceId: 'Instance ID',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   backgroundServices: 'Background services',
   /**
-   *@description Text in Background Service View of the Application panel.
+   * @description Text in Background Service View of the Application panel.
    *             An event here refers to a background service event that is an entry in a table.
    */
   noEventSelected: 'No event selected',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   selectAnEventToViewMetadata: 'Select an event to view its metadata',
   /**
-   *@description Text in Background Service View of the Application panel
-   *@example {Background Fetch} PH1
+   * @description Text in Background Service View of the Application panel
+   * @example {Background Fetch} PH1
    */
   recordingSActivity: 'Recording {PH1} activity…',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   noRecording: 'No recording yet',
   /**
-   *@description Inform users that DevTools are recording/waiting for events in the Periodic Background Sync tool of the Application panel
-   *@example {Background Fetch} PH1
+   * @description Inform users that DevTools are recording/waiting for events in the Periodic Background Sync tool of the Application panel
+   * @example {Background Fetch} PH1
    */
   devtoolsWillRecordAllSActivity: 'DevTools will record all {PH1} activity for up to 3 days, even when closed.',
   /**
-   *@description Text in Background Service View of the Application panel to instruct the user on how to start a recording for
+   * @description Text in Background Service View of the Application panel to instruct the user on how to start a recording for
    * background services.
-   *
-   *@example {Start recording events} PH1
-   *@example {Ctrl + E} PH2
+   * @example {Start recording events} PH1
+   * @example {Ctrl + E} PH2
    */
   startRecordingToDebug: 'Start to debug background services by using the "{PH1}" button or by pressing {PH2}.',
   /**
-   *@description Text to show an item is empty
+   * @description Text to show an item is empty
    */
   empty: 'empty',
   /**
-   *@description Text in Background Service View of the Application panel
+   * @description Text in Background Service View of the Application panel
    */
   noMetadataForThisEvent: 'No metadata for this event',
 } as const;
@@ -178,12 +177,13 @@ export class BackgroundServiceView extends UI.Widget.VBox {
   }
 
   constructor(serviceName: Protocol.BackgroundService.ServiceName, model: BackgroundServiceModel) {
-    super(true);
+    super({
+      jslog: `${VisualLogging.pane().context(Platform.StringUtilities.toKebabCase(serviceName))}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(emptyWidgetStyles, backgroundServiceViewStyles);
 
     this.serviceName = serviceName;
-    const kebabName = Platform.StringUtilities.toKebabCase(serviceName);
-    this.element.setAttribute('jslog', `${VisualLogging.pane().context(kebabName)}`);
 
     this.model = model;
     this.model.addEventListener(Events.RecordingStateChanged, this.onRecordingStateChanged, this);
@@ -483,22 +483,24 @@ export class BackgroundServiceView extends UI.Widget.VBox {
       return;
     }
 
-    const emptyWidget = new UI.EmptyWidget.EmptyWidget('', '');
+    let emptyWidget: UI.EmptyWidget.EmptyWidget;
     if (this.dataGrid.rootNode().children.length) {
-      emptyWidget.header = i18nString(UIStrings.noEventSelected);
-      emptyWidget.text = i18nString(UIStrings.selectAnEventToViewMetadata);
+      emptyWidget = new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.noEventSelected), i18nString(UIStrings.selectAnEventToViewMetadata));
     } else if (this.recordButton.isToggled()) {
       // Inform users that we are recording/waiting for events.
       const featureName = BackgroundServiceView.getUIString(this.serviceName).toLowerCase();
-      emptyWidget.header = i18nString(UIStrings.recordingSActivity, {PH1: featureName});
-      emptyWidget.text = i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName});
+      emptyWidget = new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.recordingSActivity, {PH1: featureName}),
+          i18nString(UIStrings.devtoolsWillRecordAllSActivity, {PH1: featureName}));
     } else {
       const recordShortcuts =
           UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('background-service.toggle-recording')[0];
-      emptyWidget.header = i18nString(UIStrings.noRecording);
-      emptyWidget.text = i18nString(
-          UIStrings.startRecordingToDebug,
-          {PH1: i18nString(UIStrings.startRecordingEvents), PH2: recordShortcuts.title()});
+      emptyWidget = new UI.EmptyWidget.EmptyWidget(
+          i18nString(UIStrings.noRecording), i18nString(UIStrings.startRecordingToDebug, {
+            PH1: i18nString(UIStrings.startRecordingEvents),
+            PH2: recordShortcuts.title(),
+          }));
       emptyWidget.link = this.createLearnMoreLink();
 
       const button = UI.UIUtils.createTextButton(

package/front_end/panels/application/CookieItemsView.ts

@@ -45,36 +45,36 @@ import {StorageItemsToolbar} from './StorageItemsToolbar.js';
 
 const UIStrings = {
   /**
-   *@description Label for checkbox to show URL-decoded cookie values
+   * @description Label for checkbox to show URL-decoded cookie values
    */
   showUrlDecoded: 'Show URL-decoded',
   /**
-   *@description Text in Cookie Items View of the Application panel to indicate that no cookie has been selected for preview
+   * @description Text in Cookie Items View of the Application panel to indicate that no cookie has been selected for preview
    */
   noCookieSelected: 'No cookie selected',
   /**
-   *@description Text in Cookie Items View of the Application panel
+   * @description Text in Cookie Items View of the Application panel
    */
   selectACookieToPreviewItsValue: 'Select a cookie to preview its value',
   /**
-   *@description Text for filter in Cookies View of the Application panel
+   * @description Text for filter in Cookies View of the Application panel
    */
   onlyShowCookiesWithAnIssue: 'Only show cookies with an issue',
   /**
-   *@description Title for filter in the Cookies View of the Application panel
+   * @description Title for filter in the Cookies View of the Application panel
    */
   onlyShowCookiesWhichHaveAn: 'Only show cookies that have an associated issue',
   /**
-   *@description Label to only delete the cookies that are visible after filtering
+   * @description Label to only delete the cookies that are visible after filtering
    */
   clearFilteredCookies: 'Clear filtered cookies',
   /**
-   *@description Label to delete all cookies
+   * @description Label to delete all cookies
    */
   clearAllCookies: 'Clear all cookies',
   /**
-   *@description Alert message for screen reader to announce # of cookies in the table
-   *@example {5} PH1
+   * @description Alert message for screen reader to announce # of cookies in the table
+   * @example {5} PH1
    */
   numberOfCookiesShownInTableS: 'Number of cookies shown in table: {PH1}',
 } as const;
@@ -87,7 +87,7 @@ class CookiePreviewWidget extends UI.Widget.VBox {
   private value: HTMLDivElement;
 
   constructor() {
-    super();
+    super({jslog: `${VisualLogging.section('cookie-preview')}`});
     this.setMinimumSize(230, 45);
     this.cookie = null;
     this.showDecodedSetting = Common.Settings.Settings.instance().createSetting('cookie-view-show-decoded', false);
@@ -115,7 +115,6 @@ class CookiePreviewWidget extends UI.Widget.VBox {
     this.value = value;
 
     this.contentElement.classList.add('cookie-preview-widget');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.section('cookie-preview')}`);
     this.contentElement.appendChild(value);
   }
 
@@ -172,11 +171,10 @@ export class CookieItemsView extends UI.Widget.VBox {
   private selectedCookie: SDK.Cookie.Cookie|null;
   #toolbar: StorageItemsToolbar;
   constructor(model: SDK.CookieModel.CookieModel, cookieDomain: string) {
-    super();
+    super({jslog: `${VisualLogging.pane('cookies-data')}`});
     this.registerRequiredCSS(cookieItemsViewStyles);
 
     this.element.classList.add('storage-view');
-    this.element.setAttribute('jslog', `${VisualLogging.pane('cookies-data')}`);
 
     this.model = model;
     this.cookieDomain = cookieDomain;
@@ -287,7 +285,8 @@ export class CookieItemsView extends UI.Widget.VBox {
       this.#toolbar.setDeleteAllGlyph('clear-list');
     }
     this.cookiesTable.setCookies(this.shownCookies, this.model.getCookieToBlockedReasonsMap());
-    UI.ARIAUtils.alert(i18nString(UIStrings.numberOfCookiesShownInTableS, {PH1: this.shownCookies.length}));
+    UI.ARIAUtils.LiveAnnouncer.alert(
+        i18nString(UIStrings.numberOfCookiesShownInTableS, {PH1: this.shownCookies.length}));
     this.#toolbar.setCanFilter(true);
     this.#toolbar.setCanDeleteAll(this.shownCookies.length > 0);
     this.#toolbar.setCanDeleteSelected(Boolean(this.cookiesTable.selectedCookie()));

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -42,16 +42,16 @@ import {KeyValueStorageItemsView} from './KeyValueStorageItemsView.js';
 
 const UIStrings = {
   /**
-   *@description Name for the "DOM Storage Items" table that shows the content of the DOM Storage.
+   * @description Name for the "DOM Storage Items" table that shows the content of the DOM Storage.
    */
   domStorageItems: 'DOM Storage Items',
   /**
-   *@description Text for announcing that the "DOM Storage Items" table was cleared, that is, all
+   * @description Text for announcing that the "DOM Storage Items" table was cleared, that is, all
    * entries were deleted.
    */
   domStorageItemsCleared: 'DOM Storage Items cleared',
   /**
-   *@description Text for announcing a DOM Storage key/value item has been deleted
+   * @description Text for announcing a DOM Storage key/value item has been deleted
    */
   domStorageItemDeleted: 'The storage item was deleted.',
 } as const;
@@ -118,7 +118,7 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
 
   override itemsCleared(): void {
     super.itemsCleared();
-    UI.ARIAUtils.alert(i18nString(UIStrings.domStorageItemsCleared));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.domStorageItemsCleared));
   }
 
   private domStorageItemRemoved(event: Common.EventTarget.EventTargetEvent<DOMStorage.DOMStorageItemRemovedEvent>):
@@ -132,7 +132,7 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
 
   override itemRemoved(key: string): void {
     super.itemRemoved(key);
-    UI.ARIAUtils.alert(i18nString(UIStrings.domStorageItemDeleted));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.domStorageItemDeleted));
   }
 
   private domStorageItemAdded(event: Common.EventTarget.EventTargetEvent<DOMStorage.DOMStorageItemAddedEvent>): void {

package/front_end/panels/application/ExtensionStorageItemsView.ts

@@ -44,11 +44,11 @@ import {KeyValueStorageItemsView, type View as KeyValueStorageItemsViewFunction}
 
 const UIStrings = {
   /**
-   *@description Name for the "Extension Storage Items" table that shows the content of the extension Storage.
+   * @description Name for the "Extension Storage Items" table that shows the content of the extension Storage.
    */
   extensionStorageItems: 'Extension Storage Items',
   /**
-   *@description Text for announcing that the "Extension Storage Items" table was cleared, that is, all
+   * @description Text for announcing that the "Extension Storage Items" table was cleared, that is, all
    * entries were deleted.
    */
   extensionStorageItemsCleared: 'Extension Storage Items cleared',
@@ -144,7 +144,7 @@ export class ExtensionStorageItemsView extends KeyValueStorageItemsView {
     }
 
     this.itemsCleared();
-    UI.ARIAUtils.alert(i18nString(UIStrings.extensionStorageItemsCleared));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.extensionStorageItemsCleared));
   }
 
   override deleteSelectedItem(): void {

package/front_end/panels/application/IndexedDBModel.ts

@@ -477,6 +477,9 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
   }
   attributionReportingReportSent(_event: Protocol.Storage.AttributionReportingReportSentEvent): void {
   }
+  attributionReportingVerboseDebugReportSent(_event: Protocol.Storage.AttributionReportingVerboseDebugReportSentEvent):
+      void {
+  }
 }
 
 SDK.SDKModel.SDKModel.register(IndexedDBModel, {capabilities: SDK.Target.Capability.STORAGE, autostart: false});