chrome-devtools-frontend 1.0.1558690 → 1.0.1559913

package/front_end/panels/common/aiCodeGenerationTeaser.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+    .ai-code-generation-teaser {
+        .new-badge {
+            font-style: normal;
+            display: inline-block;
+        }
+    }
+}

package/front_end/panels/common/common.ts

@@ -95,7 +95,7 @@ export class TypeToAllowDialog {
 }
 
 export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
-export {AiCodeGenerationTeaser} from './AiCodeGenerationTeaser.js';
+export * as AiCodeGenerationTeaser from './AiCodeGenerationTeaser.js';
 export {AnnotationManager} from './AnnotationManager.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';

package/front_end/panels/console/consoleView.css

@@ -221,7 +221,7 @@
   --console-color-white: #fff;
 
   &:focus {
-    background-color: var(--sys-color-state-focus-highlight);
+    background-image: linear-gradient(to bottom, var(--sys-color-state-focus-highlight), var(--sys-color-state-focus-highlight));
   }
 }
 

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -85,6 +85,20 @@ const UIStrings = {
    */
   flexGridContainerPropertyRuleFix:
       'Try setting the {PROPERTY_NAME} on the container element or use {ALTERNATIVE_PROPERTY_NAME} instead.',
+  /**
+   * @description The messages shown in the Style pane when the user hovers over a position-anchor declaration that has no affect on a non-anchor-positioned element.
+   * @example {relative} POSITION
+   */
+  invalidAnchorPositioning:
+      'An anchor was defined but the element was not anchor-positioned but positioned "{POSITION}".',
+  /**
+   * @description The messages shown in the Style pane when the user hovers over a position-anchor declaration that has no affect on a non-anchor-positioned element.
+   */
+  invalidAnchorPositioningFix: 'Set position to either "fixed" or "absolute".',
+  /**
+   * @description The messages shown in the Style pane when the user hovers over a position-anchor declaration that has no affect on hidden element.
+   */
+  unusedAnchorPositioning: 'An anchor was defined but the element is hidden.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -547,6 +561,29 @@ export class ZIndexValidator extends CSSRuleValidator {
   }
 }
 
