chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/ui/legacy/ZoomManager.ts

@@ -70,6 +70,6 @@ export interface ZoomChangedEvent {
   to: number;
 }
 
-export type EventTypes = {
-  [Events.ZOOM_CHANGED]: ZoomChangedEvent,
-};
+export interface EventTypes {
+  [Events.ZOOM_CHANGED]: ZoomChangedEvent;
+}

package/front_end/ui/legacy/components/color_picker/ColorFormatSpec.ts

@@ -21,14 +21,14 @@ import * as Platform from '../../../../core/platform/platform.js';
 // represents one of the inputs.
 type Label = 'RGBA'|'HSLA'|'HWBA'|'lchA'|'labA'|'xyzA';
 
-type ColorFormatSpec = {
+interface ColorFormatSpec {
   // Label to be shown under the inputs
-  label: Label,
+  label: Label;
   // Values of the inputs
-  toValues(color: Common.Color.Color): [string, string, string, string],
+  toValues(color: Common.Color.Color): [string, string, string, string];
   // How to generate the number from the input values
-  fromValues(values: [string, string, string, string]): Common.Color.Color|null,
-};
+  fromValues(values: [string, string, string, string]): Common.Color.Color|null;
+}
 
 // p0, p1, p2, alpha
 // r, g, b, alpha

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../legacy.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -138,7 +140,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       event.consume(false);
     }));
 
-    const expandToolbar = new UI.Toolbar.Toolbar('expand', contrastValueRowContents);
+    const expandToolbar = contrastValueRowContents.createChild('devtools-toolbar', 'expand');
     this.expandButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.showMore), 'chevron-down');
     this.expandButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.expandButtonClicked.bind(this));
     UI.ARIAUtils.setExpanded(this.expandButton.element, false);
@@ -163,7 +165,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     const bgColorContainer = this.expandedDetails.createChild('div', 'background-color');
 
