chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -53,7 +53,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {PanelUtils} from '../utils/utils.js';
 
-import {type NetworkTimeCalculator} from './NetworkTimeCalculator.js';
+import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 
 const UIStrings = {
   /**
@@ -291,29 +291,12 @@ const UIStrings = {
    */
   dnsAlpnH3JobWonRace:
       '`Chrome` used a `HTTP/3` connection due to the `DNS record` indicating `HTTP/3` support, which won a race against establishing a connection using a different `HTTP` version.',
-  /**
-   *@description Tooltip to explain the resource's overridden status
-   */
-  requestContentHeadersOverridden: 'Both request content and headers are overridden',
-  /**
-   *@description Tooltip to explain the resource's overridden status
-   */
-  requestContentOverridden: 'Request content is overridden',
-  /**
-   *@description Tooltip to explain the resource's overridden status
-   */
-  requestHeadersOverridden: 'Request headers are overridden',
   /**
    *@description Tooltip to explain the resource's initial priority
    *@example {High} PH1
    *@example {Low} PH2
    */
   initialPriorityToolTip: '{PH1}, Initial priority: {PH2}',
-  /**
-   *@description Tooltip to explain why the request has warning icon
-   */
-  thirdPartyPhaseout:
-      'Cookies for this request are blocked either because of Chrome flags or browser configuration. Learn more in the Issues panel.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkDataGridNode.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1078,24 +1061,7 @@ export class NetworkRequestNode extends NetworkNode {
   }
 
   override isFailed(): boolean {
-    if (this.requestInternal.failed && !this.requestInternal.statusCode) {
-      return true;
-    }
-    if (this.requestInternal.statusCode >= 400) {
-      return true;
-    }
-    const signedExchangeInfo = this.requestInternal.signedExchangeInfo();
-    if (signedExchangeInfo !== null && Boolean(signedExchangeInfo.errors)) {
-      return true;
-    }
-    if (this.requestInternal.webBundleInfo()?.errorMessage ||
-        this.requestInternal.webBundleInnerRequestInfo()?.errorMessage) {
-      return true;
-    }
-    if (this.requestInternal.corsErrorStatus()) {
-      return true;
-    }
-    return false;
+    return PanelUtils.isFailedNetworkRequest(this.requestInternal);
   }
 
   private renderPrimaryCell(cell: HTMLElement, columnId: string, text?: string): void {
@@ -1116,7 +1082,7 @@ export class NetworkRequestNode extends NetworkNode {
       cell.addEventListener('focus', () => this.parentView().resetFocus());
 
       // render icons
-      const iconElement = this.getIcon(this.requestInternal);
+      const iconElement = PanelUtils.getIconForNetworkRequest(this.requestInternal);
       cell.appendChild(iconElement);
     }
 
@@ -1127,7 +1093,7 @@ export class NetworkRequestNode extends NetworkNode {
           iconName: 'bundle',
           color: 'var(--icon-info)',
         };
-        const secondIconElement = this.createIconElement(iconData, i18nString(UIStrings.webBundleInnerRequest));
+        const secondIconElement = PanelUtils.createIconElement(iconData, i18nString(UIStrings.webBundleInnerRequest));
         secondIconElement.classList.add('icon');
 
         const networkManager = SDK.NetworkManager.NetworkManager.forRequest(this.requestInternal);
@@ -1153,121 +1119,6 @@ export class NetworkRequestNode extends NetworkNode {
     }
   }
 
