chrome-devtools-frontend 1.0.1578486 → 1.0.1578729

package/front_end/core/common/Revealer.ts

@@ -34,10 +34,6 @@ const UIStrings = {
    * @description The UI destination when right clicking an item that can be revealed
    */
   applicationPanel: 'Application panel',
-  /**
-   * @description The UI destination when right clicking an item that can be revealed
-   */
-  securityPanel: 'Security panel',
   /**
    * @description The UI destination when right clicking an item that can be revealed
    */
@@ -189,7 +185,6 @@ export const RevealerDestination = {
   TIMELINE_PANEL: i18nLazyString(UIStrings.timelinePanel),
   APPLICATION_PANEL: i18nLazyString(UIStrings.applicationPanel),
   SOURCES_PANEL: i18nLazyString(UIStrings.sourcesPanel),
-  SECURITY_PANEL: i18nLazyString(UIStrings.securityPanel),
   MEMORY_INSPECTOR_PANEL: i18nLazyString(UIStrings.memoryInspectorPanel),
   ANIMATIONS_PANEL: i18nLazyString(UIStrings.animationsPanel),
 };

package/front_end/core/sdk/ConsoleModel.ts

@@ -545,7 +545,6 @@ export interface ConsoleMessageDetails {
   context?: string;
   affectedResources?: AffectedResources;
   category?: Protocol.Log.LogEntryCategory;
-  isCookieReportIssue?: boolean;
 }
 
 export class ConsoleMessage {
@@ -569,7 +568,6 @@ export class ConsoleMessage {
   #exceptionId?: number = undefined;
   #affectedResources?: AffectedResources;
   category?: Protocol.Log.LogEntryCategory;
-  isCookieReportIssue = false;
 
   /**
    * The parent frame of the `console.log` call of logpoints or conditional breakpoints
@@ -600,7 +598,6 @@ export class ConsoleMessage {
     this.workerId = details?.workerId;
     this.#affectedResources = details?.affectedResources;
     this.category = details?.category;
-    this.isCookieReportIssue = Boolean(details?.isCookieReportIssue);
 
     if (!this.#executionContextId && this.#runtimeModel) {
       if (this.scriptId) {

package/front_end/models/ai_assistance/AiConversation.ts

@@ -17,10 +17,10 @@ import {
   ResponseType
 } from './agents/AiAgent.js';
 import {ContextSelectionAgent} from './agents/ContextSelectionAgent.js';
-import {FileAgent} from './agents/FileAgent.js';
-import {NetworkAgent} from './agents/NetworkAgent.js';
-import {PerformanceAgent} from './agents/PerformanceAgent.js';
-import {StylingAgent} from './agents/StylingAgent.js';
+import {FileAgent, FileContext} from './agents/FileAgent.js';
+import {NetworkAgent, RequestContext} from './agents/NetworkAgent.js';
+import {PerformanceAgent, PerformanceTraceContext} from './agents/PerformanceAgent.js';
+import {NodeContext, StylingAgent} from './agents/StylingAgent.js';
 import {AiHistoryStorage, ConversationType, type SerializedConversation} from './AiHistoryStorage.js';
 import type {ChangeManager} from './ChangeManager.js';
 import {NetworkRequestFormatter} from './data_formatters/NetworkRequestFormatter.js';
@@ -59,14 +59,17 @@ export class AiConversation {
   }
 
   readonly id: string;
-  #type: ConversationType;
+  // Handled in #updateAgent
+  #type!: ConversationType;
+  // Handled in #updateAgent
+  #agent!: AiAgent<unknown>;
+
   #isReadOnly: boolean;
   readonly history: ResponseData[];
   #isExternal: boolean;
 
   #aidaClient: Host.AidaClient.AidaClient;
   #changeManager: ChangeManager|undefined;
-  #agent: AiAgent<unknown>;
   #origin?: string;
 
   #contexts: Array<ConversationContext<unknown>> = [];
@@ -82,14 +85,13 @@ export class AiConversation {
   ) {
     this.#changeManager = changeManager;
     this.#aidaClient = aidaClient;
-    this.#type = type;
 
     this.id = id;
     this.#isReadOnly = isReadOnly;
     this.#isExternal = isExternal;
     this.history = this.#reconstructHistory(data);
     // Needs to be last
-    this.#agent = this.#createAgent();
+    this.#updateAgent(type);
   }
 
   get isReadOnly(): boolean {
@@ -123,10 +125,26 @@ export class AiConversation {
   setContext(updateContext: ConversationContext<unknown>|null): void {
     if (!updateContext) {
       this.#contexts = [];
+      if (isAiAssistanceContextSelectionAgentEnabled()) {
+        this.#updateAgent(ConversationType.NONE);
+      }
+
       return;
     }
 
     this.#contexts = [updateContext];
+
+    if (isAiAssistanceContextSelectionAgentEnabled()) {
+      if (updateContext instanceof FileContext) {
+        this.#updateAgent(ConversationType.FILE);
+      } else if (updateContext instanceof NodeContext) {
+        this.#updateAgent(ConversationType.STYLING);
+      } else if (updateContext instanceof RequestContext) {
+        this.#updateAgent(ConversationType.NETWORK);
+      } else if (updateContext instanceof PerformanceTraceContext) {
+        this.#updateAgent(ConversationType.PERFORMANCE);
+      }
+    }
   }
 
   get selectedContext(): ConversationContext<unknown>|undefined {
@@ -249,37 +267,40 @@ export class AiConversation {
     };
   }
 
-  #createAgent(): AiAgent<unknown> {
+  #updateAgent(type: ConversationType): void {
+    if (this.#type === type) {
+      return;
+    }
+
+    this.#type = type;
     const options = {
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: isAiAssistanceServerSideLoggingEnabled(),
       sessionId: this.id,
       changeManager: this.#changeManager,
     };
-    let agent: AiAgent<unknown>;
-    switch (this.#type) {
+    switch (type) {
       case ConversationType.STYLING: {
-        agent = new StylingAgent(options);
+        this.#agent = new StylingAgent(options);
         break;
       }
       case ConversationType.NETWORK: {
-        agent = new NetworkAgent(options);
+        this.#agent = new NetworkAgent(options);
         break;
       }
       case ConversationType.FILE: {
-        agent = new FileAgent(options);
+        this.#agent = new FileAgent(options);
         break;
       }
       case ConversationType.PERFORMANCE: {
-        agent = new PerformanceAgent(options);
+        this.#agent = new PerformanceAgent(options);
         break;
       }
       case ConversationType.NONE: {
-        agent = new ContextSelectionAgent(options);
+        this.#agent = new ContextSelectionAgent(options);
         break;
       }
     }
-    return agent;
   }
 
   #factsCache = new Map<ExtraContext, Host.AidaClient.RequestFact>();
@@ -399,11 +420,6 @@ Time: ${micros(time)}`;
         },
         options.multimodalInput,
         )) {
-      if (data.type === ResponseType.CONTEXT_CHANGE) {
-        this.#type = ConversationType.NETWORK;
-        this.#agent = this.#createAgent();
-      }
-
       if (shouldAddToHistory(data)) {
         void this.addHistoryItem(data);
       }
@@ -439,3 +455,7 @@ function isAiAssistanceServerSideLoggingEnabled(): boolean {
 type ExtraContext = SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest|
                     {event: Trace.Types.Events.Event, traceStartTime: Trace.Types.Timing.Micro}|
                     {insight: Trace.Insights.Types.InsightModel, trace: Trace.TraceModel.ParsedTrace};
+
+function isAiAssistanceContextSelectionAgentEnabled(): boolean {
+  return Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceContextSelectionAgent?.enabled);
+}

package/front_end/models/issues_manager/CookieIssue.ts

@@ -327,7 +327,6 @@ export class CookieIssue extends Issue<Protocol.Audits.CookieIssueDetails> {
           Protocol.Log.LogEntryLevel.Warning, UIStrings.consoleTpcdErrorMessage, {
             url: this.details().request?.url as Platform.DevToolsPath.UrlString | undefined,
             affectedResources: {requestId: this.details().request?.requestId, issueId: this.issueId},
-            isCookieReportIssue: true
           });
     }
     return;

package/front_end/models/issues_manager/IssuesManager.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 
@@ -12,7 +11,7 @@ import {BounceTrackingIssue} from './BounceTrackingIssue.js';
 import {ClientHintIssue} from './ClientHintIssue.js';
 import {ContentSecurityPolicyIssue} from './ContentSecurityPolicyIssue.js';
 import {CookieDeprecationMetadataIssue} from './CookieDeprecationMetadataIssue.js';
-import {CookieIssue, CookieIssueSubCategory} from './CookieIssue.js';
+import {CookieIssue} from './CookieIssue.js';
 import {CorsIssue} from './CorsIssue.js';
 import {CrossOriginEmbedderPolicyIssue, isCrossOriginEmbedderPolicyIssue} from './CrossOriginEmbedderPolicyIssue.js';
 import {DeprecationIssue} from './DeprecationIssue.js';
@@ -211,7 +210,6 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   #thirdPartyCookiePhaseoutIssueCount = new Map<IssueKind, number>();
   #issuesById = new Map<string, Issue>();
   #issuesByOutermostTarget: WeakMap<SDK.Target.Target, Set<Issue>> = new Map();
-  #thirdPartyCookiePhaseoutIssueMessageSent = false;
 
   constructor(
       private readonly showThirdPartyIssuesSetting?: Common.Settings.Setting<boolean>,
@@ -314,7 +312,6 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
 
   #onIssueAddedEvent(event: Common.EventTarget.EventTargetEvent<SDK.IssuesModel.IssueAddedEvent>): void {
     const {issuesModel, inspectorIssue} = event.data;
-    const isPrivacyUiEnabled = Root.Runtime.hostConfig.devToolsPrivacyUI?.enabled;
 
     const issues = createIssuesFromProtocolIssue(issuesModel, inspectorIssue);
     for (const issue of issues) {
@@ -323,16 +320,7 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
       if (!message) {
         continue;
       }
-
-      // Only show one message for third-party cookie phaseout issues if the new privacy ui is enabled
-      const is3rdPartyCookiePhaseoutIssue =
-          CookieIssue.getSubCategory(issue.code()) === CookieIssueSubCategory.THIRD_PARTY_PHASEOUT_COOKIE;
-      if (!is3rdPartyCookiePhaseoutIssue || !isPrivacyUiEnabled || !this.#thirdPartyCookiePhaseoutIssueMessageSent) {
-        issuesModel.target().model(SDK.ConsoleModel.ConsoleModel)?.addMessage(message);
-      }
-      if (is3rdPartyCookiePhaseoutIssue && isPrivacyUiEnabled) {
-        this.#thirdPartyCookiePhaseoutIssueMessageSent = true;
-      }
+      issuesModel.target().model(SDK.ConsoleModel.ConsoleModel)?.addMessage(message);
     }
   }
 
@@ -453,7 +441,6 @@ export class IssuesManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     this.#issuesById.clear();
     this.#hiddenIssueCount.clear();
     this.#thirdPartyCookiePhaseoutIssueCount.clear();
-    this.#thirdPartyCookiePhaseoutIssueMessageSent = false;
     const values = this.hideIssueSetting?.get();
     for (const [key, issue] of this.#allIssues) {
       if (this.#issueFilter(issue)) {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -729,7 +729,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#conversation = conversation;
     }
 
-    this.#conversation?.setContext(this.#getConversationContext(this.#conversation));
+    this.#conversation?.setContext(this.#getConversationContext(
+        isAiAssistanceContextSelectionAgentEnabled() ? this.#getDefaultConversationType() :
+                                                       (this.#conversation?.type ?? null)));
 
     this.requestUpdate();
   }
@@ -1269,12 +1271,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#runAbortController = new AbortController();
   }
 
-  #getConversationContext(conversation?: AiAssistanceModel.AiConversation.AiConversation):
+  #getConversationContext(type?: AiAssistanceModel.AiHistoryStorage.ConversationType):
       AiAssistanceModel.AiAgent.ConversationContext<unknown>|null {
-    if (!conversation) {
-      return null;
-    }
-    switch (conversation.type) {
+    switch (type) {
       case AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING:
         return this.#selectedElement;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.FILE:
@@ -1284,35 +1283,28 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       case AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE:
         return this.#selectedPerformanceTrace;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+      case undefined:
         return null;
     }
   }
 
   #handleConversationContextChange = (data: unknown): void => {
     if (data instanceof Workspace.UISourceCode.UISourceCode) {
-      if (this.#selectedFile?.getItem() === data) {
-        return;
-      }
-      this.#selectedFile = new AiAssistanceModel.FileAgent.FileContext(data);
+      const context = new AiAssistanceModel.FileAgent.FileContext(data);
+      this.#selectedFile = context;
 
     } else if (data instanceof SDK.DOMModel.DOMNode) {
-      if (this.#selectedElement?.getItem() === data ||
-          // Ignore non node type like comments or html tags
-          data.nodeType() === Node.ELEMENT_NODE) {
-        return;
-      }
-      this.#selectedElement = new AiAssistanceModel.StylingAgent.NodeContext(data);
+      const context = new AiAssistanceModel.StylingAgent.NodeContext(data);
+      this.#selectedElement = context;
+
     } else if (data instanceof SDK.NetworkRequest.NetworkRequest) {
-      if (this.#selectedRequest?.getItem() === data) {
-        return;
-      }
       const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
-      this.#selectedRequest = new AiAssistanceModel.NetworkAgent.RequestContext(data, calculator);
+
+      const context = new AiAssistanceModel.NetworkAgent.RequestContext(data, calculator);
+      this.#selectedRequest = context;
     } else if (data instanceof AiAssistanceModel.AIContext.AgentFocus) {
-      if (this.#selectedPerformanceTrace?.getItem() === data) {
-        return;
-      }
-      this.#selectedPerformanceTrace = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(data);
+      const context = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(data);
+      this.#selectedPerformanceTrace = context;
     }
 
     this.#updateConversationState(this.#conversation);
@@ -1329,7 +1321,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     // Cancel any previous in-flight conversation.
     this.#cancel();
     const signal = this.#runAbortController.signal;
-    const context = this.#getConversationContext(this.#conversation);
+    const context = this.#getConversationContext(this.#conversation.type);
     this.#conversation.setContext(context);
 
     // If a different context is provided, it must be from the same origin.

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -174,7 +174,6 @@ UI.ActionRegistration.registerActionExtension({
     return new AiAssistance.ActionDelegate();
   },
   condition: config => isAnyFeatureAvailable(config) && !isPolicyRestricted(config) && !isGeoRestricted(config),
-  featurePromotionId: 'debug-with-ai',
 });
 
 UI.ActionRegistration.registerActionExtension({

package/front_end/panels/application/preloading/components/RuleSetDetailsView.css

@@ -4,11 +4,6 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: block;
-  height: 100%;
-}
-
 .placeholder {
   display: flex;
   height: 100%;

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -38,7 +38,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
@@ -47,7 +46,6 @@ import type * as IssuesManager from '../../models/issues_manager/issues_manager.
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
@@ -61,7 +59,6 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
-import * as Security from '../security/security.js';
 
 import {format, updateStyle} from './ConsoleFormat.js';
 import {ConsoleInsightTeaser} from './ConsoleInsightTeaser.js';
@@ -220,10 +217,6 @@ const UIStrings = {
    * @description Message to offer insights for a console message
    */
   explainThisMessageWithAI: 'Understand this message. Powered by AI',
-  /**
-   * @description Tooltip shown when user hovers over the cookie icon to explain that the button will bring the user to the cookie report
-   */
-  SeeIssueInCookieReport: 'Click to open privacy and security panel and show third-party cookie report',
   /**
    * @description Element text content in Object Properties Section
    */
@@ -574,23 +567,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return elements;
   }
 
-  #appendCookieReportButtonToElem(elem: HTMLElement): void {
-    const button = new Buttons.Button.Button();
-    button.data = {
-      size: Buttons.Button.Size.SMALL,
-      variant: Buttons.Button.Variant.ICON,
-      iconName: 'cookie',
-      jslogContext: 'privacy',
-      title: i18nString(UIStrings.SeeIssueInCookieReport)
-    };
-
-    button.addEventListener('click', () => {
-      void Common.Revealer.reveal(new Security.CookieReportView.CookieReportView());
-    });
-
-    elem.appendChild(button);
-  }
-
   #getLinkifierMetric(): Host.UserMetrics.Action|undefined {
     const request = Logs.NetworkLog.NetworkLog.requestForConsoleMessage(this.message);
     if (request?.resourceType().isStyleSheet()) {
@@ -631,14 +607,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return null;
     };
 
-    if (this.message.isCookieReportIssue && Root.Runtime.hostConfig.devToolsPrivacyUI?.enabled) {
-      const anchorWrapperElement = document.createElement('span');
-      anchorWrapperElement.classList.add('console-message-anchor', 'cookie-report-anchor');
-      this.#appendCookieReportButtonToElem(anchorWrapperElement);
-      UI.UIUtils.createTextChild(anchorWrapperElement, ' ');
-      return anchorWrapperElement;
-    }
-
     const anchorElement = linkify(this.message);
     // Append a space to prevent the anchor text from being glued to the console message when the user selects and copies the console messages.
     if (anchorElement) {

package/front_end/panels/console/consoleView.css

@@ -486,11 +486,6 @@
   margin-left: 4px;
 }
 
-.cookie-report-anchor {
-  margin-top: -3px;
-  margin-bottom: -5px;
-}
-
 .console-message-nowrap-below,
 .console-message-nowrap-below div,
 .console-message-nowrap-below span {

package/front_end/panels/media/PlayerListView.ts

@@ -5,6 +5,7 @@
 import '../../ui/kit/kit.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, render} from '../../ui/lit/lit.js';
@@ -61,7 +62,8 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
   render(
     html`
       <style>${playerListViewStyles}</style>
-      <div class="player-entry-header">${i18nString(UIStrings.players)}</div>
+      <div class="player-entry-header" id="players-header">${i18nString(UIStrings.players)}</div>
+      <div role="listbox" aria-labelledby="players-header">
       ${input.players.map(player => {
         const isSelected = player.playerID === input.selectedPlayerID;
         return html`
@@ -71,8 +73,17 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
             selected: isSelected,
             'force-white-icons': isSelected,
           })}
