chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/panels/network/RequestResponseView.test.ts

@@ -1,130 +0,0 @@
-// Copyright 2024 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Platform from '../../core/platform/platform.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
-import {raf, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
-import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
-import * as UI from '../../ui/legacy/legacy.js';
-
-import * as Network from './network.js';
-
-const {urlString} = Platform.DevToolsPath;
-
-describeWithEnvironment('RequestResponseView', () => {
-  it('does show WASM disassembly for WASM module requests', async () => {
-    const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test/module.wasm`, urlString``,
-        null, null, null);
-    request.setContentDataProvider(
-        () => Promise.resolve(new TextUtils.ContentData.ContentData(
-            'AGFzbQEAAAABBQFgAAF/AwIBAAcHAQNiYXIAAAoGAQQAQQILACQEbmFtZQAQD3Nob3ctd2FzbS0yLndhdAEGAQADYmFyAgMBAAA=',
-            true, 'application/wasm')));
-    request.mimeType = 'application/wasm';
-    request.finished = true;
-
-    // This is required, as it otherwise tries to create and wait for a worker to fetch and disassemble wasm
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    sinon.stub(SourceFrame.ResourceSourceFrame.ResourceSourceFrame.prototype as any, 'setContentDataOrError')
-        .callsFake(() => {});
-    const component = new Network.RequestResponseView.RequestResponseView(request);
-    assert.deepEqual(component.getMimeTypeForDisplay(), 'application/wasm');
-    renderElementIntoDOM(component);
-    await component.updateComplete;
-
-    const widget = component.contentElement.querySelector('devtools-widget') as
-            UI.Widget.WidgetElement<SourceFrame.ResourceSourceFrame.SearchableContainer>|
-        null;
-    assert.instanceOf(widget?.getWidget(), SourceFrame.ResourceSourceFrame.SearchableContainer);
-    component.detach();
-  });
-
-  it('shows the BinaryResourceView for binary content', async () => {
-    const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test/image.png`, urlString``,
-        null, null, null);
-    request.setContentDataProvider(
-        () => Promise.resolve(new TextUtils.ContentData.ContentData(
-            'AGFzbQEAAAABBQFgAAF/AwIBAAcHAQNiYXIAAAoGAQQAQQILACQEbmFtZQAQD3Nob3ctd2FzbS0yLndhdAEGAQADYmFyAgMBAAA=',
-            true, 'application/octet-stream')));
-    request.mimeType = 'application/octet-stream';
-    request.finished = true;
-
-    const component = new Network.RequestResponseView.RequestResponseView(request);
-    assert.deepEqual(component.getMimeTypeForDisplay(), 'application/octet-stream');
-    renderElementIntoDOM(component);
-
-    await component.updateComplete;
-
-    const widget = component.contentElement.querySelector('devtools-widget') as
-            UI.Widget.WidgetElement<Network.BinaryResourceView.BinaryResourceView>|
-        null;
-    assert.instanceOf(widget?.getWidget(), Network.BinaryResourceView.BinaryResourceView);
-
-    await raf();
-    component.detach();
-  });
-
-  it('renders a view even if mime type is undefined', async () => {
-    const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test/image.png`, urlString``,
-        null, null, null);
-    request.finished = true;
-
-    const component = new Network.RequestResponseView.RequestResponseView(request);
-    assert.isUndefined(component.getMimeTypeForDisplay());
-
-    renderElementIntoDOM(component);
-    await component.updateComplete;
-
-    const widget = component.contentElement.querySelector('devtools-widget') as
-            UI.Widget.WidgetElement<UI.EmptyWidget.EmptyWidget>|
-        null;
-    assert.instanceOf(widget?.getWidget(), UI.EmptyWidget.EmptyWidget);
-    assert.deepEqual(
-        widget.getWidget()?.contentElement.textContent, 'Failed to load response dataNo network manager for request');
-
-    component.detach();
-  });
-
-  it('forwards calls to reveal position to the SearchableContainer', async () => {
-    const request = SDK.NetworkRequest.NetworkRequest.create(
-        'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test/module.wasm`, urlString``,
-        null, null, null);
-    request.setContentDataProvider(
-        () => Promise.resolve(new TextUtils.ContentData.ContentData(
-            'AGFzbQEAAAABBQFgAAF/AwIBAAcHAQNiYXIAAAoGAQQAQQILACQEbmFtZQAQD3Nob3ctd2FzbS0yLndhdAEGAQADYmFyAgMBAAA=',
-            true, 'application/wasm')));
-    request.mimeType = 'application/wasm';
-    request.finished = true;
-
-    // This is required, as it otherwise tries to create and wait for a worker to fetch and disassemble wasm
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    sinon.stub(SourceFrame.ResourceSourceFrame.ResourceSourceFrame.prototype as any, 'setContentDataOrError')
-        .callsFake(() => {});
-    const component = new Network.RequestResponseView.RequestResponseView(request);
-    assert.deepEqual(component.getMimeTypeForDisplay(), 'application/wasm');
-    renderElementIntoDOM(component);
-
-    await component.updateComplete;
-
-    const widget = component.contentElement.querySelector('devtools-widget') as
-            UI.Widget.WidgetElement<SourceFrame.ResourceSourceFrame.SearchableContainer>|
-        null;
-    const searchableContainer = widget?.getWidget();
-    assert.instanceOf(searchableContainer, SourceFrame.ResourceSourceFrame.SearchableContainer);
-    const searchableSpy = sinon.spy(searchableContainer, 'revealPosition');
-    try {
-      await component.revealPosition(0);
-      sinon.assert.calledOnce(searchableSpy);
-    } catch {
-      assert.fail('Revealing a position should not throw.');
-    }
-
-    component.detach();
-  });
-});

