chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -0,0 +1,91 @@
+// 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 * 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';
+
+const {html} = LitHtml;
+
+export class EventReferenceClick extends Event {
+  static readonly eventName = 'eventreferenceclick';
+
+  constructor(public event: Trace.Types.Events.Event) {
+    super(EventReferenceClick.eventName, {bubbles: true, composed: true});
+  }
+}
+
+class EventRef extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+
+  #text: string|null = null;
+  #event: Trace.Types.Events.Event|null = null;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [sidebarInsightStyles];
+  }
+
+  set text(text: string) {
+    this.#text = text;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  set event(event: Trace.Types.Events.Event) {
+    this.#event = event;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #render(): void {
+    if (!this.#text || !this.#event) {
+      return;
+    }
+
+    // clang-format off
+    LitHtml.render(html`
+      <button type="button" class="timeline-link" @click=${(e: Event) => {
+        e.stopPropagation();
+        if (this.#event) {
+          this.dispatchEvent(new EventReferenceClick(this.#event));
+        }
+      }}>${this.#text}</button>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+type EventRefSupportedEvents = Trace.Types.Events.SyntheticNetworkRequest;
+
+export function eventRef(event: EventRefSupportedEvents): LitHtml.TemplateResult {
+  let title, text;
+  if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+    text = Utils.Helpers.shortenUrl(new URL(event.args.data.url));
+    title = event.args.data.url;
+  } else {
+    Platform.TypeScriptUtilities.assertNever(
+        event, `unsupported event in eventRef: ${(event as Trace.Types.Events.Event).name}`);
+  }
+
+  return html`<devtools-performance-event-ref
+    .event=${event as Trace.Types.Events.Event}
+    .text=${text}
+    title=${title}
+  ></devtools-performance-event-ref>`;
+}
+
+declare global {
+  interface GlobalEventHandlersEventMap {
+    [EventReferenceClick.eventName]: EventReferenceClick;
+  }
+
+  interface HTMLElementTagNameMap {
+    'devtools-performance-event-ref': EventRef;
+  }
+}
+
+customElements.define('devtools-performance-event-ref', EventRef);

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

@@ -2,16 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './Table.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * 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 {BaseInsight, shortenUrl, shouldRenderForCategory} from './Helpers.js';
-import * as SidebarInsight from './SidebarInsight.js';
-import {Table, type TableData} from './Table.js';
+import {eventRef} from './EventRef.js';
+import {BaseInsight, 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;
+
 const UIStrings = {
   /** Title of an insight that provides details about the fonts used on the page, and the value of their `font-display` properties. */
   title: 'Font display',
@@ -19,7 +24,7 @@ const UIStrings = {
    * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
    */
   description:
-      'Consider using a [font-display](https://developer.chrome.com/blog/font-display) of `swap` or `optional` to ensure text is consistently visible.',
+      'Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',
   /** Column for a font loaded by the page to render text. */
   fontColumn: 'Font',
   /** Column for the amount of time wasted. */
@@ -30,7 +35,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Fo
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class FontDisplay extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-font-display`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-font-display`;
   override insightCategory = Category.INP;
   override internalName: string = 'font-display';
   override userVisibleTitle: string = i18nString(UIStrings.title);
@@ -57,39 +62,45 @@ export class FontDisplay extends BaseInsight {
     return [...this.#overlayForRequest.values()];
   }
 
-  #render(data: Trace.Insights.Types.InsightResults['FontDisplay']): LitHtml.TemplateResult {
+  #render(insight: Trace.Insights.Types.InsightResults['FontDisplay']): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
+    return html`
         <div class="insights">
-            <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+            <devtools-performance-sidebar-insight .data=${{
               title: this.userVisibleTitle,
               description: this.description,
               expanded: this.isActive(),
               internalName: this.internalName,
+              estimatedSavingsTime: insight.metricSavings?.FCP,
             } as SidebarInsight.InsightDetails}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content" class="insight-section">
-                  ${LitHtml.html`<${Table.litTagName}
+                  ${html`<devtools-performance-table
                     .data=${{
                       insight: this,
                       headers: [i18nString(UIStrings.fontColumn), 'font-display', i18nString(UIStrings.wastedTimeColumn)],
-                      rows: data.fonts.map(font => ({
+                      rows: insight.fonts.map(font => ({
                         values: [
                           // TODO(crbug.com/369422196): the font name would be nicer here.
-                          shortenUrl(font.request.args.data.url),
+                          eventRef(font.request),
                           font.display,
                           i18n.TimeUtilities.millisToString(font.wastedTime),
                         ],
                         overlays: [this.#overlayForRequest.get(font.request)],
                       })),
                     } as TableData}>
-                  </${Table.litTagName}>`}
+                  </devtools-performance-table>`}
                 </div>
-            </${SidebarInsight.SidebarInsight}>
+            </devtools-performance-sidebar-insight>
         </div>`;
     // clang-format on
   }
 
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight = Trace.Insights.Common.getInsight('FontDisplay', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
+  }
+
   override render(): void {
     const insight = Trace.Insights.Common.getInsight('FontDisplay', this.data.insights, this.data.insightSetKey);
     const shouldShow = insight && insight.fonts.find(font => font.wastedTime);

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

@@ -2,20 +2,23 @@
 // 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 * as Platform from '../../../../core/platform/platform.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 MarkdownView from '../../../../ui/components/markdown_view/markdown_view.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 {TableState} from './Table.js';
 import {type ActiveInsight, Category} from './types.js';
 
+const {html} = LitHtml;
+
 export function shouldRenderForCategory(options: {
   activeCategory: Category,
   insightCategory: Category,
@@ -42,13 +45,16 @@ export interface BaseInsightData {
   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.
-// eslint-disable-next-line rulesdir/check_component_naming
 export abstract class BaseInsight extends HTMLElement {
   abstract internalName: string;
   abstract insightCategory: Category;
   abstract userVisibleTitle: string;
   abstract description: string;
+  // 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'});
 
@@ -60,12 +66,14 @@ export abstract class BaseInsight extends HTMLElement {
     activeCategory: Category.ALL,
   };
 
-  readonly #boundRender = this.render.bind(this);
+  // 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);
@@ -76,6 +84,17 @@ export abstract class BaseInsight extends HTMLElement {
     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.#hasRegisteredRelatedEvents = true;
+
+      const events = this.getRelatedEvents();
+      if (events.length) {
+        this.dispatchEvent(new SidebarInsight.InsightProvideRelatedEvents(
+            this.userVisibleTitle, events, this.#dispatchInsightActivatedEvent.bind(this)));
+      }
+    }
   }
 
   set insights(insights: Trace.Insights.Types.TraceInsightSets|null) {
@@ -108,6 +127,11 @@ export abstract class BaseInsight extends HTMLElement {
       this.dispatchEvent(new SidebarInsight.InsightDeactivated());
       return;
     }
+
+    this.#dispatchInsightActivatedEvent();
+  }
+
+  #dispatchInsightActivatedEvent(): void {
     if (!this.data.insightSetKey) {
       // Shouldn't happen, but needed to satisfy TS.
       return;
@@ -121,6 +145,8 @@ export abstract class BaseInsight extends HTMLElement {
         this.internalName,
         this.data.insightSetKey,
         this.getInitialOverlays(),
+        // TODO: this could be cached.
+        this.getRelatedEvents(),
         ));
   }
 
@@ -134,14 +160,11 @@ export abstract class BaseInsight extends HTMLElement {
    * This enables the hover/click table interactions.
    */
   toggleTemporaryOverlays(
-      overlays: Overlays.Overlays.TimelineOverlay[]|null, options?: Overlays.Overlays.TimelineOverlaySetOptions): void {
+      overlays: Overlays.Overlays.TimelineOverlay[]|null, options: Overlays.Overlays.TimelineOverlaySetOptions): void {
     if (!this.isActive()) {
       return;
     }
 
-    if (!options) {
-      options = {updateTraceWindow: true};
-    }
     this.dispatchEvent(new SidebarInsight.InsightProvideOverlays(overlays ?? this.getInitialOverlays(), options));
   }
 
@@ -154,8 +177,20 @@ export abstract class BaseInsight extends HTMLElement {
     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 {
@@ -165,27 +200,12 @@ export abstract class BaseInsight extends HTMLElement {
       insightSetKey: this.data.insightSetKey,
     });
   }
-}
 
-// TODO(crbug.com/368170718): consider better treatments for shortening URLs.
-export function shortenUrl(url: string): string {
-  const maxLength = 20;
-
-  // TODO(crbug.com/368170718): This is something that should only be done if the origin is the same
-  // as the insight set's origin.
-  const elideOrigin = false;
-  if (elideOrigin) {
-    try {
-      url = new URL(url).pathname;
-    } catch {
-    }
+  getInsightSetUrl(): URL {
+    const url = this.data.insights?.get(this.data.insightSetKey ?? '')?.url;
+    Platform.TypeScriptUtilities.assertNotNullOrUndefined(url, 'Expected url for insight set');
+    return new URL(url);
   }
-
-  if (url.length <= maxLength) {
-    return url;
-  }
-
-  return Platform.StringUtilities.trimMiddle(url.split('/').at(-1) ?? '', maxLength);
 }
 
 /**
@@ -195,21 +215,6 @@ export function shortenUrl(url: string): string {
  */
 export function md(markdown: string): LitHtml.TemplateResult {
   const tokens = Marked.Marked.lexer(markdown);
-  return LitHtml.html`<${MarkdownView.MarkdownView.MarkdownView.litTagName}
-    .data=${{tokens} as MarkdownView.MarkdownView.MarkdownViewData}>
-  </${MarkdownView.MarkdownView.MarkdownView.litTagName}>`;
-}
-
-export class EventReferenceClick extends Event {
-  static readonly eventName = 'eventreferenceclick';
-
-  constructor(public metricEvent: Trace.Types.Events.Event) {
-    super(EventReferenceClick.eventName, {bubbles: true, composed: true});
-  }
-}
-
-declare global {
-  interface GlobalEventHandlersEventMap {
-    [EventReferenceClick.eventName]: EventReferenceClick;
-  }
+  const data = {tokens};
+  return html`<devtools-markdown-view .data=${data}></devtools-markdown-view>`;
 }

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './Table.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Trace from '../../../../models/trace/trace.js';
@@ -9,24 +11,20 @@ import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import * as SidebarInsight from './SidebarInsight.js';
-import {Table, type TableData} from './Table.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Text to tell the user about the longest user interaction.
    */
   description:
-      'Optimize user responsiveness by [improving the Interaction to Next Paint metric](https://web.dev/articles/optimize-inp).',
+      'Start investigating with the longest phase. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',
   /**
    * @description Title for the performance insight "INP by phase", which shows a breakdown of INP by phases / sections.
    */
   title: 'INP by phase',
-  /**
-   *@description Label used to denote the longest user interaction.
-   */
-  longestInteraction: 'Longest interaction',
   /**
    *@description Label used for the phase/component/stage/section of a larger duration.
    */
@@ -55,7 +53,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/In
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class InteractionToNextPaint extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-inp`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-inp`;
   override insightCategory: Category = Category.INP;
   override internalName: string = 'inp';
   override userVisibleTitle: string = i18nString(UIStrings.title);
@@ -104,12 +102,8 @@ export class InteractionToNextPaint extends BaseInsight {
       {
         type: 'TIMESPAN_BREAKDOWN',
         sections,
-      },
-      {
-        type: 'ENTRY_LABEL',
-        // TODO(b/366040373) why aren't annotations rendering for synthetic events?
+        renderLocation: 'BELOW_EVENT',
         entry: event,
-        label: i18nString(UIStrings.longestInteraction),
       },
     ];
   }
@@ -119,17 +113,17 @@ export class InteractionToNextPaint extends BaseInsight {
         i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(us));
 
     // clang-format off
-    return LitHtml.html`
+    return html`
         <div class="insights">
-            <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+            <devtools-performance-sidebar-insight .data=${{
             title: this.userVisibleTitle,
             description: this.description,
             internalName: this.internalName,
             expanded: this.isActive(),
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content" class="insight-section">
-                  ${LitHtml.html`<${Table.litTagName}
+                  ${html`<devtools-performance-table
                     .data=${{
                       insight: this,
                       headers: [i18nString(UIStrings.phase), i18nString(UIStrings.duration)],
@@ -147,12 +141,18 @@ export class InteractionToNextPaint extends BaseInsight {
                           overlays: this.#createOverlaysForPhase(event, 2),
                         },
                       ],
-                    } as TableData}>
-                  </${Table.litTagName}>`}
+                    }}>
+                  </devtools-performance-table>`}
                 </div>
-            </${SidebarInsight.SidebarInsight}>
+            </devtools-performance-sidebar-insight>
         </div>`;
-    // clang-format on
+            // clang-format on
+  }
+
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight =
+        Trace.Insights.Common.getInsight('InteractionToNextPaint', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
   }
 
   override render(): void {