chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/ui/legacy/FilterBar.test.ts

@@ -0,0 +1,52 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
+
+import * as UI from './legacy.js';
+
+const {render, html} = LitHtml;
+
+describeWithEnvironment('NamedBitSetFilterUI', () => {
+  it('is functional from template', async () => {
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+
+    let namedBitSetFilterUI!: UI.FilterBar.NamedBitSetFilterUI;
+
+    const filterItems: UI.FilterBar.Item[] = [
+      {
+        name: 'filter',
+        label: () => 'filter',
+        title: 'filter',
+        jslogContext: 'filter',
+      },
+    ];
+
+    // clang-format off
+        render(
+            html`
+            <devtools-named-bit-set-filter
+              .options=${{items: filterItems}}
+              ${LitHtml.Directives.ref((el: Element|undefined) => {
+                  if(!el || !(el instanceof UI.FilterBar.NamedBitSetFilterUIElement)){
+                      return;
+                  }
+                  namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
+              })}
+            ></devtools-named-bit-set-filter>
+        `,
+        container, {host: this});
+    // clang-format on
+
+    assert.isTrue(namedBitSetFilterUI.accept('test'));
+
+    const filter = namedBitSetFilterUI.element().querySelector('.filter') as HTMLElement;
+    filter.click();
+
+    assert.isFalse(namedBitSetFilterUI.accept('test'));
+  });
+});

package/front_end/ui/legacy/FilterBar.ts

@@ -39,6 +39,7 @@ import filterStyles from './filter.css.legacy.js';
 import {KeyboardShortcut, Modifiers} from './KeyboardShortcut.js';
 import {bindCheckbox} from './SettingsUI.js';
 import type {Suggestions} from './SuggestBox.js';
+import * as ThemeSupport from './theme_support/theme_support.js';
 import {Toolbar, type ToolbarButton, ToolbarFilter, ToolbarInput, ToolbarSettingToggle} from './Toolbar.js';
 import {Tooltip} from './Tooltip.js';
 import {CheckboxLabel, createTextChild} from './UIUtils.js';
@@ -267,6 +268,50 @@ export class TextFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEve
   }
 }
 