-    const pickerToolbar = new UI.Toolbar.Toolbar('spectrum-eye-dropper', bgColorContainer);
+    const pickerToolbar = bgColorContainer.createChild('devtools-toolbar', 'spectrum-eye-dropper');
     this.bgColorPickerButton = new UI.Toolbar.ToolbarToggle(
         i18nString(UIStrings.toggleBackgroundColorPicker), 'color-picker', 'color-picker-filled');
     this.bgColorPickerButton.addEventListener(
@@ -472,9 +474,9 @@ export const enum Events {
   BACKGROUND_COLOR_PICKER_WILL_BE_TOGGLED = 'BackgroundColorPickerWillBeToggled',
 }
 
-export type EventTypes = {
-  [Events.BACKGROUND_COLOR_PICKER_WILL_BE_TOGGLED]: boolean,
-};
+export interface EventTypes {
+  [Events.BACKGROUND_COLOR_PICKER_WILL_BE_TOGGLED]: boolean;
+}
 
 export class Swatch {
   private readonly parentElement: Element;

package/front_end/ui/legacy/components/color_picker/ContrastInfo.ts

@@ -129,9 +129,9 @@ export const enum Events {
   CONTRAST_INFO_UPDATED = 'ContrastInfoUpdated',
 }
 
-export type EventTypes = {
-  [Events.CONTRAST_INFO_UPDATED]: void,
-};
+export interface EventTypes {
+  [Events.CONTRAST_INFO_UPDATED]: void;
+}
 
 export interface ContrastInfoType {
   backgroundColors: string[]|null;

package/front_end/ui/legacy/components/color_picker/FormatPickerContextMenu.ts

@@ -27,10 +27,10 @@ export class FormatPickerContextMenu {
   }
 
   async show(e: Event, onSelect: OnSelectFn): Promise<void> {
-    let resolveShowPromise: (() => void)|undefined = undefined;
-    const showPromise = new Promise<void>(resolve => {
-      resolveShowPromise = resolve;
-    });
+    const {
+      resolve,
+      promise: showPromise,
+    } = Promise.withResolvers<void>();
 
     const legacyFormats = [
       Common.Color.Format.HEX,
@@ -55,7 +55,7 @@ export class FormatPickerContextMenu {
       Common.Color.Format.XYZ_D50,
       Common.Color.Format.XYZ_D65,
     ];
-    const menu = new UI.ContextMenu.ContextMenu(e, {onSoftMenuClosed: () => resolveShowPromise?.()});
+    const menu = new UI.ContextMenu.ContextMenu(e, {onSoftMenuClosed: () => resolve()});
     const legacySection = menu.section('legacy');
     const wideSection = menu.section('wide');
     const colorFunctionSection = menu.section('color-function').appendSubMenuItem('color()', false, 'color').section();

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -30,6 +30,8 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../legacy.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
@@ -268,6 +270,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   private colorStringInternal?: string;
   constructor(contrastInfo?: ContrastInfo|null) {
     super(true);
+    this.registerRequiredCSS(spectrumStyles);
 
     this.contentElement.tabIndex = 0;
     this.contentElement.setAttribute(
@@ -291,7 +294,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.dragY = 0;
 
     const toolsContainer = this.contentElement.createChild('div', 'spectrum-tools');
-    const toolbar = new UI.Toolbar.Toolbar('spectrum-eye-dropper', toolsContainer);
+    const toolbar = toolsContainer.createChild('devtools-toolbar', 'spectrum-eye-dropper');
     const toggleEyeDropperShortcut =
         UI.ShortcutRegistry.ShortcutRegistry.instance().shortcutsForAction('elements.toggle-eye-dropper');
     const definedShortcutKey =
@@ -424,14 +427,16 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       event.consume(true);
     });
 
-    this.deleteIconToolbar = new UI.Toolbar.Toolbar('delete-color-toolbar');
+    this.deleteIconToolbar = document.createElement('devtools-toolbar');
+    this.deleteIconToolbar.classList.add('delete-color-toolbar');
     this.deleteButton = new UI.Toolbar.ToolbarButton('', 'bin');
     this.deleteIconToolbar.appendToolbarItem(this.deleteButton);
 
     const overlay = this.contentElement.createChild('div', 'spectrum-overlay fill');
     overlay.addEventListener('click', this.togglePalettePanel.bind(this, false));
 
-    this.addColorToolbar = new UI.Toolbar.Toolbar('add-color-toolbar');
+    this.addColorToolbar = document.createElement('devtools-toolbar');
+    this.addColorToolbar.classList.add('add-color-toolbar');
     const addColorButton =
         new UI.Toolbar.ToolbarButton(i18nString(UIStrings.addToPalette), 'plus', undefined, 'add-color');
     addColorButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.onAddColorMousedown.bind(this));
@@ -592,7 +597,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.palettePanel.removeChildren();
     const title = this.palettePanel.createChild('div', 'palette-title');
     title.textContent = i18nString(UIStrings.colorPalettes);
-    const toolbar = new UI.Toolbar.Toolbar('', this.palettePanel);
+    const toolbar = this.palettePanel.createChild('devtools-toolbar');
     this.closeButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.returnToColorPicker), 'cross');
     this.closeButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, this.togglePalettePanel.bind(this, false));
     this.closeButton.element.addEventListener('keydown', this.onCloseBtnKeydown.bind(this));
@@ -708,11 +713,11 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.paletteContainerMutable = palette.mutable;
 
     if (palette.mutable) {
-      this.paletteContainer.appendChild(this.addColorToolbar.element);
-      this.paletteContainer.appendChild(this.deleteIconToolbar.element);
+      this.paletteContainer.appendChild(this.addColorToolbar);
+      this.paletteContainer.appendChild(this.deleteIconToolbar);
     } else {
-      this.addColorToolbar.element.remove();
-      this.deleteIconToolbar.element.remove();
+      this.addColorToolbar.remove();
+      this.deleteIconToolbar.remove();
     }
 
     this.togglePalettePanel(false);
@@ -780,7 +785,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
 
   private isDraggingToBin(event: Event): boolean {
     const mouseEvent = event as MouseEvent;
-    return mouseEvent.pageX > this.deleteIconToolbar.element.getBoundingClientRect().left;
+    return mouseEvent.pageX > this.deleteIconToolbar.getBoundingClientRect().left;
   }
 
   private paletteDragStart(event: Event): boolean {
@@ -811,8 +816,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     const offsetY = mouseEvent.pageY - (newIndex / ITEMS_PER_PALETTE_ROW | 0) * COLOR_CHIP_SIZE;
 
     const isDeleting = this.isDraggingToBin(event);
-    this.deleteIconToolbar.element.classList.add('dragging');
-    this.deleteIconToolbar.element.classList.toggle('delete-color-toolbar-active', isDeleting);
+    this.deleteIconToolbar.classList.add('dragging');
+    this.deleteIconToolbar.classList.toggle('delete-color-toolbar-active', isDeleting);
     const dragElementTransform =
         'translateX(' + (offsetX - this.dragHotSpotX) + 'px) translateY(' + (offsetY - this.dragHotSpotY) + 'px)';
     this.dragElement.style.transform = isDeleting ? dragElementTransform + ' scale(0.8)' : dragElementTransform;
@@ -868,8 +873,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.customPaletteSetting.set(palette);
     this.showPalette(palette, false);
 
-    this.deleteIconToolbar.element.classList.remove('dragging');
-    this.deleteIconToolbar.element.classList.remove('delete-color-toolbar-active');
+    this.deleteIconToolbar.classList.remove('dragging');
+    this.deleteIconToolbar.classList.remove('delete-color-toolbar-active');
   }
 
   private loadPalettes(): void {
@@ -1335,7 +1340,6 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   }
 
   override wasShown(): void {
-    this.registerCSSFiles([spectrumStyles]);
     this.hueAlphaWidth = this.hueElement.offsetWidth;
     this.slideHelperWidth = this.hueSlider.offsetWidth / 2;
     this.dragWidth = this.colorElement.offsetWidth;
@@ -1435,10 +1439,10 @@ export const enum Events {
   SIZE_CHANGED = 'SizeChanged',
 }
 
-export type EventTypes = {
-  [Events.COLOR_CHANGED]: string,
-  [Events.SIZE_CHANGED]: void,
-};
+export interface EventTypes {
+  [Events.COLOR_CHANGED]: string;
+  [Events.SIZE_CHANGED]: void;
+}
 
 const COLOR_CHIP_SIZE = 24;
 const ITEMS_PER_PALETTE_ROW = 8;

package/front_end/ui/legacy/components/color_picker/spectrum.css

@@ -137,7 +137,7 @@
   flex: none;
 }
 
-.spectrum-contrast-details div.toolbar.expand {
+.spectrum-contrast-details devtools-toolbar.expand {
   position: absolute;
   right: 6px;
   top: 6px;
@@ -531,13 +531,13 @@ devtools-icon.copy-color-icon {
   visibility: visible;
 }
 
-.palette-panel > div.toolbar {
+.palette-panel > devtools-toolbar {
   position: absolute;
   right: 6px;
   top: 6px;
 }
 
-.palette-panel > div:not(.toolbar) {
+.palette-panel > div {
   flex: 0 0 38px;
   border-bottom: 1px solid var(--sys-color-divider);
   padding: 12px;

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

@@ -77,7 +77,7 @@ const UIStrings = {
   /**
    *@description Text for Context Menu entry
    */
-  showRequestsWithThisCookie: 'Show Requests With This Cookie',
+  showRequestsWithThisCookie: 'Show requests with this cookie',
   /**
    *@description Text for Context Menu entry
    */
@@ -130,6 +130,7 @@ export class CookiesTable extends UI.Widget.VBox {
       refreshCallback?: (() => void), selectedCallback?: (() => void),
       deleteCallback?: ((arg0: SDK.Cookie.Cookie, arg1: () => void) => void)) {
     super();
+    this.registerRequiredCSS(cookiesTableStyles);
 
     this.element.classList.add('cookies-table');
 
@@ -306,10 +307,6 @@ export class CookiesTable extends UI.Widget.VBox {
     this.cookieToExemptionReason = null;
   }
 
-  override wasShown(): void {
-    this.registerCSSFiles([cookiesTableStyles]);
-  }
-
   setCookies(
       cookies: SDK.Cookie.Cookie[],
       cookieToBlockedReasons?: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.BlockedReason[]>,

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

@@ -4,12 +4,11 @@
 
 import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
-import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import {html, render} from '../../../../ui/lit/lit.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', () => {

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

@@ -105,6 +105,15 @@ const UIStrings = {
    *@description Accessible text indicating an empty row is created.
    */
   emptyRowCreated: 'An empty table row has been created. You may double click or use context menu to edit.',
+  /**
+   *@description Text for screen reader to announce when focusing on a sortable column in data grid.
+   *@example {ascending} PH1
+   */
+  enterToSort: 'Column sort state: {PH1}. Press enter to apply sorting filter',
+  /**
+   *@description Label for sortable column headers.
+   */
+  sortableColumn: 'Sortable column. Press enter to apply sorting filter',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/data_grid/DataGrid.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -122,9 +131,10 @@ const elementToIndexMap = new WeakMap<Element, number>();
 export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTypes<T>> {
   element: HTMLDivElement;
   displayName: string;
-  private editCallback: ((arg0: any, arg1: string, arg2: any, arg3: any) => void)|undefined;
-  private readonly deleteCallback: ((arg0: any) => void)|undefined;
-  private readonly refreshCallback: (() => void)|undefined;
+  editCallback:
+      ((node: any, columnId: string, valueBeforeEditing: any, newText: any, moveDirection?: string) => void)|undefined;
+  deleteCallback: ((arg0: any) => void)|undefined;
+  refreshCallback: (() => void)|undefined;
   private dataTableHeaders: {
     [x: string]: Element,
   };
@@ -160,7 +170,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private rootNodeInternal?: DataGridNode<T>;
   private editingNode?: DataGridNode<T>|null;
   private columnWeightsSetting?: Common.Settings.Setting<any>;
-  creationNode?: CreationDataGridNode<any>;
+  creationNode?: DataGridNode<any>;
   private currentResizer?: EventTarget|null;
   private dataGridWidget?: any;
 
@@ -195,9 +205,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     // FIXME: Add a createCallback which is different from editCallback and has different
     // behavior when creating a new node.
-    if (editCallback) {
-      this.dataTable.addEventListener('dblclick', this.ondblclick.bind(this), false);
-    }
+    this.dataTable.addEventListener('dblclick', this.ondblclick.bind(this), false);
     this.dataTable.addEventListener('mousedown', this.mouseDownInDataTable.bind(this));
     this.dataTable.addEventListener('click', this.clickInDataTable.bind(this), true);
 
@@ -227,7 +235,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.editing = false;
     this.selectedNode = null;
-    this.expandNodesWhenArrowing = false;
+    /** Currently by default this is true to expand nodes when arrowing with keyboard. */
+    this.expandNodesWhenArrowing = true;
     this.setRootNode(new DataGridNode<T>());
 
     this.setHasSelection(false);
@@ -367,6 +376,10 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
+  protected getNumberOfRows(): number {
+    return this.rootNodeInternal ? this.enumerateChildren(this.rootNodeInternal, [], 1).length : 0;
+  }
+
   updateGridAccessibleNameOnFocus(): void {
     // When a grid gets focus
     // 1) If an item is selected - Read the content of the row
@@ -384,8 +397,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       if (!this.rootNodeInternal) {
         return;
       }
-      const children = this.enumerateChildren(this.rootNodeInternal, [], 1);
-      const items = i18nString(UIStrings.rowsS, {PH1: children.length});
+      const numberOfRows = this.getNumberOfRows();
+      const items = i18nString(UIStrings.rowsS, {PH1: numberOfRows});
       accessibleText = i18nString(UIStrings.sSUseTheUpAndDownArrowKeysTo, {PH1: this.displayName, PH2: items});
     }
     UI.ARIAUtils.alert(accessibleText);
@@ -417,6 +430,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
                 .track({click: column.sortable, resize: true})
                 .context(Platform.StringUtilities.toKebabCase(columnId))}`);
     cell.className = columnId + '-column';
+    cell.setAttribute('tabindex', '0');
+    cell.setAttribute('role', 'columnheader');
     nodeToColumnIdMap.set(cell, columnId);
     this.dataTableHeaders[columnId] = cell;
 
@@ -435,10 +450,19 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     if (column.sortable) {
       cell.addEventListener('click', this.clickInHeaderCell.bind(this), false);
+      /**
+       * For a11y reasons to allow for keyboard navigation through the table headers
+       * we additionally have a keydown event listener.
+       */
+      cell.addEventListener('keydown', this.keydownHeaderCell.bind(this), false);
       cell.classList.add('sortable');
       const icon = document.createElement('span');
       icon.className = 'sort-order-icon';
       cell.createChild('div', 'sort-order-icon-container').appendChild(icon);
+
+      if (column.title) {
+        UI.ARIAUtils.setLabel(cell, i18nString(UIStrings.sortableColumn));
+      }
     }
   }
 
@@ -539,13 +563,18 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return rootNode;
   }
 
+  isColumnEditable(columnId: string): boolean {
+    const column = this.columns[columnId];
+    return Boolean(column && column.editable && this.editCallback);
+  }
+
   private ondblclick(event: Event): void {
-    if (this.editing || this.editingNode) {
+    if (!this.editCallback || this.editing || this.editingNode) {
       return;
     }
 
     const columnId = this.columnIdFromNode((event.target as Node));
-    if (!columnId || !this.columns[columnId].editable) {
+    if (!columnId || !this.isColumnEditable(columnId)) {
       return;
     }
     this.startEditing((event.target as Node));
@@ -752,7 +781,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
     // Make the callback - expects an editing node (table row), the column number that is being edited,
     // the text that used to be there, and the new text.
-    this.editCallback(this.editingNode, columnId, valueBeforeEditing, newText);
+    this.editCallback(this.editingNode, columnId, valueBeforeEditing, newText, moveDirection);
 
     if (this.editingNode instanceof CreationDataGridNode && this.editingNode.isCreationNode) {
       this.addCreationNode(false);
@@ -772,7 +801,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     const start = inclusive ? cellIndex : cellIndex + increment;
     const columns = this.visibleColumnsArray;
     for (let i = start; (i >= 0) && (i < columns.length); i += increment) {
-      if (columns[i].editable) {
+      if (this.isColumnEditable(columns[i].id)) {
         return i;
       }
     }
@@ -1096,7 +1125,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   addCreationNode(hasChildren?: boolean): void {
     if (this.creationNode) {
-      this.creationNode.makeNormal();
+      this.creationNode.isCreationNode = false;
     }
     const emptyData: {
       [x: string]: any,
@@ -1163,6 +1192,10 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         }
       }
     } else if (event.key === 'ArrowRight') {
+      /** We do not want to expand if this setting is disabled. */
+      if (!this.expandNodesWhenArrowing) {
+        return;
+      }
       if (!this.selectedNode.revealed) {
         this.selectedNode.reveal();
         handled = true;
@@ -1202,7 +1235,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       nextSelectedNode.select();
     }
 
-    if (handled && this.element !== document.activeElement && !this.element.contains(document.activeElement)) {
+    const activeElement = (Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument) as HTMLElement | null);
+    if (handled && this.element !== activeElement && !this.element.contains(activeElement)) {
       // crbug.com/1005449, crbug.com/1329956
       // navigational or delete keys pressed but current DataGrid panel has lost focus;
       // re-focus to ensure subsequent keydowns can be registered within this DataGrid
@@ -1234,8 +1268,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     while (nextSelectedNode && !nextSelectedNode.selectable) {
       nextSelectedNode = nextSelectedNode.traverseNextNode(true);
     }
-    const isCreationNode = nextSelectedNode instanceof CreationDataGridNode && nextSelectedNode.isCreationNode;
-    if (!nextSelectedNode || isCreationNode) {
+    if (!nextSelectedNode || nextSelectedNode.isCreationNode) {
       if (!root) {
         return;
       }
@@ -1270,6 +1303,18 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.sortByColumnHeaderCell((cell as HTMLElement));
   }
 
+  private keydownHeaderCell(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      this.clickInHeaderCell(event);
+    }
+  }
+
+  /**
+   * Sorts by column header cell.
+   * Additionally applies the aria-sort label to a column's th.
+   * Guidance on values of attribute taken from
+   * https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html.
+   */
   private sortByColumnHeaderCell(cell: Element): void {
     if (!nodeToColumnIdMap.has(cell) || !cell.classList.contains('sortable')) {
       return;
@@ -1282,10 +1327,14 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     if (this.sortColumnCell) {
       this.sortColumnCell.classList.remove(Order.Ascending, Order.Descending);
+      this.sortColumnCell.removeAttribute('aria-sort');
     }
     this.sortColumnCell = cell;
 
     cell.classList.add(sortOrder);
+    const ariaLabel = this.isSortOrderAscending() ? 'ascending' : 'descending';
+    cell.setAttribute('aria-sort', ariaLabel);
+    UI.ARIAUtils.alert(i18nString(UIStrings.enterToSort, {PH1: ariaLabel || ''}));
 
     this.dispatchEventToListeners(Events.SORTING_CHANGED);
   }
@@ -1408,7 +1457,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
           const firstEditColumnIndex = this.nextEditableColumn(-1);
           if (firstEditColumnIndex > -1) {
             const firstColumn = this.visibleColumnsArray[firstEditColumnIndex];
-            if (firstColumn && firstColumn.editable) {
+            if (firstColumn && this.isColumnEditable(firstColumn.id)) {
               contextMenu.defaultSection().appendItem(
                   i18nString(UIStrings.editS, {PH1: String(firstColumn.title)}),
                   this.startEditingColumnOfDataGridNode.bind(this, gridNode, firstEditColumnIndex),
@@ -1417,7 +1466,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
           }
         } else {
           const columnId = this.columnIdFromNode(target);
-          if (columnId && this.columns[columnId].editable) {
+          if (columnId && this.isColumnEditable(columnId)) {
             contextMenu.defaultSection().appendItem(
                 i18nString(UIStrings.editS, {PH1: String(this.columns[columnId].title)}),
                 this.startEditing.bind(this, target), {jslogContext: 'edit'});
@@ -1602,13 +1651,13 @@ export const enum Events {
   PADDING_CHANGED = 'PaddingChanged',
 }
 
-export type EventTypes<T> = {
-  [Events.SELECTED_NODE]: DataGridNode<T>,
-  [Events.DESELECTED_NODE]: void,
-  [Events.OPENED_NODE]: DataGridNode<T>,
-  [Events.SORTING_CHANGED]: void,
-  [Events.PADDING_CHANGED]: void,
-};
+export interface EventTypes<T> {
+  [Events.SELECTED_NODE]: DataGridNode<T>;
+  [Events.DESELECTED_NODE]: void;
+  [Events.OPENED_NODE]: DataGridNode<T>;
+  [Events.SORTING_CHANGED]: void;
+  [Events.PADDING_CHANGED]: void;
+}
 
 export enum Order {
   /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
@@ -1636,9 +1685,9 @@ export const enum ResizeMethod {
   LAST = 'last',
 }
 
-export type DataGridData = {
-  [key: string]: any,
-};
+export interface DataGridData {
+  [key: string]: any;
+}
 
 export class DataGridNode<T> {
   elementInternal: HTMLElement|null;
@@ -1646,7 +1695,6 @@ export class DataGridNode<T> {
   private selectedInternal: boolean;
   private dirty: boolean;
   private inactive: boolean;
-  key!: string;
   private depthInternal!: number|undefined;
   revealedInternal!: boolean|undefined;
   protected attachedInternal: boolean;
@@ -1952,7 +2000,7 @@ export class DataGridNode<T> {
     nodeToColumnIdMap.set(cell, columnId);
 
     if (this.dataGrid) {
-      const editableCell = this.dataGrid.columns[columnId].editable;
+      const editableCell = this.dataGrid.isColumnEditable(columnId);
 
       cell.setAttribute(
           'jslog',
@@ -2438,10 +2486,6 @@ export class CreationDataGridNode<T> extends DataGridNode<T> {
     super(data, hasChildren);
     this.isCreationNode = true;
   }
-
-  makeNormal(): void {
-    this.isCreationNode = false;
-  }
 }
 
 export class DataGridWidget<T> extends UI.Widget.VBox {
@@ -2451,18 +2495,21 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
     this.dataGrid = dataGrid;
     this.element.appendChild(dataGrid.element);
     this.setDefaultFocusedElement(dataGrid.element);
+    this.registerRequiredCSS(dataGridStyles);
   }
 
   override wasShown(): void {
-    this.registerCSSFiles([dataGridStyles]);
+    super.wasShown();
     this.dataGrid.wasShown();
   }
 
   override willHide(): void {
     this.dataGrid.willHide();
+    super.willHide();
   }
 
   override onResize(): void {
+    super.onResize();
     this.dataGrid.onResize();
   }
 
@@ -2474,6 +2521,7 @@ export class DataGridWidget<T> extends UI.Widget.VBox {
 export type DataGridWidgetOptions<T> = Parameters&{
   markAsRoot?: boolean,
   striped?: boolean, nodes: DataGridNode<T>[],
+  rowContextMenuCallback?: ((arg0: UI.ContextMenu.ContextMenu, arg1: DataGridNode<T>) => void),
 };
 
 export class DataGridWidgetElement<T> extends UI.Widget.WidgetElement<DataGridWidget<T>> {
@@ -2526,6 +2574,8 @@ export class DataGridWidgetElement<T> extends UI.Widget.WidgetElement<DataGridWi
       if (this.#options.striped) {
         this.widget.dataGrid.setStriped(true);
       }
+
+      this.widget.dataGrid.setRowContextMenuCallback(this.#options.rowContextMenuCallback ?? null);
     }
   }
 
@@ -2560,7 +2610,7 @@ customElements.define('devtools-data-grid-widget', DataGridWidgetElement);
 export interface Parameters {
   displayName: string;
   columns: ColumnDescriptor[];
-  editCallback?: ((arg0: any, arg1: string, arg2: any, arg3: any) => void);
+  editCallback?: ((node: any, columnId: string, valueBeforeEditing: any, newText: any, moveDirection?: string) => void);
   deleteCallback?: ((arg0: any) => void);
   refreshCallback?: (() => void);
 }