+export class PositionAnchorValidator extends CSSRuleValidator {
+  constructor() {
+    super(['position-anchor']);
+  }
+
+  override getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
+    const position = computedStyles?.get('position') ?? 'static';
+    const display = computedStyles?.get('display');
+
+    if (position !== 'absolute' && position !== 'fixed') {
+      return new Hint(
+          i18nString(UIStrings.invalidAnchorPositioning, {POSITION: position}),
+          i18nString(UIStrings.invalidAnchorPositioningFix));
+    }
+
+    if (display === 'none') {
+      return new Hint(i18nString(UIStrings.unusedAnchorPositioning, {POSITION: position}), null);
+    }
+
+    return undefined;
+  }
+}
+
 /**
  * Validates if CSS width/height are having an effect on an element.
  * See "Applies to" in https://www.w3.org/TR/css-sizing-3/#propdef-width.
@@ -659,6 +696,7 @@ const CSS_RULE_VALIDATORS = [
   MulticolFlexGridValidator,
   PaddingValidator,
   PositionValidator,
+  PositionAnchorValidator,
   SizingValidator,
   ZIndexValidator,
 ];

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -383,6 +383,7 @@ export interface ViewInput {
 
   showAdAdorner: boolean;
   showContainerAdorner: boolean;
+  containerType?: string;
   showFlexAdorner: boolean;
   showGridAdorner: boolean;
   showGridLanesAdorner: boolean;
@@ -392,6 +393,7 @@ export interface ViewInput {
   isSubgrid: boolean;
 
   showViewSourceAdorner: boolean;
+  showScrollAdorner: boolean;
   adorners?: Set<Adorners.Adorner.Adorner>;
   nodeInfo?: DocumentFragment;
   topLayerIndex: number;
@@ -454,9 +456,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
   const topLayerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
       ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
+  const scrollAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL);
   const hasAdorners = input.adorners?.size || input.showAdAdorner || input.showContainerAdorner ||
       input.showFlexAdorner || input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner ||
-      input.showPopoverAdorner || input.showTopLayerAdorner || input.showViewSourceAdorner;
+      input.showPopoverAdorner || input.showTopLayerAdorner || input.showViewSourceAdorner || input.showScrollAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -496,7 +500,10 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             }
           }}
           ${adornerRef(input)}>
-          <span>${containerAdornerConfig.name}</span>
+          <span class="adorner-with-icon">
+            <devtools-icon name="container"></devtools-icon>
+            <span>${input.containerType}</span>
+          </span>
         </devtools-adorner>`: nothing}
         ${input.showFlexAdorner ? html`<devtools-adorner
           class=clickable
@@ -618,6 +625,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ${repeat(Array.from((input.adorners ?? new Set()).values()).sort(adornerComparator), adorner => {
           return adorner;
         })}
+        ${input.showScrollAdorner ? html`<devtools-adorner
+          class="scroll"
+          .data=${{name: scrollAdornerConfig.name, jslogContext: scrollAdornerConfig.name}}
+          aria-label=${i18nString(UIStrings.elementHasScrollableOverflow)}
+          ${adornerRef(input)}>
+          <span>${scrollAdornerConfig.name}</span>
+        </devtools-adorner>` : nothing}
       </div>`: nothing}
     </div>
   `, target);
@@ -689,8 +703,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       };
       void this.updateStyleAdorners();
 
-      void this.updateScrollAdorner();
-
       void this.#updateAdorners();
     }
     this.expandAllButtonElement = null;
@@ -711,34 +723,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.nodeInternal.detached && !this.isClosingTag()) {
       this.listItemNode.setAttribute('title', 'Detached Tree Node');
     }
-
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== node.id) {
-            return;
-          }
-          this.#containerAdornerActive = enabled;
-          this.performUpdate();
-        });
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== node.id) {
-            return;
-          }
-          this.#flexAdornerActive = enabled;
-          this.performUpdate();
-        });
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== node.id) {
-            return;
-          }
-          this.#gridAdornerActive = enabled;
-          this.performUpdate();
-        });
   }
 
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
@@ -804,7 +788,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           containerAdornerActive: this.#containerAdornerActive,
           adorners: !this.isClosingTag() ? this.#adorners : undefined,
           showAdAdorner: this.nodeInternal.isAdFrameNode(),
-          showContainerAdorner: Boolean(this.#layout?.isContainer) && !this.isClosingTag(),
+          showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
+          containerType: this.#layout?.containerType,
           showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
           flexAdornerActive: this.#flexAdornerActive,
           showGridAdorner: Boolean(this.#layout?.isGrid) && !this.isClosingTag(),
@@ -817,6 +802,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           popoverAdornerActive: this.#popoverAdornerActive,
           isSubgrid: Boolean(this.#layout?.isSubgrid),
           showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.tagTypeContext),
+          showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
+                              (this.node().nodeName() !== '#document' && this.node().isScrollable())) &&
+              !this.isClosingTag(),
           nodeInfo: this.#nodeInfo,
           topLayerIndex: this.node().topLayerIndex(),
           onViewSourceAdornerClick: this.revealHTMLInSources.bind(this),
@@ -1124,6 +1112,18 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.treeOutline && !this.isClosingTag()) {
       this.treeOutline.treeElementByNode.set(this.nodeInternal, this);
       this.nodeInternal.addEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
+      this.nodeInternal.addEventListener(
+          SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
+      const overlayModel = this.nodeInternal.domModel().overlayModel();
+      overlayModel.addEventListener(
+          SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
+          this.#onPersistentContainerQueryOverlayStateChanged, this);
+      overlayModel.addEventListener(
+          SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
+          this.#onPersistentFlexContainerOverlayStateChanged, this);
+      overlayModel.addEventListener(
+          SDK.OverlayModel.Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, this.#onPersistentGridOverlayStateChanged,
+          this);
     }
   }
 
@@ -1135,6 +1135,51 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.treeOutline.treeElementByNode.delete(this.nodeInternal);
     }
     this.nodeInternal.removeEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
+    this.nodeInternal.removeEventListener(
+        SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
+    const overlayModel = this.nodeInternal.domModel().overlayModel();
+    overlayModel.removeEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
+        this.#onPersistentContainerQueryOverlayStateChanged, this);
+    overlayModel.removeEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
+        this.#onPersistentFlexContainerOverlayStateChanged, this);
+    overlayModel.removeEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, this.#onPersistentGridOverlayStateChanged, this);
+  }
+
+  #onScrollableFlagUpdated(): void {
+    void this.#updateAdorners();
+  }
+
+  #onPersistentContainerQueryOverlayStateChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.OverlayModel.ChangedNodeId>): void {
+    const {nodeId: eventNodeId, enabled} = event.data;
+    if (eventNodeId !== this.nodeInternal.id) {
+      return;
+    }
+    this.#containerAdornerActive = enabled;
+    this.performUpdate();
+  }
+
+  #onPersistentFlexContainerOverlayStateChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.OverlayModel.ChangedNodeId>): void {
+    const {nodeId: eventNodeId, enabled} = event.data;
+    if (eventNodeId !== this.nodeInternal.id) {
+      return;
+    }
+    this.#flexAdornerActive = enabled;
+    this.performUpdate();
+  }
+
+  #onPersistentGridOverlayStateChanged(event: Common.EventTarget.EventTargetEvent<SDK.OverlayModel.ChangedNodeId>):
+      void {
+    const {nodeId: eventNodeId, enabled} = event.data;
+    if (eventNodeId !== this.nodeInternal.id) {
+      return;
+    }
+    this.#gridAdornerActive = enabled;
+    this.performUpdate();
   }
 
   override onattach(): void {
@@ -1492,7 +1537,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           ],
         },
         {
-          condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isContainer),
+          condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.containerType),
           items: [
             {
               label: i18nString(UIStrings.explainContainerQueries),
@@ -3058,30 +3103,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#adorners.add(adorner);
   }
 
-  updateScrollAdorner(): void {
-    if (!isOpeningTag(this.tagTypeContext)) {
-      return;
-    }
-    const scrollAdorner =
-        this.#adorners.values().find(x => x.name === ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL);
-    // Check if the node is scrollable, or if it's the <html> element and the document is scrollable
-    // because the top-level document (#document) doesn't have a corresponding tree element.
-    const needsAScrollAdorner = (this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
-        (this.node().nodeName() !== '#document' && this.node().isScrollable());
-    if (needsAScrollAdorner && !scrollAdorner) {
-      this.pushScrollAdorner();
-    } else if (!needsAScrollAdorner && scrollAdorner) {
-      this.removeAdorner(scrollAdorner);
-    }
-  }
-
-  pushScrollAdorner(): void {
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL);
-    const adorner = this.adorn(config);
-    UI.Tooltip.Tooltip.install(adorner, i18nString(UIStrings.elementHasScrollableOverflow));
-    adorner.classList.add('scroll');
-  }
 }
 
 export const InitialChildrenLimit = 500;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1526,7 +1526,6 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.addEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.addEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
@@ -1542,7 +1541,6 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.removeEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
@@ -2020,21 +2018,6 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private scrollableFlagUpdated(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>): void {
-    let {node} = event.data;
-    if (node.nodeName() === '#document') {
-      // We show the scroll badge of the document on the <html> element.
-      if (!node.ownerDocument?.documentElement) {
-        return;
-      }
-      node = node.ownerDocument.documentElement;
-    }
-    const treeElement = this.treeElementByNode.get(node);
-    if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
-      void treeElement.updateScrollAdorner();
-    }
-  }
-
   private affectedByStartingStylesFlagUpdated(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>):
       void {
     const {node} = event.data;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -482,6 +482,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   private onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
     const regex = event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null;
+    this.setFilter(regex);
+  }
+
+  setFilter(regex: RegExp|null): void {
     this.lastFilterChange = Date.now();
     this.#filterRegex = regex;
     this.updateFilter();
@@ -1036,6 +1040,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
 
+    let lastLayerParent: SectionBlock|undefined;
     let lastLayers: SDK.CSSLayer.CSSLayer[]|null = null;
     let sawLayers = false;
 
@@ -1046,6 +1051,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         if ((layers.length || lastLayers) && lastLayers !== layers) {
           const block = SectionBlock.createLayerBlock(parentRule);
           blocks.push(block);
+          lastLayerParent?.childBlocks.push(block);
           sawLayers = true;
           lastLayers = layers;
         }
@@ -1055,12 +1061,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // We disable the layer widget initially. If we see a layer in
     // the matched styles we reenable the button.
     LayersWidget.ButtonProvider.instance().item().setVisible(false);
-
     for (const style of matchedStyles.nodeStyles()) {
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
       if (parentNode && parentNode !== lastParentNode) {
         lastParentNode = parentNode;
         const block = await SectionBlock.createInheritedNodeBlock(lastParentNode);
+        lastLayerParent = block;
         blocks.push(block);
       }
 
@@ -1078,6 +1084,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         });
       }
     }
+    lastLayerParent = undefined;
 
     const customHighlightPseudoRulesets: Array<{
       highlightName: string | null,
@@ -1130,9 +1137,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
           if (parentNode) {
             const block =
                 await SectionBlock.createInheritedPseudoTypeBlock(pseudo.pseudoType, pseudo.highlightName, parentNode);
+            lastLayerParent = block;
             blocks.push(block);
           } else {
             const block = SectionBlock.createPseudoTypeBlock(pseudo.pseudoType, pseudo.highlightName);
+            lastLayerParent = block;
             blocks.push(block);
           }
         }
@@ -1503,6 +1512,7 @@ const MAX_LINK_LENGTH = 23;
 export class SectionBlock {
   readonly #titleElement: Element|null;
   sections: StylePropertiesSection[];
+  childBlocks: SectionBlock[] = [];
   #expanded = false;
   #icon: Icon|undefined;
   constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
@@ -1634,14 +1644,15 @@ export class SectionBlock {
   }
 
   updateFilter(): number {
-    let hasAnyVisibleSection = false;
     let numVisibleSections = 0;
+    for (const childBlock of this.childBlocks) {
+      numVisibleSections += childBlock.updateFilter();
+    }
     for (const section of this.sections) {
       numVisibleSections += section.updateFilter() ? 1 : 0;
-      hasAnyVisibleSection = section.updateFilter() || hasAnyVisibleSection;
     }
     if (this.#titleElement) {
-      this.#titleElement.classList.toggle('hidden', !hasAnyVisibleSection);
+      this.#titleElement.classList.toggle('hidden', numVisibleSections === 0);
     }
     return numVisibleSections;
   }

package/front_end/panels/timeline/StatusDialog.ts

@@ -145,14 +145,15 @@ export class StatusDialog extends UI.Widget.VBox {
   }
 
   remove(): void {
-    (this.element.parentNode as HTMLElement)?.classList.remove('tinted');
+    (this.element.parentNode as HTMLElement)?.classList.remove('opaque', 'tinted');
     this.stopTimer();
     this.element.remove();
   }
 
-  showPane(parent: Element): void {
+  showPane(parent: Element, mode: 'tinted'|'opaque' = 'opaque'): void {
     this.show(parent);
-    parent.classList.add('tinted');
+    parent.classList.toggle('tinted', mode === 'tinted');
+    parent.classList.toggle('opaque', mode === 'opaque');
   }
 
   enableAndFocusButton(): void {

package/front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.ts

@@ -423,28 +423,15 @@ export class TimelineFlameChartNetworkDataProvider implements PerfUI.FlameChart.
 
   /**
    * When users zoom in the flamechart, we only want to show them the network
-   * requests between startTime and endTime. This function will call the
-   * trackAppender to update the timeline data, and then force to create a new
-   * PerfUI.FlameChart.FlameChartTimelineData instance to force the flamechart
-   * to re-render.
+   * requests between startTime and endTime.
    */
   #updateTimelineData(startTime: Trace.Types.Timing.Milli, endTime: Trace.Types.Timing.Milli): void {
     if (!this.#networkTrackAppender || !this.#timelineData) {
       return;
     }
