chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/application/ServiceWorkersView.ts

@@ -23,36 +23,36 @@ import {ServiceWorkerUpdateCycleView} from './ServiceWorkerUpdateCycleView.js';
 
 const UIStrings = {
   /**
-   *@description Text for linking to other Service Worker registrations
+   * @description Text for linking to other Service Worker registrations
    */
   serviceWorkersFromOtherOrigins: 'Service workers from other origins',
   /**
-   *@description Title of update on reload setting in service workers view of the application panel
+   * @description Title of update on reload setting in service workers view of the application panel
    */
   updateOnReload: 'Update on reload',
   /**
-   *@description Tooltip text that appears on the setting when hovering over it in Service Workers View of the Application panel
+   * @description Tooltip text that appears on the setting when hovering over it in Service Workers View of the Application panel
    */
   onPageReloadForceTheService: 'On page reload, force the `service worker` to update, and activate it',
   /**
-   *@description Title of bypass service worker setting in service workers view of the application panel
+   * @description Title of bypass service worker setting in service workers view of the application panel
    */
   bypassForNetwork: 'Bypass for network',
   /**
-   *@description Tooltip text that appears on the setting when hovering over it in Service Workers View of the Application panel
+   * @description Tooltip text that appears on the setting when hovering over it in Service Workers View of the Application panel
    */
   bypassTheServiceWorkerAndLoad: 'Bypass the `service worker` and load resources from the network',
   /**
-   *@description Screen reader title for a section of the Service Workers view of the Application panel
-   *@example {https://example.com} PH1
+   * @description Screen reader title for a section of the Service Workers view of the Application panel
+   * @example {https://example.com} PH1
    */
   serviceWorkerForS: '`Service worker` for {PH1}',
   /**
-   *@description Text in Service Workers View of the Application panel
+   * @description Text in Service Workers View of the Application panel
    */
   testPushMessageFromDevtools: 'Test push message from DevTools.',
   /**
-   *@description Button label for service worker network requests
+   * @description Button label for service worker network requests
    */
   networkRequests: 'Network requests',
   /**
@@ -61,23 +61,23 @@ const UIStrings = {
    */
   update: 'Update',
   /**
-   *@description Text in Service Workers View of the Application panel
+   * @description Text in Service Workers View of the Application panel
    */
   unregisterServiceWorker: 'Unregister service worker',
   /**
-   *@description Text in Service Workers View of the Application panel
+   * @description Text in Service Workers View of the Application panel
    */
   unregister: 'Unregister',
   /**
-   *@description Text for the source of something
+   * @description Text for the source of something
    */
   source: 'Source',
   /**
-   *@description Text for the status of something
+   * @description Text for the status of something
    */
   status: 'Status',
   /**
-   *@description Text in Service Workers View of the Application panel
+   * @description Text in Service Workers View of the Application panel
    */
   clients: 'Clients',
   /**
@@ -92,24 +92,24 @@ const UIStrings = {
    */
   pushData: 'Push data',
   /**
-   *@description Text in Service Workers View of the Application panel
+   * @description Text in Service Workers View of the Application panel
    */
   syncString: 'Sync',
   /**
-   *@description Placeholder text for the input box where a user is asked for a test tag to sync. This is used as a compound noun, not as a verb.
+   * @description Placeholder text for the input box where a user is asked for a test tag to sync. This is used as a compound noun, not as a verb.
    */
   syncTag: 'Sync tag',
   /**
-   *@description Text for button in Service Workers View of the Application panel that dispatches a periodicsync event
+   * @description Text for button in Service Workers View of the Application panel that dispatches a periodicsync event
    */
   periodicSync: 'Periodic sync',
   /**
-   *@description Default tag for a periodicsync event in Service Workers View of the Application panel
+   * @description Default tag for a periodicsync event in Service Workers View of the Application panel
    */
   periodicSyncTag: 'Periodic sync tag',
   /**
-   *@description Aria accessible name in Service Workers View of the Application panel
-   *@example {3} PH1
+   * @description Aria accessible name in Service Workers View of the Application panel
+   * @example {3} PH1
    */
   sRegistrationErrors: '{PH1} registration errors',
   /**
@@ -123,26 +123,22 @@ const UIStrings = {
    */
   routers: 'Routers',
   /**
-   *@description Text in Service Workers View of the Application panel
-   *@example {example.com} PH1
+   * @description Text in Service Workers View of the Application panel
+   * @example {example.com} PH1
    */
   sDeleted: '{PH1} - deleted',
   /**
-   *@description Text in Service Workers View of the Application panel
-   *@example {1} PH1
-   *@example {stopped} PH2
+   * @description Text in Service Workers View of the Application panel
+   * @example {1} PH1
+   * @example {stopped} PH2
    */
   sActivatedAndIsS: '#{PH1} activated and is {PH2}',
   /**
-   *@description Text in Service Workers View of the Application panel
+   * @description Text in Service Workers View of the Application panel
    */
   stopString: 'Stop',
   /**
-   *@description Text in Service Workers View of the Application panel
-   */
-  inspect: 'Inspect',
-  /**
-   *@description Text in Service Workers View of the Application panel
+   * @description Text in Service Workers View of the Application panel
    */
   startString: 'Start',
   /**
@@ -153,31 +149,31 @@ const UIStrings = {
    */
   sIsRedundant: '#{PH1} is redundant',
   /**
-   *@description Text in Service Workers View of the Application panel
-   *@example {2} PH1
+   * @description Text in Service Workers View of the Application panel
+   * @example {2} PH1
    */
   sWaitingToActivate: '#{PH1} waiting to activate',
   /**
-   *@description Text in Service Workers View of the Application panel
-   *@example {2} PH1
+   * @description Text in Service Workers View of the Application panel
+   * @example {2} PH1
    */
   sTryingToInstall: '#{PH1} trying to install',
   /**
-   *@description Text in Service Workers Update Timeline. Update is a noun.
+   * @description Text in Service Workers Update Timeline. Update is a noun.
    */
   updateCycle: 'Update Cycle',
   /**
-   *@description Text of a DOM element in Service Workers View of the Application panel
-   *@example {example.com} PH1
+   * @description Text of a DOM element in Service Workers View of the Application panel
+   * @example {example.com} PH1
    */
   workerS: 'Worker: {PH1}',
   /**
-   *@description Link text in Service Workers View of the Application panel. When the link is clicked,
+   * @description Link text in Service Workers View of the Application panel. When the link is clicked,
    * the focus is moved to the service worker's client page.
    */
   focus: 'focus',
   /**
-   *@description Link to view all the Service Workers that have been registered.
+   * @description Link to view all the Service Workers that have been registered.
    */
   seeAllRegistrations: 'See all registrations',
 } as const;
