chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -64,6 +64,8 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
       case IssuesManager.AttributionReportingIssue.IssueCode.OS_TRIGGER_IGNORED:
       case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_IGNORED:
       case IssuesManager.AttributionReportingIssue.IssueCode.TRIGGER_IGNORED:
+      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_INFO_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_UNIQUE_SCOPE_ALREADY_SET:
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         this.appendColumnTitle(header, i18nString(UIStrings.invalidHeaderValue));
         break;
@@ -79,6 +81,11 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_AND_TRIGGER_HEADERS:
       case IssuesManager.AttributionReportingIssue.IssueCode.WEB_AND_OS_HEADERS:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_WEB_OR_OS_SUPPORT:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_SOURCE_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_TRIGGER_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_SOURCE_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_TRIGGER_HEADER:
         this.appendColumnTitle(header, i18nString(UIStrings.request));
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_WITHOUT_TRANSIENT_USER_ACTIVATION:
@@ -112,6 +119,8 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
       case IssuesManager.AttributionReportingIssue.IssueCode.OS_TRIGGER_IGNORED:
       case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_IGNORED:
       case IssuesManager.AttributionReportingIssue.IssueCode.TRIGGER_IGNORED:
+      case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_INFO_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_UNIQUE_SCOPE_ALREADY_SET:
         this.#appendRequestOrEmptyCell(element, details.request);
         this.appendIssueDetailCell(element, details.invalidParameter || '');
         break;
@@ -127,6 +136,11 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.SOURCE_AND_TRIGGER_HEADERS:
       case IssuesManager.AttributionReportingIssue.IssueCode.WEB_AND_OS_HEADERS:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_WEB_OR_OS_SUPPORT:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_SOURCE_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_TRIGGER_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_SOURCE_HEADER:
+      case IssuesManager.AttributionReportingIssue.IssueCode.NO_REGISTER_OS_TRIGGER_HEADER:
         this.#appendRequestOrEmptyCell(element, details.request);
         break;
       case IssuesManager.AttributionReportingIssue.IssueCode.NAVIGATION_REGISTRATION_WITHOUT_TRANSIENT_USER_ACTIVATION:

package/front_end/panels/issues/IssueAggregator.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-import type * as Protocol from '../../generated/protocol.js';
 
 type AggregationKeyTag = {
   aggregationKeyTag: undefined,
@@ -268,6 +268,15 @@ export class IssueAggregator extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   #onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueAddedEvent>): void {
+    const excludeFromAggregate = [
+      Protocol.Audits.CookieWarningReason.WarnThirdPartyCookieHeuristic,
+      Protocol.Audits.CookieWarningReason.WarnDeprecationTrialMetadata,
+    ];
+
+    if (excludeFromAggregate.some(exclude => event.data.issue.code().includes(exclude))) {
+      return;
+    }
+
     this.#aggregateIssue(event.data.issue);
   }
 

package/front_end/panels/issues/components/ElementsPanelLink.ts

@@ -15,7 +15,6 @@ export interface ElementsPanelLinkData {
   onElementRevealIconMouseLeave: (event?: Event) => void;
 }
 export class ElementsPanelLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-panel-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #onElementRevealIconClick: ((event?: Event) => void) = () => {};

package/front_end/panels/issues/components/HideIssuesMenu.ts

