chrome-devtools-frontend 1.0.1646286 → 1.0.1649421

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -42,6 +42,11 @@
   display: flex;
 }
 
+li.watch-expression-tree-item > span.tree-element-title {
+  display: block;
+  width: 100%;
+}
+
 .watch-expression-title:hover,
 .watch-expression-title:focus-within {
   padding-right: 26px;
@@ -55,6 +60,8 @@
   position: relative;
   flex: auto;
   min-height: 20px;
+  display: block;
+  width: 100%;
 }
 
 .watch-expression .name {

package/front_end/panels/timeline/TimelinePaintProfilerView.ts

@@ -41,8 +41,8 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
     this.imageView = new TimelinePaintImageView();
     this.logAndImageSplitWidget.setMainWidget(this.imageView);
 
-    this.paintProfilerView =
-        new LayerViewer.PaintProfilerView.PaintProfilerView(this.imageView.showImage.bind(this.imageView));
+    this.paintProfilerView = new LayerViewer.PaintProfilerView.PaintProfilerView();
+    this.paintProfilerView.showImageCallback = this.imageView.showImage.bind(this.imageView);
     this.paintProfilerView.addEventListener(
         LayerViewer.PaintProfilerView.Events.WINDOW_CHANGED, this.onWindowChanged, this);
     this.setSidebarWidget(this.paintProfilerView);
@@ -142,7 +142,7 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
   }
 
   update(): void {
-    this.logTreeView.setCommandLog([]);
+    this.logTreeView.commandLog = [];
     void this.paintProfilerView.setSnapshotAndLog(null, [], null);
 
     let snapshotPromise: Promise<{
@@ -188,7 +188,7 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
     function onCommandLogDone(
         this: TimelinePaintProfilerView, snapshot: SDK.PaintProfiler.PaintProfilerSnapshot,
         clipRect: Protocol.DOM.Rect|null, log?: SDK.PaintProfiler.PaintProfilerLogItem[]): void {
-      this.logTreeView.setCommandLog(log || []);
+      this.logTreeView.commandLog = log || [];
       void this.paintProfilerView.setSnapshotAndLog(snapshot, log || [], clipRect);
     }
   }
@@ -202,7 +202,7 @@ export class TimelinePaintProfilerView extends UI.SplitWidget.SplitWidget {
   }
 
   private onWindowChanged(): void {
-    this.logTreeView.updateWindow(this.paintProfilerView.selectionWindow());
+    this.logTreeView.selectionWindow = this.paintProfilerView.selectionWindow();
   }
 }
 

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