@@ -201,14 +197,16 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
       Map<SDK.ServiceWorkerManager.ServiceWorkerManager, Common.EventTarget.EventDescriptor[]>;
 
   constructor() {
-    super(true);
+    super({
+      jslog: `${VisualLogging.pane('service-workers')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(serviceWorkersViewStyles);
 
     // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.currentWorkersView = new UI.ReportView.ReportView(i18n.i18n.lockedString('Service workers'));
     this.currentWorkersView.setBodyScrollable(false);
     this.contentElement.classList.add('service-worker-list');
-    this.contentElement.setAttribute('jslog', `${VisualLogging.pane('service-workers')}`);
     this.currentWorkersView.show(this.contentElement);
     this.currentWorkersView.element.classList.add('service-workers-this-origin');
     this.currentWorkersView.element.setAttribute('jslog', `${VisualLogging.section('this-origin')}`);
@@ -585,14 +583,6 @@ export class Section {
     void this.throttler.schedule(this.update.bind(this));
   }
 
-  private targetForVersionId(versionId: string): SDK.Target.Target|null {
-    const version = this.manager.findVersion(versionId);
-    if (!version?.targetId) {
-      return null;
-    }
-    return SDK.TargetManager.TargetManager.instance().targetById(version.targetId);
-  }
-
   private addVersion(versionsStack: Element, icon: string, label: string): Element {
     const installingEntry = versionsStack.createChild('div', 'service-worker-version');
     installingEntry.createChild('div', icon);
@@ -682,12 +672,6 @@ export class Section {
         const stopButton = UI.UIUtils.createTextButton(
             i18nString(UIStrings.stopString), this.stopButtonClicked.bind(this, active.id), {jslogContext: 'stop'});
         activeEntry.appendChild(stopButton);
-        if (!this.targetForVersionId(active.id)) {
-          const inspectButton = UI.UIUtils.createTextButton(
-              i18nString(UIStrings.inspect), this.inspectButtonClicked.bind(this, active.id),
-              {jslogContext: 'inspect'});
-          activeEntry.appendChild(inspectButton);
-        }
       } else if (active.isStartable()) {
         const startButton = UI.UIUtils.createTextButton(
             i18nString(UIStrings.startString), this.startButtonClicked.bind(this), {jslogContext: 'start'});
@@ -715,14 +699,6 @@ export class Section {
         waitingEntry.createChild('div', 'service-worker-subtitle').textContent =
             i18nString(UIStrings.receivedS, {PH1: new Date(waiting.scriptResponseTime * 1000).toLocaleString()});
       }
-      if (!this.targetForVersionId(waiting.id) && (waiting.isRunning() || waiting.isStarting())) {
-        const inspectButton = UI.UIUtils.createTextButton(
-            i18nString(UIStrings.inspect), this.inspectButtonClicked.bind(this, waiting.id), {
-              title: i18nString(UIStrings.inspect),
-              jslogContext: 'waiting-entry-inspect',
-            });
-        waitingEntry.appendChild(inspectButton);
-      }
     }
     if (installing) {
       const installingEntry = this.addVersion(
@@ -733,14 +709,6 @@ export class Section {
           PH1: new Date(installing.scriptResponseTime * 1000).toLocaleString(),
         });
       }
-      if (!this.targetForVersionId(installing.id) && (installing.isRunning() || installing.isStarting())) {
-        const inspectButton = UI.UIUtils.createTextButton(
-            i18nString(UIStrings.inspect), this.inspectButtonClicked.bind(this, installing.id), {
-              title: i18nString(UIStrings.inspect),
-              jslogContext: 'installing-entry-inspect',
-            });
-        installingEntry.appendChild(inspectButton);
-      }
     }
 
     this.updateCycleView.refresh();
@@ -882,10 +850,6 @@ export class Section {
     void this.manager.stopWorker(versionId);
   }
 
-  private inspectButtonClicked(versionId: string): void {
-    void this.manager.inspectWorker(versionId);
-  }
-
   private wrapWidget(container: Element): Element {
     const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(container, {
       cssFile: [

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

@@ -193,7 +193,7 @@ describeWithMockConnection('SharedStorageEventsView', () => {
     // Use a spy to assert that the sidebar preview pane gets updated when expected.
     const spy = sinon.spy(view, 'setSidebarWidget');
     sinon.assert.notCalled(spy);
-    grid.dispatchEvent(new CustomEvent<Protocol.Storage.SharedStorageAccessedEvent>('select', {detail: EVENTS[0]}));
+    grid.onSelect(EVENTS[0]);
     await raf();
     sinon.assert.calledOnce(spy);
     assert.deepEqual(view.sidebarWidget()?.constructor.name, 'SearchableView');
@@ -210,7 +210,7 @@ describeWithMockConnection('SharedStorageEventsView', () => {
     // Use a spy to assert that the sidebar preview pane gets updated when expected.
     const spy = sinon.spy(view, 'setSidebarWidget');
     sinon.assert.notCalled(spy);
-    grid.dispatchEvent(new CustomEvent<Protocol.Storage.SharedStorageAccessedEvent>('select', {detail: EVENTS[0]}));
+    grid.onSelect(EVENTS[0]);
     await raf();
     sinon.assert.calledOnce(spy);
     assert.deepEqual(view.sidebarWidget()?.constructor.name, 'SearchableView');

package/front_end/panels/application/SharedStorageEventsView.ts

@@ -15,13 +15,13 @@ import sharedStorageEventsViewStyles from './sharedStorageEventsView.css.js';
 
 const UIStrings = {
   /**
-   *@description Placeholder text if no shared storage event has been selected.
+   * @description Placeholder text if no shared storage event has been selected.
    * Shared storage allows to store and access data that can be shared across different sites.
    * A shared storage event is for example an access from a site to that storage.
    */
   noEventSelected: 'No shared storage event selected',
   /**
-   *@description Placeholder text instructing the user how to display shared
+   * @description Placeholder text instructing the user how to display shared
    * storage event details.
    * Shared storage allows to store and access data that can be shared across different sites.
    * A shared storage event is for example an access from a site to that storage.
@@ -47,20 +47,16 @@ export class SharedStorageEventsView extends UI.SplitWidget.SplitWidget {
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('shared-storage-events')}`);
 
-    const topPanel = new UI.Widget.VBox();
     this.#noDisplayView =
         new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noEventSelected), i18nString(UIStrings.clickToDisplayBody));
