chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -48,7 +48,7 @@ import * as Logs from '../../models/logs/logs.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.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';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -969,14 +969,14 @@ export class NetworkRequestNode extends NetworkNode {
     return this.isFailed() && !this.isPrefetch();
   }
 
-  override createCells(element: Element): void {
+  override createCells(trElement: HTMLElement): void {
     this.initiatorCell = null;
 
-    element.classList.toggle('network-throttled-row', Boolean(this.throttlingConditions()?.urlPattern));
-    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);
+    trElement.classList.toggle('network-throttled-row', Boolean(this.throttlingConditions()?.urlPattern));
+    trElement.classList.toggle('network-warning-row', this.isWarning());
+    trElement.classList.toggle('network-error-row', this.isError());
+    trElement.classList.toggle('network-navigation-row', this.isNavigationRequestInternal);
+    super.createCells(trElement);
     this.updateBackgroundColor();
   }
 
@@ -1143,6 +1143,14 @@ export class NetworkRequestNode extends NetworkNode {
   }
 
   override select(suppressSelectedEvent?: boolean): void {
+    const id = this.request()?.requestId();
+    if (id) {
+      const floatyHandled =
+          UI.Floaty.onFloatyClick({type: UI.Floaty.FloatyContextTypes.NETWORK_REQUEST, data: {requestId: id}});
+      if (floatyHandled) {
+        return;
+      }
+    }
     super.select(suppressSelectedEvent);
     this.parentView().dispatchEventToListeners(Events.RequestSelected, this.requestInternal);
   }
@@ -1428,7 +1436,7 @@ export class NetworkRequestNode extends NetworkNode {
       case SDK.NetworkRequest.InitiatorType.PREFLIGHT: {
         cell.appendChild(document.createTextNode(i18nString(UIStrings.preflight)));
         if (initiator.initiatorRequest) {
-          const icon = IconButton.Icon.create('arrow-up-down-circle');
+          const icon = createIcon('arrow-up-down-circle');
           const link = Components.Linkifier.Linkifier.linkifyRevealable(
               initiator.initiatorRequest, icon, undefined, i18nString(UIStrings.selectTheRequestThatTriggered),
               'trailing-link-icon', 'initator-request');
@@ -1513,7 +1521,7 @@ export class NetworkRequestNode extends NetworkNode {
       const throttlingConditionsTitle = typeof throttlingConditions.conditions.title === 'string' ?
           throttlingConditions.conditions.title :
           throttlingConditions.conditions.title();
-      const icon = IconButton.Icon.create('watch');
+      const icon = createIcon('watch');
       icon.title = i18nString(UIStrings.wasThrottled, {PH1: throttlingConditionsTitle});
       icon.addEventListener('click', () => void Common.Revealer.reveal(throttlingConditions));
       cell.append(icon);

package/front_end/panels/network/NetworkFrameGrouper.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -56,7 +56,7 @@ export class FrameGroupNode extends NetworkGroupNode {
     const columnIndex = (this.dataGrid as DataGrid.DataGrid.DataGridImpl<unknown>).indexOfVisibleColumn(columnId);
     if (columnIndex === 0) {
       const name = this.displayName();
-      cell.appendChild(IconButton.Icon.create('frame', 'network-frame-group-icon'));
+      cell.appendChild(createIcon('frame', 'network-frame-group-icon'));
       UI.UIUtils.createTextChild(cell, name);
       UI.Tooltip.Tooltip.install(cell, name);
       this.setCellAccessibleName(cell.textContent || '', cell, columnId);

package/front_end/panels/network/NetworkItemView.ts

@@ -9,9 +9,11 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
+import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import {Icon} from '../../ui/kit/kit.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -208,7 +210,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.responsePreview));
       const signedExchangeInfo = request.signedExchangeInfo();
       if (signedExchangeInfo?.errors?.length) {
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('small');
         UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.signedexchangeError));
@@ -235,11 +237,11 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
         RequestTimingView.create(request, calculator), i18nString(UIStrings.requestAndResponseTimeline));
 
     if (request.trustTokenParams()) {
+      const trustTokensView = new NetworkComponents.RequestTrustTokensView.RequestTrustTokensView();
+      trustTokensView.request = request;
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.TRUST_TOKENS, i18nString(UIStrings.trustTokens),
-          LegacyWrapper.LegacyWrapper.legacyWrapper(
-              UI.Widget.VBox, new NetworkComponents.RequestTrustTokensView.RequestTrustTokensView(request)),
-          i18nString(UIStrings.trustTokenOperationDetails));
+          trustTokensView, i18nString(UIStrings.trustTokenOperationDetails));
     }
 
     this.#initialTab = initialTab || this.#resourceViewTabSetting.get();
@@ -265,6 +267,15 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       this.#selectTab(this.#initialTab);
       this.#initialTab = undefined;
     }
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
+          Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS, this.resolveInitialState.bind(this),
+          this.element);
+
+      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(
+          Annotations.AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS);
+    }
   }
 
   override willHide(): void {
@@ -292,7 +303,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.requestAndResponseCookies));
     }
     if (this.#request.hasThirdPartyCookiePhaseoutIssue()) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'warning-filled';
       icon.classList.add('small');
       icon.title = i18nString(UIStrings.thirdPartyPhaseout);
@@ -317,7 +328,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     const trustTokenResult = this.#request.trustTokenOperationDoneEvent();
     if (trustTokenResult &&
         !NetworkComponents.RequestTrustTokensView.statusConsideredSuccess(trustTokenResult.status)) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'cross-circle-filled';
       icon.classList.add('small');
       this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.TRUST_TOKENS, icon);