@@ -29,7 +29,6 @@ export interface HiddenIssuesMenuData {
 }
 
 export class HideIssuesMenu extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-hide-issues-menu`;
   readonly #shadow: ShadowRoot = this.attachShadow({mode: 'open'});
   #menuItemLabel: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
   #menuItemAction: () => void = () => {};
@@ -44,9 +43,9 @@ export class HideIssuesMenu extends HTMLElement {
     this.#shadow.adoptedStyleSheets = [hideIssuesMenuStyles];
   }
 
-  onMenuOpen(event: Event): void {
+  onMenuOpen(event: MouseEvent): void {
     event.stopPropagation();
-    const buttonElement = this.#shadow.querySelector('button');
+    const buttonElement = this.#shadow.querySelector('devtools-button');
     const contextMenu = new UI.ContextMenu.ContextMenu(event, {
       x: buttonElement?.getBoundingClientRect().left,
       y: buttonElement?.getBoundingClientRect().bottom,
@@ -56,6 +55,14 @@ export class HideIssuesMenu extends HTMLElement {
     void contextMenu.show();
   }
 
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === 'Space') {
+      // Make sure we don't propagate 'Enter' or 'Space' key events to parents,
+      // so that these get turned into 'click' events properly.
+      event.stopImmediatePropagation();
+    }
+  }
+
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -64,7 +71,8 @@ export class HideIssuesMenu extends HTMLElement {
       .data=${{variant: Buttons.Button.Variant.ICON,iconName: 'dots-vertical', title: i18nString(UIStrings.tooltipTitle)} as Buttons.Button.ButtonData}
       .jslogContext=${'hide-issues'}
       class="hide-issues-menu-btn"
-      @click=${this.onMenuOpen.bind(this)}></devtools-button>
+      @click=${this.onMenuOpen}
+      @keydown=${this.onKeydown}></devtools-button>
     `, this.#shadow, {host: this});
   }
 }

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -63,7 +63,7 @@ export class StartView extends UI.Widget.Widget {
   changeFormMode?: (mode: string) => void;
 
   constructor(controller: LighthouseController, panel: LighthousePanel) {
-    super();
+    super(true /* useShadowDom */);
 
     this.controller = controller;
     this.panel = panel;

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -20,7 +20,7 @@ const UIStrings = {
   /**
    *@description A context menu item in the Scope View of the Sources Panel
    */
-  revealInMemoryInspectorPanel: 'Reveal in Memory inspector panel',
+  openInMemoryInspectorPanel: 'Open in Memory inspector panel',
 };
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/LinearMemoryInspectorController.ts', UIStrings);
@@ -329,7 +329,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
       const expression = target.path();
       const object = target.property.value;
       contextMenu.debugSection().appendItem(
-          i18nString(UIStrings.revealInMemoryInspectorPanel),
+          i18nString(UIStrings.openInMemoryInspectorPanel),
           this.reveal.bind(this, new SDK.RemoteObject.LinearMemoryInspectable(object, expression)),
           {jslogContext: 'reveal-in-memory-inspector'});
     }

package/front_end/panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts

@@ -5,7 +5,6 @@
 import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -113,7 +112,7 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
               iconName: 'cross',
               color: 'var(--icon-default-hover)',
               width: '16px',
-              } as IconButton.Icon.IconData}>
+              }}>
             </devtools-icon>
           </button>
         </div>

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -15,22 +15,17 @@ import {
   Navigation,
   type AddressInputChangedEvent,
   type HistoryNavigationEvent,
-  type LinearMemoryNavigatorData,
   type PageNavigationEvent,
 } from './LinearMemoryNavigator.js';
 
-import type {
-  EndiannessChangedEvent, LinearMemoryValueInterpreterData, ValueTypeToggledEvent} from
-  './LinearMemoryValueInterpreter.js';
 import './LinearMemoryValueInterpreter.js';
+import type {EndiannessChangedEvent, ValueTypeToggledEvent} from './LinearMemoryValueInterpreter.js';
 
-import type {
-  DeleteMemoryHighlightEvent, JumpToHighlightedMemoryEvent, LinearMemoryHighlightChipListData} from
-  './LinearMemoryHighlightChipList.js';
 import './LinearMemoryHighlightChipList.js';
+import type {DeleteMemoryHighlightEvent, JumpToHighlightedMemoryEvent} from './LinearMemoryHighlightChipList.js';
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
-import type {ByteSelectedEvent, LinearMemoryViewerData, ResizeEvent} from './LinearMemoryViewer.js';
 import './LinearMemoryViewer.js';
