chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/panels/timeline/components/insights/BaseInsightComponent.test.ts

@@ -0,0 +1,84 @@
+// 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 type * as Common from '../../../../core/common/common.js';
+import * as Trace from '../../../../models/trace/trace.js';
+import {renderElementIntoDOM} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
+import type {TimelineOverlay} from '../../overlays/OverlaysImpl.js';
+
+import * as Insights from './insights.js';
+
+const {html} = LitHtml;
+
+describeWithEnvironment('BaseInsightComponent', () => {
+  const {BaseInsightComponent} = Insights.BaseInsightComponent;
+  const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+  class TestInsightComponent extends BaseInsightComponent<Trace.Insights.Types.InsightModel<{}>> {
+    override internalName = 'test-insight';
+    override createOverlays(): TimelineOverlay[] {
+      return [];
+    }
+    override render(): void {
+      this.renderWithContent(html`<div>test content</div>`);
+    }
+  }
+  customElements.define('test-insight-component', TestInsightComponent);
+
+  describe('sidebar insight component rendering', () => {
+    it('renders insight title even when not active', async () => {
+      const component = new TestInsightComponent();
+      component.selected = false;
+      component.model = {
+        title: 'LCP by Phase' as Common.UIString.LocalizedString,
+        description: 'some description' as Common.UIString.LocalizedString,
+        category: Trace.Insights.Types.InsightCategory.ALL,
+        shouldShow: true,
+      };
+      renderElementIntoDOM(component);
+
+      await coordinator.done();
+
+      assert.isNotNull(component.shadowRoot);
+      const titleElement = component.shadowRoot.querySelector<HTMLElement>('.insight-title');
+      assert.isNotNull(titleElement);
+      const descElement = component.shadowRoot.querySelector<HTMLElement>('.insight-description');
+      assert.isNull(descElement);
+      const contentElement = component.shadowRoot.querySelector<HTMLElement>('.insight-content');
+      assert.isNull(contentElement);
+      assert.deepEqual(titleElement.textContent, 'LCP by Phase');
+    });
+
+    it('renders title, description and content when toggled', async () => {
+      const component = new TestInsightComponent();
+      component.selected = true;
+      component.model = {
+        title: 'LCP by Phase' as Common.UIString.LocalizedString,
+        description: 'some description' as Common.UIString.LocalizedString,
+        category: Trace.Insights.Types.InsightCategory.ALL,
+        shouldShow: true,
+      };
+      renderElementIntoDOM(component);
+
+      await coordinator.done();
+
+      assert.isNotNull(component.shadowRoot);
+      const titleElement = component.shadowRoot.querySelector<HTMLElement>('.insight-title');
+      assert.isNotNull(titleElement);
+      assert.deepEqual(titleElement.textContent, 'LCP by Phase');
+
+      const descElement = component.shadowRoot.querySelector<HTMLElement>('.insight-description');
+      assert.isNotNull(descElement);
+      // It's in the markdown component.
+      assert.strictEqual(descElement.children[0].shadowRoot?.textContent?.trim(), 'some description');
+
+      const contentElement = component.shadowRoot.querySelector<HTMLElement>('.insight-content');
+      assert.isNotNull(contentElement);
+      assert.strictEqual(contentElement.textContent, 'test content');
+    });
+  });
+});

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

