chrome-devtools-frontend 1.0.1556696 → 1.0.1559913

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -1,7 +1,6 @@
 // Copyright 2016 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 i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
@@ -10,14 +9,16 @@ import * as Protocol from '../../generated/protocol.js';
 import type * as Bindings from '../../models/bindings/bindings.js';
 import type * as BreakpointManager from '../../models/breakpoints/breakpoints.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
-import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
 
 import {getLocalizedBreakpointName} from './CategorizedBreakpointL10n.js';
 import debuggerPausedMessageStyles from './debuggerPausedMessage.css.js';
 
+const {html, render, nothing, Directives: {ifDefined}} = Lit;
+
 const UIStrings = {
   /**
    * @description Text in the JavaScript Debugging pane of the Sources pane when a DOM breakpoint is hit
@@ -117,21 +118,79 @@ const str_ = i18n.i18n.registerUIStrings('panels/sources/DebuggerPausedMessage.t
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-export class DebuggerPausedMessage {
-  readonly #element: HTMLDivElement;
-  private contentElement: HTMLElement;
-  constructor() {
-    this.#element = document.createElement('div');
-    this.#element.classList.add('paused-message');
-    this.#element.classList.add('flex-none');
-    this.#element.setAttribute('jslog', `${VisualLogging.dialog('debugger-paused')}`);
-    const root = UI.UIUtils.createShadowRootWithCoreStyles(this.#element, {cssFile: debuggerPausedMessageStyles});
-    this.contentElement = root.createChild('div');
-    UI.ARIAUtils.markAsPoliteLiveRegion(this.#element, false);
+interface DOMBreakpointData {
+  type: Protocol.DOMDebugger.DOMBreakpointType;
+  node: SDK.DOMModel.DOMNode;
+  targetNode: SDK.DOMModel.DOMNode|null;
+  insertion: boolean;
+}
+
+interface ViewInput {
+  errorLike: boolean;
+  mainText: string;
+  subText?: string;
+  title?: string;
+  domBreakpointData?: DOMBreakpointData;
+}
+
+function domBreakpointSubtext(data: DOMBreakpointData): Lit.LitTemplate {
+  let messageElement: HTMLElement|undefined;
+  if (data.targetNode) {
+    const targetNodeLink = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(data.targetNode);
+    if (data.insertion) {
+      if (data.targetNode === data.node) {
+        messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.childSAdded, {PH1: targetNodeLink});
+      } else {
+        messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.descendantSAdded, {PH1: targetNodeLink});
+      }
+    } else {
+      messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.descendantSRemoved, {PH1: targetNodeLink});
+    }
   }
+  return html`
+      ${PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(data.node)}
+      ${data.targetNode ? html`<br/>${messageElement}` : nothing}
+  `;
+}
+
+const DEFAULT_VIEW = (input: ViewInput|null, _output: undefined, target: HTMLElement): void => {
+  render(
+      html`
+    <style>${debuggerPausedMessageStyles}</style>
+    <div aria-live="polite" ?hidden=${!input}>${
+          input ?
+              html`
+      <div class="paused-status ${input.errorLike ? 'error-reason' : ''}">
+        <span>
+          <div class="status-main">
+            <devtools-icon name=${input.errorLike ? 'cross-circle-filled' : 'info'} class="medium"></devtools-icon>
+            ${input.mainText}
+          </div>
+          ${
+                  input.subText || input.domBreakpointData ?
+                      html`
+            <div class="status-sub monospace" title=${ifDefined(input.title ?? input.subText)}>${
+                          input.domBreakpointData ? domBreakpointSubtext(input.domBreakpointData) : input.subText}</div>
+          ` :
+                      nothing}
+        </span>
+      </div>` :
+              nothing}
+    </div>
+  `,
+      target);
+};
+
+type View = typeof DEFAULT_VIEW;
 
-  element(): Element {
-    return this.#element;
+export class DebuggerPausedMessage extends UI.Widget.Widget {
+  #viewInput: ViewInput|null = null;
+  constructor(element?: HTMLElement, private readonly view: View = DEFAULT_VIEW) {
+    super(element, {
+      jslog: `${VisualLogging.dialog('debugger-paused')}`,
+      classes: ['paused-message', 'flex-none'],
+      useShadowDom: true,
+    });
   }
 
   private static descriptionWithoutStack(description: string): string {
@@ -140,53 +199,30 @@ export class DebuggerPausedMessage {
                             description.substring(0, description.lastIndexOf('\n'));
   }
 
-  private static async createDOMBreakpointHitMessage(details: SDK.DebuggerModel.DebuggerPausedDetails):
-      Promise<Element> {
-    const messageWrapper = document.createElement('span');
+  private static async createDOMBreakpointHitMessageDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
+      Promise<ViewInput|null> {
     const domDebuggerModel = details.debuggerModel.target().model(SDK.DOMDebuggerModel.DOMDebuggerModel);
     if (!details.auxData || !domDebuggerModel) {
-      return messageWrapper;
+      return null;
     }
-    const data = domDebuggerModel.resolveDOMBreakpointData((details.auxData as {
+    const domBreakpointData = domDebuggerModel.resolveDOMBreakpointData((details.auxData as {
       type: Protocol.DOMDebugger.DOMBreakpointType,
       nodeId: Protocol.DOM.NodeId,
       targetNodeId: Protocol.DOM.NodeId,
       insertion: boolean,
     }));
-    if (!data) {
-      return messageWrapper;
-    }
 
-    const mainElement = messageWrapper.createChild('div', 'status-main');
-    const mainIcon = new Icon();
-    mainIcon.name = 'info';
-    mainIcon.style.color = 'var(--sys-color-on-yellow-container)';
-    mainIcon.classList.add('medium');
-    mainElement.appendChild(mainIcon);
-    const breakpointType = BreakpointTypeNouns.get(data.type);
-    mainElement.appendChild(document.createTextNode(
-        i18nString(UIStrings.pausedOnS, {PH1: breakpointType ? breakpointType() : String(null)})));
+    if (!domBreakpointData) {
+      return null;
+    }
 
-    const subElement = messageWrapper.createChild('div', 'status-sub monospace');
-    const linkifiedNode = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(data.node);
-    subElement.appendChild(linkifiedNode);
+    const breakpointType = BreakpointTypeNouns.get(domBreakpointData.type);
 
-    if (data.targetNode) {
-      const targetNodeLink = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(data.targetNode);
-      let messageElement;
-      if (data.insertion) {
-        if (data.targetNode === data.node) {
-          messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.childSAdded, {PH1: targetNodeLink});
-        } else {
-          messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.descendantSAdded, {PH1: targetNodeLink});
-        }
-      } else {
-        messageElement = uiI18n.getFormatLocalizedString(str_, UIStrings.descendantSRemoved, {PH1: targetNodeLink});
-      }
-      subElement.appendChild(document.createElement('br'));
-      subElement.appendChild(messageElement);
-    }
-    return messageWrapper;
+    return {
+      mainText: i18nString(UIStrings.pausedOnS, {PH1: breakpointType ? breakpointType() : String(null)}),
+      domBreakpointData,
+      errorLike: false,
+    };
   }
 
   static #findEventNameForUi(detailsAuxData?: SDK.DebuggerModel.EventListenerPausedDetailsAuxData): string {
@@ -223,86 +259,84 @@ export class DebuggerPausedMessage {
       details: SDK.DebuggerModel.DebuggerPausedDetails|null,
       debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding,
       breakpointManager: BreakpointManager.BreakpointManager.BreakpointManager): Promise<void> {
-    this.contentElement.removeChildren();
-    this.contentElement.hidden = !details;
     if (!details) {
+      this.#viewInput = null;
+      this.requestUpdate();
       return;
     }
 
-    const status = this.contentElement.createChild('div', 'paused-status');
-
     const errorLike = details.reason === Protocol.Debugger.PausedEventReason.Exception ||
         details.reason === Protocol.Debugger.PausedEventReason.PromiseRejection ||
         details.reason === Protocol.Debugger.PausedEventReason.Assert ||
         details.reason === Protocol.Debugger.PausedEventReason.OOM;
-    let messageWrapper;
+
     if (details.reason === Protocol.Debugger.PausedEventReason.DOM) {
-      messageWrapper = await DebuggerPausedMessage.createDOMBreakpointHitMessage(details);
+      this.#viewInput = await DebuggerPausedMessage.createDOMBreakpointHitMessageDetails(details);
     } else if (details.reason === Protocol.Debugger.PausedEventReason.EventListener) {
       const eventNameForUI = DebuggerPausedMessage.#findEventNameForUi(
           details.auxData as SDK.DebuggerModel.EventListenerPausedDetailsAuxData);
-      messageWrapper = buildWrapper(i18nString(UIStrings.pausedOnEventListener), eventNameForUI);
+      this.#viewInput = {mainText: i18nString(UIStrings.pausedOnEventListener), subText: eventNameForUI, errorLike};
     } else if (details.reason === Protocol.Debugger.PausedEventReason.XHR) {
       const auxData = (details.auxData as PausedDetailsAuxData);
-      messageWrapper = buildWrapper(i18nString(UIStrings.pausedOnXhrOrFetch), auxData.url || '');
+      this.#viewInput = {mainText: i18nString(UIStrings.pausedOnXhrOrFetch), subText: auxData.url || '', errorLike};
     } else if (details.reason === Protocol.Debugger.PausedEventReason.Exception) {
       const auxData = (details.auxData as PausedDetailsAuxData);
       const description = auxData.description || auxData.value || '';
       const descriptionWithoutStack = DebuggerPausedMessage.descriptionWithoutStack(description);
-      messageWrapper = buildWrapper(i18nString(UIStrings.pausedOnException), descriptionWithoutStack, description);
+      this.#viewInput = {
+        mainText: i18nString(UIStrings.pausedOnException),
+        subText: descriptionWithoutStack,
+        title: description,
+        errorLike,
+      };
     } else if (details.reason === Protocol.Debugger.PausedEventReason.PromiseRejection) {
       const auxData = (details.auxData as PausedDetailsAuxData);
       const description = auxData.description || auxData.value || '';
       const descriptionWithoutStack = DebuggerPausedMessage.descriptionWithoutStack(description);
-      messageWrapper =
-          buildWrapper(i18nString(UIStrings.pausedOnPromiseRejection), descriptionWithoutStack, description);
+      this.#viewInput = {
+        mainText: i18nString(UIStrings.pausedOnPromiseRejection),
+        subText: descriptionWithoutStack,
+        title: description,
+        errorLike,
+      };
     } else if (details.reason === Protocol.Debugger.PausedEventReason.Assert) {
-      messageWrapper = buildWrapper(i18nString(UIStrings.pausedOnAssertion));
+      this.#viewInput = {mainText: i18nString(UIStrings.pausedOnAssertion), errorLike};
     } else if (details.reason === Protocol.Debugger.PausedEventReason.DebugCommand) {
-      messageWrapper = buildWrapper(i18nString(UIStrings.pausedOnDebuggedFunction));
+      this.#viewInput = {mainText: i18nString(UIStrings.pausedOnDebuggedFunction), errorLike};
     } else if (details.reason === Protocol.Debugger.PausedEventReason.OOM) {
-      messageWrapper = buildWrapper(i18nString(UIStrings.pausedBeforePotentialOutofmemory));
+      this.#viewInput = {mainText: i18nString(UIStrings.pausedBeforePotentialOutofmemory), errorLike};
     } else if (
         details.reason === Protocol.Debugger.PausedEventReason.CSPViolation && details.auxData?.['violationType']) {
       const text = (details.auxData['violationType'] as string);
       if (text === Protocol.DOMDebugger.CSPViolationType.TrustedtypeSinkViolation) {
-        messageWrapper =
-            buildWrapper(i18nString(UIStrings.pausedOnCspViolation), i18nString(UIStrings.trustedTypeSinkViolation));
+        this.#viewInput = {
+          mainText: i18nString(UIStrings.pausedOnCspViolation),
+          subText: i18nString(UIStrings.trustedTypeSinkViolation),
+          errorLike,
+        };
       } else if (text === Protocol.DOMDebugger.CSPViolationType.TrustedtypePolicyViolation) {
-        messageWrapper =
-            buildWrapper(i18nString(UIStrings.pausedOnCspViolation), i18nString(UIStrings.trustedTypePolicyViolation));
+        this.#viewInput = {
+          mainText: i18nString(UIStrings.pausedOnCspViolation),
+          subText: i18nString(UIStrings.trustedTypePolicyViolation),
+          errorLike,
+        };
       }
     } else if (details.callFrames.length) {
       const uiLocation = await debuggerWorkspaceBinding.rawLocationToUILocation(details.callFrames[0].location());
       const breakpoint = uiLocation ? breakpointManager.findBreakpoint(uiLocation) : null;
       const defaultText = breakpoint ? i18nString(UIStrings.pausedOnBreakpoint) : i18nString(UIStrings.debuggerPaused);
-      messageWrapper = buildWrapper(defaultText);
+      this.#viewInput = {mainText: defaultText, errorLike};
     } else {
+      this.#viewInput = null;
       console.warn(
           'ScriptsPanel paused, but callFrames.length is zero.');  // TODO remove this once we understand this case better
     }
 
-    status.classList.toggle('error-reason', errorLike);
-    if (messageWrapper) {
-      status.appendChild(messageWrapper);
-    }
+    this.requestUpdate();
+  }
 
-    function buildWrapper(mainText: string, subText?: string, title?: string): Element {
-      const messageWrapper = document.createElement('span');
-      const mainElement = messageWrapper.createChild('div', 'status-main');
-      const mainIcon = new Icon();
-      mainIcon.name = errorLike ? 'cross-circle-filled' : 'info';
-      mainIcon.style.color = errorLike ? 'var(--icon-error)' : 'var(--sys-color-on-yellow-container)';
-      mainIcon.classList.add('medium');
-      mainElement.appendChild(mainIcon);
-      mainElement.appendChild(document.createTextNode(mainText));
-      if (subText) {
-        const subElement = messageWrapper.createChild('div', 'status-sub monospace');
-        subElement.textContent = subText;
-        UI.Tooltip.Tooltip.install(subElement, title || subText);
-      }
-      return messageWrapper;
-    }
+  override performUpdate(): void {
+    this.view(this.#viewInput, undefined, this.contentElement);
   }
 }
 
@@ -311,6 +345,7 @@ export const BreakpointTypeNouns = new Map([
   [Protocol.DOMDebugger.DOMBreakpointType.AttributeModified, i18nLazyString(UIStrings.attributeModifications)],
   [Protocol.DOMDebugger.DOMBreakpointType.NodeRemoved, i18nLazyString(UIStrings.nodeRemoval)],
 ]);
+
 interface PausedDetailsAuxData {
   description?: string;
   url?: Platform.DevToolsPath.UrlString;

package/front_end/panels/sources/SourcesPanel.ts

@@ -708,13 +708,21 @@ export class SourcesPanel extends UI.Panel.Panel implements
   private async updateDebuggerButtonsAndStatus(): Promise<void> {
     const currentTarget = UI.Context.Context.instance().flavor(SDK.Target.Target);
     const currentDebuggerModel = currentTarget ? currentTarget.model(SDK.DebuggerModel.DebuggerModel) : null;
+
+    const paused = this.#paused;
+    const details = currentDebuggerModel ? currentDebuggerModel.debuggerPausedDetails() : null;
+    await this.debuggerPausedMessage.render(
+        details, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
+        Breakpoints.BreakpointManager.BreakpointManager.instance());
+    await this.debuggerPausedMessage.updateComplete;
+
     if (!currentDebuggerModel) {
       this.togglePauseAction.setEnabled(false);
       this.stepOverAction.setEnabled(false);
       this.stepIntoAction.setEnabled(false);
       this.stepOutAction.setEnabled(false);
       this.stepAction.setEnabled(false);
-    } else if (this.#paused) {
+    } else if (paused) {
       this.togglePauseAction.setToggled(true);
       this.togglePauseAction.setEnabled(true);
       this.stepOverAction.setEnabled(true);
@@ -729,11 +737,6 @@ export class SourcesPanel extends UI.Panel.Panel implements
       this.stepOutAction.setEnabled(false);
       this.stepAction.setEnabled(false);
     }
-
-    const details = currentDebuggerModel ? currentDebuggerModel.debuggerPausedDetails() : null;
-    await this.debuggerPausedMessage.render(
-        details, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance(),
-        Breakpoints.BreakpointManager.BreakpointManager.instance());
     if (details) {
       this.updateDebuggerButtonsAndStatusForTest();
     }
@@ -1228,7 +1231,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
         this.revealDebuggerSidebar.bind(this), undefined, 'debug');
     this.sidebarPaneStack.widget().element.classList.add('y-overflow-only');
     this.sidebarPaneStack.widget().show(vbox.element);
-    this.sidebarPaneStack.widget().element.appendChild(this.debuggerPausedMessage.element());
+    this.debuggerPausedMessage.show(this.sidebarPaneStack.widget().element);
     this.sidebarPaneStack.appendApplicableItems('sources.sidebar-top');
 
     if (this.threadsSidebarPane) {

package/front_end/panels/sources/debuggerPausedMessage.css

@@ -41,3 +41,11 @@ devtools-icon {
   left: -1px;
   top: -1px;
 }
+
+devtools-icon[name="info"] {
+  color: var(--sys-color-on-yellow-container);
+}
+
+devtools-icon[name="cross-circle-filled"] {
+  color: var(--icon-error);
+}

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.
    */