chrome-devtools-frontend 1.0.1667564 → 1.0.1669021

package/front_end/panels/network/NetworkLogView.ts

@@ -1575,6 +1575,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
   private reset(): void {
     this.dispatchEventToListeners(Events.RequestActivated, {showPanel: RequestPanelBehavior.HidePanel});
+    this.dispatchEventToListeners(Events.RequestSelected, null);
 
     this.setHoveredNode(null);
     this.columnsInternal.reset();

package/front_end/panels/network/OriginalResourceChunkView.ts

@@ -0,0 +1,340 @@
+
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+/* eslint-disable @devtools/no-imperative-dom-api */
+
+import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
+import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
+import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import type {BinaryResourceView} from './BinaryResourceView.js';
+import viewStyles from './originalResourceChunkView.css.js';
+
+const UIStrings = {
+  /**
+   * @description Text in Event Source Messages View of the Network panel
+   */
+  data: 'Data',
+  /**
+   * @description Text in Messages View of the Network panel
+   */
+  length: 'Length',
+  /**
+   * @description Text that refers to the time
+   */
+  time: 'Time',
+  /**
+   * @description Text to clear everything
+   */
+  clearAll: 'Clear All',
+  /**
+   * @description Text to filter result items
+   */
+  filter: 'Filter',
+  /**
+   * @description Text in Messages View of the Network panel that shows if no message is selected for viewing its content
+   */
+  noMessageSelected: 'No message selected',
+  /**
+   * @description Text in Messages View of the Network panel
+   */
+  selectMessageToBrowseItsContent: 'Select message to browse its content.',
+  /**
+   * @description Text in Messages View of the Network panel
+   */
+  copyMessageD: 'Copy message…',
+  /**
+   * @description A context menu item in the Messages View of the Network panel
+   */
+  copyMessage: 'Copy message',
+  /**
+   * @description Text for everything
+   */
+  all: 'All',
+  /**
+   * @description Text in Messages View of the Network panel
+   */
+  send: 'Send',
+  /**
+   * @description Text in Messages View of the Network panel
+   */
+  receive: 'Receive',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/network/OriginalResourceChunkView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export abstract class OriginalResourceChunkView<Chunk> extends UI.Widget.VBox {
+  private readonly splitWidget: UI.SplitWidget.SplitWidget;
+  private dataGrid: DataGrid.SortableDataGrid.SortableDataGrid<unknown>;
+  private readonly timeComparator: (arg0: DataGrid.SortableDataGrid.SortableDataGridNode<DataGridItem>,
+                                    arg1: DataGrid.SortableDataGrid.SortableDataGridNode<DataGridItem>) => number;
+  private readonly mainToolbar: UI.Toolbar.Toolbar;
+  private readonly clearAllButton: UI.Toolbar.ToolbarButton;
+  private readonly filterTypeCombobox: UI.Toolbar.ToolbarComboBox;
+  protected filterType: string|null = null;
+  private readonly filterTextInput: UI.Toolbar.ToolbarInput;
+  protected filterRegex: RegExp|null = null;
+  private readonly frameEmptyWidget: UI.EmptyWidget.EmptyWidget;
+  private currentSelectedNode?: DataGridItem|null;
+  readonly request: SDK.NetworkRequest.NetworkRequest;
+  private readonly messageFilterSetting: Common.Settings.Setting<string>;
+  private sidebarWidget: UI.Widget.Widget|null = null;
+
+  abstract getRequestChunks(): Chunk[];
+  abstract createGridItem(chunk: Chunk): DataGridItem;
+  abstract chunkFilter(chunk: Chunk): boolean;
+
+  constructor(request: SDK.NetworkRequest.NetworkRequest, messageFilterSettingKey: string,
+              splitWidgetSettingKey: string, dataGridDisplayName: Common.UIString.LocalizedString,
+              filterUsingRegexHint: Common.UIString.LocalizedString) {
+    super();
+    this.messageFilterSetting = Common.Settings.Settings.instance().createSetting(messageFilterSettingKey, '');
+    this.registerRequiredCSS(viewStyles);
+    this.request = request;
+    this.element.classList.add('resource-chunk-view');
+
+    this.splitWidget = new UI.SplitWidget.SplitWidget(false, true, splitWidgetSettingKey);
+    this.splitWidget.show(this.element);
+
+    const columns: DataGrid.DataGrid.ColumnDescriptor[] = this.getColumns();
+
+    this.dataGrid = new DataGrid.SortableDataGrid.SortableDataGrid({
+      displayName: dataGridDisplayName,
+      columns,
+    });
+    this.dataGrid.setRowContextMenuCallback((menu, node) => this.onRowContextMenu(menu, node));
+    this.dataGrid.setEnableAutoScrollToBottom(true);
+    this.dataGrid.setCellClass('resource-chunk-view-td');
+    this.timeComparator = (resourceChunkNodeTimeComparator as
+                               (arg0: DataGrid.SortableDataGrid.SortableDataGridNode<DataGridItem>,
+                                arg1: DataGrid.SortableDataGrid.SortableDataGridNode<DataGridItem>) => number);
+    this.dataGrid.sortNodes(this.timeComparator, false);
+    this.dataGrid.markColumnAsSortedBy('time', DataGrid.DataGrid.Order.Ascending);
+    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SORTING_CHANGED, this.sortItems, this);
+
+    this.dataGrid.setName(splitWidgetSettingKey + '_datagrid');
+    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.SELECTED_NODE, event => {
+      void this.onChunkSelected(event);
+    }, this);
+    this.dataGrid.addEventListener(DataGrid.DataGrid.Events.DESELECTED_NODE, this.onChunkDeselected, this);
+
+    this.mainToolbar = document.createElement('devtools-toolbar');
+
+    this.clearAllButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearAll), 'clear');
+    this.clearAllButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.clearChunks, this);
+    this.mainToolbar.appendToolbarItem(this.clearAllButton);
+
+    this.filterTypeCombobox =
+        new UI.Toolbar.ToolbarComboBox(this.onFilterTypeChanged.bind(this), i18nString(UIStrings.filter));
+    for (const filterItem of FILTER_TYPES) {
+      const option = this.filterTypeCombobox.createOption(filterItem.label(), filterItem.name);
+      this.filterTypeCombobox.addOption(option);
+    }
+    this.mainToolbar.appendToolbarItem(this.filterTypeCombobox);
+
+    this.filterTextInput = new UI.Toolbar.ToolbarFilter(filterUsingRegexHint, 0.4);
+    this.filterTextInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterTextChanged, this);
+    const filter = this.messageFilterSetting.get();
+    if (filter) {
+      this.filterTextInput.setValue(filter);
+    }
+    this.mainToolbar.appendToolbarItem(this.filterTextInput);
+
+    const mainContainer = new UI.Widget.VBox();
+    mainContainer.element.appendChild(this.mainToolbar);
+    this.dataGrid.asWidget().show(mainContainer.element);
+    mainContainer.setMinimumSize(0, 72);
+    this.splitWidget.setMainWidget(mainContainer);
+
+    this.frameEmptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noMessageSelected),
+                                                           i18nString(UIStrings.selectMessageToBrowseItsContent));
+    this.sidebarWidget = this.frameEmptyWidget;
+    this.splitWidget.setSidebarWidget(this.sidebarWidget);
+
+    if (filter) {
+      this.applyFilter(filter);
+    }
+  }
+
+  private onRowContextMenu(contextMenu: UI.ContextMenu.ContextMenu,
+                           node: DataGrid.DataGrid.DataGridNode<unknown>): void {
+    const item = node as DataGridItem;
+    const binaryView = item.binaryView();
+    if (binaryView) {
+      binaryView.addCopyToContextMenu(contextMenu, i18nString(UIStrings.copyMessageD));
+    } else {
+      const dataVal = item.data.data;
+      const textToCopy = typeof dataVal === 'string' ? dataVal : item.dataText();
+      contextMenu.clipboardSection().appendItem(
+          i18nString(UIStrings.copyMessage),
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText.bind(
+              Host.InspectorFrontendHost.InspectorFrontendHostInstance, textToCopy),
+          {jslogContext: 'copy'});
+    }
+    contextMenu.footerSection().appendItem(i18nString(UIStrings.clearAll), this.clearChunks.bind(this),
+                                           {jslogContext: 'clear-all'});
+  }
+
+  getColumns(): DataGrid.DataGrid.ColumnDescriptor[] {
+    return [
+      {id: 'data', title: i18nString(UIStrings.data), sortable: false, weight: 88},
+      {
+        id: 'length',
+        title: i18nString(UIStrings.length),
+        sortable: false,
+        align: DataGrid.DataGrid.Align.RIGHT,
+        weight: 5,
+      },
+      {id: 'time', title: i18nString(UIStrings.time), sortable: true, weight: 7},
+    ];
+  }
+
+  chunkAdded(chunk: Chunk): void {
+    if (!this.chunkFilter(chunk)) {
+      return;
+    }
+    this.dataGrid.insertChild(this.createGridItem(chunk));
+  }
+
+  private clearChunks(): void {
+    // TODO(allada): actually remove frames from request.
+    clearChunkOffsets.set(this.request, this.getRequestChunks().length);
+    this.performUpdate();
+  }
+
+  private onFilterTypeChanged(): void {
+    const val = (this.filterTypeCombobox.selectedOption() as HTMLOptionElement).value;
+    this.filterType = val === 'all' ? null : val;
+    this.performUpdate();
+  }
+
+  private onFilterTextChanged(): void {
+    const text = this.filterTextInput.value();
+    this.messageFilterSetting.set(text);
+    this.applyFilter(text);
+  }
+
+  private applyFilter(text: string): void {
+    if (text) {
+      try {
+        this.filterRegex = new RegExp(text, 'i');
+      } catch {
+        this.filterRegex = new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i');
+      }
+    } else {
+      this.filterRegex = null;
+    }
+    this.performUpdate();
+  }
+
+  private async onChunkSelected(event: Common.EventTarget.EventTargetEvent<DataGrid.DataGrid.DataGridNode<unknown>>):
+      Promise<void> {
+    this.currentSelectedNode = (event.data as DataGridItem);
+    await this.updateSidebar();
+  }
+
+  private onChunkDeselected(): void {
+    this.currentSelectedNode = null;
+    void this.updateSidebar();
+  }
+
+  async updateSidebar(): Promise<void> {
+    if (!this.currentSelectedNode) {
+      this.sidebarWidget = null;
+      this.updateSidebarWidget();
+      return;
+    }
+
+    const content = this.currentSelectedNode.dataText();
+
+    const binaryView = this.currentSelectedNode.binaryView();
+    if (binaryView) {
+      this.sidebarWidget = binaryView;
+      this.updateSidebarWidget();
+      return;
+    }
+
+    const jsonView = await SourceFrame.JSONView.JSONView.createView(content);
+    if (jsonView) {
+      this.sidebarWidget = jsonView;
+      this.updateSidebarWidget();
+      return;
+    }
+
+    this.sidebarWidget = new SourceFrame.ResourceSourceFrame.ResourceSourceFrame(
+        TextUtils.StaticContentProvider.StaticContentProvider.fromString(this.request.url(),
+                                                                         this.request.resourceType(), content),
+        '');
+    this.updateSidebarWidget();
+  }
+
+  private updateSidebarWidget(): void {
+    const activeSidebar = this.sidebarWidget || this.frameEmptyWidget;
+    if (this.splitWidget.sidebarWidget() !== activeSidebar) {
+      this.splitWidget.setSidebarWidget(activeSidebar);
+    }
+  }
+
+  override performUpdate(): void {
+    this.dataGrid.rootNode().removeChildren();
+    let chunks = this.getRequestChunks();
+    const offset = clearChunkOffsets.get(this.request) || 0;
+    chunks = chunks.slice(offset).filter(this.chunkFilter.bind(this));
+    chunks.forEach(chunk => this.dataGrid.insertChild(this.createGridItem(chunk)));
+
+    this.updateSidebarWidget();
+  }
+
+  refresh(): void {
+    this.performUpdate();
+  }
+
+  private sortItems(): void {
+    this.dataGrid.sortNodes(this.timeComparator, !this.dataGrid.isSortOrderAscending());
+  }
+
+  getDataGridForTest(): DataGrid.SortableDataGrid.SortableDataGrid<unknown> {
+    return this.dataGrid;
+  }
+
+  getSplitWidgetForTest(): UI.SplitWidget.SplitWidget {
+    return this.splitWidget;
+  }
+
+  getFilterInputForTest(): UI.Toolbar.ToolbarInput {
+    return this.filterTextInput;
+  }
+  getClearAllButtonForTest(): UI.Toolbar.ToolbarButton {
+    return this.clearAllButton;
+  }
+  getFilterTypeComboboxForTest(): UI.Toolbar.ToolbarComboBox {
+    return this.filterTypeCombobox;
+  }
+}
+
+const FILTER_TYPES: UI.FilterBar.Item[] = [
+  {name: 'all', label: i18nLazyString(UIStrings.all), jslogContext: 'all'},
+  {name: 'send', label: i18nLazyString(UIStrings.send), jslogContext: 'send'},
+  {name: 'receive', label: i18nLazyString(UIStrings.receive), jslogContext: 'receive'},
+];
+
+export abstract class DataGridItem extends DataGrid.SortableDataGrid.SortableDataGridNode<unknown> {
+  abstract binaryView(): BinaryResourceView|null;
+  abstract getTime(): number;
+  abstract dataText(): string;
+  abstract isTextFrame?: boolean;
+}
+
+function resourceChunkNodeTimeComparator(a: DataGridItem, b: DataGridItem): number {
+  return a.getTime() - b.getTime();
+}
+
+const clearChunkOffsets = new WeakMap<SDK.NetworkRequest.NetworkRequest, number>();

