chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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') {
@@ -1376,7 +1406,7 @@ export class NetworkRequestNode extends NetworkNode {
   }
 
   private renderSizeCell(cell: HTMLElement): void {
-    const resourceSize = Platform.NumberUtilities.bytesToString(this.requestInternal.resourceSize);
+    const resourceSize = i18n.ByteUtilities.bytesToString(this.requestInternal.resourceSize);
 
     if (this.requestInternal.cachedInMemory()) {
       UI.UIUtils.createTextChild(cell, i18nString(UIStrings.memoryCache));
@@ -1389,7 +1419,7 @@ export class NetworkRequestNode extends NetworkNode {
       UI.UIUtils.createTextChild(cell, i18n.i18n.lockedString('(ServiceWorker router)'));
       let tooltipText;
       if (serviceWorkerRouterInfo.matchedSourceType === Protocol.Network.ServiceWorkerRouterSource.Network) {
-        const transferSize = Platform.NumberUtilities.bytesToString(this.requestInternal.transferSize);
+        const transferSize = i18n.ByteUtilities.bytesToString(this.requestInternal.transferSize);
         tooltipText = i18nString(
             UIStrings.matchedToServiceWorkerRouterWithNetworkSource,
             {PH1: ruleIdMatched, PH2: transferSize, PH3: resourceSize});
@@ -1419,7 +1449,7 @@ export class NetworkRequestNode extends NetworkNode {
       UI.Tooltip.Tooltip.install(cell, i18nString(UIStrings.servedFromDiskCacheResourceSizeS, {PH1: resourceSize}));
       cell.classList.add('network-dim-cell');
     } else {
-      const transferSize = Platform.NumberUtilities.bytesToString(this.requestInternal.transferSize);
+      const transferSize = i18n.ByteUtilities.bytesToString(this.requestInternal.transferSize);
       UI.UIUtils.createTextChild(cell, transferSize);
       UI.Tooltip.Tooltip.install(cell, `${transferSize} transferred over network, resource size: ${resourceSize}`);
     }
@@ -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:
@@ -1144,7 +1144,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         this.handleContextMenuForRequest(contextMenu, request);
       }
     });
-    this.dataGrid.setStickToBottom(true);
+    this.dataGrid.setEnableAutoScrollToBottom(true);
     this.dataGrid.setName('network-log');
     this.dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.LAST);
     this.dataGrid.element.classList.add('network-log-grid');
@@ -1272,26 +1272,26 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       this.summaryToolbarInternal.appendSeparator();
       appendChunk(
           i18nString(UIStrings.sSTransferred, {
-            PH1: Platform.NumberUtilities.bytesToString(selectedTransferSize),
-            PH2: Platform.NumberUtilities.bytesToString(transferSize),
+            PH1: i18n.ByteUtilities.bytesToString(selectedTransferSize),
+            PH2: i18n.ByteUtilities.bytesToString(transferSize),
           }),
           i18nString(UIStrings.sBSBTransferredOverNetwork, {PH1: selectedTransferSize, PH2: transferSize}));
       this.summaryToolbarInternal.appendSeparator();
       appendChunk(
           i18nString(UIStrings.sSResources, {
-            PH1: Platform.NumberUtilities.bytesToString(selectedResourceSize),
-            PH2: Platform.NumberUtilities.bytesToString(resourceSize),
+            PH1: i18n.ByteUtilities.bytesToString(selectedResourceSize),
+            PH2: i18n.ByteUtilities.bytesToString(resourceSize),
           }),
           i18nString(UIStrings.sBSBResourcesLoadedByThePage, {PH1: selectedResourceSize, PH2: resourceSize}));
     } else {
       appendChunk(i18nString(UIStrings.sRequests, {PH1: nodeCount}));
       this.summaryToolbarInternal.appendSeparator();
       appendChunk(
-          i18nString(UIStrings.sTransferred, {PH1: Platform.NumberUtilities.bytesToString(transferSize)}),
+          i18nString(UIStrings.sTransferred, {PH1: i18n.ByteUtilities.bytesToString(transferSize)}),
           i18nString(UIStrings.sBTransferredOverNetwork, {PH1: transferSize}));
       this.summaryToolbarInternal.appendSeparator();
       appendChunk(
-          i18nString(UIStrings.sResources, {PH1: Platform.NumberUtilities.bytesToString(resourceSize)}),
+          i18nString(UIStrings.sResources, {PH1: i18n.ByteUtilities.bytesToString(resourceSize)}),
           i18nString(UIStrings.sBResourcesLoadedByThePage, {PH1: resourceSize}));
     }
 
