chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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

@@ -38,6 +38,7 @@ import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
+import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as SrgbOverlay from '../../../components/srgb_overlay/srgb_overlay.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
@@ -52,12 +53,12 @@ import spectrumStyles from './spectrum.css.js';
 
 const UIStrings = {
   /**
-   *@description Tooltip text that appears when hovering over largeicon eyedropper button in Spectrum of the Color Picker
+   * @description Tooltip text that appears when hovering over largeicon eyedropper button in Spectrum of the Color Picker
    * @example {c} PH1
    */
   toggleColorPicker: 'Eye dropper [{PH1}]',
   /**
-   *@description Aria label for hue slider in Color Picker
+   * @description Aria label for hue slider in Color Picker
    */
   changeHue: 'Change hue',
   /**
@@ -66,63 +67,63 @@ const UIStrings = {
    */
   changeAlpha: 'Change alpha',
   /**
-   *@description Aria label for HEX color format input
+   * @description Aria label for HEX color format input
    */
   hex: 'HEX',
   /**
-   *@description Aria label for color format switcher button in Color Picker
+   * @description Aria label for color format switcher button in Color Picker
    */
   changeColorFormat: 'Change color format',
   /**
-   *@description Screen reader reads this text when palette switcher button receives focus
+   * @description Screen reader reads this text when palette switcher button receives focus
    */
   previewPalettes: 'Preview palettes',
   /**
-   *@description Tooltip text that appears when hovering over the largeicon add button in the Spectrum of the Color Picker
+   * @description Tooltip text that appears when hovering over the largeicon add button in the Spectrum of the Color Picker
    */
   addToPalette: 'Add to palette',
   /**
-   *@description Title text content in Spectrum of the Color Picker
+   * @description Title text content in Spectrum of the Color Picker
    */
   colorPalettes: 'Color Palettes',
   /**
-   *@description Label for close button in Color Picker
+   * @description Label for close button in Color Picker
    */
   returnToColorPicker: 'Return to color picker',
   /**
-   *@description Aria label which declares hex value of a swatch in the Color Picker
-   *@example {#969696} PH1
+   * @description Aria label which declares hex value of a swatch in the Color Picker
+   * @example {#969696} PH1
    */
   colorS: 'Color {PH1}',
   /**
-   *@description Color element title in Spectrum of the Color Picker
-   *@example {#9c1724} PH1
+   * @description Color element title in Spectrum of the Color Picker
+   * @example {#9c1724} PH1
    */
   longclickOrLongpressSpaceToShow: 'Long-click or long-press space to show alternate shades of {PH1}',
   /**
-   *@description A context menu item in the Color Picker to organize the user-defined color palette (removes the user-defined color to which this action is performed)"
+   * @description A context menu item in the Color Picker to organize the user-defined color palette (removes the user-defined color to which this action is performed)"
    */
   removeColor: 'Remove color',
   /**
-   *@description A context menu item in the Color Picker to organize the user-defined color palette (removes all user-defined colors to the right of the color to which this action is performed)"
+   * @description A context menu item in the Color Picker to organize the user-defined color palette (removes all user-defined colors to the right of the color to which this action is performed)"
    */
   removeAllToTheRight: 'Remove all to the right',
   /**
-   *@description A context menu item in the Color Picker to organize the user-defined color palette (removes all user-defined colors)"
+   * @description A context menu item in the Color Picker to organize the user-defined color palette (removes all user-defined colors)"
    */
   clearPalette: 'Clear palette',
   /**
-   *@description Aria label for RGBA and HSLA color format inputs in Color Picker
-   *@example {R} PH1
-   *@example {RGBA} PH2
+   * @description Aria label for RGBA and HSLA color format inputs in Color Picker
+   * @example {R} PH1
+   * @example {RGBA} PH2
    */
   sInS: '{PH1} in {PH2}',
   /**
-   *@description Swatch copy icon title in Spectrum of the Color Picker
+   * @description Swatch copy icon title in Spectrum of the Color Picker
    */
   copyColorToClipboard: 'Copy color to clipboard',
   /**
-   *@description Aria text for the swatch position. Swatch is the color picker spectrum tool.
+   * @description Aria text for the swatch position. Swatch is the color picker spectrum tool.
    */
   pressArrowKeysMessage:
       'Press arrow keys with or without modifiers to move swatch position. Arrow key with Shift key moves position largely, with Ctrl key it is less and with Alt key it is even less',
@@ -270,7 +271,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   // actual variable string.
   private colorStringInternal?: string;
   constructor(contrastInfo?: ContrastInfo|null) {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(spectrumStyles);
 
     this.contentElement.tabIndex = 0;
@@ -561,7 +562,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
 
     function appendSwitcherIcon(parentElement: Element): void {
       const switcherIcon = new IconButton.Icon.Icon();
-      switcherIcon.data = {iconName: 'fold-more', color: 'var(--icon-default)', width: '16px', height: '16px'};
+      switcherIcon.name = 'fold-more';
+      switcherIcon.classList.add('medium');
       parentElement.appendChild(switcherIcon);
     }
   }
@@ -681,15 +683,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       UI.ARIAUtils.markAsButton(colorElement);
       UI.ARIAUtils.setLabel(colorElement, i18nString(UIStrings.colorS, {PH1: palette.colors[i]}));
       colorElement.tabIndex = -1;
-      colorElement.addEventListener(
-          'mousedown',
-          this.paletteColorSelected.bind(
-              this, palette.colors[i], palette.colorNames[i], Boolean(palette.matchUserFormat)));
-      colorElement.addEventListener(
-          'focus',
-          this.paletteColorSelected.bind(
-              this, palette.colors[i], palette.colorNames[i], Boolean(palette.matchUserFormat)));
-      colorElement.addEventListener('keydown', this.onPaletteColorKeydown.bind(this, i));
+      colorElement.addEventListener('mousedown', this.onPaletteColorKeydown.bind(this, palette, i));
+      colorElement.addEventListener('keydown', this.onPaletteColorKeydown.bind(this, palette, i));
       if (palette.mutable) {
         colorElementToMutable.set(colorElement, true);
         colorElementToColor.set(colorElement, palette.colors[i]);
@@ -761,9 +756,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
         UI.ARIAUtils.markAsButton(shadeElement);
         UI.ARIAUtils.setLabel(shadeElement, i18nString(UIStrings.colorS, {PH1: shades[i]}));
         shadeElement.tabIndex = -1;
-        shadeElement.addEventListener('mousedown', this.paletteColorSelected.bind(this, shades[i], shades[i], false));
-        shadeElement.addEventListener('focus', this.paletteColorSelected.bind(this, shades[i], shades[i], false));
-        shadeElement.addEventListener('keydown', this.onShadeColorKeydown.bind(this, colorElement));
+        shadeElement.addEventListener('mousedown', this.onShadeColorKeydown.bind(this, shades[i], colorElement));
+        shadeElement.addEventListener('keydown', this.onShadeColorKeydown.bind(this, shades[i], colorElement));
         this.shadesContainer.appendChild(shadeElement);
       }
     }
