chrome-devtools-frontend 1.0.1553956 → 1.0.1555430

package/front_end/panels/timeline/components/insights/Table.ts

@@ -1,11 +1,10 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Trace from '../../../../models/trace/trace.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import type * as BaseInsightComponent from './BaseInsightComponent.js';
@@ -48,7 +47,7 @@ export interface TableState {
   selectionIsSticky: boolean;
 }
 
-export interface TableData {
+interface TableData {
   insight: BaseInsightComponent;
   headers: string[];
   rows: TableDataRow[];
@@ -60,6 +59,11 @@ export interface TableDataRow {
   subRows?: TableDataRow[];
 }
 
+interface FlattenedTableDataRow {
+  row: TableDataRow;
+  depth: number;
+}
+
 export function renderOthersLabel(numOthers: number): string {
   return i18nString(UIStrings.others, {PH1: numOthers});
 }
@@ -94,113 +98,195 @@ export function createLimitedRows<T>(arr: T[], aggregator: RowLimitAggregator<T>
   return items;
 }
 
-export class Table extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+interface ViewInput {
+  interactive: boolean;
+  headers: string[];
+  flattenedRows: FlattenedTableDataRow[];
+
+  onHoverRow: (row: TableDataRow, rowEl: HTMLElement) => void;
+  onClickRow: (row: TableDataRow, rowEl: HTMLElement) => void;
+  onMouseLeave: () => void;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    interactive,
+    headers,
+    flattenedRows,
+    onHoverRow,
+    onClickRow,
+    onMouseLeave,
+  } = input;
+
+  const numColumns = headers.length;
+
+  function renderRow({row, depth}: FlattenedTableDataRow): Lit.TemplateResult {
+    const thStyles = Lit.Directives.styleMap({
+      paddingLeft: `calc(${depth} * var(--sys-size-5))`,
+      backgroundImage: `repeating-linear-gradient(
+            to right,
+            var(--sys-color-tonal-outline) 0 var(--sys-size-1),
+            transparent var(--sys-size-1) var(--sys-size-5)
+          )`,
+      backgroundPosition: '0 0',
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: `calc(${depth} * var(--sys-size-5))`,
+    });
+    const trStyles = Lit.Directives.styleMap({
+      color: depth ? 'var(--sys-color-on-surface-subtle)' : '',
+    });
+    const columnEls = row.values.map(
+        (value, i) => i === 0 ? html`<th
+              scope="row"
+              colspan=${i === row.values.length - 1 ? numColumns - i : 1}
+              style=${thStyles}>${value}
+            </th>` :
+                                html`<td>${value}</td>`);
+    return html`<tr style=${trStyles}>${columnEls}</tr>`;
+  }
+
+  const findRowAndEl = (el: HTMLElement): {row: TableDataRow, rowEl: HTMLElement} => {
+    const rowEl = el.closest('tr') as HTMLTableRowElement;
+    const row = flattenedRows[rowEl.sectionRowIndex].row;
+    return {row, rowEl};
+  };
+
+  // clang-format off
+  Lit.render(html`
+    <style>${tableStyles}</style>
+    <table
+        class=${Lit.Directives.classMap({
+        interactive,
+      })}
+        @mouseleave=${interactive ? onMouseLeave : null}>
+      <thead>
+        <tr>
+          ${headers.map(h => html`<th scope="col">${h}</th>`)}
+        </tr>
+      </thead>
+      <tbody
+        @mouseover=${interactive ? (e: Event) => {
+          const {row, rowEl} = findRowAndEl(e.target as HTMLElement);
+          onHoverRow(row, rowEl);
+        } : null}
+        @click=${interactive ? (e: Event) => {
+          const {row, rowEl} = findRowAndEl(e.target as HTMLElement);
+          onClickRow(row, rowEl);
+        } : null}
+      >${flattenedRows.map(renderRow)}</tbody>
+    </table>`,
+    target);
+  // clang-format on
+};
+
+export class Table extends UI.Widget.Widget {
+  #view: View;
   #insight?: BaseInsightComponent;
   #state?: TableState;
   #headers?: string[];
   /** The rows as given as by the user, which may include recursive rows via subRows. */
   #rows?: TableDataRow[];
   /** All rows/subRows, in the order that they appear visually. This is the result of traversing `#rows` and any subRows found. */
-  #flattenedRows?: TableDataRow[];
+  #flattenedRows?: FlattenedTableDataRow[];
   #rowToParentRow = new Map<TableDataRow, TableDataRow>();
   #interactive = false;
-  #currentHoverIndex: number|null = null;
+  #currentHoverRow: TableDataRow|null = null;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
   set data(data: TableData) {
     this.#insight = data.insight;
     this.#state = data.insight.sharedTableState;
     this.#headers = data.headers;
     this.#rows = data.rows;
+    this.#flattenedRows = this.#createFlattenedRows();
     // If this table isn't interactive, don't attach mouse listeners or use CSS :hover.
     this.#interactive = this.#rows.some(row => row.overlays || row.subRows?.length);
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  connectedCallback(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+    this.requestUpdate();
   }
 
-  #onHoverRow(e: MouseEvent): void {
-    if (!this.#flattenedRows) {
-      return;
+  #createFlattenedRows(): FlattenedTableDataRow[] {
+    if (!this.#rows) {
+      return [];
     }
 
-    if (!(e.target instanceof HTMLElement)) {
-      return;
+    const rowToParentRow = this.#rowToParentRow;
+    rowToParentRow.clear();
+
+    const flattenedRows: FlattenedTableDataRow[] = [];
+    function traverse(parent: TableDataRow|null, row: TableDataRow, depth = 0): void {
+      if (parent) {
+        rowToParentRow.set(row, parent);
+      }
+
+      flattenedRows.push({depth, row});
+
+      for (const subRow of row.subRows ?? []) {
+        traverse(row, subRow, depth + 1);
+      }
     }
 
-    const rowEl = e.target.closest('tr');
-    if (!rowEl?.parentElement) {
-      return;
+    for (const row of this.#rows) {
+      traverse(null, row);
     }
 
-    const rowEls = [...rowEl.parentElement.children];
-    const index = rowEl.sectionRowIndex;
-    if (index === this.#currentHoverIndex) {
+    return flattenedRows;
+  }
+
+  #onHoverRow(row: TableDataRow, rowEl: HTMLElement): void {
+    if (row === this.#currentHoverRow) {
       return;
     }
 
-    for (const el of rowEl.parentElement.querySelectorAll('.hover')) {
+    for (const el of this.element.querySelectorAll('.hover')) {
       el.classList.remove('hover');
     }
 
     // Add 'hover' class to all parent rows.
-    let row: TableDataRow|undefined = this.#rowToParentRow.get(this.#flattenedRows[index]);
-    while (row) {
-      const index = this.#flattenedRows.indexOf(row);
-      const rowEl = rowEls[index];
+    let curRow: TableDataRow|undefined = this.#rowToParentRow.get(row);
+    while (curRow) {
       rowEl.classList.add('hover');
-      row = this.#rowToParentRow.get(row);
+      curRow = this.#rowToParentRow.get(row);
     }
 
-    this.#currentHoverIndex = index;
+    this.#currentHoverRow = row;
     // Temporarily selects the row, but only if there is not already a sticky selection.
-    this.#onSelectedRowChanged(rowEl, index, {isHover: true});
+    this.#onSelectedRowChanged(row, rowEl, {isHover: true});
   }
 
-  #onClickRow(e: MouseEvent): void {
-    if (!(e.target instanceof HTMLElement)) {
-      return;
-    }
-
-    const rowEl = e.target.closest('tr');
-    if (!rowEl?.parentElement) {
-      return;
-    }
-
-    const index = [...rowEl.parentElement.children].indexOf(rowEl);
-    if (index === -1) {
-      return;
-    }
-
+  #onClickRow(row: TableDataRow, rowEl: HTMLElement): void {
     // If the desired overlays consist of just a single ENTRY_OUTLINE, then
     // it is more intuitive to just select the target event.
-    const overlays = this.#flattenedRows?.[index]?.overlays;
+    const overlays = row.overlays;
     if (overlays?.length === 1 && overlays[0].type === 'ENTRY_OUTLINE') {
-      this.dispatchEvent(new EventReferenceClick(overlays[0].entry));
+      this.element.dispatchEvent(new EventReferenceClick(overlays[0].entry));
       return;
     }
 
     // Select the row and make it sticky.
-    this.#onSelectedRowChanged(rowEl, index, {sticky: true});
+    this.#onSelectedRowChanged(row, rowEl, {sticky: true});
   }
 
   #onMouseLeave(): void {
-    for (const el of this.shadowRoot?.querySelectorAll('.hover') ?? []) {
+    for (const el of this.element.shadowRoot?.querySelectorAll('.hover') ?? []) {
       el.classList.remove('hover');
     }
 
-    this.#currentHoverIndex = null;
+    this.#currentHoverRow = null;
     // Unselect the row, unless it's sticky.
     this.#onSelectedRowChanged(null, null);
   }
 
-  #onSelectedRowChanged(rowEl: HTMLElement|null, rowIndex: number|null, opts: {
+  #onSelectedRowChanged(row: TableDataRow|null, rowEl: HTMLElement|null, opts: {
     sticky?: boolean,
     isHover?: boolean,
   } = {}): void {
-    if (!this.#flattenedRows || !this.#state || !this.#insight) {
+    if (!this.#state || !this.#insight) {
       return;
     }
 
@@ -214,8 +300,8 @@ export class Table extends HTMLElement {
       opts.sticky = false;
     }
 
-    if (rowEl && rowIndex !== null) {
-      const overlays = this.#flattenedRows[rowIndex].overlays;
+    if (rowEl && row) {
+      const overlays = row.overlays;
       if (overlays) {
         this.#insight.toggleTemporaryOverlays(overlays, {updateTraceWindow: !opts.isHover});
       }
@@ -229,83 +315,19 @@ export class Table extends HTMLElement {
     this.#state.selectionIsSticky = opts.sticky ?? false;
   }
 
-  async #render(): Promise<void> {
-    if (!this.#headers || !this.#rows) {
+  override performUpdate(): void {
+    if (!this.#headers || !this.#flattenedRows) {
       return;
     }
 
-    const rowToParentRow = this.#rowToParentRow;
-    rowToParentRow.clear();
-
-    const numColumns = this.#headers.length;
-    const flattenedRows: TableDataRow[] = [];
-    const rowEls: Lit.TemplateResult[] = [];
-    function traverse(parent: TableDataRow|null, row: TableDataRow, depth = 0): void {
-      if (parent) {
-        rowToParentRow.set(row, parent);
-      }
-
-      const thStyles = Lit.Directives.styleMap({
-        paddingLeft: `calc(${depth} * var(--sys-size-5))`,
-        backgroundImage: `repeating-linear-gradient(
-              to right,
-              var(--sys-color-tonal-outline) 0 var(--sys-size-1),
-              transparent var(--sys-size-1) var(--sys-size-5)
-            )`,
-        backgroundPosition: '0 0',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: `calc(${depth} * var(--sys-size-5))`,
-      });
-      const trStyles = Lit.Directives.styleMap({
-        color: depth ? 'var(--sys-color-on-surface-subtle)' : '',
-      });
-      const columnEls = row.values.map(
-          (value, i) => i === 0 ? html`<th
-                scope="row"
-                colspan=${i === row.values.length - 1 ? numColumns - i : 1}
-                style=${thStyles}>${value}
-              </th>` :
-                                  html`<td>${value}</td>`);
-      rowEls.push(html`<tr style=${trStyles}>${columnEls}</tr>`);
-
-      flattenedRows.push(row);
-
-      for (const subRow of row.subRows ?? []) {
-        traverse(row, subRow, depth + 1);
-      }
-    }
-
-    for (const row of this.#rows) {
-      traverse(null, row);
-    }
-
-    this.#flattenedRows = flattenedRows;
-
-    Lit.render(
-        html`<style>${tableStyles}</style>
-      <table
-          class=${Lit.Directives.classMap({
-          interactive: this.#interactive,
-        })}
-          @mouseleave=${this.#interactive ? this.#onMouseLeave : null}>
-        <thead>
-          <tr>
-          ${this.#headers.map(h => html`<th scope="col">${h}</th>`)}
-          </tr>
-        </thead>
-        <tbody
-          @mouseover=${this.#interactive ? this.#onHoverRow : null}
-          @click=${this.#interactive ? this.#onClickRow : null}
-        >${rowEls}</tbody>
-      </table>`,
-        this.#shadow, {host: this});
+    const input: ViewInput = {
+      interactive: this.#interactive,
+      headers: this.#headers,
+      flattenedRows: this.#flattenedRows,
+      onHoverRow: this.#onHoverRow.bind(this),
+      onClickRow: this.#onClickRow.bind(this),
+      onMouseLeave: this.#onMouseLeave.bind(this),
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-table': Table;
-  }
-}
-
-customElements.define('devtools-performance-table', Table);

package/front_end/panels/timeline/components/insights/ThirdParties.ts

@@ -5,14 +5,16 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {ThirdPartiesInsightModel} from '../../../../models/trace/insights/ThirdParties.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
-import {createLimitedRows, renderOthersLabel, type RowLimitAggregator} from './Table.js';
+import {createLimitedRows, renderOthersLabel, type RowLimitAggregator, Table} from './Table.js';
 
 const {UIStrings, i18nString, createOverlaysForSummary} = Trace.Insights.Models.ThirdParties;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 const MAX_TO_SHOW = 5;
 
@@ -77,13 +79,13 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-performance-table
-            .data=${{
+          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
               rows,
-            }}>
-          </devtools-performance-table>
+            }})}>
+          </devtools-widget>
         </div>
       `);
       // clang-format on
@@ -94,13 +96,13 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-performance-table
-            .data=${{
+          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnMainThreadTime)],
               rows,
-            }}>
-          </devtools-performance-table>
+            }})}>
+          </devtools-widget>
         </div>
       `);
       // clang-format on

package/front_end/panels/timeline/components/sidebarInsightsTab.css

@@ -4,68 +4,70 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: flex;
-  flex-flow: column nowrap;
-  flex-grow: 1;
-}
-
-.insight-sets-wrapper {
-  display: flex;
-  flex-flow: column nowrap;
-  flex-grow: 1; /* so it fills the available vertical height in the sidebar */
-
-  details {
-    flex-grow: 0;
-  }
-
-  details[open] {
+@scope to (devtools-widget > *) {
+  :host {
+    display: flex;
+    flex-flow: column nowrap;
     flex-grow: 1;
-    border-bottom: 1px solid var(--sys-color-divider);
   }
 
-  summary {
-    background-color: var(--sys-color-surface2);
-    border-bottom: 1px solid var(--sys-color-divider);
-    overflow: hidden;
-    padding: 2px 5px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font: var(--sys-typescale-body4-medium);
+  .insight-sets-wrapper {
     display: flex;
-    align-items: center;
+    flex-flow: column nowrap;
+    flex-grow: 1; /* so it fills the available vertical height in the sidebar */
 
-    &:focus {
-      background-color: var(--sys-color-tonal-container);
+    details {
+      flex-grow: 0;
     }
 
-    &::marker {
-      color: var(--sys-color-on-surface-subtle);
-      font-size: 11px;
-      line-height: 1;
+    details[open] {
+      flex-grow: 1;
+      border-bottom: 1px solid var(--sys-color-divider);
     }
 
-    /* make sure the first summary has a top border */
-    details:first-child & {
-      border-top: 1px solid var(--sys-color-divider);
+    summary {
+      background-color: var(--sys-color-surface2);
+      border-bottom: 1px solid var(--sys-color-divider);
+      overflow: hidden;
+      padding: 2px 5px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font: var(--sys-typescale-body4-medium);
+      display: flex;
+      align-items: center;
+
+      &:focus {
+        background-color: var(--sys-color-tonal-container);
+      }
+
+      &::marker {
+        color: var(--sys-color-on-surface-subtle);
+        font-size: 11px;
+        line-height: 1;
+      }
+
+      /* make sure the first summary has a top border */
+      details:first-child & {
+        border-top: 1px solid var(--sys-color-divider);
+      }
     }
   }
-}
-
-.zoom-button {
-  margin-left: auto;
-}
 
-.zoom-icon {
-  visibility: hidden;
+  .zoom-button {
+    margin-left: auto;
+  }
 
-  &.active devtools-button {
-    visibility: visible;
+  .zoom-icon {
+    visibility: hidden;
+  
+    &.active devtools-button {
+      visibility: visible;
+    }
   }
-}
 
-.dropdown-icon {
-  &.active devtools-button {
-    transform: rotate(90deg);
+  .dropdown-icon {
+    &.active devtools-button {
+      transform: rotate(90deg);
+    }
   }
 }

package/front_end/panels/timeline/components/timelineSummary.css

@@ -3,69 +3,70 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+@scope to (devtools-widget > *){
+  .timeline-summary {
+    max-height: 100%;
+    overflow: hidden auto;
+    scrollbar-width: thin; /* ~11px wide reserved for gutter */
+    font-size: var(--sys-typescale-body4-size);
+    flex-direction: column;
+    padding: 0 var(--sys-size-6) var(--sys-size-4) var(--sys-size-8) ;
+    /* The category summary can't be more narrow than this, so we'll force a horizontal scrollbar
+    */
+    min-width: 192px;
+  }
 
-:host {
-  max-height: 100%;
-  overflow: hidden auto;
-  scrollbar-width: thin; /* ~11px wide reserved for gutter */
-}
+  .summary-range {
+    font-weight: var(--ref-typeface-weight-medium);
+    height: 24.5px;
+    line-height: 22px;
+  }
 
-.timeline-summary {
-  font-size: var(--sys-typescale-body4-size);
-  flex-direction: column;
-  padding: 0 var(--sys-size-6) var(--sys-size-4) var(--sys-size-8) ;
-}
+  .category-summary {
+    gap: var(--sys-size-4);
+    display: flex;
+    flex-direction: column;
+  }
 
-.summary-range {
-  font-weight: var(--ref-typeface-weight-medium);
-  height: 24.5px;
-  line-height: 22px;
-}
+  .category-row {
+    min-height: 16px;
+    line-height: 16px;
+  }
 
-.category-summary {
-  gap: var(--sys-size-4);
-  display: flex;
-  flex-direction: column;
-}
+  .category-swatch {
+    display: inline-block;
+    width: var(--sys-size-6);
+    height: var(--sys-size-6);
+    margin-right: var(--sys-size-4);
+    top: var(--sys-size-1);
+    position: relative;
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  }
 
-.category-row {
-  min-height: 16px;
-  line-height: 16px;
-}
+  .category-name {
+    display: inline;
+    word-break: break-all;
+  }
 
-.category-swatch {
-  display: inline-block;
-  width: var(--sys-size-6);
-  height: var(--sys-size-6);
-  margin-right: var(--sys-size-4);
-  top: var(--sys-size-1);
-  position: relative;
-  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
-}
+  .category-value {
+    text-align: right;
+    position: relative;
+    float: right;
+    z-index: 0;
+    width: var(--sys-size-19);
+  }
 
-.category-name {
-  display: inline;
-  word-break: break-all;
-}
-
-.category-value {
-  text-align: right;
-  position: relative;
-  float: right;
-  z-index: 0;
-  width: var(--sys-size-19);
-}
-
-.background-bar-container {
-  position: absolute;
-  inset: 0 0 0 var(--sys-size-3);
-  z-index: -1;
-}
+  .background-bar-container {
+    position: absolute;
+    inset: 0 0 0 var(--sys-size-3);
+    z-index: -1;
+  }
 
-.background-bar {
-  width: 100%;
-  float: right;
-  height: var(--sys-size-8);
-  background-color: var(--sys-color-surface-yellow);
-  border-bottom: var(--sys-size-1) solid var(--sys-color-yellow-outline);
+  .background-bar {
+    width: 100%;
+    float: right;
+    height: var(--sys-size-8);
+    background-color: var(--sys-color-surface-yellow);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-yellow-outline);
+  }
 }