[ImageDeliver] Combine images into one list

https://screenshot.googleplex.com/5gkWCqJ5c9tTDzG

Bug: 372897377
Change-Id: Id0ae9d67407be27a14e8a290809a9f6a0923d83a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6072711
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>

Author: Adam Raine

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

@@ -84,7 +84,6 @@ class ImageRef extends HTMLElement {
   readonly #boundRender = this.#render.bind(this);
 
   #request?: Trace.Types.Events.SyntheticNetworkRequest;
-  #imagePaint?: Trace.Types.Events.PaintImage;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [baseInsightComponentStyles];
@@ -95,11 +94,6 @@ class ImageRef extends HTMLElement {
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
-  set imagePaint(imagePaint: Trace.Types.Events.PaintImage|undefined) {
-    this.#imagePaint = imagePaint;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
   #render(): void {
     if (!this.#request) {
       return;
@@ -117,9 +111,7 @@ class ImageRef extends HTMLElement {
         <span class="element-img-details">
           ${eventRef(this.#request)}
           <span class="element-img-details-size">${
-            this.#imagePaint ?
-              `${this.#imagePaint.args.data.srcWidth}x${this.#imagePaint.args.data.srcHeight}` :
-              i18n.ByteUtilities.bytesToString(this.#request.args.data.decodedBodyLength ?? 0)
+            i18n.ByteUtilities.bytesToString(this.#request.args.data.decodedBodyLength ?? 0)
           }</span>
         </span>
       </div>
@@ -133,13 +125,10 @@ function handleBadImage(event: Event): void {
   img.style.display = 'none';
 }
 
-export function imageRef(
-    request: Trace.Types.Events.SyntheticNetworkRequest,
-    imagePaint?: Trace.Types.Events.PaintImage): LitHtml.TemplateResult {
+export function imageRef(request: Trace.Types.Events.SyntheticNetworkRequest): LitHtml.TemplateResult {
   return html`
     <devtools-performance-image-ref
       .request=${request}
-      .imagePaint=${imagePaint}
     ></devtools-performance-image-ref>
   `;
 }

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

@@ -6,10 +6,8 @@ import '../../../../ui/components/icon_button/icon_button.js';
 import './Table.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
-import type {
-  ImageDeliveryInsightModel, ImageOptimizationType, OptimizableImage} from
-  '../../../../models/trace/insights/ImageDelivery.js';
-import * as Trace from '../../../../models/trace/trace.js';
+import type {ImageDeliveryInsightModel} from '../../../../models/trace/insights/ImageDelivery.js';
+import type * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
@@ -20,10 +18,6 @@ import type {TableDataRow} from './Table.js';
 const {html} = LitHtml;
 
 const UIStrings = {
-  /**
-   * @description Column header for a table column containing network requests for images that are not sized correctly for how they are displayed on the page.
-   */
-  sizeAppropriately: 'Size appropriately',
   /**
    * @description Column header for a table column containing network requests for images which can improve their file size (e.g. use a different format, increase compression, etc).
    */
@@ -38,6 +32,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/ImageDelivery.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const MAX_REQUESTS = 6;
+
 export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-image-delivery`;
   override internalName: string = 'image-delivery';
@@ -59,88 +55,48 @@ export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightMode
     };
   }
 
-  #getTopImagesAsRows(
-      optimizableImages: OptimizableImage[], typeFilter: (type: ImageOptimizationType) => boolean,
-      showDimensions?: boolean): TableDataRow[] {
-    const MAX_REQUESTS = 3;
+  override renderContent(): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
+    const optimizableImages = this.model.optimizableImages;
+
     const topImages =
-        optimizableImages.filter(image => image.optimizations.some(o => typeFilter(o.type)))
-            .sort((a, b) => b.request.args.data.decodedBodyLength - a.request.args.data.decodedBodyLength);
+        optimizableImages.sort((a, b) => b.request.args.data.decodedBodyLength - a.request.args.data.decodedBodyLength);
 
     const remaining = topImages.splice(MAX_REQUESTS);
-
     const rows: TableDataRow[] = topImages.map(image => ({
-                                                 values: [
-                                                   imageRef(
-                                                       image.request,
-                                                       showDimensions ? image.largestImagePaint : undefined,
-                                                       ),
-                                                 ],
+                                                 values: [imageRef(image.request)],
                                                  overlays: [this.#createOverlayForRequest(image.request)],
                                                }));
 
     if (remaining.length > 0) {
-      const value = remaining.length > 1 ? i18nString(UIStrings.others, {PH1: remaining.length}) :
-                                           imageRef(
-                                               remaining[0].request,
-                                               showDimensions ? remaining[0].largestImagePaint : undefined,
-                                           );
+      const value =
+          remaining.length > 1 ? i18nString(UIStrings.others, {PH1: remaining.length}) : imageRef(remaining[0].request);
       rows.push({
         values: [value],
         overlays: remaining.map(r => this.#createOverlayForRequest(r.request)),
       });
     }
 
-    return rows;
-  }
-
-  override renderContent(): LitHtml.LitTemplate {
-    if (!this.model) {
+    if (!rows.length) {
       return LitHtml.nothing;
     }
 
-    const optimizableImages = this.model.optimizableImages;
-
-    const sections = [];
-
-    const responsiveSizeRows = this.#getTopImagesAsRows(
-        optimizableImages, type => type === Trace.Insights.Models.ImageDelivery.ImageOptimizationType.RESPONSIVE_SIZE,
-        true);
-    if (responsiveSizeRows.length) {
-      // clang-format off
-      sections.push(html`
-        <div class="insight-section">
-          <devtools-performance-table
-            .data=${{
-              insight: this,
-              headers: [i18nString(UIStrings.sizeAppropriately)],
-              rows: responsiveSizeRows,
-            }}>
-          </devtools-performance-table>
-        </div>
-      `);
-      // clang-format on
-    }
-
-    const optimizeFormatRows = this.#getTopImagesAsRows(
-        optimizableImages, type => type !== Trace.Insights.Models.ImageDelivery.ImageOptimizationType.RESPONSIVE_SIZE);
-    if (optimizeFormatRows.length) {
-      // clang-format off
-      sections.push(html`
-        <div class="insight-section">
-          <devtools-performance-table
-            .data=${{
-              insight: this,
-              headers: [i18nString(UIStrings.optimizeFile)],
-              rows: optimizeFormatRows,
-            }}>
-          </devtools-performance-table>
-        </div>
-      `);
-      // clang-format on
-    }
-
-    return html`${sections}`;
+    // clang-format off
+    return html`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{
+            insight: this,
+            headers: [i18nString(UIStrings.optimizeFile)],
+            rows,
+          }}>
+        </devtools-performance-table>
+      </div>
+    `;
+    // clang-format on
   }
 }