chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/network/NetworkPanel.ts

@@ -42,82 +42,83 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Extensions from '../../models/extensions/extensions.js';
 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 * as NetworkForward from '../../panels/network/forward/forward.js';
+import * as Tracing from '../../services/tracing/tracing.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
 import * as Search from '../search/search.js';
 
-import {Events, type RequestActivatedEvent} from './NetworkDataGridNode.js';
+import {Events, type RequestActivatedEvent, RequestPanelBehavior} from './NetworkDataGridNode.js';
 import {NetworkItemView} from './NetworkItemView.js';
 import {NetworkLogView} from './NetworkLogView.js';
 import {NetworkOverview} from './NetworkOverview.js';
 import networkPanelStyles from './networkPanel.css.js';
 import {NetworkSearchScope} from './NetworkSearchScope.js';
-import {type NetworkTimeCalculator, NetworkTransferTimeCalculator} from './NetworkTimeCalculator.js';
 
 const UIStrings = {
   /**
-   *@description Text to close something
+   * @description Text to close something
    */
   close: 'Close',
   /**
-   *@description Title of a search bar or tool
+   * @description Title of a search bar or tool
    */
   search: 'Search',
   /**
-   *@description Tooltip text that appears on the setting to preserve log when hovering over the item
+   * @description Tooltip text that appears on the setting to preserve log when hovering over the item
    */
   doNotClearLogOnPageReload: 'Do not clear log on page reload / navigation',
   /**
-   *@description Text to preserve the log after refreshing
+   * @description Text to preserve the log after refreshing
    */
   preserveLog: 'Preserve log',
   /**
-   *@description Text to disable cache while DevTools is open
+   * @description Text to disable cache while DevTools is open
    */
   disableCacheWhileDevtoolsIsOpen: 'Disable cache while DevTools is open',
   /**
-   *@description Text in Network Config View of the Network panel
+   * @description Text in Network Config View of the Network panel
    */
   disableCache: 'Disable cache',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in network panel of the network panel
+   * @description Tooltip text that appears when hovering over the largeicon settings gear in show settings pane setting in network panel of the network panel
    */
   networkSettings: 'Network settings',
   /**
-   *@description Tooltip for expanding network request row setting
+   * @description Tooltip for expanding network request row setting
    */
   showMoreInformationInRequestRows: 'Show more information in request rows',
   /**
-   *@description Text in Network Panel used to toggle the "big request rows" setting.
+   * @description Text in Network Panel used to toggle the "big request rows" setting.
    */
   useLargeRequestRows: 'Big request rows',
   /**
-   *@description Tooltip text for network request overview setting
+   * @description Tooltip text for network request overview setting
    */
   showOverviewOfNetworkRequests: 'Show overview of network requests',
   /**
-   *@description Text in Network Panel used to show the overview for a given network request.
+   * @description Text in Network Panel used to show the overview for a given network request.
    */
   showOverview: 'Overview',
   /**
-   *@description Tooltip for group by frame network setting
+   * @description Tooltip for group by frame network setting
    */
   groupRequestsByTopLevelRequest: 'Group requests by top level request frame',
   /**
-   *@description Text for group by frame network setting
+   * @description Text for group by frame network setting
    */
   groupByFrame: 'Group by frame',
   /**
-   *@description Tooltip for capture screenshot network setting
+   * @description Tooltip for capture screenshot network setting
    */
   captureScreenshotsWhenLoadingA: 'Capture screenshots when loading a page',
   /**
-   *@description Text to take screenshots
+   * @description Text to take screenshots
    */
   captureScreenshots: 'Screenshots',
   /**
@@ -152,12 +153,12 @@ const UIStrings = {
    */
   exportHarWithSensitiveData: 'Export `HAR` (with sensitive data)…',
   /**
-   *@description Text for throttling the network
+   * @description Text for throttling the network
    */
   throttling: 'Throttling',
   /**
-   *@description Text in Network Panel to tell the user to reload the page to capture screenshots.
-   *@example {Ctrl + R} PH1
+   * @description Text in Network Panel to tell the user to reload the page to capture screenshots.
+   * @example {Ctrl + R} PH1
    */
   hitSToReloadAndCaptureFilmstrip: 'Press {PH1} to reload and capture filmstrip.',
   /**
@@ -174,11 +175,11 @@ const UIStrings = {
    */
   openInNetworkPanelMissingRequest: 'Open in Network panel (missing request)',
   /**
-   *@description Text in Network Panel that is displayed whilst the recording is in progress.
+   * @description Text in Network Panel that is displayed whilst the recording is in progress.
    */
   recordingFrames: 'Recording frames…',
   /**
-   *@description Text in Network Panel that is displayed when frames are being fetched.
+   * @description Text in Network Panel that is displayed when frames are being fetched.
    */
   fetchingFrames: 'Fetching frames…',
   /**
@@ -211,7 +212,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
   private readonly overviewPane: PerfUI.TimelineOverviewPane.TimelineOverviewPane;
   private readonly networkOverview: NetworkOverview;
   private readonly overviewPlaceholderElement: HTMLElement;
-  private readonly calculator: NetworkTransferTimeCalculator;
+  private readonly calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
   private splitWidget: UI.SplitWidget.SplitWidget;
   private readonly sidebarLocation: UI.View.TabbedViewLocation;
   private readonly progressBarContainer: HTMLDivElement;
@@ -221,7 +222,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
   private readonly closeButtonElement: UI.UIUtils.DevToolsCloseButton;
   private preserveLogSetting: Common.Settings.Setting<boolean>;
   recordLogSetting: Common.Settings.Setting<boolean>;
-  private readonly throttlingSelect: UI.Toolbar.ToolbarComboBox;
+  private readonly throttlingSelect: UI.Toolbar.ToolbarItem;
   private readonly displayScreenshotDelay: number;
 
   constructor(displayScreenshotDelay: number) {
@@ -290,7 +291,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
     this.overviewPane.setOverviewControls([this.networkOverview]);
     this.overviewPlaceholderElement = panel.contentElement.createChild('div');
 
-    this.calculator = new NetworkTransferTimeCalculator();
+    this.calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
 
     this.splitWidget = new UI.SplitWidget.SplitWidget(true, false, 'network-panel-split-view-state');
     this.splitWidget.hideMain();
@@ -407,7 +408,7 @@ export class NetworkPanel extends UI.Panel.Panel implements
     return UI.ViewManager.ViewManager.instance().showView('network');
   }
 
-  throttlingSelectForTest(): UI.Toolbar.ToolbarComboBox {
+  throttlingSelectForTest(): UI.Toolbar.ToolbarItem {
     return this.throttlingSelect;
   }
 
@@ -518,10 +519,12 @@ export class NetworkPanel extends UI.Panel.Panel implements
     updateShowOptionsToGenerateHarWithSensitiveData();
   }
 
-  private createThrottlingConditionsSelect(): UI.Toolbar.ToolbarComboBox {
-    const toolbarItem = new UI.Toolbar.ToolbarComboBox(null, i18nString(UIStrings.throttling));
+  private createThrottlingConditionsSelect(): UI.Toolbar.ToolbarItem {
+    const toolbarItem = new UI.Toolbar.ToolbarItem(document.createElement('div'));
     toolbarItem.setMaxWidth(160);
-    MobileThrottling.ThrottlingManager.throttlingManager().createNetworkThrottlingSelector(toolbarItem.element);
+
+    MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.createForGlobalConditions(
+        toolbarItem.element, i18nString(UIStrings.throttling));
     return toolbarItem;
   }
 
@@ -691,9 +694,9 @@ export class NetworkPanel extends UI.Panel.Panel implements
 
   private onRequestActivated(event: Common.EventTarget.EventTargetEvent<RequestActivatedEvent>): void {
     const {showPanel, tab, takeFocus} = event.data;
-    if (showPanel) {
+    if (showPanel === RequestPanelBehavior.ShowPanel) {
       this.showRequestPanel(tab, takeFocus);
-    } else {
+    } else if (showPanel === RequestPanelBehavior.HidePanel) {
       this.hideRequestPanel();
     }
   }
@@ -882,26 +885,24 @@ export class NetworkLogWithFilterRevealer implements
   }
 }
 
-export class FilmStripRecorder implements Trace.TracingManager.TracingManagerClient {
-  private tracingManager: Trace.TracingManager.TracingManager|null;
-  private resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel|null;
-  private readonly timeCalculator: NetworkTimeCalculator;
-  private readonly filmStripView: PerfUI.FilmStripView.FilmStripView;
-  private callback: ((filmStrip: Trace.Extras.FilmStrip.Data) => void)|null;
+export class FilmStripRecorder implements Tracing.TracingManager.TracingManagerClient {
+  #tracingManager: Tracing.TracingManager.TracingManager|null = null;
+  #resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel|null = null;
+  readonly #timeCalculator: NetworkTimeCalculator.NetworkTimeCalculator;
+  readonly #filmStripView: PerfUI.FilmStripView.FilmStripView;
+  #callback: ((filmStrip: Trace.Extras.FilmStrip.Data) => void)|null = null;
   // Used to fetch screenshots of the page load and show them in the panel.
-  #traceEngine: Trace.TraceModel.Model;
+  #traceEngine: Trace.TraceModel.Model = Trace.TraceModel.Model.createWithSubsetOfHandlers({
+    Screenshots: Trace.Handlers.ModelHandlers.Screenshots,
+  });
   #collectedTraceEvents: Trace.Types.Events.Event[] = [];
 
-  constructor(timeCalculator: NetworkTimeCalculator, filmStripView: PerfUI.FilmStripView.FilmStripView) {
-    this.#traceEngine = Trace.TraceModel.Model.createWithSubsetOfHandlers({
-      Screenshots: Trace.Handlers.ModelHandlers.Screenshots,
-    });
-
-    this.tracingManager = null;
-    this.resourceTreeModel = null;
-    this.timeCalculator = timeCalculator;
-    this.filmStripView = filmStripView;
-    this.callback = null;
+  constructor(
+      timeCalculator: NetworkTimeCalculator.NetworkTimeCalculator,
+      filmStripView: PerfUI.FilmStripView.FilmStripView,
+  ) {
+    this.#timeCalculator = timeCalculator;
+    this.#filmStripView = filmStripView;
   }
 
   traceEventsCollected(events: Trace.Types.Events.Event[]): void {
@@ -909,10 +910,10 @@ export class FilmStripRecorder implements Trace.TracingManager.TracingManagerCli
   }
 
   async tracingComplete(): Promise<void> {
-    if (!this.tracingManager) {
+    if (!this.#tracingManager) {
       return;
     }
-    this.tracingManager = null;
+    this.#tracingManager = null;
     await this.#traceEngine.parse(this.#collectedTraceEvents);
 
     const data = this.#traceEngine.parsedTrace(this.#traceEngine.size() - 1) as
@@ -920,23 +921,23 @@ export class FilmStripRecorder implements Trace.TracingManager.TracingManagerCli
     if (!data) {
       return;
     }
-    const zeroTimeInSeconds = Trace.Types.Timing.Seconds(this.timeCalculator.minimumBoundary());
+    const zeroTimeInSeconds = Trace.Types.Timing.Seconds(this.#timeCalculator.minimumBoundary());
     const filmStrip =
         Trace.Extras.FilmStrip.fromParsedTrace(data, Trace.Helpers.Timing.secondsToMicro(zeroTimeInSeconds));
 
-    if (this.callback) {
-      this.callback(filmStrip);
+    if (this.#callback) {
+      this.#callback(filmStrip);
     }
-    this.callback = null;
+    this.#callback = null;
     // Now we have created the film strip and stored the data, we need to reset
     // the trace processor so that it is ready to record again if the user
     // refreshes the page.
     this.#traceEngine.resetProcessor();
 
-    if (this.resourceTreeModel) {
-      this.resourceTreeModel.resumeReload();
+    if (this.#resourceTreeModel) {
+      this.#resourceTreeModel.resumeReload();
     }
-    this.resourceTreeModel = null;
+    this.#resourceTreeModel = null;
   }
 
   tracingBufferUsage(): void {
@@ -947,36 +948,36 @@ export class FilmStripRecorder implements Trace.TracingManager.TracingManagerCli
 
   startRecording(): void {
     this.#collectedTraceEvents = [];
-    this.filmStripView.reset();
-    this.filmStripView.setStatusText(i18nString(UIStrings.recordingFrames));
+    this.#filmStripView.reset();
+    this.#filmStripView.setStatusText(i18nString(UIStrings.recordingFrames));
     const tracingManager =
-        SDK.TargetManager.TargetManager.instance().scopeTarget()?.model(Trace.TracingManager.TracingManager);
-    if (this.tracingManager || !tracingManager) {
+        SDK.TargetManager.TargetManager.instance().scopeTarget()?.model(Tracing.TracingManager.TracingManager);
+    if (this.#tracingManager || !tracingManager) {
       return;
     }
 
-    this.tracingManager = tracingManager;
-    this.resourceTreeModel = this.tracingManager.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
-    void this.tracingManager.start(this, '-*,disabled-by-default-devtools.screenshot');
+    this.#tracingManager = tracingManager;
+    this.#resourceTreeModel = this.#tracingManager.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
+    void this.#tracingManager.start(this, '-*,disabled-by-default-devtools.screenshot');
 
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.FilmStripStartedRecording);
   }
 
   isRecording(): boolean {
-    return Boolean(this.tracingManager);
+    return Boolean(this.#tracingManager);
   }
 
   stopRecording(callback: (filmStrip: Trace.Extras.FilmStrip.Data) => void): void {
-    if (!this.tracingManager) {
+    if (!this.#tracingManager) {
       return;
     }
 
-    this.tracingManager.stop();
-    if (this.resourceTreeModel) {
-      this.resourceTreeModel.suspendReload();
+    this.#tracingManager.stop();
+    if (this.#resourceTreeModel) {
+      this.#resourceTreeModel.suspendReload();
     }
-    this.callback = callback;
-    this.filmStripView.setStatusText(i18nString(UIStrings.fetchingFrames));
+    this.#callback = callback;
+    this.#filmStripView.setStatusText(i18nString(UIStrings.fetchingFrames));
   }
 }
 

package/front_end/panels/network/NetworkSearchScope.ts

@@ -14,7 +14,7 @@ import type * as Search from '../search/search.js';
 
 const UIStrings = {
   /**
-   *@description Text for web URLs
+   * @description Text for web URLs
    */
   url: 'URL',
 } as const;

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -5,6 +5,7 @@
 
 import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as RenderCoordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -12,7 +13,6 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 
 import type {NetworkNode} from './NetworkDataGridNode.js';
 import {RequestTimeRangeNameToColor} from './NetworkOverview.js';