package/front_end/panels/network/ResourceChunkView.ts

@@ -54,10 +54,6 @@ const UIStrings = {
    * @description A context menu item in the Messages View of the Network panel
    */
   copyMessage: 'Copy message',
-  /**
-   * @description Text to clear everything
-   */
-  clearAllL: 'Clear all',
   /**
    * @description Text for everything
    */
@@ -84,13 +80,14 @@ export abstract class ResourceChunkView<Chunk> extends UI.Widget.VBox {
   private readonly mainToolbar: UI.Toolbar.Toolbar;
   private readonly clearAllButton: UI.Toolbar.ToolbarButton;
   private readonly filterTypeCombobox: UI.Toolbar.ToolbarComboBox;
-  protected filterType: string|null;
+  protected filterType: string|null = null;
   private readonly filterTextInput: UI.Toolbar.ToolbarInput;
-  protected filterRegex: RegExp|null;
+  protected filterRegex: RegExp|null = null;
   private readonly frameEmptyWidget: UI.EmptyWidget.EmptyWidget;
   private currentSelectedNode?: DataGridItem|null;
   readonly request: SDK.NetworkRequest.NetworkRequest;
   private readonly messageFilterSetting: Common.Settings.Setting<string>;
+  private sidebarWidget: UI.Widget.Widget|null = null;
 
   abstract getRequestChunks(): Chunk[];
   abstract createGridItem(chunk: Chunk): DataGridItem;
@@ -114,7 +111,7 @@ export abstract class ResourceChunkView<Chunk> extends UI.Widget.VBox {
       displayName: dataGridDisplayName,
       columns,
     });
-    this.dataGrid.setRowContextMenuCallback(onRowContextMenu.bind(this));
+    this.dataGrid.setRowContextMenuCallback((menu, node) => this.onRowContextMenu(menu, node));
     this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setCellClass('resource-chunk-view-td');
     this.timeComparator =
@@ -138,21 +135,19 @@ export abstract class ResourceChunkView<Chunk> extends UI.Widget.VBox {
     this.mainToolbar.appendToolbarItem(this.clearAllButton);
 
     this.filterTypeCombobox =
-        new UI.Toolbar.ToolbarComboBox(this.updateFilterSetting.bind(this), i18nString(UIStrings.filter));
+        new UI.Toolbar.ToolbarComboBox(this.onFilterTypeChanged.bind(this), i18nString(UIStrings.filter));
     for (const filterItem of FILTER_TYPES) {
       const option = this.filterTypeCombobox.createOption(filterItem.label(), filterItem.name);
       this.filterTypeCombobox.addOption(option);
     }
     this.mainToolbar.appendToolbarItem(this.filterTypeCombobox);
-    this.filterType = null;
 
     this.filterTextInput = new UI.Toolbar.ToolbarFilter(filterUsingRegexHint, 0.4);
-    this.filterTextInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.updateFilterSetting, this);
+    this.filterTextInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterTextChanged, this);
     const filter = this.messageFilterSetting.get();
     if (filter) {
       this.filterTextInput.setValue(filter);
     }
