chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

package/front_end/ui/legacy/SuggestBox.ts

@@ -32,11 +32,11 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
-import {Size} from './Geometry.js';
 import {AnchorBehavior, GlassPane} from './GlassPane.js';
 import {ListControl, type ListDelegate, ListMode} from './ListControl.js';
 import {ListModel} from './ListModel.js';
@@ -125,7 +125,7 @@ export class SuggestBox implements ListDelegate<Suggestion> {
     const maxWidth = this.maxWidth(items);
     const length = this.maxItemsHeight ? Math.min(this.maxItemsHeight, items.length) : items.length;
     const maxHeight = length * this.rowHeight;
-    this.glassPane.setMaxContentSize(new Size(maxWidth, maxHeight));
+    this.glassPane.setMaxContentSize(new Geometry.Size(maxWidth, maxHeight));
   }
 
   private maxWidth(items: Suggestion[]): number {

package/front_end/ui/legacy/TabbedPane.ts

@@ -35,13 +35,13 @@ import './Toolbar.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
 import {ContextMenu} from './ContextMenu.js';
-import {Constraints, Size} from './Geometry.js';
 import tabbedPaneStyles from './tabbedPane.css.js';
 import type {Toolbar} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
@@ -551,14 +551,14 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.tabSlider.classList.toggle('enabled', enable);
   }
 
