chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/network/NetworkItemView.ts

@@ -55,56 +55,56 @@ import {ResourceWebSocketFrameView} from './ResourceWebSocketFrameView.js';
 
 const UIStrings = {
   /**
-   *@description Text for network request headers
+   * @description Text for network request headers
    */
   headers: 'Headers',
   /**
-   *@description Text for network connection info. In case the request is not made over http.
+   * @description Text for network connection info. In case the request is not made over http.
    */
   connectionInfo: 'Connection Info',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   payload: 'Payload',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   messages: 'Messages',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   websocketMessages: 'WebSocket messages',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   directsocketMessages: 'DirectSocket messages',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   eventstream: 'EventStream',
   /**
-   *@description Text for previewing items
+   * @description Text for previewing items
    */
   preview: 'Preview',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   responsePreview: 'Response preview',
   /**
-   *@description Icon title in Network Item View of the Network panel
+   * @description Icon title in Network Item View of the Network panel
    */
   signedexchangeError: 'SignedExchange error',
   /**
-   *@description Title of a tab in the Network panel. A Network response refers to the act of acknowledging a
-  network request. Should not be confused with answer.
+   * @description Title of a tab in the Network panel. A Network response refers to the act of acknowledging a
+   * network request. Should not be confused with answer.
    */
   response: 'Response',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   rawResponseData: 'Raw response data',
   /**
-   *@description Text for the initiator of something
+   * @description Text for the initiator of something
    */
   initiator: 'Initiator',
   /**
@@ -114,40 +114,40 @@ const UIStrings = {
    */
   requestInitiatorCallStack: 'Request initiator call stack',
   /**
-   *@description Title of a tab in Network Item View of the Network panel.
+   * @description Title of a tab in Network Item View of the Network panel.
    *The tab displays the duration breakdown of a network request.
    */
   timing: 'Timing',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   requestAndResponseTimeline: 'Request and response timeline',
   /**
-   *@description Tooltip to explain the warning icon of the Cookies panel
+   * @description Tooltip to explain the warning icon of the Cookies panel
    */
   thirdPartyPhaseout: 'Cookies blocked due to third-party cookie phaseout.',
   /**
-   *@description Label of a tab in the network panel. Previously known as 'Trust Tokens'.
+   * @description Label of a tab in the network panel. Previously known as 'Trust Tokens'.
    */
   trustTokens: 'Private state tokens',
   /**
-   *@description Title of the Private State Token tab in the Network panel. Previously known as 'Trust Token tab'.
+   * @description Title of the Private State Token tab in the Network panel. Previously known as 'Trust Token tab'.
    */
   trustTokenOperationDetails: 'Private State Token operation details',
   /**
-   *@description Text for web cookies
+   * @description Text for web cookies
    */
   cookies: 'Cookies',
   /**
-   *@description Text in Network Item View of the Network panel
+   * @description Text in Network Item View of the Network panel
    */
   requestAndResponseCookies: 'Request and response cookies',
   /**
-   *@description Tooltip text explaining that DevTools has overridden the response's headers
+   * @description Tooltip text explaining that DevTools has overridden the response's headers
    */
   containsOverriddenHeaders: 'This response contains headers which are overridden by DevTools',
   /**
-   *@description Tooltip text explaining that DevTools has overridden the response
+   * @description Tooltip text explaining that DevTools has overridden the response
    */
   responseIsOverridden: 'This response is overridden by DevTools',
 } as const;