+interface NamedBitSetFilterUIOptions {
+  items: Item[];
+  setting?: Common.Settings.Setting<{[key: string]: boolean}>;
+}
+export class NamedBitSetFilterUIElement extends HTMLElement {
+  #options: NamedBitSetFilterUIOptions = {items: []};
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #namedBitSetFilterUI?: NamedBitSetFilterUI;
+
+  set options(options: NamedBitSetFilterUIOptions) {
+    this.#options = options;
+  }
+
+  getOrCreateNamedBitSetFilterUI(): NamedBitSetFilterUI {
+    if (this.#namedBitSetFilterUI) {
+      return this.#namedBitSetFilterUI;
+    }
+
+    const namedBitSetFilterUI = new NamedBitSetFilterUI(this.#options.items, this.#options.setting);
+    namedBitSetFilterUI.element().classList.add('named-bitset-filter');
+
+    const disclosureElement = this.#shadow.createChild('div', 'named-bit-set-filter-disclosure');
+    disclosureElement.appendChild(namedBitSetFilterUI.element());
+
+    // Translate existing filter ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    namedBitSetFilterUI.addEventListener(FilterUIEvents.FILTER_CHANGED, this.#filterChanged.bind(this));
+
+    this.#namedBitSetFilterUI = namedBitSetFilterUI;
+    return this.#namedBitSetFilterUI;
+  }
+
+  connectedCallback(): void {
+    ThemeSupport.ThemeSupport.instance().appendStyle(this.#shadow, filterStyles);
+  }
+
+  #filterChanged(): void {
+    const domEvent = new CustomEvent('filterChanged');
+    this.dispatchEvent(domEvent);
+  }
+}
+
+customElements.define('devtools-named-bit-set-filter', NamedBitSetFilterUIElement);
+
 export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<FilterUIEventTypes> implements FilterUI {
   private readonly filtersElement: HTMLDivElement;
   private readonly typeFilterElementTypeNames: WeakMap<HTMLElement, string>;
@@ -282,7 +327,7 @@ export class NamedBitSetFilterUI extends Common.ObjectWrapper.ObjectWrapper<Filt
     ARIAUtils.markAsListBox(this.filtersElement);
     ARIAUtils.markAsMultiSelectable(this.filtersElement);
     Tooltip.install(this.filtersElement, i18nString(UIStrings.sclickToSelectMultipleTypes, {
-                      PH1: KeyboardShortcut.shortcutToString('', Modifiers.CtrlOrMeta),
+                      PH1: KeyboardShortcut.shortcutToString('', Modifiers.CtrlOrMeta.value),
                     }));
 
     this.typeFilterElementTypeNames = new WeakMap();

package/front_end/ui/legacy/KeyboardShortcut.ts

@@ -98,23 +98,23 @@ export class KeyboardShortcut {
     if (typeof keyCode === 'string') {
       keyCode = keyCode.charCodeAt(0) - (/^[a-z]/.test(keyCode) ? 32 : 0);
     }
-    modifiers = modifiers || Modifiers.None;
+    modifiers = modifiers || Modifiers.None.value;
     return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, modifiers);
   }
 
   static makeKeyFromEvent(keyboardEvent: KeyboardEvent): number {
-    let modifiers = Modifiers.None;
+    let modifiers = Modifiers.None.value;
     if (keyboardEvent.shiftKey) {
-      modifiers |= Modifiers.Shift;
+      modifiers |= Modifiers.Shift.value;
     }
     if (keyboardEvent.ctrlKey) {
-      modifiers |= Modifiers.Ctrl;
+      modifiers |= Modifiers.Ctrl.value;
     }
     if (keyboardEvent.altKey) {
-      modifiers |= Modifiers.Alt;
+      modifiers |= Modifiers.Alt.value;
     }
     if (keyboardEvent.metaKey) {
-      modifiers |= Modifiers.Meta;
+      modifiers |= Modifiers.Meta.value;
     }
 
     // Use either a real or a synthetic keyCode (for events originating from extensions).
@@ -126,7 +126,7 @@ export class KeyboardShortcut {
   static makeKeyFromEventIgnoringModifiers(keyboardEvent: KeyboardEvent): number {
     // @ts-ignore ExtensionServer.js installs '__keyCode' on some events.
     const keyCode = keyboardEvent.keyCode || keyboardEvent['__keyCode'];
-    return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, Modifiers.None);
+    return KeyboardShortcut.makeKeyFromCodeAndModifiers(keyCode, Modifiers.None.value);
   }
 
   // This checks if a "control equivalent" key is pressed. For non-mac platforms this means checking
@@ -159,7 +159,7 @@ export class KeyboardShortcut {
     const [keyString, ...modifierStrings] = shortcut.split(/\+(?!$)/).reverse();
     let modifiers = 0;
     for (const modifierString of modifierStrings) {
-      const modifier = Modifiers[modifierString];
+      const modifier = Modifiers[modifierString].value;
       console.assert(
           typeof modifier !== 'undefined', `Only one key other than modifier is allowed in shortcut <${shortcut}>`);
       modifiers |= modifier;
@@ -168,7 +168,7 @@ export class KeyboardShortcut {
 
     const key = Keys[keyString] || KeyBindings[keyString];
     if (key && 'shiftKey' in key && key.shiftKey) {
-      modifiers |= Modifiers.Shift;
+      modifiers |= Modifiers.Shift.value;
     }
     return KeyboardShortcut.makeDescriptor(key ? key : keyString, modifiers);
   }
@@ -218,28 +218,37 @@ export class KeyboardShortcut {
     ]);
     return [m.Meta, m.Ctrl, m.Alt, m.Shift].map(mapModifiers).join('');
 
-    function mapModifiers(m: number): string {
-      return (modifiers || 0) & m ? /** @type {string} */ modifierNames.get(m) as string : '';
+    function mapModifiers(m: Modifier): string {
+      return (modifiers || 0) & m.value ? /** @type {string} */ modifierNames.get(m) as string : '';
     }
   }
 }
 
+export interface Modifier {
+  value: number;
+  name: string;
+}
+
 /**
  * Constants for encoding modifier key set as a bit mask.
  * see #makeKeyFromCodeAndModifiers
  */
 export const Modifiers: {
-  [x: string]: number,
+  [x: string]: Modifier,
 } = {
-  None: 0,
-  Shift: 1,
-  Ctrl: 2,
-  Alt: 4,
-  Meta: 8,
-  // "default" command/ctrl key for platform, Command on Mac, Ctrl on other platforms
-  CtrlOrMeta: Host.Platform.isMac() ? 8 /* Meta */ : 2 /* Ctrl */,
-  // Option on Mac, Shift on other platforms
-  ShiftOrOption: Host.Platform.isMac() ? 4 /* Alt */ : 1 /* Shift */,
+  None: {value: 0, name: 'None'},
+  Shift: {value: 1, name: 'Shift'},
+  Ctrl: {value: 2, name: 'Ctrl'},
+  Alt: {value: 4, name: 'Alt'},
+  Meta: {value: 8, name: 'Meta'},
+  CtrlOrMeta: {
+    value: Host.Platform.isMac() ? 8 /* Meta */ : 2 /* Ctrl */,
+    name: Host.Platform.isMac() ? 'Meta' : 'Ctrl',
+  },
+  ShiftOrOption: {
+    value: Host.Platform.isMac() ? 4 /* Alt */ : 1 /* Shift */,
+    name: Host.Platform.isMac() ? 'Alt' : 'Shift',
+  },
 };
 
 const leftKey = {
@@ -315,9 +324,14 @@ export const Keys: {
   ArrowDown: downKey,
   Delete: {code: 46, name: 'Del'},
   Zero: {code: 48, name: '0'},
+  C: {code: 67, name: 'C'},
   H: {code: 72, name: 'H'},
   N: {code: 78, name: 'N'},
   P: {code: 80, name: 'P'},
+  R: {code: 82, name: 'R'},
+  U: {code: 85, name: 'U'},
+  V: {code: 86, name: 'V'},
+  X: {code: 88, name: 'X'},
   Meta: metaKey,
   F1: {code: 112, name: 'F1'},
   F2: {code: 113, name: 'F2'},

package/front_end/ui/legacy/Panel.ts

@@ -39,8 +39,8 @@ import {VBox} from './Widget.js';
 export class Panel extends VBox {
   protected panelName: string;
 
-  constructor(name: string) {
-    super();
+  constructor(name: string, useShadowDom?: boolean) {
+    super(useShadowDom);
 
     this.element.setAttribute('jslog', `${VisualLogging.panel().context(name).track({resize: true})}`);
     this.element.classList.add('panel');

package/front_end/ui/legacy/ShortcutRegistry.ts

@@ -227,29 +227,32 @@ export class ShortcutRegistry {
       const modifiers = Modifiers;
       // Undo/Redo will also cause input, so textual undo should take precedence over DevTools undo when editing.
       if (Host.Platform.isMac()) {
-        if (KeyboardShortcut.makeKey('z', modifiers.Meta) === key) {
+        if (KeyboardShortcut.makeKey('z', modifiers.Meta.value) === key) {
           return true;
         }
-        if (KeyboardShortcut.makeKey('z', modifiers.Meta | modifiers.Shift) === key) {
+        if (KeyboardShortcut.makeKey('z', modifiers.Meta.value | modifiers.Shift.value) === key) {
           return true;
         }
       } else {
-        if (KeyboardShortcut.makeKey('z', modifiers.Ctrl) === key) {
+        if (KeyboardShortcut.makeKey('z', modifiers.Ctrl.value) === key) {
           return true;
         }
-        if (KeyboardShortcut.makeKey('y', modifiers.Ctrl) === key) {
+        if (KeyboardShortcut.makeKey('y', modifiers.Ctrl.value) === key) {
           return true;
         }
-        if (!Host.Platform.isWin() && KeyboardShortcut.makeKey('z', modifiers.Ctrl | modifiers.Shift) === key) {
+        if (!Host.Platform.isWin() &&
+            KeyboardShortcut.makeKey('z', modifiers.Ctrl.value | modifiers.Shift.value) === key) {
           return true;
         }
       }
 
-      if ((keyModifiers & (modifiers.Ctrl | modifiers.Alt)) === (modifiers.Ctrl | modifiers.Alt)) {
+      if ((keyModifiers & (modifiers.Ctrl.value | modifiers.Alt.value)) ===
+          (modifiers.Ctrl.value | modifiers.Alt.value)) {
         return Host.Platform.isWin();
       }
 
-      return !hasModifier(modifiers.Ctrl) && !hasModifier(modifiers.Alt) && !hasModifier(modifiers.Meta);
+      return !hasModifier(modifiers.Ctrl.value) && !hasModifier(modifiers.Alt.value) &&
+          !hasModifier(modifiers.Meta.value);
     }
 
     function hasModifier(mod: number): boolean {

package/front_end/ui/legacy/SoftContextMenu.ts

@@ -640,8 +640,11 @@ export interface SoftContextMenuDescriptor {
   type: 'checkbox'|'item'|'separator'|'subMenu';
   id?: number;
   label?: string;
+  accelerator?: {keyCode: number, modifiers: number};
+  isExperimentalFeature?: boolean;
   enabled?: boolean;
   checked?: boolean;
+  isDevToolsPerformanceMenuItem?: boolean;
   subItems?: SoftContextMenuDescriptor[];
   element?: Element;
   shortcut?: string;

package/front_end/ui/legacy/ThrottledWidget.ts

@@ -10,8 +10,8 @@ export class ThrottledWidget extends VBox {
   private updateWhenVisible: boolean;
   protected lastUpdatePromise: Promise<void> = Promise.resolve();
 
-  constructor(isWebComponent?: boolean, timeout?: number) {
-    super(isWebComponent);
+  constructor(useShadowDom?: boolean, timeout?: number) {
+    super(useShadowDom);
     this.updateThrottler = new Common.Throttler.Throttler(timeout === undefined ? 100 : timeout);
     this.updateWhenVisible = false;
   }

package/front_end/ui/legacy/Toolbar.ts

@@ -923,6 +923,7 @@ export class ToolbarFilter extends ToolbarInput {
 
     const filterIcon = IconButton.Icon.create('filter');
     this.element.prepend(filterIcon);
+    this.element.classList.add('toolbar-filter');
   }
 }
 

package/front_end/ui/legacy/Treeoutline.ts

@@ -349,9 +349,12 @@ export class TreeOutline extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
       // Usually, this.element is the tree container that scrolls. But sometimes
       // (i.e. in the Elements panel), its parent is.
-      let scrollParentElement: HTMLElement = this.element;
-      while (getComputedStyle(scrollParentElement).overflow === 'visible' && scrollParentElement.parentElement) {
-        scrollParentElement = scrollParentElement.parentElement;
+      let scrollParentElement: Element = this.element;
+      while (getComputedStyle(scrollParentElement).overflow === 'visible' &&
+             scrollParentElement.parentElementOrShadowHost()) {
+        const parent = scrollParentElement.parentElementOrShadowHost();
+        Platform.assertNotNullOrUndefined(parent);
+        scrollParentElement = parent;
       }
 
       const viewRect = scrollParentElement.getBoundingClientRect();
@@ -801,7 +804,7 @@ export class TreeElement {
     }
   }
 
-  setLeadingIcons(icons: IconButton.Icon.Icon[]): void {
+  setLeadingIcons(icons: IconButton.Icon.Icon[]|IconButton.FileSourceIcon.FileSourceIcon[]): void {
     if (!this.leadingIconsElement && !icons.length) {
       return;
     }

package/front_end/ui/legacy/UIUtils.ts

@@ -690,6 +690,7 @@ export function runCSSAnimationOnce(element: Element, className: string): void {
   function animationEndCallback(): void {
     element.classList.remove(className);
     element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
+    element.removeEventListener('animationcancel', animationEndCallback, false);
   }
 
   if (element.classList.contains(className)) {
@@ -697,6 +698,7 @@ export function runCSSAnimationOnce(element: Element, className: string): void {
   }
 
   element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
+  element.addEventListener('animationcancel', animationEndCallback, false);
   element.classList.add(className);
 }
 
@@ -1098,6 +1100,13 @@ export function createTextButton(text: string, clickHandler?: ((arg0: Event) =>
   button.variant = opts?.variant ? opts.variant : Buttons.Button.Variant.OUTLINED;
   if (clickHandler) {
     button.addEventListener('click', clickHandler);
+    button.addEventListener('keydown', (event: KeyboardEvent): void => {
+      if (event.key === 'Enter' || event.key === 'Space') {
+        // Make sure we don't propagate 'Enter' or 'Space' key events to parents,
+        // so that these get turned into 'click' events properly.
+        event.stopImmediatePropagation();
+      }
+    });
   }
   if (opts?.jslogContext) {
     button.setAttribute('jslog', `${VisualLogging.action().track({click: true}).context(opts.jslogContext)}`);

package/front_end/ui/legacy/View.ts

@@ -33,8 +33,8 @@ export class SimpleView extends VBox implements View {
   readonly #title: Platform.UIString.LocalizedString;
   readonly #viewId: Lowercase<string>;
 
-  constructor(title: Platform.UIString.LocalizedString, isWebComponent?: boolean, viewId?: Lowercase<string>) {
-    super(isWebComponent);
+  constructor(title: Platform.UIString.LocalizedString, useShadowDom?: boolean, viewId?: Lowercase<string>) {
+    super(useShadowDom);
     this.#title = title;
     if (viewId) {
       if (!Platform.StringUtilities.isExtendedKebabCase(viewId)) {

package/front_end/ui/legacy/ViewManager.ts

@@ -710,8 +710,9 @@ class TabbedLocation extends Location implements TabbedViewLocation {
         continue;
       }
 
+      const isPreviewFeature = view.isPreviewFeature();
       contextMenu.defaultSection().appendItem(
-          title, this.showView.bind(this, view, undefined, true), {jslogContext: view.viewId()});
+          title, this.showView.bind(this, view, undefined, true), {isPreviewFeature, jslogContext: view.viewId()});
     }
   }
 

package/front_end/ui/legacy/Widget.ts

@@ -673,8 +673,8 @@ const storedScrollPositions = new WeakMap<Element, {
 }>();
 
 export class VBox extends Widget {
-  constructor(isWebComponent?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
-    super(isWebComponent, delegatesFocus, element);
+  constructor(useShadowDom?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
+    super(useShadowDom, delegatesFocus, element);
     this.contentElement.classList.add('vbox');
   }
 
@@ -693,8 +693,8 @@ export class VBox extends Widget {
 }
 
 export class HBox extends Widget {
-  constructor(isWebComponent?: boolean) {
-    super(isWebComponent);
+  constructor(useShadowDom?: boolean) {
+    super(useShadowDom);
     this.contentElement.classList.add('hbox');
   }
 

package/front_end/ui/legacy/components/data_grid/DataGrid.test.ts

@@ -0,0 +1,51 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import * as UI from '../../legacy.js';
+
+import * as DataGrid from './data_grid.js';
+
+const {render, html} = LitHtml;
+const widgetRef = UI.Widget.widgetRef;
+
+describeWithEnvironment('DataGrid', () => {
+  it('can be instantiated from template', async () => {
+    const container = document.createElement('div');
+    renderElementIntoDOM(container);
+
+    let widget!: DataGrid.DataGrid.DataGridWidget<unknown>;
+
+    const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<unknown> = {
+      implParams: {
+        displayName: 'testGrid',
+        columns: [{
+          id: 'test',
+          sortable: false,
+        }],
+      },
+      nodes: [new DataGrid.DataGrid.DataGridNode({test: 'testNode'})],
+      markAsRoot: true,
+    };
+
+    // clang-format off
+        render(
+            html`
+        <devtools-data-grid-widget
+            .options=${dataGridOptions}
+            ${widgetRef(DataGrid.DataGrid.DataGridWidget, e => { widget = e; })}
+        ></devtools-data-grid-widget>
+        `,
+        container, {host: this});
+    // clang-format on
+
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    assert.exists(widget);
+    // There is a single test row
+    assert.strictEqual(widget.dataGrid.rootNode().children.length, 1);
+  });
+});

package/front_end/ui/legacy/components/data_grid/DataGrid.ts

@@ -228,7 +228,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.editing = false;
     this.selectedNode = null;
     this.expandNodesWhenArrowing = false;
-    this.setRootNode((new DataGridNode() as DataGridNode<T>));
+    this.setRootNode(new DataGridNode<T>());
 
     this.setHasSelection(false);
 
@@ -1549,9 +1549,9 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return 0;
   }
 
-  asWidget(): DataGridWidget<T> {
+  asWidget(element?: HTMLElement): DataGridWidget<T> {
     if (!this.dataGridWidget) {
-      this.dataGridWidget = new DataGridWidget(this);
+      this.dataGridWidget = new DataGridWidget(this, element);
     }
     return this.dataGridWidget;
   }
@@ -2441,9 +2441,9 @@ export class CreationDataGridNode<T> extends DataGridNode<T> {
 }
 
 export class DataGridWidget<T> extends UI.Widget.VBox {
-  private readonly dataGrid: DataGridImpl<T>;
-  constructor(dataGrid: DataGridImpl<T>) {
-    super();
+  readonly dataGrid: DataGridImpl<T>;
+  constructor(dataGrid: DataGridImpl<T>, element?: HTMLElement) {
+    super(undefined, undefined, element);
     this.dataGrid = dataGrid;
     this.element.appendChild(dataGrid.element);
     this.setDefaultFocusedElement(dataGrid.element);
@@ -2466,6 +2466,92 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
     return [this.dataGrid.scrollContainer];
   }
 }
+
+export interface DataGridWidgetOptions<T> {
+  implParams: Parameters;
+  dataGridImpl?: DataGridImpl<T>;
+  markAsRoot?: boolean;
+  nodes: DataGridNode<T>[];
+}
+
+export class DataGridWidgetElement<T> extends UI.Widget.WidgetElement<DataGridWidget<T>> {
+  #options: DataGridWidgetOptions<T>;
+
+  constructor() {
+    super();
+    // default values for options
+    this.#options = {
+      implParams: {
+        displayName: 'dataGrid',
+        columns: [],
+      },
+      nodes: [],
+    };
+  }
+
+  set options(options: DataGridWidgetOptions<T>) {
+    this.#options = options;
+  }
+
+  override createWidget(): DataGridWidget<T> {
+    const {
+      implParams,
+      markAsRoot,
+      nodes,
+    } = this.#options;
+
+    if (!this.#options.dataGridImpl) {
+      this.#options.dataGridImpl = new DataGridImpl<T>(implParams);
+    }
+
+    this.#options.dataGridImpl.rootNode().removeChildren();
+    for (const node of nodes) {
+      this.#options.dataGridImpl.rootNode().appendChild(node);
+    }
+
+    // Translate existing DataGridImpl ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    this.#options.dataGridImpl.addEventListener(Events.SELECTED_NODE, this.#selectedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.DESELECTED_NODE, this.#deselectedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.OPENED_NODE, this.#openedNode.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.SORTING_CHANGED, this.#sortingChanged.bind(this));
+    this.#options.dataGridImpl.addEventListener(Events.PADDING_CHANGED, this.#paddingChanged.bind(this));
+    const widget = this.#options.dataGridImpl.asWidget(this);
+
+    if (markAsRoot) {
+      widget.markAsRoot();
+    }
+    return widget;
+  }
+
+  #selectedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {
+    const domEvent = new CustomEvent('selectedNode', {detail: event.data});
+    this.dispatchEvent(domEvent);
+  }
+
+  #deselectedNode(): void {
+    const domEvent = new CustomEvent('deselectedNode');
+    this.dispatchEvent(domEvent);
+  }
+
+  #openedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {
+    const domEvent = new CustomEvent('openedNode', {detail: event.data});
+    this.dispatchEvent(domEvent);
+  }
+
+  #sortingChanged(): void {
+    const domEvent = new CustomEvent('sortingChanged');
+    this.dispatchEvent(domEvent);
+  }
+
+  #paddingChanged(): void {
+    const domEvent = new CustomEvent('paddingChanged');
+    this.dispatchEvent(domEvent);
+  }
+}
+
+customElements.define('devtools-data-grid-widget', DataGridWidgetElement);
+
 export interface Parameters {
   displayName: string;
   columns: ColumnDescriptor[];

package/front_end/ui/legacy/components/data_grid/dataGrid.css

@@ -86,6 +86,10 @@
 .data-grid tbody tr {
   display: none;
   height: 20px;
+
+  &:has(td.show-more) {
+    height: var(--sys-size-13);
+  }
 }
 
 .data-grid tbody tr.revealed {
@@ -291,10 +295,13 @@
 
 .data-grid td.show-more {
   white-space: normal;
-  gap: 4px;
+  gap: var(--sys-size-3);
 
   devtools-button {
     margin-right: var(--sys-size-6);
+    position: relative;
+    margin-top: 3px;
+    margin-bottom: 3px;
   }
 }