-  override calculateConstraints(): Constraints {
+  override calculateConstraints(): Geometry.Constraints {
     let constraints = super.calculateConstraints();
-    const minContentConstraints = new Constraints(new Size(0, 0), new Size(50, 50));
+    const minContentConstraints = new Geometry.Constraints(new Geometry.Size(0, 0), new Geometry.Size(50, 50));
     constraints = constraints.widthToMax(minContentConstraints).heightToMax(minContentConstraints);
     if (this.verticalTabLayout) {
-      constraints = constraints.addWidth(new Constraints(new Size(120, 0)));
+      constraints = constraints.addWidth(new Geometry.Constraints(new Geometry.Size(120, 0)));
     } else {
-      constraints = constraints.addHeight(new Constraints(new Size(0, 30)));
+      constraints = constraints.addHeight(new Geometry.Constraints(new Geometry.Size(0, 30)));
     }
     return constraints;
   }

package/front_end/ui/legacy/Treeoutline.ts

@@ -36,7 +36,10 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as Buttons from '../components/buttons/buttons.js';
+import * as Highlighting from '../components/highlighting/highlighting.js';
 import type * as IconButton from '../components/icon_button/icon_button.js';
 import * as Lit from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
@@ -44,6 +47,7 @@ import * as VisualLogging from '../visual_logging/visual_logging.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import {type Config, InplaceEditor} from './InplaceEditor.js';
 import {Keys} from './KeyboardShortcut.js';
+import type {SearchableView} from './SearchableView.js';
 import {Tooltip} from './Tooltip.js';
 import treeoutlineStyles from './treeoutline.css.js';
 import {
@@ -1405,34 +1409,183 @@ function hasBooleanAttribute(element: Element, name: string): boolean {
   return element.hasAttribute(name) && element.getAttribute(name) !== 'false';
 }
 
+interface TreeNode<NodeT> {
+  children(): NodeT[];
+}
+
+export interface TreeSearchResult<NodeT> {
+  node: NodeT;
+  isPostOrderMatch: boolean;
+  matchIndexInNode: number;
+}
+
+export class TreeSearch < NodeT extends TreeNode<NodeT>,
+                                        SearchResultT extends TreeSearchResult<NodeT >= TreeSearchResult<NodeT>> {
+  #matches: SearchResultT[] = [];
+  #currentMatchIndex = 0;
+  #nodeMatchMap: WeakMap<NodeT, SearchResultT[]>|undefined;
+
+  reset(): void {
+    this.#matches = [];
+    this.#nodeMatchMap = undefined;
+    this.#currentMatchIndex = 0;
+  }
+
+  currentMatch(): SearchResultT|undefined {
+    return this.#matches.at(this.#currentMatchIndex);
+  }
+
+  #getNodeMatchMap(): WeakMap<NodeT, SearchResultT[]> {
+    if (!this.#nodeMatchMap) {
+      this.#nodeMatchMap = new WeakMap();
+      for (const match of this.#matches) {
+        let entry = this.#nodeMatchMap.get(match.node);
+        if (!entry) {
+          entry = [];
+          this.#nodeMatchMap.set(match.node, entry);
+        }
+        entry.push(match);
+      }
+    }
+    return this.#nodeMatchMap;
+  }
+
+  getResults(node: NodeT): SearchResultT[] {
+    return this.#getNodeMatchMap().get(node) ?? [];
+  }
+
+  highlight(ranges: TextUtils.TextRange.SourceRange[], selectedRange: TextUtils.TextRange.SourceRange|undefined):
+      ReturnType<typeof Lit.Directives.ref> {
+    return Lit.Directives.ref(element => {
+      if (element instanceof HTMLLIElement) {
+        TreeViewTreeElement.get(element)?.highlight(ranges, selectedRange);
+      }
+    });
+  }
+
+  updateSearchableView(view: SearchableView): void {
+    view.updateSearchMatchesCount(this.#matches.length);
+    view.updateCurrentMatchIndex(this.#currentMatchIndex);
+  }
+
+  next(): SearchResultT|undefined {
+    this.#currentMatchIndex = Platform.NumberUtilities.mod(this.#currentMatchIndex + 1, this.#matches.length);
+    return this.currentMatch();
+  }
+
+  prev(): SearchResultT|undefined {
+    this.#currentMatchIndex = Platform.NumberUtilities.mod(this.#currentMatchIndex - 1, this.#matches.length);
+    return this.currentMatch();
+  }
+
+  // This is a generator to sidestep stack overflow risks
+  *
+      #innerSearch(
+          node: NodeT, currentMatch: SearchResultT|undefined, jumpBackwards: boolean,
+          match: (node: NodeT, isPostOrder: boolean) => SearchResultT[]): Generator<SearchResultT> {
+    const updateCurrentMatchIndex = (isPostOrder: boolean): void => {
+      if (currentMatch?.node === node && currentMatch.isPostOrderMatch === isPostOrder) {
+        // We're current matching the node that contains the currently focused search result, the n-th result
+        // within that node. When updating the search hits, make sure we're still focusing the n-th result within
+        // that node. That may make the result jump within the node, but at least we're still focusing the same
+        // node. If there are fewer than n hits in the current node, we're going to move the focus to the next
+        // search hit in the next node by default, or the last one in this node if searching backwards.
+        if (currentMatch.matchIndexInNode >= preOrderMatches.length) {
+          this.#currentMatchIndex = jumpBackwards ? this.#matches.length - 1 : this.#matches.length;
+        } else {
+          this.#currentMatchIndex = this.#matches.length - preOrderMatches.length + currentMatch.matchIndexInNode;
+        }
+      }
+    };
+
+    const preOrderMatches = match(node, /* isPostOrder=*/ false);
+    this.#matches.push(...preOrderMatches);
+    updateCurrentMatchIndex(/* isPostOrder=*/ false);
+    yield* preOrderMatches.values();
+    for (const child of node.children()) {
+      yield* this.#innerSearch(child, currentMatch, jumpBackwards, match);
+    }
+    const postOrderMatches = match(node, /* isPostOrder=*/ true);
+    this.#matches.push(...postOrderMatches);
+    updateCurrentMatchIndex(/* isPostOrder=*/ true);
+    yield* postOrderMatches.values();
+  }
+
+  search(node: NodeT, jumpBackwards: boolean, match: (node: NodeT, isPostOrder: boolean) => SearchResultT[]): number {
+    const currentMatch = this.currentMatch();
+    this.reset();
+    // eslint-disable-next-line @typescript-eslint/naming-convention,@typescript-eslint/no-unused-vars
+    for (const _ of this.#innerSearch(node, currentMatch, jumpBackwards, match)) {
+      // run the generator
+    }
+    this.#currentMatchIndex = Platform.NumberUtilities.mod(this.#currentMatchIndex, this.#matches.length);
+    return this.#matches.length;
+  }
+}
+
+class ActiveHighlights {
+  #activeRanges: Range[] = [];
+  #highlights: TextUtils.TextRange.SourceRange[] = [];
+  #selectedSearchResult: TextUtils.TextRange.SourceRange|undefined = undefined;
+
+  apply(node: Node): void {
+    Highlighting.HighlightManager.HighlightManager.instance().removeHighlights(this.#activeRanges);
+    this.#activeRanges =
+        Highlighting.HighlightManager.HighlightManager.instance().highlightOrderedTextRanges(node, this.#highlights);
+    if (this.#selectedSearchResult) {
+      this.#activeRanges.push(...Highlighting.HighlightManager.HighlightManager.instance().highlightOrderedTextRanges(
+          node, [this.#selectedSearchResult], /* isSelected=*/ true));
+    }
+  }
+
+  set(element: Node, highlights: TextUtils.TextRange.SourceRange[],
+      selectedSearchResult: TextUtils.TextRange.SourceRange|undefined): void {
+    this.#highlights = highlights;
+    this.#selectedSearchResult = selectedSearchResult;
+    this.apply(element);
+  }
+}
+
 class TreeViewTreeElement extends TreeElement {
+  #activeHighlights = new ActiveHighlights();
+  #clonedAttributes = new Set<string>();
+
   static #elementToTreeElement = new WeakMap<Node, TreeViewTreeElement>();
   readonly configElement: HTMLLIElement;
 
   constructor(treeOutline: TreeOutline, configElement: HTMLLIElement) {
-    super();
+    super(undefined, undefined, configElement.getAttribute('jslog-context') ?? undefined);
     this.configElement = configElement;
     TreeViewTreeElement.#elementToTreeElement.set(configElement, this);
     this.refresh();
   }
 
+  highlight(
+      highlights: TextUtils.TextRange.SourceRange[],
+      selectedSearchResult: TextUtils.TextRange.SourceRange|undefined): void {
+    this.#activeHighlights.set(this.titleElement, highlights, selectedSearchResult);
+  }
+
   refresh(): void {
     this.titleElement.textContent = '';
-    if (hasBooleanAttribute(this.configElement, 'selected')) {
-      this.revealAndSelect(true);
+    this.#clonedAttributes.forEach(attr => this.listItemElement.attributes.removeNamedItem(attr));
+    this.#clonedAttributes.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)) {
+        this.listItemElement.setAttribute(attribute.name, attribute.value);
+        this.#clonedAttributes.add(attribute.name);
+      }
     }
 
     for (const child of this.configElement.childNodes) {
       if (child instanceof HTMLUListElement && child.role === 'group') {
-        if (hasBooleanAttribute(child, 'hidden')) {
-          this.collapse();
-        } else {
-          this.expand();
-        }
         continue;
       }
-      this.titleElement.appendChild(child.cloneNode(true));
+      this.titleElement.appendChild(HTMLElementWithLightDOMTemplate.cloneNode(child));
     }
+
+    this.#activeHighlights.apply(this.titleElement);
   }
 
   static get(configElement: Node|undefined): TreeViewTreeElement|undefined {
@@ -1453,7 +1606,7 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
   return nodeList.values()
       .flatMap(node => {
         if (node instanceof HTMLLIElement && node.role === 'treeitem') {
-          return [node];
+          return [node, ...node.querySelectorAll<HTMLLIElement>('ul[role="group"] li[role="treeitem"]')];
         }
         if (node instanceof HTMLElement) {
           return node.querySelectorAll<HTMLLIElement>('li[role="treeitem"]');
@@ -1464,7 +1617,11 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
 }
 
 /**
- * A tree element that can be used as progressive enhancement over a <ul> element.
+ * A tree element that can be used as progressive enhancement over a <ul> element. A `template` IDL attribute allows
+ * additionally to insert the <ul> into a <template>, avoiding rendering anything into light DOM. The <ul> itself will
+ * be cloned into shadow DOM and rendered there.
+ *
+ * ## Usage ##
  *
  * It can be used as
  * ```
@@ -1475,7 +1632,7 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
  *          Tree Node Text
  *          <ul role="group">
  *            Node with subtree
- *            <li role="treeitem">
+ *            <li role="treeitem" jslog-context="context">
  *              <ul role="group" hidden>
  *                <li role="treeitem">Tree Node Text in collapsed subtree</li>
  *                <li role="treeitem">Tree Node Text in collapsed subtree</li>
@@ -1489,13 +1646,31 @@ function getTreeNodes(nodeList: NodeList|Node[]): HTMLLIElement[] {
  * ></devtools-tree>
  *
  * ```
- * where a <li role="treeitem"> element defines a tree node and its contents. The `selected` attribute on an <li>
- * declares that this tree node should be selected on render. If a tree node contains a <ul role="group">, that defines
- * a subtree under that tree node. The `hidden` attribute on the <ul> defines whether that subtree should render as
- * collapsed initially.
+ * where a <li role="treeitem"> element defines a tree node and its contents (the <li> is the `config element` for this
+ * tree node). If a tree node contains a <ul role="group">, that defines a subtree under that tree node. The `hidden`
+ * attribute on the <ul> defines whether that subtree should render as collapsed. Note that node expanding/collapsing do
+ * not reflect this state back to the attribute on the config element, those state changes are rather sent out as
+ * `expand` events.
  *
  * Under the hood this uses TreeOutline.
  *
+ * ## Config Element Attributes ##
+ *
+ * - `selected`: Whether the tree node should be rendered as selected.
+ * - `jslog-context`: The jslog context for the tree element.
+ * - `aria-*`: All aria attributes defined on the config element are cloned over.
+ * - `hidden`: On the <ul>, declares whether the subtree should be rendererd as expanded or collapsed.
+ *
+ * ## Event Handling ##
+ *
+ * Since config elements are cloned into the shadow DOM, it's not possible to directly attach event listeners to the
+ * children of config elements. Instead, the `HTMLElementWithLightDOMTemplate.on` directive should be used as a wrapper:
+ * ```
+ * <li role="treeitem">
+ *   <button @click=${on(clickHandler)}>click me</button>
+ * </li>
+ * ```
+ *
  * @property template Define the tree contents
  * @event selected A node was selected
  * @event expand A subtree was expanded or collapsed
@@ -1508,20 +1683,23 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
 
   constructor() {
     super();
-    this.#treeOutline.addEventListener(
-        Events.ElementSelected,
-        event =>
-            this.dispatchEvent(new TreeViewElement.SelectEvent((event.data as TreeViewTreeElement).configElement)));
-    this.#treeOutline.addEventListener(
-        Events.ElementExpanded,
-        event => (event.data as TreeViewTreeElement)
-                     .configElement.dispatchEvent(new TreeViewElement.ExpandEvent(
-                         {expanded: true, target: (event.data as TreeViewTreeElement).configElement})));
-    this.#treeOutline.addEventListener(
-        Events.ElementCollapsed,
-        event => (event.data as TreeViewTreeElement)
-                     .configElement.dispatchEvent(new TreeViewElement.ExpandEvent(
-                         {expanded: false, target: (event.data as TreeViewTreeElement).configElement})));
+    this.#treeOutline.addEventListener(Events.ElementSelected, event => {
+      if (event.data instanceof TreeViewTreeElement) {
+        this.dispatchEvent(new TreeViewElement.SelectEvent(event.data.configElement));
+      }
+    });
+    this.#treeOutline.addEventListener(Events.ElementExpanded, event => {
+      if (event.data instanceof TreeViewTreeElement) {
+        this.dispatchEvent(new TreeViewElement.ExpandEvent(
+            {expanded: true, target: (event.data as TreeViewTreeElement).configElement}));
+      }
+    });
+    this.#treeOutline.addEventListener(Events.ElementCollapsed, event => {
+      if (event.data instanceof TreeViewTreeElement) {
+        this.dispatchEvent(new TreeViewElement.ExpandEvent(
+            {expanded: false, target: (event.data as TreeViewTreeElement).configElement}));
+      }
+    });
     this.addNodes(getTreeNodes([this]));
   }
 
@@ -1545,12 +1723,29 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     return treeElement ? {expanded, treeElement} : null;
   }
 
-  protected override updateNodes(node: Node, _attributeName: string|null): void {
+  protected override updateNode(node: Node, attributeName: string|null): void {
     while (node?.parentNode && !(node instanceof HTMLElement)) {
       node = node.parentNode;
     }
     const treeNode = node instanceof HTMLElement ? node.closest('li[role="treeitem"]') : null;
-    treeNode && TreeViewTreeElement.get(treeNode)?.refresh();
+    if (!treeNode) {
+      return;
+    }
+    const treeElement = TreeViewTreeElement.get(treeNode);
+    if (!treeElement) {
+      return;
+    }
+    treeElement.refresh();
+    if (node === treeNode && attributeName === 'selected' && hasBooleanAttribute(treeNode, 'selected')) {
+      treeElement.revealAndSelect(true);
+    }
+    if (attributeName === 'hidden' && node instanceof HTMLUListElement && node.role === 'group') {
+      if (hasBooleanAttribute(node, 'hidden')) {
+        treeElement.collapse();
+      } else {
+        treeElement.expand();
+      }
+    }
   }
 
   protected override addNodes(nodes: NodeList|Node[]): void {

package/front_end/ui/legacy/UIUtils.ts

@@ -41,10 +41,11 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../components/buttons/buttons.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
-import {Directives, type LitTemplate, render} from '../lit/lit.js';
+import * as Lit from '../lit/lit.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ActionRegistration from './ActionRegistration.js';
@@ -53,7 +54,6 @@ import * as ARIAUtils from './ARIAUtils.js';
 import checkboxTextLabelStyles from './checkboxTextLabel.css.js';
 import confirmDialogStyles from './confirmDialog.css.js';
 import {Dialog} from './Dialog.js';
-import {Size} from './Geometry.js';
 import {GlassPane, PointerEventsBehavior, SizeBehavior} from './GlassPane.js';
 import inlineButtonStyles from './inlineButton.css.js';
 import inspectorCommonStyles from './inspectorCommon.css.js';
@@ -61,7 +61,6 @@ import {KeyboardShortcut, Keys} from './KeyboardShortcut.js';
 import smallBubbleStyles from './smallBubble.css.js';
 import type {ToolbarButton} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
-import type {TreeOutline} from './Treeoutline.js';
 import {Widget} from './Widget.js';
 import type {XWidget} from './XWidget.js';
 
@@ -73,6 +72,7 @@ declare global {
     'dt-small-bubble': DevToolsSmallBubble;
   }
 }
+const {Directives, render} = Lit;
 
 const UIStrings = {
   /**
@@ -887,7 +887,7 @@ export function revertDomChanges(domChanges: HighlightChange[]): void {
   }
 }
 
-export function measurePreferredSize(element: Element, containerElement?: Element|null): Size {
+export function measurePreferredSize(element: Element, containerElement?: Element|null): Geometry.Size {
   const oldParent = element.parentElement;
   const oldNextSibling = element.nextSibling;
   containerElement = containerElement || element.ownerDocument.body;
@@ -901,7 +901,7 @@ export function measurePreferredSize(element: Element, containerElement?: Elemen
   } else {
     element.remove();
   }
-  return new Size(result.width, result.height);
+  return new Geometry.Size(result.width, result.height);
 }
 
 class InvokeOnceHandlers {
@@ -1774,16 +1774,15 @@ export function createInlineButton(toolbarButton: ToolbarButton): Element {
   return element;
 }
 
+export interface RenderedObject {
+  element: HTMLElement;
+  forceSelect(): void;
+}
+
 export abstract class Renderer {
-  abstract render(object: Object, options?: Options): Promise<{
-    node: Node,
-    tree: TreeOutline|null,
-  }|null>;
-
-  static async render(object: Object, options?: Options): Promise<{
-    node: Node,
-    tree: TreeOutline|null,
-  }|null> {
+  abstract render(object: Object, options?: Options): Promise<RenderedObject|null>;
+
+  static async render(object: Object, options?: Options): Promise<RenderedObject|null> {
     if (!object) {
       throw new Error('Can\'t render ' + object);
     }
@@ -1812,6 +1811,10 @@ export function formatTimestamp(timestamp: number, full: boolean): string {
 export interface Options {
   title?: string|Element;
   editable?: boolean;
+  /**
+   * Should the resulting object be expanded.
+   */
+  expand?: boolean;
 }
 
 export interface HighlightChange {
@@ -2185,7 +2188,44 @@ export function bindToAction(actionName: string): ReturnType<typeof Directives.r
   });
 }
 
+class InterceptBindingDirective extends Lit.Directive.Directive {
+  static readonly #interceptedBindings = new WeakMap<Element, Map<string, (e: Event) => void>>();
+
+  constructor(part: Lit.Directive.PartInfo) {
+    super(part);
+    if (part.type !== Lit.Directive.PartType.EVENT) {
+      throw new Error('This directive is for event bindings only');
+    }
+  }
+
+  override update(part: Lit.Directive.EventPart, [listener]: [(e: Event) => void]): undefined {
+    let eventListeners = InterceptBindingDirective.#interceptedBindings.get(part.element);
+    if (!eventListeners) {
+      eventListeners = new Map();
+      InterceptBindingDirective.#interceptedBindings.set(part.element, eventListeners);
+    }
+    eventListeners.set(part.name, listener);
+
+    return this.render(listener);
+  }
+
+  render(_listener: (e: Event) => void): undefined {
+    return undefined;
+  }
+
+  static attachEventListeners(templateElement: Element, renderedElement: Element): void {
+    const eventListeners = InterceptBindingDirective.#interceptedBindings.get(templateElement);
+    if (!eventListeners) {
+      return;
+    }
+    for (const [name, listener] of eventListeners) {
+      renderedElement.addEventListener(name, listener);
+    }
+  }
+}
+
 export class HTMLElementWithLightDOMTemplate extends HTMLElement {
+  static readonly on = Lit.Directive.directive(InterceptBindingDirective);
   readonly #mutationObserver = new MutationObserver(this.#onChange.bind(this));
   #contentTemplate: HTMLTemplateElement|null = null;
 
@@ -2194,7 +2234,18 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     this.#mutationObserver.observe(this, {childList: true, attributes: true, subtree: true, characterData: true});
   }
 
-  set template(template: LitTemplate) {
+  static cloneNode(node: Node): Node {
+    const clone = node.cloneNode(false);
+    for (const child of node.childNodes) {
+      clone.appendChild(HTMLElementWithLightDOMTemplate.cloneNode(child));
+    }
+    if (node instanceof Element && clone instanceof Element) {
+      InterceptBindingDirective.attachEventListeners(node, clone);
+    }
+    return clone;
+  }
+
+  set template(template: Lit.LitTemplate) {
     if (!this.#contentTemplate) {
       this.removeChildren();
       this.#contentTemplate = this.createChild('template');
@@ -2207,14 +2258,18 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
   }
 
   #onChange(mutationList: MutationRecord[]): void {
+    this.onChange(mutationList);
     for (const mutation of mutationList) {
       this.removeNodes(mutation.removedNodes);
       this.addNodes(mutation.addedNodes);
-      this.updateNodes(mutation.target, mutation.attributeName);
+      this.updateNode(mutation.target, mutation.attributeName);
     }
   }
 
-  protected updateNodes(_node: Node, _attributeName: string|null): void {
+  protected onChange(_mutationList: MutationRecord[]): void {
+  }
+
+  protected updateNode(_node: Node, _attributeName: string|null): void {
   }
 
   protected addNodes(_nodes: NodeList|Node[]): void {

package/front_end/ui/legacy/Widget.ts

@@ -32,9 +32,9 @@
 import '../../core/dom_extension/dom_extension.js';
 
 import * as Platform from '../../core/platform/platform.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as Lit from '../../ui/lit/lit.js';
 
-import {Constraints, Size} from './Geometry.js';
 import {createShadowRootWithCoreStyles} from './UIUtils.js';
 import {XWidget} from './XWidget.js';
 
@@ -266,8 +266,8 @@ export class Widget {
   #invalidationsSuspended = 0;
   #parentWidget: Widget|null = null;
   #defaultFocusedElement?: Element|null;
-  #cachedConstraints?: Constraints;
-  #constraints?: Constraints;
+  #cachedConstraints?: Geometry.Constraints;
+  #constraints?: Geometry.Constraints;
   #invalidationsRequested?: boolean;
   #externallyManaged?: boolean;
   #updateComplete = UPDATE_COMPLETE;
@@ -770,11 +770,11 @@ export class Widget {
     return this.element.hasFocus();
   }
 
-  calculateConstraints(): Constraints {
-    return new Constraints();
+  calculateConstraints(): Geometry.Constraints {
+    return new Geometry.Constraints();
   }
 
-  constraints(): Constraints {
+  constraints(): Geometry.Constraints {
     if (typeof this.#constraints !== 'undefined') {
       return this.#constraints;
     }
@@ -785,16 +785,17 @@ export class Widget {
   }
 
   setMinimumAndPreferredSizes(width: number, height: number, preferredWidth: number, preferredHeight: number): void {
-    this.#constraints = new Constraints(new Size(width, height), new Size(preferredWidth, preferredHeight));
+    this.#constraints =
+        new Geometry.Constraints(new Geometry.Size(width, height), new Geometry.Size(preferredWidth, preferredHeight));
     this.invalidateConstraints();
   }
 
   setMinimumSize(width: number, height: number): void {
-    this.minimumSize = new Size(width, height);
+    this.minimumSize = new Geometry.Size(width, height);
   }
 
-  set minimumSize(size: Size) {
-    this.#constraints = new Constraints(size);
+  set minimumSize(size: Geometry.Size) {
+    this.#constraints = new Geometry.Constraints(size);
     this.invalidateConstraints();
   }
 
@@ -949,8 +950,8 @@ export class VBox extends Widget {
     this.contentElement.classList.add('vbox');
   }
 
-  override calculateConstraints(): Constraints {
-    let constraints: Constraints = new Constraints();
+  override calculateConstraints(): Geometry.Constraints {
+    let constraints: Geometry.Constraints = new Geometry.Constraints();
 
     function updateForChild(this: Widget): void {
       const child = this.constraints();
@@ -988,8 +989,8 @@ export class HBox extends Widget {
     this.contentElement.classList.add('hbox');
   }
 
-  override calculateConstraints(): Constraints {
-    let constraints: Constraints = new Constraints();
+  override calculateConstraints(): Geometry.Constraints {
+    let constraints: Geometry.Constraints = new Geometry.Constraints();
 
     function updateForChild(this: Widget): void {
       const child = this.constraints();