chrome-devtools-frontend 1.0.1643855 → 1.0.1646286

package/front_end/panels/profiler/ProfileLauncherView.ts

@@ -1,12 +1,13 @@
 // Copyright 2011 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {IsolateSelector} from './IsolateSelector.js';
 import type {ProfileType} from './ProfileHeader.js';
@@ -41,166 +42,233 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/profiler/ProfileLauncherView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget, widgetRef} = UI.Widget;
+
+interface ProfileTypeEntry {
+  profileType: ProfileType;
+  selected: boolean;
+  customContent: Element|null;
+}
+
+export interface ViewInput {
+  headerText: string;
+  profileTypes: ProfileTypeEntry[];
+  controlButtonText: string;
+  controlButtonDisabled: boolean;
+  controlButtonTooltip: string;
+  isProfiling: boolean;
+  isolateSelector: IsolateSelector|null;
+  onControlClick: () => void;
+  onLoadClick: () => void;
+  onProfileTypeChange: (profileType: ProfileType) => void;
+}
+
+export interface ViewOutput {
+  isolateSelector: IsolateSelector;
+}
+
+export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+
+// clang-format off
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  render(html`
+    <style>${profileLauncherViewStyles}</style>
+    <div class="profile-launcher-view-content vbox">
+      <div class="vbox">
+        <h1>${input.headerText}</h1>
+        <form role="radiogroup" aria-label=${input.headerText}>
+          ${input.profileTypes.map(entry => {
+            const radioId = `profile-type-${entry.profileType.id}`;
+            const customContent = entry.customContent;
+            return html`
+              <input id=${radioId} type="radio" name="profile-type"
+                  .checked=${entry.selected}
+                  ?disabled=${input.isProfiling}
+                  @change=${() => input.onProfileTypeChange(entry.profileType)}
+                  jslog=${VisualLogging.toggle().track({change: true}).context('profiler.profile-type')}
+                />
+              <label for=${radioId}>${entry.profileType.name}</label>
+              <p>${entry.profileType.description}</p>
+              ${customContent ? html`
+                <p>
+                  <span role="group" aria-labelledby=${radioId}>
+                    ${customContent}
+                  </span>
+                </p>
+              ` : nothing}
+            `;
+          })}
+        </form>
+      </div>
+      <div class="vbox profile-isolate-selector-block">
+        <h1>${i18nString(UIStrings.selectJavascriptVmInstance)}</h1>
+        <div class="vbox profile-launcher-target-list profile-launcher-target-list-container">
+          <devtools-widget
+            ${widget(IsolateSelector)}
+            ${widgetRef(IsolateSelector, e => {output.isolateSelector = e;})}
+          ></devtools-widget>
+        </div>
+        ${input.isolateSelector?.totalMemoryElement() ?? nothing}
+      </div>
+      <div class="hbox profile-launcher-buttons">
+        <devtools-button
+          .variant=${Buttons.Button.Variant.OUTLINED}
+          .iconName=${'import'}
+          @click=${input.onLoadClick}
+          .jslogContext=${'profiler.load-from-file'}
+        >${i18nString(UIStrings.load)}</devtools-button>
+        <devtools-button
+          .variant=${Buttons.Button.Variant.PRIMARY}
+          ?disabled=${input.controlButtonDisabled}
+          title=${input.controlButtonTooltip}
+          @click=${input.onControlClick}
+          .jslogContext=${'profiler.heap-toggle-recording'}
+        >${input.controlButtonText}</devtools-button>
+      </div>
+    </div>
+  `, target);
+};
+// clang-format on
+
 export class ProfileLauncherView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
     UI.Widget.VBox) {
   readonly panel: ProfilesPanel;
-  #contentElement: HTMLElement;
   readonly selectedProfileTypeSetting: Common.Settings.Setting<string>;
-  profileTypeHeaderElement: HTMLElement;
-  readonly profileTypeSelectorForm: HTMLElement;
-  controlButton: Buttons.Button.Button;
-  readonly loadButton: Buttons.Button.Button;
-  recordButtonEnabled: boolean;
-  typeIdToOptionElementAndProfileType: Map<string, {
-    optionElement: HTMLInputElement,
-    profileType: ProfileType,
-  }>;
-  isProfiling?: boolean;
-  isInstantProfile?: boolean;
-  isEnabled?: boolean;
-
-  constructor(profilesPanel: ProfilesPanel) {
-    super();
-    this.registerRequiredCSS(profileLauncherViewStyles);
+  readonly #view: View;
+  #isolateSelector: IsolateSelector|null = null;
+  #profileTypes = new Map<string, ProfileType>();
+  #isProfiling = false;
+  #isInstantProfile = false;
+  #isEnabled = false;
+  #recordButtonEnabled = true;
+  #selectedTypeId = '';
 
-    this.panel = profilesPanel;
-    this.element.classList.add('profile-launcher-view');
-    this.#contentElement = this.element.createChild('div', 'profile-launcher-view-content vbox');
+  constructor(profilesPanel: ProfilesPanel, view: View = DEFAULT_VIEW) {
+    super({classes: ['profile-launcher-view']});
 
-    const profileTypeSelectorElement = this.#contentElement.createChild('div', 'vbox');
+    this.#view = view;
+    this.panel = profilesPanel;
     this.selectedProfileTypeSetting = Common.Settings.Settings.instance().createSetting('selected-profile-type', 'CPU');
-    this.profileTypeHeaderElement = profileTypeSelectorElement.createChild('h1');
-    this.profileTypeSelectorForm = profileTypeSelectorElement.createChild('form');
-    UI.ARIAUtils.markAsRadioGroup(this.profileTypeSelectorForm);
-
-    const isolateSelectorElement = this.#contentElement.createChild('div', 'vbox profile-isolate-selector-block');
-    isolateSelectorElement.createChild('h1').textContent = i18nString(UIStrings.selectJavascriptVmInstance);
-    const isolateSelector = new IsolateSelector();
-    const isolateSelectorElementChild = isolateSelectorElement.createChild('div', 'vbox profile-launcher-target-list');
-    isolateSelectorElementChild.classList.add('profile-launcher-target-list-container');
-    isolateSelector.show(isolateSelectorElementChild);
-    isolateSelectorElement.appendChild(isolateSelector.totalMemoryElement());
-
-    const buttonsDiv = this.#contentElement.createChild('div', 'hbox profile-launcher-buttons');
-    this.controlButton = UI.UIUtils.createTextButton('', this.controlButtonClicked.bind(this), {
-      jslogContext: 'profiler.heap-toggle-recording',
-      variant: Buttons.Button.Variant.PRIMARY,
-    });
-    this.loadButton = new Buttons.Button.Button();
-    this.loadButton
-        .data = {iconName: 'import', variant: Buttons.Button.Variant.OUTLINED, jslogContext: 'profiler.load-from-file'};
-    this.loadButton.textContent = i18nString(UIStrings.load);
-    this.loadButton.addEventListener('click', this.loadButtonClicked.bind(this));
-    buttonsDiv.appendChild(this.loadButton);
-    buttonsDiv.appendChild(this.controlButton);
-    this.recordButtonEnabled = true;
-
-    this.typeIdToOptionElementAndProfileType = new Map();
   }
 
-  loadButtonClicked(): void {
-    const loadFromFileAction = UI.ActionRegistry.ActionRegistry.instance().getAction('profiler.load-from-file');
-    void loadFromFileAction.execute();
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
   }
 
-  updateControls(): void {
-    if (this.isEnabled && this.recordButtonEnabled) {
-      this.controlButton.removeAttribute('disabled');
-    } else {
-      this.controlButton.setAttribute('disabled', '');
-    }
-    UI.Tooltip.Tooltip.install(
-        this.controlButton, this.recordButtonEnabled ? '' : UI.UIUtils.anotherProfilerActiveLabel());
-    if (this.isInstantProfile) {
-      this.controlButton.classList.remove('running');
-      this.controlButton.textContent = i18nString(UIStrings.takeSnapshot);
-    } else if (this.isProfiling) {
-      this.controlButton.classList.add('running');
-      this.controlButton.textContent = i18nString(UIStrings.stop);
-    } else {
-      this.controlButton.classList.remove('running');
-      this.controlButton.textContent = i18nString(UIStrings.start);
-    }
-    for (const {optionElement} of this.typeIdToOptionElementAndProfileType.values()) {
-      optionElement.disabled = Boolean(this.isProfiling);
-    }
+  #getHeaderText(): string {
+    return this.#profileTypes.size > 1 ? i18nString(UIStrings.selectProfilingType) :
+                                         (this.#profileTypes.values().next().value?.name ?? '');
   }
 
   profileStarted(): void {
-    this.isProfiling = true;
-    this.updateControls();
+    this.#isProfiling = true;
+    this.requestUpdate();
   }
 
   profileFinished(): void {
-    this.isProfiling = false;
-    this.updateControls();
+    this.#isProfiling = false;
+    this.requestUpdate();
   }
 
   updateProfileType(profileType: ProfileType, recordButtonEnabled: boolean): void {
-    this.isInstantProfile = profileType.isInstantProfile();
-    this.recordButtonEnabled = recordButtonEnabled;
-    this.isEnabled = profileType.isEnabled();
-    this.updateControls();
+    this.#isInstantProfile = profileType.isInstantProfile();
+    this.#recordButtonEnabled = recordButtonEnabled;
+    this.#isEnabled = profileType.isEnabled();
+    this.requestUpdate();
   }
 
   addProfileType(profileType: ProfileType): void {
-    const {radio, label} = UI.UIUtils.createRadioButton('profile-type', profileType.name, 'profiler.profile-type');
-    this.profileTypeSelectorForm.appendChild(label);
-    this.typeIdToOptionElementAndProfileType.set(profileType.id, {optionElement: radio, profileType});
-    radio.addEventListener('change', this.profileTypeChanged.bind(this, profileType), false);
-    const descriptionElement = this.profileTypeSelectorForm.createChild('p');
-    descriptionElement.textContent = profileType.description;
-    UI.ARIAUtils.setDescription(radio, profileType.description);
-    const customContent = profileType.customContent();
-    if (customContent) {
-      customContent.setAttribute('role', 'group');
-      customContent.setAttribute('aria-labelledby', `${radio.id}`);
-      this.profileTypeSelectorForm.createChild('p').appendChild(customContent);
-      profileType.setCustomContentEnabled(false);
-    }
-    const headerText = this.typeIdToOptionElementAndProfileType.size > 1 ? i18nString(UIStrings.selectProfilingType) :
-                                                                           profileType.name;
-    this.profileTypeHeaderElement.textContent = headerText;
-    UI.ARIAUtils.setLabel(this.profileTypeSelectorForm, headerText);
+    this.#profileTypes.set(profileType.id, profileType);
+    profileType.setCustomContentEnabled(false);
+    this.requestUpdate();
   }
 
   restoreSelectedProfileType(): void {
     let typeId = this.selectedProfileTypeSetting.get();
-    if (!this.typeIdToOptionElementAndProfileType.has(typeId)) {
-      typeId = this.typeIdToOptionElementAndProfileType.keys().next().value as string;
+    if (!this.#profileTypes.has(typeId)) {
+      typeId = this.#profileTypes.keys().next().value as string;
       this.selectedProfileTypeSetting.set(typeId);
     }
 
-    const optionElementAndProfileType = (this.typeIdToOptionElementAndProfileType.get(typeId) as {
-      optionElement: HTMLInputElement,
-      profileType: ProfileType,
-    });
-    optionElementAndProfileType.optionElement.checked = true;
-    const type = optionElementAndProfileType.profileType;
-    for (const [id, {profileType}] of this.typeIdToOptionElementAndProfileType) {
-      const enabled = (id === typeId);
-      profileType.setCustomContentEnabled(enabled);
+    this.#selectedTypeId = typeId;
+    const selectedType = this.#profileTypes.get(typeId);
+    if (!selectedType) {
+      return;
     }
-    this.dispatchEventToListeners(Events.PROFILE_TYPE_SELECTED, type);
-  }
-
-  controlButtonClicked(): void {
-    this.panel.toggleRecord();
+    for (const [id, profileType] of this.#profileTypes) {
+      profileType.setCustomContentEnabled(id === typeId);
+    }
+    this.dispatchEventToListeners(Events.PROFILE_TYPE_SELECTED, selectedType);
+    this.requestUpdate();
   }
 
-  profileTypeChanged(profileType: ProfileType): void {
-    const typeId = this.selectedProfileTypeSetting.get();
-    const type = (this.typeIdToOptionElementAndProfileType.get(typeId) as {
-                   optionElement: HTMLInputElement,
-                   profileType: ProfileType,
-                 }).profileType;
-    type.setCustomContentEnabled(false);
+  #profileTypeChanged(profileType: ProfileType): void {
+    const previousTypeId = this.#selectedTypeId;
+    const previousType = this.#profileTypes.get(previousTypeId);
+    if (previousType) {
+      previousType.setCustomContentEnabled(false);
+    }
     profileType.setCustomContentEnabled(true);
-    this.dispatchEventToListeners(Events.PROFILE_TYPE_SELECTED, profileType);
-    this.isInstantProfile = profileType.isInstantProfile();
-    this.isEnabled = profileType.isEnabled();
-    this.updateControls();
+    this.#selectedTypeId = profileType.id;
     this.selectedProfileTypeSetting.set(profileType.id);
+    this.#isInstantProfile = profileType.isInstantProfile();
+    this.#isEnabled = profileType.isEnabled();
+    this.dispatchEventToListeners(Events.PROFILE_TYPE_SELECTED, profileType);
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const profileTypeEntries: ProfileTypeEntry[] = [];
+    for (const [id, profileType] of this.#profileTypes) {
+      const selected = id === this.#selectedTypeId;
+      const customContent = profileType.customContent();
+      profileType.setCustomContentEnabled(selected);
+      profileTypeEntries.push({
+        profileType,
+        selected,
+        customContent,
+      });
+    }
+
+    const controlButtonText = this.#isInstantProfile ?
+        i18nString(UIStrings.takeSnapshot) :
+        (this.#isProfiling ? i18nString(UIStrings.stop) : i18nString(UIStrings.start));
+    const controlButtonDisabled = !(this.#isEnabled && this.#recordButtonEnabled);
+    const controlButtonTooltip = this.#recordButtonEnabled ? '' : UI.UIUtils.anotherProfilerActiveLabel();
+    const that = this;
+
+    this.#view(
+        {
+          headerText: this.#getHeaderText(),
+          profileTypes: profileTypeEntries,
+          controlButtonText,
+          controlButtonDisabled,
+          controlButtonTooltip,
+          isProfiling: this.#isProfiling,
+          isolateSelector: this.#isolateSelector,
+          onControlClick: () => {
+            this.panel.toggleRecord();
+          },
+          onLoadClick: () => {
+            const loadFromFileAction = UI.ActionRegistry.ActionRegistry.instance().getAction('profiler.load-from-file');
+            void loadFromFileAction.execute();
+          },
+          onProfileTypeChange: (profileType: ProfileType) => {
+            this.#profileTypeChanged(profileType);
+          },
+        },
+        {
+          set isolateSelector(isolateSelector: IsolateSelector) {
+            if (that.#isolateSelector === isolateSelector) {
+              return;
+            }
+            that.#isolateSelector = isolateSelector;
+            that.requestUpdate();
+          },
+        },
+        this.contentElement,
+    );
   }
 }
 

package/front_end/panels/profiler/ProfilesPanel.ts

@@ -357,7 +357,7 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
   reset(): void {
     this.profileTypes.forEach(type => type.reset());
 
-    delete this.visibleView;
+    this.closeVisibleView();
 
     this.profileGroups = {};
     this.updateToggleRecordAction(false);
@@ -365,8 +365,6 @@ export class ProfilesPanel extends UI.Panel.PanelWithSidebar implements DataDisp
 
     this.sidebarTree.element.classList.remove('some-expandable');
 
-    this.launcherView.detach();
-    this.profileViews.removeChildren();
     this.profileViewToolbar.removeToolbarItems();
 
     this.profilesItemTreeElement.select();

package/front_end/panels/settings/components/SyncSection.ts

@@ -346,7 +346,7 @@ export class SyncSection extends UI.Widget.Widget {
     // TODO: investigate if /advance link is alive
     const warningLink =
         this.#syncInfo.isSyncActive ? 'chrome://settings/syncSetup/advanced' : 'chrome://settings/syncSetup';
-    UIHelpers.openInNewTab(warningLink);
+    UIHelpers.openInNewTab(warningLink, /* allowPrivileged=*/ true);
     event.consume();
   }
 

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -69,9 +69,10 @@ export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
   [Trace.Types.Events.Name.SOFT_NAVIGATION_START]: 1,
   [Trace.Types.Events.Name.MARK_LOAD]: 2,
   [Trace.Types.Events.Name.MARK_FCP]: 3,
-  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 4,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 5,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 6,
+  [Trace.Types.Events.Name.MARK_SOFT_FCP]: 4,
+  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 5,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 6,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 7,
 };
 
 // Threshold to match up overlay markers that are off by a tiny amount so they aren't rendered
@@ -676,7 +677,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
             event.name === Trace.Types.Events.Name.SOFT_NAVIGATION_START ||
             event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE ||
             event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION ||
-            event.name === Trace.Types.Events.Name.MARK_FCP ||
+            event.name === Trace.Types.Events.Name.MARK_FCP || event.name === Trace.Types.Events.Name.MARK_SOFT_FCP ||
             event.name === Trace.Types.Events.Name.MARK_DOM_CONTENT ||
             event.name === Trace.Types.Events.Name.MARK_LOAD);
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -2435,6 +2435,13 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   async loadingStarted(): Promise<void> {
     this.#changeView({mode: 'STATUS_PANE_OVERLAY'});
 
+    // If recording was stopped automatically (e.g. page reload or AI-triggered trace),
+    // we must transition to STOP_PENDING so that loadingComplete() knows the resulting
+    // trace is a fresh recording.
+    if (this.state === State.RECORDING) {
+      this.setState(State.STOP_PENDING);
+    }
+
     if (this.statusDialog) {
       this.statusDialog.remove();
     }

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -668,7 +668,6 @@ export class TimelineUIUtils {
           const options = {
             tabStop: true,
             showColumnNumber: false,
-            inlineFrameIndex: 0,
           };
           details = LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options);
         }
@@ -763,7 +762,6 @@ export class TimelineUIUtils {
       lineNumber,
       columnNumber,
       showColumnNumber: true,
-      inlineFrameIndex: 0,
       className: 'timeline-details',
       tabStop: true,
       omitOrigin,
@@ -788,14 +786,13 @@ export class TimelineUIUtils {
     const options = {
       className: 'timeline-details',
       tabStop: true,
-      inlineFrameIndex: 0,
       showColumnNumber: true,
       columnNumber: frame.columnNumber,
       lineNumber: frame.lineNumber,
       maxLength,
     };
     if (isFreshOrEnhanced) {
-      return linkifier.maybeLinkifyConsoleCallFrame(target, frame, {showColumnNumber: true, inlineFrameIndex: 0});
+      return linkifier.maybeLinkifyConsoleCallFrame(target, frame, {showColumnNumber: true});
     }
     return LegacyComponents.Linkifier.Linkifier.linkifyURL(frame.url as Platform.DevToolsPath.UrlString, options);
   }
@@ -809,17 +806,21 @@ export class TimelineUIUtils {
         name = 'Largest Contentful Paint';
         break;
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION:
-        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations-experiment';
+        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations';
         name = 'Soft Largest Contentful Paint';
         break;
       case Trace.Types.Events.Name.SOFT_NAVIGATION_START:
-        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations-experiment';
+        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations';
         name = 'Soft Navigations';
         break;
       case Trace.Types.Events.Name.MARK_FCP:
         link = 'https://web.dev/first-contentful-paint/';
         name = 'First Contentful Paint';
         break;
+      case Trace.Types.Events.Name.MARK_SOFT_FCP:
+        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations';
+        name = 'Soft First Contentful Paint';
+        break;
       default:
         break;
     }
@@ -963,7 +964,7 @@ export class TimelineUIUtils {
 
     // Add timestamp to user timings, including custom extensibility markers
     if (Trace.Helpers.Trace.eventHasCategory(event, Trace.Types.Events.Categories.UserTiming) ||
-        Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
+        Trace.Types.Extensions.isSyntheticExtensionEntry(event) || Trace.Types.Events.isSoftNavigationStart(event)) {
       const adjustedEventTimeStamp = timeStampForEventAdjustedForClosestNavigationIfPossible(
           event,
           parsedTrace,
@@ -1228,7 +1229,6 @@ export class TimelineUIUtils {
           const options = {
             tabStop: true,
             showColumnNumber: false,
-            inlineFrameIndex: 0,
           };
           contentHelper.appendElementRow(
               i18nString(UIStrings.imageUrl), LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
@@ -1242,7 +1242,6 @@ export class TimelineUIUtils {
           const options = {
             tabStop: true,
             showColumnNumber: false,
-            inlineFrameIndex: 0,
           };
           contentHelper.appendElementRow(
               i18nString(UIStrings.stylesheetUrl), LegacyComponents.Linkifier.Linkifier.linkifyURL(url, options));
@@ -1444,6 +1443,7 @@ export class TimelineUIUtils {
 
       case Trace.Types.Events.Name.MARK_FIRST_PAINT:
       case Trace.Types.Events.Name.MARK_FCP:
+      case Trace.Types.Events.Name.MARK_SOFT_FCP:
       case Trace.Types.Events.Name.MARK_LOAD:
       case Trace.Types.Events.Name.MARK_DOM_CONTENT: {
         const adjustedEventTimeStamp = timeStampForEventAdjustedForClosestNavigationIfPossible(
@@ -2074,7 +2074,7 @@ export class TimelineUIUtils {
         tall = true;
         break;
       case Trace.Types.Events.Name.SOFT_NAVIGATION_START:
-        color = 'var(--sys-color-blue)';
+        color = 'var(--color-text-primary)';
         tall = true;
         break;
       case Trace.Types.Events.Name.FRAME_STARTED_LOADING:
@@ -2094,6 +2094,7 @@ export class TimelineUIUtils {
         tall = true;
         break;
       case Trace.Types.Events.Name.MARK_FCP:
+      case Trace.Types.Events.Name.MARK_SOFT_FCP:
         color = 'var(--sys-color-green-bright)';
         tall = true;
         break;
@@ -2299,7 +2300,6 @@ export class TimelineDetailsContentHelper {
       tabStop: true,
       columnNumber: startColumn,
       showColumnNumber: true,
-      inlineFrameIndex: 0,
       text,
       omitOrigin,
     };
@@ -2316,8 +2316,7 @@ export class TimelineDetailsContentHelper {
       return;
     }
     const locationContent = document.createElement('span');
-    const link = this.#linkifier.maybeLinkifyScriptLocation(
-        this.target, null, url, startLine, {tabStop: true, inlineFrameIndex: 0});
+    const link = this.#linkifier.maybeLinkifyScriptLocation(this.target, null, url, startLine, {tabStop: true});
     if (!link) {
       return;
     }
@@ -2407,7 +2406,7 @@ export function isMarkerEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event:
     return true;
   }
 
-  if (Trace.Types.Events.isFirstContentfulPaint(event) || Trace.Types.Events.isFirstPaint(event)) {
+  if (Trace.Types.Events.isAnyFirstContentfulPaint(event) || Trace.Types.Events.isFirstPaint(event)) {
     return event.args.frame === parsedTrace.data.Meta.mainFrameId;
   }
 

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -37,12 +37,14 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
  */
 export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
   [Trace.Types.Events.Name.NAVIGATION_START]: 0,
-  [Trace.Types.Events.Name.MARK_LOAD]: 1,
-  [Trace.Types.Events.Name.MARK_FCP]: 2,
+  [Trace.Types.Events.Name.SOFT_NAVIGATION_START]: 1,
   [Trace.Types.Events.Name.MARK_FIRST_PAINT]: 2,
-  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 3,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 4,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 5,
+  [Trace.Types.Events.Name.MARK_FCP]: 3,
+  [Trace.Types.Events.Name.MARK_SOFT_FCP]: 4,
+  [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 5,
+  [Trace.Types.Events.Name.MARK_LOAD]: 6,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 7,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 8,
 };
 
 export class TimingsTrackAppender implements TrackAppender {

package/front_end/panels/timeline/components/LayoutShiftDetails.ts

@@ -436,7 +436,6 @@ function linkifyURL(url: Platform.DevToolsPath.UrlString): HTMLElement {
   return LegacyComponents.Linkifier.Linkifier.linkifyURL(url, {
     tabStop: true,
     showColumnNumber: false,
-    inlineFrameIndex: 0,
     maxLength: MAX_URL_LENGTH,
   });
 }

package/front_end/panels/timeline/components/NetworkRequestDetails.ts

@@ -267,7 +267,6 @@ function renderURL(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.Tem
   const options: LegacyComponents.Linkifier.LinkifyURLOptions = {
     tabStop: true,
     showColumnNumber: false,
-    inlineFrameIndex: 0,
     maxLength: MAX_URL_LENGTH,
   };
   const linkifiedURL = LegacyComponents.Linkifier.Linkifier.linkifyURL(
@@ -439,7 +438,6 @@ function renderInitiatedBy(
   const options: LegacyComponents.Linkifier.LinkifyOptions = {
     tabStop: true,
     showColumnNumber: true,
-    inlineFrameIndex: 0,
   };
   // If we have a stack trace, that is the most reliable way to get the initiator data and display a link to the source.
   if (hasStackTrace) {

package/front_end/panels/timeline/components/insights/ForcedReflow.ts

@@ -53,7 +53,6 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
         callFrame.lineNumber, {
           columnNumber: callFrame.columnNumber,
           showColumnNumber: true,
-          inlineFrameIndex: 0,
           tabStop: true,
         });
 

package/front_end/panels/timeline/components/insights/NodeLink.ts

@@ -39,7 +39,6 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     const options = {
       tabStop: true,
       showColumnNumber: false,
-      inlineFrameIndex: 0,
       maxLength: MAX_URL_LENGTH,
     };
     const linkEl = LegacyComponents.Linkifier.Linkifier.linkifyURL(fallbackUrl, options);

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -1627,6 +1627,8 @@ export class Overlays extends EventTarget {
       markers: HTMLElement, marker: HTMLElement): void {
     if (Trace.Types.Events.isSoftNavigationStart(event)) {
       name = 'Soft Nav';
+    } else if (Trace.Types.Events.isSoftFirstContentfulPaint(event)) {
+      name = 'Soft FCP';
     } else if (Trace.Types.Events.isSoftLargestContentfulPaintCandidate(event)) {
       name = 'Soft LCP';
     }

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: e1605f15bac37245745e5fb8327995ededbe2337
+Revision: e32418f5632b194cc1b5a5a0c0b1510d33edcc15
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE