[RPP] Sort in ImageDelivery model

Also now sorting by image byte savings, rather than image size.

Drive-by formatting fix for ForcedReflow component.

Bug: 388723721
Change-Id: Ia1e511006a343c64283915f09db075670fd39fb5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6237241
Auto-Submit: Connor Clark <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Reviewed-by: Adam Raine <[email protected]>
Commit-Queue: Adam Raine <[email protected]>

Author: Connor Clark

front_end/models/trace/insights/ImageDelivery.test.ts

@@ -59,6 +59,22 @@ describeWithEnvironment('ImageDelivery', function() {
             url:
                 'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif',
           },
+          {
+            byteSavings: 176040,
+            optimizations: [
+              {
+                byteSavings: 134075,
+                type: ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION,
+              },
+              {
+                byteSavings: 162947,
+                type: ImageOptimizationType.RESPONSIVE_SIZE,
+                fileDimensions: {width: 640, height: 436},
+                displayDimensions: {width: 200, height: 136},
+              },
+            ],
+            url: 'https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png',
+          },
           {
             byteSavings: 49760,
             optimizations: [
@@ -83,22 +99,6 @@ describeWithEnvironment('ImageDelivery', function() {
             url:
                 'https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp',
           },
-          {
-            byteSavings: 176040,
-            optimizations: [
-              {
-                byteSavings: 134075,
-                type: ImageOptimizationType.MODERN_FORMAT_OR_COMPRESSION,
-              },
-              {
-                byteSavings: 162947,
-                type: ImageOptimizationType.RESPONSIVE_SIZE,
-                fileDimensions: {width: 640, height: 436},
-                displayDimensions: {width: 200, height: 136},
-              },
-            ],
-            url: 'https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png',
-          },
         ],
     );
   });

front_end/models/trace/insights/ImageDelivery.ts

@@ -127,6 +127,7 @@ export interface OptimizableImage {
 }
 
 export type ImageDeliveryInsightModel = InsightModel<typeof UIStrings, {
+  /** Sorted by potential byte savings, then by size of image. */
   optimizableImages: OptimizableImage[],
   totalByteSavings: number,
 }>;
@@ -284,6 +285,15 @@ export function generateInsight(
     wastedBytesByRequestId.set(image.request.args.data.requestId, image.byteSavings);
   }
 
+  // Sort by savings, then by size of image.
+  optimizableImages.sort((a, b) => {
+    if (b.byteSavings !== a.byteSavings) {
+      return b.byteSavings - a.byteSavings;
+    }
+
+    return b.request.args.data.decodedBodyLength - a.request.args.data.decodedBodyLength;
+  });
+
   return finalize({
     optimizableImages,
     totalByteSavings: optimizableImages.reduce((total, img) => total + img.byteSavings, 0),

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

@@ -56,25 +56,25 @@ export class ForcedReflow extends BaseInsightComponent<ForcedReflowInsightModel>
     // clang-format off
     return html`
       <div class="insight-section">
-        ${html`<devtools-performance-table
+        <devtools-performance-table
           .data=${{
             insight: this,
             headers: [i18nString(UIStrings.topTimeConsumingFunctionCall), i18nString(UIStrings.totalReflowTime)],
             rows: [{values:[this.#linkifyUrl(topLevelFunctionCallData), time(Trace.Types.Timing.Micro(totalReflowTime))]}],
-            } as TableData}>
-        </devtools-performance-table>`}
+          } as TableData}>
+        </devtools-performance-table>
       </div>
       <div class="insight-section">
-        ${html`<devtools-performance-table
-        .data=${{
-          insight: this,
-          headers: [i18nString(UIStrings.relatedStackTrace)],
-          rows: bottomUpCallStackData.map(data => ({
-            values: [this.#linkifyUrl(data.bottomUpData)],
-            overlays: this.#createOverlayForEvents(data.relatedEvents),
-          })),
+        <devtools-performance-table
+          .data=${{
+            insight: this,
+            headers: [i18nString(UIStrings.relatedStackTrace)],
+            rows: bottomUpCallStackData.map(data => ({
+              values: [this.#linkifyUrl(data.bottomUpData)],
+              overlays: this.#createOverlayForEvents(data.relatedEvents),
+            })),
         } as TableData}>
-        </devtools-performance-table>`}
+        </devtools-performance-table>
       </div>`;
     // clang-format on
   }