chrome-devtools-frontend 1.0.1515988 → 1.0.1518653

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -21,6 +21,13 @@ interface PositioningParams {
   currentPopoverRect: DOMRect;
 }
 
+enum PositionOption {
+  BOTTOM_SPAN_RIGHT = 'bottom-span-right',
+  BOTTOM_SPAN_LEFT = 'bottom-span-left',
+  TOP_SPAN_RIGHT = 'top-span-right',
+  TOP_SPAN_LEFT = 'top-span-left',
+}
+
 const positioningUtils = {
   bottomSpanRight: ({anchorRect}: PositioningParams): ProposedRect => {
     return {
@@ -93,36 +100,50 @@ const positioningUtils = {
   }
 };
 
-const proposedRectForRichTooltip =
-    ({inspectorViewRect, anchorRect, currentPopoverRect}:
-         {inspectorViewRect: DOMRect, anchorRect: DOMRect, currentPopoverRect: DOMRect}): ProposedRect => {
-      // Tries the default positioning of bottom right, bottom left, top right and top left.
-      // If they don't work out, we default back to showing in bottom right and adjust its insets so that the popover is inside the inspector view bounds.
-      let proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
-      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
-        return proposedRect;
-      }
-
-      proposedRect = positioningUtils.bottomSpanLeft({anchorRect, currentPopoverRect});
-      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
-        return proposedRect;
-      }
-
-      proposedRect = positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
-      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
-        return proposedRect;
-      }
-
-      proposedRect = positioningUtils.topSpanLeft({anchorRect, currentPopoverRect});
-      if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
-        return proposedRect;
-      }
+const proposedRectForRichTooltip = ({inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions}: {
+  inspectorViewRect: DOMRect,
+  anchorRect: DOMRect,
+  currentPopoverRect: DOMRect,
+  preferredPositions: PositionOption[],
+}): ProposedRect => {
+  // The default positioning order is `BOTTOM_SPAN_RIGHT`, `BOTTOM_SPAN_LEFT`, `TOP_SPAN_RIGHT`
+  // and `TOP_SPAN_LEFT`. If `preferredPositions` are given, those are tried first, before
+  // continuing with the remaining options in default order. Duplicate entries are removed.
+  const uniqueOrder = [
+    ...new Set([
+      ...preferredPositions,
+      ...Object.values(PositionOption),
+    ]),
+  ];
+
+  // Tries the positioning options in the order given by `uniqueOrder`.
+  // If none of them work out, we default to showing the tooltip in the bottom right and adjust
+  // its insets so that the tooltip is inside the inspector view bounds.
+  for (const positionOption of uniqueOrder) {
+    let proposedRect;
+    switch (positionOption) {
+      case PositionOption.BOTTOM_SPAN_RIGHT:
+        proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
+        break;
+      case PositionOption.BOTTOM_SPAN_LEFT:
+        proposedRect = positioningUtils.bottomSpanLeft({anchorRect, currentPopoverRect});
+        break;
+      case PositionOption.TOP_SPAN_RIGHT:
+        proposedRect = positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
+        break;
+      case PositionOption.TOP_SPAN_LEFT:
+        proposedRect = positioningUtils.topSpanLeft({anchorRect, currentPopoverRect});
+    }
+    if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
+      return proposedRect;
+    }
+  }
 
