chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -1,52 +1,67 @@
-// Copyright 2018 The Chromium Authors. All rights reserved.
+// Copyright 2022 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import lighthouseStartViewStyles from './lighthouseStartView.css.js';
-import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type * as Platform from '../../core/platform/platform.js';
+import type * as Common from '../../core/common/common.js';
 
 import {Events, Presets, RuntimeSettings, type LighthouseController, type Preset} from './LighthouseController.js';
 import {RadioSetting} from './RadioSetting.js';
+import lighthouseStartViewStyles from './lighthouseStartView.css.js';
 
 const UIStrings = {
   /**
-  *@description Text that is usually a hyperlink to more documentation
-  */
-  learnMore: 'Learn more',
+   * @description Text displayed as the title of a panel that can be used to audit a web page with Lighthouse.
+   */
+  generateLighthouseReport: 'Generate a Lighthouse report',
   /**
-  *@description Text that refers to device such as a phone
-  */
-  device: 'Device',
+   * @description Text that refers to the Lighthouse mode
+   */
+  mode: 'Mode',
   /**
-  *@description Title in the Lighthouse Start View for list of categories to run during audit
-  */
+   * @description Title in the Lighthouse Start View for list of categories to run during audit
+   */
   categories: 'Categories',
   /**
-  *@description Text in Lighthouse Status View
-  */
-  communityPluginsBeta: 'Community Plugins (beta)',
+   * @description Title in the Lighthouse Start View for list of available start plugins
+   */
+  plugins: 'Plugins',
+  /**
+   * @description Label for a button to start analyzing a page navigation with Lighthouse
+   */
+  analyzeNavigation: 'Analyze page load',
   /**
-  *@description Text of audits start button in Lighthouse Start View
-  */
-  generateReport: 'Generate report',
+   * @description Label for a button to start analyzing the current page state with Lighthouse
+   */
+  analyzeSnapshot: 'Analyze page state',
   /**
-  *@description Text in Lighthouse Start View
-  */
-  identifyAndFixCommonProblemsThat:
-      'Identify and fix common problems that affect your site\'s performance, accessibility, and user experience.',
+   * @description Label for a button that starts a Lighthouse mode that analyzes user interactions over a period of time.
+   */
+  startTimespan: 'Start timespan',
+  /**
+   * @description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
+  /**
+   * @description Text that refers to device such as a phone
+   */
+  device: 'Device',
 };