package/front_end/panels/network/RequestTimingView.test.ts

@@ -1,172 +0,0 @@
-// Copyright 2024 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Platform from '../../core/platform/platform.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import * as Protocol from '../../generated/protocol.js';
-import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
-import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
-
-import * as Network from './NetworkTimeCalculator.js';
-import * as RequestTimingView from './RequestTimingView.js';
-
-const {urlString} = Platform.DevToolsPath;
-
-function createNetworkRequest(
-    matchedSource: Protocol.Network.ServiceWorkerRouterSource,
-    actualSource: Protocol.Network.ServiceWorkerRouterSource): SDK.NetworkRequest.NetworkRequest {
-  const request = SDK.NetworkRequest.NetworkRequest.create(
-      'requestId' as Protocol.Network.RequestId, urlString`http://devtools-frontend.test`, urlString``, null, null,
-      null);
-
-  request.mimeType = 'application/wasm';
-  request.finished = true;
-  const timingInfo: Protocol.Network.ResourceTiming = {
-    requestTime: 500,
-    proxyStart: 0,
-    proxyEnd: 0,
-    dnsStart: 0,
-    dnsEnd: 0,
-    connectStart: 0,
-    connectEnd: 0,
-    sslStart: 0,
-    sslEnd: 0,
-    workerReady: 400,
-    workerStart: 500,
-    workerRouterEvaluationStart: -200,
-    workerFetchStart: 600,
-    workerRespondWithSettled: 700,
-    sendStart: 800,
-    sendEnd: 900,
-    pushStart: 0,
-    pushEnd: 0,
-    receiveHeadersStart: 1000,
-    receiveHeadersEnd: 0,
-  };
-  if (matchedSource === Protocol.Network.ServiceWorkerRouterSource.Cache) {
-    timingInfo.workerCacheLookupStart = -100;
-  }
-
-  request.timing = timingInfo;
-  request.serviceWorkerRouterInfo = {
-    ruleIdMatched: 1,
-    matchedSourceType: matchedSource,
-    actualSourceType: actualSource,
-  };
-
-  return request;
-}
-
-describeWithLocale('ResourceTimingView', () => {
-  it('RequestTimeRanges has router evaluation field with SW router source as network', async () => {
-    const request = createNetworkRequest(
-        Protocol.Network.ServiceWorkerRouterSource.Network, Protocol.Network.ServiceWorkerRouterSource.Network);
-    const timingInfo = request.timing as Protocol.Network.ResourceTiming;
-    const timeRanges = RequestTimingView.RequestTimingView.calculateRequestTimeRanges(request, 100);
-    const routerEvaluationTime = timingInfo.workerRouterEvaluationStart as number;
-    const sendStart = timingInfo.sendStart;
-
-    const routerEvaluation = timeRanges.find(
-        timeRange => timeRange.name === RequestTimingView.RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION);
-    assert.isTrue(Boolean(routerEvaluation), 'worker router evaluation exists');
-    assert.strictEqual(routerEvaluation?.start, timingInfo.requestTime + routerEvaluationTime / 1000);
-    assert.strictEqual(routerEvaluation?.end, timingInfo.requestTime + sendStart / 1000);
-
-    const cacheLookup = timeRanges.find(
-        timeRange => timeRange.name === RequestTimingView.RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP);
-    assert.isFalse(Boolean(cacheLookup), 'worker cache lookup does not exist');
-  });
-
-  it('RequestTimeRanges has router evaluation field with SW router source as fetch-event', async () => {
-    const request = createNetworkRequest(
-        Protocol.Network.ServiceWorkerRouterSource.FetchEvent, Protocol.Network.ServiceWorkerRouterSource.FetchEvent);
-    const timingInfo = request.timing as Protocol.Network.ResourceTiming;
-    const timeRanges = RequestTimingView.RequestTimingView.calculateRequestTimeRanges(request, 100);
-    const routerEvaluationTime = timingInfo.workerRouterEvaluationStart as number;
-    const workerStart = timingInfo.workerStart;
-
-    const routerEvaluation = timeRanges.find(
-        timeRange => timeRange.name === RequestTimingView.RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION);
-    assert.isTrue(Boolean(routerEvaluation), 'worker router evaluation exists');
-    assert.strictEqual(routerEvaluation?.start, timingInfo.requestTime + routerEvaluationTime / 1000);
-    assert.strictEqual(routerEvaluation?.end, timingInfo.requestTime + workerStart / 1000);
-
-    const cacheLookup = timeRanges.find(
-        timeRange => timeRange.name === RequestTimingView.RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP);
-    assert.isFalse(Boolean(cacheLookup), 'worker cache lookup does not exist');
-  });
-
-  it('RequestTimeRanges has router evaluation field with SW router source as cache hit', async () => {
-    const request = createNetworkRequest(
-        Protocol.Network.ServiceWorkerRouterSource.Cache, Protocol.Network.ServiceWorkerRouterSource.Cache);
-    const timingInfo = request.timing as Protocol.Network.ResourceTiming;
-    const timeRanges = RequestTimingView.RequestTimingView.calculateRequestTimeRanges(request, 100);
-    const routerEvaluationTime = timingInfo.workerRouterEvaluationStart as number;
-    const cacheLookupStart = timingInfo.workerCacheLookupStart as number;
-
-    const routerEvaluation = timeRanges.find(
-        timeRange => timeRange.name === RequestTimingView.RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION);
-    assert.isTrue(Boolean(routerEvaluation), 'worker router evaluation exists');
-    assert.strictEqual(routerEvaluation?.start, timingInfo.requestTime + routerEvaluationTime / 1000);
-    assert.strictEqual(routerEvaluation?.end, timingInfo.requestTime + cacheLookupStart / 1000);
-
-    const cacheLookup = timeRanges.find(
-        timeRange => timeRange.name === RequestTimingView.RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP);
-    assert.isTrue(Boolean(cacheLookup), 'worker cache lookup does not exist');
-    assert.strictEqual(cacheLookup?.start, timingInfo.requestTime + cacheLookupStart / 1000);
-    assert.strictEqual(cacheLookup?.end, timingInfo.requestTime + timingInfo.receiveHeadersStart / 1000);
-  });
-
-  it('RequestTimeRanges has router evaluation field with SW router source as cache miss', async () => {
-    const request = createNetworkRequest(
-        Protocol.Network.ServiceWorkerRouterSource.Cache, Protocol.Network.ServiceWorkerRouterSource.Network);
-    const timingInfo = request.timing as Protocol.Network.ResourceTiming;
-    const timeRanges = RequestTimingView.RequestTimingView.calculateRequestTimeRanges(request, 100);
-    const routerEvaluationTime = timingInfo.workerRouterEvaluationStart as number;
-    const cacheLookupStart = timingInfo.workerCacheLookupStart as number;
-
-    const routerEvaluation = timeRanges.find(
-        timeRange => timeRange.name === RequestTimingView.RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION);
-    assert.isTrue(Boolean(routerEvaluation), 'worker router evaluation exists');
-    assert.strictEqual(routerEvaluation?.start, timingInfo.requestTime + routerEvaluationTime / 1000);
-    assert.strictEqual(routerEvaluation?.end, timingInfo.requestTime + cacheLookupStart / 1000);
-
-    const cacheLookup = timeRanges.find(
-        timeRange => timeRange.name === RequestTimingView.RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP);
-    assert.isTrue(Boolean(cacheLookup), 'worker cache lookup does not exist');
-    assert.strictEqual(cacheLookup?.start, timingInfo.requestTime + cacheLookupStart / 1000);
-    assert.strictEqual(cacheLookup?.end, timingInfo.requestTime + timingInfo.sendStart / 1000);
-  });
-
-  it('Timing table has router evaluation field with detail tabs', async () => {
-    const request = createNetworkRequest(
-        Protocol.Network.ServiceWorkerRouterSource.Network, Protocol.Network.ServiceWorkerRouterSource.Network);
-
-    const component = new RequestTimingView.RequestTimingView(request, new Network.NetworkTimeCalculator(true));
-    const div = document.createElement('div');
-    renderElementIntoDOM(div);
-    component.markAsRoot();
-    component.show(div);
-
-    // Test if we correctly set details element
-    const routerEvaluationDetailsElement = document.querySelector('.router-evaluation-timing-bar-details');
-    assert.isNotNull(routerEvaluationDetailsElement, 'router evaluation details does not exist');
-    assert.strictEqual(
-        routerEvaluationDetailsElement.childElementCount, 1,
-        'router evaluation details child element count does not match');
-    assert.isNotNull(routerEvaluationDetailsElement.firstElementChild, 'router evaluation first element is non null');
-
-    // Test if we correctly set the tree item inside shadow root
-    const shadowElement = routerEvaluationDetailsElement.firstElementChild.shadowRoot;
-    assert.isNotNull(shadowElement, 'shadow element does not exist');
-    const content = getCleanTextContentFromElements(shadowElement, '.network-fetch-details-treeitem');
-    assert.lengthOf(content, 2, 'does not match the tree item');
-
-    // Check the content of the view. Since the value is set from matched to actual,
-    // the order should be the same.
-    const networkString = String(Protocol.Network.ServiceWorkerRouterSource.Network);
-    assert.strictEqual(content[0], `Matched source: ${networkString}`, 'matched source does not match');
-    assert.strictEqual(content[1], `Actual source: ${networkString}`, 'actual source does not match');
-  });
-});

