chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/ui/components/switch/SwitchImpl.ts

@@ -65,12 +65,12 @@ export class Switch extends HTMLElement {
     /* eslint-disable rulesdir/inject_checkbox_styles */
     // clang-format off
     LitHtml.render(html`
-    <label role="button">
+    <label role="button" jslog=${jslog || LitHtml.nothing}>
       <input type="checkbox"
         @change=${this.#handleChange}
         ?disabled=${this.#disabled}
         .checked=${this.#checked}
-        jslog=${jslog || LitHtml.nothing}>
+      >
       <span class="slider" @click=${(ev: Event) => ev.stopPropagation()}></span>
     </label>
     `, this.#shadow, {host: this});

package/front_end/ui/legacy/ContextMenu.ts

@@ -553,11 +553,11 @@ export class ContextMenu extends SubMenu {
   }
 
   private innerShow(): void {
-    const menuObject = this.buildMenuDescriptors();
-
     if (!this.eventTarget) {
       return;
     }
+
+    const menuObject = this.buildMenuDescriptors();
     const ownerDocument = (this.eventTarget as HTMLElement).ownerDocument;
     if (this.useSoftMenu || ContextMenu.useSoftMenu ||
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.isHostedMode()) {

package/front_end/ui/legacy/Infobar.ts

@@ -95,9 +95,13 @@ export class Infobar {
           buttonClass += ' primary-button';
         }
 
+        const buttonVariant = action.buttonVariant ?? Buttons.Button.Variant.OUTLINED;
+
         const button = createTextButton(action.text, actionCallback, {
           className: buttonClass,
           jslogContext: action.jslogContext,
+          variant: buttonVariant,
+          icon: action.icon,
         });
         if (action.highlight && !this.#firstFocusableElement) {
           this.#firstFocusableElement = button;
@@ -246,6 +250,8 @@ export interface InfobarAction {
   highlight: boolean;
   delegate: (() => void)|null;
   dismiss: boolean;
+  buttonVariant?: Buttons.Button.Variant;
+  icon?: string;
   jslogContext?: string;
 }
 

package/front_end/ui/legacy/InplaceEditor.ts

@@ -12,7 +12,7 @@ let inplaceEditorInstance: InplaceEditor<unknown>|null = null;
 
 export class InplaceEditor<T> {
   private focusRestorer?: ElementFocusRestorer;
-  static startEditing<T>(element: Element, config?: Config<T>): Controller|null {
+  static startEditing<T>(element: Element, config: Config<T>): Controller|null {
     if (!inplaceEditorInstance) {
       inplaceEditorInstance = new InplaceEditor();
     }
@@ -76,12 +76,11 @@ export class InplaceEditor<T> {
     }
   }
 
-  startEditing(element: Element, inputConfig?: Config<T>): Controller|null {
+  startEditing(element: Element, config: Config<T>): Controller|null {
     if (!markBeingEdited(element, true)) {
       return null;
     }
 
-    const config = inputConfig || new Config(function() {}, function() {});
     const editingContext: EditingContext<T> = {element, config, oldRole: null, oldTabIndex: null, oldText: null};
     const committedCallback = config.commitHandler;
     const cancelledCallback = config.cancelHandler;
@@ -95,7 +94,7 @@ export class InplaceEditor<T> {
     editingContext.oldText = this.editorContent(editingContext);
 
     function blurEventListener(e?: Event): void {
-      if (config.blurHandler && !config.blurHandler(element, e)) {
+      if (!config.blurHandler(element, e)) {
         return;
       }
       editingCommitted.call(element);
@@ -125,7 +124,7 @@ export class InplaceEditor<T> {
     function editingCommitted(this: Element): void {
       cleanUpAfterEditing();
 
-      committedCallback(this, self.editorContent(editingContext), editingContext.oldText || '', context, moveDirection);
+      committedCallback(this, self.editorContent(editingContext), editingContext.oldText, context, moveDirection);
       element.dispatchEvent(new Event('change'));
     }
 
@@ -188,23 +187,28 @@ export class InplaceEditor<T> {
   }
 }
 
-export type CommitHandler<T> = (arg0: Element, arg1: string, arg2: string, arg3: T, arg4: string) => void;
-export type CancelHandler<T> = (arg0: Element, arg1: T) => void;
-export type BlurHandler = (arg0: Element, arg1?: Event|undefined) => boolean;
+export type CommitHandler<T> =
+    (element: Element, newText: string, oldText: string|null, context: T, moveDirection: string) => void;
+export type CancelHandler<T> = (element: Element, context: T) => void;
+export type BlurHandler = (element: Element, event?: Event) => boolean;
 
-export class Config<T = undefined> {
+export class Config<T> {
   commitHandler: CommitHandler<T>;
   cancelHandler: CancelHandler<T>;
   context: T;
-  blurHandler: BlurHandler|undefined;
-  pasteHandler!: EventHandler|null;
-  postKeydownFinishHandler!: EventHandler|null;
+  blurHandler: BlurHandler;
+  pasteHandler?: EventHandler;
+  postKeydownFinishHandler?: EventHandler;
 
   constructor(
-      commitHandler: CommitHandler<T>, cancelHandler: CancelHandler<T>, context?: T, blurHandler?: BlurHandler) {
+      commitHandler: CommitHandler<T>,
+      cancelHandler: CancelHandler<T>,
+      context: T,
+      blurHandler: BlurHandler = () => true,
+  ) {
     this.commitHandler = commitHandler;
     this.cancelHandler = cancelHandler;
-    this.context = context as T;
+    this.context = context;
     this.blurHandler = blurHandler;
   }
 

package/front_end/ui/legacy/InspectorView.ts

@@ -32,10 +32,12 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../components/icon_button/icon_button.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import type {ActionDelegate as ActionDelegateInterface} from './ActionRegistration.js';
+import {ActionRegistry} from './ActionRegistry.js';
 import * as ARIAUtils from './ARIAUtils.js';
 import type {Context} from './Context.js';
 import type {ContextMenu} from './ContextMenu.js';
@@ -67,6 +69,10 @@ const UIStrings = {
    *@description The aria label for main tabbed pane that contains Panels
    */
   panels: 'Panels',
+  /**
+   *@description Title of an action that reloads the tab currently being debugged by DevTools
+   */
+  reloadDebuggedTab: 'Reload',
   /**
    *@description Title of an action that reloads the DevTools
    */
@@ -476,6 +482,36 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     }
   }
 
+  displayDebuggedTabReloadRequiredWarning(message: string): void {
+    if (!this.reloadRequiredInfobar) {
+      const infobar = new Infobar(
+          InfobarType.INFO, message,
+          [
+            {
+              text: i18nString(UIStrings.reloadDebuggedTab),
+              highlight: true,
+              delegate: () => {
+                reloadDebuggedTab();
+                if (this.reloadRequiredInfobar) {
+                  this.reloadRequiredInfobar.dispose();
+                }
+              },
+              dismiss: false,
+              buttonVariant: Buttons.Button.Variant.PRIMARY,
+              icon: 'refresh',
+              jslogContext: 'main.debug-reload',
+            },
+          ],
+          undefined, undefined, 'reload-required');
+      infobar.setParentView(this);
+      this.attachInfobar(infobar);
+      this.reloadRequiredInfobar = infobar;
+      infobar.setCloseCallback(() => {
+        delete this.reloadRequiredInfobar;
+      });
+    }
+  }
+
   displayReloadRequiredWarning(message: string): void {
     if (!this.reloadRequiredInfobar) {
       const infobar = new Infobar(
@@ -602,6 +638,10 @@ function reloadDevTools(): void {
   Host.InspectorFrontendHost.InspectorFrontendHostInstance.reattach(() => window.location.reload());
 }
 
+function reloadDebuggedTab(): void {
+  void ActionRegistry.instance().getAction('inspector-main.reload').execute();
+}
+
 export class ActionDelegate implements ActionDelegateInterface {
   handleAction(context: Context, actionId: string): boolean {
     switch (actionId) {

package/front_end/ui/legacy/ListWidget.ts

@@ -199,8 +199,10 @@ export class ListWidget<T> extends VBox {
       this.element.focus();
       this.delegate.removeItemRequested(this.items[index], index);
       ARIAUtils.alert(i18nString(UIStrings.removedItem));
-      // focus on the next item in the list, or the last item if we're removing the last item
-      (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus();
+      if (this.elements.length >= 1) {
+        // focus on the next item in the list, or the last item if we're removing the last item
+        (this.elements[Math.min(index, this.elements.length - 1)] as HTMLElement).focus();
+      }
     }
   }
 

package/front_end/ui/legacy/TabbedPane.ts

@@ -1214,7 +1214,6 @@ export class TabbedPaneTab {
       tabElement.classList.add('measuring');
     } else {
       tabElement.addEventListener('click', this.tabClicked.bind(this), false);
-      tabElement.addEventListener('keydown', this.tabKeyDown.bind(this), false);
       tabElement.addEventListener('auxclick', this.tabClicked.bind(this), false);
       tabElement.addEventListener('mousedown', this.tabMouseDown.bind(this), false);
       tabElement.addEventListener('mouseup', this.tabMouseUp.bind(this), false);
@@ -1265,19 +1264,6 @@ export class TabbedPaneTab {
         element?.parentElement?.classList.contains('tabbed-pane-close-button') || false;
   }
 
-  private tabKeyDown(ev: Event): void {
-    const event = ev as KeyboardEvent;
-    switch (event.key) {
-      case 'Enter':
-      case ' ':
-        if (this.isCloseIconClicked(event.target as HTMLElement)) {
-          this.closeTabs([this.id]);
-          ev.consume(true);
-          return;
-        }
-    }
-  }
-
   private tabClicked(ev: Event): void {
     const event = (ev as MouseEvent);
     const middleButton = event.button === 1;

package/front_end/ui/legacy/ThrottledWidget.ts

@@ -16,11 +16,11 @@ export class ThrottledWidget extends VBox {
     this.updateWhenVisible = false;
   }
 
-  protected doUpdate(): Promise<void> {
+  protected override doUpdate(): Promise<void> {
     return Promise.resolve();
   }
 
-  update(): void {
+  override update(): void {
     this.updateWhenVisible = !this.isShowing();
     if (this.updateWhenVisible) {
       return;

package/front_end/ui/legacy/Toolbar.ts

@@ -1028,9 +1028,9 @@ export class ToolbarMenuButton extends ToolbarCombobox {
       useSoftMenu: this.useSoftMenu,
       x: this.element.getBoundingClientRect().left,
       y: this.element.getBoundingClientRect().top + this.element.offsetHeight,
-      // Without rAF, pointer events will be un-ignored too early, and a single click causes the
-      // context menu to be closed and immediately re-opened on Windows (https://crbug.com/339560549).
-      onSoftMenuClosed: () => requestAnimationFrame(() => this.element.removeAttribute('aria-expanded')),
+      // Without adding a delay, pointer events will be un-ignored too early, and a single click causes
+      // the context menu to be closed and immediately re-opened on Windows (https://crbug.com/339560549).
+      onSoftMenuClosed: () => setTimeout(() => this.element.removeAttribute('aria-expanded'), 50),
     });
     this.contextMenuHandler(contextMenu);
     this.element.setAttribute('aria-expanded', 'true');

package/front_end/ui/legacy/UIUtils.ts

@@ -1091,22 +1091,18 @@ export function createTextButton(text: string, clickHandler?: ((arg0: Event) =>
   jslogContext?: string,
   variant?: Buttons.Button.Variant,
   title?: string,
+  icon?: string,
 }): Buttons.Button.Button {
   const button = new Buttons.Button.Button();
   if (opts?.className) {
     button.className = opts.className;
   }
+
   button.textContent = text;
+  button.iconName = opts?.icon;
   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)}`);
@@ -1220,7 +1216,7 @@ export function setTitle(element: HTMLElement, title: string): void {
   Tooltip.install(element, title);
 }
 
-export class CheckboxLabel extends HTMLSpanElement {
+export class CheckboxLabel extends HTMLElement {
   private readonly shadowRootInternal!: DocumentFragment;
   checkboxElement!: HTMLInputElement;
   textElement!: HTMLElement;
@@ -1241,10 +1237,7 @@ export class CheckboxLabel extends HTMLSpanElement {
 
   static create(title?: string, checked?: boolean, subtitle?: string, jslogContext?: string, small?: boolean):
       CheckboxLabel {
-    if (!CheckboxLabel.constructorInternal) {
-      CheckboxLabel.constructorInternal = registerCustomElement('span', 'dt-checkbox', CheckboxLabel);
-    }
-    const element = (CheckboxLabel.constructorInternal() as CheckboxLabel);
+    const element = document.createElement('dt-checkbox') as CheckboxLabel;
     element.checkboxElement.checked = Boolean(checked);
     if (jslogContext) {
       element.checkboxElement.setAttribute(
@@ -1262,9 +1255,11 @@ export class CheckboxLabel extends HTMLSpanElement {
   }
 
   private static lastId = 0;
-  static constructorInternal: (() => Element)|null = null;
 }
 
+// Skip registerCustomElement flow as it's incompatible with Safari with this specific custom element.
+self.customElements.define('dt-checkbox', CheckboxLabel);
+
 export class DevToolsIconLabel extends HTMLSpanElement {
   readonly #icon: IconButton.Icon.Icon;
 

package/front_end/ui/legacy/Widget.ts

@@ -33,6 +33,7 @@ import '../../core/dom_extension/dom_extension.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as Helpers from '../components/helpers/helpers.js';
+import * as RenderCoordinator from '../components/render_coordinator/render_coordinator.js';
 
 import {Constraints, Size} from './Geometry.js';
 import * as ThemeSupport from './theme_support/theme_support.js';
@@ -109,6 +110,8 @@ function decrementWidgetCounter(parentElement: Element, childElement: Element):
   }
 }
 
+let id = 0;
+
 export class Widget {
   readonly element: HTMLElement;
   contentElement: HTMLElement;
@@ -127,6 +130,7 @@ export class Widget {
   private constraintsInternal?: Constraints;
   private invalidationsRequested?: boolean;
   private externallyManaged?: boolean;
+  #id = `${this.constructor.name}_${id++}`;
   constructor(useShadowDom?: boolean, delegatesFocus?: boolean, element?: HTMLElement) {
     this.element = element || document.createElement('div');
     this.shadowRoot = this.element.shadowRoot || undefined;
@@ -665,6 +669,34 @@ export class Widget {
     assert(!this.parentWidgetInternal, 'Attempt to mark widget as externally managed after insertion to the DOM');
     this.externallyManaged = true;
   }
+
+  /**
+   * Called by the RenderCoordinator to perform an update.
+   * This is not meant to be called directly. Instead, use update() to schedule an asynchronous update.
+   *
+   * @returns A promise that resolves when the update is complete.
+   */
+  protected doUpdate(): Promise<void> {
+    return Promise.resolve();
+  }
+
+  /**
+   * Schedules an asynchronous update. The update will be deduplicated and executed with the animation frame.
+   */
+  update(): void {
+    void RenderCoordinator.RenderCoordinator.RenderCoordinator.instance().write(this.#id, () => this.doUpdate());
+  }
+
+  /**
+   * Returns a promise that resolves when the pending update is complete.
+   * Returns a resolved promise if there is no pending update.
+`  *
+   * @returns A probleme that resolves when the pending update is complete.
+   */
+  pendingUpdate(): Promise<void> {
+    return RenderCoordinator.RenderCoordinator.RenderCoordinator.instance().findPendingWrite(this.#id) ||
+        Promise.resolve();
+  }
 }
 
 const storedScrollPositions = new WeakMap<Element, {

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -35,7 +35,6 @@
 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 Root from '../../../../core/root/root.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import * as IssuesManager from '../../../../models/issues_manager/issues_manager.js';
@@ -237,7 +236,8 @@ export class CookiesTable extends UI.Widget.VBox {
       },
     ] as DataGrid.DataGrid.ColumnDescriptor[];
 
-    if (Root.Runtime.experiments.isEnabled('experimental-cookie-features')) {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+    if (config.devToolsEnableOriginBoundCookies?.schemeBindingEnabled) {
       const additionalColumns = [
         {
           id: SDK.Cookie.Attribute.SOURCE_SCHEME,
@@ -247,6 +247,11 @@ export class CookiesTable extends UI.Widget.VBox {
           weight: 7,
           editable,
         },
+      ] as DataGrid.DataGrid.ColumnDescriptor[];
+      columns.push(...additionalColumns);
+    }
+    if (config.devToolsEnableOriginBoundCookies?.portBindingEnabled) {
+      const additionalColumns = [
         {
           id: SDK.Cookie.Attribute.SOURCE_PORT,
           title: 'SourcePort',

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

@@ -20,13 +20,11 @@ describeWithEnvironment('DataGrid', () => {
     let widget!: DataGrid.DataGrid.DataGridWidget<unknown>;
 
     const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<unknown> = {
-      implParams: {
-        displayName: 'testGrid',
-        columns: [{
-          id: 'test',
-          sortable: false,
-        }],
-      },
+      displayName: 'testGrid',
+      columns: [{
+        id: 'test',
+        sortable: false,
+      }],
       nodes: [new DataGrid.DataGrid.DataGridNode({test: 'testNode'})],
       markAsRoot: true,
     };
@@ -34,6 +32,7 @@ describeWithEnvironment('DataGrid', () => {
     // clang-format off
         render(
             html`
+        <!-- @ts-ignore -->
         <devtools-data-grid-widget
             .options=${dataGridOptions}
             ${widgetRef(DataGrid.DataGrid.DataGridWidget, e => { widget = e; })}
@@ -42,8 +41,6 @@ describeWithEnvironment('DataGrid', () => {
         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

@@ -666,11 +666,16 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private startEditingConfig(_element: Element): UI.InplaceEditor.Config<any> {
-    return new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this));
+    return new UI.InplaceEditor.Config(this.editingCommitted.bind(this), this.editingCancelled.bind(this), undefined);
   }
 
   private editingCommitted(
-      element: Element, newText: any, oldText: any, context: string|undefined, moveDirection: string): void {
+      element: Element,
+      newText: any,
+      _oldText: string|boolean|null,
+      _context: string|undefined,
+      moveDirection: string,
+      ): void {
     const columnId = this.columnIdFromNode(element);
     if (!columnId) {
       this.editingCancelled(element);
@@ -681,8 +686,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!this.editingNode) {
       return;
     }
-    const valueBeforeEditing =
-        (this.editingNode.data[columnId] === null ? '' : this.editingNode.data[columnId] as string | boolean);
+    const valueBeforeEditing = this.editingNode.data[columnId];
     const currentEditingNode = this.editingNode;
 
     function moveToNextIfNeeded(this: DataGridImpl<T>, wasChange: boolean): void {
@@ -1699,7 +1703,7 @@ export class DataGridNode<T> {
     return this.elementInternal as Element;
   }
 
-  protected createElement(): Element {
+  protected createElement(): HTMLElement {
     this.elementInternal = document.createElement('tr');
     this.elementInternal.setAttribute(
         'jslog', `${VisualLogging.tableRow().track({keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'})}`);
@@ -1732,7 +1736,7 @@ export class DataGridNode<T> {
     return this.elementInternal;
   }
 
-  existingElement(): Element|null {
+  existingElement(): HTMLElement|null {
     return this.elementInternal || null;
   }
 
@@ -2467,61 +2471,62 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
   }
 }
 
-export interface DataGridWidgetOptions<T> {
-  implParams: Parameters;
-  dataGridImpl?: DataGridImpl<T>;
-  markAsRoot?: boolean;
-  nodes: DataGridNode<T>[];
-}
+export type DataGridWidgetOptions<T> = Parameters&{
+  markAsRoot?: boolean,
+  striped?: boolean, nodes: DataGridNode<T>[],
+};
 
 export class DataGridWidgetElement<T> extends UI.Widget.WidgetElement<DataGridWidget<T>> {
   #options: DataGridWidgetOptions<T>;
+  widget?: DataGridWidget<T>;
 
   constructor() {
     super();
     // default values for options
     this.#options = {
-      implParams: {
-        displayName: 'dataGrid',
-        columns: [],
-      },
+      displayName: 'dataGrid',
+      columns: [],
       nodes: [],
     };
   }
 
   set options(options: DataGridWidgetOptions<T>) {
     this.#options = options;
+    this.#updateGrid();
   }
 
   override createWidget(): DataGridWidget<T> {
-    const {
-      implParams,
-      markAsRoot,
-      nodes,
-    } = this.#options;
+    const dataGridImpl = new DataGridImpl<T>(this.#options);
 
-    if (!this.#options.dataGridImpl) {
-      this.#options.dataGridImpl = new DataGridImpl<T>(implParams);
-    }
+    // Translate existing DataGridImpl ("ObjectWrapper") events to DOM CustomEvents so clients can
+    // use lit templates to bind listeners.
+    dataGridImpl.addEventListener(Events.SELECTED_NODE, this.#selectedNode.bind(this));
+    dataGridImpl.addEventListener(Events.DESELECTED_NODE, this.#deselectedNode.bind(this));
+    dataGridImpl.addEventListener(Events.OPENED_NODE, this.#openedNode.bind(this));
+    dataGridImpl.addEventListener(Events.SORTING_CHANGED, this.#sortingChanged.bind(this));
+    dataGridImpl.addEventListener(Events.PADDING_CHANGED, this.#paddingChanged.bind(this));
+    this.widget = dataGridImpl.asWidget(this);
 
-    this.#options.dataGridImpl.rootNode().removeChildren();
-    for (const node of nodes) {
-      this.#options.dataGridImpl.rootNode().appendChild(node);
+    if (this.#options.markAsRoot) {
+      this.widget.markAsRoot();
     }
 
-    // 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);
+    this.#updateGrid();
+
+    return this.widget;
+  }
 
-    if (markAsRoot) {
-      widget.markAsRoot();
+  #updateGrid(): void {
+    if (this.widget) {
+      this.widget.dataGrid.rootNode().removeChildren();
+      for (const node of this.#options.nodes) {
+        this.widget.dataGrid.rootNode().appendChild(node);
+      }
+
+      if (this.#options.striped) {
+        this.widget.dataGrid.setStriped(true);
+      }
     }
-    return widget;
   }
 
   #selectedNode(event: Common.EventTarget.EventTargetEvent<DataGridNode<T>>): void {