@@ -336,6 +347,34 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     }
   }
 
+  async resolveInitialState(
+      parentElement: Element, reveal: boolean, lookupId: string,
+      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest): Promise<{x: number, y: number}|null> {
+    const request = anchor as SDK.NetworkRequest.NetworkRequest;
+    if ((request && request !== this.request()) || (lookupId !== this.request().requestId())) {
+      return null;
+    }
+
+    if (!this.#headersViewComponent) {
+      return null;
+    }
+    await this.#headersViewComponent.render();
+
+    const element = this.#headersViewComponent.getHeaderElementById('request-url');
+    if (!element) {
+      return null;
+    }
+
+    const targetRect = element.getBoundingClientRect();
+    const parentRect = parentElement.getBoundingClientRect();
+    // Adjust the anchor position slightly.
+    const adjustX = 15;
+    const adjustY = -19;
+    const relativeX = targetRect.x - parentRect.x + adjustX;
+    const relativeY = targetRect.y - parentRect.y + adjustY;
+    return {x: relativeX, y: relativeY};
+  }
+
   private tabSelected(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
     if (!event.data.isUserGesture) {
       return;

package/front_end/panels/network/NetworkLogView.ts

@@ -51,6 +51,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Sources from '../../panels/sources/sources.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
@@ -982,6 +983,14 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     return this.summaryToolbarInternal;
   }
 
+  getDataGrid(): DataGrid.SortableDataGrid.SortableDataGrid<NetworkNode>|null {
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      return this.dataGrid;
+    }
+
+    return null;
+  }
+
   modelAdded(networkManager: SDK.NetworkManager.NetworkManager): void {
     // TODO(allada) Remove dependency on networkManager and instead use NetworkLog and PageLoad for needed data.
     const target = networkManager.target();
@@ -1716,11 +1725,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         }
 
         UI.Context.Context.instance().setFlavor(SDK.NetworkRequest.NetworkRequest, request);
-        if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
           const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
-          const submenu = contextMenu.footerSection().appendSubMenuItem(
-              action.title(), false, openAiAssistanceId,
-              Root.Runtime.hostConfig.devToolsAiAssistanceNetworkAgent?.featureName);
+          const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
           submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.explainPurpose), 'What is the purpose of this request?',
@@ -1734,13 +1740,6 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
           appendSubmenuPromptAction(
               submenu, action, i18nString(UIStrings.assessSecurityHeaders), 'Are there any security headers present?',
               openAiAssistanceId + '.security');
