Use <devtools-new-data-grid> in the Autofill View

To make it highlight on hover work, added delegation for mouseenter and mouseleave events

Bug: 390346490
Change-Id: I0275d9e41de80b2c5f93482d7a9268054f8c820d
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6214430
Reviewed-by: Wolfgang Beyer <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/autofill/AutofillView.test.ts

@@ -6,7 +6,7 @@ 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 AutofillManager from '../../models/autofill_manager/autofill_manager.js';
-import {assertGridContents, getBodyRowByAriaIndex, getDataGrid} from '../../testing/DataGridHelpers.js';
+import {assertGridContents} from '../../testing/DataGridHelpers.js';
 import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {createTarget, stubNoopSettings} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
@@ -110,9 +110,12 @@ describeWithMockConnection('AutofillView', () => {
 
   const renderAutofillView = async () => {
     const view = new Autofill.AutofillView.AutofillView();
+    view.style.display = 'block';
+    view.style.width = '640px';
+    view.style.height = '480px';
     renderElementIntoDOM(view);
     await view.render();
-    await RenderCoordinator.done();
+    await RenderCoordinator.done({waitForWork: true});
     return view;
   };
 
@@ -121,12 +124,12 @@ describeWithMockConnection('AutofillView', () => {
     const addressText = [...addressSpans].map(div => div.textContent);
     assert.deepEqual(
         addressText, ['Crocodile', ' Middle ', 'Dundee', 'Uluru ToursOutback Road 1Bundaberg Queensland ', '12345']);
-    const expectedHeaders = ['Form field', 'Predicted autofill value', 'Value', 'filledFieldIndex'];
+    const expectedHeaders = ['Form field', 'Predicted autofill value', 'Value'];
     const expectedRows = [
-      ['#input1 (text)', 'First name \nheur', '"Crocodile"', ''],
-      ['input2 (text)', 'Last name \nheur', '"Dundee"', ''],
-      ['#input3 (text)', 'Country \nheur', '"Australia"', ''],
-      ['#input4 (text)', 'Zip code \nattr', '"12345"', ''],
+      ['#input1 (text)', 'First name \nheur', '"Crocodile"'],
+      ['input2 (text)', 'Last name \nheur', '"Dundee"'],
+      ['#input3 (text)', 'Country \nheur', '"Australia"'],
+      ['#input4 (text)', 'Zip code \nattr', '"12345"'],
     ];
     assertGridContents(view, expectedHeaders, expectedRows);
   };
@@ -219,9 +222,9 @@ describeWithMockConnection('AutofillView', () => {
     const crocodileSpan = addressSpans[0];
     assert.strictEqual(crocodileSpan.textContent, 'Crocodile');
     assert.isFalse(crocodileSpan.classList.contains('highlighted'));
-    const grid = getDataGrid(view);
+    const grid = view.shadowRoot!.querySelector('devtools-new-data-grid')!;
     assert.isNotNull(grid.shadowRoot);
-    const firstGridRow = getBodyRowByAriaIndex(grid.shadowRoot, 1);
+    const firstGridRow = grid.shadowRoot!.querySelector('tbody tr[jslog]')!;
     let styles = firstGridRow.getAttribute('style') || '';
     assert.strictEqual(styles.replace(/\s/g, ''), monospaceStyles);
 
@@ -265,9 +268,9 @@ describeWithMockConnection('AutofillView', () => {
     const zipCodeSpan = addressSpans[4];
     assert.strictEqual(zipCodeSpan.textContent, '12345');
     assert.isFalse(zipCodeSpan.classList.contains('highlighted'));
-    const grid = getDataGrid(view);
+    const grid = view.shadowRoot!.querySelector('devtools-new-data-grid')!;
     assert.isNotNull(grid.shadowRoot);
-    const fourthGridRow = getBodyRowByAriaIndex(grid.shadowRoot, 4);
+    const fourthGridRow = grid.shadowRoot!.querySelector('tbody tr[jslog]:nth-child(5)')!;
     fourthGridRow.dispatchEvent(new MouseEvent('mouseenter'));
     await RenderCoordinator.done({waitForWork: true});
     assert.isTrue(zipCodeSpan.classList.contains('highlighted'));

front_end/panels/autofill/AutofillView.ts

@@ -3,15 +3,14 @@
 // found in the LICENSE file.
 
 import '../../ui/components/adorners/adorners.js';
-import '../../ui/components/data_grid/data_grid.js';
+import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AutofillManager from '../../models/autofill_manager/autofill_manager.js';
-import type * as DataGrid from '../../ui/components/data_grid/data_grid.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
@@ -20,7 +19,8 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import autofillViewStyles from './autofillView.css.js';
 
-const {html} = Lit;
+const {html, render, Directives: {styleMap}} = Lit;
+const {FillingStrategy} = Protocol.Autofill;
 
 const UIStrings = {
   /**
@@ -166,7 +166,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
     if (!this.#address && !this.#filledFields.length) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      Lit.render(html`
+      render(html`
         <main>
           <div class="top-left-corner">
             <label class="checkbox-label" title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}>
@@ -201,7 +201,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    Lit.render(html`
+    render(html`
       <main>
         <div class="content-container" jslog=${VisualLogging.pane('autofill')}>
           <div class="right-to-left" role="region" aria-label=${i18nString(UIStrings.addressPreview)}>
@@ -320,64 +320,54 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
       return Lit.nothing;
     }
 
-    const gridData: DataGrid.DataGridController.DataGridControllerData = {
-      columns: [
-        {
-          id: 'name',
-          title: i18nString(UIStrings.formField),
-          widthWeighting: 50,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-        {
-          id: 'autofill-type',
-          title: i18nString(UIStrings.predictedAutofillValue),
-          widthWeighting: 50,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-        {
-          id: 'value',
-          title: i18nString(UIStrings.value),
-          widthWeighting: 50,
-          hideable: false,
-          visible: true,
-          sortable: true,
-        },
-        {
-          id: 'filled-field-index',
-          title: 'filledFieldIndex',
-          widthWeighting: 50,
-          hideable: true,
-          visible: false,
-        },
-      ],
-      rows: this.#buildReportRows(),
-      striped: true,
-    };
-
+    const highlightedGridRows = new Set(this.#highlightedMatches.map(match => match.filledFieldIndex));
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
       <div class="grid-wrapper" role="region" aria-label=${i18nString(UIStrings.formInspector)}>
-        <devtools-data-grid-controller
-          @rowmouseenter=${this.#onGridRowMouseEnter}
-          @rowmouseleave=${this.#onGridRowMouseLeave}
+        <devtools-new-data-grid
+          striped
           class="filled-fields-grid"
-          .data=${gridData}>
-        </devtools-data-grid-controller>
+        >
+          <table>
+            <tr>
+              <th id="name" weight="50" sortable>${i18nString(UIStrings.formField)}</th>
+              <th id="autofill-type" weight="50" sortable>${i18nString(UIStrings.predictedAutofillValue)}</th>
+              <th id="value" weight="50" sortable>${i18nString(UIStrings.value)}</th>
+            </tr>
+            ${this.#filledFields.map((field, index) => html`
+                <tr style=${styleMap({
+                    'font-family': 'var(--monospace-font-family)',
+                    'font-size': 'var(--monospace-font-size)',
+                    'background-color': highlightedGridRows.has(index) ? 'var(--sys-color-state-hover-on-subtle)' : null,
+                  })}
+                  @mouseenter=${() => this.#onGridRowMouseEnter(index)}
+                  @mouseleave=${this.#onGridRowMouseLeave.bind(this)}
+                >
+                  <td>${field.name || `#${field.id}`} (${field.htmlType})</td>
+                  <td>
+                      ${field.autofillType}
+                      ${field.fillingStrategy === FillingStrategy.AutocompleteAttribute ?
+                            html`<devtools-adorner title=${i18nString(UIStrings.autocompleteAttribute)} .data=${{name: field.fillingStrategy}}>
+                              <span slot="content">${i18nString(UIStrings.attr)}</span>
+                            </devtools-adorner>` :
+                        field.fillingStrategy === FillingStrategy.AutofillInferred ?
+                            html`<devtools-adorner title=${i18nString(UIStrings.inferredByHeuristics)} .data=${{name: field.fillingStrategy}}>
+                              <span slot="content">${i18nString(UIStrings.heur)}</span>
+                            </devtools-adorner>` :
+                            Lit.nothing}
+                  </td>
+                  <td>"${field.value}"</td>
+                </tr>`
+            )}
+          </table>
+        </devtools-new-data-grid>
       </div>
     `;
     // clang-format on
   }
 
-  #onGridRowMouseEnter(event: DataGrid.DataGridEvents.RowMouseEnterEvent): void {
-    const rowIndex = event.data.row.cells[3].value;
-    if (typeof rowIndex !== 'number') {
-      return;
-    }
+  #onGridRowMouseEnter(rowIndex: number): void {
     this.#highlightedMatches = this.#matches.filter(match => match.filledFieldIndex === rowIndex);
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
 
@@ -400,57 +390,6 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
     SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
   }
-
-  #buildReportRows(): DataGrid.DataGridUtils.Row[] {
-    const highlightedGridRows = new Set(this.#highlightedMatches.map(match => match.filledFieldIndex));
-
-    return this.#filledFields.map(
-        (field, index) => {
-          const fieldName = field.name || `#${field.id}`;
-          return {
-            cells: [
-              {columnId: 'name', value: `${fieldName} (${field.htmlType})`},
-              {
-                columnId: 'autofill-type',
-                value: field.autofillType,
-                renderer: () => this.#autofillTypeRenderer(field.autofillType, field.fillingStrategy),
-              },
-              {columnId: 'value', value: `"${field.value}"`},
-              {columnId: 'filled-field-index', value: index},
-            ],
-            styles: {
-              'font-family': 'var(--monospace-font-family)',
-              'font-size': 'var(--monospace-font-size)',
-              ...(highlightedGridRows.has(index) && {'background-color': 'var(--sys-color-state-hover-on-subtle)'}),
-            },
-          };
-        },
-    );
-  }
-
-  #autofillTypeRenderer(autofillType: string, fillingStrategy: Protocol.Autofill.FillingStrategy): Lit.TemplateResult {
-    const adornerContent = document.createElement('span');
-    let adornerTitle = '';
-    switch (fillingStrategy) {
-      case Protocol.Autofill.FillingStrategy.AutocompleteAttribute:
-        adornerContent.textContent = i18nString(UIStrings.attr);
-        adornerTitle = i18nString(UIStrings.autocompleteAttribute);
-        break;
-      case Protocol.Autofill.FillingStrategy.AutofillInferred:
-        adornerContent.textContent = i18nString(UIStrings.heur);
-        adornerTitle = i18nString(UIStrings.inferredByHeuristics);
-    }
-
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      ${autofillType}
-      ${adornerContent.textContent ? html`
-          <devtools-adorner title=${adornerTitle} .data=${{name: fillingStrategy, content: adornerContent}}></devtools-adorner>
-        `: Lit.nothing}
-    `;
-    // clang-format on
-  }
 }
 
 customElements.define('devtools-autofill-view', AutofillView);

front_end/panels/autofill/BUILD.gn

@@ -20,8 +20,8 @@ devtools_module("autofill") {
     "../../core/platform:bundle",
     "../../core/sdk:bundle",
     "../../models/autofill_manager:bundle",
-    "../../ui/components/data_grid:bundle",
     "../../ui/components/legacy_wrapper:bundle",
+    "../../ui/legacy/components/data_grid:bundle",
   ]
 }
 

front_end/panels/autofill/autofillView.css

@@ -46,6 +46,11 @@ main {
   flex-grow: 1;
 }
 
+devtools-new-data-grid {
+  border: none;
+  height: 100%;
+}
+
 .checkbox-label {
   display: flex;
   align-items: center;

front_end/ui/components/adorners/Adorner.ts

@@ -12,7 +12,7 @@ const {render, html} = Lit;
 
 export interface AdornerData {
   name: string;
-  content: HTMLElement;
+  content?: HTMLElement;
   jslogContext?: string;
 }
 
@@ -29,13 +29,21 @@ export class Adorner extends HTMLElement {
   set data(data: AdornerData) {
     this.name = data.name;
     this.#jslogContext = data.jslogContext;
-    data.content.slot = 'content';
-    this.#content?.remove();
-    this.append(data.content);
-    this.#content = data.content;
+    if (data.content) {
+      data.content.slot = 'content';
+      this.#content?.remove();
+      this.append(data.content);
+      this.#content = data.content;
+    }
     this.#render();
   }
 
+  override cloneNode(deep?: boolean): Node {
+    const node = super.cloneNode(deep) as Adorner;
+    node.data = {name: this.name, content: this.#content, jslogContext: this.#jslogContext};
+    return node;
+  }
+
   connectedCallback(): void {
     if (!this.getAttribute('aria-label')) {
       this.setAttribute('aria-label', this.name);

front_end/ui/legacy/components/data_grid/BUILD.gn

@@ -40,6 +40,7 @@ devtools_entrypoint("bundle") {
   visibility = [
     ":*",
     "../../../../panels/application/*",
+    "../../../../panels/autofill/*",
     "../../../../panels/console/*",
     "../../../../panels/coverage/*",
     "../../../../panels/css_overview/*",

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

@@ -280,17 +280,32 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
       const columnId = this.#dataGridElement.columnsOrder[i];
       this.data[columnId] = cell.dataset.value ?? cell.textContent ?? '';
     }
+    if (this.#configElement.hasAttribute('selected')) {
+      this.select();
+    }
+  }
+
+  override createElement(): HTMLElement {
+    const element = super.createElement();
+    element.addEventListener('click', this.#onRowMouseEvent.bind(this));
+    element.addEventListener('mouseenter', this.#onRowMouseEvent.bind(this));
+    element.addEventListener('mouseleave', this.#onRowMouseEvent.bind(this));
+    if (this.#configElement.hasAttribute('style')) {
+      element.setAttribute('style', this.#configElement.getAttribute('style') || '');
+    }
+    return element;
   }
 
   override refresh(): void {
     this.#updateData();
-    if (this.#configElement.hasAttribute('selected')) {
-      this.select();
-    }
     super.refresh();
+    const existingElement = this.existingElement();
+    if (existingElement && this.#configElement.hasAttribute('style')) {
+      existingElement.setAttribute('style', this.#configElement.getAttribute('style') || '');
+    }
   }
 
-  #onCellClick(configCell: HTMLElement, event: MouseEvent): void {
+  #onRowMouseEvent(event: MouseEvent): void {
     let currentElement = event.target as HTMLElement;
     const childIndexesOnPathToRoot: number[] = [];
     while (currentElement?.parentElement && currentElement !== event.currentTarget) {
@@ -300,12 +315,12 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
     if (!currentElement) {
       throw new Error('Cell click event target not found in the data grid');
     }
-    let targetInConfigCell: Element = configCell;
+    let targetInConfigRow = this.#configElement;
     for (const index of childIndexesOnPathToRoot.reverse()) {
-      targetInConfigCell = targetInConfigCell.children[index];
+      targetInConfigRow = targetInConfigRow.children[index];
     }
-    if (targetInConfigCell instanceof HTMLElement) {
-      targetInConfigCell?.click();
+    if (targetInConfigRow instanceof HTMLElement) {
+      targetInConfigRow?.dispatchEvent(new MouseEvent(event.type, {bubbles: true, composed: true}));
     }
   }
 
@@ -316,7 +331,6 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
       throw new Error(`Column ${columnId} not found in the data grid`);
     }
     const cell = this.createTD(columnId);
-    cell.addEventListener('click', this.#onCellClick.bind(this, configCell));
     for (const child of configCell.childNodes) {
       cell.appendChild(child.cloneNode(true));
     }