@@ -158,50 +158,50 @@ const requestToResponseView = new WeakMap<SDK.NetworkRequest.NetworkRequest, Req
 const requestToPreviewView = new WeakMap<SDK.NetworkRequest.NetworkRequest, RequestPreviewView>();
 
 export class NetworkItemView extends UI.TabbedPane.TabbedPane {
-  private requestInternal: SDK.NetworkRequest.NetworkRequest;
-  private readonly resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
-  private readonly headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView|undefined;
-  private payloadView: RequestPayloadView|null;
-  private readonly responseView: RequestResponseView|undefined;
-  private cookiesView: RequestCookiesView|null;
-  private initialTab?: NetworkForward.UIRequestLocation.UIRequestTabs;
-  private readonly firstTab: NetworkForward.UIRequestLocation.UIRequestTabs;
+  #request: SDK.NetworkRequest.NetworkRequest;
+  readonly #resourceViewTabSetting: Common.Settings.Setting<NetworkForward.UIRequestLocation.UIRequestTabs>;
+  readonly #headersViewComponent: NetworkComponents.RequestHeadersView.RequestHeadersView|undefined;
+  #payloadView: RequestPayloadView|null = null;
+  readonly #responseView: RequestResponseView|undefined;
+  #cookiesView: RequestCookiesView|null = null;
+  #initialTab?: NetworkForward.UIRequestLocation.UIRequestTabs;
+  readonly #firstTab: NetworkForward.UIRequestLocation.UIRequestTabs;
 
   constructor(
       request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator,
       initialTab?: NetworkForward.UIRequestLocation.UIRequestTabs) {
     super();
-    this.requestInternal = request;
+    this.#request = request;
     this.element.classList.add('network-item-view');
     this.headerElement().setAttribute('jslog', `${VisualLogging.toolbar('request-details').track({
                                         keydown: 'ArrowUp|ArrowLeft|ArrowDown|ArrowRight|Enter|Space',
                                       })}`);
 
     if (request.resourceType() === Common.ResourceType.resourceTypes.DirectSocket) {
-      this.firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.DIRECT_SOCKET_CONNECTION;
+      this.#firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.DIRECT_SOCKET_CONNECTION;
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.DIRECT_SOCKET_CONNECTION, i18nString(UIStrings.connectionInfo),
           new NetworkComponents.DirectSocketConnectionView.DirectSocketConnectionView(request),
           i18nString(UIStrings.headers));
     } else {
-      this.firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT;
-      this.headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
+      this.#firstTab = NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT;
+      this.#headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT, i18nString(UIStrings.headers),
-          LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, this.headersViewComponent),
+          LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.VBox, this.#headersViewComponent),
           i18nString(UIStrings.headers));
     }
 
-    this.resourceViewTabSetting = Common.Settings.Settings.instance().createSetting('resource-view-tab', this.firstTab);
+    this.#resourceViewTabSetting =
+        Common.Settings.Settings.instance().createSetting('resource-view-tab', this.#firstTab);
 
-    if (this.requestInternal.hasOverriddenHeaders()) {
+    if (this.#request.hasOverriddenHeaders()) {
       const statusDot = document.createElement('div');
       statusDot.className = 'status-dot';
       statusDot.title = i18nString(UIStrings.containsOverriddenHeaders);
       this.setSuffixElement(NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT, statusDot);
     }
 
-    this.payloadView = null;
     void this.maybeAppendPayloadPanel();
 
     this.addEventListener(UI.TabbedPane.Events.TabSelected, this.tabSelected, this);
@@ -219,14 +219,14 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.EVENT_SOURCE, i18nString(UIStrings.eventstream),
           new EventSourceMessagesView(request));
-      this.responseView = requestToResponseView.get(request) ?? new RequestResponseView(request);
-      requestToResponseView.set(request, this.responseView);
+      this.#responseView = requestToResponseView.get(request) ?? new RequestResponseView(request);
+      requestToResponseView.set(request, this.#responseView);
       this.appendTab(
-          NetworkForward.UIRequestLocation.UIRequestTabs.RESPONSE, i18nString(UIStrings.response), this.responseView,
+          NetworkForward.UIRequestLocation.UIRequestTabs.RESPONSE, i18nString(UIStrings.response), this.#responseView,
           i18nString(UIStrings.rawResponseData));
     } else {
-      this.responseView = requestToResponseView.get(request) ?? new RequestResponseView(request);
-      requestToResponseView.set(request, this.responseView);
+      this.#responseView = requestToResponseView.get(request) ?? new RequestResponseView(request);
+      requestToResponseView.set(request, this.#responseView);
       const previewView = requestToPreviewView.get(request) ?? new RequestPreviewView(request);
       requestToPreviewView.set(request, previewView);
       this.appendTab(
@@ -235,15 +235,16 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       const signedExchangeInfo = request.signedExchangeInfo();
       if (signedExchangeInfo?.errors?.length) {
         const icon = new IconButton.Icon.Icon();
-        icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)', width: '14px', height: '14px'};
+        icon.name = 'cross-circle-filled';
+        icon.classList.add('small');
         UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.signedexchangeError));
         this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.PREVIEW, icon);
       }
       this.appendTab(
-          NetworkForward.UIRequestLocation.UIRequestTabs.RESPONSE, i18nString(UIStrings.response), this.responseView,
+          NetworkForward.UIRequestLocation.UIRequestTabs.RESPONSE, i18nString(UIStrings.response), this.#responseView,
           i18nString(UIStrings.rawResponseData));
 