@@ -1595,7 +1595,6 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     this.dataGrid.rootNode().removeChildren();
     this.updateSummaryBar();
-    this.dataGrid.setStickToBottom(true);
     this.scheduleRefresh();
   }
 
@@ -1822,7 +1821,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;
     }

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -505,6 +505,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     }
   }
 
+  // Used when `network-color-code-resource-types` is true
   private getSimplifiedBarRange(request: SDK.NetworkRequest.NetworkRequest, borderOffset: number): {
     start: number,
     mid: number,
@@ -519,6 +520,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     };
   }
 
+  // Used when `network-color-code-resource-types` is true
   private buildSimplifiedBarLayers(context: CanvasRenderingContext2D, node: NetworkNode, y: number): void {
     const request = node.request();
     if (!request) {

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

@@ -42,7 +42,7 @@ describeWithEnvironment('RequestResponseView', () => {
     component.detach();
   });
 
-  it('shows the RequestBinaryResponseView for binary content', async () => {
+  it('shows the BinaryResourceView 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,
@@ -60,7 +60,7 @@ describeWithEnvironment('RequestResponseView', () => {
     component.show(document.body);
     const widget = await showPreviewSpy.returnValues[0];
 
-    assert.instanceOf(widget, Network.RequestBinaryResponseView.RequestBinaryResponseView);
+    assert.instanceOf(widget, Network.BinaryResourceView.BinaryResourceView);
 
     await raf();
     component.detach();

package/front_end/panels/network/RequestResponseView.ts

@@ -37,7 +37,7 @@ 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';
+import {BinaryResourceView} from './BinaryResourceView.js';
 
 const UIStrings = {
   /**
@@ -63,18 +63,14 @@ export class RequestResponseView extends UI.Widget.VBox {
     this.contentViewPromise = null;
   }
 
-  static async sourceViewForRequest(request: SDK.NetworkRequest.NetworkRequest): Promise<UI.Widget.Widget|null> {
+  static #sourceViewForRequest(
+      request: SDK.NetworkRequest.NetworkRequest,
+      contentData: TextUtils.StreamingContentData.StreamingContentData): UI.Widget.Widget|null {
     let sourceView = requestToSourceView.get(request);
     if (sourceView !== undefined) {
       return sourceView;
     }
 
-    const contentData = await request.requestStreamingContent();
-    if (TextUtils.StreamingContentData.isError(contentData)) {
-      requestToSourceView.delete(request);
-      return null;
-    }
-
     let mimeType;
     // If the main document is of type JSON (or any JSON subtype), do not use the more generic canonical MIME type,
     // which would prevent the JSON from being pretty-printed. See https://crbug.com/406900
@@ -96,7 +92,7 @@ export class RequestResponseView extends UI.Widget.VBox {
       // 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);
+      sourceView = new BinaryResourceView(contentData, request.url(), request.resourceType());
     }
 
     requestToSourceView.set(request, sourceView);
@@ -126,7 +122,7 @@ export class RequestResponseView extends UI.Widget.VBox {
       return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.failedToLoadResponseData) + ': ' + contentData.error);
     }
 
-    const sourceView = await RequestResponseView.sourceViewForRequest(this.request);
+    const sourceView = RequestResponseView.#sourceViewForRequest(this.request, contentData);
     if (!sourceView || this.request.statusCode === 204) {
       return new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.thisRequestHasNoResponseData));
     }

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

@@ -5,7 +5,10 @@
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
 
+import * as Network from './NetworkTimeCalculator.js';
 import * as RequestTimingView from './RequestTimingView.js';
 
 function createNetworkRequest(
@@ -53,7 +56,7 @@ function createNetworkRequest(
   return request;
 }
 
-describe('ResourceTimingView', () => {
+describeWithLocale('ResourceTimingView', () => {
   it('RequestTimeRanges has router evaluation field with SW router source as network', async () => {
     const request = createNetworkRequest(
         Protocol.Network.ServiceWorkerRouterSource.Network, Protocol.Network.ServiceWorkerRouterSource.Network);
@@ -133,4 +136,35 @@ describe('ResourceTimingView', () => {
     assert.strictEqual(cacheLookup?.start, timingInfo.requestTime + cacheLookupStart / 1000);
     assert.strictEqual(cacheLookup?.end, timingInfo.requestTime + timingInfo.sendStart / 1000);
   });
+
+  it('Timing table has router evaluation field with detail tabs', async () => {
+    const request = createNetworkRequest(
+        Protocol.Network.ServiceWorkerRouterSource.Network, Protocol.Network.ServiceWorkerRouterSource.Network);
+
+    const component = new RequestTimingView.RequestTimingView(request, new Network.NetworkTimeCalculator(true));
+    const div = document.createElement('div');
+    renderElementIntoDOM(div);
+    component.markAsRoot();
+    component.show(div);
+
+    // Test if we correctly set details element
+    const routerEvaluationDetailsElement = document.querySelector('.router-evaluation-timing-bar-details');
+    assert.isNotNull(routerEvaluationDetailsElement, 'router evaluation details does not exist');
+    assert.strictEqual(
+        routerEvaluationDetailsElement.childElementCount, 1,
+        'router evaluation details child element count does not match');
+    assert.isNotNull(routerEvaluationDetailsElement.firstElementChild, 'router evaluation first element is non null');
+
+    // Test if we correctly set the tree item inside shadow root
+    const shadowElement = routerEvaluationDetailsElement.firstElementChild.shadowRoot;
+    assert.isNotNull(shadowElement, 'shadow element does not exist');
+    const content = getCleanTextContentFromElements(shadowElement, '.network-fetch-details-treeitem');
+    assert.strictEqual(content.length, 2, 'does not match the tree item');
+
+    // Check the content of the view. Since the value is set from matched to actual,
+    // the order should be the same.
+    const networkString = String(Protocol.Network.ServiceWorkerRouterSource.Network);
+    assert.strictEqual(content[0], `Matched source: ${networkString}`, 'matched source does not match');
+    assert.strictEqual(content[1], `Actual source: ${networkString}`, 'actual source does not match');
+  });
 });

package/front_end/panels/network/RequestTimingView.ts

@@ -106,6 +106,14 @@ const UIStrings = {
    *@description Text in Signed Exchange Info View of the Network panel
    */
   label: 'Label',
+  /**
+   *@description Text in Request Timing View of the Network panel
+   */
+  routerEvaluation: 'Router Evaluation',
+  /**
+   *@description Text in Request Timing View of the Network panel
+   */
+  routerCacheLookup: 'Cache Lookup',
   /**
    *@description Inner element text content in Network Log View Columns of the Network panel
    */
@@ -217,6 +225,16 @@ const UIStrings = {
    *@description Text used to show that data was retrieved using ServiceWorker fallback code
    */
   fallbackCode: 'Fallback code',
+  /**
+   *@description Name of the specified source for SW static routing API.
+   *@example {network} PH1
+   */
+  routerMatchedSource: 'Matched source: {PH1}',
+  /**
+   *@description Name of the actually used source for SW static routing API.
+   *@example {network} PH1
+   */
+  routerActualSource: 'Actual source: {PH1}',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestTimingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -258,6 +276,10 @@ export class RequestTimingView extends UI.Widget.VBox {
         return i18nString(UIStrings.requestToServiceworker);
       case RequestTimeRangeNames.SERVICE_WORKER_PREPARATION:
         return i18nString(UIStrings.startup);
+      case RequestTimeRangeNames.SERVICE_WORKER_ROUTER_EVALUATION:
+        return i18nString(UIStrings.routerEvaluation);
+      case RequestTimeRangeNames.SERVICE_WORKER_CACHE_LOOKUP:
+        return i18nString(UIStrings.routerCacheLookup);
       case RequestTimeRangeNames.SERVICE_WORKER_RESPOND_WITH:
         return i18nString(UIStrings.respondwith);
       case RequestTimeRangeNames.SSL:
@@ -490,6 +512,15 @@ export class RequestTimingView extends UI.Widget.VBox {
         timingBarTitleElement.setAttribute('role', 'switch');
         UI.ARIAUtils.setChecked(timingBarTitleElement, false);
       }
+
+      if (range.name === 'serviceworker-routerevaluation') {
+        timingBarTitleElement.classList.add('network-fetch-timing-bar-clickable');
+        tableElement.createChild('tr', 'router-evaluation-timing-bar-details');
+
+        timingBarTitleElement.setAttribute('tabindex', '0');
+        timingBarTitleElement.setAttribute('role', 'switch');
+        UI.ARIAUtils.setChecked(timingBarTitleElement, false);
+      }
     }
 
     if (!request.finished && !request.preserved) {
@@ -683,6 +714,67 @@ export class RequestTimingView extends UI.Widget.VBox {
     }
   }
 
+  private constructRouterEvaluationView(): void {
+    if (!this.tableElement) {
+      return;
+    }
+
+    const routerEvaluationDetailsElement = this.tableElement.querySelector('.router-evaluation-timing-bar-details');
+    if (!routerEvaluationDetailsElement) {
+      return;
+    }
+
+    routerEvaluationDetailsElement.classList.add('network-fetch-timing-bar-details-collapsed');
+
+    self.onInvokeElement(
+        this.tableElement, this.onToggleRouterEvaluationDetails.bind(this, routerEvaluationDetailsElement));
+
+    const detailsView = new UI.TreeOutline.TreeOutlineInShadow();
+    routerEvaluationDetailsElement.appendChild(detailsView.element);
+
+    const {serviceWorkerRouterInfo} = this.request;
+    if (!serviceWorkerRouterInfo) {
+      return;
+    }
+
+    const document = this.tableElement.ownerDocument;
+
+    // Add matched source type element
+    const matchedSourceTypeElement = document.createElement('div');
+    matchedSourceTypeElement.classList.add('network-fetch-details-treeitem');
+    const matchedSourceType = serviceWorkerRouterInfo.matchedSourceType;
+    const matchedSourceTypeString = String(matchedSourceType) || i18nString(UIStrings.unknown);
+    matchedSourceTypeElement.textContent = i18nString(UIStrings.routerMatchedSource, {PH1: matchedSourceTypeString});
+
+    const matchedSourceTypeTreeElement = new UI.TreeOutline.TreeElement(matchedSourceTypeElement);
+    detailsView.appendChild(matchedSourceTypeTreeElement);
+
+    // Add actual source type element
+    const actualSourceTypeElement = document.createElement('div');
+    actualSourceTypeElement.classList.add('network-fetch-details-treeitem');
+    const actualSourceType = serviceWorkerRouterInfo.actualSourceType;
+    const actualSourceTypeString = String(actualSourceType) || i18nString(UIStrings.unknown);
+    actualSourceTypeElement.textContent = i18nString(UIStrings.routerActualSource, {PH1: actualSourceTypeString});
+
+    const actualSourceTypeTreeElement = new UI.TreeOutline.TreeElement(actualSourceTypeElement);
+    detailsView.appendChild(actualSourceTypeTreeElement);
+  }
+
+  private onToggleRouterEvaluationDetails(routerEvaluationDetailsElement: Element, event: Event): void {
+    if (!event.target) {
+      return;
+    }
+
+    const target = (event.target as Element);
+    if (target.classList.contains('network-fetch-timing-bar-clickable')) {
+      const expanded = target.getAttribute('aria-checked') === 'true';
+      target.setAttribute('aria-checked', String(!expanded));
+
+      routerEvaluationDetailsElement.classList.toggle('network-fetch-timing-bar-details-collapsed');
+      routerEvaluationDetailsElement.classList.toggle('network-fetch-timing-bar-details-expanded');
+    }
+  }
+
   override wasShown(): void {
     this.request.addEventListener(SDK.NetworkRequest.Events.TIMING_CHANGED, this.refresh, this);
     this.request.addEventListener(SDK.NetworkRequest.Events.FINISHED_LOADING, this.refresh, this);
@@ -709,6 +801,10 @@ export class RequestTimingView extends UI.Widget.VBox {
     if (this.request.fetchedViaServiceWorker) {
       this.constructFetchDetailsView();
     }
+
+    if (this.request.serviceWorkerRouterInfo) {
+      this.constructRouterEvaluationView();
+    }
   }
 
   private boundaryChanged(): void {