-  private createIconElement(iconData: {iconName: string, color: string}, title: string): HTMLElement {
-    const iconElement = document.createElement('div');
-    iconElement.title = title;
-    iconElement.style.setProperty(
-        'mask',
-        `url('${
-            new URL(`../../Images/${iconData.iconName}.svg`, import.meta.url).toString()}')  no-repeat center /99%`);
-    iconElement.style.setProperty('background-color', iconData.color);
-    return iconElement;
-  }
-
-  private getIcon(request: SDK.NetworkRequest.NetworkRequest): HTMLElement {
-    let type = request.resourceType();
-    let iconElement: HTMLElement;
-
-    if (this.isFailed()) {
-      const iconData = {
-        iconName: 'cross-circle-filled',
-        color: 'var(--icon-error)',
-      };
-      iconElement = this.createIconElement(iconData, type.title());
-      iconElement.classList.add('icon');
-
-      return iconElement;
-    }
-
-    if (request.hasThirdPartyCookiePhaseoutIssue()) {
-      const iconData = {
-        iconName: 'warning-filled',
-        color: 'var(--icon-warning)',
-      };
-      iconElement = this.createIconElement(iconData, i18nString(UIStrings.thirdPartyPhaseout));
-      iconElement.classList.add('icon');
-
-      return iconElement;
-    }
-
-    const isHeaderOverriden = request.hasOverriddenHeaders();
-    const isContentOverriden = request.hasOverriddenContent;
-    if (isHeaderOverriden || isContentOverriden) {
-      const iconData = {
-        iconName: 'document',
-        color: 'var(--icon-default)',
-      };
-
-      let title: Common.UIString.LocalizedString;
-      if (isHeaderOverriden && isContentOverriden) {
-        title = i18nString(UIStrings.requestContentHeadersOverridden);
-      } else if (isContentOverriden) {
-        title = i18nString(UIStrings.requestContentOverridden);
-      } else {
-        title = i18nString(UIStrings.requestHeadersOverridden);
-      }
-
-      const iconChildElement = this.createIconElement(iconData, title);
-      iconChildElement.classList.add('icon');
-
-      iconElement = document.createElement('div');
-      iconElement.classList.add('network-override-marker');
-      iconElement.appendChild(iconChildElement);
-
-      return iconElement;
-    }
-
-    // Pick icon based on MIME type in the following cases:
-    // - If the MIME type is 'image': some images have request type of 'fetch' or etc.
-    // - If the request type is 'fetch': everything fetched by service worker has request type 'fetch'.
-    // - If the request type is 'other' and MIME type is 'script', e.g. for wasm files
-    const typeFromMime = Common.ResourceType.ResourceType.fromMimeType(request.mimeType);
-
-    if (typeFromMime !== type && typeFromMime !== Common.ResourceType.resourceTypes.Other) {
-      if (type === Common.ResourceType.resourceTypes.Fetch) {
-        type = typeFromMime;
-      } else if (typeFromMime === Common.ResourceType.resourceTypes.Image) {
-        type = typeFromMime;
-      } else if (
-          type === Common.ResourceType.resourceTypes.Other &&
-          typeFromMime === Common.ResourceType.resourceTypes.Script) {
-        type = typeFromMime;
-      }
-    }
-
-    if (type === Common.ResourceType.resourceTypes.Image) {
-      const previewImage = document.createElement('img');
-      previewImage.classList.add('image-network-icon-preview');
-      previewImage.alt = request.resourceType().title();
-      void request.populateImageSource((previewImage as HTMLImageElement));
-
-      iconElement = document.createElement('div');
-      iconElement.classList.add('image', 'icon');
-      iconElement.appendChild(previewImage);
-
-      return iconElement;
-    }
-
-    // Exclude Manifest here because it has mimeType:application/json but it has its own icon
-    if (type !== Common.ResourceType.resourceTypes.Manifest &&
-        Common.ResourceType.ResourceType.simplifyContentType(request.mimeType) === 'application/json') {
-      const iconData = {
-        iconName: 'file-json',
-        color: 'var(--icon-file-script)',
-      };
-      iconElement = this.createIconElement(iconData, request.resourceType().title());
-      iconElement.classList.add('icon');
-
-      return iconElement;
-    }
-
-    // Others
-    const iconData = PanelUtils.iconDataForResourceType(type);
-    iconElement = this.createIconElement(iconData, request.resourceType().title());
-    iconElement.classList.add('icon');
-    return iconElement;
-  }
-
   private renderStatusCell(cell: HTMLElement): void {
     cell.classList.toggle(
         'network-dim-cell', !this.isFailed() && (this.requestInternal.cached() || !this.requestInternal.statusCode));

package/front_end/panels/network/NetworkFrameGrouper.ts

@@ -9,7 +9,7 @@ import type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.j
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {NetworkGroupNode} from './NetworkDataGridNode.js';
-import {type GroupLookupInterface, type NetworkLogView} from './NetworkLogView.js';
+import type {GroupLookupInterface, NetworkLogView} from './NetworkLogView.js';
 
 export class NetworkFrameGrouper implements GroupLookupInterface {
   private parentView: NetworkLogView;

package/front_end/panels/network/NetworkItemView.ts

@@ -41,7 +41,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
-import {type NetworkTimeCalculator} from './NetworkTimeCalculator.js';
+import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 import {RequestPayloadView} from './RequestPayloadView.js';

package/front_end/panels/network/NetworkLogView.ts

@@ -1491,7 +1491,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     // While creating nodes it may add more entries into staleRequests because redirect request nodes update the parent
     // node so we loop until we have no more stale requests.
     while (this.staleRequests.size) {
-      const request = this.staleRequests.values().next().value;
+      const request = this.staleRequests.values().next().value as SDK.NetworkRequest.NetworkRequest;
       this.staleRequests.delete(request);
       let node = networkRequestToNode.get(request);
       if (!node) {

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -13,13 +13,11 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {type NetworkNode, NetworkRequestNode} from './NetworkDataGridNode.js';
-import {type NetworkLogView} from './NetworkLogView.js';
+import type {NetworkLogView} from './NetworkLogView.js';
 import {NetworkManageCustomHeadersView} from './NetworkManageCustomHeadersView.js';
-import {
-  type NetworkTimeCalculator,
-  type NetworkTransferDurationCalculator,
-  type NetworkTransferTimeCalculator,
-} from './NetworkTimeCalculator.js';
+import type {
+  NetworkTimeCalculator, NetworkTransferDurationCalculator, NetworkTransferTimeCalculator} from
+  './NetworkTimeCalculator.js';
 import {NetworkWaterfallColumn} from './NetworkWaterfallColumn.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -3,21 +3,18 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-
-import networkWaterfallColumnStyles from './networkWaterfallColumn.css.js';
-
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
+import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
-import {type NetworkNode} from './NetworkDataGridNode.js';
+import type {NetworkNode} from './NetworkDataGridNode.js';
 import {RequestTimeRangeNameToColor} from './NetworkOverview.js';
-import {type Label, type NetworkTimeCalculator} from './NetworkTimeCalculator.js';
-
-import {RequestTimeRangeNames, RequestTimingView, type RequestTimeRange} from './RequestTimingView.js';
+import type {Label, NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import networkingTimingTableStyles from './networkTimingTable.css.js';
+import networkWaterfallColumnStyles from './networkWaterfallColumn.css.js';
+import {type RequestTimeRange, RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
 
 const BAR_SPACING = 1;
 

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

@@ -0,0 +1,69 @@
+// Copyright (c) 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 TextUtils from '../../models/text_utils/text_utils.js';
+import {raf} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import * as LinearMemoryInspectorComponents from '../linear_memory_inspector/components/components.js';
+
+import * as Network from './network.js';
+
+describeWithEnvironment('RequestBinaryResponseView', () => {
+  function getMemoryViewer(view: Network.RequestBinaryResponseView.RequestBinaryResponseView):
+      LinearMemoryInspectorComponents.LinearMemoryViewer.LinearMemoryViewer {
+    const inspector = view.contentElement.firstChild as HTMLElement;
+    assert.isNotNull(inspector.shadowRoot);
+
+    const viewer = inspector.shadowRoot.querySelector('devtools-linear-memory-inspector-viewer');
+    assert.instanceOf(viewer, LinearMemoryInspectorComponents.LinearMemoryViewer.LinearMemoryViewer);
+    return viewer;
+  }
+
+  function getAllByteCells(view: Network.RequestBinaryResponseView.RequestBinaryResponseView): string {
+    const viewer = getMemoryViewer(view);
+    assert.isNotNull(viewer.shadowRoot);
+
+    const byteCells = [...viewer.shadowRoot.querySelectorAll('.byte-cell')];
+    return byteCells.map(c => c.textContent).join('');
+  }
+
+  function getAllTextCells(view: Network.RequestBinaryResponseView.RequestBinaryResponseView): string {
+    const viewer = getMemoryViewer(view);
+    assert.isNotNull(viewer.shadowRoot);
+
+    const textCells = [...viewer.shadowRoot.querySelectorAll('.text-cell')];
+    return textCells.map(c => c.textContent).join('');
+  }
+
+  it('shows the initial content of a StreamingContentData', async () => {
+    const streamingContentData = TextUtils.StreamingContentData.StreamingContentData.from(
+        new TextUtils.ContentData.ContentData(window.btoa('abc'), /* isBase64 */ true, 'application/octet-stream'));
+    const view = new Network.RequestBinaryResponseView.RequestBinaryResponseView(streamingContentData);
+    view.markAsRoot();
+    view.show(document.body);
+    await raf();
+
+    assert.strictEqual(getAllByteCells(view), '616263');
+    assert.strictEqual(getAllTextCells(view), 'abc');
+
+    view.detach();
+  });
+
+  it('shows the updated content of a StreamingContentData', async () => {
+    const streamingContentData = TextUtils.StreamingContentData.StreamingContentData.from(
+        new TextUtils.ContentData.ContentData(window.btoa('abc'), /* isBase64 */ true, 'application/octet-stream'));
+    const view = new Network.RequestBinaryResponseView.RequestBinaryResponseView(streamingContentData);
+    view.markAsRoot();
+    view.show(document.body);
+    await raf();
+
+    streamingContentData.addChunk(window.btoa('def'));
+    await raf();
+
+    assert.strictEqual(getAllByteCells(view), '616263646566');
+    assert.strictEqual(getAllTextCells(view), 'abcdef');
+
+    view.detach();
+  });
+});

package/front_end/panels/network/RequestBinaryResponseView.ts

@@ -0,0 +1,67 @@
+// Copyright (c) 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 TextUtils from '../../models/text_utils/text_utils.js';
+import * as LinearMemoryInspector from '../linear_memory_inspector/linear_memory_inspector.js';
+
+/**
+ * Adapter for the linear memory inspector that can show a {@link StreamingContentData}.
+ */
+export class RequestBinaryResponseView extends
+    LinearMemoryInspector.LinearMemoryInspectorPane.LinearMemoryInspectorView {
+  readonly #streamingContentData: TextUtils.StreamingContentData.StreamingContentData;
+  #memory: ContentDataLazyArrayAdapter;
+
+  constructor(streamingContentData: TextUtils.StreamingContentData.StreamingContentData) {
+    const adapter = new ContentDataLazyArrayAdapter();
+    super(adapter, /* address */ 0, 'tabId is unused here', /* hideValueInspector */ true);
+    this.#memory = adapter;
+    this.#streamingContentData = streamingContentData;
+    this.refreshData();
+  }
+
+  override wasShown(): void {
+    this.refreshData();
+    this.#streamingContentData.addEventListener(
+        TextUtils.StreamingContentData.Events.CHUNK_ADDED, this.refreshData, this);
+
+    // No need to call super.wasShown() as we call super.refreshData() ourselves.
+  }
+
+  override willHide(): void {
+    super.willHide();
+    this.#streamingContentData.removeEventListener(
+        TextUtils.StreamingContentData.Events.CHUNK_ADDED, this.refreshData, this);
+  }
+
+  override refreshData(): void {
+    this.#memory.updateWithContentData(this.#streamingContentData.content());
+    super.refreshData();
+  }
+}
+
+/**
+ * A small helper class that serves as the holder for the current content of a
+ * {@link StreamingContentData} in the form of a Uint8Array.
+ *
+ * We can't implement the {@link LazyUint8Array} interface directly on
+ * {@link RequestBinaryResponseView} as we can't pass "this" to the "super" constructor.
+ * So this class acts as a small container cell instead.
+ */
+class ContentDataLazyArrayAdapter implements LinearMemoryInspector.LinearMemoryInspectorController.LazyUint8Array {
+  #memory = new Uint8Array([0]);
+
+  updateWithContentData(contentData: TextUtils.ContentData.ContentData): void {
+    const binaryString = window.atob(contentData.base64);
+    this.#memory = Uint8Array.from(binaryString, m => m.codePointAt(0) as number);
+  }
+
+  getRange(start: number, end: number): Promise<Uint8Array> {
+    return Promise.resolve(this.#memory.slice(start, end));
+  }
+
+  length(): number {
+    return this.#memory.length;
+  }
+}

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

@@ -6,6 +6,7 @@ import type * 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} 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';
@@ -30,12 +31,38 @@ describeWithEnvironment('RequestResponseView', () => {
                          .returns(mockedSourceView);
 
     const component = new Network.RequestResponseView.RequestResponseView(request);
+    const showPreviewSpy = sinon.spy(component, 'showPreview');
     component.markAsRoot();
-    const widget = await component.showPreview();
+    component.show(document.body);
+    const widget = await showPreviewSpy.returnValues[0];
 
     assert.isTrue(viewStub.calledOnceWithExactly(request, 'application/wasm'));
     assert.strictEqual(widget, mockedSourceView);
 
     component.detach();
   });
+
+  it('shows the RequestBinaryResponseView for binary content', async () => {
+    const request = SDK.NetworkRequest.NetworkRequest.create(
+        'requestId' as Protocol.Network.RequestId,
+        'http://devtools-frontend.test/image.png' as Platform.DevToolsPath.UrlString,
+        '' as Platform.DevToolsPath.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);
+    const showPreviewSpy = sinon.spy(component, 'showPreview');
+    component.markAsRoot();
+    component.show(document.body);
+    const widget = await showPreviewSpy.returnValues[0];
+
+    assert.instanceOf(widget, Network.RequestBinaryResponseView.RequestBinaryResponseView);
+
+    await raf();
+    component.detach();
+  });
 });

package/front_end/panels/network/RequestResponseView.ts

@@ -37,6 +37,8 @@ import * as SourceFrame from '../../ui/legacy/components/source_frame/source_fra
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {RequestBinaryResponseView} from './RequestBinaryResponseView.js';
+
 const UIStrings = {
   /**
    *@description Text in Request Response View of the Network panel
@@ -68,9 +70,7 @@ export class RequestResponseView extends UI.Widget.VBox {
     }
 
     const contentData = await request.requestStreamingContent();
-    // Note: Even though WASM is binary data, the source view will disassemble it and show a text representation.
-    if (TextUtils.StreamingContentData.isError(contentData) ||
-        !(contentData.isTextContent || contentData.mimeType === 'application/wasm')) {
+    if (TextUtils.StreamingContentData.isError(contentData)) {
       requestToSourceView.delete(request);
       return null;
     }
@@ -84,14 +84,21 @@ export class RequestResponseView extends UI.Widget.VBox {
       mimeType = request.resourceType().canonicalMimeType() || request.mimeType;
     }
 
-    const isMinified = contentData.mimeType === 'application/wasm' ?
-        false :
-        TextUtils.TextUtils.isMinified(contentData.content().text);
+    const isWasm = contentData.mimeType === 'application/wasm';
+    const isMinified =
+        isWasm || !contentData.isTextContent ? false : TextUtils.TextUtils.isMinified(contentData.content().text);
     const mediaType = Common.ResourceType.ResourceType.mediaTypeForMetrics(
         mimeType, request.resourceType().isFromSourceMap(), isMinified, false, false);
 
     Host.userMetrics.networkPanelResponsePreviewOpened(mediaType);
-    sourceView = SourceFrame.ResourceSourceFrame.ResourceSourceFrame.createSearchableView(request, mimeType);
+
+    if (contentData.isTextContent || isWasm) {
+      // Note: Even though WASM is binary data, the source view will disassemble it and show a text representation.
+      sourceView = SourceFrame.ResourceSourceFrame.ResourceSourceFrame.createSearchableView(request, mimeType);
+    } else {
+      sourceView = new RequestBinaryResponseView(contentData);
+    }
+
     requestToSourceView.set(request, sourceView);
     return sourceView;
   }

package/front_end/panels/network/components/EditableSpan.ts

@@ -15,7 +15,6 @@ export interface EditableSpanData {
 }
 
 export class EditableSpan extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-editable-span`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   #value: string = '';

package/front_end/panels/network/components/HeaderSectionRow.test.ts

@@ -17,7 +17,7 @@ import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import * as NetworkComponents from './components.js';
-import {type EditableSpan} from './EditableSpan.js';
+import type {EditableSpan} from './EditableSpan.js';
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();