-      if (this.requestInternal.hasOverriddenContent) {
+      if (this.#request.hasOverriddenContent) {
         const statusDot = document.createElement('div');
         statusDot.className = 'status-dot';
         statusDot.title = i18nString(UIStrings.responseIsOverridden);
@@ -267,20 +268,17 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.trustTokenOperationDetails));
     }
 
-    this.cookiesView = null;
-
-    this.initialTab = initialTab || this.resourceViewTabSetting.get();
+    this.#initialTab = initialTab || this.#resourceViewTabSetting.get();
     // Selecting tabs should not be handled by the super class.
     this.setAutoSelectFirstItemOnShow(false);
   }
 
   override wasShown(): void {
     super.wasShown();
-    this.requestInternal.addEventListener(
-        SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestHeadersChanged, this);
-    this.requestInternal.addEventListener(
+    this.#request.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestHeadersChanged, this);
+    this.#request.addEventListener(
         SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.maybeAppendCookiesPanel, this);
-    this.requestInternal.addEventListener(
+    this.#request.addEventListener(
         SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.maybeShowErrorIconInTrustTokenTabHeader, this);
     this.maybeAppendCookiesPanel();
     this.maybeShowErrorIconInTrustTokenTabHeader();
@@ -288,19 +286,19 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     // Only select the initial tab the first time the view is shown after construction.
     // When the view is re-shown (without re-constructing) users or revealers might have changed
     // the selected tab in the mean time. Show the previously selected tab in that
-    // case instead, by simply doing nohting.
-    if (this.initialTab) {
-      this.selectTabInternal(this.initialTab);
-      this.initialTab = undefined;
+    // case instead, by simply doing nothing.
+    if (this.#initialTab) {
+      this.selectTabInternal(this.#initialTab);
+      this.#initialTab = undefined;
     }
   }
 
   override willHide(): void {
-    this.requestInternal.removeEventListener(
+    this.#request.removeEventListener(
         SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestHeadersChanged, this);
-    this.requestInternal.removeEventListener(
+    this.#request.removeEventListener(
         SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.maybeAppendCookiesPanel, this);
-    this.requestInternal.removeEventListener(
+    this.#request.removeEventListener(
         SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.maybeShowErrorIconInTrustTokenTabHeader, this);
   }
 
@@ -310,17 +308,18 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   }
 
   private maybeAppendCookiesPanel(): void {
-    const cookiesPresent = this.requestInternal.hasRequestCookies() || this.requestInternal.responseCookies.length > 0;
-    console.assert(cookiesPresent || !this.cookiesView, 'Cookies were introduced in headers and then removed!');
-    if (cookiesPresent && !this.cookiesView) {
-      this.cookiesView = new RequestCookiesView(this.requestInternal);
+    const cookiesPresent = this.#request.hasRequestCookies() || this.#request.responseCookies.length > 0;
+    console.assert(cookiesPresent || !this.#cookiesView, 'Cookies were introduced in headers and then removed!');
+    if (cookiesPresent && !this.#cookiesView) {
+      this.#cookiesView = new RequestCookiesView(this.#request);
       this.appendTab(
-          NetworkForward.UIRequestLocation.UIRequestTabs.COOKIES, i18nString(UIStrings.cookies), this.cookiesView,
+          NetworkForward.UIRequestLocation.UIRequestTabs.COOKIES, i18nString(UIStrings.cookies), this.#cookiesView,
           i18nString(UIStrings.requestAndResponseCookies));
     }
-    if (this.requestInternal.hasThirdPartyCookiePhaseoutIssue()) {
+    if (this.#request.hasThirdPartyCookiePhaseoutIssue()) {
       const icon = new IconButton.Icon.Icon();
-      icon.data = {iconName: 'warning-filled', color: 'var(--icon-warning)', width: '14px', height: '14px'};
+      icon.name = 'warning-filled';
+      icon.classList.add('small');
       icon.title = i18nString(UIStrings.thirdPartyPhaseout);
       this.setTrailingTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.COOKIES, icon);
     }
@@ -330,21 +329,22 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     if (this.hasTab('payload')) {
       return;
     }
-    if (this.requestInternal.queryParameters || await this.requestInternal.requestFormData()) {
-      this.payloadView = new RequestPayloadView(this.requestInternal);
+    if (this.#request.queryParameters || await this.#request.requestFormData()) {
+      this.#payloadView = new RequestPayloadView(this.#request);
       this.appendTab(
-          NetworkForward.UIRequestLocation.UIRequestTabs.PAYLOAD, i18nString(UIStrings.payload), this.payloadView,
+          NetworkForward.UIRequestLocation.UIRequestTabs.PAYLOAD, i18nString(UIStrings.payload), this.#payloadView,
           i18nString(UIStrings.payload), /* userGesture=*/ void 0,
           /* isCloseable=*/ void 0, /* isPreviewFeature=*/ void 0, /* index=*/ 1);
     }
   }
 
   private maybeShowErrorIconInTrustTokenTabHeader(): void {
-    const trustTokenResult = this.requestInternal.trustTokenOperationDoneEvent();
+    const trustTokenResult = this.#request.trustTokenOperationDoneEvent();
     if (trustTokenResult &&
         !NetworkComponents.RequestTrustTokensView.statusConsideredSuccess(trustTokenResult.status)) {
       const icon = new IconButton.Icon.Icon();
-      icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)', width: '14px', height: '14px'};
+      icon.name = 'cross-circle-filled';
+      icon.classList.add('small');
       this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.TRUST_TOKENS, icon);
     }
   }
@@ -355,7 +355,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       // it makes sense to retry on the next tick
       window.setTimeout(() => {
         if (!this.selectTab(tabId)) {
-          this.selectTab(this.firstTab);
+          this.selectTab(this.#firstTab);
         }
       }, 0);
     }
@@ -365,24 +365,24 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     if (!event.data.isUserGesture) {
       return;
     }
-    this.resourceViewTabSetting.set(event.data.tabId as NetworkForward.UIRequestLocation.UIRequestTabs);
+    this.#resourceViewTabSetting.set(event.data.tabId as NetworkForward.UIRequestLocation.UIRequestTabs);
   }
 
   request(): SDK.NetworkRequest.NetworkRequest {
-    return this.requestInternal;
+    return this.#request;
   }
 
   async revealResponseBody(position: SourceFrame.SourceFrame.RevealPosition): Promise<void> {
     this.selectTabInternal(NetworkForward.UIRequestLocation.UIRequestTabs.RESPONSE);
-    await this.responseView?.revealPosition(position);
+    await this.#responseView?.revealPosition(position);
   }
 
   revealHeader(section: NetworkForward.UIRequestLocation.UIHeaderSection, header: string|undefined): void {
     this.selectTabInternal(NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
-    this.headersViewComponent?.revealHeader(section, header);
+    this.#headersViewComponent?.revealHeader(section, header);
   }
 
   getHeadersViewComponent(): NetworkComponents.RequestHeadersView.RequestHeadersView|undefined {
-    return this.headersViewComponent;
+    return this.#headersViewComponent;
   }
 }

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

@@ -5,7 +5,6 @@ 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 {assertNotNullOrUndefined} from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as HAR from '../../models/har/har.js';
@@ -20,8 +19,10 @@ import {dispatchClickEvent, raf, renderElementIntoDOM} from '../../testing/DOMHe
 import {
   createTarget,
   describeWithEnvironment,
+  registerActions,
   registerNoopActions,
-  stubNoopSettings
+  stubNoopSettings,
+  updateHostConfig
 } from '../../testing/EnvironmentHelpers.js';
 import {expectCalled} from '../../testing/ExpectStubCall.js';
 import {stubFileManager} from '../../testing/FileManagerHelpers.js';
@@ -125,7 +126,7 @@ describeWithMockConnection('NetworkLogView', () => {
   });
 
   // Note this isn't an ideal test as the internal headers are generated rather than explicitly added,
-  // are only added on HTTP/2 and HTTP/3, have a preceeding colon like `:authority` but it still tests
+  // are only added on HTTP/2 and HTTP/3, have a preceding colon like `:authority` but it still tests
   // the stripping function.
   it('generates a valid curl command while stripping internal headers', async () => {
     const request = createNetworkRequest(urlString`http://localhost`, {
@@ -584,10 +585,10 @@ describeWithMockConnection('NetworkLogView', () => {
 
     // set up overrides
     r2.originalResponseHeaders = [{name: 'content-type', value: 'x'}];
-    r2.responseHeaders = [{name: 'content-type', value: 'overriden'}];
+    r2.responseHeaders = [{name: 'content-type', value: 'overridden'}];
     r3.hasOverriddenContent = true;
     r4.originalResponseHeaders = [{name: 'age', value: 'x'}];
-    r4.responseHeaders = [{name: 'age', value: 'overriden'}];
+    r4.responseHeaders = [{name: 'age', value: 'overridden'}];
     r4.hasOverriddenContent = true;
 
     return {urlNotOverridden, urlHeaderOverridden, urlContentOverridden, urlHeaderAndContentOverridden};
@@ -782,10 +783,10 @@ describeWithMockConnection('NetworkLogView', () => {
 url-header-und-content-overridden`]);
     copyText.resetHistory();
 
-    const copyAllCurlComnmands = findMenuItemWithLabel(
+    const copyAllCurlCommands = findMenuItemWithLabel(
         footerSection, Host.Platform.isWin() ? 'Copy all listed as cURL (bash)' : 'Copy all listed as cURL');
-    assert.isDefined(copyAllCurlComnmands);
-    contextMenu.invokeHandler(copyAllCurlComnmands.id());
+    assert.isDefined(copyAllCurlCommands);
+    contextMenu.invokeHandler(copyAllCurlCommands.id());
     await expectCalled(copyText);
     sinon.assert.callCount(copyText, 1);
     assert.deepEqual(copyText.lastCall.args, [`curl 'url-header-overridden' ;
@@ -831,7 +832,7 @@ url-content-overridden
 url-header-und-content-overridden`]);
     copyText.resetHistory();
 
-    contextMenu.invokeHandler(copyAllCurlComnmands.id());
+    contextMenu.invokeHandler(copyAllCurlCommands.id());
     await expectCalled(copyText);
     sinon.assert.callCount(copyText, 1);
     assert.deepEqual(copyText.lastCall.args, [`curl 'url-not-overridden' ;
@@ -943,18 +944,21 @@ describeWithMockConnection('NetworkLogView placeholder', () => {
 
   beforeEach(() => {
     stubNoopSettings();
-    UI.ActionRegistration.registerActionExtension({
-      actionId: START_RECORDING_ID,
-      category: UI.ActionRegistration.ActionCategory.NETWORK,
-      title: () => 'mock' as Platform.UIString.LocalizedString,
-      toggleable: true,
-    });
-    UI.ActionRegistration.registerActionExtension({
-      actionId: RELOAD_ID,
-      category: UI.ActionRegistration.ActionCategory.NETWORK,
-      title: () => 'mock' as Platform.UIString.LocalizedString,
-      toggleable: true,
-    });
+
+    registerActions([
+      {
+        actionId: START_RECORDING_ID,
+        category: UI.ActionRegistration.ActionCategory.NETWORK,
+        title: () => 'mock' as Platform.UIString.LocalizedString,
+        toggleable: true,
+      },
+      {
+        actionId: RELOAD_ID,
+        category: UI.ActionRegistration.ActionCategory.NETWORK,
+        title: () => 'mock' as Platform.UIString.LocalizedString,
+        toggleable: true,
+      }
+    ]);
     sinon.stub(UI.ShortcutRegistry.ShortcutRegistry, 'instance').returns({
       shortcutTitleForAction: () => 'Ctrl',
       shortcutsForAction: () => [new UI.KeyboardShortcut.KeyboardShortcut(
@@ -992,9 +996,43 @@ describeWithEnvironment('NetworkLogView', () => {
     try {
       createNetworkLogView();
     } catch {
-      assert.fail('Creating the network view without registring the actions shouldn\'t fail.');
+      assert.fail('Creating the network view without registering the actions shouldn\'t fail.');
     }
   });
+
+  it('shows Debug with AI menu and submenu items when the flag is on', () => {
+    updateHostConfig({
+      devToolsAiSubmenuPrompts: {
+        enabled: true,
+      },
+    });
+    stubNoopSettings();
+    registerActions([{
+      actionId: 'drjones.network-panel-context',
+      title: () => 'Debug with AI' as Platform.UIString.LocalizedString,
+      category: UI.ActionRegistration.ActionCategory.GLOBAL,
+    }]);
+
+    const filterBar = new UI.FilterBar.FilterBar('network-test');
+    const progressBarContainer = document.createElement('div');
+    const setting = Common.Settings.Settings.instance().createSetting('network-log-large-rows', false);
+    const networkLogView = new Network.NetworkLogView.NetworkLogView(filterBar, progressBarContainer, setting);
+    const request = SDK.NetworkRequest.NetworkRequest.create(
+        'requestId' as Protocol.Network.RequestId, Platform.DevToolsPath.urlString`https://www.example.com/script.js`,
+        Platform.DevToolsPath.urlString``, null, null, null);
+
+    const event = new Event('contextmenu');
+    sinon.stub(event, 'target').value(document);
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+
+    networkLogView.handleContextMenuForRequest(contextMenu, request);
+
+    const debugWithAiItem = contextMenu.buildDescriptor().subItems?.find(item => item.label === 'Debug with AI');
+    assert.exists(debugWithAiItem);
+    assert.deepEqual(
+        debugWithAiItem?.subItems?.map(item => item.label),
+        ['Start a chat', 'Explain purpose', 'Explain slowness', 'Explain failures', 'Assess security headers']);
+  });
 });
 
 function testPlaceholderText(
@@ -1042,7 +1080,7 @@ function getMoreFiltersActiveCount(filterBar: UI.FilterBar.FilterBar): string {
 
 function getDropdownItem(softMenu: UI.ContextMenu.ContextMenu, label: string) {
   const item = findMenuItemWithLabel(softMenu.defaultSection(), label);
-  assertNotNullOrUndefined(item);
+  assert.isOk(item);
   return item;
 }