chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/network/BinaryResourceView.ts

@@ -6,6 +6,7 @@ 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 type * as Platform from '../../core/platform/platform.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -70,12 +71,12 @@ export class BinaryResourceView extends UI.Widget.VBox {
   private lastView: UI.Widget.Widget|null;
 
   constructor(
-      base64content: string, contentUrl: Platform.DevToolsPath.UrlString,
+      content: TextUtils.StreamingContentData.StreamingContentData, contentUrl: Platform.DevToolsPath.UrlString,
       resourceType: Common.ResourceType.ResourceType) {
     super();
 
     this.binaryResourceViewFactory =
-        new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(base64content, contentUrl, resourceType);
+        new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(content, contentUrl, resourceType);
 
     this.toolbar = new UI.Toolbar.Toolbar('binary-view-toolbar', this.element);
 

package/front_end/panels/network/NetworkConfigView.ts

@@ -246,7 +246,6 @@ export class NetworkConfigView extends UI.Widget.VBox {
     customUserAgentSelectBox.appendChild(customSelectAndInput.input);
     customUserAgentSelectBox.appendChild(customSelectAndInput.error);
 
-    const clientHintsContainer = customUserAgentSelectBox.createChild('div', 'client-hints-form');
     const clientHints = new EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm();
     const userAgentMetaDataSetting = userAgentMetadataSetting.get();
     const initialUserAgentMetaData = getUserAgentMetadata(customSelectAndInput.select.value);
@@ -255,7 +254,7 @@ export class NetworkConfigView extends UI.Widget.VBox {
       showSubmitButton: true,
       metaData: userAgentMetaDataSetting || initialUserAgentMetaData || undefined,
     };
-    clientHintsContainer.appendChild(clientHints);
+    customUserAgentSelectBox.appendChild(clientHints);
 
     customSelectAndInput.select.addEventListener('user-agent-change', (event: Event) => {
       const userStringValue = (event as CustomEvent).detail.value;

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

@@ -497,4 +497,33 @@ describeWithEnvironment('NetworkLogView', () => {
     const expected = 'Matched to ServiceWorker router#1, 2\xa0B transferred over network, resource size: 4\xa0B';
     assert.strictEqual(tooltip, expected);
   });
+
+  it('styles a prefetch network request error as a warning', async () => {
+    const request = SDK.NetworkRequest.NetworkRequest.create(
+        'requestId' as Protocol.Network.RequestId, 'https://www.example.com' as Platform.DevToolsPath.UrlString,
+        '' as Platform.DevToolsPath.UrlString, null, null, null);
+    request.failed = true;
+    request.statusCode = 404;
+    request.setResourceType(Common.ResourceType.resourceTypes.Prefetch);
+
+    const networkRequestNode = new Network.NetworkDataGridNode.NetworkRequestNode(
+        {} as Network.NetworkDataGridNode.NetworkLogViewInterface, request);
+    const el = document.createElement('div');
+    networkRequestNode.createCells(el);
+    const cell = el.appendChild(document.createElement('div'));
+    networkRequestNode.renderCell(cell, 'name');
+
+    // The row should have the warning-row class name.
+    assert.isTrue(el.classList.contains('network-warning-row'));
+    assert.isFalse(el.classList.contains('network-error-row'));
+
+    // The icon should be the warning icon.
+    const iconElement = el.querySelector('.icon') as HTMLElement;
+    const iconStyle = iconElement.style;
+    const indexOfIconImage = iconStyle.maskImage.indexOf('Images/') + 7;
+    const iconImage = iconStyle.maskImage.substring(indexOfIconImage);
+    assert.strictEqual('warning-filled.svg")', iconImage);
+    const backgroundColorOfIcon = iconStyle.backgroundColor.toString();
+    assert.strictEqual(backgroundColorOfIcon, 'var(--icon-warning)');
+  });
 });

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -46,6 +46,7 @@ import type * as HAR from '../../models/har/har.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as FloatingButton from '../../ui/components/floating_button/floating_button.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -53,7 +54,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 +292,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_);
@@ -400,7 +384,11 @@ export class NetworkNode extends DataGrid.SortableDataGrid.SortableDataGridNode<
   renderCell(_cell: Element, _columnId: string): void {
   }
 
-  isFailed(): boolean {
+  isError(): boolean {
+    return false;
+  }
+
+  isWarning(): boolean {
     return false;
   }
 
@@ -408,11 +396,15 @@ export class NetworkNode extends DataGrid.SortableDataGrid.SortableDataGridNode<
     const bgColors = _backgroundColors;
     const hasFocus = document.hasFocus();
     const isSelected = this.dataGrid && this.dataGrid.element === document.activeElement;
-    const isFailed = this.isFailed();
+    const isWarning = this.isWarning();
+    const isError = this.isError();
 
-    if (this.selected && hasFocus && isSelected && isFailed) {
+    if (this.selected && hasFocus && isSelected && isError) {
       return bgColors.FocusSelectedHasError;
     }
+    if (this.selected && hasFocus && isSelected && isWarning) {
+      return bgColors.FocusSelectedHasWarning;
+    }
     if (this.selected && hasFocus && isSelected) {
       return bgColors.FocusSelected;
     }
@@ -553,6 +545,7 @@ export const _backgroundColors: {
   Selected: '--color-grid-selected',
   FocusSelected: '--color-grid-focus-selected',
   FocusSelectedHasError: '--network-grid-focus-selected-color-has-error',
+  FocusSelectedHasWarning: '--network-grid-focus-selected-color-has-warning',
   FromFrame: '--network-grid-from-frame-color',
 };
 
@@ -565,6 +558,7 @@ export class NetworkRequestNode extends NetworkNode {
   private isOnInitiatorPathInternal: boolean;
   private isOnInitiatedPathInternal: boolean;
   private linkifiedInitiatorAnchor?: HTMLElement;
+
   constructor(parentView: NetworkLogViewInterface, request: SDK.NetworkRequest.NetworkRequest) {
     super(parentView);
     this.nameCell = null;
@@ -900,11 +894,24 @@ export class NetworkRequestNode extends NetworkNode {
     return this.parentView().rowHeight();
   }
 
+  private isPrefetch(): boolean {
+    return this.requestInternal.resourceType() === Common.ResourceType.resourceTypes.Prefetch;
+  }
+
+  override isWarning(): boolean {
+    return this.isFailed() && this.isPrefetch();
+  }
+
+  override isError(): boolean {
+    return this.isFailed() && !this.isPrefetch();
+  }
+
   override createCells(element: Element): void {
     this.nameCell = null;
     this.initiatorCell = null;
 
-    element.classList.toggle('network-error-row', this.isFailed());
+    element.classList.toggle('network-warning-row', this.isWarning());
+    element.classList.toggle('network-error-row', this.isError());
     element.classList.toggle('network-navigation-row', this.isNavigationRequestInternal);
     super.createCells(element);
     this.updateBackgroundColor();
@@ -1077,25 +1084,8 @@ export class NetworkRequestNode extends NetworkNode {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.requestInternal.url());
   }
 
-  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;
+  private isFailed(): boolean {
+    return PanelUtils.isFailedNetworkRequest(this.requestInternal);
   }
 
   private renderPrimaryCell(cell: HTMLElement, columnId: string, text?: string): void {
@@ -1116,8 +1106,14 @@ 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);
+
+      // render Ask AI button
+      const aiButtonContainer = this.createAiButtonIfAvailable();
+      if (aiButtonContainer) {
+        cell.appendChild(aiButtonContainer);
+      }
     }
 
     if (columnId === 'name') {
@@ -1127,7 +1123,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 +1149,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));
@@ -1601,6 +1482,27 @@ export class NetworkRequestNode extends NetworkNode {
     }
     cellElement.appendChild(subtitleElement);
   }
+
+  private createAiButtonIfAvailable(): HTMLSpanElement|void {
+    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('drjones.network-floating-button')) {
+      const action = UI.ActionRegistry.ActionRegistry.instance().getAction('drjones.network-floating-button');
+      const aiButtonContainer = document.createElement('span');
+      aiButtonContainer.classList.add('ai-button-container');
+      const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        iconName: 'smart-assistant',
+      });
+      floatingButton.addEventListener('click', ev => {
+        ev.stopPropagation();
+        this.select();
+        void action.execute();
+      }, {capture: true});
+      floatingButton.addEventListener('mousedown', ev => {
+        ev.stopPropagation();
+      }, {capture: true});
+      aiButtonContainer.appendChild(floatingButton);
+      return aiButtonContainer;
+    }
+  }
 }
 
 export class NetworkGroupNode extends NetworkNode {

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.test.ts

@@ -544,6 +544,35 @@ describeWithMockConnection('NetworkLogView', () => {
     assert.strictEqual(rootNode.children.length, 0);
   });
 
+  it('correctly shows/hides "Copy all as HAR (with sensitive data)" menu item', async () => {
+    const networkShowOptionsToGenerateHarWithSensitiveDataSetting = Common.Settings.Settings.instance().createSetting(
+        'network.show-options-to-generate-har-with-sensitive-data', false);
+    createNetworkRequest('url1', {target});
+    networkLogView = createNetworkLogView(new UI.FilterBar.FilterBar('network-panel', true));
+    networkLogView.markAsRoot();
+    networkLogView.show(document.body);
+    networkLogView.columns().dataGrid().rootNode().children[0].select();
+    const {element} = networkLogView.columns().dataGrid();
+
+    {
+      // Setting is disabled (default), menu item must be hidden.
+      networkShowOptionsToGenerateHarWithSensitiveDataSetting.set(false);
+      const contextMenu = getContextMenuForElement(element);
+      const clipboardSection = contextMenu.clipboardSection();
+      const copyMenu = findMenuItemWithLabel(clipboardSection, 'Copy') as UI.ContextMenu.SubMenu;
+      assert.isUndefined(findMenuItemWithLabel(copyMenu.footerSection(), 'Copy all as HAR (with sensitive data)'));
+    }
+
+    {
+      // Setting is enabled, menu item must be shown.
+      networkShowOptionsToGenerateHarWithSensitiveDataSetting.set(true);
+      const contextMenu = getContextMenuForElement(element);
+      const clipboardSection = contextMenu.clipboardSection();
+      const copyMenu = findMenuItemWithLabel(clipboardSection, 'Copy') as UI.ContextMenu.SubMenu;
+      assert.isDefined(findMenuItemWithLabel(copyMenu.footerSection(), 'Copy all as HAR (with sensitive data)'));
+    }
+  });
+
   it('correctly shows and hides waterfall column', async () => {
     const columnSettings = Common.Settings.Settings.instance().createSetting('network-log-columns', {});
     columnSettings.set({

package/front_end/panels/network/NetworkLogView.ts

@@ -587,7 +587,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     const filterItems =
         Object.entries(Common.ResourceType.resourceCategories).map(([key, category]) => ({
-                                                                     name: category.title(),
+                                                                     name: category.name,
                                                                      label: () => category.shortTitle(),
                                                                      title: category.title(),
                                                                      jslogContext:
@@ -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) {
@@ -1822,7 +1822,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     copyMenu.footerSection().appendItem(
         filtered ? i18nString(UIStrings.copyAllListedAsHarSanitized) : i18nString(UIStrings.copyAllAsHarSanitized),
         this.copyAllAsHAR.bind(this, {sanitize: true}), {jslogContext: 'copy-all-as-har'});
-    if (this.networkShowOptionsToGenerateHarWithSensitiveData) {
+    if (this.networkShowOptionsToGenerateHarWithSensitiveData.get()) {
       copyMenu.footerSection().appendItem(
           filtered ? i18nString(UIStrings.copyAllListedAsHarWithSensitiveData) :
                      i18nString(UIStrings.copyAllAsHarWithSensitiveData),

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/NetworkPanel.test.ts

@@ -6,8 +6,9 @@ import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Trace from '../../models/trace/trace.js';
-import {createTarget, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {createNetworkPanelForMockConnection} from '../../testing/NetworkHelpers.js';
 import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -20,28 +21,8 @@ describeWithMockConnection('NetworkPanel', () => {
   let networkPanel: Network.NetworkPanel.NetworkPanel;
 
   beforeEach(async () => {
-    registerNoopActions(['network.toggle-recording', 'network.clear']);
-
     target = createTarget();
-    const dummyStorage = new Common.Settings.SettingsStorage({});
-    for (const settingName
-             of ['network-color-code-resource-types', 'network.group-by-frame', 'network-record-film-strip-setting']) {
-      Common.Settings.registerSettingExtension({
-        settingName,
-        settingType: Common.Settings.SettingType.BOOLEAN,
-        defaultValue: false,
-      });
-    }
-    Common.Settings.Settings.instance({
-      forceNew: true,
-      syncedStorage: dummyStorage,
-      globalStorage: dummyStorage,
-      localStorage: dummyStorage,
-    });
-    networkPanel = Network.NetworkPanel.NetworkPanel.instance({forceNew: true, displayScreenshotDelay: 0});
-    networkPanel.markAsRoot();
-    networkPanel.show(document.body);
-    await coordinator.done();
+    networkPanel = await createNetworkPanelForMockConnection();
   });
 
   afterEach(async () => {

package/front_end/panels/network/NetworkPanel.ts

@@ -147,9 +147,18 @@ const UIStrings = {
    */
   hitSToReloadAndCaptureFilmstrip: 'Hit {PH1} to reload and capture filmstrip.',
   /**
-   *@description A context menu item in the Network Panel of the Network panel
+   * @description A context menu item that is shown for resources in other panels
+   * to open them in the Network panel.
    */
-  revealInNetworkPanel: 'Reveal in Network panel',
+  openInNetworkPanel: 'Open in Network panel',
+  /**
+   * @description A context menu item that is shown for resources in other panels
+   * to open them in the Network panel, but when there's no associated network
+   * request. This context menu item is always disabled and only provided to give
+   * the developer an idea of why they cannot open the resource in the Network
+   * panel.
+   */
+  openInNetworkPanelMissingRequest: 'Open in Network panel (missing request)',
   /**
    *@description Text in Network Panel that is displayed whilst the recording is in progress.
    */
@@ -471,7 +480,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
         new UI.Toolbar.ToolbarButton(i18nString(UIStrings.exportHarSanitized), 'download', undefined, 'export-har');
     exportHarButton.addEventListener(
         UI.Toolbar.ToolbarButton.Events.CLICK,
-        this.networkLogView.exportAll.bind(this.networkItemView, {sanitize: true}), this);
+        this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: true}), this);
     this.panelToolbar.appendToolbarItem(exportHarButton);
 
     // Support for exporting HAR (with sensitive data), which is added via a long-click
@@ -491,12 +500,12 @@ export class NetworkPanel extends UI.Panel.Panel implements
           const contextMenu = new UI.ContextMenu.ContextMenu(event);
           contextMenu.defaultSection().appendItem(
               i18nString(UIStrings.exportHarSanitized),
-              this.networkLogView.exportAll.bind(this.networkItemView, {sanitize: true}),
+              this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: true}),
               {jslogContext: 'export-har'},
           );
           contextMenu.defaultSection().appendItem(
               i18nString(UIStrings.exportHarWithSensitiveData),
-              this.networkLogView.exportAll.bind(this.networkItemView, {sanitize: false}),
+              this.networkLogView.exportAll.bind(this.networkLogView, {sanitize: false}),
               {jslogContext: 'export-har-with-sensitive-data'},
           );
           void contextMenu.show();
@@ -757,16 +766,22 @@ export class NetworkPanel extends UI.Panel.Panel implements
       TimelineUtils.NetworkRequest.TimelineNetworkRequest): void {
     const appendRevealItem = (request: SDK.NetworkRequest.NetworkRequest): void => {
       contextMenu.revealSection().appendItem(
-          i18nString(UIStrings.revealInNetworkPanel),
+          i18nString(UIStrings.openInNetworkPanel),
           () => UI.ViewManager.ViewManager.instance()
                     .showView('network')
                     .then(this.networkLogView.resetFilter.bind(this.networkLogView))
                     .then(this.revealAndHighlightRequest.bind(this, request)),
           {jslogContext: 'reveal-in-network'});
     };
+    const appendRevealItemMissingData = (): void => {
+      contextMenu.revealSection().appendItem(i18nString(UIStrings.openInNetworkPanelMissingRequest), () => {}, {
+        disabled: true,
+        jslogContext: 'reveal-in-network',
+      });
+    };
     const appendRevealItemAndSelect = (request: TimelineUtils.NetworkRequest.TimelineNetworkRequest): void => {
       contextMenu.revealSection().appendItem(
-          i18nString(UIStrings.revealInNetworkPanel),
+          i18nString(UIStrings.openInNetworkPanel),
           () => UI.ViewManager.ViewManager.instance()
                     .showView('network')
                     .then(this.networkLogView.resetFilter.bind(this.networkLogView))
@@ -783,6 +798,8 @@ export class NetworkPanel extends UI.Panel.Panel implements
     if (target instanceof SDK.Resource.Resource) {
       if (target.request) {
         appendRevealItem(target.request);
+      } else {
+        appendRevealItemMissingData();
       }
       return;
     }
@@ -790,6 +807,8 @@ export class NetworkPanel extends UI.Panel.Panel implements
       const resource = Bindings.ResourceUtils.resourceForURL(target.url());
       if (resource && resource.request) {
         appendRevealItem(resource.request);
+      } else {
+        appendRevealItemMissingData();
       }
       return;
     }