@@ -959,19 +953,21 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.dispatchEventToListeners(Events.SIZE_CHANGED);
   }
 
-  private paletteColorSelected(colorText: string, colorName: string|undefined, matchUserFormat: boolean): void {
-    const color = Common.Color.parse(colorText);
-    if (!color) {
+  private onPaletteColorKeydown(palette: Palette, colorIndex: number, event: KeyboardEvent|MouseEvent): void {
+    if (event instanceof MouseEvent || Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
+      const colorText = palette.colors[colorIndex];
+      const colorName = palette.colorNames[colorIndex];
+      const color = Common.Color.parse(colorText);
+      if (color) {
+        this.innerSetColor(
+            color, colorText, colorName, palette.matchUserFormat ? this.colorFormat : color.format(),
+            ChangeSource.Other);
+      }
+      // Continue bubbling so that the color picker will close and submit the selected color.
       return;
     }
-    this.innerSetColor(
-        color, colorText, colorName, matchUserFormat ? this.colorFormat : color.format(), ChangeSource.Other);
-  }
-
-  private onPaletteColorKeydown(colorIndex: number, event: Event): void {
-    const keyboardEvent = event as KeyboardEvent;
     let nextColorIndex;
-    switch (keyboardEvent.key) {
+    switch (event.key) {
       case 'ArrowLeft':
         nextColorIndex = colorIndex - 1;
         break;
@@ -991,7 +987,15 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     }
   }
 
-  private onShadeColorKeydown(colorElement: HTMLElement, event: KeyboardEvent): void {
+  private onShadeColorKeydown(shade: string, colorElement: HTMLElement, event: MouseEvent|KeyboardEvent): void {
+    if (event instanceof MouseEvent || Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
+      const color = Common.Color.parse(shade);
+      if (color) {
+        this.innerSetColor(color, shade, shade, color.format(), ChangeSource.Other);
+      }
+      // Continue bubbling so that the color picker will close and submit the selected color.
+      return;
+    }
     const target = event.target as HTMLElement;
     if (Platform.KeyboardUtilities.isEscKey(event) || event.key === 'Tab') {
       colorElement.focus();
@@ -1069,7 +1073,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.innerSetColor(color, '', undefined /* colorName */, undefined /* colorFormat */, ChangeSource.Other);
   }
 
-  private get color(): Common.Color.Color {
+  get color(): Common.Color.Color {
     if (this.colorInternal) {
       return this.colorInternal;
     }
@@ -1306,9 +1310,28 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     event.preventDefault();
   }
 
+  #getValueSteppingForInput(element: HTMLInputElement): {step: number, range: {min: number, max: number}}|undefined {
+    const channel = this.color.channels[this.textValues.indexOf(element)];
+    switch (channel) {
+      case Common.Color.ColorChannel.R:
+      case Common.Color.ColorChannel.G:
+      case Common.Color.ColorChannel.B:
+        return this.color instanceof Common.Color.ColorFunction ? {step: .01, range: {min: 0, max: 1}} :
+                                                                  {step: 1, range: {min: 0, max: 255}};
+      case Common.Color.ColorChannel.ALPHA:
+      case Common.Color.ColorChannel.X:
+      case Common.Color.ColorChannel.Y:
+      case Common.Color.ColorChannel.Z:
+        return {step: .01, range: {min: 0, max: 1}};
+      default:
+        return undefined;
+    }
+  }
+
   private inputChanged(event: Event): void {
     const inputElement = event.currentTarget as HTMLInputElement;
-    const newValue = UI.UIUtils.createReplacementString(inputElement.value, event);
+    const newValue = UI.UIUtils.createReplacementString(
+        inputElement.value, event, undefined, this.#getValueSteppingForInput(inputElement));
     if (newValue) {
       inputElement.value = newValue;
       inputElement.selectionStart = 0;
@@ -1519,8 +1542,8 @@ export class PaletteGenerator {
   }
 
   private async processStylesheet(stylesheet: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader): Promise<void> {
-    let text: string = (await stylesheet.requestContent()).content || '';
-    text = text.toLowerCase();
+    const contentDataOrError = await stylesheet.requestContentData();
+    const text = TextUtils.ContentData.ContentData.textOr(contentDataOrError, '').toLowerCase();
     const regexResult = text.matchAll(/((?:rgb|hsl|hwb)a?\([^)]+\)|#[0-9a-f]{6}|#[0-9a-f]{3})/g);
     for (const {0: c, index} of regexResult) {
       // Check whether the match occured in a property value and not in a property name or a selector by verifying

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

@@ -77,10 +77,10 @@
 }
 
 .spectrum-hue.display-p3 {
+  /* stylelint-disable-next-line declaration-property-value-no-unknown */
   background: linear-gradient(
     to left in hsl longer hue,
     color(display-p3 1 0 0) 0 100%
-      /* stylelint-disable-next-line declaration-property-value-no-unknown */
   );
 }
 

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

@@ -84,48 +84,48 @@ const {repeat, ifDefined} = Directives;
 
 const UIStrings = {
   /**
-   *@description Cookie table cookies table expires session value in Cookies Table of the Cookies table in the Application panel
+   * @description Cookie table cookies table expires session value in Cookies Table of the Cookies table in the Application panel
    */
   session: 'Session',
   /**
-   *@description Text for the name of something
+   * @description Text for the name of something
    */
   name: 'Name',
   /**
-   *@description Text for the value of something
+   * @description Text for the value of something
    */
   value: 'Value',
   /**
-   *@description Text for the size of something
+   * @description Text for the size of something
    */
   size: 'Size',
   /**
-   *@description Data grid name for Editable Cookies data grid
+   * @description Data grid name for Editable Cookies data grid
    */
   editableCookies: 'Editable Cookies',
   /**
-   *@description Text for web cookies
+   * @description Text for web cookies
    */
   cookies: 'Cookies',
   /**
-   *@description Text for something not available
+   * @description Text for something not available
    */
   na: 'N/A',
   /**
-   *@description Text for Context Menu entry
+   * @description Text for Context Menu entry
    */
   showRequestsWithThisCookie: 'Show requests with this cookie',
   /**
-   *@description Text for Context Menu entry
+   * @description Text for Context Menu entry
    */
   showIssueAssociatedWithThis: 'Show issue associated with this cookie',
   /**
-   *@description Tooltip for the cell that shows the sourcePort property of a cookie in the cookie table. The source port is numberic attribute of a cookie.
+   * @description Tooltip for the cell that shows the sourcePort property of a cookie in the cookie table. The source port is numberic attribute of a cookie.
    */
   sourcePortTooltip:
       'Shows the source port (range 1-65535) the cookie was set on. If the port is unknown, this shows -1.',
   /**
-   *@description Tooltip for the cell that shows the sourceScheme property of a cookie in the cookie table. The source scheme is a trinary attribute of a cookie.
+   * @description Tooltip for the cell that shows the sourceScheme property of a cookie in the cookie table. The source scheme is a trinary attribute of a cookie.
    */
   sourceSchemeTooltip:
       'Shows the source scheme (`Secure`, `NonSecure`) the cookie was set on. If the scheme is unknown, this shows `Unset`.',
@@ -477,7 +477,7 @@ export class CookiesTable extends UI.Widget.VBox {
           i18nString(UIStrings.timeAfterTooltip, {seconds: cookie.expires(), date: new Date(maxTime).toISOString()});
     }
     data[SDK.Cookie.Attribute.PARTITION_KEY_SITE] =
-        cookie.partitionKeyOpaque() ? i18nString(UIStrings.opaquePartitionKey) : cookie.topLevelSite();
+        cookie.partitionKeyOpaque() ? i18nString(UIStrings.opaquePartitionKey).toString() : cookie.topLevelSite();
     data[SDK.Cookie.Attribute.HAS_CROSS_SITE_ANCESTOR] = cookie.hasCrossSiteAncestor() ? 'true' : '';
     data[SDK.Cookie.Attribute.SIZE] = String(cookie.size());
     data[SDK.Cookie.Attribute.PRIORITY] = cookie.priority();
@@ -492,16 +492,12 @@ export class CookiesTable extends UI.Widget.VBox {
         if (attribute === SDK.Cookie.Attribute.NAME &&
             IssuesManager.RelatedIssue.hasThirdPartyPhaseoutCookieIssue(cookie)) {
           data.icons[attribute].name = 'warning-filled';
-          data.icons[attribute].style.color = 'var(--icon-warning)';
-          data.icons[attribute].style.width = '14px';
-          data.icons[attribute].style.height = '14px';
           data.icons[attribute].onclick = () => IssuesManager.RelatedIssue.reveal(cookie);
           data.icons[attribute].style.cursor = 'pointer';
         } else {
           data.icons[attribute].name = 'info';
-          data.icons[attribute].style.width = '14px';
-          data.icons[attribute].style.height = '14px';
         }
+        data.icons[attribute].classList.add('small');
         data.icons[attribute].title = blockedReason.uiString;
       } else if (data.icons[attribute]) {
         data.icons[attribute].title += '\n' + blockedReason.uiString;
@@ -513,8 +509,7 @@ export class CookiesTable extends UI.Widget.VBox {
       data.flagged = true;
       data.icons.name = new IconButton.Icon.Icon();
       data.icons.name.name = 'info';
-      data.icons.name.style.width = '14px';
-      data.icons.name.style.height = '14px';
+      data.icons.name.classList.add('small');
       data.icons.name.title = exemptionReason;
     }
     data.key = cookie.key();

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

@@ -39,22 +39,22 @@ import type {DataGridInternalToken} from './DataGridElement.js';
 
 const UIStrings = {
   /**
-   *@description Accessible text label for expandible nodes in datagrids
+   * @description Accessible text label for expandible nodes in datagrids
    */
   expanded: 'expanded',
   /**
-   *@description accessible name for expandible nodes in datagrids
+   * @description accessible name for expandible nodes in datagrids
    */
   collapsed: 'collapsed',
   /**
-   *@description Accessible text for datagrid
-   *@example {Coverage grid} PH1
-   *@example {expanded} PH2
+   * @description Accessible text for datagrid
+   * @example {Coverage grid} PH1
+   * @example {expanded} PH2
    */
   sRowS: '{PH1} Row {PH2}',
   /**
-   *@description Number of rows in a grid
-   *@example {1} PH1
+   * @description Number of rows in a grid
+   * @example {1} PH1
    */
   rowsS: 'Rows: {PH1}',
   /**
@@ -67,54 +67,54 @@ const UIStrings = {
   sSUseTheUpAndDownArrowKeysTo:
       '{PH1} {PH2}, use the up and down arrow keys to navigate and interact with the rows of the table; Use browse mode to read cell by cell.',
   /**
-   *@description A context menu item in the Data Grid of a data grid
+   * @description A context menu item in the Data Grid of a data grid
    */
   sortByString: 'Sort By',
   /**
-   *@description A context menu item in data grids to reset the columns to their default weight
+   * @description A context menu item in data grids to reset the columns to their default weight
    */
   resetColumns: 'Reset Columns',
   /**
-   *@description A context menu item in data grids to list header options.
+   * @description A context menu item in data grids to list header options.
    */
   headerOptions: 'Header Options',
   /**
-   *@description Text to refresh the page
+   * @description Text to refresh the page
    */
   refresh: 'Refresh',
   /**
-   *@description A context menu item in the Data Grid of a data grid
+   * @description A context menu item in the Data Grid of a data grid
    */
   addNew: 'Add new',
   /**
-   *@description A context menu item in the Data Grid of a data grid
-   *@example {pattern} PH1
+   * @description A context menu item in the Data Grid of a data grid
+   * @example {pattern} PH1
    */
   editS: 'Edit "{PH1}"',
   /**
-   *@description Text to delete something
+   * @description Text to delete something
    */
   delete: 'Delete',
   /**
-   *@description Depth of a node in the datagrid
-   *@example {1} PH1
+   * @description Depth of a node in the datagrid
+   * @example {1} PH1
    */
   levelS: 'level {PH1}',
   /**
-   *@description Text exposed to screen readers on checked items.
+   * @description Text exposed to screen readers on checked items.
    */
   checked: 'checked',
   /**
-   *@description Accessible text indicating an empty row is created.
+   * @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
+   * @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.
+   * @description Label for sortable column headers.
    */
   sortableColumn: 'Sortable column. Press enter to apply sorting filter',
 } as const;
@@ -378,7 +378,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       }
       const accessibleText =
           expandText ? `${this.selectedNode.nodeAccessibleText}, ${expandText}` : this.selectedNode.nodeAccessibleText;
-      UI.ARIAUtils.alert(accessibleText);
+      UI.ARIAUtils.LiveAnnouncer.alert(accessibleText);
     }
   }
 
@@ -407,7 +407,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const items = i18nString(UIStrings.rowsS, {PH1: numberOfRows});
       accessibleText = i18nString(UIStrings.sSUseTheUpAndDownArrowKeysTo, {PH1: this.displayName, PH2: items});
     }
-    UI.ARIAUtils.alert(accessibleText);
+    UI.ARIAUtils.LiveAnnouncer.alert(accessibleText);
   }
 
   private innerAddColumn(column: ColumnDescriptor, position?: number): void {
@@ -1029,7 +1029,8 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private applyColumnWeights(): void {
-    let tableWidth = this.element.offsetWidth - this.cornerWidth;
+    // Subtract 1 to prevent unnecessary overflow in x-axis
+    let tableWidth = this.element.offsetWidth - this.cornerWidth - 1;
     if (tableWidth <= 0) {
       return;
     }
@@ -1048,7 +1049,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
     let sum = 0;
     let lastOffset = 0;
-    const minColumnWidth = 14;  // px
+    const minColumnWidth = ColumnResizePadding;  // px
 
     for (let i = 0; i < this.visibleColumnsArray.length; ++i) {
       const column = this.visibleColumnsArray[i];
@@ -1138,7 +1139,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       emptyData[column] = null;
     }
     this.creationNode = new CreationDataGridNode(emptyData, hasChildren);
-    UI.ARIAUtils.alert(i18nString(UIStrings.emptyRowCreated));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.emptyRowCreated));
     this.rootNode().appendChild(this.creationNode);
   }
 
@@ -1352,7 +1353,7 @@ export class DataGridImpl<T> extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     cell.classList.add(sortOrder);
     const ariaLabel = this.isSortOrderAscending() ? 'ascending' : 'descending';
     cell.setAttribute('aria-sort', ariaLabel);
-    UI.ARIAUtils.alert(i18nString(UIStrings.enterToSort, {PH1: ariaLabel || ''}));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.enterToSort, {PH1: ariaLabel || ''}));
 
     this.dispatchEventToListeners(Events.SORTING_CHANGED);
   }
@@ -1705,7 +1706,7 @@ export const enum DataType {
   BOOLEAN = 'Boolean',
 }
 
-export const ColumnResizePadding = 34;
+export const ColumnResizePadding = 30;
 export const CenterResizerOverBorderAdjustment = 3;
 
 export const enum ResizeMethod {
@@ -2509,7 +2510,7 @@ export class CreationDataGridNode<T> extends DataGridNode<T> {
 export class DataGridWidget<T> extends UI.Widget.VBox {
   readonly dataGrid: DataGridImpl<T>;
   constructor(dataGrid: DataGridImpl<T>, element?: HTMLElement) {
-    super(undefined, undefined, element);
+    super(element);
     this.dataGrid = dataGrid;
     this.element.appendChild(dataGrid.element);
     this.setDefaultFocusedElement(dataGrid.element);

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

@@ -12,13 +12,6 @@ import * as UI from '../../legacy.js';
 
 const {render, html} = Lit;
 
-function getAccessibleText(element: HTMLElement): string {
-  element.blur();
-  element.focus();
-  const alertElement = UI.ARIAUtils.getOrCreateAlertElement();
-  return alertElement.textContent?.trim() || '';
-}
-
 function getFocusedElement(): HTMLElement {
   let root: Document|ShadowRoot = document;
   while (root.activeElement?.shadowRoot?.activeElement) {
@@ -40,7 +33,18 @@ function sendKeydown(element: HTMLElement, key: string): void {
 
 describeWithEnvironment('DataGrid', () => {
   let container!: HTMLElement;
+  let liveAnnouncerAlertStub: sinon.SinonStub;
+
+  function getAlertAnnouncement(element: HTMLElement): string {
+    element.blur();
+    element.focus();
+    assert.isTrue(liveAnnouncerAlertStub.called, 'Expected UI.ARIAUtils.LiveAnnouncer.alert to be called');
+    return liveAnnouncerAlertStub.lastCall.args[0];
+  }
+
   beforeEach(() => {
+    liveAnnouncerAlertStub = sinon.stub(UI.ARIAUtils.LiveAnnouncer, 'alert').returns();
+
     container = document.createElement('div');
     container.style.display = 'flex';
     container.style.width = '640px';
@@ -51,7 +55,7 @@ describeWithEnvironment('DataGrid', () => {
   async function renderDataGrid(template: Lit.TemplateResult): Promise<HTMLElement> {
     render(template, container, {host: {}});
     await RenderCoordinator.done({waitForWork: true});
-    return container.querySelector('devtools-data-grid') as HTMLElement;
+    return container.querySelector('devtools-data-grid')!;
   }
 
   async function renderDataGridContent(template: Lit.TemplateResult): Promise<HTMLElement> {
@@ -66,7 +70,7 @@ describeWithEnvironment('DataGrid', () => {
     const element = await renderDataGrid(html`
         <devtools-data-grid .striped=${true} .displayName=${'Display Name'}>
         </devtools-data-grid>`);
-    assert.isTrue(getAccessibleText(element).startsWith('Display Name Rows: 0'));
+    assert.isTrue(getAlertAnnouncement(element).startsWith('Display Name Rows: 0'));
   });
 
   it('can initialize data from template', async () => {
@@ -84,7 +88,7 @@ describeWithEnvironment('DataGrid', () => {
           </table>
         </devtools-data-grid>`);
     sendKeydown(element, 'ArrowDown');
-    assert.strictEqual(getAccessibleText(element), 'Display Name Row  Column 1: Value 1, Column 2: Value 2');
+    assert.strictEqual(getAlertAnnouncement(element), 'Display Name Row  Column 1: Value 1, Column 2: Value 2');
   });
 
   it('can update data from template', async () => {
@@ -115,7 +119,7 @@ describeWithEnvironment('DataGrid', () => {
           </table>
         </devtools-data-grid>`);
     sendKeydown(element, 'ArrowDown');
-    assert.strictEqual(getAccessibleText(element), 'Display Name Row  Column 3: Value 3, Column 4: Value 4');
+    assert.strictEqual(getAlertAnnouncement(element), 'Display Name Row  Column 3: Value 3, Column 4: Value 4');
   });
 
   it('can filter data', async () => {
@@ -157,9 +161,9 @@ describeWithEnvironment('DataGrid', () => {
           </table>
         </devtools-data-grid>`);
     // clang-format on
-    assert.isTrue(getAccessibleText(element).startsWith('Display Name Rows: 1'));
+    assert.isTrue(getAlertAnnouncement(element).startsWith('Display Name Rows: 1'));
     sendKeydown(element, 'ArrowDown');
-    assert.strictEqual(getAccessibleText(element), 'Display Name Row  Column 1: Value 3, Column 2: Value 4');
+    assert.strictEqual(getAlertAnnouncement(element), 'Display Name Row  Column 1: Value 3, Column 2: Value 4');
   });
 
   it('can set selection from template', async () => {
@@ -181,7 +185,7 @@ describeWithEnvironment('DataGrid', () => {
           </table>
         </devtools-data-grid>`);
     // clang-format off
-    assert.strictEqual(getAccessibleText(element), 'Display Name Row  Column 1: Value 3, Column 2: Value 4');
+    assert.strictEqual(getAlertAnnouncement(element), 'Display Name Row  Column 1: Value 3, Column 2: Value 4');
 
     element = await renderDataGrid(html`
         <devtools-data-grid striped name=${'Display Name'}>
@@ -201,7 +205,7 @@ describeWithEnvironment('DataGrid', () => {
           </table>
         </devtools-data-grid>`);
     // clang-format off
-    assert.isTrue(getAccessibleText(element).startsWith('Display Name Rows: 2'));
+    assert.isTrue(getAlertAnnouncement(element).startsWith('Display Name Rows: 2'));
   });
 
   it('supports editable columns', async () => {

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

@@ -36,9 +36,9 @@ const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least o
  * Under the hood it uses SortableDataGrid, which extends ViewportDataGrid so only
  * visible rows are layed out and sorting is provided out of the box.
  *
- * @attr striped
- * @attr displayName
- * @prop filters
+ * @property filters
+ * @attribute striped
+ * @attribute displayName
  */
 class DataGridElement extends HTMLElement {
   static readonly observedAttributes = ['striped', 'name', 'inline'];
@@ -465,6 +465,18 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
     }
   }
 
+  override createCells(element: Element): void {
+    const configCells = [...this.#configElement.querySelectorAll('td')];
+    const hasCollspan = configCells.some(cell => cell.hasAttribute('colspan'));
+    if (!hasCollspan) {
+      super.createCells(element);
+    } else {
+      for (const cell of configCells) {
+        element.appendChild(cell.cloneNode(true));
+      }
+    }
+  }
+
   override createCell(columnId: string): HTMLElement {
     const index = this.#dataGridElement.columns.findIndex(({id}) => id === columnId);
     if (this.#dataGridElement.columns[index].dataType === DataType.BOOLEAN) {