+import type {ByteSelectedEvent, ResizeEvent} from './LinearMemoryViewer.js';
 import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 import type {JumpToPointerAddressEvent, ValueTypeModeChangedEvent} from './ValueInterpreterDisplay.js';
 import {
@@ -204,13 +199,13 @@ export class LinearMemoryInspector extends HTMLElement {
     render(html`
       <div class="view">
         <devtools-linear-memory-inspector-navigator
-          .data=${{address: navigatorAddressToShow, valid: navigatorAddressIsValid, mode: this.#currentNavigatorMode, error: errorMsg, canGoBackInHistory, canGoForwardInHistory} as LinearMemoryNavigatorData}
+          .data=${{address: navigatorAddressToShow, valid: navigatorAddressIsValid, mode: this.#currentNavigatorMode, error: errorMsg, canGoBackInHistory, canGoForwardInHistory}}
           @refreshrequested=${this.#onRefreshRequest}
           @addressinputchanged=${this.#onAddressChange}
           @pagenavigation=${this.#navigatePage}
           @historynavigation=${this.#navigateHistory}></devtools-linear-memory-inspector-navigator>
           <devtools-linear-memory-highlight-chip-list
-          .data=${{highlightInfos: highlightedMemoryAreas, focusedMemoryHighlight } as LinearMemoryHighlightChipListData}
+          .data=${{highlightInfos: highlightedMemoryAreas, focusedMemoryHighlight }}
           @jumptohighlightedmemory=${this.#onJumpToAddress}>
           </devtools-linear-memory-highlight-chip-list>
         <devtools-linear-memory-inspector-viewer
@@ -220,7 +215,7 @@ export class LinearMemoryInspector extends HTMLElement {
             address: this.#address, memoryOffset: start,
             focus: this.#currentNavigatorMode === Mode.SUBMITTED,
             highlightInfo: this.#highlightInfo,
-            focusedMemoryHighlight } as LinearMemoryViewerData}
+            focusedMemoryHighlight }}
           @byteselected=${this.#onByteSelected}
           @resize=${this.#resize}>
         </devtools-linear-memory-inspector-viewer>
@@ -233,7 +228,7 @@ export class LinearMemoryInspector extends HTMLElement {
             valueTypes: this.#valueTypes,
             valueTypeModes: this.#valueTypeModes,
             endianness: this.#endianness,
-            memoryLength: this.#outerMemoryLength } as LinearMemoryValueInterpreterData}
+            memoryLength: this.#outerMemoryLength }}
           @valuetypetoggled=${this.#onValueTypeToggled}
           @valuetypemodechanged=${this.#onValueTypeModeChanged}
           @endiannesschanged=${this.#onEndiannessChanged}

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -12,9 +12,8 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import linearMemoryValueInterpreterStyles from './linearMemoryValueInterpreter.css.js';
-import type {ValueDisplayData} from './ValueInterpreterDisplay.js';
 import {Endianness, type ValueType, type ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
-import type {TypeToggleEvent, ValueInterpreterSettingsData} from './ValueInterpreterSettings.js';
+import type {TypeToggleEvent} from './ValueInterpreterSettings.js';
 
 const UIStrings = {
   /**
@@ -101,7 +100,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
           ${this.#showSettings ?
             html`
               <devtools-linear-memory-inspector-interpreter-settings
-                .data=${{ valueTypes: this.#valueTypes } as ValueInterpreterSettingsData}
+                .data=${{ valueTypes: this.#valueTypes }}
                 @typetoggle=${this.#onTypeToggle}>
               </devtools-linear-memory-inspector-interpreter-settings>` :
             html`
@@ -112,7 +111,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
                   endianness: this.#endianness,
                   valueTypeModes: this.#valueTypeModeConfig,
                   memoryLength: this.#memoryLength,
-                } as ValueDisplayData}>
+                }}>
               </devtools-linear-memory-inspector-interpreter-display>`}
         </div>
       </div>

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -5,7 +5,6 @@
 import '../../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -166,7 +165,7 @@ export class ValueInterpreterDisplay extends HTMLElement {
                 jslog=${VisualLogging.action('linear-memory-inspector.jump-to-address').track({click: true})}
                 @click=${this.#onJumpToAddressClicked.bind(this, Number(address))}>
                 <devtools-icon .data=${
-                  {iconName: 'open-externally', color: iconColor, width: '16px'} as IconButton.Icon.IconWithName}>
+                  {iconName: 'open-externally', color: iconColor, width: '16px'}}>
                 </devtools-icon>
               </button>`}
         </div>

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/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';
@@ -383,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;
   }
 
@@ -391,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;
     }
@@ -536,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',
 };
 
@@ -548,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;
@@ -883,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();
@@ -1060,7 +1084,7 @@ export class NetworkRequestNode extends NetworkNode {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.requestInternal.url());
   }
 
-  override isFailed(): boolean {
+  private isFailed(): boolean {
     return PanelUtils.isFailedNetworkRequest(this.requestInternal);
   }
 
@@ -1084,6 +1108,12 @@ export class NetworkRequestNode extends NetworkNode {
       // render icons
       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') {
@@ -1452,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/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:
@@ -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/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;
     }