-        } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
-          contextMenu.footerSection().appendAction(
-              openAiAssistanceId, undefined, false, undefined,
-              Root.Runtime.hostConfig.devToolsAiAssistanceNetworkAgent?.featureName);
-        } else {
-          contextMenu.footerSection().appendAction(openAiAssistanceId);
-        }
       }
       copyMenu.defaultSection().appendItem(
           i18nString(UIStrings.copyURL),

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -6,7 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -181,7 +181,7 @@ export class NetworkLogViewColumns {
   private waterfallScroller!: HTMLElement;
   private waterfallScrollerContent!: HTMLDivElement;
   private waterfallHeaderElement!: HTMLElement;
-  private waterfallColumnSortIcon!: IconButton.Icon.Icon;
+  private waterfallColumnSortIcon!: Icon;
   private activeWaterfallSortId!: string;
   private popoverHelper?: UI.PopoverHelper.PopoverHelper;
   private hasScrollerTouchStarted?: boolean;
@@ -415,7 +415,7 @@ export class NetworkLogViewColumns {
     this.waterfallHeaderElement.createChild('div', 'hover-layer');
     const innerElement = this.waterfallHeaderElement.createChild('div');
     innerElement.textContent = i18nString(UIStrings.waterfall);
-    this.waterfallColumnSortIcon = new IconButton.Icon.Icon();
+    this.waterfallColumnSortIcon = new Icon();
     this.waterfallColumnSortIcon.className = 'sort-order-icon';
     this.waterfallHeaderElement.createChild('div', 'sort-order-icon-container')
         .appendChild(this.waterfallColumnSortIcon);

package/front_end/panels/network/NetworkPanel.ts

@@ -44,9 +44,10 @@ import * as Logs from '../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import type * as PanelCommon from '../../panels/common/common.js';
+import * as PanelCommon from '../../panels/common/common.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Tracing from '../../services/tracing/tracing.js';
+import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -339,6 +340,14 @@ export class NetworkPanel extends UI.Panel.Panel implements
          HTMLElement);
     panel.element.appendChild(this.fileSelectorElement);
 
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      const dataGrid = this.networkLogView.getDataGrid();
+      if (dataGrid) {
+        PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
+            Annotations.AnnotationType.NETWORK_REQUEST, this.resolveInitialState.bind(this), dataGrid.scrollContainer);
+      }
+    }
+
     this.detailsWidget = new UI.Widget.VBox();
     this.detailsWidget.element.classList.add('network-details-view');
     this.splitWidget.setMainWidget(this.detailsWidget);
@@ -652,6 +661,11 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
     // Record the network tool load time after the panel has loaded.
     Host.userMetrics.panelLoaded('network', 'DevTools.Launch.Network');
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(
+          Annotations.AnnotationType.NETWORK_REQUEST);
+    }
   }
 
   override willHide(): void {
@@ -751,6 +765,47 @@ export class NetworkPanel extends UI.Panel.Panel implements
     return this.networkItemView;
   }
 
+  async resolveInitialState(
+      parentElement: Element, reveal: boolean, lookupId: string,
+      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest): Promise<{x: number, y: number}|null> {
+    let request = anchor as SDK.NetworkRequest.NetworkRequest;
+    if (!this.isShowing()) {
+      return null;
+    }
+
+    if (!request) {
+      const networkManager =
+          SDK.TargetManager.TargetManager.instance().scopeTarget()?.model(SDK.NetworkManager.NetworkManager);
+      if (!networkManager) {
+        return null;
+      }
+
+      const requests = Logs.NetworkLog.NetworkLog.instance().requestsForId(lookupId);
+      if (requests.length === 0) {
+        console.warn('Network Request list is empty');
+        return null;
+      }
+      request = requests[0];
+    }
+
+    if (reveal) {
+      await Common.Revealer.reveal(request);
+      await this.selectAndActivateRequest(request);
+    }
+
+    const requestNode = this.networkLogView?.nodeForRequest(request);
+    if (requestNode?.element()) {
+      const targetRect = requestNode.element().getBoundingClientRect();
+      const parentRect = parentElement.getBoundingClientRect();
+      const relativeX = 4;
+      const relativeY = targetRect.y - parentRect.y + parentElement.scrollTop;
+      return {x: relativeX, y: relativeY};
+    }
+
+    console.warn('Could not find element for request:', anchor);
+    return null;
+  }
+
   private updateUI(): void {
     if (this.detailsWidget) {
       this.detailsWidget.element.classList.toggle(
@@ -850,6 +905,13 @@ export class NetworkPanel extends UI.Panel.Panel implements
         Trace.Types.Timing.Milli(this.calculator.minimumBoundary() * 1000),
         Trace.Types.Timing.Milli(this.calculator.maximumBoundary() * 1000));
     this.networkOverview.updateRequest(request);
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      requestAnimationFrame(() => {
+        void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(
+            Annotations.AnnotationType.NETWORK_REQUEST);
+      });
+    }
   }
 
   resolveLocation(locationName: string): UI.View.ViewLocation|null {

package/front_end/panels/network/RequestCookiesView.ts

@@ -7,8 +7,8 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as CookieTable from '../../ui/legacy/components/cookie_table/cookie_table.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -281,7 +281,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
       this.malformedResponseCookiesList.removeChildren();
       for (const malformedCookie of malformedResponseCookies) {
         const listItem = this.malformedResponseCookiesList.createChild('span', 'cookie-line source-code');
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('cookie-warning-icon', 'small');
         listItem.appendChild(icon);