+
 const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export class StartView extends UI.Widget.Widget {
-  protected controller: LighthouseController;
-  protected readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
-  protected startButton!: HTMLButtonElement;
-  protected helpText?: Element;
-  protected warningText?: Element;
-  protected checkboxes: Array<{preset: Preset, checkbox: UI.Toolbar.ToolbarCheckbox}> = [];
-  private shouldConfirm?: boolean;
+  private controller: LighthouseController;
+  private readonly settingsToolbarInternal: UI.Toolbar.Toolbar;
+  private startButton!: HTMLButtonElement;
+  private helpText?: Element;
+  private warningText?: Element;
+  private checkboxes: Array<{preset: Preset, checkbox: UI.Toolbar.ToolbarCheckbox}> = [];
+
+  changeFormMode?: (mode: string) => void;
 
   constructor(controller: LighthouseController) {
     super();
@@ -56,11 +71,7 @@ export class StartView extends UI.Widget.Widget {
     this.render();
   }
 
-  settingsToolbar(): UI.Toolbar.Toolbar {
-    return this.settingsToolbarInternal;
-  }
-
-  protected populateRuntimeSettingAsRadio(settingName: string, label: string, parentElement: Element): void {
+  private populateRuntimeSettingAsRadio(settingName: string, label: string, parentElement: Element): void {
     const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
     if (!runtimeSetting || !runtimeSetting.options) {
       throw new Error(`${settingName} is not a setting with options`);
@@ -84,7 +95,7 @@ export class StartView extends UI.Widget.Widget {
     UI.ARIAUtils.setAccessibleName(control.element, label);
   }
 
-  protected populateRuntimeSettingAsToolbarCheckbox(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
+  private populateRuntimeSettingAsToolbarCheckbox(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
     const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
     if (!runtimeSetting || !runtimeSetting.title) {
       throw new Error(`${settingName} is not a setting with a title`);
@@ -102,7 +113,7 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  protected populateRuntimeSettingAsToolbarDropdown(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
+  private populateRuntimeSettingAsToolbarDropdown(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
     const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
     if (!runtimeSetting || !runtimeSetting.title) {
       throw new Error(`${settingName} is not a setting with a title`);
@@ -126,7 +137,7 @@ export class StartView extends UI.Widget.Widget {
     }
   }
 
-  protected populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
+  private populateFormControls(fragment: UI.Fragment.Fragment, mode?: string): void {
     // Populate the device type
     const deviceTypeFormElements = fragment.$('device-type-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.device_type', i18nString(UIStrings.device), deviceTypeFormElements);
@@ -152,79 +163,137 @@ export class StartView extends UI.Widget.Widget {
     UI.ARIAUtils.markAsGroup(categoryFormElements);
     UI.ARIAUtils.setAccessibleName(categoryFormElements, i18nString(UIStrings.categories));
     UI.ARIAUtils.markAsGroup(pluginFormElements);
-    UI.ARIAUtils.setAccessibleName(pluginFormElements, i18nString(UIStrings.communityPluginsBeta));
+    UI.ARIAUtils.setAccessibleName(pluginFormElements, i18nString(UIStrings.plugins));
   }
 
-  protected render(): void {
+  private render(): void {
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.settingsToolbarInternal);
 
-    this.startButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.generateReport),
-        () => this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible')),
-        /* className */ '', /* primary */ true);
-    this.setDefaultFocusedElement(this.startButton);
-
-    const auditsDescription = i18nString(UIStrings.identifyAndFixCommonProblemsThat);  // crbug.com/972969
+    const {mode} = this.controller.getFlags();
+    this.populateStartButton(mode);
 
     const fragment = UI.Fragment.Fragment.build`
-  <div class="vbox lighthouse-start-view">
-  <header>
-  <div class="lighthouse-logo"></div>
-  <div class="lighthouse-start-button-container hbox">
-  ${this.startButton}
-  </div>
+<form class="lighthouse-start-view">
+  <header class="hbox">
+    <div class="lighthouse-logo"></div>
+    <div class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</div>
+    <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
+  </header>
   <div $="help-text" class="lighthouse-help-text hidden"></div>
-  <div class="lighthouse-start-view-text">
-  <span>${auditsDescription}</span>
-  ${UI.XLink.XLink.create('https://developers.google.com/web/tools/lighthouse/', i18nString(UIStrings.learnMore))}
+  <div class="lighthouse-options hbox">
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="mode-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-section">
+      <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
+    </div>
+    <div class="lighthouse-form-categories">
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">${i18nString(UIStrings.categories)}</div>
+        <div class="lighthouse-form-elements" $="categories-form-elements"></div>
+      </div>
+      <div class="lighthouse-form-section">
+        <div class="lighthouse-form-section-label">
+          <div class="lighthouse-icon-label">${i18nString(UIStrings.plugins)}</div>
+        </div>
+        <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
+      </div>
+    </div>
   </div>
   <div $="warning-text" class="lighthouse-warning-text hidden"></div>
-  </header>
-  <form>
-  <div class="lighthouse-form-categories">
-  <div class="lighthouse-form-section">
-  <div class="lighthouse-form-section-label">
-  ${i18nString(UIStrings.categories)}
-  </div>
-  <div class="lighthouse-form-elements" $="categories-form-elements"></div>
-  </div>
-  <div class="lighthouse-form-section">
-  <div class="lighthouse-form-section-label">
-  <div class="lighthouse-icon-label">${i18nString(UIStrings.communityPluginsBeta)}</div>
-  </div>
-  <div class="lighthouse-form-elements" $="plugins-form-elements"></div>
-  </div>
-  </div>
-  <div class="lighthouse-form-section">
-  <div class="lighthouse-form-elements" $="device-type-form-elements"></div>
-  </div>
-  </form>
-  </div>
-  `;
+</form>
+    `;
 
     this.helpText = fragment.$('help-text');
     this.warningText = fragment.$('warning-text');
-    this.populateFormControls(fragment);
-    this.contentElement.appendChild(fragment.element());
-    this.contentElement.style.overflow = 'auto';
+
+    const modeFormElements = fragment.$('mode-form-elements');
+    this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
+
+    this.populateFormControls(fragment, mode);
+
+    this.contentElement.textContent = '';
+    this.contentElement.append(fragment.element());
+
+    this.refresh();
+  }
+
+  private populateStartButton(mode: string): void {
+    let buttonLabel: Platform.UIString.LocalizedString;
+    let callback: () => void;
+
+    if (mode === 'timespan') {
+      buttonLabel = i18nString(UIStrings.startTimespan);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseTimespanStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else if (mode === 'snapshot') {
+      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else {
+      buttonLabel = i18nString(UIStrings.analyzeNavigation);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    }
+
+    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainer) {
+      startButtonContainer.textContent = '';
+      this.startButton = UI.UIUtils.createTextButton(
+          buttonLabel,
+          callback,
+          /* className */ '',
+          /* primary */ true,
+      );
+      startButtonContainer.append(this.startButton);
+    }
   }
 
   refresh(): void {
-    // Do nothing in default case.
+    const {mode} = this.controller.getFlags();
+    this.populateStartButton(mode);
+
+    for (const {checkbox, preset} of this.checkboxes) {
+      if (preset.supportedModes.includes(mode)) {
+        checkbox.setEnabled(true);
+        checkbox.setIndeterminate(false);
+      } else {
+        checkbox.setEnabled(false);
+        checkbox.setIndeterminate(true);
+      }
+    }
+
+    // Ensure the correct layout is used after refresh.
+    this.onResize();
   }
 
   onResize(): void {
-    const useNarrowLayout = this.contentElement.offsetWidth < 560;
-    const startViewEl = this.contentElement.querySelector('.lighthouse-start-view');
-    if (!startViewEl) {
-      return;
+    const useNarrowLayout = this.contentElement.offsetWidth < 500;
+    const useWideLayout = this.contentElement.offsetWidth > 800;
+    const headerEl = this.contentElement.querySelector('.lighthouse-start-view header');
+    const optionsEl = this.contentElement.querySelector('.lighthouse-options');
+    if (headerEl) {
+      headerEl.classList.toggle('hbox', !useNarrowLayout);
+      headerEl.classList.toggle('vbox', useNarrowLayout);
+    }
+    if (optionsEl) {
+      optionsEl.classList.toggle('wide', useWideLayout);
+      optionsEl.classList.toggle('narrow', useNarrowLayout);
     }
-    startViewEl.classList.toggle('hbox', !useNarrowLayout);
-    startViewEl.classList.toggle('vbox', useNarrowLayout);
   }
 
   focusStartButton(): void {
@@ -251,12 +320,16 @@ export class StartView extends UI.Widget.Widget {
     if (this.warningText) {
       this.warningText.textContent = text;
       this.warningText.classList.toggle('hidden', !text);
-      this.shouldConfirm = Boolean(text);
     }
   }
+
   wasShown(): void {
     super.wasShown();
     this.controller.recomputePageAuditability();
     this.registerCSSFiles([lighthouseStartViewStyles]);
   }
+
+  settingsToolbar(): UI.Toolbar.Toolbar {
+    return this.settingsToolbarInternal;
+  }
 }

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -5,11 +5,13 @@
  */
 /* <3 */
 
-.lighthouse-start-view,
-.lighthouse-start-view-fr {
+.lighthouse-start-view {
   font-family: Roboto, sans-serif;
   font-size: var(--font-size);
   line-height: 18px;
+  padding: 24px;
+  overflow: auto;
+  height: 100%;
   /* for buttons */
   --legacy-accent-color: #0535c1;
   --legacy-accent-color-hover: #17b;
@@ -17,20 +19,7 @@
   --report-font-family: roboto, helvetica, arial, sans-serif;
 }
 
-.lighthouse-start-view-fr {
-  padding: 24px;
-  overflow: auto;
-  height: 100%;
-}
-
 .lighthouse-start-view header {
-  flex: 2 1;
-  padding: 16px;
-  display: grid;
-  justify-items: center;
-}
-
-.lighthouse-start-view-fr header {
   display: flex;
   font-size: 18px;
   flex-direction: row;
@@ -48,30 +37,16 @@
   background-image: var(--image-file-lighthouse_logo);
 }
 
-.lighthouse-start-view-fr .lighthouse-logo {
+.lighthouse-start-view .lighthouse-logo {
   width: 45px;
   height: 45px;
 }
 
-.lighthouse-start-view-text {
-  margin: 0 40px;
-  text-align: center;
-}
-
-.lighthouse-start-view form {
-  display: contents;
-}
-
 .lighthouse-form-section {
   padding: 8px;
   flex: 1 1;
 }
 
-.lighthouse-start-view.vbox .lighthouse-form-categories {
-  border-top: 1px solid var(--color-background-elevation-2);
-  border-bottom: 1px solid var(--color-background-elevation-2);
-}
-
 .lighthouse-form-section-label {
   margin: 7px 0;
   font-weight: 500;
@@ -111,11 +86,11 @@ input[type="radio"]:focus {
   align-items: center;
 }
 
-.lighthouse-start-view-fr header.hbox .lighthouse-start-button-container {
+.lighthouse-start-view header.hbox .lighthouse-start-button-container {
   margin-left: auto;
 }
 
-.lighthouse-start-view-fr header.vbox .lighthouse-title {
+.lighthouse-start-view header.vbox .lighthouse-title {
   text-align: center;
 }
 
@@ -130,10 +105,6 @@ input[type="radio"]:focus {
   cursor: not-allowed;
 }
 
-.lighthouse-start-view .toolbar-dropdown-arrow {
-  display: none;
-}
-
 .lighthouse-launcher-row,
 .lighthouse-radio {
   margin-bottom: 6px;

package/front_end/panels/media/TickingFlameChart.ts

@@ -12,14 +12,16 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {Bounds, formatMillisecondsToSeconds} from './TickingFlameChartHelpers.js';
 
 const defaultFont = '11px ' + Host.Platform.fontFamily();
-const defaultColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+function getGroupDefaultTextColor(): string {
+  return ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+}
 
 const DefaultStyle = {
   height: 20,
   padding: 2,
   collapsible: false,
   font: defaultFont,
-  color: defaultColor,
+  color: getGroupDefaultTextColor(),
   backgroundColor: 'rgba(100 0 0 / 10%)',
   nestingLevel: 0,
   itemsHeight: 20,
@@ -390,13 +392,17 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
    */
   addGroup(name: Common.UIString.LocalizedString, depth: number): void {
     if (this.timelineDataInternal.groups) {
-      this.timelineDataInternal.groups.push({
+      const newGroup = {
         name: name,
         startLevel: this.maxLevel,
         expanded: true,
         selectable: false,
         style: DefaultStyle,
         track: null,
+      };
+      this.timelineDataInternal.groups.push(newGroup);
+      ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+        newGroup.style.color = getGroupDefaultTextColor();
       });
     }
     this.maxLevel += depth;

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -40,6 +40,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * 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 Bindings from '../../models/bindings/bindings.js';
@@ -239,6 +240,34 @@ const UIStrings = {
   * between the time a response to a network request is received and the time the request is started.
   */
   timeSubtitleTooltipText: 'Latency (response received time - start time)',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  alternativeJobWonWithoutRace: 'Chrome used an alternative job without racing with a main job.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  alternativeJobWonRace: 'Chrome used an alternative job because it won a race with a main job.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  mainJobWonRace: 'Chrome used a main job because it won a race with an alternative job and/or a DNS alpn job.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  mappingMissing: 'Chrome didn\'t use an alternative job because of missing Alternate-Protocol information.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  broken: 'Chrome didn\'t use an alternative job because it was marked broken.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  dnsAlpnH3JobWonWithoutRace: 'Chrome used a DNS alpn job without racing with a main job and an alternative job.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  dnsAlpnH3JobWonRace: 'Chrome used a DNS alpn job because it won a race with a main job and an alternative job.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkDataGridNode.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -881,7 +910,7 @@ export class NetworkRequestNode extends NetworkNode {
         break;
       }
       case 'protocol': {
-        this.setTextAndTitle(cell, this.requestInternal.protocol);
+        this.renderProtocolCell(cell);
         break;
       }
       case 'scheme': {
@@ -1170,6 +1199,52 @@ export class NetworkRequestNode extends NetworkNode {
     }
   }
 
+  private renderProtocolCell(cell: HTMLElement): void {
+    UI.UIUtils.createTextChild(cell, this.requestInternal.protocol);
+
+    switch (this.requestInternal.alternateProtocolUsage) {
+      case Protocol.Network.AlternateProtocolUsage.AlternativeJobWonWithoutRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.alternativeJobWonWithoutRace);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.AlternativeJobWonRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.alternativeJobWonRace);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.MainJobWonRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.mainJobWonRace);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.MappingMissing: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.mappingMissing);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.Broken: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.broken);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.DnsAlpnH3JobWonWithoutRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.dnsAlpnH3JobWonWithoutRace);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.DnsAlpnH3JobWonRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.dnsAlpnH3JobWonRace);
+        break;
+      }
+
+      default: {
+        UI.Tooltip.Tooltip.install(cell, this.requestInternal.protocol);
+        break;
+      }
+    }
+  }
+
   private renderInitiatorCell(cell: HTMLElement): void {
     this.initiatorCell = cell;
     const request = this.requestInternal;
@@ -1181,7 +1256,6 @@ export class NetworkRequestNode extends NetworkNode {
     }
     switch (initiator.type) {
       case SDK.NetworkRequest.InitiatorType.Parser: {
-        UI.Tooltip.Tooltip.install(cell, initiator.url + ':' + (initiator.lineNumber + 1));
         const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(initiator.url);
         cell.appendChild(
             Components.Linkifier.Linkifier.linkifyURL(initiator.url, ({
@@ -1208,17 +1282,13 @@ export class NetworkRequestNode extends NetworkNode {
       }
 
       case SDK.NetworkRequest.InitiatorType.Script: {
-        const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
-        if (!networkManager) {
-          return;
-        }
-
+        const target = SDK.NetworkManager.NetworkManager.forRequest(request)?.target() || null;
         const linkifier = this.parentView().linkifier();
         if (initiator.stack) {
-          this.linkifiedInitiatorAnchor = linkifier.linkifyStackTraceTopFrame(networkManager.target(), initiator.stack);
+          this.linkifiedInitiatorAnchor = linkifier.linkifyStackTraceTopFrame(target, initiator.stack);
         } else {
           this.linkifiedInitiatorAnchor = linkifier.linkifyScriptLocation(
-              networkManager.target(), initiator.scriptId, initiator.url, initiator.lineNumber,
+              target, initiator.scriptId, initiator.url, initiator.lineNumber,
               {columnNumber: initiator.columnNumber, inlineFrameIndex: 0});
         }
         UI.Tooltip.Tooltip.install((this.linkifiedInitiatorAnchor), '');

package/front_end/panels/network/NetworkItemView.ts

@@ -149,14 +149,15 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
         'resourceViewTab', NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
 
     this.headersView = new RequestHeadersView(request);
-    this.appendTab(
-        NetworkForward.UIRequestLocation.UIRequestTabs.Headers, i18nString(UIStrings.headers), this.headersView,
-        i18nString(UIStrings.headers));
     this.headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.HeadersComponent, i18nString(UIStrings.headers),
           this.headersViewComponent, i18nString(UIStrings.headers));
+    } else {
+      this.appendTab(
+          NetworkForward.UIRequestLocation.UIRequestTabs.Headers, i18nString(UIStrings.headers), this.headersView,
+          i18nString(UIStrings.headers));
     }
 
     this.payloadView = null;