-
-    topPanel.setMinimumSize(0, 80);
-    this.setMainWidget(topPanel);
     this.#noDisplayView.setMinimumSize(0, 40);
+    this.#sharedStorageEventGrid.setMinimumSize(0, 80);
+    this.#sharedStorageEventGrid.onSelect = this.#onFocus.bind(this);
+
+    this.setMainWidget(this.#sharedStorageEventGrid);
     this.setSidebarWidget(this.#noDisplayView);
     this.hideSidebar();
 
-    topPanel.contentElement.appendChild(this.#sharedStorageEventGrid);
-    this.#sharedStorageEventGrid.addEventListener('select', this.#onFocus.bind(this));
-    this.#sharedStorageEventGrid.setAttribute('jslog', `${VisualLogging.section('events-table')}`);
-
     this.#getMainFrameResourceTreeModel()?.addEventListener(
         SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.clearEvents, this);
   }
@@ -102,24 +98,18 @@ export class SharedStorageEventsView extends UI.SplitWidget.SplitWidget {
     }
 
     this.#events.push(event);
-    this.#sharedStorageEventGrid.data = this.#events;
+    this.#sharedStorageEventGrid.events = this.#events;
   }
 
   clearEvents(): void {
     this.#events = [];
-    this.#sharedStorageEventGrid.data = this.#events;
+    this.#sharedStorageEventGrid.events = this.#events;
     this.setSidebarWidget(this.#noDisplayView);
     this.hideSidebar();
   }
 
-  async #onFocus(event: Event): Promise<void> {
-    const focusedEvent = event as CustomEvent<HTMLElement>;
-    const datastore = focusedEvent.detail;
-    if (!datastore) {
-      return;
-    }
-
-    const jsonView = SourceFrame.JSONView.JSONView.createViewSync(datastore);
+  #onFocus(event: Protocol.Storage.SharedStorageAccessedEvent): void {
+    const jsonView = SourceFrame.JSONView.JSONView.createViewSync(event);
     jsonView.setMinimumSize(0, 40);
     this.setSidebarWidget(jsonView);
   }

