chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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.test.ts

@@ -43,7 +43,7 @@ describeWithMockConnection('IndexedDBModel', () => {
 
   describe('StorageKeyAdded', () => {
     it('registers database only when the model is enabled', async () => {
-      const databaseAdeddSpy = sinon.spy(indexedDBModel, 'dispatchEventToListeners');
+      const databaseAddedSpy = sinon.spy(indexedDBModel, 'dispatchEventToListeners');
       const dbNamePromise = new Promise<string>(resolve => {
         indexedDBModel.addEventListener(Resources.IndexedDBModel.Events.DatabaseAdded, event => {
           resolve(event.data.databaseId.name);
@@ -52,7 +52,7 @@ describeWithMockConnection('IndexedDBModel', () => {
       setMockConnectionResponseHandler('IndexedDB.requestDatabaseNames', () => ({databaseNames: ['test-database']}));
 
       manager?.storageBucketCreatedOrUpdated({bucketInfo: testStorageBucketInfo});
-      assert.isFalse(databaseAdeddSpy.calledWithExactly(
+      assert.isFalse(databaseAddedSpy.calledWithExactly(
           Resources.IndexedDBModel.Events.DatabaseAdded as unknown as sinon.SinonMatcher,
           {model: indexedDBModel, databaseId: testDBId}));
 

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});

package/front_end/panels/application/IndexedDBViews.ts

@@ -46,32 +46,34 @@ import type {
   Database, DatabaseId, Entry, Index, IndexedDBModel, ObjectStore, ObjectStoreMetadata} from './IndexedDBModel.js';
 import indexedDBViewsStyles from './indexedDBViews.css.js';
 
+type IDBKeyValue = number|string|Date|IDBKeyValue[];
+
 const {html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Text in Indexed DBViews of the Application panel
+   * @description Text in Indexed DBViews of the Application panel
    */
   version: 'Version',
   /**
-   *@description Text in Indexed DBViews of the Application panel
+   * @description Text in Indexed DBViews of the Application panel
    */
   objectStores: 'Object stores',
   /**
-   *@description Text of button in Indexed DBViews of the Application panel
+   * @description Text of button in Indexed DBViews of the Application panel
    */
   deleteDatabase: 'Delete database',
   /**
-   *@description Text of button in Indexed DBViews of the Application panel
+   * @description Text of button in Indexed DBViews of the Application panel
    */
   refreshDatabase: 'Refresh database',
   /**
-   *@description Text in Application panel IndexedDB delete confirmation dialog
-   *@example {msb} PH1
+   * @description Text in Application panel IndexedDB delete confirmation dialog
+   * @example {msb} PH1
    */
   confirmDeleteDatabase: 'Delete "{PH1}" database?',
   /**
-   *@description Explanation text in Application panel IndexedDB delete confirmation dialog
+   * @description Explanation text in Application panel IndexedDB delete confirmation dialog
    */
   databaseWillBeRemoved: 'The selected database and contained data will be removed.',
   /**
@@ -86,77 +88,77 @@ const UIStrings = {
    */
   objectStoreWillBeCleared: 'The data contained in the selected object store will be removed.',
   /**
-   *@description Text in Indexed DBViews of the Application panel
+   * @description Text in Indexed DBViews of the Application panel
    */
   idb: 'IDB',
   /**
-   *@description Text to refresh the page
+   * @description Text to refresh the page
    */
   refresh: 'Refresh',
   /**
-   *@description Tooltip text that appears when hovering over the delete button in the Indexed DBViews of the Application panel
+   * @description Tooltip text that appears when hovering over the delete button in the Indexed DBViews of the Application panel
    */
   deleteSelected: 'Delete selected',
   /**
-   *@description Tooltip text that appears when hovering over the clear button in the Indexed DBViews of the Application panel
+   * @description Tooltip text that appears when hovering over the clear button in the Indexed DBViews of the Application panel
    */
   clearObjectStore: 'Clear object store',
   /**
-   *@description Text in Indexed DBViews of the Application panel
+   * @description Text in Indexed DBViews of the Application panel
    */
   dataMayBeStale: 'Data may be stale',
   /**
-   *@description Title of needs refresh in indexed dbviews of the application panel
+   * @description Title of needs refresh in indexed dbviews of the application panel
    */
   someEntriesMayHaveBeenModified: 'Some entries may have been modified',
   /**
-   *@description Text in DOMStorage Items View of the Application panel
+   * @description Text in DOMStorage Items View of the Application panel
    */
   keyString: 'Key',
   /**
-   *@description Text in Indexed DBViews of the Application panel
+   * @description Text in Indexed DBViews of the Application panel
    */
   primaryKey: 'Primary key',
   /**
-   *@description Text for the value of something
+   * @description Text for the value of something
    */
   valueString: 'Value',
   /**
-   *@description Data grid name for Indexed DB data grids
+   * @description Data grid name for Indexed DB data grids
    */
   indexedDb: 'Indexed DB',
   /**
-   *@description Text in Indexed DBViews of the Application panel
+   * @description Text in Indexed DBViews of the Application panel
    */
   keyPath: 'Key path: ',
   /**
-   *@description Tooltip text that appears when hovering over the triangle left button in the Indexed DBViews of the Application panel
+   * @description Tooltip text that appears when hovering over the triangle left button in the Indexed DBViews of the Application panel
    */
   showPreviousPage: 'Show previous page',
   /**
-   *@description Tooltip text that appears when hovering over the triangle right button in the Indexed DBViews of the Application panel
+   * @description Tooltip text that appears when hovering over the triangle right button in the Indexed DBViews of the Application panel
    */
   showNextPage: 'Show next page',
   /**
-   *@description Text in Indexed DBViews of the Application panel
+   * @description Text in Indexed DBViews of the Application panel
    */
   filterByKey: 'Filter by key (show keys greater or equal to)',
   /**
-   *@description Text in Context menu for expanding objects in IndexedDB tables
+   * @description Text in Context menu for expanding objects in IndexedDB tables
    */
   expandRecursively: 'Expand Recursively',
   /**
-   *@description Text in Context menu for collapsing objects in IndexedDB tables
+   * @description Text in Context menu for collapsing objects in IndexedDB tables
    */
   collapse: 'Collapse',
   /**
-   *@description Span text content in Indexed DBViews of the Application panel
-   *@example {2} PH1
+   * @description Span text content in Indexed DBViews of the Application panel
+   * @example {2} PH1
    */
   totalEntriesS: 'Total entries: {PH1}',
   /**
-   *@description Text in Indexed DBViews of the Application panel
-   *@example {2} PH1
+   * @description Text in Indexed DBViews of the Application panel
+   * @example {2} PH1
    */
   keyGeneratorValueS: 'Key generator value: {PH1}',
 } as const;
@@ -287,7 +289,11 @@ export class IDBDataView extends UI.View.SimpleView {
   constructor(
       model: IndexedDBModel, databaseId: DatabaseId, objectStore: ObjectStore, index: Index|null,
       refreshObjectStoreCallback: () => void) {
-    super(i18nString(UIStrings.idb));
+    super({
+      title: i18nString(UIStrings.idb),
+      viewId: 'idb',
+      jslog: `${VisualLogging.pane('indexed-db-data-view')}`,
+    });
     this.registerRequiredCSS(indexedDBViewsStyles);
 
     this.model = model;
@@ -296,7 +302,6 @@ export class IDBDataView extends UI.View.SimpleView {
     this.refreshObjectStoreCallback = refreshObjectStoreCallback;
 
     this.element.classList.add('indexed-db-data-view', 'storage-view');
-    this.element.setAttribute('jslog', `${VisualLogging.pane('indexed-db-data-view')}`);
 
     this.refreshButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.refresh), 'refresh');
     this.refreshButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.refreshButtonClicked, this);
@@ -633,6 +638,29 @@ export class IDBDataView extends UI.View.SimpleView {
     this.needsRefresh.setVisible(true);
   }
 
+  private async resolveArrayKey(key: SDK.RemoteObject.RemoteObject): Promise<IDBKeyValue> {
+    const {properties} = await key.getOwnProperties(false /* generatePreview */);
+    if (!properties) {
+      return [];
+    }
+    const result: IDBKeyValue = [];
+    const propertyPromises = properties.filter(property => !isNaN(Number(property.name))).map(async property => {
+      const value = property.value;
+      if (!value) {
+        return;
+      }
+      let propertyValue;
+      if (value.subtype === 'array') {
+        propertyValue = await this.resolveArrayKey(value);
+      } else {
+        propertyValue = value.value;
+      }
+      result[Number(property.name)] = propertyValue;
+    });
+    await Promise.all(propertyPromises);
+    return result;
+  }
+
   private async deleteButtonClicked(node: DataGrid.DataGrid.DataGridNode<unknown>|null): Promise<void> {
     if (!node) {
       node = this.dataGrid.selectedNode;
@@ -641,9 +669,7 @@ export class IDBDataView extends UI.View.SimpleView {
       }
     }
     const key = (this.isIndex ? node.data['primary-key'] : node.data.key as SDK.RemoteObject.RemoteObject);
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const keyValue = (key.value as string | number | any[] | Date);
+    const keyValue: IDBKeyValue = key.subtype === 'array' ? await this.resolveArrayKey(key) : key.value;
     await this.model.deleteEntries(this.databaseId, this.objectStore.name, window.IDBKeyRange.only(keyValue));
     this.refreshObjectStoreCallback();
   }

package/front_end/panels/application/InterestGroupStorageModel.ts

@@ -101,6 +101,9 @@ export class InterestGroupStorageModel extends SDK.SDKModel.SDKModel<EventTypes>
   }
   attributionReportingReportSent(_event: Protocol.Storage.AttributionReportingReportSentEvent): void {
   }
+  attributionReportingVerboseDebugReportSent(_event: Protocol.Storage.AttributionReportingVerboseDebugReportSentEvent):
+      void {
+  }
 }
 
 SDK.SDKModel.SDKModel.register(

package/front_end/panels/application/InterestGroupStorageView.ts

@@ -14,7 +14,7 @@ import interestGroupStorageViewStyles from './interestGroupStorageView.css.js';
 
 const UIStrings = {
   /**
-   *@description Placeholder text shown when nothing has been selected for display
+   * @description Placeholder text shown when nothing has been selected for display
    *details.
    * An interest group is an ad targeting group stored on the browser that can
    * be used to show a certain set of advertisements in the future as the
@@ -22,7 +22,7 @@ const UIStrings = {
    */
   noValueSelected: 'No interest group selected',
   /**
-   *@description Placeholder text instructing the user how to display interest group
+   * @description Placeholder text instructing the user how to display interest group
    *details.
    * An interest group is an ad targeting group stored on the browser that can
    * be used to show a certain set of advertisements in the future as the
@@ -30,12 +30,12 @@ const UIStrings = {
    */
   clickToDisplayBody: 'Select any interest group event to display the group\'s current state',
   /**
-   *@description Placeholder text telling the user no details are available for
+   * @description Placeholder text telling the user no details are available for
    *the selected interest group.
    */
   noDataAvailable: 'No details available',
   /**
-   *@description Placeholder text explaining to the user a potential reason for not having details on
+   * @description Placeholder text explaining to the user a potential reason for not having details on
    * the interest groups.
    * An interest group is an ad targeting group stored on the browser that can
    * be used to show a certain set of advertisements in the future as the

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -15,7 +15,7 @@ import type {ResourcesPanel} from './ResourcesPanel.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
    * An interest group is an ad targeting group stored on the browser that can
    * be used to show a certain set of advertisements in the future as the
    * outcome of a FLEDGE auction. (https://developer.chrome.com/blog/fledge-api/)

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -47,24 +47,24 @@ type VBox = UI.Widget.VBox;
 
 const UIStrings = {
   /**
-   *@description Text that shows in the Applicaiton Panel if no value is selected for preview
+   * @description Text that shows in the Application Panel if no value is selected for preview
    */
   noPreviewSelected: 'No value selected',
   /**
-   *@description Preview text when viewing storage in Application panel
+   * @description Preview text when viewing storage in Application panel
    */
   selectAValueToPreview: 'Select a value to preview',
   /**
-   *@description Text for announcing number of entries after filtering
-   *@example {5} PH1
+   * @description Text for announcing number of entries after filtering
+   * @example {5} PH1
    */
   numberEntries: 'Number of entries shown in table: {PH1}',
   /**
-   *@description Text in DOMStorage Items View of the Application panel
+   * @description Text in DOMStorage Items View of the Application panel
    */
   key: 'Key',
   /**
-   *@description Text for the value of something
+   * @description Text for the value of something
    */
   value: 'Value',
 } as const;
@@ -163,10 +163,10 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
               </devtools-widget>
             </devtools-split-view>`,
             // clang-format on
-            target, {host: input});
+            target);
       };
     }
-    super(false);
+    super();
     this.metadataView = metadataView;
     this.#editable = editable;
     this.#view = view;
@@ -213,7 +213,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
         this.#isSortOrderAscending = event.detail.ascending;
       },
       onCreate: (event: CustomEvent<{key: string, value: string}>) => {
-        this.#createCallback(event.detail.key, event.detail.value);
+        this.#createCallback(event.detail.key, event.detail.value || '');
       },
       onEdit:
           (event: CustomEvent<{node: HTMLElement, columnId: string, valueBeforeEditing: string, newText: string}>) => {
@@ -294,7 +294,7 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     }
     this.performUpdate();
     this.#toolbar?.setCanDeleteSelected(Boolean(this.#selectedKey));
-    ARIAUtils.alert(i18nString(UIStrings.numberEntries, {PH1: this.#items.length}));
+    ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.numberEntries, {PH1: this.#items.length}));
   }
 
   deleteSelectedItem(): void {

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -14,75 +14,75 @@ import openedWindowDetailsViewStyles from './openedWindowDetailsView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Timeline indicating that input has happened recently
+   * @description Text in Timeline indicating that input has happened recently
    */
   yes: 'Yes',
   /**
-   *@description Text in Timeline indicating that input has not happened recently
+   * @description Text in Timeline indicating that input has not happened recently
    */
   no: 'No',
   /**
-   *@description Title for a link to the Elements panel
+   * @description Title for a link to the Elements panel
    */
   clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
-   *@description Name of a network resource type
+   * @description Name of a network resource type
    */
   document: 'Document',
   /**
-   *@description Text for web URLs
+   * @description Text for web URLs
    */
   url: 'URL',
   /**
-   *@description Title of the 'Security' tool
+   * @description Title of the 'Security' tool
    */
   security: 'Security',
   /**
-   *@description Label for link to Opener Frame in Detail View for Opened Window
+   * @description Label for link to Opener Frame in Detail View for Opened Window
    */
   openerFrame: 'Opener Frame',
   /**
-   *@description Label in opened window's details view whether window has access to its opener
+   * @description Label in opened window's details view whether window has access to its opener
    */
   accessToOpener: 'Access to opener',
   /**
-   *@description Description for the 'Access to Opener' field
+   * @description Description for the 'Access to Opener' field
    */
   showsWhetherTheOpenedWindowIs: 'Shows whether the opened window is able to access its opener and vice versa',
   /**
-   *@description Text in Frames View of the Application panel
+   * @description Text in Frames View of the Application panel
    */
   windowWithoutTitle: 'Window without title',
   /**
-   *@description Label suffix in the Application Panel Frames section for windows which are already closed
+   * @description Label suffix in the Application Panel Frames section for windows which are already closed
    */
   closed: 'closed',
   /**
-   *@description Default name for worker
+   * @description Default name for worker
    */
   worker: 'worker',
   /**
-   *@description Text that refers to some types
+   * @description Text that refers to some types
    */
   type: 'Type',
   /**
-   *@description Section header in the Frame Details view
+   * @description Section header in the Frame Details view
    */
   securityIsolation: 'Security & Isolation',
   /**
-   *@description Row title in the Frame Details view
+   * @description Row title in the Frame Details view
    */
   crossoriginEmbedderPolicy: 'Cross-Origin Embedder Policy',
   /**
-   *@description Label for worker type: web worker
+   * @description Label for worker type: web worker
    */
   webWorker: 'Web Worker',
   /**
-   *@description Text for an unspecified service worker response source
+   * @description Text for an unspecified service worker response source
    */
   unknown: 'Unknown',
   /**
-   *@description This label specifies the server endpoints to which the server is reporting errors
+   * @description This label specifies the server endpoints to which the server is reporting errors
    *and warnings through the Report-to API. Following this label will be the URL of the server.
    */
   reportingTo: 'reporting to',

package/front_end/panels/application/PreloadingTreeElement.ts

@@ -14,15 +14,15 @@ 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
    */
   speculativeLoads: 'Speculative loads',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   rules: 'Rules',
   /**
-   *@description Text in Application Panel Sidebar of the Application panel
+   * @description Text in Application Panel Sidebar of the Application panel
    */
   speculations: 'Speculations',
 } as const;
@@ -45,7 +45,7 @@ class PreloadingTreeElementBase<View extends PreloadingRuleSetView|PreloadingAtt
     this.#viewConstructor = viewConstructor;
     this.#path = path;
 
-    const icon = IconButton.Icon.create('arrow-up-down');
+    const icon = IconButton.Icon.create('speculative-loads');
     this.setLeadingIcons([icon]);
     this.#selectedInternal = false;
 
@@ -94,7 +94,7 @@ export class PreloadingSummaryTreeElement extends ExpandableApplicationPanelTree
   constructor(panel: ResourcesPanel) {
     super(panel, i18nString(UIStrings.speculativeLoads), '', '', 'preloading');
 
-    const icon = IconButton.Icon.create('arrow-up-down');
+    const icon = IconButton.Icon.create('speculative-loads');
     this.setLeadingIcons([icon]);
     this.#selectedInternal = false;
 

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -14,7 +14,7 @@ import type {ResourcesPanel} from './ResourcesPanel.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
    */
   reportingApi: 'Reporting API',
 } as const;