-import type {Label, NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import networkingTimingTableStyles from './networkTimingTable.css.js';
 import networkWaterfallColumnStyles from './networkWaterfallColumn.css.js';
 import {type RequestTimeRange, RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
@@ -27,8 +27,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
   private rightPadding: number;
   private scrollTop: number;
   private headerHeight: number;
-  private calculator: NetworkTimeCalculator;
-  private rawRowHeight: number;
+  private calculator: NetworkTimeCalculator.NetworkTimeCalculator;
   private rowHeight: number;
   private offsetWidth: number;
   private offsetHeight: number;
@@ -46,9 +45,9 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
   private readonly pathForStyle: Map<LayerStyle, Path2D>;
   private textLayers: TextLayer[];
 
-  constructor(calculator: NetworkTimeCalculator) {
+  constructor(calculator: NetworkTimeCalculator.NetworkTimeCalculator) {
     // TODO(allada) Make this a shadowDOM when the NetworkWaterfallColumn gets moved into NetworkLogViewColumns.
-    super(false);
+    super();
     this.registerRequiredCSS(networkWaterfallColumnStyles);
 
     this.canvas = this.contentElement.createChild('canvas');
@@ -65,9 +64,6 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     this.headerHeight = 0;
     this.calculator = calculator;
 
-    // this.rawRowHeight captures model height (41 or 21px),
-    // this.rowHeight is computed height of the row in CSS pixels, can be 20.8 for zoomed-in content.
-    this.rawRowHeight = 0;
     this.rowHeight = 0;
 
     this.offsetWidth = 0;
@@ -311,12 +307,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
   }
 
   setRowHeight(height: number): void {
-    this.rawRowHeight = height;
-    this.updateRowHeight();
-  }
-
-  private updateRowHeight(): void {
-    this.rowHeight = Math.round(this.rawRowHeight * window.devicePixelRatio) / window.devicePixelRatio;
+    this.rowHeight = height;
   }
 
   setHeaderHeight(height: number): void {
@@ -328,7 +319,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     this.calculateCanvasSize();
   }
 
-  setCalculator(calculator: NetworkTimeCalculator): void {
+  setCalculator(calculator: NetworkTimeCalculator.NetworkTimeCalculator): void {
     this.calculator = calculator;
   }
 
@@ -374,7 +365,6 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
 
   override onResize(): void {
     super.onResize();
-    this.updateRowHeight();
     this.calculateCanvasSize();
     this.scheduleDraw();
   }
@@ -544,7 +534,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
     const downloadingPath = (this.pathForStyle.get(downloadingStyle) as Path2D);
     downloadingPath.rect(ranges.mid, y, barWidth, height - borderWidth);
 
-    let labels: Label|null = null;
+    let labels: NetworkTimeCalculator.Label|null = null;
     if (node.hovered()) {
       labels = this.calculator.computeBarGraphLabels(request);
       const barDotLineLength = 10;

package/front_end/panels/network/RequestCookiesView.ts

@@ -42,7 +42,7 @@ import requestCookiesViewStyles from './requestCookiesView.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Request Cookies View of the Network panel
+   * @description Text in Request Cookies View of the Network panel
    */
   thisRequestHasNoCookies: 'This request has no cookies.',
   /**
@@ -51,28 +51,28 @@ const UIStrings = {
    */
   requestCookies: 'Request Cookies',
   /**
-   *@description Tooltip to explain what request cookies are
+   * @description Tooltip to explain what request cookies are
    */
   cookiesThatWereSentToTheServerIn: 'Cookies that were sent to the server in the \'cookie\' header of the request',
   /**
-   *@description Label for showing request cookies that were not actually sent
+   * @description Label for showing request cookies that were not actually sent
    */
   showFilteredOutRequestCookies: 'show filtered out request cookies',
   /**
-   *@description Text in Request Headers View of the Network Panel
+   * @description Text in Request Headers View of the Network Panel
    */
   noRequestCookiesWereSent: 'No request cookies were sent.',
   /**
-   *@description Text in Request Cookies View of the Network panel
+   * @description Text in Request Cookies View of the Network panel
    */
   responseCookies: 'Response Cookies',
   /**
-   *@description Tooltip to explain what response cookies are
+   * @description Tooltip to explain what response cookies are
    */
   cookiesThatWereReceivedFromThe:
       'Cookies that were received from the server in the \'`set-cookie`\' header of the response',
   /**
-   *@description Label for response cookies with invalid syntax
+   * @description Label for response cookies with invalid syntax
    */
   malformedResponseCookies: 'Malformed Response Cookies',
   /**
@@ -112,11 +112,10 @@ export class RequestCookiesView extends UI.Widget.Widget {
   private readonly malformedResponseCookiesList: HTMLElement;
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
-    super();
+    super({jslog: `${VisualLogging.pane('cookies').track({resize: true})}`});
     this.registerRequiredCSS(requestCookiesViewStyles);
 
     this.element.classList.add('request-cookies-view');
-    this.element.setAttribute('jslog', `${VisualLogging.pane('cookies').track({resize: true})}`);
 
     this.request = request;
     this.showFilteredOutCookiesSetting = Common.Settings.Settings.instance().createSetting(
@@ -307,8 +306,8 @@ export class RequestCookiesView extends UI.Widget.Widget {
       for (const malformedCookie of malformedResponseCookies) {
         const listItem = this.malformedResponseCookiesList.createChild('span', 'cookie-line source-code');
         const icon = new IconButton.Icon.Icon();
-        icon.data = {iconName: 'cross-circle-filled', color: 'var(--icon-error)', width: '14px', height: '14px'};
-        icon.classList.add('cookie-warning-icon');
+        icon.name = 'cross-circle-filled';
+        icon.classList.add('cookie-warning-icon', 'small');
         listItem.appendChild(icon);
         UI.UIUtils.createTextChild(listItem, malformedCookie.cookieLine);
 

package/front_end/panels/network/RequestHTMLView.ts

@@ -52,7 +52,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           csp="default-src 'none';img-src data:;style-src 'unsafe-inline'" src=${input.dataURL}
           tabindex="-1" role="presentation"></iframe>` : nothing}
     </div>`,
-    target, {host: input});
+    target);
   // clang-format on
 };
 
@@ -60,7 +60,7 @@ export class RequestHTMLView extends UI.Widget.VBox {
   readonly #dataURL: string;
   readonly #view: View;
   private constructor(dataURL: string, view = DEFAULT_VIEW) {
-    super(true);
+    super({useShadowDom: true});
 
     this.#dataURL = dataURL;
     this.#view = view;

package/front_end/panels/network/RequestInitiatorView.ts

@@ -15,15 +15,15 @@ import requestInitiatorViewTreeStyles from './requestInitiatorViewTree.css.js';
 
 const UIStrings = {
   /**
-   *@description Text in Request Initiator View of the Network panel if the request has no initiator data
+   * @description Text in Request Initiator View of the Network panel if the request has no initiator data
    */
   noInitiator: 'No initiator data',
   /**
-   *@description Title of a section in Request Initiator view of the Network Panel
+   * @description Title of a section in Request Initiator view of the Network Panel
    */
   requestCallStack: 'Request call stack',
   /**
-   *@description Title of a section in Request Initiator view of the Network Panel
+   * @description Title of a section in Request Initiator view of the Network Panel
    */
   requestInitiatorChain: 'Request initiator chain',
 } as const;
@@ -36,10 +36,9 @@ export class RequestInitiatorView extends UI.Widget.VBox {
   private hasShown: boolean;
 
   constructor(request: SDK.NetworkRequest.NetworkRequest) {
-    super();
+    super({jslog: `${VisualLogging.pane('initiator').track({resize: true})}`});
 
     this.element.classList.add('request-initiator-view');
-    this.element.setAttribute('jslog', `${VisualLogging.pane('initiator').track({resize: true})}`);
     this.linkifier = new Components.Linkifier.Linkifier();
     this.request = request;
     this.emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.noInitiator), '');
@@ -48,19 +47,16 @@ export class RequestInitiatorView extends UI.Widget.VBox {
   }
 
   static createStackTracePreview(
-      request: SDK.NetworkRequest.NetworkRequest, linkifier: Components.Linkifier.Linkifier, focusableLink?: boolean): {
-    element: Element,
-    links: Element[],
-  }|null {
+      request: SDK.NetworkRequest.NetworkRequest, linkifier: Components.Linkifier.Linkifier,
+      focusableLink?: boolean): Components.JSPresentationUtils.StackTracePreviewContent|null {
     const initiator = request.initiator();
     if (!initiator?.stack) {
       return null;
     }
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
-    const target = networkManager ? networkManager.target() : null;
-    const stackTrace = Components.JSPresentationUtils.buildStackTracePreviewContents(
-        target, linkifier, {stackTrace: initiator.stack, tabStops: focusableLink});
-    return stackTrace;
+    const target = networkManager ? networkManager.target() : undefined;
+    return new Components.JSPresentationUtils.StackTracePreviewContent(
+        undefined, target, linkifier, {stackTrace: initiator.stack, tabStops: focusableLink});
   }
 
   private createTree(): UI.TreeOutline.TreeOutlineInShadow {
@@ -124,7 +120,9 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     }
   }
 
-  private buildStackTraceSection(content: Element, title: string, tree: UI.TreeOutline.TreeOutlineInShadow): void {
+  private buildStackTraceSection(
+      stackTracePreview: Components.JSPresentationUtils.StackTracePreviewContent, title: string,
+      tree: UI.TreeOutline.TreeOutlineInShadow): void {
     const root = new UI.TreeOutline.TreeElement(title);
     tree.appendChild(root);
 
@@ -132,8 +130,10 @@ export class RequestInitiatorView extends UI.Widget.VBox {
       root.titleElement.classList.add('request-initiator-view-section-title');
     }
 
-    const contentElement = new UI.TreeOutline.TreeElement(content, false);
+    const contentElement = new UI.TreeOutline.TreeElement(undefined, false);
     contentElement.selectable = false;
+    stackTracePreview.markAsRoot();
+    stackTracePreview.show(contentElement.listItemElement);
 
     root.appendChild(contentElement);
     root.expand();
@@ -151,7 +151,7 @@ export class RequestInitiatorView extends UI.Widget.VBox {
 
     if (stackTracePreview) {
       initiatorDataPresent = true;
-      this.buildStackTraceSection(stackTracePreview.element, i18nString(UIStrings.requestCallStack), containerTree);
+      this.buildStackTraceSection(stackTracePreview, i18nString(UIStrings.requestCallStack), containerTree);
     }
 
     const initiatorGraph = Logs.NetworkLog.NetworkLog.instance().initiatorGraphForRequest(this.request);