@@ -0,0 +1,122 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Trace from '../../../models/trace/trace.js';
+import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as Lit from '../../../ui/lit/lit.js';
+
+import networkTrackWidgetStyles from './networkTrackWidget.css.js';
+
+const {html} = Lit;
+
+// TODO: Do not redeclare the DataProvider here.
+// To prevent circular dependencies with the parent timeline module (since timeline.ts
+// imports and re-exports components/components.js, which in turn imports this file),
+// we must not import any classes from '../../timeline/timeline.js' here.
+// Instead, we declare a decoupled local `NetworkDataProvider` interface that extends
+// the legacy PerfUI FlameChart data provider, and have the widget accept it.
+export interface NetworkDataProvider extends PerfUI.FlameChart.FlameChartDataProvider {
+  setModel(parsedTrace: Trace.TraceModel.ParsedTrace, entityMapper: Trace.EntityMapper.EntityMapper): void;
+  setWindowTimes(min: number, max: number): void;
+  timelineData(): PerfUI.FlameChart.FlameChartTimelineData;
+  preparePopoverElement(index: number): Element|null;
+}
+
+export interface NetworkTrackWidgetData {
+  parsedTrace: Trace.TraceModel.ParsedTrace|null;
+  bounds: Trace.Types.Timing.TraceWindowMicro;
+  dataProvider: NetworkDataProvider;
+}
+
+export class NetworkTrackWidget extends HTMLElement implements PerfUI.FlameChart.FlameChartDelegate {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+
+  #flameChartContainer = document.createElement('div');
+  #flameChart: PerfUI.FlameChart.FlameChart|null = null;
+  #dataProvider: NetworkDataProvider|null = null;
+  #parsedTrace: Trace.TraceModel.ParsedTrace|null = null;
+
+  constructor() {
+    super();
+    this.#flameChartContainer.classList.add('container');
+  }
+
+  set data(data: NetworkTrackWidgetData) {
+    const parsedTrace = data.parsedTrace;
+    const dataProvider = data.dataProvider;
+    if (!parsedTrace || !dataProvider) {
+      return;
+    }
+
+    const isDataProviderChanged = dataProvider !== this.#dataProvider;
+    this.#dataProvider = dataProvider;
+    this.#parsedTrace = parsedTrace;
+
+    // 1. Render first to mount the container in the DOM so show() succeeds
+    this.#render();
+
+    // 2. Instantiate and show the flame chart in the mounted container
+    if (isDataProviderChanged || !this.#flameChart) {
+      this.#flameChartContainer.innerHTML = '';
+      this.#flameChart = new PerfUI.FlameChart.FlameChart(this.#dataProvider, this);
+      this.#flameChart.show(this.#flameChartContainer, undefined, true);
+    }
+
+    const entityMapper = Trace.EntityMapper.EntityMapper.getOrCreate(parsedTrace);
+    // Override preparePopoverElement to always return null, preventing any hover tooltips
+    // from being generated or rendered when the user hovers over the network request blocks.
+    this.#dataProvider.preparePopoverElement = () => null;
+    this.#dataProvider.setModel(parsedTrace, entityMapper);
+    const timelineData = this.#dataProvider.timelineData();
+    // Clearing the groups array hides the collapsible "Network" track header on the left.
+    // When the groups array is empty, the FlameChart component directly renders the track
+    // contents (the network requests) starting right from the top of the canvas.
+    timelineData.groups = [];
+
+    const bounds = Trace.Helpers.Timing.traceWindowMicroSecondsToMilliSeconds({
+      min: Trace.Types.Timing.Micro(data.bounds.min),
+      max: Trace.Types.Timing.Micro(data.bounds.max),
+      range: Trace.Types.Timing.Micro(data.bounds.range),
+    });
+
+    this.#dataProvider.setWindowTimes(bounds.min, bounds.max);
+    this.#flameChart.setWindowTimes(bounds.min, bounds.max);
+    this.#render();
+  }
+
+  #render(): void {
+    if (!this.#parsedTrace) {
+      return;
+    }
+    const output = html`
+        <style>${networkTrackWidgetStyles}</style>
+        ${this.#flameChartContainer}
+      `;
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    Lit.render(output, this.#shadow, {host: this});
+
+    if (this.#flameChart) {
+      this.#flameChart.update();
+    }
+  }
+
+  windowChanged(_windowStartTime: number, _windowEndTime: number, _animate: boolean): void {
+  }
+
+  updateRangeSelection(_startTime: number, _endTime: number): void {
+  }
+
+  updateSelectedGroup(_flameChart: PerfUI.FlameChart.FlameChart, _group: PerfUI.FlameChart.Group|null): void {
+  }
+}
+
+if (!customElements.get('devtools-performance-agent-network-track')) {
+  customElements.define('devtools-performance-agent-network-track', NetworkTrackWidget);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-performance-agent-network-track': NetworkTrackWidget;
+  }
+}

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

@@ -17,6 +17,7 @@ import * as MetricCard from './MetricCard.js';
 import * as NetworkRequestDetails from './NetworkRequestDetails.js';
 import * as NetworkRequestTooltip from './NetworkRequestTooltip.js';
 import * as NetworkThrottlingSelector from './NetworkThrottlingSelector.js';
+import * as NetworkTrackWidget from './NetworkTrackWidget.js';
 import * as OriginMap from './OriginMap.js';
 import * as RelatedInsightChips from './RelatedInsightChips.js';
 import * as Sidebar from './Sidebar.js';
@@ -43,6 +44,7 @@ export {
   NetworkRequestDetails,
   NetworkRequestTooltip,
   NetworkThrottlingSelector,
+  NetworkTrackWidget,
   OriginMap,
   RelatedInsightChips,
   Sidebar,

package/front_end/panels/timeline/components/networkTrackWidget.css

@@ -0,0 +1,31 @@
+/* Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+:host {
+  display: flex;
+}
+
+.container {
+  display: flex;
+  width: 100%;
+  height: 150px;
+  background-color: var(--sys-color-cdt-base-container);
+  border-radius: 8px;
+  border: 1px solid var(--sys-color-divider);
+}
+
+.container canvas {
+  /* stylelint-disable-next-line declaration-no-important */
+  pointer-events: none !important;
+}
+
+.flex-auto {
+  flex: auto;
+}
+
+.vbox {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}

package/front_end/panels/timeline/timeline.ts

