chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/timeline/components/Utils.ts

@@ -4,6 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
+import * as Protocol from '../../../generated/protocol.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as ThemeSupport from '../../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -39,44 +40,42 @@ export enum NetworkCategory {
   OTHER = 'Other',
 }
 
-function syntheticNetworkRequestCategory(request: Trace.Types.Events.SyntheticNetworkRequest): NetworkCategory {
-  switch (request.args.data.mimeType) {
-    case 'text/html':
+export function networkResourceCategory(request: Trace.Types.Events.SyntheticNetworkRequest): NetworkCategory {
+  const {mimeType} = request.args.data;
+  switch (request.args.data.resourceType) {
+    case Protocol.Network.ResourceType.Document:
       return NetworkCategory.DOC;
-    case 'application/javascript':
-    case 'application/x-javascript':
-    case 'text/javascript':
-      return NetworkCategory.JS;
-    case 'text/css':
+    case Protocol.Network.ResourceType.Stylesheet:
       return NetworkCategory.CSS;
-    case 'image/gif':
-    case 'image/jpeg':
-    case 'image/png':
-    case 'image/svg+xml':
-    case 'image/webp':
-    case 'image/x-icon':
+    case Protocol.Network.ResourceType.Image:
       return NetworkCategory.IMG;
-    case 'audio/aac':
-    case 'audio/midi':
-    case 'audio/x-midi':
-    case 'audio/mpeg':
-    case 'audio/ogg':
-    case 'audio/wav':
-    case 'audio/webm':
+    case Protocol.Network.ResourceType.Media:
       return NetworkCategory.MEDIA;
-    case 'font/opentype':
-    case 'font/woff2':
-    case 'font/ttf':
-    case 'application/font-woff':
+    case Protocol.Network.ResourceType.Font:
       return NetworkCategory.FONT;
-    case 'application/wasm':
-      return NetworkCategory.WASM;
+    case Protocol.Network.ResourceType.Script:
+    case Protocol.Network.ResourceType.WebSocket:
+      return NetworkCategory.JS;
     default:
-      return NetworkCategory.OTHER;
+      // FWIW, all the other (current) resourceTypes are:
+      //     TextTrack, XHR, Fetch, Prefetch, EventSource, Manifest, SignedExchange, Ping, CSPViolationReport, Preflight, Other
+
+      // Traces before Feb 2024 don't have `resourceType`.
+      // We'll keep mimeType logic for a couple years to avoid grey network requests for last year's traces.
+      return mimeType.startsWith('text/')                                ? NetworkCategory.DOC :
+          mimeType.endsWith('/css')                                      ? NetworkCategory.CSS :
+          mimeType.endsWith('javascript')                                ? NetworkCategory.JS :
+          mimeType.startsWith('image/')                                  ? NetworkCategory.IMG :
+          mimeType.startsWith('audio/') || mimeType.startsWith('video/') ? NetworkCategory.MEDIA :
+          mimeType.startsWith('font/') || mimeType.includes('font-')     ? NetworkCategory.FONT :
+          mimeType === 'application/wasm'                                ? NetworkCategory.WASM :
+                                                                           // Ultimate fallback:
+                                                                           NetworkCategory.OTHER;
   }
 }
 
 export function colorForNetworkCategory(category: NetworkCategory): string {
+  // TODO: These should align with `baseResourceTypeColors` from `NetworkWaterfallColumn`.
   let cssVarName = '--app-color-system';
   switch (category) {
     case NetworkCategory.DOC:
@@ -109,7 +108,7 @@ export function colorForNetworkCategory(category: NetworkCategory): string {
 }
 
 export function colorForNetworkRequest(request: Trace.Types.Events.SyntheticNetworkRequest): string {
-  const category = syntheticNetworkRequestCategory(request);
+  const category = networkResourceCategory(request);
   return colorForNetworkCategory(category);
 }
 

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

@@ -6,8 +6,6 @@ import * as Breadcrumbs from './Breadcrumbs.js';
 import * as BreadcrumbsUI from './BreadcrumbsUI.js';
 import * as CPUThrottlingSelector from './CPUThrottlingSelector.js';
 import * as DetailsView from './DetailsView.js';
-import * as EntryName from './EntryName.js';
-import * as EntryStyles from './EntryStyles.js';
 import * as FieldSettingsDialog from './FieldSettingsDialog.js';
 import * as InteractionBreakdown from './InteractionBreakdown.js';
 import * as LayoutShiftDetails from './LayoutShiftDetails.js';
@@ -28,8 +26,6 @@ export {
   BreadcrumbsUI,
   CPUThrottlingSelector,
   DetailsView,
-  EntryName,
-  EntryStyles,
   FieldSettingsDialog,
   InteractionBreakdown,
   LayoutShiftDetails,

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

@@ -9,7 +9,6 @@ import type * as Overlays from '../../overlays/overlays.js';
 
 import {EventReferenceClick} from './EventRef.js';
 import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import type * as SidebarInsight from './SidebarInsight.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
@@ -52,6 +51,10 @@ const UIStrings = {
    * @description Text for a culprit type of Animation.
    */
   animation: 'Animation',
+  /**
+   * @description Text for a culprit type of Unsized images.
+   */
+  unsizedImages: 'Unsized Images',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/CLSCulprits.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -115,6 +118,7 @@ export class CLSCulprits extends BaseInsight {
       const fontReq = culprits.fontRequests;
       const iframes = culprits.iframeIds;
       const animations = culprits.nonCompositedAnimations;
+      const unsizedImages = culprits.unsizedImages;
 
       for (let i = 0; i < fontReq.length && causes.length < MAX_TOP_CULPRITS; i++) {
         causes.push(i18nString(UIStrings.fontRequest));
@@ -125,6 +129,9 @@ export class CLSCulprits extends BaseInsight {
       for (let i = 0; i < animations.length && causes.length < MAX_TOP_CULPRITS; i++) {
         causes.push(i18nString(UIStrings.animation));
       }
+      for (let i = 0; i < unsizedImages.length && causes.length < MAX_TOP_CULPRITS; i++) {
+        causes.push(i18nString(UIStrings.unsizedImages));
+      }
     }
     return causes.slice(0, MAX_TOP_CULPRITS);
   }
@@ -147,7 +154,7 @@ export class CLSCulprits extends BaseInsight {
               description: this.description,
               internalName: this.internalName,
               expanded: this.isActive(),
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content" class="insight-section">
                   <span class="worst-cluster">${i18nString(UIStrings.worstCluster)}: <button type="button" class="timeline-link" @click=${() => this.#clickEvent(worstCluster)}>${i18nString(UIStrings.layoutShiftCluster, {PH1: clusterTs})}</button></span>
@@ -160,7 +167,7 @@ export class CLSCulprits extends BaseInsight {
                 </div>
             </devtools-performance-sidebar-insight>
         </div>`;
-    // clang-format on
+              // clang-format on
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {

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

@@ -10,7 +10,6 @@ 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 type * as SidebarInsight from './SidebarInsight.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
@@ -171,7 +170,7 @@ export class DocumentLatency extends BaseInsight {
             internalName: this.internalName,
             estimatedSavingsTime: insight.metricSavings?.FCP,
             estimatedSavingsBytes: insight.data.uncompressedResponseBytes,
-        } as SidebarInsight.InsightDetails}
+        }}
         @insighttoggleclick=${this.onSidebarClick}
       >
         <div slot="insight-content" class="insight-section">
@@ -192,7 +191,7 @@ export class DocumentLatency extends BaseInsight {
         </div>
       </devtools-performance-sidebar-insight>
     </div>`;
-    // clang-format on
+            // clang-format on
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {
@@ -202,11 +201,16 @@ export class DocumentLatency extends BaseInsight {
 
   override render(): void {
     const insight = Trace.Insights.Common.getInsight('DocumentLatency', this.data.insights, this.data.insightSetKey);
+    if (insight?.data === undefined) {
+      return;
+    }
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = matchesCategory && insight?.data ? this.#renderInsight(insight) : LitHtml.nothing;
+    const hasFailure = insight?.data?.redirectDuration > 0 || insight?.data?.serverResponseTooSlow ||
+        insight.data.uncompressedResponseBytes > 0;
+    const output = (matchesCategory && hasFailure) ? this.#renderInsight(insight) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -21,7 +21,6 @@ export class EventReferenceClick extends Event {
 }
 
 class EventRef extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-event-ref`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 

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

@@ -24,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. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).',
+      '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. */

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

@@ -8,7 +8,6 @@ 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 type * 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';
@@ -146,6 +145,8 @@ export abstract class BaseInsight extends HTMLElement {
         this.internalName,
         this.data.insightSetKey,
         this.getInitialOverlays(),
+        // TODO: this could be cached.
+        this.getRelatedEvents(),
         ));
   }
 
@@ -214,7 +215,6 @@ export abstract class BaseInsight extends HTMLElement {
  */
 export function md(markdown: string): LitHtml.TemplateResult {
   const tokens = Marked.Marked.lexer(markdown);
-  return html`<devtools-markdown-view
-    .data=${{tokens} as MarkdownView.MarkdownView.MarkdownViewData}>
-  </devtools-markdown-view>`;
+  const data = {tokens};
+  return html`<devtools-markdown-view .data=${data}></devtools-markdown-view>`;
 }

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

@@ -11,8 +11,6 @@ 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 type * as SidebarInsight from './SidebarInsight.js';
-import type {TableData} from './Table.js';
 import {Category} from './types.js';
 
 const {html} = LitHtml;
@@ -122,7 +120,7 @@ export class InteractionToNextPaint extends BaseInsight {
             description: this.description,
             internalName: this.internalName,
             expanded: this.isActive(),
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content" class="insight-section">
                   ${html`<devtools-performance-table
@@ -143,12 +141,12 @@ export class InteractionToNextPaint extends BaseInsight {
                           overlays: this.#createOverlaysForPhase(event, 2),
                         },
                       ],
-                    } as TableData}>
+                    }}>
                   </devtools-performance-table>`}
                 </div>
             </devtools-performance-sidebar-insight>
         </div>`;
-    // clang-format on
+            // clang-format on
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {

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

@@ -19,7 +19,7 @@ const {html} = LitHtml;
 
 const UIStrings = {
   /**
-   *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it.
+   *@description Title of an insight that provides details about the LCP metric, and the network requests necessary to load it. Details how the LCP request was discoverable - in other words, the path necessary to load it (ex: network requests, JavaScript)
    */
   title: 'LCP request discovery',
   /**

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

@@ -150,6 +150,11 @@ export class LCPPhases extends BaseInsight {
     }
     const lcpMicroseconds = Trace.Types.Timing.MicroSeconds(Trace.Helpers.Timing.millisecondsToMicroseconds(lcpTs));
 
+    const overlays: Overlays.Overlays.TimelineOverlay[] = [];
+    if (lcpInsight.lcpRequest) {
+      overlays.push({type: 'ENTRY_OUTLINE', entry: lcpInsight.lcpRequest, outlineReason: 'INFO'});
+    }
+
     const sections = [];
     // For text LCP, we should only have ttfb and renderDelay sections.
     if (!phases?.loadDelay && !phases?.loadTime) {
@@ -210,7 +215,8 @@ export class LCPPhases extends BaseInsight {
       type: 'TIMESPAN_BREAKDOWN',
       sections,
     };
-    return [this.#overlay];
+    overlays.push(this.#overlay);
+    return overlays;
   }
 
   #renderLCPPhases(phaseData: PhaseData[]): LitHtml.LitTemplate {

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

@@ -18,7 +18,6 @@ export interface NodeLinkData {
 }
 
 export class NodeLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-node-link`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);

package/front_end/panels/timeline/components/insights/README.md

@@ -43,12 +43,12 @@ override render(): void {
 
 Within your `renderMyInsight` method (please choose a better name!), you should use the `SidebarInsight` component and use its `slot`s to place your content in. You also have access to the `this.isActive()` method to determine if this insight is expanded or not.
 
-```
+```ts
 <${SidebarInsight.SidebarInsight.litTagName} .data=${{
   title: this.userVisibleTitle,
   description: this.description,
   expanded: this.isActive(),
-} as SidebarInsight.InsightDetails}
+}}
 @insighttoggleclick=${this.onSidebarClick}
 >
   <div slot="insight-content" class="insight-section">

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

@@ -12,8 +12,6 @@ import type * as Overlays from '../../overlays/overlays.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;
@@ -30,9 +28,9 @@ const UIStrings = {
       '[Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources/) ' +
       'can move these network requests out of the critical path.',
   /**
-   * @description Label to describe a render-blocking network request.
+   * @description Label to describe a network request (that happens to be render-blocking).
    */
-  renderBlockingRequest: 'Render-blocking request',
+  renderBlockingRequest: 'Request',
   /**
    *@description Label used for a time duration.
    */
@@ -80,7 +78,7 @@ export class RenderBlockingRequests extends BaseInsight {
             internalName: this.internalName,
             expanded: this.isActive(),
             estimatedSavingsTime: estimatedSavings,
-          } as SidebarInsight.InsightDetails}
+          }}
           @insighttoggleclick=${this.onSidebarClick} >
             <div slot="insight-content" class="insight-section">
               ${html`<devtools-performance-table
@@ -94,12 +92,12 @@ export class RenderBlockingRequests extends BaseInsight {
                     ],
                     overlays: [this.#createOverlayForRequest(request)],
                   })),
-                } as TableData}>
+                }}>
               </devtools-performance-table>`}
             </div>
           </devtools-performance-sidebar-insight>
       </div>`;
-    // clang-format on
+            // clang-format on
   }
 
   override getRelatedEvents(): Trace.Types.Events.Event[] {

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

@@ -18,17 +18,17 @@ const {html} = LitHtml;
 
 const UIStrings = {
   /**
-   * @description Text to tell the user the estimated time or size savings for this insight.
+   * @description Text to tell the user the estimated time or size savings for this insight. "&" means "and" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
    * @example {401 ms} PH1
    * @example {112 kB} PH1
    */
   estimatedSavings: 'Est savings: {PH1}',
   /**
-   * @description Text to tell the user the estimated time and size savings for this insight.
+   * @description Text to tell the user the estimated time and size savings for this insight. "&" means "and", "Est" means "Estimated" - space is limited to prefer abbreviated terms if possible. Text will still fit if not short, it just won't look very good, so using no abbreviations is fine if necessary.
    * @example {401 ms} PH1
    * @example {112 kB} PH2
    */
-  estimatedSavingsTimingAndBytes: 'Est savings: {PH1} && {PH2}',
+  estimatedSavingsTimingAndBytes: 'Est savings: {PH1} & {PH2}',
   /**
    * @description Used for screen-readers as a label on the button to expand an insight to view details
    * @example {LCP by phase} PH1
@@ -51,7 +51,9 @@ export interface InsightDetails {
 export class InsightActivated extends Event {
   static readonly eventName = 'insightactivated';
 
-  constructor(public name: string, public insightSetKey: string, public overlays: Overlays.Overlays.TimelineOverlay[]) {
+  constructor(
+      public name: string, public insightSetKey: string, public overlays: Overlays.Overlays.TimelineOverlay[],
+      public relatedEvents: Trace.Types.Events.Event[]) {
     super(InsightActivated.eventName, {bubbles: true, composed: true});
   }
 }
@@ -70,6 +72,13 @@ export class InsightSetHovered extends Event {
   }
 }
 
+export class InsightSetZoom extends Event {
+  static readonly eventName = 'insightsetzoom';
+  constructor(public bounds: Trace.Types.Timing.TraceWindowMicroSeconds) {
+    super(InsightSetZoom.eventName, {bubbles: true, composed: true});
+  }
+}
+
 export class InsightProvideOverlays extends Event {
   static readonly eventName = 'insightprovideoverlays';
 
@@ -94,13 +103,13 @@ declare global {
     [InsightActivated.eventName]: InsightActivated;
     [InsightDeactivated.eventName]: InsightDeactivated;
     [InsightSetHovered.eventName]: InsightSetHovered;
+    [InsightSetZoom.eventName]: InsightSetZoom;
     [InsightProvideOverlays.eventName]: InsightProvideOverlays;
     [InsightProvideRelatedEvents.eventName]: InsightProvideRelatedEvents;
   }
 }
 
 export class SidebarInsight extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-sidebar-insight`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 

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

@@ -3,10 +3,14 @@
 // found in the LICENSE file.
 
 import './Table.js';
+import '../../../../ui/components/linkifier/linkifier.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../../generated/protocol.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import type * as Linkifier from '../../../../ui/components/linkifier/linkifier.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
@@ -61,12 +65,76 @@ export class SlowCSSSelector extends BaseInsight {
   override userVisibleTitle: string = i18nString(UIStrings.title);
   override description: string = i18nString(UIStrings.description);
   #slowCSSSelector: Trace.Insights.InsightRunners.SlowCSSSelector.SlowCSSSelectorInsightResult|null = null;
+  #selectorLocations: Map<string, Protocol.CSS.SourceRange[]> = new Map();
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     return [];
   }
 
+  private async toSourceFileLocation(cssModel: SDK.CSSModel.CSSModel, selector: Trace.Types.Events.SelectorTiming):
+      Promise<Linkifier.Linkifier.LinkifierData[]|undefined> {
+    if (!cssModel) {
+      return undefined;
+    }
+    const styleSheetHeader = cssModel.styleSheetHeaderForId(selector.style_sheet_id as Protocol.CSS.StyleSheetId);
+    if (!styleSheetHeader || !styleSheetHeader.resourceURL()) {
+      return undefined;
+    }
+
+    // get the locations from cache if available
+    const key: string = JSON.stringify({selectorText: selector.selector, styleSheetId: selector.style_sheet_id});
+    let ranges = this.#selectorLocations.get(key);
+    if (!ranges) {
+      const result = await cssModel.agent.invoke_getLocationForSelector(
+          {selectorText: selector.selector, styleSheetId: selector.style_sheet_id as Protocol.CSS.StyleSheetId});
+      if (result.getError() || !result.ranges) {
+        return undefined;
+      }
+      ranges = result.ranges;
+      this.#selectorLocations.set(key, ranges);
+    }
+
+    const locations = ranges.map((range, itemIndex) => {
+      return {
+        url: styleSheetHeader.resourceURL() as Platform.DevToolsPath.UrlString,
+        lineNumber: range.startLine,
+        columnNumber: range.startColumn,
+        linkText: `[${itemIndex + 1}]`,
+        title: `${styleSheetHeader.id} line ${range.startLine + 1}:${range.startColumn + 1}`,
+      } as Linkifier.Linkifier.LinkifierData;
+    });
+    return locations;
+  }
+
+  private async getSelectorLinks(
+      cssModel: SDK.CSSModel.CSSModel|null|undefined,
+      selector: Trace.Types.Events.SelectorTiming): Promise<LitHtml.LitTemplate> {
+    if (!cssModel) {
+      return LitHtml.nothing;
+    }
+
+    if (!selector.style_sheet_id) {
+      return LitHtml.nothing;
+    }
+
+    const locations = await this.toSourceFileLocation(cssModel, selector);
+    if (!locations) {
+      return LitHtml.nothing;
+    }
+
+    const links = html`
+    ${locations.map((location, itemIndex) => {
+      const divider = itemIndex !== locations.length - 1 ? ', ' : '';
+      return html`<devtools-linkifier .data=${location as Linkifier.Linkifier.LinkifierData}></devtools-linkifier>${
+          divider}`;
+    })}`;
+
+    return links;
+  }
+
   renderSlowCSSSelector(): LitHtml.LitTemplate {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    const cssModel = target?.model(SDK.CSSModel.CSSModel);
     const time = (us: Trace.Types.Timing.MicroSeconds): string =>
         i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(us));
 
@@ -80,40 +148,50 @@ export class SlowCSSSelector extends BaseInsight {
               expanded: this.isActive(),
           } as SidebarInsight.InsightDetails}
           @insighttoggleclick=${this.onSidebarClick} >
-          <div slot="insight-content" class="insight-section">
-            ${html`<devtools-performance-table
-              .data=${{
-                insight: this,
-                headers: [i18nString(UIStrings.total), ''],
-                rows: [
-                  {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.#slowCSSSelector.totalElapsedMs)]},
-                  {values: [i18nString(UIStrings.matchAttempts), this.#slowCSSSelector.totalMatchAttempts]},
-                  {values: [i18nString(UIStrings.matchCount), this.#slowCSSSelector.totalMatchCount]},
-                ],
-              } as TableData}>
-            </devtools-performance-table>`}
-            ${html`<devtools-performance-table
-              .data=${{
-                insight: this,
-                headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.elapsed)],
-                rows: this.#slowCSSSelector.topElapsedMs.map(selector => {
-                  return {
-                    values: [selector.selector, time(Trace.Types.Timing.MicroSeconds(selector['elapsed (us)']))],
-                  };
-                }),
-              } as TableData}>
-            </devtools-performance-table>`}
-            ${html`<devtools-performance-table
-              .data=${{
-                insight: this,
-                headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.matchAttempts)],
-                rows: this.#slowCSSSelector.topMatchAttempts.map(selector => {
-                  return {
-                    values: [selector.selector, selector['match_attempts']],
-                  };
-                }),
-              } as TableData}>
-            </devtools-performance-table>`}
+          <div slot="insight-content">
+            <div class="insight-section">
+              ${html`<devtools-performance-table
+                .data=${{
+                  insight: this,
+                  headers: [i18nString(UIStrings.total), ''],
+                  rows: [
+                    {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.#slowCSSSelector.totalElapsedMs)]},
+                    {values: [i18nString(UIStrings.matchAttempts), this.#slowCSSSelector.totalMatchAttempts]},
+                    {values: [i18nString(UIStrings.matchCount), this.#slowCSSSelector.totalMatchCount]},
+                  ],
+                } as TableData}>
+              </devtools-performance-table>`}
+            </div>
+            <div class="insight-section">
+              ${html`<devtools-performance-table
+                .data=${{
+                  insight: this,
+                  headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.elapsed)],
+                  rows: this.#slowCSSSelector.topElapsedMs.map(selector => {
+                    return {
+                      values: [
+                      html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}`,
+                      time(Trace.Types.Timing.MicroSeconds(selector['elapsed (us)']))],
+                    };
+                  }),
+                } as TableData}>
+              </devtools-performance-table>`}
+            </div>
+            <div class="insight-section">
+              ${html`<devtools-performance-table
+                .data=${{
+                  insight: this,
+                  headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.matchAttempts)],
+                  rows: this.#slowCSSSelector.topMatchAttempts.map(selector => {
+                    return {
+                      values: [
+                      html`${selector.selector} ${LitHtml.Directives.until(this.getSelectorLinks(cssModel, selector))}` as unknown as string,
+                      selector['match_attempts']],
+                    };
+                  }),
+                } as TableData}>
+              </devtools-performance-table>`}
+            </div>
           </div>
         </devtools-performance-sidebar-insight>
       </div>` : LitHtml.nothing;

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

@@ -15,10 +15,9 @@ const {html} = LitHtml;
  * @fileoverview An interactive table component.
  *
  * On hover:
- *           desaturates the relevant time range (in both the minimap and the flamegraph), and
+ *           desaturates the relevant events (in both the minimap and the flamegraph), and
  *           replaces the current insight's overlays with the overlays attached to that row.
  *           The currently selected trace bounds does not change.
- *           TODO(crbug.com/369102516): make the "desaturates the flamegraph" part true
  *
  *           Removing the mouse from the table without clicking on any row restores the original
  *           overlays.
@@ -45,7 +44,6 @@ export type TableDataRow = {
 };
 
 export class Table extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-table`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);