package/front_end/panels/network/ResourceDirectSocketChunkView.test.ts

@@ -1,335 +0,0 @@
-// Copyright 2025 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import * as Common from '../../core/common/common.js';
-import * as Platform from '../../core/platform/platform.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import * as Protocol from '../../generated/protocol.js';
-import {dispatchClickEvent, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
-import {
-  describeWithEnvironment,
-} from '../../testing/EnvironmentHelpers.js';
-import {
-  setUpEnvironment,
-} from '../../testing/OverridesHelpers.js';
-import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
-
-import * as Network from './network.js';
-
-const {urlString} = Platform.DevToolsPath;
-
-function createNetworkRequest(type: SDK.NetworkRequest.DirectSocketType) {
-  const networkRequest = SDK.NetworkRequest.NetworkRequest.createForSocket(
-      'requestId' as Protocol.Network.RequestId, urlString`www.example.com/some/path:3000`);
-  networkRequest.hasNetworkData = true;
-  networkRequest.setRemoteAddress('www.example.com', 3000);
-
-  switch (type) {
-    case SDK.NetworkRequest.DirectSocketType.TCP:
-      networkRequest.protocol = 'tcp';
-      break;
-    case SDK.NetworkRequest.DirectSocketType.UDP_BOUND, SDK.NetworkRequest.DirectSocketType.UDP_CONNECTED:
-      networkRequest.protocol = 'udp';
-      break;
-  }
-
-  networkRequest.statusText = 'Opening';
-  networkRequest.directSocketInfo = {
-    type,
-    status: SDK.NetworkRequest.DirectSocketStatus.OPEN,
-    createOptions: {
-      remoteAddr: 'www.example.com/some/path',
-      remotePort: 3000,
-      noDelay: false,
-      keepAliveDelay: 1001,
-      sendBufferSize: 1002,
-      receiveBufferSize: 1003,
-      dnsQueryType: Protocol.Network.DirectSocketDnsQueryType.Ipv4,
-    },
-    openInfo: {remoteAddr: 'www.sample.com', remotePort: 3005, localAddr: '127.0.0.1', localPort: 9472}
-  };
-  networkRequest.setResourceType(Common.ResourceType.resourceTypes.DirectSocket);
-  networkRequest.setIssueTime(Date.now(), Date.now());
-  return networkRequest;
-}
-
-describeWithEnvironment('ResourceDirectSocketChunkView', () => {
-  let chunkView: Network.ResourceDirectSocketChunkView.ResourceDirectSocketChunkView|undefined;
-
-  beforeEach(() => {
-    setUpEnvironment();
-    Common.Settings.Settings.instance().clearAll();
-  });
-
-  afterEach(() => {
-    if (chunkView) {
-      chunkView.detach();
-      chunkView = undefined;
-    }
-  });
-
-  async function renderView(request: SDK.NetworkRequest.NetworkRequest):
-      Promise<Network.ResourceDirectSocketChunkView.ResourceDirectSocketChunkView> {
-    const container = document.createElement('div');
-    renderElementIntoDOM(container);
-
-    const view = new Network.ResourceDirectSocketChunkView.ResourceDirectSocketChunkView(request);
-    view.markAsRoot();
-    view.show(container);
-
-    view.getFilterInputForTest().setValue('', false);
-
-    return view;
-  }
-
-  for (const [testName, type] of [
-           ['tcp', SDK.NetworkRequest.DirectSocketType.TCP],
-           ['udp_connected', SDK.NetworkRequest.DirectSocketType.UDP_CONNECTED],
-  ]) {
-    it(`renders ${testName} messages with correct columns`, async () => {
-      const request = createNetworkRequest(type as SDK.NetworkRequest.DirectSocketType);
-      request.addDirectSocketChunk({
-        data: 'c29tZSBkYXRh',
-        type: SDK.NetworkRequest.DirectSocketChunkType.SEND,
-        timestamp: 1700000000.123,
-      });
-      request.addDirectSocketChunk({
-        data: 'c29tZSBkYXRhIDI=',
-        type: SDK.NetworkRequest.DirectSocketChunkType.RECEIVE,
-        timestamp: 1700000001.456,
-      });
-
-      chunkView = await renderView(request);
-      await RenderCoordinator.done();
-
-      assertGridData(chunkView, [
-        ['c29tZSBkYXRh', '9\xA0B', '22:13:20.123'],
-        ['c29tZSBkYXRhIDI=', '11\xA0B', '22:13:21.456'],
-      ]);
-    });
-  }
-
-  it('renders UDP bound messages with correct columns', async () => {
-    const request = createNetworkRequest(SDK.NetworkRequest.DirectSocketType.UDP_BOUND);
-    request.addDirectSocketChunk({
-      data: 'c29tZSBkYXRh',
-      type: SDK.NetworkRequest.DirectSocketChunkType.SEND,
-      timestamp: 1700000000.123,
-      remoteAddress: '192.168.0.1',
-      remotePort: 12345,
-    });
-    request.addDirectSocketChunk({
-      data: 'c29tZSBkYXRhIDI=',
-      type: SDK.NetworkRequest.DirectSocketChunkType.RECEIVE,
-      timestamp: 1700000001.456,
-      remoteAddress: '134.168.0.1',
-      remotePort: 54321,
-    });
-
-    chunkView = await renderView(request);
-    await RenderCoordinator.done();
-
-    assertGridData(chunkView, [
-      ['c29tZSBkYXRh', '192.168.0.1', '12345', '9\xA0B', '22:13:20.123'],
-      ['c29tZSBkYXRhIDI=', '134.168.0.1', '54321', '11\xA0B', '22:13:21.456'],
-    ]);
-  });
-
-  it('shows binary view on click', async () => {
-    const request = createNetworkRequest(SDK.NetworkRequest.DirectSocketType.TCP);
-    request.addDirectSocketChunk({
-      data: 'c29tZSBkYXRh',
-      type: SDK.NetworkRequest.DirectSocketChunkType.SEND,
-      timestamp: 1700000000.123,
-    });
-
-    chunkView = await renderView(request);
-    await RenderCoordinator.done();
-
-    const dataGrid = chunkView.getDataGridForTest();
-    dataGrid.rootNode().children[0].select();
-    await RenderCoordinator.done();
-
-    const splitWidget = chunkView.getSplitWidgetForTest();
-    const sidebarWidget = splitWidget.sidebarWidget();
-    assert.instanceOf(sidebarWidget, Network.BinaryResourceView.BinaryResourceView);
-  });
-
-  it('clears messages with "Clear All" button', async () => {
-    const request = createNetworkRequest(SDK.NetworkRequest.DirectSocketType.TCP);
-    request.addDirectSocketChunk({
-      data: 'c29tZSBkYXRh',
-      type: SDK.NetworkRequest.DirectSocketChunkType.SEND,
-      timestamp: 1700000000.123,
-    });
-
-    chunkView = await renderView(request);
-    await RenderCoordinator.done();
-    assertGridData(chunkView, [['c29tZSBkYXRh', '9\xA0B', '22:13:20.123']]);
-
-    const clearButton = chunkView.getClearAllButtonForTest();
-
-    dispatchClickEvent(clearButton.element);
-    await RenderCoordinator.done();
-
-    assertGridData(chunkView, []);
-  });
-
-  it('filters messages by regex', async () => {
-    const request = createNetworkRequest(SDK.NetworkRequest.DirectSocketType.TCP);
-    request.addDirectSocketChunk({
-      data: 'c29tZSBkYXRhIDE=',
-      type: SDK.NetworkRequest.DirectSocketChunkType.SEND,
-      timestamp: 1700000000.123,
-    });
-    request.addDirectSocketChunk({
-      data: 'b3RoZXIgZGF0YSAy',
-      type: SDK.NetworkRequest.DirectSocketChunkType.RECEIVE,
-      timestamp: 1700000001.456,
-    });
-    request.addDirectSocketChunk({
-      data: 'c29tZSBkYXRhIDM=',
-      type: SDK.NetworkRequest.DirectSocketChunkType.SEND,
-      timestamp: 1700000002.789,
-    });
-
-    chunkView = await renderView(request);
-
-    const filterInput = chunkView.getFilterInputForTest();
-    filterInput.setValue('c29tZ', true);
-    await RenderCoordinator.done();
-
-    assertGridData(chunkView, [
-      ['c29tZSBkYXRhIDE=', '11\xA0B', '22:13:20.123'],
-      ['c29tZSBkYXRhIDM=', '11\xA0B', '22:13:22.789'],
-    ]);
-
-    filterInput.setValue('b3Ro', true);
-    await RenderCoordinator.done();
-    assertGridData(chunkView, [
-      ['b3RoZXIgZGF0YSAy', '12\xA0B', '22:13:21.456'],
-    ]);
-  });
-
-  it('filters messages by type (SEND/RECEIVE/ALL)', async () => {
-    const request = createNetworkRequest(SDK.NetworkRequest.DirectSocketType.TCP);
-    request.addDirectSocketChunk({
-      data: 'c2VuZA==',
-      type: SDK.NetworkRequest.DirectSocketChunkType.SEND,
-      timestamp: 1700000000.123,
-    });
-    request.addDirectSocketChunk({
-      data: 'cmVjZWl2ZQ==',
-      type: SDK.NetworkRequest.DirectSocketChunkType.RECEIVE,
-      timestamp: 1700000001.456,
-    });
-
-    chunkView = await renderView(request);
-    const filterCombobox = chunkView.getFilterTypeComboboxForTest();
-
-    // Filter by SEND.
-    filterCombobox.element.value = 'send';
-    filterCombobox.element.dispatchEvent(new Event('change'));
-    await RenderCoordinator.done();
-    assertGridData(chunkView, [['c2VuZA==', '4\xA0B', '22:13:20.123']]);
-
-    // Filter by RECEIVE.
-    filterCombobox.element.value = 'receive';
-    filterCombobox.element.dispatchEvent(new Event('change'));
-    await RenderCoordinator.done();
-    assertGridData(chunkView, [['cmVjZWl2ZQ==', '7\xA0B', '22:13:21.456']]);
-
-    // Filter by ALL.
-    filterCombobox.element.value = 'all';
-    filterCombobox.element.dispatchEvent(new Event('change'));
-    await RenderCoordinator.done();
-    assertGridData(chunkView, [
-      ['c2VuZA==', '4\xA0B', '22:13:20.123'],
-      ['cmVjZWl2ZQ==', '7\xA0B', '22:13:21.456'],
-    ]);
-  });
-
-  it('sorts messages by time column (ASC/DESC)', async () => {
-    const request = createNetworkRequest(SDK.NetworkRequest.DirectSocketType.TCP);
-    request.addDirectSocketChunk({
-      data: 'MQ==',
-      type: SDK.NetworkRequest.DirectSocketChunkType.SEND,
-      timestamp: 1700000001.123,
-    });
-    request.addDirectSocketChunk({
-      data: 'Mg==',
-      type: SDK.NetworkRequest.DirectSocketChunkType.RECEIVE,
-      timestamp: 1700000000.456,
-    });
-
-    chunkView = await renderView(request);
-    await RenderCoordinator.done();
-
-    // Initial sort is ASC by time.
-    assertGridData(chunkView, [
-      ['Mg==', '1\xA0B', '22:13:20.456'],
-      ['MQ==', '1\xA0B', '22:13:21.123'],
-    ]);
-
-    // Click time header to sort DESC.
-    const dataGrid = chunkView.getDataGridForTest();
-    const timeHeader = dataGrid.element.querySelector('th[jslog*="context: time"]');
-    assert.instanceOf(timeHeader, HTMLTableCellElement);
-    dispatchClickEvent(timeHeader);
-    await RenderCoordinator.done();
-    assertGridData(chunkView, [
-      ['MQ==', '1\xA0B', '22:13:21.123'],
-      ['Mg==', '1\xA0B', '22:13:20.456'],
-    ]);
-
-    // Click time header to sort ASC again.
-    dispatchClickEvent(timeHeader);
-    await RenderCoordinator.done();
-    assertGridData(chunkView, [
-      ['Mg==', '1\xA0B', '22:13:20.456'],
-      ['MQ==', '1\xA0B', '22:13:21.123'],
-    ]);
-  });
-});
-
-function assertTime(actual: string, expectedMillis: string): void {
-  assert.match(actual, /\d{2}:\d{2}:\d{2}\.\d{3}/);
-  assert.isTrue(actual.endsWith(expectedMillis));
-}
-
-function getInnerTextOfGrid(view: Network.ResourceDirectSocketChunkView.ResourceDirectSocketChunkView): string[][] {
-  const grid = view.getDataGridForTest();
-  return grid.rootNode().children.map(row => {
-    return Object.keys(row.data).map(key => {
-      const value = row.data[key];
-
-      if (value instanceof HTMLDivElement) {
-        return value.innerText.trim();
-      }
-      return value.toString().trim();
-    });
-  });
-}
-
-function assertGridData(
-    view: Network.ResourceDirectSocketChunkView.ResourceDirectSocketChunkView, rowsExpected: string[][]): void {
-  const actualGridData = getInnerTextOfGrid(view);
-  assert.lengthOf(actualGridData, rowsExpected.length, 'Number of rows should match');
-
-  for (let i = 0; i < rowsExpected.length; i++) {
-    const expectedRow = rowsExpected[i];
-    const actualRow = actualGridData[i];
-    assert.lengthOf(actualRow, expectedRow.length, `Number of columns in row ${i} should match`);
-
-    // Time is always the last column. It is checked differently,
-    // because the time is converted using local timezone.
-    for (let j = 0; j < expectedRow.length; j++) {
-      if (j === expectedRow.length - 1) {
-        assertTime(actualRow[j], expectedRow[j].substring(expectedRow[j].lastIndexOf('.') + 1));
-      } else {
-        assert.strictEqual(actualRow[j], expectedRow[j], `Row ${i}, Column ${j} data should match`);
-      }
-    }
-  }
-}