Add native support of highlighted rows in the data grid and use it in the cookies table

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

Author: danilsomsikov

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

@@ -80,7 +80,7 @@ type CookieData = {
   inactive?: boolean,
 };
 
-const {classMap, repeat, ifDefined} = Directives;
+const {repeat, ifDefined} = Directives;
 
 const UIStrings = {
   /**
@@ -241,7 +241,7 @@ export class CookiesTable extends UI.Widget.VBox {
                     ?selected=${cookie.key === input.selectedKey}
                     ?inactive=${cookie.inactive}
                     ?dirty=${cookie.dirty}
-                    class=${classMap({'flagged-cookie-attribute-row': Boolean(cookie.flagged)})}>
+                    ?highlighted=${cookie.flagged}>
                   <td>
                     ${cookie.icons?.name}
                     ${cookie.name}

front_end/ui/legacy/components/cookie_table/cookiesTable.css

@@ -10,12 +10,4 @@
 
 .cookies-table devtools-icon {
   margin-right: 4px;
-}
-
-.cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(odd) {
-  background-color: var(--sys-color-surface-yellow-high);
-}
-
-.cookies-table tr.revealed.data-grid-data-grid-node.flagged-cookie-attribute-row:not(.selected):nth-child(even) {
-  background-color: var(--sys-color-surface-yellow);
-}
+}

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

@@ -1698,6 +1698,7 @@ export class DataGridNode<T> {
   private selectedInternal: boolean;
   private dirty: boolean;
   private inactive: boolean;
+  private highlighted: boolean;
   private depthInternal!: number|undefined;
   revealedInternal!: boolean|undefined;
   protected attachedInternal: boolean;
@@ -1726,6 +1727,7 @@ export class DataGridNode<T> {
     this.selectedInternal = false;
     this.dirty = false;
     this.inactive = false;
+    this.highlighted = false;
     this.attachedInternal = false;
     this.savedPosition = null;
     this.shouldRefreshChildrenInternal = true;
@@ -1781,6 +1783,9 @@ export class DataGridNode<T> {
     if (this.inactive) {
       this.elementInternal.classList.add('inactive');
     }
+    if (this.highlighted) {
+      this.elementInternal.classList.add('highlighted');
+    }
     if (this.isCreationNode) {
       this.elementInternal.classList.add('creation-node');
     }
@@ -1902,6 +1907,21 @@ export class DataGridNode<T> {
     }
   }
 
+  setHighlighted(highlighted: boolean): void {
+    if (this.highlighted === highlighted) {
+      return;
+    }
+    this.highlighted = highlighted;
+    if (!this.elementInternal) {
+      return;
+    }
+    if (highlighted) {
+      this.elementInternal.classList.add('highlighted');
+    } else {
+      this.elementInternal.classList.remove('highlighted');
+    }
+  }
+
   hasChildren(): boolean {
     return this.hasChildrenInternal;
   }

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

@@ -257,6 +257,15 @@ class DataGridElement extends HTMLElement {
       if (hasBooleanAttribute(element, 'selected')) {
         node.select();
       }
+      if (hasBooleanAttribute(element, 'dirty')) {
+        node.setDirty(true);
+      }
+      if (hasBooleanAttribute(element, 'inactive')) {
+        node.setInactive(true);
+      }
+      if (hasBooleanAttribute(element, 'highlighted')) {
+        node.setHighlighted(true);
+      }
     }
   }
 
@@ -282,7 +291,9 @@ class DataGridElement extends HTMLElement {
       } else if (attributeName === 'dirty') {
         dataGridNode.setDirty(hasBooleanAttribute(dataRow, 'dirty'));
       } else if (attributeName === 'inactive') {
-        dataGridNode.setDirty(hasBooleanAttribute(dataRow, 'inactive'));
+        dataGridNode.setInactive(hasBooleanAttribute(dataRow, 'inactive'));
+      } else if (attributeName === 'highlighted') {
+        dataGridNode.setHighlighted(hasBooleanAttribute(dataRow, 'highlighted'));
       } else {
         dataGridNode.refresh();
       }
@@ -400,6 +411,9 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
     if (this.#configElement.hasAttribute('style')) {
       element.setAttribute('style', this.#configElement.getAttribute('style') || '');
     }
+    for (const classToAdd of this.#configElement.classList) {
+      element.classList.add(classToAdd);
+    }
     return element;
   }
 

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

@@ -288,6 +288,15 @@
   font-style: normal;
 }
 
+.data-grid tr.highlighted:not(.selected) {
+  background-color: var(--sys-color-surface-yellow);
+}
+
+.striped-data-grid .revealed.data-grid-data-grid-node.highlighted:nth-child(odd):not(.dirty, .selected),
+.striped-data-grid-starts-with-odd .revealed.data-grid-data-grid-node.highlighted:nth-child(even):not(.dirty, .selected) {
+  background-color: var(--sys-color-surface-yellow-high);
+}
+
 .data-grid td.show-more {
   white-space: normal;
   gap: var(--sys-size-3);