chrome-devtools-frontend 1.0.1559913 → 1.0.1561080

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -372,7 +372,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
    */
   updateNodeAdorners(node: SDK.DOMModel.DOMNode): void {
     const element = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
-    void element?.updateStyleAdorners();
     void element?.updateAdorners();
   }
 
@@ -1747,10 +1746,6 @@ export class ElementsTreeOutline extends
       treeElement.setCollapsible(false);
     }
 
-    if (node.hasAssignedSlot()) {
-      treeElement.createSlotLink(node.assignedSlot);
-    }
-
     treeElement.selectable = Boolean(this.selectEnabled);
     return treeElement;
   }
@@ -2023,7 +2018,6 @@ export class ElementsTreeOutline extends
     const {node} = event.data;
     const treeElement = this.treeElementByNode.get(node);
     if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
-      void treeElement.updateStyleAdorners();
       void treeElement.updateAdorners();
     }
   }

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -1,7 +1,6 @@
 // Copyright 2021 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 */
 
 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
@@ -36,15 +35,16 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as Adorners from '../../ui/components/adorners/adorners.js';
-import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualElements from '../../ui/visual_logging/visual_logging.js';
 
 import * as ElementsComponents from './components/components.js';
-import {ElementsPanel} from './ElementsPanel.js';
-import {ElementsTreeElement} from './ElementsTreeElement.js';
+import {adornerRef, ElementsTreeElement} from './ElementsTreeElement.js';
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 
+const {html, render} = Lit;
+
 const UIStrings = {
   /**
    * @description Link text content in Elements Tree Outline of the Elements panel
@@ -54,56 +54,43 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ShortcutTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+interface ViewInput {
+  title: string;
+  onRevealAdornerClick: (e: Event) => void;
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    <div class="selection fill"></div>
+    <span class="elements-tree-shortcut-title">\u21AA ${input.title}</span>
+    <devtools-adorner
+      .name=${ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL}
+      class="adorner-reveal"
+      jslog=${VisualElements.adorner('reveal')}
+      aria-label=${i18nString(UIStrings.reveal)}
+      @click=${input.onRevealAdornerClick}
+      @mousedown=${(e: Event) => e.consume()}
+      ${adornerRef()}>
+      <span class="adorner-with-icon">
+        <devtools-icon name="select-element"></devtools-icon>
+        <span>${ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL}</span>
+      </span>
+    </devtools-adorner>
+  `, target);
+  // clang-format on
+};
+
 export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
   private readonly nodeShortcut: SDK.DOMModel.DOMNodeShortcut;
   #hovered?: boolean;
-  constructor(nodeShortcut: SDK.DOMModel.DOMNodeShortcut) {
+  #view: typeof DEFAULT_VIEW;
+
+  constructor(nodeShortcut: SDK.DOMModel.DOMNodeShortcut, view = DEFAULT_VIEW) {
     super('');
-    this.listItemElement.createChild('div', 'selection fill');
-    const title = this.listItemElement.createChild('span', 'elements-tree-shortcut-title');
-    let text = nodeShortcut.nodeName.toLowerCase();
-    if (nodeShortcut.nodeType === Node.ELEMENT_NODE) {
-      text = '<' + text + '>';
-    }
-    title.textContent = '\u21AA ' + text;
     this.nodeShortcut = nodeShortcut;
-    this.addRevealAdorner();
-  }
-
-  addRevealAdorner(): void {
-    const adorner = new Adorners.Adorner.Adorner();
-    adorner.classList.add('adorner-reveal');
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
-    const name = config.name;
-    const adornerContent = document.createElement('span');
-    const linkIcon = createIcon('select-element');
-    const slotText = document.createElement('span');
-    slotText.textContent = name;
-    adornerContent.append(linkIcon);
-    adornerContent.append(slotText);
-    adornerContent.classList.add('adorner-with-icon');
-    adorner.data = {
-      name,
-      content: adornerContent,
-      jslogContext: 'reveal',
-    };
-    this.listItemElement.appendChild(adorner);
-    const onClick = ((() => {
-                       this.nodeShortcut.deferredNode.resolve(
-                           node => {
-                             void Common.Revealer.reveal(node);
-                           },
-                       );
-                     }) as EventListener);
-    adorner.addInteraction(onClick, {
-      isToggle: false,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.reveal),
-      ariaLabelActive: i18nString(UIStrings.reveal),
-    });
-    adorner.addEventListener('mousedown', e => e.consume(), false);
-    ElementsPanel.instance().registerAdorner(adorner);
+    this.#view = view;
+    this.performUpdate();
   }
 
   get hovered(): boolean {
@@ -154,4 +141,24 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
     }
     return true;
   }
+
+  private onRevealAdornerClick(event: Event): void {
+    event.stopPropagation();
+    this.nodeShortcut.deferredNode.resolve(node => {
+      void Common.Revealer.reveal(node);
+    });
+  }
+
+  private performUpdate(): void {
+    let text = this.nodeShortcut.nodeName.toLowerCase();
+    if (this.nodeShortcut.nodeType === Node.ELEMENT_NODE) {
+      text = '<' + text + '>';
+    }
+    this.#view(
+        {
+          title: text,
+          onRevealAdornerClick: this.onRevealAdornerClick.bind(this),
+        },
+        undefined, this.listItemElement);
+  }
 }

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -810,9 +810,7 @@ export class StylePropertiesSection {
           ancestorRuleElement = this.createNestingElement(rule.nestingSelectors?.[nestingIndex++]);
           break;
         case Protocol.CSS.CSSRuleType.StartingStyleRule:
-          if (Root.Runtime.hostConfig.devToolsStartingStyleDebugging?.enabled) {
-            ancestorRuleElement = this.createStartingStyleElement();
-          }
+          ancestorRuleElement = this.createStartingStyleElement();
           break;
       }
       if (ancestorRuleElement) {

package/front_end/panels/elements/components/AdornerManager.ts

@@ -2,24 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export const enum AdornerCategories {
-  SECURITY = 'Security',
-  LAYOUT = 'Layout',
-  DEFAULT = 'Default',
-}
-
-export interface AdornerSetting {
+interface AdornerSetting {
   adorner: string;
   isEnabled: boolean;
 }
 
-export type AdornerSettingsMap = Map<string, boolean>;
-
-export interface RegisteredAdorner {
-  readonly name: string;
-  readonly category: AdornerCategories;
-  readonly enabledByDefault: boolean;
-}
+type AdornerSettingsMap = Map<string, boolean>;
 
 export enum RegisteredAdorners {
   AD = 'ad',
@@ -39,125 +27,6 @@ export enum RegisteredAdorners {
   TOP_LAYER = 'top-layer',
 }
 
-/**
- * This enum-like const object serves as the authoritative registry for all the
- * adorners available.
- **/
-export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorner {
-  switch (which) {
-    case RegisteredAdorners.GRID:
-      return {
-        name: 'grid',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.SUBGRID:
-      return {
-        name: 'subgrid',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.GRID_LANES:
-      return {
-        name: 'grid-lanes',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.FLEX:
-      return {
-        name: 'flex',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.AD:
-      return {
-        name: 'ad',
-        category: AdornerCategories.SECURITY,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.SCROLL_SNAP:
-      return {
-        name: 'scroll-snap',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.STARTING_STYLE:
-      return {
-        name: 'starting-style',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.CONTAINER:
-      return {
-        name: 'container',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.SLOT:
-      return {
-        name: 'slot',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.TOP_LAYER:
-      return {
-        name: 'top-layer',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.REVEAL:
-      return {
-        name: 'reveal',
-        category: AdornerCategories.DEFAULT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.MEDIA:
-      return {
-        name: 'media',
-        category: AdornerCategories.DEFAULT,
-        enabledByDefault: false,
-      };
-    case RegisteredAdorners.SCROLL:
-      return {
-        name: 'scroll',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    case RegisteredAdorners.POPOVER: {
-      return {
-        name: 'popover',
-        category: AdornerCategories.LAYOUT,
-        enabledByDefault: true,
-      };
-    }
-    case RegisteredAdorners.VIEW_SOURCE: {
-      return {
-        name: 'view-source',
-        category: AdornerCategories.DEFAULT,
-        enabledByDefault: true,
-      };
-    }
-  }
-}
-
-let adornerNameToCategoryMap: Map<string, AdornerCategories>|undefined = undefined;
-
-function getCategoryFromAdornerName(name: string): AdornerCategories {
-  if (!adornerNameToCategoryMap) {
-    adornerNameToCategoryMap = new Map();
-    for (const {name, category} of Object.values(RegisteredAdorners).map(getRegisteredAdorner)) {
-      adornerNameToCategoryMap.set(name, category);
-    }
-  }
-  return adornerNameToCategoryMap.get(name) || AdornerCategories.DEFAULT;
-}
-
-export const DefaultAdornerSettings: AdornerSetting[] =
-    Object.values(RegisteredAdorners).map(getRegisteredAdorner).map(({name, enabledByDefault}) => ({
-                                                                      adorner: name,
-                                                                      isEnabled: enabledByDefault,
-                                                                    }));
-
 interface SettingStore<Setting> {
   get(): Setting;
   set(setting: Setting): void;
@@ -205,9 +74,11 @@ export class AdornerManager {
 
     // Prune outdated adorners and add new ones to the persistence.
     const outdatedAdorners = new Set(this.#adornerSettings.keys());
-    for (const {adorner, isEnabled} of DefaultAdornerSettings) {
+    for (const adorner of Object.values(RegisteredAdorners)) {
       outdatedAdorners.delete(adorner);
       if (!this.#adornerSettings.has(adorner)) {
+        // Only the MEDIA adorner is disabled by default.
+        const isEnabled = adorner !== RegisteredAdorners.MEDIA;
         this.#adornerSettings.set(adorner, isEnabled);
       }
     }
@@ -218,18 +89,3 @@ export class AdornerManager {
     this.#persistCurrentSettings();
   }
 }
-
-const OrderedAdornerCategories = [
-  AdornerCategories.SECURITY,
-  AdornerCategories.LAYOUT,
-  AdornerCategories.DEFAULT,
-];
-
-/** Use idx + 1 for the order to avoid JavaScript's 0 == false issue **/
-export const AdornerCategoryOrder = new Map(OrderedAdornerCategories.map((category, idx) => [category, idx + 1]));
-
-export function compareAdornerNamesByCategory(nameA: string, nameB: string): number {
-  const orderA = AdornerCategoryOrder.get(getCategoryFromAdornerName(nameA)) || Number.POSITIVE_INFINITY;
-  const orderB = AdornerCategoryOrder.get(getCategoryFromAdornerName(nameB)) || Number.POSITIVE_INFINITY;
-  return orderA - orderB;
-}

package/front_end/panels/issues/HiddenIssuesRow.ts

@@ -49,8 +49,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
   // clang-format off
   render(html`
   <div class="header">
-    <devtools-adorner class="aggregated-issues-count"
-                      .data=${{name: 'countWrapper'}}>
+    <devtools-adorner class="aggregated-issues-count" .name=${'countWrapper'}>
       <span>${input.count}</span>
     </devtools-adorner>
     <div class="title">${i18nString(UIStrings.hiddenIssues)}</div>

package/front_end/panels/issues/IssueKindView.ts

@@ -98,10 +98,8 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
 
     const countAdorner = new Adorners.Adorner.Adorner();
-    countAdorner.data = {
-      name: 'countWrapper',
-      content: this.#issueCount,
-    };
+    countAdorner.name = 'countWrapper';
+    countAdorner.append(this.#issueCount);
     countAdorner.classList.add('aggregated-issues-count');
     this.#issueCount.textContent = '0';
 

package/front_end/panels/issues/IssueView.ts

@@ -342,10 +342,8 @@ export class IssueView extends UI.TreeOutline.TreeElement {
     this.#issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
     this.#aggregatedIssuesCount = document.createElement('span');
     const countAdorner = new Adorners.Adorner.Adorner();
-    countAdorner.data = {
-      name: 'countWrapper',
-      content: this.#aggregatedIssuesCount,
-    };
+    countAdorner.name = 'countWrapper';
+    countAdorner.append(this.#aggregatedIssuesCount);
     countAdorner.classList.add('aggregated-issues-count');
     header.appendChild(this.#issueKindIcon);
     header.appendChild(countAdorner);

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -323,8 +323,26 @@ const UIStrings = {
    */
   initialPriorityToolTip: '{PH1}, Initial priority: {PH2}',
   /**
-   * @description Tooltip to explain why the request has an IPP icon
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a render blocking resource.
    */
+  blocking: 'Blocking',
+  /**
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a resource that blocks the parser from starting to parse the document.
+   */
+  inBodyParserBlocking: 'In-body parser blocking',
+  /**
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a non-blocking resource.
+   */
+  nonBlocking: 'Non-blocking',
+  /**
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a non-blocking resource.
+   */
+  nonBlockingDynamic: 'Non-blocking dynamic',
+  /**
+   * @description Text in Network Data Grid Node of the Network panel. Noun. Refers to a potentially blocking resource.
+   */
+  potentiallyBlocking: 'Potentially blocking',
+
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkDataGridNode.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -775,6 +793,25 @@ export class NetworkRequestNode extends NetworkNode {
     return aRequest.identityCompare(bRequest);
   }
 
+  static RenderBlockingComparator(a: NetworkNode, b: NetworkNode): number {
+    const aRequest = a.requestOrFirstKnownChildRequest();
+    const bRequest = b.requestOrFirstKnownChildRequest();
+    if (!aRequest || !bRequest) {
+      return !aRequest ? -1 : 1;
+    }
+    const order = [
+      Protocol.Network.RenderBlockingBehavior.InBodyParserBlocking,
+      Protocol.Network.RenderBlockingBehavior.Blocking,
+      Protocol.Network.RenderBlockingBehavior.PotentiallyBlocking,
+      Protocol.Network.RenderBlockingBehavior.NonBlocking,
+      Protocol.Network.RenderBlockingBehavior.NonBlockingDynamic,
+      undefined,
+    ];
+    const aOrder = order.indexOf(aRequest.renderBlockingBehavior());
+    const bOrder = order.indexOf(bRequest.renderBlockingBehavior());
+    return aOrder - bOrder;
+  }
+
   static RequestPropertyComparator(propertyName: string, a: NetworkNode, b: NetworkNode): number {
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1051,6 +1088,10 @@ export class NetworkRequestNode extends NetworkNode {
         this.setTextAndTitle(cell, this.requestInternal.isAdRelated().toLocaleString());
         break;
       }
+      case 'render-blocking': {
+        this.renderRenderBlockingCell(cell);
+        break;
+      }
       case 'cookies': {
         this.setTextAndTitle(cell, this.arrayLength(this.requestInternal.includedRequestCookies()));
         break;
@@ -1360,6 +1401,29 @@ export class NetworkRequestNode extends NetworkNode {
     }
   }
 
+  private renderRenderBlockingCell(cell: HTMLElement): void {
+    switch (this.requestInternal.renderBlockingBehavior()) {
+      case Protocol.Network.RenderBlockingBehavior.Blocking:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.blocking));
+        break;
+      case Protocol.Network.RenderBlockingBehavior.InBodyParserBlocking:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.inBodyParserBlocking));
+        break;
+      case Protocol.Network.RenderBlockingBehavior.NonBlocking:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.nonBlocking));
+        break;
+      case Protocol.Network.RenderBlockingBehavior.NonBlockingDynamic:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.nonBlockingDynamic));
+        break;
+      case Protocol.Network.RenderBlockingBehavior.PotentiallyBlocking:
+        UI.UIUtils.createTextChild(cell, i18nString(UIStrings.potentiallyBlocking));
+        break;
+      default:
+        UI.UIUtils.createTextChild(cell, '');
+        break;
+    }
+  }
+
   #getLinkifierMetric(): Host.UserMetrics.Action|undefined {
     if (this.requestInternal.resourceType().isStyleSheet()) {
       return Host.UserMetrics.Action.StyleSheetInitiatorLinkClicked;

package/front_end/panels/network/NetworkLogView.ts

@@ -2754,11 +2754,9 @@ export class MoreFiltersDropDownUI extends Common.ObjectWrapper.ObjectWrapper<UI
     this.filterElement.setAttribute('jslog', `${VisualLogging.dropDown('more-filters').track({click: true})}`);
 
     this.activeFiltersCountAdorner = new Adorners.Adorner.Adorner();
+    this.activeFiltersCountAdorner.name = 'countWrapper';
     this.activeFiltersCount = document.createElement('span');
-    this.activeFiltersCountAdorner.data = {
-      name: 'countWrapper',
-      content: this.activeFiltersCount,
-    };
+    this.activeFiltersCountAdorner.append(this.activeFiltersCount);
     this.activeFiltersCountAdorner.classList.add('active-filters-count');
     this.updateActiveFiltersCount();
 

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -152,6 +152,10 @@ const UIStrings = {
    * @description Text to show whether a request is ad-related
    */
   isAdRelated: 'Is Ad-Related',
+  /**
+   * @description Text in Network Log View Columns of the Network panel
+   */
+  renderBlocking: 'Render Blocking',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkLogViewColumns.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -1192,6 +1196,11 @@ const DEFAULT_COLUMNS = [
     title: i18nLazyString(UIStrings.isAdRelated),
     sortingFunction: NetworkRequestNode.IsAdRelatedComparator,
   },
+  {
+    id: 'render-blocking',
+    title: i18nLazyString(UIStrings.renderBlocking),
+    sortingFunction: NetworkRequestNode.RenderBlockingComparator,
+  },
   // This header is a placeholder to let datagrid know that it can be sorted by this column, but never shown.
   {
     id: 'waterfall',

package/front_end/panels/screencast/ScreencastApp.ts

@@ -46,6 +46,7 @@ export class ScreencastApp implements Common.App.App,
 
   presentUI(document: Document): void {
     this.rootView = new UI.RootView.RootView();
+    this.rootView.registerRequiredCSS(UI.inspectorCommonStyles);
 
     this.rootSplitWidget =
         new UI.SplitWidget.SplitWidget(false, true, 'inspector-view.screencast-split-view-state', 300, 300);

package/front_end/panels/settings/SettingsScreen.ts

@@ -646,7 +646,7 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
               <span>${i18nString(UIStrings.greenDevUnstable)}</span>
              </div>
              <div class="settings-experiments-block">
-               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'inDevToolsFloaty'])}
+               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'inDevToolsFloaty', 'copyToGemini'])}
              </div>
            </devtools-card>
 
@@ -668,7 +668,8 @@ const GREENDEV_PROTOTYPE_NAMES: Record<keyof GreenDev.GreenDevSettings, string>
   inDevToolsFloaty: 'In DevTools context picker',
   aiAnnotations: 'AI auto-annotations',
   inlineWidgets: 'Inline widgets in AI Assistance',
-  artifactViewer: 'Widgets in the Artifact viewer'
+  artifactViewer: 'Widgets in the Artifact viewer',
+  copyToGemini: 'Copy changes to AI Prompt'
 };
 
 function renderWidgetOptions(settings: GreenDev.GreenDevSettings): TemplateResult {

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -409,6 +410,7 @@ export class CompatibilityTracksAppender {
     if (trackStartLevel === null || trackEndLevel === null) {
       throw new Error(`Could not find events for track: ${trackAppender}`);
     }
+
     const entryLevels = this.#flameChartData.entryLevels;
     const events = [];
     for (let i = 0; i < entryLevels.length; i++) {
@@ -416,7 +418,13 @@ export class CompatibilityTracksAppender {
         events.push(this.#entryData[i]);
       }
     }
-    events.sort((a, b) => a.ts - b.ts);  // TODO(paulirish): Remove as I'm 90% it's already sorted.
+
+    // TODO(crbug.com/457866795): callers expect this to be sorted, but #entryData
+    // currently isn't guaranteed to be sorted because of appendEventsAtLevel and
+    // appendEventAtLevel. Also, see
+    // TimelineFlameChartDataProvider#insertEventToEntryData. This method is cached
+    // in eventsForTreeView, so it doesn't impact performance much.
+    events.sort((a, b) => a.ts - b.ts);
 
     this.#eventsForTrack.set(trackAppender, events);
     return events;
@@ -541,6 +549,11 @@ export class CompatibilityTracksAppender {
   appendEventsAtLevel<T extends Trace.Types.Events.Event>(
       events: readonly T[], trackStartLevel: number, appender: TrackAppender,
       eventAppendedCallback?: (event: T, index: number) => void): number {
+    // Usage of getEventLevel below requires `events` to be sorted.
+    if (Host.InspectorFrontendHost.isUnderTest()) {
+      Platform.ArrayUtilities.assertArrayIsSorted(events, (a, b) => a.ts - b.ts);
+    }
+
     const lastTimestampByLevel: LastTimestampByLevel = [];
     for (let i = 0; i < events.length; ++i) {
       const event = events[i];

package/front_end/panels/timeline/ThirdPartyTreeView.ts

@@ -80,9 +80,6 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
       });
     }
 
-    // const events = this.#thirdPartySummaries.entityByEvent.keys();
-    const relatedEvents = this.selectedEvents().sort(Trace.Helpers.Trace.eventTimeComparator);
-
     // The filters for this view are slightly different; we want to use the set
     // of visible event types, but also include network events, which by
     // default are not in the set of visible entries (as they are not shown on
@@ -90,7 +87,7 @@ export class ThirdPartyTreeViewWidget extends TimelineTreeView.TimelineTreeView
     const filter = new Trace.Extras.TraceFilter.VisibleEventsFilter(
         Trace.Styles.visibleTypes().concat([Trace.Types.Events.Name.SYNTHETIC_NETWORK_REQUEST]));
 
-    const node = new Trace.Extras.TraceTree.BottomUpRootNode(relatedEvents, {
+    const node = new Trace.Extras.TraceTree.BottomUpRootNode(this.selectedEvents(), {
       textFilter: this.textFilter(),
       filters: [filter],
       startTime: this.startTime,