@@ -0,0 +1,291 @@
+// 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/markdown_view/markdown_view.js';
+
+import * as i18n from '../../../../core/i18n/i18n.js';
+import type {InsightModel} from '../../../../models/trace/insights/types.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';
+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 {md} from '../../utils/Helpers.js';
+
+import baseInsightComponentStyles from './baseInsightComponent.css.js';
+import * as SidebarInsight from './SidebarInsight.js';
+import type {TableState} from './Table.js';
+
+const {html} = LitHtml;
+
+const UIStrings = {
+  /**
+   * @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/BaseInsightComponent.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface BaseInsightData {
+  parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
+  /** The key into `insights` that contains this particular insight. */
+  insightSetKey: string|null;
+}
+
+export abstract class BaseInsightComponent<T extends InsightModel<{}>> extends HTMLElement {
+  abstract internalName: string;
+  // So we can use the TypeScript BaseInsight class without getting warnings
+  // about litTagName. Every child should overrwrite this.
+  static readonly litTagName = LitHtml.literal``;
+
+  readonly #shadowRoot = this.attachShadow({mode: 'open'});
+
+  #selected = false;
+  #model: T|null = null;
+
+  get model(): T|null {
+    return this.#model;
+  }
+
+  protected data: BaseInsightData = {
+    parsedTrace: null,
+    insightSetKey: null,
+  };
+
+  // eslint-disable-next-line rulesdir/no_bound_component_methods
+  readonly #boundRender = this.render.bind(this);
+  readonly sharedTableState: TableState = {
+    selectedRowEl: null,
+    selectionIsSticky: false,
+  };
+  #initialOverlays: Overlays.Overlays.TimelineOverlay[]|null = null;
+
+  protected scheduleRender(): void {
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  connectedCallback(): void {
+    this.#shadowRoot.adoptedStyleSheets.push(baseInsightComponentStyles);
+    this.setAttribute('jslog', `${VisualLogging.section(`timeline.insights.${this.internalName}`)}`);
+    // Used for unit test purposes when querying the DOM.
+    this.dataset.insightName = this.internalName;
+  }
+
+  set selected(selected: boolean) {
+    if (!this.#selected && selected) {
+      this.dispatchEvent(
+          new SidebarInsight.InsightProvideOverlays(this.getInitialOverlays(), {updateTraceWindow: true}));
+    }
+
+    this.#selected = selected;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  get selected(): boolean {
+    return this.#selected;
+  }
+
+  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);
+  }
+
+  #dispatchInsightToggle(): void {
+    if (this.#selected) {
+      this.dispatchEvent(new SidebarInsight.InsightDeactivated());
+      return;
+    }
+
+    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.model, this.data.insightSetKey));
+  }
+
+  #renderHoverIcon(insightIsActive: boolean): LitHtml.TemplateResult {
+    // clang-format off
+    const containerClasses = LitHtml.Directives.classMap({
+      'insight-hover-icon': true,
+      active: insightIsActive,
+    });
+    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}
+      ></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();
+    }
+  }
+
+  /**
+   * 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.#selected) {
+      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;
+  }
+
+  protected abstract createOverlays(): Overlays.Overlays.TimelineOverlay[];
+
+  protected abstract render(): void;
+
+  getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return null;
+  }
+
+  getEstimatedSavingsBytes(): number|null {
+    return null;
+  }
+
+  #getEstimatedSavingsString(): string|null {
+    const savingsTime = this.getEstimatedSavingsTime();
+    const savingsBytes = this.getEstimatedSavingsBytes();
+
+    let timeString, bytesString;
+    if (savingsTime) {
+      timeString = i18n.TimeUtilities.millisToString(savingsTime);
+    }
+    if (savingsBytes) {
+      bytesString = i18n.ByteUtilities.bytesToString(savingsBytes);
+    }
+
+    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;
+  }
+
+  protected renderWithContent(content: LitHtml.LitTemplate): void {
+    if (content === LitHtml.nothing || !this.#model) {
+      LitHtml.render(LitHtml.nothing, this.#shadowRoot, {host: this});
+      return;
+    }
+
+    const containerClasses = LitHtml.Directives.classMap({
+      insight: true,
+      closed: !this.#selected,
+    });
+    const estimatedSavingsString = this.#getEstimatedSavingsString();
+
+    // clang-format off
+    const output = html`
+      <div class=${containerClasses}>
+        <header @click=${this.#dispatchInsightToggle}
+          @keydown=${this.#handleHeaderKeyDown}
+          jslog=${VisualLogging.action(`timeline.toggle-insight.${this.internalName}`).track({click: true})}
+          tabIndex="0"
+          role="button"
+          aria-expanded=${this.#selected}
+          aria-label=${i18nString(UIStrings.viewDetails, {PH1: this.#model.title})}
+        >
+          ${this.#renderHoverIcon(this.#selected)}
+          <h3 class="insight-title">${this.#model?.title}</h3>
+          ${estimatedSavingsString ?
+            html`
+            <slot name="insight-savings" class="insight-savings">
+              ${estimatedSavingsString}
+            </slot>
+          </div>`
+          : LitHtml.nothing}
+        </header>
+        ${this.#selected ? html`
+          <div class="insight-body">
+            <div class="insight-description">${md(this.#model.description)}</div>
+            <div class="insight-content">${content}</div>
+          </div>`
+          : LitHtml.nothing
+        }
+      </div>
+    `;
+    // clang-format on
+
+    LitHtml.render(output, this.#shadowRoot, {host: this});
+
+    if (this.#selected) {
+      requestAnimationFrame(() => requestAnimationFrame(() => this.scrollIntoViewIfNeeded()));
+    }
+  }
+}

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

@@ -8,9 +8,8 @@ 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 {BaseInsightComponent} from './BaseInsightComponent.js';
 import {EventReferenceClick} from './EventRef.js';
-import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
-import {Category} from './types.js';
 
 const {html} = LitHtml;
 
@@ -54,7 +53,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-cls-culprits`;
-  override insightCategory: Category = Category.CLS;
   override internalName: string = 'cls-culprits';
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
@@ -127,41 +125,23 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
     this.dispatchEvent(new EventReferenceClick(event));
   }
 
-  #render(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster): LitHtml.LitTemplate {
-    if (!this.model) {
-      return LitHtml.nothing;
-    }
-
+  #renderContent(culprits: Array<string>, worstCluster: Trace.Types.Events.SyntheticLayoutShiftCluster):
+      LitHtml.LitTemplate {
     const ts = Trace.Types.Timing.MicroSeconds(worstCluster.ts - (this.data.parsedTrace?.Meta.traceBounds.min ?? 0));
     const clusterTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
 
-    // TODO(crbug.com/369102516): use Table for hover/click ux.
     // clang-format off
     return html`
-        <div class="insights">
-            <devtools-performance-sidebar-insight .data=${{
-              title: this.model.title,
-              description: this.model.description,
-              internalName: this.internalName,
-              expanded: this.isActive(),
-            }}
-            @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>
-                    <p>${i18nString(UIStrings.topCulprits)}:</p>
-                        ${culprits.map(culprit => {
-                          return html `
-                            <li>${culprit}</li>
-                          `;
-                        })}
-                </div>
-            </devtools-performance-sidebar-insight>
-        </div>`;
-              // clang-format on
-  }
-
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    return this.model?.relatedEvents ?? [];
+      <div 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>
+          <p>${i18nString(UIStrings.topCulprits)}:</p>
+              ${culprits.map(culprit => {
+                return html `
+                  <li>${culprit}</li>
+                `;
+              })}
+      </div>`;
+    // clang-format on
   }
 
   override render(): void {
@@ -170,21 +150,17 @@ export class CLSCulprits extends BaseInsightComponent<CLSCulpritsInsightModel> {
     }
 
     const culpritsByShift = this.model.shifts;
-    const clusters = this.model.clusters ?? [];
-    if (!clusters.length || !this.model.worstCluster) {
+    if (!this.model.clusters.length || !this.model.worstCluster) {
       return;
     }
 
+    // TODO: getTopCulprits needs to move to model.
     const causes = this.getTopCulprits(this.model.worstCluster, culpritsByShift);
 
     const hasCulprits = causes.length > 0;
 
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const output = hasCulprits && matchesCategory ? this.#render(causes, this.model.worstCluster) : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    const output = hasCulprits ? this.#renderContent(causes, this.model.worstCluster) : LitHtml.nothing;
+    this.renderWithContent(output);
   }
 }
 

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

@@ -10,8 +10,7 @@ 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 {BaseInsightComponent, shouldRenderForCategory} from './Helpers.js';
-import {Category} from './types.js';
+import {BaseInsightComponent} from './BaseInsightComponent.js';
 
 const {html} = LitHtml;
 
@@ -69,7 +68,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-document-latency`;
-  override insightCategory: Category = Category.ALL;
   override internalName: string = 'document-latency';
 
   #check(didPass: boolean, good: string, bad: string): LitHtml.TemplateResult {
@@ -145,47 +143,38 @@ export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsight
     return overlays;
   }
 
-  #renderInsight(): LitHtml.LitTemplate {
+  override getEstimatedSavingsTime(): Trace.Types.Timing.MilliSeconds|null {
+    return this.model?.metricSavings?.FCP ?? null;
+  }
+
+  override getEstimatedSavingsBytes(): number|null {
+    return this.model?.data?.uncompressedResponseBytes ?? null;
+  }
+
+  #renderContent(): LitHtml.LitTemplate {
     if (!this.model?.data) {
       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: this.model.metricSavings?.FCP,
-            estimatedSavingsBytes: this.model.data.uncompressedResponseBytes,
-        }}
-        @insighttoggleclick=${this.onSidebarClick}
-      >
-        <div slot="insight-content" class="insight-section">
-          <ul class="insight-results insight-icon-results">
-            <li class="insight-entry">
-              ${this.#check(this.model.data.redirectDuration === 0,
-                i18nString(UIStrings.passingRedirects), i18nString(UIStrings.failedRedirects))}
-            </li>
-            <li class="insight-entry">
-              ${this.#check(!this.model.data.serverResponseTooSlow,
-                i18nString(UIStrings.passingServerResponseTime), i18nString(UIStrings.failedServerResponseTime))}
-            </li>
-            <li class="insight-entry">
-              ${this.#check(this.model.data.uncompressedResponseBytes === 0,
-                i18nString(UIStrings.passingTextCompression), i18nString(UIStrings.failedTextCompression))}
-            </li>
-          </ul>
-        </div>
-      </devtools-performance-sidebar-insight>
-    </div>`;
-        // clang-format on
-  }
-
-  override getRelatedEvents(): Trace.Types.Events.Event[] {
-    return this.model?.relatedEvents ?? [];
+      <div class="insight-section">
+        <ul class="insight-results insight-icon-results">
+          <li class="insight-entry">
+            ${this.#check(this.model.data.redirectDuration === 0,
+              i18nString(UIStrings.passingRedirects), i18nString(UIStrings.failedRedirects))}
+          </li>
+          <li class="insight-entry">
+            ${this.#check(!this.model.data.serverResponseTooSlow,
+              i18nString(UIStrings.passingServerResponseTime), i18nString(UIStrings.failedServerResponseTime))}
+          </li>
+          <li class="insight-entry">
+            ${this.#check(this.model.data.uncompressedResponseBytes === 0,
+              i18nString(UIStrings.passingTextCompression), i18nString(UIStrings.failedTextCompression))}
+          </li>
+        </ul>
+      </div>`;
+    // clang-format on
   }
 
   override render(): void {
@@ -193,14 +182,7 @@ export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsight
       return;
     }
 
-    const matchesCategory = shouldRenderForCategory({
-      activeCategory: this.data.activeCategory,
-      insightCategory: this.insightCategory,
-    });
-    const hasFailure = this.model?.data?.redirectDuration > 0 || this.model?.data?.serverResponseTooSlow ||
-        this.model.data.uncompressedResponseBytes > 0;
-    const output = (matchesCategory && hasFailure) ? this.#renderInsight() : LitHtml.nothing;
-    LitHtml.render(output, this.shadow, {host: this});
+    this.renderWithContent(this.#renderContent());
   }
 }