@@ -7,6 +7,7 @@ import * as AnnotationHelpers from './AnnotationHelpers.js';
 import * as AppenderUtils from './AppenderUtils.js';
 import * as BenchmarkEvents from './BenchmarkEvents.js';
 import * as CompatibilityTracksAppender from './CompatibilityTracksAppender.js';
+import * as NetworkTrackWidget from './components/NetworkTrackWidget.js';
 import * as CountersGraph from './CountersGraph.js';
 import * as EntriesFilter from './EntriesFilter.js';
 import * as EventsTimelineTreeView from './EventsTimelineTreeView.js';
@@ -61,6 +62,7 @@ export {
   LayoutShiftsTrackAppender,
   ModificationsManager,
   NetworkTrackAppender,
+  NetworkTrackWidget,
   RecordingMetadata,
   SaveFileFormatter,
   TargetForEvent,

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: e32418f5632b194cc1b5a5a0c0b1510d33edcc15
+Revision: 619f853fcd9eb9a1f7b73de8a235a34248fd4a88
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/buttons/FloatingButton.ts

@@ -38,7 +38,7 @@ const {html, Directives: {classMap}} = Lit;
  *                      provided context.
  */
 export class FloatingButton extends HTMLElement {
-  static readonly observedAttributes = ['icon-name', 'jslogcontext'];
+  static readonly observedAttributes = ['icon-name', 'jslogcontext', 'disabled'];
 
   readonly #shadow = this.attachShadow({mode: 'open'});
 
@@ -83,6 +83,18 @@ export class FloatingButton extends HTMLElement {
     }
   }
 
+  get disabled(): boolean {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(disabled: boolean) {
+    if (disabled) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
     if (oldValue === newValue) {
       return;
@@ -93,6 +105,9 @@ export class FloatingButton extends HTMLElement {
     if (name === 'jslogcontext') {
       this.#updateJslog();
     }
+    if (name === 'disabled') {
+      this.#render();
+    }
   }
 
   #render(): void {
@@ -103,7 +118,7 @@ export class FloatingButton extends HTMLElement {
     // clang-format off
     Lit.render(html`
         <style>${floatingButtonStyles}</style>
-        <button class=${classes}><devtools-icon .name=${this.iconName}></devtools-icon></button>`,
+        <button class=${classes} ?disabled=${this.disabled}><devtools-icon .name=${this.iconName}></devtools-icon></button>`,
         this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/ui/components/buttons/floatingButton.css

@@ -36,11 +36,11 @@ button {
     height: var(--sys-size-7);
   }
 
-  :host-context(:not(.theme-with-dark-background)) & > devtools-icon {
+  &:not(:disabled):host-context(:not(.theme-with-dark-background)) & > devtools-icon {
     color: var(--sys-color-on-tonal-container);
   }
 
-  :host-context(.theme-with-dark-background) & > devtools-icon {
+  &:not(:disabled):host-context(.theme-with-dark-background) & > devtools-icon {
     color: var(--sys-color-on-primary);
   }
 

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -61,7 +61,7 @@ export interface AiCodeCompletionConfig {
 
 export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;
 export const AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS = 200;
-const MAX_PREFIX_SUFFIX_LENGTH = 20_000;
+export const MAX_PREFIX_SUFFIX_LENGTH = 20_000;
 
 export class AiCodeCompletionProvider {
   #aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient();

package/front_end/ui/legacy/TextPrompt.ts

@@ -65,6 +65,7 @@ import {cloneCustomElement, ElementFocusRestorer} from './UIUtils.js';
  * @attribute completions Sets the `id` of the <datalist> containing the autocomplete options.
  * @attribute placeholder Sets a placeholder that's shown in place of the text contents when editing if the text is too
  *            large.
+ * @attribute value Sets the initial text value that's edited when editing starts. If not provided, the slot's inner text is used.
  */
 export class TextPromptElement extends HTMLElement {
   static readonly observedAttributes = ['editing', 'completions', 'placeholder', 'cancel-on-blur'];
@@ -189,10 +190,11 @@ export class TextPromptElement extends HTMLElement {
   #startEditing(): void {
     const truncatedTextPlaceholder = this.getAttribute('placeholder');
     const placeholder = this.#entrypoint.createChild('span');
+    const initialText = this.getAttribute('value') ?? this.#slot.deepInnerText();
     if (truncatedTextPlaceholder === null) {
-      placeholder.textContent = this.#slot.deepInnerText();
+      placeholder.textContent = initialText;
     } else {
-      placeholder.setTextContentTruncatedIfNeeded(this.#slot.deepInnerText(), truncatedTextPlaceholder);
+      placeholder.setTextContentTruncatedIfNeeded(initialText, truncatedTextPlaceholder);
     }
     this.#slot.remove();
 
@@ -302,7 +304,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   #title: string;
   protected queryRange: TextUtils.TextRange.TextRange|null;
   private previousText: string;
-  private currentSuggestion: Suggestion|null;
+  #currentSuggestion: Suggestion|null;
   private completionRequestId: number;
   private ghostTextElement: HTMLSpanElement;
   private leftParenthesesIndices: number[];
@@ -337,7 +339,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     this.#title = '';
     this.queryRange = null;
     this.previousText = '';
-    this.currentSuggestion = null;
+    this.#currentSuggestion = null;
     this.completionRequestId = 0;
     this.ghostTextElement = document.createElement('span');
     this.ghostTextElement.classList.add('auto-complete-text');
@@ -458,10 +460,10 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
 
   textWithCurrentSuggestion(): string {
     const text = this.text();
-    if (!this.queryRange || !this.currentSuggestion) {
+    if (!this.queryRange || !this.#currentSuggestion) {
       return text;
     }
-    const suggestion = this.currentSuggestion.text;
+    const suggestion = this.#currentSuggestion.text;
     return text.substring(0, this.queryRange.startColumn) + suggestion + text.substring(this.queryRange.endColumn);
   }
 
@@ -623,7 +625,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
         }
         break;
       case 'Escape':
-        if (this.isSuggestBoxVisible() || this.currentSuggestion) {
+        if (this.isSuggestBoxVisible() || this.#currentSuggestion) {
           this.clearAutocomplete();
           handled = true;
         }
@@ -646,14 +648,14 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   private acceptSuggestionOnStopCharacters(key: string): boolean {
-    if (!this.currentSuggestion || !this.queryRange || key.length !== 1 ||
+    if (!this.#currentSuggestion || !this.queryRange || key.length !== 1 ||
         !this.completionStopCharacters?.includes(key) ||
-        this.currentSuggestion.disableAcceptSuggestionOnStopCharacters) {
+        this.#currentSuggestion.disableAcceptSuggestionOnStopCharacters) {
       return false;
     }
 
     const query = this.text().substring(this.queryRange.startColumn, this.queryRange.endColumn);
-    if (query && this.currentSuggestion.text.startsWith(query + key)) {
+    if (query && this.#currentSuggestion.text.startsWith(query + key)) {
       this.queryRange.endColumn += 1;
       return this.acceptAutoComplete();
     }
@@ -728,7 +730,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     if (beforeText !== this.textWithCurrentSuggestion()) {
       this.dispatchEventToListeners(Events.TEXT_CHANGED);
     }
-    this.currentSuggestion = null;
+    this.#currentSuggestion = null;
   }
 
   private onBlur(): void {
@@ -736,14 +738,14 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   private refreshGhostText(): void {
-    if (this.currentSuggestion?.hideGhostText) {
+    if (this.#currentSuggestion?.hideGhostText) {
       this.ghostTextElement.remove();
       return;
     }
-    if (this.queryRange && this.currentSuggestion && this.isCaretAtEndOfPrompt() &&
-        this.currentSuggestion.text.startsWith(this.text().substring(this.queryRange.startColumn))) {
+    if (this.queryRange && this.#currentSuggestion && this.isCaretAtEndOfPrompt() &&
+        this.#currentSuggestion.text.startsWith(this.text().substring(this.queryRange.startColumn))) {
       this.ghostTextElement.textContent =
-          this.currentSuggestion.text.substring(this.queryRange.endColumn - this.queryRange.startColumn);
+          this.#currentSuggestion.text.substring(this.queryRange.endColumn - this.queryRange.startColumn);
       this.element().appendChild(this.ghostTextElement);
     } else {
       this.ghostTextElement.remove();
@@ -875,7 +877,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   applySuggestion(suggestion: Suggestion|null, isIntermediateSuggestion?: boolean): void {
-    this.currentSuggestion = suggestion;
+    this.#currentSuggestion = suggestion;
     this.refreshGhostText();
     if (isIntermediateSuggestion) {
       this.dispatchEventToListeners(Events.TEXT_CHANGED);
@@ -891,8 +893,8 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
       return false;
     }
 
-    const suggestionLength = this.currentSuggestion ? this.currentSuggestion.text.length : 0;
-    const selectionRange = this.currentSuggestion ? this.currentSuggestion.selectionRange : null;
+    const suggestionLength = this.#currentSuggestion ? this.#currentSuggestion.text.length : 0;
+    const selectionRange = this.#currentSuggestion ? this.#currentSuggestion.selectionRange : null;
     const endColumn = selectionRange ? selectionRange.endColumn : suggestionLength;
     const startColumn = selectionRange ? selectionRange.startColumn : suggestionLength;
     this.element().textContent = this.textWithCurrentSuggestion();
@@ -1043,6 +1045,10 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   suggestBoxForTest(): SuggestBox|undefined {
     return this.suggestBox;
   }
+
+  currentSuggestion(): Suggestion|null {
+    return this.#currentSuggestion;
+  }
 }
 
 const DefaultAutocompletionTimeout = 250;

package/front_end/ui/legacy/Treeoutline.ts

@@ -409,11 +409,11 @@ export class TreeOutlineInShadow extends TreeOutline {
   shadowRoot: ShadowRoot;
   private readonly disclosureElement: Element;
   override renderSelection: boolean;
-  constructor(variant: TreeVariant = TreeVariant.OTHER, element?: HTMLElement) {
+  constructor(variant: TreeVariant = TreeVariant.OTHER, element?: HTMLElement, delegatesFocus?: boolean) {
     super();
     this.contentElement.classList.add('tree-outline');
     this.element = element ?? document.createElement('div');
-    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: treeoutlineStyles});
+    this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: treeoutlineStyles, delegatesFocus});
     this.disclosureElement = this.shadowRoot.createChild('div', 'tree-outline-disclosure');
     this.disclosureElement.appendChild(this.contentElement);
     this.renderSelection = true;
@@ -1542,6 +1542,7 @@ class TreeViewTreeElement extends TreeElement {
   #userExpanded = false;
   #isProcessingAttribute = false;
   #previousOpenAttributeValue?: string|null;
+  #refreshScheduled = false;
 
   static #elementToTreeElement = new WeakMap<Node, TreeViewTreeElement>();
   readonly configElement: HTMLLIElement;
@@ -1589,6 +1590,17 @@ class TreeViewTreeElement extends TreeElement {
     }
   }
 
+  refreshSoon(): void {
+    if (this.#refreshScheduled) {
+      return;
+    }
+    this.#refreshScheduled = true;
+    queueMicrotask(() => {
+      this.#refreshScheduled = false;
+      this.refresh();
+    });
+  }
+
   refresh(): void {
     const expandable = Boolean(this.configElement.querySelector('ul[role="group"]'));
     this.setExpandable(expandable);
@@ -1754,10 +1766,17 @@ function removeNode(node: TreeElement, preserveParentExpandable = false): void {
 export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
   static readonly observedAttributes =
       ['navigation-variant', 'hide-overflow', 'dense', 'show-selection-on-keyboard-focus'];
-  readonly #treeOutline = new TreeOutlineInShadow(undefined, this);
+  readonly #treeOutline = new TreeOutlineInShadow(undefined, this, true);
 
   constructor() {
     super();
+    this.addEventListener('focusin', (event: Event) => {
+      const actualTarget = event.composedPath()[0];
+      if (actualTarget === this.#treeOutline.contentElement && !this.#treeOutline.selectedTreeElement &&
+          this.#treeOutline.firstChild()) {
+        this.#treeOutline.firstChild()?.select(/* omitFocus */ true, /* selectedByUser */ false);
+      }
+    });
     this.#treeOutline.addEventListener(Events.ElementSelected, event => {
       if (event.data instanceof TreeViewTreeElement) {
         event.data.listItemElement.dispatchEvent(new TreeViewElement.SelectEvent());
@@ -1784,6 +1803,14 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     return this.#treeOutline;
   }
 
+  override focus(): void {
+    if (!this.#treeOutline.selectedTreeElement && this.#treeOutline.firstChild()) {
+      this.#treeOutline.firstChild()?.select(/* omitFocus */ true, /* selectedByUser */ false);
+    } else {
+      this.#treeOutline.focus();
+    }
+  }
+
   #getParentTreeElement(element: HTMLLIElement|TreeElementWrapper):
       {treeElement: TreeElement, expanded: boolean, classes: DOMTokenList}|null {
     const subtreeRoot = element.parentElement;
@@ -1813,7 +1840,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     if (!treeElement) {
       return;
     }
-    treeElement.refresh();
+    treeElement.refreshSoon();
     if (node === treeNode && attributeName === 'selected' && hasBooleanAttribute(treeNode, 'selected')) {
       treeElement.revealAndSelect(true);
     }