package/front_end/panels/application/SharedStorageItemsView.ts

@@ -14,29 +14,29 @@ import {SharedStorageForOrigin} from './SharedStorageModel.js';
 
 const UIStrings = {
   /**
-   *@description Text in SharedStorage Items View of the Application panel
+   * @description Text in SharedStorage Items View of the Application panel
    */
   sharedStorage: 'Shared storage',
   /**
-   *@description Text for announcing that the "Shared Storage Items" table was cleared, that is, all
+   * @description Text for announcing that the "Shared Storage Items" table was cleared, that is, all
    * entries were deleted.
    */
   sharedStorageItemsCleared: 'Shared Storage items cleared',
   /**
-   *@description Text for announcing that the filtered "Shared Storage Items" table was cleared, that is,
+   * @description Text for announcing that the filtered "Shared Storage Items" table was cleared, that is,
    * all filtered entries were deleted.
    */
   sharedStorageFilteredItemsCleared: 'Shared Storage filtered items cleared',
   /**
-   *@description Text for announcing a Shared Storage key/value item has been deleted
+   * @description Text for announcing a Shared Storage key/value item has been deleted
    */
   sharedStorageItemDeleted: 'The storage item was deleted.',
   /**
-   *@description Text for announcing a Shared Storage key/value item has been edited
+   * @description Text for announcing a Shared Storage key/value item has been edited
    */
   sharedStorageItemEdited: 'The storage item was edited.',
   /**
-   *@description Text for announcing a Shared Storage key/value item edit request has been canceled
+   * @description Text for announcing a Shared Storage key/value item edit request has been canceled
    */
   sharedStorageItemEditCanceled: 'The storage item edit was canceled.',
 } as const;
