[ImageDelivery] Hide empty sidebar sections

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

Author: Adam Raine

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

@@ -101,27 +101,43 @@ export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightMode
 
     const optimizableImages = this.model.optimizableImages;
 
-    // clang-format off
-    return html`
-      <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
-            insight: this,
-            headers: [i18nString(UIStrings.sizeAppropriately)],
-            rows: this.#getTopImagesAsRows(optimizableImages, type => type === 'responsive-size', true),
-          }}>
-        </devtools-performance-table>
-      </div>
-      <div class="insight-section">
-        <devtools-performance-table
-          .data=${{
-            insight: this,
-            headers: [i18nString(UIStrings.optimizeFile)],
-            rows: this.#getTopImagesAsRows(optimizableImages, type => type !== 'responsive-size'),
-          }}>
-        </devtools-performance-table>
-      </div>`;
-    // clang-format on
+    const sections = [];
+
+    const responsiveSizeRows = this.#getTopImagesAsRows(optimizableImages, type => type === '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 !== '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}`;
   }
 
   override render(): void {