+    // This also has the side-effect of updating this.#timelineData with new
+    // information.
     this.#maxLevel = this.#networkTrackAppender.relayoutEntriesWithinBounds(this.#events, startTime, endTime);
-
-    // TODO(crbug.com/1459225): Remove this recreating code.
-    // Force to create a new PerfUI.FlameChart.FlameChartTimelineData instance
-    // to force the flamechart to re-render. This also causes crbug.com/1459225.
-    this.#timelineData = PerfUI.FlameChart.FlameChartTimelineData.create({
-      entryLevels: this.#timelineData?.entryLevels,
-      entryTotalTimes: this.#timelineData?.entryTotalTimes,
-      entryStartTimes: this.#timelineData?.entryStartTimes,
-      groups: this.#timelineData?.groups,
-      initiatorsData: this.#timelineData.initiatorsData,
-      entryDecorations: this.#timelineData.entryDecorations,
-    });
   }
 
   /**

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -66,10 +66,12 @@ 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.MARK_DOM_CONTENT]: 3,
-  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 4,
+  [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,
 };
 
 // Threshold to match up overlay markers that are off by a tiny amount so they aren't rendered
@@ -648,6 +650,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
           fieldMetricResult = fieldMetricResults.fcp;
         } else if (event.name === Trace.Types.Events.Name.MARK_LCP_CANDIDATE) {
           fieldMetricResult = fieldMetricResults.lcp;
+          // Ignoring soft-nav LCP on purpose.
         }
 
         if (!fieldMetricResult) {
@@ -669,7 +672,9 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     // Set markers for Navigations, LCP, FCP, DCL, L.
     const markers = markerEvents.filter(
         event => event.name === Trace.Types.Events.Name.NAVIGATION_START ||
+            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_DOM_CONTENT ||
             event.name === Trace.Types.Events.Name.MARK_LOAD);
@@ -681,6 +686,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
           marker,
           parsedTrace.data.Meta.traceBounds,
           parsedTrace.data.Meta.navigationsByNavigationId,
+          parsedTrace.data.Meta.softNavigationsById,
           parsedTrace.data.Meta.navigationsByFrameId,
       );
       // If any of the markers overlap in timing, lets put them on the same marker.
@@ -732,24 +738,11 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       entries.push(...Overlays.Overlays.entriesForOverlay(overlay));
     }
 
-    // The insight's `relatedEvents` property likely already includes the events associated with
-    // an overlay, but just in case not, include both arrays. Duplicates are fine.
-    let relatedEventsList = this.#activeInsight?.model.relatedEvents;
-    if (!relatedEventsList) {
-      relatedEventsList = [];
-    } else if (relatedEventsList instanceof Map) {
-      relatedEventsList = Array.from(relatedEventsList.keys());
-    }
-    this.#dimInsightRelatedEvents([...entries, ...relatedEventsList]);
-
     if (options.updateTraceWindow) {
-      // We should only expand the entry track when we are updating the trace window
-      // (eg. when insight cards are initially opened).
+      // We should only expand the entry track when we are updating the trace window (eg. when insight cards are initially opened).
       // Otherwise the track will open when not intending to.
-      for (const entry of entries) {
-        // Ensure that the track for the entries are open.
-        this.#expandEntryTrack(entry);
-      }
+      this.#bulkExpandGroupsForEntries(entries);
+
       const overlaysBounds = Overlays.Overlays.traceWindowContainingOverlays(this.#currentInsightOverlays);
       if (overlaysBounds) {
         // Trace window covering all overlays expanded by 50% so that the overlays cover 2/3 (100/150) of the visible window. (Or use provided override)
@@ -767,11 +760,26 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
       }
     }
 
+    // The insight's `relatedEvents` property likely already includes the events associated with
+    // an overlay, but just in case not, include both arrays. Duplicates are fine.
+    let relatedEventsList = this.#activeInsight?.model.relatedEvents;
+    if (!relatedEventsList) {
+      relatedEventsList = [];
+    } else if (relatedEventsList instanceof Map) {
+      relatedEventsList = Array.from(relatedEventsList.keys());
+    }
+    this.#dimInsightRelatedEvents([...entries, ...relatedEventsList]);
+
     // Reveal entry if we have one.
+    // This is wrapped in a rAF to make sure the FlameChart draw from the
+    // expansion of any groups is complete - we need all the update() handlers
+    // to have run so the FlameChart has been drawn correctly at the right height.
     if (entries.length !== 0) {
       const earliestEntry =
           entries.reduce((earliest, current) => (earliest.ts < current.ts ? earliest : current), entries[0]);
-      this.revealEventVertically(earliestEntry);
+      requestAnimationFrame(() => {
+        this.revealEventVertically(earliestEntry);
+      });
     }
   }
 
@@ -823,6 +831,41 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
+  /**
+   * Bulk expands the tracks (e.g. groups) that the given entries belong to.
+   * Will update them all at once and then do a redraw.
+   */
+  #bulkExpandGroupsForEntries(entries: Trace.Types.Events.Event[]): void {
+    const networkGroupIndexes = new Set<number>();
+    const mainGroupIndexes = new Set<number>();
+
+    for (const entry of entries) {
+      const chartName = Overlays.Overlays.chartForEntry(entry);
+      const provider = chartName === 'main' ? this.mainDataProvider : this.networkDataProvider;
+      const entryIndex = provider.indexForEvent?.(entry) ?? null;
+      if (entryIndex === null) {
+        continue;
+      }
+
+      const group = provider.groupForEvent?.(entryIndex) ?? null;
+      if (!group) {
+        continue;
+      }
+      if (group.expanded) {
+        continue;
+      }
+      const groupIndex = provider.timelineData().groups.indexOf(group);
+      if (chartName === 'main') {
+        mainGroupIndexes.add(groupIndex);
+      } else {
+        networkGroupIndexes.add(groupIndex);
+      }
+    }
+
+    this.mainFlameChart.bulkExpandGroups([...mainGroupIndexes]);
+    this.networkFlameChart.bulkExpandGroups([...networkGroupIndexes]);
+  }
+
   /**
    * Expands the track / group that the given entry is in.
    */