Handle false in data grid boolean attributes

Bug: 394287937
Change-Id: If94a0bf9fefa57d1d68e017fe80fffb026e190ce
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6229633
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>

Author: danilsomsikov

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

@@ -158,6 +158,48 @@ describeWithEnvironment('DataGrid', () => {
     assert.strictEqual(getAccessibleText(element), 'Display Name Row  Column 1: Value 3, Column 2: Value 4');
   });
 
+  it('can set selection from template', async () => {
+    let element = await renderDataGrid(html`
+        <devtools-data-grid striped name=${'Display Name'}>
+          <table>
+            <tr>
+              <th id="column-1">Column 1</th>
+              <th id="column-2">Column 2</th>
+            </tr>
+            <tr>
+              <td>Value 1</td>
+              <td>Value 2</td>
+            </tr>
+            <tr selected>
+              <td>Value 3</td>
+              <td>Value 4</td>
+            </tr>
+          </table>
+        </devtools-data-grid>`);
+    // clang-format off
+    assert.strictEqual(getAccessibleText(element), 'Display Name Row  Column 1: Value 3, Column 2: Value 4');
+
+    element = await renderDataGrid(html`
+        <devtools-data-grid striped name=${'Display Name'}>
+          <table>
+            <tr>
+              <th id="column-1">Column 1</th>
+              <th id="column-2">Column 2</th>
+            </tr>
+            <tr>
+              <td>Value 1</td>
+              <td>Value 2</td>
+            </tr>
+            <tr selected="false">
+              <td>Value 3</td>
+              <td>Value 4</td>
+            </tr>
+          </table>
+        </devtools-data-grid>`);
+    // clang-format off
+    assert.isTrue(getAccessibleText(element).startsWith('Display Name Rows: 2'));
+  });
+
   it('supports editable columns', async () => {
     const editCallback = sinon.stub();
     const element = await renderDataGrid(html`

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

@@ -120,15 +120,15 @@ class DataGridElement extends HTMLElement {
   }
 
   get striped(): boolean {
-    return this.hasAttribute('striped');
+    return hasBooleanAttribute(this, 'striped');
   }
 
   set inline(striped: boolean) {
     this.toggleAttribute('inline', striped);
   }
 
   get inline(): boolean {
-    return this.hasAttribute('inline');
+    return hasBooleanAttribute(this, 'inline');
   }
 
   set displayName(displayName: string) {
@@ -167,7 +167,7 @@ class DataGridElement extends HTMLElement {
           title += child.shadowRoot ? child.shadowRoot.textContent : child.textContent;
         }
       }
-      const sortable = column.hasAttribute('sortable');
+      const sortable = hasBooleanAttribute(column, 'sortable');
       const width = column.getAttribute('width') ?? undefined;
       const fixedWidth = column.hasAttribute('fixed');
       let align = column.getAttribute('align') ?? undefined;
@@ -190,7 +190,7 @@ class DataGridElement extends HTMLElement {
         weight,
         editable
       });
-      if (column.hasAttribute('hideable')) {
+      if (hasBooleanAttribute(column, 'hideable')) {
         this.#hideableColumns.add(id);
       }
     }
@@ -224,7 +224,7 @@ class DataGridElement extends HTMLElement {
         const index = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
         const node = new DataGridElementNode(element, this);
         parentNode.insertChild(node, index);
-        if (element.hasAttribute('selected')) {
+        if (hasBooleanAttribute(element, 'selected')) {
           node.select();
         }
       }
@@ -247,7 +247,7 @@ class DataGridElement extends HTMLElement {
     const dataGridNode = dataRow ? DataGridElementNode.get(dataRow) : null;
     if (dataGridNode) {
       if (selectionOnly) {
-        if (dataRow?.hasAttribute('selected')) {
+        if (dataRow && hasBooleanAttribute(dataRow, 'selected')) {
           dataGridNode.select();
         } else {
           dataGridNode.deselect();
@@ -290,9 +290,6 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
     DataGridElementNode.#elementToNode.set(configElement, this);
     this.#dataGridElement = dataGridElement;
     this.#updateData();
-    if (this.#configElement.hasAttribute('selected')) {
-      this.select();
-    }
   }
 
   static get(configElement: Element|undefined): DataGridElementNode|undefined {
@@ -373,5 +370,8 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
   }
 }
 
-// TODO(dsv): Rename to devtools-data-grid once the other one is removed.
 customElements.define('devtools-data-grid', DataGridElement);
+
+function hasBooleanAttribute(element: Element, name: string): boolean {
+  return element.hasAttribute(name) && element.getAttribute(name) !== 'false';
+}