chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

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

@@ -2,13 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import * as Utils from '../../utils/utils.js';
 
-import sidebarInsightStyles from './sidebarInsight.css.js';
+import baseInsightComponentStyles from './baseInsightComponent.css.js';
 
 const {html} = LitHtml;
 
@@ -28,7 +29,7 @@ class EventRef extends HTMLElement {
   #event: Trace.Types.Events.Event|null = null;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [sidebarInsightStyles];
+    this.#shadow.adoptedStyleSheets = [baseInsightComponentStyles];
   }
 
   set text(text: string) {
@@ -78,6 +79,71 @@ export function eventRef(event: EventRefSupportedEvents): LitHtml.TemplateResult
   ></devtools-performance-event-ref>`;
 }
 
+class ImageRef extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+
+  #request?: Trace.Types.Events.SyntheticNetworkRequest;
+  #imagePaint?: Trace.Types.Events.PaintImage;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [baseInsightComponentStyles];
+  }
+
+  set request(request: Trace.Types.Events.SyntheticNetworkRequest) {
+    this.#request = request;
+    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;
+    }
+
+    // clang-format off
+    LitHtml.render(html`
+      <div class="image-ref">
+        ${this.#request.args.data.mimeType.includes('image') ? html`
+          <img
+            class="element-img"
+            src=${this.#request.args.data.url}
+            @error=${handleBadImage}/>
+        `: LitHtml.nothing}
+        <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)
+          }</span>
+        </span>
+      </div>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+function handleBadImage(event: Event): void {
+  const img = event.target as HTMLImageElement;
+  img.style.display = 'none';
+}
+
+export function imageRef(
+    request: Trace.Types.Events.SyntheticNetworkRequest,
+    imagePaint?: Trace.Types.Events.PaintImage): LitHtml.TemplateResult {
+  return html`
+    <devtools-performance-image-ref
+      .request=${request}
+      .imagePaint=${imagePaint}
+    ></devtools-performance-image-ref>
+  `;
+}
+
 declare global {
   interface GlobalEventHandlersEventMap {
     [EventReferenceClick.eventName]: EventReferenceClick;
@@ -85,7 +151,9 @@ declare global {
 
   interface HTMLElementTagNameMap {
     'devtools-performance-event-ref': EventRef;
+    'devtools-performance-image-ref': ImageRef;
   }
 }
 
 customElements.define('devtools-performance-event-ref', EventRef);
+customElements.define('devtools-performance-image-ref', ImageRef);

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

@@ -10,11 +10,9 @@ 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';
 
+import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
-import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
-import type * as SidebarInsight from './SidebarInsight.js';
 import type {TableData} from './Table.js';
-import {Category} from './types.js';
 
 const {html} = LitHtml;
 
@@ -30,7 +28,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-font-display`;
-  override insightCategory = Category.INP;
   override internalName: string = 'font-display';
 
   #overlayForRequest = new Map<Trace.Types.Events.SyntheticNetworkRequest, Overlays.Overlays.TimelineOverlay>();
@@ -53,58 +50,43 @@ export class FontDisplay extends BaseInsightComponent<FontDisplayInsightModel> {
     return [...this.#overlayForRequest.values()];
   }
 
-  #render(insight: Trace.Insights.Types.InsightModels['FontDisplay']): LitHtml.LitTemplate {
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return this.model?.metricSavings?.FCP ?? null;
+  }
+
+  #renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
 
     // clang-format off
     return html`
-        <div class="insights">
-            <devtools-performance-sidebar-insight .data=${{
-              title: this.model.title,
-              description: this.model.description,
-              expanded: this.isActive(),
-              internalName: this.internalName,
-              estimatedSavingsTime: insight.metricSavings?.FCP,
-            } as SidebarInsight.InsightDetails}
-            @insighttoggleclick=${this.onSidebarClick}>
-                <div slot="insight-content" class="insight-section">
-                  ${html`<devtools-performance-table
-                    .data=${{
-                      insight: this,
-                      headers: [i18nString(UIStrings.fontColumn), 'font-display', i18nString(UIStrings.wastedTimeColumn)],
-                      rows: insight.fonts.map(font => ({
-                        values: [
-                          // TODO(crbug.com/369422196): the font name would be nicer here.
-                          eventRef(font.request),
-                          font.display,
-                          i18n.TimeUtilities.millisToString(font.wastedTime),
-                        ],
-                        overlays: [this.#overlayForRequest.get(font.request)],
-                      })),
-                    } as TableData}>
-                  </devtools-performance-table>`}
-                </div>
-            </devtools-performance-sidebar-insight>
-        </div>`;
+      <div class="insight-section">
+        ${html`<devtools-performance-table
+          .data=${{
+            insight: this,
+            headers: [i18nString(UIStrings.fontColumn), 'font-display', i18nString(UIStrings.wastedTimeColumn)],
+            rows: this.model.fonts.map(font => ({
+              values: [
+                // TODO(crbug.com/369422196): the font name would be nicer here.
+                eventRef(font.request),
+                font.display,
+                i18n.TimeUtilities.millisToString(font.wastedTime),
+              ],
+              overlays: [this.#overlayForRequest.get(font.request)],
+            })),
+          } as TableData}>
+        </devtools-performance-table>`}
+      </div>`;
     // clang-format on
   }
 
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    return this.model?.relatedEvents ?? [];
-  }
-
   override render(): void {
-    const model = this.model;
-    const shouldShow = model && model.fonts.find(font => font.wastedTime);
-
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = shouldShow && matchesCategory ? this.#render(model) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    if (!this.model) {
+      return;
+    }
+
+    this.renderWithContent(this.#renderContent());
   }
 }
 

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

@@ -2,215 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../../ui/components/markdown_view/markdown_view.js';
-
-import type {InsightModel} from '../../../../models/trace/insights/types.js';
-import type * as Trace from '../../../../models/trace/trace.js';
-import * as Marked from '../../../../third_party/marked/marked.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
-import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
-import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
-import type * as Overlays from '../../overlays/overlays.js';
-
-import sidebarInsightStyles from './sidebarInsight.css.js';
-import * as SidebarInsight from './SidebarInsight.js';
-import type {TableState} from './Table.js';
-import {type ActiveInsight, Category} from './types.js';
-
-const {html} = LitHtml;
+import * as Trace from '../../../../models/trace/trace.js';
 
 export function shouldRenderForCategory(options: {
-  activeCategory: Category,
-  insightCategory: Category,
-}): boolean {
-  return options.activeCategory === Category.ALL || options.activeCategory === options.insightCategory;
-}
-
-export function insightIsActive(options: {
-  activeInsight: ActiveInsight|null,
-  insightName: string,
-  insightSetKey: string|null,
+  activeCategory: Trace.Insights.Types.InsightCategory,
+  insightCategory: Trace.Insights.Types.InsightCategory,
 }): boolean {
-  const active = options.activeInsight && options.activeInsight.name === options.insightName &&
-      options.activeInsight.insightSetKey === options.insightSetKey;
-  return Boolean(active);
-}
-
-export interface BaseInsightData {
-  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
-  /** The key into `insights` that contains this particular insight. */
-  insightSetKey: string|null;
-  activeInsight: ActiveInsight|null;
-  activeCategory: Category;
-}
-
-// TODO(crbug.com/371615739): BaseInsight, SidebarInsight should be combined.
-// This is an abstract base class so the component naming rules do not apply.
-export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends HTMLElement {
-  abstract internalName: string;
-  abstract insightCategory: Category;
-  // So we can use the TypeScript BaseInsight class without getting warnings
-  // about litTagName. Every child should overrwrite this.
-  static readonly litTagName = LitHtml.literal``;
-
-  protected readonly shadow = this.attachShadow({mode: 'open'});
-
-  #model: T|null = null;
-
-  get model(): T|null {
-    return this.#model;
-  }
-
-  protected data: BaseInsightData = {
-    parsedTrace: null,
-    insightSetKey: null,
-    activeInsight: null,
-    activeCategory: Category.ALL,
-  };
-
-  // eslint-disable-next-line rulesdir/no_bound_component_methods
-  readonly #boundRender = this.#baseRender.bind(this);
-  readonly sharedTableState: TableState = {
-    selectedRowEl: null,
-    selectionIsSticky: false,
-  };
-  #initialOverlays: Overlays.Overlays.TimelineOverlay[]|null = null;
-  #hasRegisteredRelatedEvents = false;
-
-  protected scheduleRender(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  connectedCallback(): void {
-    this.shadow.adoptedStyleSheets.push(sidebarInsightStyles);
-    this.setAttribute('jslog', `${VisualLogging.section(`timeline.insights.${this.internalName}`)}`);
-    // Used for unit test purposes when querying the DOM.
-    this.dataset.insightName = this.internalName;
-
-    // TODO(crbug.com/371615739): this should be moved to model/trace/insights
-    if (!this.#hasRegisteredRelatedEvents && this.#model) {
-      this.#hasRegisteredRelatedEvents = true;
-
-      const events = this.getRelatedEvents();
-      if (events.length) {
-        this.dispatchEvent(new SidebarInsight.InsightProvideRelatedEvents(
-            this.#model.title, events, this.#dispatchInsightActivatedEvent.bind(this)));
-      }
-    }
-  }
-
-  set model(model: T) {
-    this.#model = model;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  set parsedTrace(parsedTrace: Trace.Handlers.Types.ParsedTrace|null) {
-    this.data.parsedTrace = parsedTrace;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  set insightSetKey(insightSetKey: string|null) {
-    this.data.insightSetKey = insightSetKey;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  set activeInsight(activeInsight: ActiveInsight|null) {
-    this.data.activeInsight = activeInsight;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  set activeCategory(activeCategory: Category) {
-    this.data.activeCategory = activeCategory;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-
-  protected onSidebarClick(): void {
-    if (this.isActive()) {
-      this.dispatchEvent(new SidebarInsight.InsightDeactivated());
-      return;
-    }
-
-    this.#dispatchInsightActivatedEvent();
-  }
-
-  #dispatchInsightActivatedEvent(): void {
-    if (!this.data.insightSetKey) {
-      // Shouldn't happen, but needed to satisfy TS.
-      return;
-    }
-
-    this.sharedTableState.selectedRowEl?.classList.remove('selected');
-    this.sharedTableState.selectedRowEl = null;
-    this.sharedTableState.selectionIsSticky = false;
-
-    this.dispatchEvent(new SidebarInsight.InsightActivated(
-        this.internalName,
-        this.data.insightSetKey,
-        this.getInitialOverlays(),
-        // TODO: this could be cached.
-        this.getRelatedEvents(),
-        ));
-  }
-
-  /**
-   * Replaces the initial insight overlays with the ones provided.
-   *
-   * If `overlays` is null, reverts back to the initial overlays.
-   *
-   * This allows insights to provide an initial set of overlays,
-   * and later temporarily replace all of those insights with a different set.
-   * This enables the hover/click table interactions.
-   */
-  toggleTemporaryOverlays(
-      overlays: Overlays.Overlays.TimelineOverlay[]|null, options: Overlays.Overlays.TimelineOverlaySetOptions): void {
-    if (!this.isActive()) {
-      return;
-    }
-
-    this.dispatchEvent(new SidebarInsight.InsightProvideOverlays(overlays ?? this.getInitialOverlays(), options));
-  }
-
-  getInitialOverlays(): Overlays.Overlays.TimelineOverlay[] {
-    if (this.#initialOverlays) {
-      return this.#initialOverlays;
-    }
-
-    this.#initialOverlays = this.createOverlays();
-    return this.#initialOverlays;
-  }
-
-  // Should be overrided by subclasses.
-  protected getRelatedEvents(): Trace.Types.Events.Event[] {
-    return [];
-  }
-
-  protected abstract createOverlays(): Overlays.Overlays.TimelineOverlay[];
-
-  #baseRender(): void {
-    this.render();
-    if (this.isActive()) {
-      requestAnimationFrame(() => requestAnimationFrame(() => this.scrollIntoViewIfNeeded()));
-    }
-  }
-
-  abstract render(): void;
-
-  protected isActive(): boolean {
-    return insightIsActive({
-      activeInsight: this.data.activeInsight,
-      insightName: this.internalName,
-      insightSetKey: this.data.insightSetKey,
-    });
-  }
-}
-
-/**
- * Returns a rendered MarkdownView component.
- *
- * This should not be used for markdown that is not guaranteed to be valid.
- */
-export function md(markdown: string): LitHtml.TemplateResult {
-  const tokens = Marked.Marked.lexer(markdown);
-  const data = {tokens};
-  return html`<devtools-markdown-view .data=${data}></devtools-markdown-view>`;
+  return options.activeCategory === Trace.Insights.Types.InsightCategory.ALL ||
+      options.activeCategory === options.insightCategory;
 }

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

@@ -0,0 +1,142 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+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 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';
+
+import {BaseInsightComponent} from './BaseInsightComponent.js';
+import {imageRef} from './EventRef.js';
+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).
+   */
+  optimizeFile: 'Optimize file size',
+  /**
+   * @description Table row value representing the remaining items not shown in the table due to size constraints. This row will always represent at least 2 items.
+   * @example {5} PH1
+   */
+  others: '{PH1} others',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/ImageDelivery.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class ImageDelivery extends BaseInsightComponent<ImageDeliveryInsightModel> {
+  static override readonly litTagName = LitHtml.literal`devtools-performance-image-delivery`;
+  override internalName: string = 'image-delivery';
+
+  override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
+    if (!this.model) {
+      return [];
+    }
+
+    const {optimizableImages} = this.model;
+    return optimizableImages.map(image => this.#createOverlayForRequest(image.request));
+  }
+
+  #createOverlayForRequest(request: Trace.Types.Events.SyntheticNetworkRequest): Overlays.Overlays.EntryOutline {
+    return {
+      type: 'ENTRY_OUTLINE',
+      entry: request,
+      outlineReason: 'ERROR',
+    };
+  }
+
+  #getTopImagesAsRows(
+      optimizableImages: OptimizableImage[], typeFilter: (type: ImageOptimizationType) => boolean,
+      showDimensions?: boolean): TableDataRow[] {
+    const MAX_REQUESTS = 3;
+    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);
+
+    const remaining = topImages.splice(MAX_REQUESTS);
+
+    const rows: TableDataRow[] = topImages.map(image => ({
+                                                 values: [
+                                                   imageRef(
+                                                       image.request,
+                                                       showDimensions ? image.largestImagePaint : undefined,
+                                                       ),
+                                                 ],
+                                                 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,
+                                           );
+      rows.push({
+        values: [value],
+        overlays: remaining.map(r => this.#createOverlayForRequest(r.request)),
+      });
+    }
+
+    return rows;
+  }
+
+  #renderContent(): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
+    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
+  }
+
+  override render(): void {
+    if (!this.model) {
+      return;
+    }
+
+    this.renderWithContent(this.#renderContent());
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-performance-image-delivery': ImageDelivery;
+  }
+}
+
+customElements.define('devtools-performance-image-delivery', ImageDelivery);