+               tabindex="0"
                @click=${() => input.onPlayerClick(player.playerID)}
+               @keydown=${(e: KeyboardEvent) => {
+                 if (Platform.KeyboardUtilities.isEnterOrSpaceKey(e)) {
+                   e.preventDefault();
+                   input.onPlayerClick(player.playerID);
+                 }
+               }}
                @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
+               role="option"
+               aria-selected=${isSelected}
                jslog=${VisualLogging.item('player').track({click: true})}>
             <div class="player-entry-status-icon vbox">
               <div class="player-entry-status-icon-centering">
@@ -84,6 +95,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
           </div>
         `;
       })}
+      </div>
     `,
     target
   );

package/front_end/panels/media/playerListView.css

@@ -34,6 +34,11 @@ li.storage-group-list-item::before {
     background: var(--sys-color-state-hover-on-subtle);
   }
 
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: calc(var(--sys-size-2) * -1);
+  }
+
   &.selected {
     background: var(--sys-color-tonal-container);
     color: var(--sys-color-on-tonal-container);

package/front_end/panels/network/NetworkItemView.ts

@@ -345,7 +345,8 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
       return;
     }
     if (this.#request.queryParameters || await this.#request.requestFormData()) {
-      this.#payloadView = new RequestPayloadView(this.#request);
+      this.#payloadView = new RequestPayloadView();
+      this.#payloadView.request = this.#request;
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.PAYLOAD, i18nString(UIStrings.payload), this.#payloadView,
           i18nString(UIStrings.payload), /* userGesture=*/ void 0,

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -6,6 +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 StackTrace from '../../models/stack_trace/stack_trace.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';
@@ -880,20 +881,30 @@ export class NetworkLogViewColumns {
     if (!request) {
       return null;
     }
+    let descriptor: Common.EventTarget.EventDescriptor|undefined = undefined;
     return {
       box: anchor.boxInWindow(),
       show: async (popover: UI.GlassPane.GlassPane) => {
-        this.popupLinkifier.addEventListener(Components.Linkifier.Events.LIVE_LOCATION_UPDATED, () => {
-          popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
-        });
-        const content = RequestInitiatorView.createStackTracePreview((request), this.popupLinkifier, false);
+        const content = await RequestInitiatorView.createStackTracePreview((request), this.popupLinkifier, false);
         if (!content) {
           return false;
         }
-        content.show(popover.contentElement);
+        descriptor = content.stackTrace?.addEventListener(StackTrace.StackTrace.Events.UPDATED, async () => {
+          await content.preview.updateComplete;
+          popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+        });
+        content.preview.show(popover.contentElement);
+        await content.preview.updateComplete.then(() => {
+          popover.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
+        });
         return true;
       },
-      hide: this.popupLinkifier.reset.bind(this.popupLinkifier),
+      hide: () => {
+        this.popupLinkifier.reset();
+        if (descriptor) {
+          Common.EventTarget.removeEventListeners([descriptor]);
+        }
+      },
     };
   }
 

package/front_end/panels/network/RequestInitiatorView.ts

@@ -5,7 +5,9 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Bindings from '../../models/bindings/bindings.js';
 import * as Logs from '../../models/logs/logs.js';
+import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -172,17 +174,31 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     this.#view = view;
   }
 
-  static createStackTracePreview(
+  static async createStackTracePreview(
       request: SDK.NetworkRequest.NetworkRequest, linkifier: Components.Linkifier.Linkifier,
-      focusableLink?: boolean): Components.JSPresentationUtils.StackTracePreviewContent|null {
+      focusableLink?: boolean): Promise<{
+    preview: Components.JSPresentationUtils.StackTracePreviewContent,
+    stackTrace: StackTrace.StackTrace.StackTrace|null,
+  }|null> {
     const initiator = request.initiator();
     if (!initiator?.stack) {
       return null;
     }
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
     const target = networkManager ? networkManager.target() : undefined;
-    return new Components.JSPresentationUtils.StackTracePreviewContent(
-        undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink});
+    if (target) {
+      const stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                             .createStackTraceFromProtocolRuntime(initiator.stack, target);
+      const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
+          undefined, target, linkifier, {tabStops: focusableLink});
+      preview.stackTrace = stackTrace;
+      return {preview, stackTrace};
+    }
+    return {
+      preview: new Components.JSPresentationUtils.StackTracePreviewContent(
+          undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink}),
+      stackTrace: null
+    };
   }
 
   override performUpdate(): void {