-      // If none of the options work above, we position to bottom right
-      // and adjust the insets so that it does not go out of bounds.
-      proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
-      return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
-    };
+  // If none of the options work above, we position to bottom right
+  // and adjust the insets so that it does not go out of bounds.
+  const proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
+  return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
+};
 
 const proposedRectForSimpleTooltip =
     ({inspectorViewRect, anchorRect, currentPopoverRect}:
@@ -162,7 +183,8 @@ export interface TooltipProperties {
  * @property variant - reflects the `"variant"` attribute.
  * @property padding - reflects the `"padding"` attribute.
  * @property useClick - reflects the `"click"` attribute.
- * @property verticalDistanceIncrease - reflexts the `"vertical-distance-increase"` attribute.
+ * @property verticalDistanceIncrease - reflects the `"vertical-distance-increase"` attribute.
+ * @property preferSpanLeft - reflects the `"prefer-span-left"` attribute.
  * @attribute id - Id of the tooltip. Used for searching an anchor element with aria-describedby.
  * @attribute hover-delay - Hover length in ms before the tooltip is shown and hidden.
  * @attribute variant - Variant of the tooltip, `"simple"` for strings only, inverted background,
@@ -170,6 +192,9 @@ export interface TooltipProperties {
  * @attribute padding - Which padding to use, defaults to `"small"`. Use `"large"` for richer content.
  * @attribute use-click - If present, the tooltip will be shown on click instead of on hover.
  * @attribute vertical-distance-increase - The tooltip is moved vertically this many pixels further away from its anchor.
+ * @attribute prefer-span-left - If present, the tooltip's preferred position is `"span-left"` (The right
+ *                 side of the tooltip and its anchor are aligned. The tooltip expands to the left from
+ *                 there.). Applies to rich tooltips only.
  * @attribute use-hotkey - If present, the tooltip will be shown on hover but not when receiving focus.
  *                    Requires a hotkey to open when fosed (Alt-down). When `"use-click"` is present
  *                    as well, use-click takes precedence.
@@ -254,6 +279,18 @@ export class Tooltip extends HTMLElement {
     this.setAttribute('vertical-distance-increase', increase.toString());
   }
 
+  get preferSpanLeft(): boolean {
+    return this.hasAttribute('prefer-span-left');
+  }
+
+  set preferSpanLeft(value: boolean) {
+    if (value) {
+      this.setAttribute('prefer-span-left', '');
+    } else {
+      this.removeAttribute('prefer-span-left');
+    }
+  }
+
   get anchor(): HTMLElement|null {
     return this.#anchor;
   }
@@ -360,9 +397,7 @@ export class Tooltip extends HTMLElement {
     if (this.open && Tooltip.lastOpenedTooltipId === this.id) {
       Tooltip.lastOpenedTooltipId = null;
     }
-    this.#timeout = window.setTimeout(() => {
-      this.hidePopover();
-    }, this.hoverDelay);
+    this.hidePopover();
   };
 
   toggle = (): void => {
@@ -393,8 +428,10 @@ export class Tooltip extends HTMLElement {
     this.#previousPopoverRect = currentPopoverRect;
 
     const inspectorViewRect = UI.InspectorView.InspectorView.instance().element.getBoundingClientRect();
+    const preferredPositions =
+        this.preferSpanLeft ? [PositionOption.BOTTOM_SPAN_LEFT, PositionOption.TOP_SPAN_LEFT] : [];
     const proposedPopoverRect = this.variant === 'rich' ?
-        proposedRectForRichTooltip({inspectorViewRect, anchorRect, currentPopoverRect}) :
+        proposedRectForRichTooltip({inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions}) :
         proposedRectForSimpleTooltip({inspectorViewRect, anchorRect, currentPopoverRect});
     this.style.left = `${proposedPopoverRect.left}px`;
 

package/front_end/ui/legacy/README.md

@@ -11,7 +11,7 @@ For a detailed explanation of the behavior of each property, please see the docu
 
 As an example, take the registration of the `Network conditions` pane, which is located in the drawer:
 
-```js
+```ts
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.DRAWER_VIEW,
   id: 'network.config',
@@ -24,11 +24,11 @@ UI.ViewManager.registerViewExtension({
     ls`network throttling`,
     ls`useragent`,
     ls`user agent`,
-    ls`user-agent`
+    ls`user-agent`,
   ],
-  async loadView(): UI.Widget.Widget  {
-    const  Network  = await loadNetworkModule();
-    return  Network.NetworkConfigView.NetworkConfigView.instance();
+  async loadView(): UI.Widget.Widget {
+    const Network = await loadNetworkModule();
+    return Network.NetworkConfigView.NetworkConfigView.instance();
   },
 });
 ```
@@ -43,38 +43,40 @@ For a detailed explanation of the behavior of each property, please see the docu
 
 As an example, take the registration of the  `network.toggle-recording` action, which allows to start or stop recording a network log:
 
-```js
+```ts
 UI.ActionRegistration.registerActionExtension({
-  actionId:  'network.toggle-recording',
+  actionId: 'network.toggle-recording',
   category: UI.ActionRegistration.ActionCategory.NETWORK,
   iconClass: UI.ActionRegistration.IconClass.LARGEICON_START_RECORDING,
-  toggleable:  true,
+  toggleable: true,
   toggledIconClass: UI.ActionRegistration.IconClass.LARGEICON_STOP_RECORDING,
-  toggleWithRedColor:  true,
+  toggleWithRedColor: true,
   contextTypes(): unknown[] {
-    return maybeRetrieveContextTypes(Network  =>  [Network.NetworkPanel.NetworkPanel]);
+    return maybeRetrieveContextTypes(Network => [
+      Network.NetworkPanel.NetworkPanel,
+    ]);
   },
-  async loadActionDelegate(): UI.ActionRegistration.ActionDelegate  {
-    const  Network  = await loadNetworkModule();
-    return  Network.NetworkPanel.ActionDelegate.instance();
+  async loadActionDelegate(): UI.ActionRegistration.ActionDelegate {
+    const Network = await loadNetworkModule();
+    return Network.NetworkPanel.ActionDelegate.instance();
   },
-  options:  [
+  options: [
     {
-      value:  true,
+      value: true,
       title: ls`Record network log`,
     },
     {
-      value:  false,
+      value: false,
       title: ls`Stop recording network log`,
     },
   ],
-  bindings:  [
+  bindings: [
     {
-      shortcut:  'Ctrl+E',
+      shortcut: 'Ctrl+E',
       platform: UI.ActionRegistration.Platforms.WindowsLinux,
     },
     {
-      shortcut:  'Meta+E',
+      shortcut: 'Meta+E',
       platform: UI.ActionRegistration.Platforms.Mac,
     },
   ],
@@ -105,10 +107,12 @@ A key binding will be used when the selected preset matches any of the keybind s
 If you don't specify additional constraints, the keybinding will be always available.
 It is possible that this results in duplicate keybindings, for example:
 
-```js
+```ts
 UI.ActionRegistration.registerActionExtension({
   contextTypes() {
-    return maybeRetrieveContextTypes(Elements => [Elements.ElementsPanel.ElementsPanel]);
+    return maybeRetrieveContextTypes(Elements => [
+      Elements.ElementsPanel.ElementsPanel,
+    ]);
   },
   bindings: [
     {
@@ -133,10 +137,12 @@ These two key bindings both allocate the same key for the `windows, linux` platf
 If key bindings were declared such that **at least one** of the three variables (`platform, contextTypes` and `keybindSets`) doesn't overlap, then no duplication would occur.
 For example, the following is **not** a form of duplication:
 
-```js
+```ts
 UI.ActionRegistration.registerActionExtension({
   contextTypes() {
-    return maybeRetrieveContextTypes(Elements => [Elements.ElementsPanel.ElementsPanel]);
+    return maybeRetrieveContextTypes(Elements => [
+      Elements.ElementsPanel.ElementsPanel,
+    ]);
   },
   bindings: [
     {
@@ -146,8 +152,10 @@ UI.ActionRegistration.registerActionExtension({
   ],
 });
 ```
+
 And
-```js
+
+```ts
 UI.ActionRegistration.registerActionExtension({
   contextTypes: undefined,
   bindings: [
@@ -159,4 +167,5 @@ UI.ActionRegistration.registerActionExtension({
   ],
 });
 ```
+
 In this case, they keybindings are declared for different keybind sets and thus do not result in duplcation.

package/front_end/ui/legacy/SearchableView.ts

@@ -414,21 +414,19 @@ export class SearchableView extends VBox {
   }
 
   updateSearchMatchesCount(matches: number): void {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const untypedSearchProvider = (this.searchProvider as any);
-    if (untypedSearchProvider.currentSearchMatches === matches) {
+    if (this.searchProvider.currentSearchMatches === matches) {
       return;
     }
-    untypedSearchProvider.currentSearchMatches = matches;
-    this.updateSearchMatchesCountAndCurrentMatchIndex(untypedSearchProvider.currentQuery ? matches : 0, -1);
+    this.searchProvider.currentSearchMatches = matches;
+    this.updateSearchMatchesCountAndCurrentMatchIndex(this.searchProvider.currentQuery ? matches : 0, -1);
   }
 
   updateCurrentMatchIndex(currentMatchIndex: number): void {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const untypedSearchProvider = (this.searchProvider as any);
-    this.updateSearchMatchesCountAndCurrentMatchIndex(untypedSearchProvider.currentSearchMatches, currentMatchIndex);
+    if (!this.searchProvider.currentSearchMatches) {
+      return;
+    }
+
+    this.updateSearchMatchesCountAndCurrentMatchIndex(this.searchProvider.currentSearchMatches, currentMatchIndex);
   }
 
   closeSearch(): void {
@@ -595,12 +593,9 @@ export class SearchableView extends VBox {
   }
 
   private clearSearch(): void {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const untypedSearchProvider = (this.searchProvider as any);
-    delete this.currentQuery;
-    if (Boolean(untypedSearchProvider.currentQuery)) {
-      delete untypedSearchProvider.currentQuery;
+    this.currentQuery = undefined;
+    if (Boolean(this.searchProvider.currentQuery)) {
+      this.searchProvider.currentQuery = undefined;
       this.searchProvider.onSearchCanceled();
     }
     this.updateSearchMatchesCountAndCurrentMatchIndex(0, -1);
@@ -614,9 +609,7 @@ export class SearchableView extends VBox {
     }
 
     this.currentQuery = query;
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (this.searchProvider as any).currentQuery = query;
+    this.searchProvider.currentQuery = query;
 
     const searchConfig = this.currentSearchConfig();
     this.searchProvider.performSearch(searchConfig, shouldJump, jumpBackwards);
@@ -644,17 +637,17 @@ export class SearchableView extends VBox {
 
   private replace(): void {
     if (!this.replaceProvider) {
-      throw new Error('No \'replacable\' provided to SearchableView!');
+      throw new Error('No \'replaceable\' provided to SearchableView!');
     }
     const searchConfig = this.currentSearchConfig();
     this.replaceProvider.replaceSelectionWith(searchConfig, this.replaceInputElement.value);
-    delete this.currentQuery;
+    this.currentQuery = undefined;
     this.performSearch(true, true);
   }
 
   private replaceAll(): void {
     if (!this.replaceProvider) {
-      throw new Error('No \'replacable\' provided to SearchableView!');
+      throw new Error('No \'replaceable\' provided to SearchableView!');
     }
     const searchConfig = this.currentSearchConfig();
     this.replaceProvider.replaceAllWith(searchConfig, this.replaceInputElement.value);
@@ -666,9 +659,7 @@ export class SearchableView extends VBox {
       return;
     }
 
-    if (this.valueChangedTimeoutId) {
-      clearTimeout(this.valueChangedTimeoutId);
-    }
+    clearTimeout(this.valueChangedTimeoutId);
     const timeout = this.searchInputElement.value.length < 3 ? 200 : 0;
     this.valueChangedTimeoutId = window.setTimeout(this.onValueChanged.bind(this), timeout);
   }
@@ -677,7 +668,7 @@ export class SearchableView extends VBox {
     if (!this.searchIsVisible) {
       return;
     }
-    delete this.valueChangedTimeoutId;
+    this.valueChangedTimeoutId = undefined;
     this.performSearch(false, true);
   }
 }
@@ -685,6 +676,8 @@ export class SearchableView extends VBox {
 const searchableViewsByElement = new WeakMap<Element, SearchableView>();
 
 export interface Searchable {
+  currentQuery?: string;
+  currentSearchMatches?: number;
   onSearchCanceled(): void;
   // Called when the search toolbar is closed
   onSearchClosed?: () => void;

package/front_end/ui/legacy/TextPrompt.ts

@@ -41,7 +41,168 @@ import * as ARIAUtils from './ARIAUtils.js';
 import {SuggestBox, type SuggestBoxDelegate, type Suggestion} from './SuggestBox.js';
 import textPromptStyles from './textPrompt.css.js';
 import {Tooltip} from './Tooltip.js';
-import {ElementFocusRestorer} from './UIUtils.js';
+import {cloneCustomElement, ElementFocusRestorer} from './UIUtils.js';
+
+/**
+ * A custom element wrapper around TextPrompt that allows text-editing contents in-place.
+ *
+ * ## Usage ##
+ *
+ * ```
+ * <devtools-prompt>
+ *  <b>Structured</b> content
+ * </devtools-prompt>
+ *
+ * ```
+ *
+ * @property completionTimeout Sets the delay for showing the autocomplete suggestion box.
+ * @event commit Editing is done and the result was accepted.
+ * @event expand Editing was canceled.
+ * @event beforeautocomplete This is sent before the autocomplete suggestion box is triggered and before the <datalist>
+ *                           is read.
+ * @attribute editing Setting/removing this attribute starts/stops editing.
+ * @attribute completions Sets the `id` of the <datalist> containing the autocomplete options.
+ */
+export class TextPromptElement extends HTMLElement {
+  static readonly observedAttributes = ['editing', 'completions'];
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #entrypoint = this.#shadow.createChild('span');
+  readonly #slot = this.#entrypoint.createChild('slot');
+  readonly #textPrompt = new TextPrompt();
+  #completionTimeout: number|null = null;
+
+  constructor() {
+    super();
+    this.#textPrompt.initialize(this.#willAutoComplete.bind(this));
+  }
+
+  attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
+    if (oldValue === newValue || !this.isConnected) {
+      return;
+    }
+
+    switch (name) {
+      case 'editing':
+        if (newValue !== null && newValue !== 'false' && oldValue === null) {
+          this.#startEditing();
+        } else {
+          this.#stopEditing();
+        }
+        break;
+      case 'completions':
+        if (this.#textPrompt.isSuggestBoxVisible()) {
+          void this.#textPrompt.complete(/* force=*/ true);
+        }
+        break;
+    }
+  }
+
+  async #willAutoComplete(expression?: string, filter?: string, force?: boolean): Promise<Suggestion[]> {
+    if (!force) {
+      this.dispatchEvent(new TextPromptElement.BeforeAutoCompleteEvent({expression, filter}));
+    }
+
+    const listId = this.getAttribute('completions');
+    if (!listId) {
+      return [];
+    }
+
+    const datalist = this.getComponentRoot()?.querySelectorAll<HTMLOptionElement>(`datalist#${listId} > option`);
+    if (!datalist?.length) {
+      return [];
+    }
+
+    filter = filter?.toLowerCase();
+    return datalist.values()
+        .filter(option => option.textContent.startsWith(filter ?? ''))
+        .map(option => ({text: option.textContent}))
+        .toArray();
+  }
+
+  #startEditing(): void {
+    const placeholder = this.#entrypoint.createChild('span');
+    placeholder.textContent = this.#slot.deepInnerText();
+    this.#slot.remove();
+
+    const proxy = this.#textPrompt.attachAndStartEditing(placeholder, e => this.#done(e, /* commit=*/ true));
+    proxy.addEventListener('keydown', this.#editingValueKeyDown.bind(this));
+    placeholder.getComponentSelection()?.selectAllChildren(placeholder);
+  }
+
+  #stopEditing(): void {
+    this.#entrypoint.removeChildren();
+    this.#entrypoint.appendChild(this.#slot);
+    this.#textPrompt.detach();
+  }
+
+  connectedCallback(): void {
+    if (this.hasAttribute('editing')) {
+      this.attributeChangedCallback('editing', null, '');
+    }
+  }
+
+  #done(e: Event, commit: boolean): void {
+    const target = e.target as HTMLElement;
+    const text = target.textContent || '';
+    if (commit) {
+      this.dispatchEvent(new TextPromptElement.CommitEvent(text));
+    } else {
+      this.dispatchEvent(new TextPromptElement.CancelEvent());
+    }
+    e.consume();
+  }
+
+  #editingValueKeyDown(event: Event): void {
+    if (event.handled || !(event instanceof KeyboardEvent)) {
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      this.#done(event, /* commit=*/ true);
+    } else if (Platform.KeyboardUtilities.isEscKey(event)) {
+      this.#done(event, /* commit=*/ false);
+    }
+  }
+
+  set completionTimeout(timeout: number) {
+    this.#completionTimeout = timeout;
+    this.#textPrompt.setAutocompletionTimeout(timeout);
+  }
+
+  override cloneNode(): Node {
+    const clone = cloneCustomElement(this);
+    if (this.#completionTimeout !== null) {
+      clone.completionTimeout = this.#completionTimeout;
+    }
+    return clone;
+  }
+}
+
+export namespace TextPromptElement {
+  export class CommitEvent extends CustomEvent<string> {
+    constructor(detail: string) {
+      super('commit', {detail});
+    }
+  }
+  export class CancelEvent extends CustomEvent<string> {
+    constructor() {
+      super('cancel');
+    }
+  }
+  export class BeforeAutoCompleteEvent extends CustomEvent<{expression?: string, filter?: string}> {
+    constructor(detail: {expression?: string, filter?: string}) {
+      super('beforeautocomplete', {detail});
+    }
+  }
+}
+
+customElements.define('devtools-prompt', TextPromptElement);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-prompt': TextPromptElement;
+  }
+}
 
 export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements SuggestBoxDelegate {
   private proxyElement!: HTMLElement|undefined;
@@ -510,6 +671,10 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
 
   async complete(force?: boolean): Promise<void> {
     this.clearAutocompleteTimeout();
+    if (!this.element().isConnected) {
+      return;
+    }
+
     const selection = this.element().getComponentSelection();
     if (!selection || selection.rangeCount === 0) {
       return;

package/front_end/ui/legacy/Treeoutline.ts

@@ -55,6 +55,7 @@ import {
   deepElementFromPoint,
   enclosingNodeOrSelfWithNodeNameInArray,
   HTMLElementWithLightDOMTemplate,
+  InterceptBindingDirective,
   isEditing,
 } from './UIUtils.js';
 
@@ -1549,6 +1550,7 @@ class ActiveHighlights {
 class TreeViewTreeElement extends TreeElement {
   #activeHighlights = new ActiveHighlights();
   #clonedAttributes = new Set<string>();
+  #clonedClasses = new Set<string>();
 
   static #elementToTreeElement = new WeakMap<Node, TreeViewTreeElement>();
   readonly configElement: HTMLLIElement;
@@ -1569,7 +1571,9 @@ class TreeViewTreeElement extends TreeElement {
   refresh(): void {
     this.titleElement.textContent = '';
     this.#clonedAttributes.forEach(attr => this.listItemElement.attributes.removeNamedItem(attr));
+    this.#clonedClasses.forEach(className => this.listItemElement.classList.remove(className));
     this.#clonedAttributes.clear();
+    this.#clonedClasses.clear();
     for (let i = 0; i < this.configElement.attributes.length; ++i) {
       const attribute = this.configElement.attributes.item(i);
       if (attribute && attribute.name !== 'role' && SDK.DOMModel.ARIA_ATTRIBUTES.has(attribute.name)) {
@@ -1577,6 +1581,11 @@ class TreeViewTreeElement extends TreeElement {
         this.#clonedAttributes.add(attribute.name);
       }
     }
+    for (const className of this.configElement.classList) {
+      this.listItemElement.classList.add(className);
+      this.#clonedClasses.add(className);
+    }
+    InterceptBindingDirective.attachEventListeners(this.configElement, this.listItemElement);
 
     for (const child of this.configElement.childNodes) {
       if (child instanceof HTMLUListElement && child.role === 'group') {
@@ -1753,7 +1762,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     }
   }
 
-  protected override addNodes(nodes: NodeList|Node[]): void {
+  protected override addNodes(nodes: NodeList|Node[], nextSibling?: Node|null): void {
     for (const node of getTreeNodes(nodes)) {
       if (TreeViewTreeElement.get(node)) {
         continue;  // Not sure this can happen
@@ -1762,8 +1771,13 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       if (!parent) {
         continue;
       }
+      while (nextSibling && nextSibling.nodeType !== Node.ELEMENT_NODE) {
+        nextSibling = nextSibling.nextSibling;
+      }
+      const nextElement = nextSibling ? TreeViewTreeElement.get(nextSibling) : null;
+      const index = nextElement ? parent.treeElement.indexOfChild(nextElement) : parent.treeElement.children().length;
       const treeElement = new TreeViewTreeElement(this.#treeOutline, node);
-      parent.treeElement.appendChild(treeElement, /* FIXME comparator */);
+      parent.treeElement.insertChild(treeElement, index);
       if (hasBooleanAttribute(node, 'selected')) {
         treeElement.revealAndSelect(true);
       }

package/front_end/ui/legacy/UIUtils.ts

@@ -2216,6 +2216,19 @@ export class InterceptBindingDirective extends Lit.Directive.Directive {
   }
 }
 
+export const cloneCustomElement = <T extends HTMLElement>(element: T, deep?: boolean): T => {
+  const clone = document.createElement(element.localName) as T;
+  for (const attribute of element.attributes) {
+    clone.setAttribute(attribute.name, attribute.value);
+  }
+  if (deep) {
+    for (const child of element.childNodes) {
+      clone.appendChild(child.cloneNode(deep));
+    }
+  }
+  return clone;
+};
+
 export class HTMLElementWithLightDOMTemplate extends HTMLElement {
   readonly #mutationObserver = new MutationObserver(this.#onChange.bind(this));
   #contentTemplate: HTMLTemplateElement|null = null;
@@ -2286,7 +2299,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     this.onChange(mutationList);
     for (const mutation of mutationList) {
       this.removeNodes(mutation.removedNodes);
-      this.addNodes(mutation.addedNodes);
+      this.addNodes(mutation.addedNodes, mutation.nextSibling);
       this.updateNode(mutation.target, mutation.attributeName);
     }
   }
@@ -2297,7 +2310,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
   protected updateNode(_node: Node, _attributeName: string|null): void {
   }
 
-  protected addNodes(_nodes: NodeList|Node[]): void {
+  protected addNodes(_nodes: NodeList|Node[], _nextSibling?: Node|null): void {
   }
 
   protected removeNodes(_nodes: NodeList): void {