chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../../core/i18n/i18n.js';
+import * as Platform from '../../../../core/platform/platform.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
@@ -13,12 +14,26 @@ import type * as Overlays from '../../overlays/overlays.js';
 import {md} from './Helpers.js';
 import sidebarInsightStyles from './sidebarInsight.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
-   * @description Text to tell the user the estimated savings for this insight.
-   * @example {401ms} PH1
+   * @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. "&" 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}',
+  /**
+   * @description Used for screen-readers as a label on the button to expand an insight to view details
+   * @example {LCP by phase} PH1
+   */
+  viewDetails: 'View details for {PH1}',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/SidebarInsight.ts', UIStrings);
@@ -29,13 +44,16 @@ export interface InsightDetails {
   description: string;
   internalName: string;
   expanded: boolean;
-  estimatedSavings?: number|undefined;
+  estimatedSavingsTime?: Trace.Types.Timing.MilliSeconds;
+  estimatedSavingsBytes?: number;
 }
 
 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});
   }
 }
@@ -54,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';
 
@@ -64,17 +89,27 @@ export class InsightProvideOverlays extends Event {
   }
 }
 
+export class InsightProvideRelatedEvents extends Event {
+  static readonly eventName = 'insightproviderelatedevents';
+
+  constructor(
+      public label: string, public events: Array<Trace.Types.Events.Event>, public activateInsight: () => void) {
+    super(InsightProvideRelatedEvents.eventName, {bubbles: true, composed: true});
+  }
+}
+
 declare global {
   interface GlobalEventHandlersEventMap {
     [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);
 
@@ -82,14 +117,16 @@ export class SidebarInsight extends HTMLElement {
   #insightDescription: string = '';
   #insightInternalName: string = '';
   #expanded: boolean = false;
-  #estimatedSavings: number|undefined = undefined;
+  #estimatedSavingsTime: Trace.Types.Timing.MilliSeconds|undefined = undefined;
+  #estimatedSavingsBytes: number|undefined = undefined;
 
   set data(data: InsightDetails) {
     this.#insightTitle = data.title;
     this.#insightDescription = data.description;
     this.#insightInternalName = data.internalName;
     this.#expanded = data.expanded;
-    this.#estimatedSavings = data.estimatedSavings;
+    this.#estimatedSavingsTime = data.estimatedSavingsTime;
+    this.#estimatedSavingsBytes = data.estimatedSavingsBytes;
 
     // Used for testing.
     this.dataset.insightTitle = data.title;
@@ -117,41 +154,90 @@ export class SidebarInsight extends HTMLElement {
       'insight-hover-icon': true,
       active: insightIsActive,
     });
-    return LitHtml.html`
-      <div class=${containerClasses} aria-hidden="true">
-        <${Buttons.Button.Button.litTagName} .data=${{
+    return html`
+      <div class=${containerClasses} inert>
+        <devtools-button .data=${{
           variant: Buttons.Button.Variant.ICON,
           iconName: 'chevron-down',
           size: Buttons.Button.Size.SMALL,
         } as Buttons.Button.ButtonData}
-      ></${Buttons.Button.Button.litTagName}>
+      ></devtools-button>
       </div>
 
     `;
     // clang-format on
   }
 
+  /**
+   * Ensure that if the user presses enter or space on a header, we treat it
+   * like a click and toggle the insight.
+   */
+  #handleHeaderKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.#dispatchInsightToggle();
+    }
+  }
+
+  #getEstimatedSavingsString(): string|null {
+    let timeString, bytesString;
+    if (this.#estimatedSavingsTime !== undefined && this.#estimatedSavingsTime > 0) {
+      timeString = i18n.TimeUtilities.millisToString(this.#estimatedSavingsTime);
+    }
+    if (this.#estimatedSavingsBytes !== undefined && this.#estimatedSavingsBytes > 0) {
+      bytesString = Platform.NumberUtilities.bytesToString(this.#estimatedSavingsBytes);
+    }
+
+    if (timeString && bytesString) {
+      return i18nString(UIStrings.estimatedSavingsTimingAndBytes, {
+        PH1: timeString,
+        PH2: bytesString,
+      });
+    }
+    if (timeString) {
+      return i18nString(UIStrings.estimatedSavings, {
+        PH1: timeString,
+      });
+    }
+    if (bytesString) {
+      return i18nString(UIStrings.estimatedSavings, {
+        PH1: bytesString,
+      });
+    }
+
+    return null;
+  }
+
   #render(): void {
     const containerClasses = LitHtml.Directives.classMap({
       insight: true,
       closed: !this.#expanded,
     });
+    const estimatedSavingsString = this.#getEstimatedSavingsString();
 
     // clang-format off
-    const output = LitHtml.html`
+    const output = html`
       <div class=${containerClasses}>
-        <header @click=${this.#dispatchInsightToggle} jslog=${VisualLogging.action(`timeline.toggle-insight.${this.#insightInternalName}`).track({click: true})}>
+        <header @click=${this.#dispatchInsightToggle}
+          @keydown=${this.#handleHeaderKeyDown}
+          jslog=${VisualLogging.action(`timeline.toggle-insight.${this.#insightInternalName}`).track({click: true})}
+          tabIndex="0"
+          role="button"
+          aria-expanded=${this.#expanded}
+          aria-label=${i18nString(UIStrings.viewDetails, {PH1: this.#insightTitle})}
+        >
           ${this.#renderHoverIcon(this.#expanded)}
           <h3 class="insight-title">${this.#insightTitle}</h3>
-          ${this.#estimatedSavings && this.#estimatedSavings > 0 ?
-            LitHtml.html`
+          ${estimatedSavingsString ?
+            html`
             <slot name="insight-savings" class="insight-savings">
-              ${i18nString(UIStrings.estimatedSavings, {PH1: i18n.TimeUtilities.millisToString(this.#estimatedSavings as Trace.Types.Timing.MilliSeconds)})}
+              ${estimatedSavingsString}
             </slot>
           </div>`
           : LitHtml.nothing}
         </header>
-        ${this.#expanded ? LitHtml.html`
+        ${this.#expanded ? html`
           <div class="insight-body">
             <div class="insight-description">${this.#insightDescription ? md(this.#insightDescription) : LitHtml.nothing}</div>
             <div class="insight-content">

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

@@ -2,28 +2,36 @@
 // Use of this source code is governed by a BSD-style license that can be
 // 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 Components from '../../overlays/components/components.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 type * as SidebarInsight from './SidebarInsight.js';
+import type {TableData} from './Table.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Title of an insight that provides details about slow CSS selectors.
    */
-  title: 'Slow CSS selectors',
+  title: 'CSS Selector costs',
+
   /**
    * @description Text to describe how to improve the performance of CSS selectors.
    */
   description:
-      'Learn how to [assess the performance of CSS selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats).',
+      'If Recalculate Style costs remain high, selector optimization can reduce them. [Optimize the selectors](https://developer.chrome.com/docs/devtools/performance/selector-stats) with both high elapsed time and high slow-path %. Simpler selectors, fewer selectors, a smaller DOM, and a shallower DOM will all reduce matching costs.',
 
   /**
    *@description Column name for count of elements that the engine attempted to match against a style rule
@@ -51,89 +59,141 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Sl
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SlowCSSSelector extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-slow-css-selector`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-slow-css-selector`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'slow-css-selector';
   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[] {
-    if (!this.data.insights || !this.data.insightSetKey) {
-      return [];
+    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;
     }
-    const {insightSetKey: navigationId, insights} = this.data;
 
-    const insightsByNavigation = insights.get(navigationId);
-    if (!insightsByNavigation) {
-      return [];
+    // 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 scsInsight: Error|Trace.Insights.InsightRunners.SlowCSSSelector.SlowCSSSelectorInsightResult =
-        insightsByNavigation.data.SlowCSSSelector;
-    if (scsInsight instanceof Error) {
-      return [];
+    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 sections: Array<Components.TimespanBreakdownOverlay.EntryBreakdown> = [];
+    const locations = await this.toSourceFileLocation(cssModel, selector);
+    if (!locations) {
+      return LitHtml.nothing;
+    }
 
-    return [{
-      type: 'TIMESPAN_BREAKDOWN',
-      sections,
-    }];
+    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));
 
     // clang-format off
-    return this.#slowCSSSelector ? LitHtml.html`
+    return this.#slowCSSSelector ? 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}
-              .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}>
-            </${Table.litTagName}>`}
-            ${LitHtml.html`<${Table.litTagName}
-              .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}>
-            </${Table.litTagName}>`}
-            ${LitHtml.html`<${Table.litTagName}
-              .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}>
-            </${Table.litTagName}>`}
+          @insighttoggleclick=${this.onSidebarClick} >
+          <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>
-        </${SidebarInsight}>
+        </devtools-performance-sidebar-insight>
       </div>` : LitHtml.nothing;
     // clang-format on
   }
@@ -145,6 +205,11 @@ export class SlowCSSSelector extends BaseInsight {
         this.#slowCSSSelector.topMatchAttempts.length !== 0;
   }
 
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight = Trace.Insights.Common.getInsight('SlowCSSSelector', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
+  }
+
   override render(): void {
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,

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

@@ -6,17 +6,18 @@ import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js'
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
-import {type BaseInsight} from './Helpers.js';
+import type {BaseInsight} from './Helpers.js';
 import tableStyles from './table.css.js';
 
+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.
@@ -38,12 +39,11 @@ export interface TableData {
 }
 
 export type TableDataRow = {
-  values: string[],
+  values: Array<string|LitHtml.LitTemplate>,
   overlays?: Overlays.Overlays.TimelineOverlay[],
 };
 
 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);
@@ -66,6 +66,7 @@ export class Table extends HTMLElement {
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets.push(tableStyles);
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
   #onHoverRow(e: MouseEvent): void {
@@ -137,7 +138,7 @@ export class Table extends HTMLElement {
         this.#insight.toggleTemporaryOverlays(overlays, {updateTraceWindow: !opts.isHover});
       }
     } else {
-      this.#insight.toggleTemporaryOverlays(null);
+      this.#insight.toggleTemporaryOverlays(null, {updateTraceWindow: false});
     }
 
     this.#state.selectedRowEl?.classList.remove('selected');
@@ -152,14 +153,14 @@ export class Table extends HTMLElement {
     }
 
     LitHtml.render(
-        LitHtml.html`<table
+        html`<table
           class=${LitHtml.Directives.classMap({
           interactive: this.#interactive,
         })}
           @mouseleave=${this.#interactive ? this.#onMouseLeave : null}>
         <thead>
           <tr>
-          ${this.#headers.map(h => LitHtml.html`<th scope="col">${h}</th>`)}
+          ${this.#headers.map(h => html`<th scope="col">${h}</th>`)}
           </tr>
         </thead>
         <tbody
@@ -167,12 +168,12 @@ export class Table extends HTMLElement {
           @click=${this.#interactive ? this.#onClickRow : null}
         >
           ${this.#rows.map(row => {
-          const rowsEls = row.values.map(
-              (value, i) => i === 0 ? LitHtml.html`<th scope="row">${value}</th>` : LitHtml.html`<td>${value}</td>`);
-          return LitHtml.html`<tr>${rowsEls}</tr>`;
+          const rowsEls =
+              row.values.map((value, i) => i === 0 ? html`<th scope="row">${value}</th>` : html`<td>${value}</td>`);
+          return html`<tr>${rowsEls}</tr>`;
         })}
         </tbody>
-      </div>`,
+      </table>`,
         this.#shadow, {host: this});
   }
 }