@@ -126,7 +126,7 @@ export class SharedStorageItemsView extends KeyValueStorageItemsView {
       await this.#sharedStorage.clear();
       await this.refreshItems();
       this.sharedStorageItemsDispatcher.dispatchEventToListeners(SharedStorageItemsDispatcher.Events.ITEMS_CLEARED);
-      UI.ARIAUtils.alert(i18nString(UIStrings.sharedStorageItemsCleared));
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.sharedStorageItemsCleared));
       return;
     }
 
@@ -135,14 +135,14 @@ export class SharedStorageItemsView extends KeyValueStorageItemsView {
     await this.refreshItems();
     this.sharedStorageItemsDispatcher.dispatchEventToListeners(
         SharedStorageItemsDispatcher.Events.FILTERED_ITEMS_CLEARED);
-    UI.ARIAUtils.alert(i18nString(UIStrings.sharedStorageFilteredItemsCleared));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.sharedStorageFilteredItemsCleared));
   }
 
   protected override isEditAllowed(columnIdentifier: string, _oldText: string, newText: string): boolean {
     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.
       void this.refreshItems().then(() => {
-        UI.ARIAUtils.alert(i18nString(UIStrings.sharedStorageItemEditCanceled));
+        UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.sharedStorageItemEditCanceled));
       });
       return false;
     }
@@ -154,7 +154,7 @@ export class SharedStorageItemsView extends KeyValueStorageItemsView {
 
     await this.refreshItems();
     this.sharedStorageItemsDispatcher.dispatchEventToListeners(SharedStorageItemsDispatcher.Events.ITEM_EDITED);
-    UI.ARIAUtils.alert(i18nString(UIStrings.sharedStorageItemEdited));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.sharedStorageItemEdited));
   }
 
   #showSharedStorageItems(items: Protocol.Storage.SharedStorageEntry[]): void {