-    this.filterRegex = null;
     this.mainToolbar.appendToolbarItem(this.filterTextInput);
 
     const mainContainer = new UI.Widget.VBox();
@@ -163,29 +158,31 @@ export abstract class ResourceChunkView<Chunk> extends UI.Widget.VBox {
 
     this.frameEmptyWidget = new UI.EmptyWidget.EmptyWidget(
         i18nString(UIStrings.noMessageSelected), i18nString(UIStrings.selectMessageToBrowseItsContent));
-    this.splitWidget.setSidebarWidget(this.frameEmptyWidget);
+    this.sidebarWidget = this.frameEmptyWidget;
+    this.splitWidget.setSidebarWidget(this.sidebarWidget);
 
     if (filter) {
       this.applyFilter(filter);
     }
+  }
 
-    function onRowContextMenu(
-        this: ResourceChunkView<Chunk>, contextMenu: UI.ContextMenu.ContextMenu,
-        genericNode: DataGrid.DataGrid.DataGridNode<unknown>): void {
-      const node = (genericNode as DataGridItem);
-      const binaryView = node.binaryView();
-      if (binaryView) {
-        binaryView.addCopyToContextMenu(contextMenu, i18nString(UIStrings.copyMessageD));
-      } else {
-        contextMenu.clipboardSection().appendItem(
-            i18nString(UIStrings.copyMessage),
-            Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText.bind(
-                Host.InspectorFrontendHost.InspectorFrontendHostInstance, node.data.data),
-            {jslogContext: 'copy'});
-      }
-      contextMenu.footerSection().appendItem(
-          i18nString(UIStrings.clearAllL), this.clearChunks.bind(this), {jslogContext: 'clear-all'});
+  private onRowContextMenu(contextMenu: UI.ContextMenu.ContextMenu,
+                           node: DataGrid.DataGrid.DataGridNode<unknown>): void {
+    const item = node as DataGridItem;
+    const binaryView = item.binaryView();
+    if (binaryView) {
+      binaryView.addCopyToContextMenu(contextMenu, i18nString(UIStrings.copyMessageD));
+    } else {
+      const dataVal = item.data.data;
+      const textToCopy = typeof dataVal === 'string' ? dataVal : item.dataText();
+      contextMenu.clipboardSection().appendItem(
+          i18nString(UIStrings.copyMessage),
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText.bind(
+              Host.InspectorFrontendHost.InspectorFrontendHostInstance, textToCopy),
+          {jslogContext: 'copy'});
     }
+    contextMenu.footerSection().appendItem(i18nString(UIStrings.clearAll), this.clearChunks.bind(this),
+                                           {jslogContext: 'clear-all'});
   }
 
   getColumns(): DataGrid.DataGrid.ColumnDescriptor[] {
@@ -212,17 +209,22 @@ export abstract class ResourceChunkView<Chunk> extends UI.Widget.VBox {
   private clearChunks(): void {
     // TODO(allada): actually remove frames from request.
     clearChunkOffsets.set(this.request, this.getRequestChunks().length);
-    this.refresh();
+    this.performUpdate();
   }
 
-  private updateFilterSetting(): void {
+  private onFilterTypeChanged(): void {
+    const val = (this.filterTypeCombobox.selectedOption() as HTMLOptionElement).value;
+    this.filterType = val === 'all' ? null : val;
+    this.performUpdate();
+  }
+
+  private onFilterTextChanged(): void {
     const text = this.filterTextInput.value();
     this.messageFilterSetting.set(text);
     this.applyFilter(text);
   }
 
   private applyFilter(text: string): void {
-    const type = (this.filterTypeCombobox.selectedOption() as HTMLOptionElement).value;
     if (text) {
       try {
         this.filterRegex = new RegExp(text, 'i');
@@ -232,46 +234,69 @@ export abstract class ResourceChunkView<Chunk> extends UI.Widget.VBox {
     } else {
       this.filterRegex = null;
     }
-    this.filterType = type === 'all' ? null : type;
-    this.refresh();
+    this.performUpdate();
   }
 
   private async onChunkSelected(event: Common.EventTarget.EventTargetEvent<DataGrid.DataGrid.DataGridNode<unknown>>):
       Promise<void> {
     this.currentSelectedNode = (event.data as DataGridItem);
+    await this.updateSidebar();
+  }
+
+  private onChunkDeselected(): void {
+    this.currentSelectedNode = null;
+    void this.updateSidebar();
+  }
+
+  async updateSidebar(): Promise<void> {
+    if (!this.currentSelectedNode) {
+      this.sidebarWidget = null;
+      this.updateSidebarWidget();
+      return;
+    }
+
     const content = this.currentSelectedNode.dataText();
 
     const binaryView = this.currentSelectedNode.binaryView();
     if (binaryView) {
-      this.splitWidget.setSidebarWidget(binaryView);
+      this.sidebarWidget = binaryView;
+      this.updateSidebarWidget();
       return;
     }
 
     const jsonView = await SourceFrame.JSONView.JSONView.createView(content);
     if (jsonView) {
-      this.splitWidget.setSidebarWidget(jsonView);
+      this.sidebarWidget = jsonView;
+      this.updateSidebarWidget();
       return;
     }
 
-    this.splitWidget.setSidebarWidget(new SourceFrame.ResourceSourceFrame.ResourceSourceFrame(
-        TextUtils.StaticContentProvider.StaticContentProvider.fromString(
-            this.request.url(), this.request.resourceType(), content),
-        ''));
+    this.sidebarWidget = new SourceFrame.ResourceSourceFrame.ResourceSourceFrame(
+        TextUtils.StaticContentProvider.StaticContentProvider.fromString(this.request.url(),
+                                                                         this.request.resourceType(), content),
+        '');
+    this.updateSidebarWidget();
   }
 
-  private onChunkDeselected(): void {
-    this.currentSelectedNode = null;
-    this.splitWidget.setSidebarWidget(this.frameEmptyWidget);
+  private updateSidebarWidget(): void {
+    const activeSidebar = this.sidebarWidget || this.frameEmptyWidget;
+    if (this.splitWidget.sidebarWidget() !== activeSidebar) {
+      this.splitWidget.setSidebarWidget(activeSidebar);
+    }
   }
 
-  refresh(): void {
+  override performUpdate(): void {
     this.dataGrid.rootNode().removeChildren();
-
     let chunks = this.getRequestChunks();
     const offset = clearChunkOffsets.get(this.request) || 0;
-    chunks = chunks.slice(offset);
-    chunks = chunks.filter(this.chunkFilter.bind(this));
+    chunks = chunks.slice(offset).filter(this.chunkFilter.bind(this));
     chunks.forEach(chunk => this.dataGrid.insertChild(this.createGridItem(chunk)));
+
+    this.updateSidebarWidget();
+  }
+
+  refresh(): void {
+    this.performUpdate();
   }
 
   private sortItems(): void {
@@ -307,6 +332,7 @@ export abstract class DataGridItem extends DataGrid.SortableDataGrid.SortableDat
   abstract binaryView(): BinaryResourceView|null;
   abstract getTime(): number;
   abstract dataText(): string;
+  abstract readonly isTextFrame: boolean;
 }
 
 function resourceChunkNodeTimeComparator(a: DataGridItem, b: DataGridItem): number {

package/front_end/panels/network/ResourceDirectSocketChunkView.ts

@@ -13,7 +13,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {BinaryResourceView} from './BinaryResourceView.js';
-import {DataGridItem, ResourceChunkView} from './ResourceChunkView.js';
+import {DataGridItem, OriginalResourceChunkView} from './OriginalResourceChunkView.js';
 
 const UIStrings = {
   /**
@@ -48,7 +48,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/ResourceDirectSocketChunkView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class ResourceDirectSocketChunkView extends ResourceChunkView<SDK.NetworkRequest.DirectSocketChunk> {
+export class ResourceDirectSocketChunkView extends OriginalResourceChunkView<SDK.NetworkRequest.DirectSocketChunk> {
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super(
         request, 'network-direct-socket-chunk-filter', 'resource-direct-socket-chunk-split-view-state',
@@ -134,6 +134,7 @@ export class ResourceDirectSocketChunkView extends ResourceChunkView<SDK.Network
 class ResourceChunkNode extends DataGridItem {
   #binaryView: BinaryResourceView|null = null;
   readonly chunk: SDK.NetworkRequest.DirectSocketChunk;
+  override readonly isTextFrame = false;
 
   constructor(chunk: SDK.NetworkRequest.DirectSocketChunk, boundSocket: boolean) {
     const time = new Date(chunk.timestamp * 1000);

package/front_end/panels/network/ResourceWebSocketFrameView.ts

@@ -30,7 +30,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {BinaryResourceView} from './BinaryResourceView.js';
-import {DataGridItem, ResourceChunkView} from './ResourceChunkView.js';
+import {DataGridItem, OriginalResourceChunkView} from './OriginalResourceChunkView.js';
 
 const UIStrings = {
   /**
@@ -91,7 +91,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/ResourceWebSocketFrameV
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-export class ResourceWebSocketFrameView extends ResourceChunkView<SDK.NetworkRequest.WebSocketFrame> {
+export class ResourceWebSocketFrameView extends OriginalResourceChunkView<SDK.NetworkRequest.WebSocketFrame> {
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
     super(
         request, 'network-web-socket-message-filter', 'resource-web-socket-frame-split-view-state',
@@ -159,7 +159,7 @@ const opCodeDescriptions: Array<() => string> = (function(): Array<() => Common.
 
 class ResourceFrameNode extends DataGridItem {
   readonly frame: SDK.NetworkRequest.WebSocketFrame;
-  private readonly isTextFrame: boolean;
+  override readonly isTextFrame: boolean;
   #dataText: string;
   #binaryView: BinaryResourceView|null;
 

package/front_end/panels/network/originalResourceChunkView.css

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2014 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.resource-chunk-view {
+  user-select: text;
+}
+
+.resource-chunk-view .data-grid {
+  flex: auto;
+  border: none;
+
+  .resource-chunk-view-td {
+    border-bottom: 1px solid var(--sys-color-divider);
+  }
+
+  & tr {
+    &.resource-chunk-view-row-send td:first-child::before {
+      content: "\2B06";
+      color: var(--sys-color-tertiary);
+      padding-right: 4px;
+    }
+
+    &.resource-chunk-view-row-receive td:first-child::before {
+      content: "\2B07";
+      color: var(--sys-color-error);
+      padding-right: 4px;
+    }
+
+    &.resource-chunk-view-row-send {
+      background-color: color-mix(in srgb, var(--sys-color-tertiary-container), transparent 50%);
+    }
+
+    &.resource-chunk-view-row-error {
+      background-color: var(--sys-color-surface-error);
+      color: var(--sys-color-on-surface-error);
+    }
+  }
+}
+
+.resource-chunk-view .data-grid .data {
+  background-image: none;
+}
+
+.resource-chunk-view devtools-toolbar {
+  border-bottom: 1px solid var(--sys-color-divider);
+}