[RPP] Tweak column for DuplicatedJavaScript; styling for sub-items

https://i.imgur.com/CJJu8Ok.png

Bug: 394373632
Change-Id: I5e74ff18b8797ea48f2aecc0c2ffbd97e39c47ea
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6393949
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>
Auto-Submit: Connor Clark <[email protected]>

Author: Connor Clark

front_end/models/trace/insights/DuplicatedJavaScript.ts

@@ -27,8 +27,8 @@ export const UIStrings = {
       'Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.',
   /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */
   columnSource: 'Source',
-  /** Label for a column in a data table; entries will be the file size of a web resource in kilobytes. */
-  columnResourceSize: 'Resource size',
+  /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */
+  columnDuplicatedBytes: 'Duplicated bytes',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('models/trace/insights/DuplicatedJavaScript.ts', UIStrings);

front_end/panels/timeline/components/insights/DuplicatedJavaScript.ts

@@ -56,7 +56,7 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicateJavaScri
       return {
         values: [source, i18n.ByteUtilities.bytesToString(data.estimatedDuplicateBytes)],
         overlays: [...scriptToOverlay.values()],
-        subRows: data.duplicates.map(({script, attributedSize: resourceSize}) => {
+        subRows: data.duplicates.map(({script, attributedSize: resourceSize}, index) => {
           let overlays: Overlays.Overlays.TimelineOverlay[]|undefined;
           const overlay = scriptToOverlay.get(script);
           if (overlay) {
@@ -66,7 +66,7 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicateJavaScri
           return {
             values: [
               script.request ? eventRef(script.request) : script.url ?? 'unknown',
-              i18n.ByteUtilities.bytesToString(resourceSize),
+              index === 0 ? '--' : i18n.ByteUtilities.bytesToString(resourceSize),
             ],
             overlays,
           };
@@ -80,7 +80,7 @@ export class DuplicatedJavaScript extends BaseInsightComponent<DuplicateJavaScri
         <devtools-performance-table
           .data=${{
             insight: this,
-            headers: [i18nString(UIStrings.columnSource), i18nString(UIStrings.columnResourceSize)],
+            headers: [i18nString(UIStrings.columnSource), i18nString(UIStrings.columnDuplicatedBytes)],
             rows,
           } as TableData}>
         </devtools-performance-table>

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

@@ -223,13 +223,16 @@ export class Table extends HTMLElement {
     const flattenedRows: TableDataRow[] = [];
     const rowEls: Lit.TemplateResult[] = [];
     function traverse(row: TableDataRow, depth = 0): void {
-      const styles = Lit.Directives.styleMap({
+      const thStyles = Lit.Directives.styleMap({
         paddingLeft: `calc(${depth} * var(--sys-size-5))`,
         borderLeft: depth ? 'var(--sys-size-1) solid var(--sys-color-divider)' : '',
       });
+      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" style=${styles}>${value}</th>` : html`<td>${value}</td>`);
-      rowEls.push(html`<tr>${columnEls}</tr>`);
+          (value, i) => i === 0 ? html`<th scope="row" style=${thStyles}>${value}</th>` : html`<td>${value}</td>`);
+      rowEls.push(html`<tr style=${trStyles}>${columnEls}</tr>`);
 
       flattenedRows.push(row);