@@ -169,7 +169,7 @@ export class SharedStorageItemsView extends KeyValueStorageItemsView {
     await this.refreshItems();
     this.sharedStorageItemsDispatcher.dispatchEventToListeners(
         SharedStorageItemsDispatcher.Events.ITEM_DELETED, {key} as SharedStorageItemsDispatcher.ItemDeletedEvent);
-    UI.ARIAUtils.alert(i18nString(UIStrings.sharedStorageItemDeleted));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.sharedStorageItemDeleted));
   }
 
   protected async createPreview(key: string, value: string): Promise<UI.Widget.Widget|null> {

package/front_end/panels/application/SharedStorageListTreeElement.ts

@@ -14,7 +14,7 @@ import {SharedStorageEventsView} from './SharedStorageEventsView.js';
 
 const UIStrings = {
   /**
-   *@description Text in SharedStorage Category View of the Application panel
+   * @description Text in SharedStorage Category View of the Application panel
    */
   sharedStorage: 'Shared storage',
 } as const;

package/front_end/panels/application/SharedStorageModel.ts

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

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

@@ -5,10 +5,7 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
-import {
-  createTarget,
-  stubNoopSettings,
-} from '../../testing/EnvironmentHelpers.js';
+import {createTarget, expectConsoleLogs, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -122,6 +119,10 @@ describeWithMockConnection('StorageBucketsTreeElement', function() {
     panel.detach();
   });
 
+  expectConsoleLogs({
+    error: ['Error: No LanguageSelector instance exists yet.'],
+  });
+
   it('shows view on select', async () => {
     assert.exists(storageBucketsModel);
 

package/front_end/panels/application/StorageBucketsTreeElement.ts

@@ -19,20 +19,20 @@ import {ServiceWorkerCacheTreeElement} from './ServiceWorkerCacheTreeElement.js'
 
 const UIStrings = {
   /**
-   *@description Label for an item in the Application Panel Sidebar of the Application panel
+   * @description Label for an item in the Application Panel Sidebar of the Application panel
    * Storage Buckets allow developers to separate site data into buckets so that they can be
    * deleted independently.
    */
   storageBuckets: 'Storage buckets',
   /**
-   *@description Text for an item in the Application Panel
+   * @description Text for an item in the Application Panel
    * if no storage buckets are available to show. Storage Buckets allow developers to separate
    * site data into buckets so that they can be
    * deleted independently. https://developer.chrome.com/docs/web-platform/storage-buckets.
    */
   noStorageBuckets: 'No storage buckets detected',
   /**
-   *@description Description text in the Application Panel describing the storage buckets tab.
+   * @description Description text in the Application Panel describing the storage buckets tab.
    * Storage Buckets allow developers to separate site data into buckets so that they can be
    * deleted independently. https://developer.chrome.com/docs/web-platform/storage-buckets.
    */
@@ -49,7 +49,7 @@ export class StorageBucketsTreeParentElement extends ExpandableApplicationPanelT
     super(
         storagePanel, i18nString(UIStrings.storageBuckets), i18nString(UIStrings.noStorageBuckets),
         i18nString(UIStrings.storageBucketsDescription), 'storage-buckets');
-    const icon = IconButton.Icon.create('database');
+    const icon = IconButton.Icon.create('bucket');
     this.setLeadingIcons([icon]);
     this.setLink(
         'https://github.com/WICG/storage-buckets/blob/gh-pages/explainer.md' as Platform.DevToolsPath.UrlString);

package/front_end/panels/application/StorageItemsToolbar.ts

@@ -16,19 +16,19 @@ import * as ApplicationComponents from './components/components.js';
 
 const UIStrings = {
   /**
-   *@description Text to refresh the page
+   * @description Text to refresh the page
    */
   refresh: 'Refresh',
   /**
-   *@description Text to clear everything
+   * @description Text to clear everything
    */
   clearAll: 'Clear All',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon delete button in the Service Worker Cache Views of the Application panel
+   * @description Tooltip text that appears when hovering over the largeicon delete button in the Service Worker Cache Views of the Application panel
    */
   deleteSelected: 'Delete Selected',
   /**
-   *@description Text that informs screen reader users that the storage table has been refreshed
+   * @description Text that informs screen reader users that the storage table has been refreshed
    */
   refreshedStatus: 'Table refreshed',
 } as const;
@@ -90,7 +90,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElem
       </devtools-toolbar>
       ${input.metadataView}`,
       // clang-format on
-      target, {host: input});
+      target);
 };
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -108,7 +108,7 @@ export class StorageItemsToolbar extends
   #mainToolbarItems: UI.Toolbar.ToolbarItem[] = [];
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(false, false, element);
+    super(element);
     this.#view = view;
     this.filterRegex = null;
   }
@@ -136,7 +136,7 @@ export class StorageItemsToolbar extends
       onFilterChanged: this.filterChanged.bind(this),
       onRefresh: () => {
         this.dispatchEventToListeners(StorageItemsToolbar.Events.REFRESH);
-        UI.ARIAUtils.alert(i18nString(UIStrings.refreshedStatus));
+        UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.refreshedStatus));
       },
       onDeleteAll: () => this.dispatchEventToListeners(StorageItemsToolbar.Events.DELETE_ALL),
       onDeleteSelected: () => this.dispatchEventToListeners(StorageItemsToolbar.Events.DELETE_SELECTED),

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

@@ -5,7 +5,7 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import {dispatchFocusOutEvent} from '../../testing/DOMHelpers.js';
-import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {createTarget, expectConsoleLogs} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {SECURITY_ORIGIN} from '../../testing/ResourceTreeHelpers.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
@@ -27,6 +27,10 @@ describeWithMockConnection('StorageView', () => {
     storageKeyManager = target.model(SDK.StorageKeyManager.StorageKeyManager);
   });
 
+  expectConsoleLogs({
+    error: ['Error: No LanguageSelector instance exists yet.'],
+  });
+
   it('emits correct events on clear', () => {
     const testId = {storageKey: testKey, isLocalStorage: true} as Protocol.DOMStorage.StorageId;
 

package/front_end/panels/application/StorageView.ts

@@ -199,6 +199,17 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.includeThirdPartyCookiesSetting =
         Common.Settings.Settings.instance().createSetting('clear-storage-include-third-party-cookies', false);
 
+    const clearButtonSection = this.reportView.appendSection('', 'clear-storage-button').appendRow();
+    this.clearButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.clearSiteData), this.clear.bind(this), {jslogContext: 'storage.clear-site-data'});
+    this.clearButton.id = 'storage-view-clear-button';
+    clearButtonSection.appendChild(this.clearButton);
+
+    const includeThirdPartyCookiesCheckbox = UI.SettingsUI.createSettingCheckbox(
+        i18nString(UIStrings.includingThirdPartyCookies), this.includeThirdPartyCookiesSetting);
+    includeThirdPartyCookiesCheckbox.classList.add('include-third-party-cookies');
+    clearButtonSection.appendChild(includeThirdPartyCookiesCheckbox);
+
     const quota = this.reportView.appendSection(i18nString(UIStrings.usage));
     quota.element.setAttribute('jslog', `${VisualLogging.section('usage')}`);
     this.quotaRow = quota.appendSelectableRow();
@@ -243,17 +254,6 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     const errorMessageRow = quota.appendRow();
     this.quotaOverrideErrorMessage = errorMessageRow.createChild('div', 'quota-override-error');
 
-    const clearButtonSection = this.reportView.appendSection('', 'clear-storage-button').appendRow();
-    this.clearButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.clearSiteData), this.clear.bind(this), {jslogContext: 'storage.clear-site-data'});
-    this.clearButton.id = 'storage-view-clear-button';
-    clearButtonSection.appendChild(this.clearButton);
-
-    const includeThirdPartyCookiesCheckbox = UI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.includingThirdPartyCookies), this.includeThirdPartyCookiesSetting);
-    includeThirdPartyCookiesCheckbox.classList.add('include-third-party-cookies');
-    clearButtonSection.appendChild(includeThirdPartyCookiesCheckbox);
-
     const application = this.reportView.appendSection(i18nString(UIStrings.application));
     application.element.setAttribute('jslog', `${VisualLogging.section('application')}`);
     this.appendItem(
@@ -438,7 +438,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.clearButton.focus();
     }, 500);
 
-    UI.ARIAUtils.alert(i18nString(UIStrings.SiteDataCleared));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.SiteDataCleared));
   }
 
   static clear(
@@ -519,7 +519,9 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
 
     if (!response.overrideActive && response.quota < 125829120) {  // 120 MB
       const icon = new IconButton.Icon.Icon();
-      icon.data = {iconName: 'info', color: 'var(--icon-info)', width: '14px', height: '14px'};
+      icon.name = 'info';
+      icon.style.color = 'var(--icon-info)';
+      icon.classList.add('small');
       UI.Tooltip.Tooltip.install(this.quotaRow, i18nString(UIStrings.storageQuotaIsLimitedIn));
       this.quotaRow.appendChild(icon);
     }