chrome-devtools-frontend 1.0.1698733 → 1.0.1700561

package/front_end/third_party/lit/lit.ts

@@ -9,4 +9,7 @@ import * as Directive from './lib/directive.js';
 import * as Decorators from './lib/decorators.js';
 import * as StaticHtml from './lib/static-html.js';
 
+// Required for lit-analyzer
+export type {DirectiveResult} from './lib/directive.js';
+
 export {AsyncDirective, Directives, Directive, Decorators, StaticHtml};

package/front_end/third_party/lit/package.json

@@ -6,6 +6,9 @@
     "lit": "3.3.3"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "16.0.3",
+    "@rollup/plugin-terser": "1.0.0",
+    "rollup": "4.62.4",
     "rollup-plugin-dts": "6.4.1"
   }
 }

package/front_end/third_party/lit/rebuild.sh

@@ -1,6 +1,7 @@
+set -e
 npm install
-../../../node_modules/.bin/tsc --ignoreConfig -d -t esnext -m esnext --moduleResolution bundler src/*
-../../../node_modules/rollup/dist/bin/rollup -c
+vpython3 ../../../third_party/typescript/typescript.py --ignoreConfig --skipLibCheck -d -t esnext -m esnext --moduleResolution bundler src/*
+node_modules/rollup/dist/bin/rollup -c
 rm -rf node_modules src/*.js src/*.d.ts
 # Because there's a bug in clang causing it to reformat import lists even where formatting is disabled, run it right away
 git cl format --js

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -29,6 +29,12 @@ const DISALLOWED_COMMENT_TARGETS = new Set<number>([
   VisualLogging.VisualElements.Toolbar,
 ]);
 
+/**
+ * The comment thread UI itself is never a valid comment target: anything inside it (including the
+ * DOM node link in its header) must stay inert while comment mode is on.
+ */
+export const COMMENT_THREAD_UI_SELECTOR = '.comment-thread-widget';
+
 /**
  * Finds the closest ancestor (or the element itself) matching a CSS selector,
  * traversing across Shadow DOM boundaries (shadow root boundaries to shadow hosts).
@@ -268,7 +274,7 @@ function resolveCodeMirrorLineInfo(element: Element): CodeMirrorLineInfo|null {
  * Resolves an arbitrary clicked or targeted DOM element to its appropriate semantic comment anchor element.
  *
  * Traversal hierarchy:
- * 1. Checks if the element is part of a tab title (returns null if so).
+ * 1. Checks if the element is part of a tab title or of the comment thread UI (returns null if so).
  * 2. Escalates CodeMirror line/gutter elements to .cm-editor (only if the clicked line is non-empty).
  * 3. Checks for domain IDs (`data-network-request-id` or `data-backend-node-id`) across shadow boundaries,
  *    returning the owning domain element.
@@ -281,7 +287,7 @@ function resolveCodeMirrorLineInfo(element: Element): CodeMirrorLineInfo|null {
  */
 export function resolveCommentAnchorElement(
     element: Element, options?: {clientX: number, clientY: number, forHover?: boolean}): Element|null {
-  if (isTabTitle(element)) {
+  if (isTabTitle(element) || closestAcrossShadow(element, COMMENT_THREAD_UI_SELECTOR)) {
     return null;
   }
   const customResolver = getCustomAnchorResolverForElement(element);

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -7,6 +7,7 @@ import * as CommentManager from '../../models/comment_manager/comment_manager.js
 
 import {
   closestAcrossShadow,
+  COMMENT_THREAD_UI_SELECTOR,
   type CommentAnchorSignature,
   type CommentThread,
   computeVisibleRect,
@@ -238,7 +239,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
   }
 
   handleElementClick(element: Element, options?: {clientX: number, clientY: number}): boolean {
-    if (!this.isCommentMode() || closestAcrossShadow(element, '.comment-thread-widget')) {
+    if (!this.isCommentMode() || closestAcrossShadow(element, COMMENT_THREAD_UI_SELECTOR)) {
       return false;
     }
     this.clearDraftThreads();

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

@@ -48,6 +48,7 @@ interface ButtonState {
   variant: Variant;
   size?: Size;
   reducedFocusRing?: boolean;
+  buttonTitle?: string;
   disabled: boolean;
   toggled?: boolean;
   toggleOnClick?: boolean;
@@ -80,7 +81,14 @@ interface CommonButtonData {
   spinner?: boolean;
   type?: ButtonType;
   value?: string;
+  /**
+   * Sets title on the host and, unless buttonTitle is provided, the internal <button> element.
+   */
   title?: string;
+  /**
+   * Sets title on the internal <button> element, taking precedence over title.
+   */
+  buttonTitle?: string;
   jslogContext?: string;
   longClickable?: boolean;
   inverseColorTheme?: boolean;
@@ -166,6 +174,7 @@ export class Button extends HTMLElement {
     if (data.title) {
       this.title = data.title;
     }
+    this.#props.buttonTitle = data.buttonTitle;
 
     if (data.accessibleLabel) {
       this.accessibleLabel = data.accessibleLabel;
@@ -245,6 +254,15 @@ export class Button extends HTMLElement {
     this.#render();
   }
 
+  get buttonTitle(): string|undefined {
+    return this.#props.buttonTitle;
+  }
+
+  set buttonTitle(buttonTitle: string|undefined) {
+    this.#props.buttonTitle = buttonTitle;
+    this.#render();
+  }
+
   get disabled(): boolean {
     return this.#props.disabled;
   }
@@ -396,7 +414,7 @@ export class Button extends HTMLElement {
     Lit.render(
       html`
         <style>${buttonStyles}</style>
-        <button title=${ifDefined(this.title || undefined)}
+        <button title=${ifDefined(this.buttonTitle || this.title || undefined)}
                 ?disabled=${this.#props.disabled}
                 class=${classMap(classes)}
                 aria-pressed=${ifDefined(this.#props.toggled)}

package/front_end/ui/legacy/ContextMenu.ts

@@ -989,6 +989,7 @@ export class ContextMenu extends SubMenu {
  * @property keepOpen -Reflects the `"keep-open"` attribute.
  * @property iconName - Reflects the `"icon-name"` attribute.
  * @property disabled - Reflects the `"disabled"` attribute.
+ * @property accessibleLabel - Sets the accessible name and tooltip on the internal button.
  * @attribute soft-menu - Whether to use the soft menu implementation.
  * @attribute keep-open - Whether the menu should stay open after an item is clicked.
  * @attribute icon-name - Name of the icon to display on the button.
@@ -1001,6 +1002,7 @@ export class MenuButton extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #triggerTimeoutId?: number;
   #populateMenuCall?: (arg0: ContextMenu) => void;
+  #accessibleLabel?: string;
 
   /**
    * Sets the callback function used to populate the context menu when the button is clicked.
@@ -1010,6 +1012,17 @@ export class MenuButton extends HTMLElement {
     this.#populateMenuCall = populateCall;
   }
 
+  set accessibleLabel(accessibleLabel: string|undefined) {
+    this.#accessibleLabel = accessibleLabel;
+    if (this.iconName) {
+      this.#render();
+    }
+  }
+
+  get accessibleLabel(): string|undefined {
+    return this.#accessibleLabel;
+  }
+
   /**
    * Reflects the `soft-menu` attribute. If true, uses the `SoftContextMenu` implementation.
    * @default false
@@ -1120,13 +1133,15 @@ export class MenuButton extends HTMLElement {
     if (!this.iconName) {
       throw new Error('<devtools-menu-button> expects an icon.');
     }
+    const accessibleLabel = this.accessibleLabel ?? this.title;
 
     // clang-format off
     render(html`
         <devtools-button .disabled=${this.disabled}
                          .iconName=${this.iconName}
                          .variant=${Buttons.Button.Variant.ICON}
-                         .title=${this.title}
+                         .accessibleLabel=${accessibleLabel}
+                         .buttonTitle=${accessibleLabel}
                          aria-haspopup='menu'
                          @click=${this.#triggerContextMenu}>
         </devtools-button>`,

package/front_end/ui/legacy/InspectorView.ts

@@ -853,15 +853,16 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
   }
 
-  renderStatusBar(): void {
+  renderStatusBar(visible = true): void {
     if (!this.#statusBarContainer) {
       this.#statusBarContainer = document.createElement('div');
       this.#statusBarContainer.style.display = 'contents';
       this.element.appendChild(this.#statusBarContainer);
     }
     // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
-    Lit.render(html`<devtools-widget class="flex-none" ${widget(StatusBarWidget)}></devtools-widget>`,
-               this.#statusBarContainer);
+    Lit.render(
+        visible ? html`<devtools-widget class="flex-none" ${widget(StatusBarWidget)}></devtools-widget>` : Lit.nothing,
+        this.#statusBarContainer);
   }
 
   private createInfoBarDiv(): void {

package/front_end/ui/legacy/PlusButton.ts

@@ -233,19 +233,18 @@ interface PlusButtonViewInput {
  */
 export const PLUS_BUTTON_VIEW =
     (input: PlusButtonViewInput, output: {button?: MenuButton}, target: HTMLElement): void => {
-      render(
-          html`
+      render(html`
         <devtools-menu-button
             ${Directives.ref(el => {
-            output.button = el as MenuButton | undefined;
-          })}
+               output.button = el as MenuButton | undefined;
+             })}
             slot="trailing-button"
             .iconName=${'plus'}
-            .title=${input.title}
+            .accessibleLabel=${input.title}
             .jslogContext=${input.jslogContext}
             .populateMenuCall=${input.populateMenuCall}>
         </devtools-menu-button>`,
-          target);
+             target);
     };
 
 /**

package/front_end/ui/legacy/TabbedPane.ts

@@ -77,6 +77,8 @@ export interface TabInfo {
   jslogContext?: string;
   enabled?: boolean;
   selected?: boolean;
+  icon?: Element|null;
+  suffix?: Element|null;
 }
 
 const TabbedPaneBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof VBox> = Common.ObjectWrapper.eventMixin(
@@ -120,6 +122,8 @@ export class TabbedPane extends TabbedPaneBase {
     this.registerRequiredCSS(tabbedPaneStyles);
     this.element.classList.add('tabbed-pane');
     this.contentElement.classList.add('tabbed-pane-shadow');
+    this.element.classList.add('flex-auto', 'vbox');
+    this.contentElement.classList.add('flex-auto', 'vbox');
     this.contentElement.tabIndex = -1;
     this.setDefaultFocusedElement(this.contentElement);
     this.#headerElement = this.contentElement.createChild('div', 'tabbed-pane-header');
@@ -565,47 +569,6 @@ export class TabbedPane extends TabbedPaneBase {
                           }));
   }
 
-  set tabs(tabs: TabInfo[]) {
-    const newIds = new Set(tabs.map(tab => tab.id));
-    for (const id of this.tabsById.keys()) {
-      if (!newIds.has(id)) {
-        this.#closeTab(id);
-      }
-    }
-    let index = 0;
-    for (const tab of tabs) {
-      const existingTab = this.tabsById.get(tab.id);
-      if (existingTab) {
-        this.changeTabView(tab.id, tab.view);
-        this.changeTabTitle(tab.id, tab.title, tab.tabTooltip);
-        if (tab.jslogContext !== undefined) {
-          existingTab.jslogContext = tab.jslogContext;
-        }
-        if (tab.isCloseable !== undefined) {
-          existingTab.closeable = tab.isCloseable;
-        }
-        if (tab.previewFeature !== undefined) {
-          existingTab.previewFeature = tab.previewFeature;
-        }
-        const currentIndex = this.#tabs.indexOf(existingTab);
-        if (currentIndex !== index) {
-          this.insertBefore(existingTab, index);
-        }
-      } else {
-        this.appendTab(
-            tab.id, tab.title, tab.view, tab.tabTooltip, /* userGesture=*/ false, tab.isCloseable, tab.previewFeature,
-            index, tab.jslogContext);
-      }
-      if (tab.enabled !== undefined) {
-        this.setTabEnabled(tab.id, tab.enabled);
-      }
-      if (tab.selected) {
-        this.selectTab(tab.id);
-      }
-      ++index;
-    }
-  }
-
   override onResize(): void {
     if (this.currentDevicePixelRatio !== window.devicePixelRatio) {
       // Force recalculation of all tab widths on a DPI change
@@ -1694,42 +1657,72 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
     this.#automaticReorder = automatic;
     this.getWidget()?.setAllowTabReorder(this.#allowTabReorder, this.#automaticReorder);
   }
+
+  get tabs(): TabInfo[] {
+    const widget = Widget.getOrCreateWidget(this) as TabbedPane;
+    if (widget) {
+      this.#updateTabs(widget);
+      return widget.tabs;
+    }
+    return [];
+  }
+
+  #delegate?: TabbedPaneTabDelegate;
+  set tabDelegate(delegate: TabbedPaneTabDelegate) {
+    this.#delegate = delegate;
+    this.getWidget()?.setTabDelegate(delegate);
+  }
+
+  #placeholderElement?: Element;
+  #managedTabIds = new Set<string>();
+  set placeholder(element: Element) {
+    this.#placeholderElement = element;
+    this.getWidget()?.setPlaceholderElement(element);
+  }
+
   readonly #tabObserver = new MutationObserver(() => this.#updateTabs());
 
   constructor() {
     super();
 
-    registerWidgetConfig(this, widgetConfig(element => {
-                           const widget = new TabbedPane(element as TabbedPaneElement);
-                           widget.setCloseableTabs(this.#closeableTabs);
-                           widget.setAllowTabReorder(this.#allowTabReorder, this.#automaticReorder);
-                           const slot = widget.contentElement.querySelector('slot:not([name])');
-                           if (slot) {
-                             slot.addEventListener('slotchange', () => this.#syncTabs());
-                           }
-                           widget.addEventListener(Events.TabSelected, () => {
-                             const slot =
-                                 widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
-                             const nodes = slot ? slot.assignedElements() : [];
-                             for (const child of nodes) {
-                               if (child.id === widget.selectedTabId) {
-                                 child.setAttribute('selected', '');
-                               } else {
-                                 child.removeAttribute('selected');
-                               }
-                             }
-                             this.dispatchEvent(new CustomEvent('select', {detail: {tabId: widget.selectedTabId}}));
-                           });
-                           widget.addEventListener(Events.TabClosed, event => {
-                             this.dispatchEvent(new CustomEvent('close', {detail: {tabId: event.data.tabId}}));
-                           });
-                           widget.addEventListener(Events.TabOrderChanged, event => {
-                             this.dispatchEvent(new CustomEvent(
-                                 'taborderchanged', {detail: {tabId: event.data.tabId, tabIds: widget.tabIds()}}));
-                           });
-                           this.#syncTabs(widget);
-                           return widget;
-                         }));
+    registerWidgetConfig(
+        this, widgetConfig(element => {
+          const widget = new TabbedPane(element as TabbedPaneElement);
+          widget.setCloseableTabs(this.#closeableTabs);
+          widget.setAllowTabReorder(this.#allowTabReorder, this.#automaticReorder);
+          if (this.#delegate) {
+            widget.setTabDelegate(this.#delegate);
+          }
+          const slot = widget.contentElement.querySelector('slot:not([name])');
+          if (slot) {
+            slot.addEventListener('slotchange', () => this.#syncTabs());
+          }
+          widget.addEventListener(Events.TabSelected, event => {
+            const nodes = this.#getTabNodes(widget);
+            for (const child of nodes) {
+              if (child.id === widget.selectedTabId) {
+                child.setAttribute('selected', '');
+              } else {
+                child.removeAttribute('selected');
+              }
+            }
+            this.dispatchEvent(new CustomEvent(
+                'select', {detail: {tabId: widget.selectedTabId, isUserGesture: event.data?.isUserGesture}}));
+          });
+          widget.addEventListener(Events.TabClosed, event => {
+            this.dispatchEvent(
+                new CustomEvent('close', {detail: {tabId: event.data.tabId, isUserGesture: event.data.isUserGesture}}));
+          });
+          widget.addEventListener(Events.TabOrderChanged, event => {
+            this.dispatchEvent(
+                new CustomEvent('taborderchanged', {detail: {tabId: event.data.tabId, tabIds: widget.tabIds()}}));
+          });
+          if (this.#placeholderElement) {
+            widget.setPlaceholderElement(this.#placeholderElement);
+          }
+          this.#syncTabs(widget);
+          return widget;
+        }));
   }
 
   override disconnectedCallback(): void {
@@ -1747,8 +1740,7 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
 
   #updateObserver(widget: TabbedPane): void {
     this.#tabObserver.disconnect();
-    const slot = widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
-    const nodes = slot ? slot.assignedElements() : [];
+    const nodes = this.#getTabNodes(widget);
     for (const child of nodes) {
       this.#tabObserver.observe(child, {
         attributes: true,
@@ -1757,13 +1749,18 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
     }
   }
 
+  #getTabNodes(widget: TabbedPane): Element[] {
+    return Array.from(widget.element.children)
+        .filter(c => c.id !== '' && !c.hasAttribute('slot') && !c.classList.contains('tabbed-pane-header') &&
+                    !c.classList.contains('tabbed-pane-content'));
+  }
+
   #updateTabs(widget = this.getWidget()): void {
     if (!widget) {
       return;
     }
     const tabs: TabInfo[] = [];
-    const slot = widget.contentElement.querySelector('slot:not([name])') as HTMLSlotElement | null;
-    const nodes = slot ? slot.assignedElements() : [];
+    const nodes = this.#getTabNodes(widget);
     for (const child of nodes) {
       const id = child.id;
       const title = child.getAttribute('title') || '';
@@ -1772,13 +1769,12 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
       const enabled = !child.hasAttribute('disabled');
       const isCloseable =
           child.hasAttribute('closeable') ? true : (child.hasAttribute('uncloseable') ? false : undefined);
+      const icon = child.querySelector('[slot="icon"]') ?? undefined;
+      const suffix = child.querySelector('[slot="suffix"]') ?? undefined;
       const view = Widget.getOrCreateWidget(child as HTMLElement);
       view.setHideOnDetach();
       if (widget.selectedTabId !== id) {
-        view.hideWidget();
         child.classList.add('hidden');
-      } else {
-        view.showWidget();
       }
       tabs.push({
         id,
@@ -1788,10 +1784,55 @@ export class TabbedPaneElement extends WidgetElement<TabbedPane> {
         selected,
         enabled,
         isCloseable,
+        icon,
+        suffix,
       });
     }
 
-    widget.tabs = tabs;
+    const newIds = new Set(tabs.map(tab => tab.id));
+    for (const id of this.#managedTabIds) {
+      if (!newIds.has(id)) {
+        widget.closeTab(id);
+      }
+    }
+    this.#managedTabIds = newIds;
+    let index = 0;
+    for (const tab of tabs) {
+      const existingTab = widget.tabsById.get(tab.id);
+      if (existingTab) {
+        widget.changeTabView(tab.id, tab.view);
+        widget.changeTabTitle(tab.id, tab.title, tab.tabTooltip);
+        if (tab.jslogContext !== undefined) {
+          existingTab.jslogContext = tab.jslogContext;
+        }
+        if (tab.isCloseable !== undefined) {
+          existingTab.closeable = tab.isCloseable;
+        }
+        if (tab.previewFeature !== undefined) {
+          existingTab.previewFeature = tab.previewFeature;
+        }
+        const currentIndex = widget.tabIndex(tab.id);
+        if (currentIndex !== index) {
+          widget.insertBefore(existingTab, index);
+        }
+      } else {
+        widget.appendTab(tab.id, tab.title, tab.view, tab.tabTooltip, /* userGesture=*/ false, tab.isCloseable,
+                         tab.previewFeature, index, tab.jslogContext);
+      }
+      if (tab.icon !== undefined) {
+        widget.setTabIcon(tab.id, tab.icon as unknown as Icon);
+      }
+      if (tab.suffix !== undefined) {
+        widget.setSuffixElement(tab.id, tab.suffix as unknown as HTMLElement);
+      }
+      if (tab.enabled !== undefined) {
+        widget.setTabEnabled(tab.id, tab.enabled);
+      }
+      if (tab.selected) {
+        widget.selectTab(tab.id);
+      }
+      ++index;
+    }
   }
 }
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -60,6 +60,7 @@ import {
   HTMLElementWithLightDOMTemplate,
   isEditing,
 } from './UIUtils.js';
+import {Widget} from './Widget.js';
 
 const UIStrings = {
   /**
@@ -1304,9 +1305,9 @@ export class TreeElement {
     }
   }
 
-  revealAndSelect(omitFocus?: boolean): void {
+  revealAndSelect(omitFocus?: boolean, selectedByUser?: boolean): void {
     this.reveal(true);
-    this.select(omitFocus);
+    this.select(omitFocus, selectedByUser ?? false);
   }
 
   deselect(): void {
@@ -1653,11 +1654,18 @@ class TreeViewTreeElement extends TreeElement {
     }
     this.#refreshScheduled = true;
     queueMicrotask(() => {
-      this.#refreshScheduled = false;
-      this.refresh();
+      if (this.#refreshScheduled) {
+        this.refresh();
+      }
     });
   }
 
+  flushPendingRefreshForTesting(): void {
+    if (this.#refreshScheduled) {
+      this.refresh();
+    }
+  }
+
   updateAttributes(): void {
     const expandable = Boolean(this.configElement.querySelector(':scope > ul[role="group"]'));
     this.setExpandable(expandable);
@@ -1678,10 +1686,13 @@ class TreeViewTreeElement extends TreeElement {
       this.#clonedClasses.add(className);
     }
     this.hidden = hasBooleanAttribute(this.configElement, 'hidden');
+    this.selectable =
+        !this.configElement.hasAttribute('selectable') || hasBooleanAttribute(this.configElement, 'selectable');
     this.updateExpansionFromAttribute();
   }
 
   refresh(): void {
+    this.#refreshScheduled = false;
     const hadFocus = this.listItemElement.hasFocus();
     this.titleElement.textContent = '';
     this.updateAttributes();
@@ -1724,7 +1735,7 @@ class TreeViewTreeElement extends TreeElement {
     return super.onenter();
   }
 
-  remove(): void {
+  removeFromTree(): void {
     removeNode(this,
                Boolean(this.parent &&
                        (this.parent as TreeViewTreeElement).configElement?.querySelector(':scope > ul[role="group"]')));
@@ -1890,6 +1901,26 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     return this.#treeOutline;
   }
 
+  flushPendingUpdatesForTesting(): void {
+    this.flushPendingMutationsForTesting();
+    const stack: TreeElement[] = [...this.#treeOutline.rootElement().children()];
+    while (stack.length > 0) {
+      const item = stack.pop();
+      if (!item) {
+        continue;
+      }
+      if (item instanceof TreeViewTreeElement) {
+        item.flushPendingRefreshForTesting();
+      }
+      if (item.children()) {
+        stack.push(...item.children());
+      }
+    }
+    for (const widgetEl of this.#treeOutline.shadowRoot.querySelectorAll('devtools-widget')) {
+      void Widget.get(widgetEl)?.performUpdate();
+    }
+  }
+
   override focus(): void {
     if (!this.#treeOutline.selectedTreeElement && this.#treeOutline.firstChild()) {
       this.#treeOutline.firstChild()?.select(/* omitFocus */ true, /* selectedByUser */ false);
@@ -2028,7 +2059,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
   protected override removeNodes(nodes: NodeList|Node[]): void {
     for (const node of getTreeNodes(nodes)) {
       if (node instanceof HTMLLIElement) {
-        TreeViewTreeElement.get(node)?.remove();
+        TreeViewTreeElement.get(node)?.removeFromTree();
       } else if (node.treeElement) {
         removeNode(node.treeElement,
                    Boolean(node.treeElement.parent &&

package/front_end/ui/legacy/UIUtils.ts

@@ -2196,6 +2196,13 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     render(template, this.#contentTemplate.content);
   }
 
+  flushPendingMutationsForTesting(): void {
+    const records = this.#mutationObserver.takeRecords();
+    if (records.length > 0) {
+      this.#onChange(records);
+    }
+  }
+
   #onChange(mutationList: MutationRecord[]): void {
     this.onChange(mutationList);
     const addedNodes = new Set<Node>();

package/front_end/ui/legacy/Widget.ts

@@ -1454,3 +1454,36 @@ Node.prototype.removeChildren = function(): void {
   }
   return originalRemoveChildren.call(this);
 };
+
+export interface WrapperWidgetParams {
+  widget: Widget;
+}
+
+export class WrapperWidget extends Widget {
+  #widget: Widget|null = null;
+  constructor(element: HTMLElement, _deps: never[], params?: WrapperWidgetParams) {
+    super(element);
+    this.element.style.setProperty('display', 'contents');
+    if (params?.widget) {
+      this.widget = params.widget;
+    }
+  }
+
+  set widget(widget: Widget|null) {
+    if (this.#widget === widget) {
+      return;
+    }
+    if (this.#widget) {
+      this.#widget.detach();
+    }
+    this.#widget = widget;
+    if (this.#widget) {
+      this.#widget.show(this.element, undefined, /* suppressOrphanWidgetError */ true);
+    }
+  }
+  override focus(): void {
+    if (this.#widget) {
+      this.#widget.focus();
+    }
+  }
+}