Streamline DataGridWithPreview API.

Consistently use key/value pairs instead of string array.

Also properly alias long identifiers.

Bug: 301364727
Change-Id: I2ab6820a196c085f4119735d0720e83e267b9072
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6225901
Commit-Queue: Benedikt Meurer <[email protected]>
Reviewed-by: Benedikt Meurer <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/application/DOMStorageItemsView.ts

@@ -167,7 +167,7 @@ export class DOMStorageItemsView extends StorageItemsView {
       return;
     }
 
-    this.grid.addItem([event.data.key, event.data.value]);
+    this.grid.addItem(event.data.key, event.data.value);
   }
 
   private domStorageItemUpdated(event: Common.EventTarget.EventTargetEvent<DOMStorage.DOMStorageItemUpdatedEvent>):
@@ -184,8 +184,17 @@ export class DOMStorageItemsView extends StorageItemsView {
   }
 
   override refreshItems(): void {
-    const filteredItems = (item: string[]): string => `${item[0]} ${item[1]}`;
-    void this.domStorage.getItems().then(items => items && this.grid.showItems(this.filter(items, filteredItems)));
+    void this.#refreshItems();
+  }
+
+  async #refreshItems(): Promise<void> {
+    const items = await this.domStorage.getItems();
+    if (!items) {
+      return;
+    }
+    const filteredItems =
+        this.filter(items.map(item => ({key: item[0], value: item[1]})), item => `${item.key} ${item.value}`);
+    this.grid.showItems(filteredItems);
   }
 
   override deleteAllItems(): void {

front_end/panels/application/ExtensionStorageItemsView.ts

@@ -205,14 +205,21 @@ export class ExtensionStorageItemsView extends StorageItemsView {
   }
 
   override refreshItems(): void {
-    const filteredItems = (item: string[]): string => `${item[0]} ${item[1]}`;
-    void this.#extensionStorage.getItems().then(items => {
-      const itemsArray =
-          Object.entries(items).map(([key, value]) => [key, typeof value === 'string' ? value : JSON.stringify(value)]);
-      items && this.#grid.showItems(this.filter(itemsArray, filteredItems));
-      this.extensionStorageItemsDispatcher.dispatchEventToListeners(
-          ExtensionStorageItemsDispatcher.Events.ITEMS_REFRESHED);
-    });
+    void this.#refreshItems();
+  }
+
+  async #refreshItems(): Promise<void> {
+    const items = await this.#extensionStorage.getItems();
+    if (!items) {
+      return;
+    }
+    const filteredItems = this.filter(
+        Object.entries(items).map(
+            ([key, value]) => ({key, value: typeof value === 'string' ? value : JSON.stringify(value)})),
+        item => `${item.key} ${item.value}`);
+    this.#grid.showItems(filteredItems);
+    this.extensionStorageItemsDispatcher.dispatchEventToListeners(
+        ExtensionStorageItemsDispatcher.Events.ITEMS_REFRESHED);
   }
 
   override deleteAllItems(): void {

front_end/ui/legacy/components/data_grid/DataGridWithPreview.test.ts

@@ -24,8 +24,8 @@ describeWithEnvironment('DataGridWithPreview', () => {
   ] as DataGrid.DataGrid.ColumnDescriptor[];
 
   const MOCK_ITEMS = [
-    ['foo', 'value1'],
-    ['bar', 'value2'],
+    {key: 'foo', value: 'value1'},
+    {key: 'bar', value: 'value2'},
   ];
 
   const createPreviewFunc = sinon.stub<[string, string]>();
@@ -72,7 +72,7 @@ describeWithEnvironment('DataGridWithPreview', () => {
   });
 
   it('updates preview when key selected', async () => {
-    const [key, value] = MOCK_ITEMS[0];
+    const {key, value} = MOCK_ITEMS[0];
 
     const createPreviewPromise = expectCreatePreviewCalled(key, value);
 
@@ -90,7 +90,7 @@ describeWithEnvironment('DataGridWithPreview', () => {
 
   it('shows empty preview when no row is selected', async () => {
     // Select the first item by key.
-    const node = selectNodeByKey(dataGridWithPreview.dataGridForTesting, MOCK_ITEMS[0][0]);
+    const node = selectNodeByKey(dataGridWithPreview.dataGridForTesting, MOCK_ITEMS[0].key);
     assert.isNotNull(node);
 
     await raf();
@@ -106,7 +106,7 @@ describeWithEnvironment('DataGridWithPreview', () => {
   });
 
   it('preview changed when value changes', async () => {
-    const [key, value] = MOCK_ITEMS[0];
+    const {key, value} = MOCK_ITEMS[0];
 
     let createPreviewPromise = expectCreatePreviewCalled(key, value);
 
@@ -121,7 +121,7 @@ describeWithEnvironment('DataGridWithPreview', () => {
     // would trigger the refreshItems callback - which would fetch new data and
     // call showItems again).
     const updatedItems = structuredClone(MOCK_ITEMS);
-    updatedItems[0][1] = 'newValue';
+    updatedItems[0].value = 'newValue';
 
     createPreviewPromise = expectCreatePreviewCalled(key, 'newValue');
     dataGridWithPreview.showItems(updatedItems);

front_end/ui/legacy/components/data_grid/DataGridWithPreview.ts

@@ -29,10 +29,19 @@
  */
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
-import {ARIAUtils, EmptyWidget, SplitWidget, Widget} from '../../legacy.js';
+import * as UI from '../../legacy.js';
 
 import {type ColumnDescriptor, DataGridImpl, DataGridNode, Events} from './DataGrid.js';
 
+const {ARIAUtils} = UI;
+const {EmptyWidget} = UI.EmptyWidget;
+const {SplitWidget} = UI.SplitWidget;
+const {Widget, VBox} = UI.Widget;
+
+type Widget = UI.Widget.Widget;
+type SplitWidget = UI.SplitWidget.SplitWidget;
+type VBox = UI.Widget.VBox;
+
 const UIStrings = {
   /**
    *@description Text that shows in the Applicaiton Panel if no value is selected for preview
@@ -64,7 +73,7 @@ interface Callbacks {
   // Called when the selection state changes.
   setCanDeleteSelected: (canSelect: boolean) => void;
   // Called to create the preview widget when a new item is selected.
-  createPreview: (key: string, value: string) => Promise<Widget.Widget|null>;
+  createPreview: (key: string, value: string) => Promise<Widget|null>;
 }
 
 interface Messages {
@@ -79,9 +88,9 @@ interface Messages {
  */
 export class DataGridWithPreview {
   #dataGrid: DataGridImpl<unknown>;
-  readonly #splitWidget: SplitWidget.SplitWidget;
-  readonly #previewPanel: Widget.VBox;
-  #preview: Widget.Widget|null;
+  readonly #splitWidget: SplitWidget;
+  readonly #previewPanel: VBox;
+  #preview: Widget|null;
   #previewValue: string|null;
 
   #callbacks: Callbacks;
@@ -110,11 +119,11 @@ export class DataGridWithPreview {
     this.#dataGrid.setStriped(true);
     this.#dataGrid.setName(`${id}-datagrid-with-preview`);
 
-    this.#splitWidget = new SplitWidget.SplitWidget(
+    this.#splitWidget = new SplitWidget(
         /* isVertical: */ false, /* secondIsSidebar: */ true, `${id}-split-view-state`);
     this.#splitWidget.show(parent);
 
-    this.#previewPanel = new Widget.VBox();
+    this.#previewPanel = new VBox();
     this.#previewPanel.setMinimumSize(0, 50);
     this.#previewPanel.element.setAttribute('jslog', `${VisualLogging.pane('preview').track({resize: true})}`);
     const resizer = this.#previewPanel.element.createChild('div', 'preview-panel-resizer');
@@ -134,7 +143,7 @@ export class DataGridWithPreview {
     return this.#dataGrid;
   }
 
-  get previewPanelForTesting(): Widget.VBox {
+  get previewPanelForTesting(): VBox {
     return this.#previewPanel;
   }
 
@@ -159,13 +168,10 @@ export class DataGridWithPreview {
     }
   }
 
-  addItem(item: string[]): void {
+  addItem(key: string, value: string): void {
     const rootNode = this.#dataGrid.rootNode();
     const children = rootNode.children;
 
-    const key = item[0];
-    const value = item[1];
-
     for (let i = 0; i < children.length; ++i) {
       if (children[i].data.key === key) {
         return;
@@ -194,7 +200,7 @@ export class DataGridWithPreview {
     this.#callbacks.setCanDeleteSelected(true);
   }
 
-  showItems(items: string[][]): void {
+  showItems(items: {key: string, value: string}[]): void {
     const rootNode = this.#dataGrid.rootNode();
     let selectedKey: null = null;
     for (const node of rootNode.children) {
@@ -208,12 +214,10 @@ export class DataGridWithPreview {
     let selectedNode: DataGridNode<unknown>|null = null;
     const sortDirection = this.#dataGrid.isSortOrderAscending() ? 1 : -1;
     // Make a copy to avoid sorting the original array.
-    const filteredList = [...items].sort(function(item1: string[], item2: string[]): number {
-      return sortDirection * (item1[0] > item2[0] ? 1 : -1);
+    const filteredList = [...items].sort((item1, item2) => {
+      return sortDirection * (item1.key > item2.key ? 1 : -1);
     });
-    for (const item of filteredList) {
-      const key = item[0];
-      const value = item[1];
+    for (const {key, value} of filteredList) {
       const node = new DataGridNode({key, value}, false);
       node.selectable = true;
       rootNode.appendChild(node);
@@ -271,16 +275,15 @@ export class DataGridWithPreview {
     ARIAUtils.alert(this.#messages.itemDeleted);
   }
 
-  showPreview(preview: Widget.Widget|null, value: string|null): void {
+  showPreview(preview: Widget|null, value: string|null): void {
     if (this.#preview && this.#previewValue === value) {
       return;
     }
     if (this.#preview) {
       this.#preview.detach();
     }
     if (!preview) {
-      preview = new EmptyWidget.EmptyWidget(
-          i18nString(UIStrings.noPreviewSelected), i18nString(UIStrings.selectAValueToPreview));
+      preview = new EmptyWidget(i18nString(UIStrings.noPreviewSelected), i18nString(UIStrings.selectAValueToPreview));
     }
     this.#previewValue = value;
     this.#preview = preview;