chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

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

@@ -40,6 +40,10 @@ const UIStrings = {
    *@description Label used for the percentage a single phase/component/stage/section takes up of a larger duration.
    */
   percentLCP: '% of LCP',
+  /**
+   * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
+   */
+  noLcp: 'No LCP detected',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/LCPPhases.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -51,7 +55,7 @@ interface PhaseData {
 }
 
 export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-lcp-by-phases`;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-lcp-by-phases`;
   override internalName: string = 'lcp-by-phase';
   #overlay: Overlays.Overlays.TimespanBreakdown|null = null;
 
@@ -186,11 +190,16 @@ export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
     return overlays;
   }
 
-  #renderContent(phaseData: PhaseData[]): LitHtml.LitTemplate {
+  override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
 
+    const phaseData = this.#getPhaseData();
+    if (!phaseData.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noLcp)}</div>`;
+    }
+
     const rows = phaseData.map(({phase, percent}) => {
       const section = this.#overlay?.sections.find(section => phase === section.label);
       return {
@@ -215,15 +224,6 @@ export class LCPPhases extends BaseInsightComponent<LCPPhasesInsightModel> {
       </div>`;
     // clang-format on
   }
-
-  override render(): void {
-    if (!this.model) {
-      return;
-    }
-
-    const phaseData = this.#getPhaseData();
-    this.renderWithContent(this.#renderContent(phaseData));
-  }
 }
 
 declare global {

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

@@ -24,42 +24,28 @@ You will have to define 4 properties on your component:
 
 > Note that in most components, we use private methods and variables for storing this data, but because we are extending a base class, these are all `protected` instead.
 
-## 2. override the `render` method
+## 2. override the `renderContent` method
 
-You should then use `override render(): void` to implement the render method and follow the usual patterns of all our custom elements.
+You should then use `override renderContent(): LitHtml.LitTemplate` to implement the render method and follow the usual patterns of all our custom elements.
 
 You can use the `shouldRenderForCategory` helper method to determine if the insight should even be shown or not. If it should not, you can render nothing:
 
 ```ts
-override render(): void {
+override renderContent(): LitHtml.LitTemplate {
   const matchesCategory = shouldRenderForCategory({
     activeCategory: this.data.activeCategory,
     insightCategory: this.insightCategory,
   });
-  const output = matchesCategory ? this.#renderMyInsight() : LitHtml.nothing;
-  LitHtml.render(output, this.shadow, {host: this});
-}
-```
-
-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.
+  if (!matchesCategory) {
+    return LitHtml.nothing;
+  }
 
-```ts
-<${SidebarInsight.SidebarInsight.litTagName} .data=${{
-  title: this.userVisibleTitle,
-  description: this.description,
-  expanded: this.isActive(),
-}}
-@insighttoggleclick=${this.onSidebarClick}
->
-  <div slot="insight-content" class="insight-section">
-    <!-- this content will be shown below the border in expanded mode -->
-  </div>
-</${SidebarInsight.SidebarInsight}>
+  return LitHtml.html`
+    <div class="insight-section">Insight content goes here</div>
+  `;
+}
 ```
 
-If the content of your insight has multiple sections, remove `class="insight-section"` from the slot and place each section
-in its own `<div class="insight-section">` inside the slot.
-
 ## 3. Override the `createOverlays()` method
 
 If your component should render overlays when it is expanded, you will need to define those in the `createOverlays` method.

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

@@ -25,13 +25,17 @@ const UIStrings = {
    *@description Label used for a time duration.
    */
   duration: 'Duration',
+  /**
+   * @description Text status indicating that no requests blocked the initial render of a navigation
+   */
+  noRenderBlocking: 'No render blocking requests for this navigation',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/RenderBlocking.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-render-blocking-requests`;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-render-blocking-requests`;
   override internalName: string = 'render-blocking-requests';
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
@@ -54,7 +58,7 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     return this.model?.metricSavings?.FCP ?? null;
   }
 
-  #renderContent(): LitHtml.LitTemplate {
+  override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
@@ -62,10 +66,14 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     const MAX_REQUESTS = 3;
     const topRequests = this.model.renderBlockingRequests.slice(0, MAX_REQUESTS);
 
+    if (!topRequests.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noRenderBlocking)}</div>`;
+    }
+
     // clang-format off
     return html`
       <div class="insight-section">
-        ${html`<devtools-performance-table
+        <devtools-performance-table
           .data=${{
             insight: this,
             headers: [i18nString(UIStrings.renderBlockingRequest), i18nString(UIStrings.duration)],
@@ -77,18 +85,11 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
               overlays: [this.#createOverlayForRequest(request)],
             })),
           }}>
-        </devtools-performance-table>`}
-      </div>`;
+        </devtools-performance-table>
+      </div>
+    `;
     // clang-format on
   }
-
-  override render(): void {
-    if (!this.model) {
-      return;
-    }
-
-    this.renderWithContent(this.#renderContent());
-  }
 }
 
 declare global {

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

@@ -41,13 +41,18 @@ const UIStrings = {
    *@description Column name for a total sum.
    */
   total: 'Total',
+  /**
+   * @description Text status indicating that no CSS selector data was found.
+   */
+  enableSelectorData:
+      'No CSS selector data was found. CSS selector stats need to be enabled in the performance panel settings.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/SlowCSSSelector.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-slow-css-selector`;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-slow-css-selector`;
   override internalName: string = 'slow-css-selector';
   #selectorLocations: Map<string, Protocol.CSS.SourceRange[]> = new Map();
 
@@ -116,7 +121,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     return links;
   }
 
-  #renderContent(): LitHtml.LitTemplate {
+  override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
@@ -126,24 +131,33 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     const time = (us: Trace.Types.Timing.MicroSeconds): string =>
         i18n.TimeUtilities.millisToString(Platform.Timing.microSecondsToMilliSeconds(us));
 
+    if (!this.model.topMatchAttempts.length && !this.model.topElapsedMs.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.enableSelectorData)}</div>`;
+    }
+
     // clang-format off
-    return html`
-      <div>
-        <div class="insight-section">
-          ${html`<devtools-performance-table
-            .data=${{
-              insight: this,
-              headers: [i18nString(UIStrings.total), ''],
-              rows: [
-                {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.model.totalElapsedMs)]},
-                {values: [i18nString(UIStrings.matchAttempts), this.model.totalMatchAttempts]},
-                {values: [i18nString(UIStrings.matchCount), this.model.totalMatchCount]},
-              ],
-            } as TableData}>
-          </devtools-performance-table>`}
-        </div>
+    const sections = [html`
+      <div class="insight-section">
+        <devtools-performance-table
+          .data=${{
+            insight: this,
+            headers: [i18nString(UIStrings.total), ''],
+            rows: [
+              {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.model.totalElapsedMs)]},
+              {values: [i18nString(UIStrings.matchAttempts), this.model.totalMatchAttempts]},
+              {values: [i18nString(UIStrings.matchCount), this.model.totalMatchCount]},
+            ],
+          } as TableData}>
+        </devtools-performance-table>
+      </div>
+    `];
+    // clang-format on
+
+    if (this.model.topElapsedMs.length) {
+      // clang-format off
+      sections.push(html`
         <div class="insight-section">
-          ${html`<devtools-performance-table
+          <devtools-performance-table
             .data=${{
               insight: this,
               headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.elapsed)],
@@ -155,10 +169,17 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
                 };
               }),
             } as TableData}>
-          </devtools-performance-table>`}
+          </devtools-performance-table>
         </div>
+      `);
+      // clang-format on
+    }
+
+    if (this.model.topMatchAttempts.length) {
+      // clang-format off
+      sections.push(html`
         <div class="insight-section">
-          ${html`<devtools-performance-table
+          <devtools-performance-table
             .data=${{
               insight: this,
               headers: [i18nString(UIStrings.topSelectors), i18nString(UIStrings.matchAttempts)],
@@ -170,18 +191,13 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
                 };
               }),
             } as TableData}>
-          </devtools-performance-table>`}
+          </devtools-performance-table>
         </div>
-      </div>`;
-    // clang-format on
-  }
-
-  override render(): void {
-    if (!this.model) {
-      return;
+      `);
+      // clang-format on
     }
 
-    this.renderWithContent(this.#renderContent());
+    return html`${sections}`;
   }
 }
 

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

@@ -8,6 +8,7 @@ import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import type * as BaseInsightComponent from './BaseInsightComponent.js';
+import {EventReferenceClick} from './EventRef.js';
 import tableStyles from './table.css.js';
 
 const {html} = LitHtml;
@@ -107,6 +108,14 @@ export class Table extends HTMLElement {
       return;
     }
 
+    // If the desired overlays consist of just a single ENTRY_OUTLINE, then
+    // it is more intuitive to just select the target event.
+    const overlays = this.#rows?.[index]?.overlays;
+    if (overlays?.length === 1 && overlays[0].type === 'ENTRY_OUTLINE') {
+      this.dispatchEvent(new EventReferenceClick(overlays[0].entry));
+      return;
+    }
+
     // Select the row and make it sticky.
     this.#onSelectedRowChanged(rowEl, index, {sticky: true});
   }

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

@@ -15,11 +15,6 @@ import {BaseInsightComponent} from './BaseInsightComponent.js';
 
 const {html} = LitHtml;
 
-type ThirdPartiesEntries = Array<[
-  Trace.Extras.ThirdParties.Entity,
-  Trace.Extras.ThirdParties.Summary,
-]>;
-
 const UIStrings = {
   /** Label for a table column that displays the name of a third-party provider. */
   columnThirdParty: 'Third party',
@@ -27,13 +22,17 @@ const UIStrings = {
   columnTransferSize: 'Transfer size',
   /** Label for a table column that displays how much time each row spent blocking other work on the main thread, entries will be the number of milliseconds spent. */
   columnBlockingTime: 'Blocking time',
+  /**
+   * @description Text block indicating that no third party content was detected on the page
+   */
+  noThirdParties: 'No third parties found',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/ThirdParties.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-third-parties`;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-third-parties`;
   override internalName: string = 'third-parties';
 
   #overlaysForEntity = new Map<Trace.Extras.ThirdParties.Entity, Overlays.Overlays.TimelineOverlay[]>();
@@ -68,19 +67,25 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
     return overlays;
   }
 
-  #renderContent(entries: ThirdPartiesEntries): LitHtml.LitTemplate {
+  override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
 
+    const entries = [...this.model.summaryByEntity.entries()].filter(kv => kv[0] !== this.model?.firstPartyEntity);
+    if (!entries.length) {
+      return html`<div class="insight-section">${i18nString(UIStrings.noThirdParties)}</div>`;
+    }
+
     const topTransferSizeEntries = entries.sort((a, b) => b[1].transferSize - a[1].transferSize).slice(0, 6);
     const topMainThreadTimeEntries = entries.sort((a, b) => b[1].mainThreadTime - a[1].mainThreadTime).slice(0, 6);
 
-    // clang-format off
-    return html`
-      <div>
+    const sections = [];
+    if (topTransferSizeEntries.length) {
+      // clang-format off
+      sections.push(html`
         <div class="insight-section">
-          ${html`<devtools-performance-table
+          <devtools-performance-table
             .data=${{
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
@@ -92,11 +97,17 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
                 overlays: this.#overlaysForEntity.get(entity),
               })),
             }}>
-          </devtools-performance-table>`}
+          </devtools-performance-table>
         </div>
+      `);
+      // clang-format on
+    }
 
+    if (topMainThreadTimeEntries.length) {
+      // clang-format off
+      sections.push(html`
         <div class="insight-section">
-          ${html`<devtools-performance-table
+          <devtools-performance-table
             .data=${{
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnBlockingTime)],
@@ -108,19 +119,13 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
                 overlays: this.#overlaysForEntity.get(entity),
               })),
             }}>
-          </devtools-performance-table>`}
+          </devtools-performance-table>
         </div>
-      </div>`;
-    // clang-format on
-  }
-
-  override render(): void {
-    if (!this.model) {
-      return;
+      `);
+      // clang-format on
     }
 
-    const entries = [...this.model.summaryByEntity.entries()].filter(kv => kv[0] !== this.model?.firstPartyEntity);
-    this.renderWithContent(this.#renderContent(entries));
+    return html`${sections}`;
   }
 }
 

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

@@ -14,7 +14,7 @@ import {BaseInsightComponent} from './BaseInsightComponent.js';
 const {html} = LitHtml;
 
 export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
-  static override readonly litTagName = LitHtml.literal`devtools-performance-viewport`;
+  static override readonly litTagName = LitHtml.StaticHtml.literal`devtools-performance-viewport`;
   override internalName: string = 'viewport';
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
@@ -26,7 +26,7 @@ export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
     return this.model?.metricSavings?.INP ?? null;
   }
 
-  #renderContent(): LitHtml.LitTemplate {
+  override renderContent(): LitHtml.LitTemplate {
     if (!this.model) {
       return LitHtml.nothing;
     }
@@ -45,14 +45,6 @@ export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
       </div>`;
     // clang-format on
   }
-
-  override render(): void {
-    if (!this.model) {
-      return;
-    }
-
-    this.renderWithContent(this.#renderContent());
-  }
 }
 
 declare global {

package/front_end/panels/timeline/components/insights/baseInsightComponent.css

@@ -4,10 +4,6 @@
  * found in the LICENSE file.
  */
 
-:host {
-  --markdown-link-text-decoration-style: underline;
-}
-
 .insight {
   display: block;
   position: relative;
@@ -81,6 +77,17 @@
 
 .insight-body {
   padding: 0 var(--sys-size-6) var(--sys-size-5) var(--sys-size-6);
+
+  .list-title {
+    margin-top: var(--sys-size-4);
+    margin-bottom: var(--sys-size-3);
+  }
+
+  ul {
+    /* left padding to bring the list bullets to the right place */
+    padding: 0 0 0 var(--sys-size-9);
+    margin: 0;
+  }
 }
 
 .insight-section {

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

@@ -5,6 +5,7 @@
 import * as BaseInsightComponent from './BaseInsightComponent.js';
 import * as CLSCulprits from './CLSCulprits.js';
 import * as DocumentLatency from './DocumentLatency.js';
+import * as DOMSize from './DOMSize.js';
 import * as EventRef from './EventRef.js';
 import * as FontDisplay from './FontDisplay.js';
 import * as Helpers from './Helpers.js';
@@ -25,6 +26,7 @@ export {
   BaseInsightComponent,
   CLSCulprits,
   DocumentLatency,
+  DOMSize,
   EventRef,
   FontDisplay,
   Helpers,

package/front_end/panels/timeline/components/insights/table.css

@@ -28,7 +28,7 @@ table.interactive tbody tr {
 
 table.interactive tbody tr:hover,
 table.interactive tbody tr.selected {
-  background-color: var(--app-color-performance-sidebar-table-row-hover);
+  background-color: var(--sys-color-state-hover-on-subtle);
 }
 
 table thead th {

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -279,7 +279,21 @@
 
 .field-data-warning {
   margin-top: 4px;
-  color: var(--color-error-text);
+  color: var(--sys-color-error);
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
+  display: flex;
+
+  &::before {
+    content: " ";
+    width: var(--sys-typescale-body4-line-height);
+    height: var(--sys-typescale-body4-line-height);
+    mask-size: var(--sys-typescale-body4-line-height);
+    mask-image: var(--image-file-warning);
+    background-color: var(--sys-color-error);
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
 }
 
 .collection-period-range {
@@ -351,3 +365,28 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   text-decoration: underline;
   cursor: pointer;
 }
+
+.node-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
+  font-weight: var(--ref-typeface-weight-regular);
+  user-select: text;
+
+  main {
+    width: 300px;
+    max-width: 100%;
+    text-align: center;
+
+    .section-title {
+      margin-bottom: 4px;
+    }
+  }
+}
+
+.node-description {
+  margin-bottom: 12px;
+}

package/front_end/panels/timeline/components/metricCard.css

@@ -56,6 +56,25 @@
   font-weight: var(--ref-typeface-weight-medium);
 }
 
+.warning {
+  margin-top: 4px;
+  color: var(--sys-color-error);
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
+  display: flex;
+
+  &::before {
+    content: " ";
+    width: var(--sys-typescale-body4-line-height);
+    height: var(--sys-typescale-body4-line-height);
+    mask-size: var(--sys-typescale-body4-line-height);
+    mask-image: var(--image-file-warning);
+    background-color: var(--sys-color-error);
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
+}
+
 .good-bg {
   background-color: var(--app-color-performance-good);
 }
@@ -85,17 +104,34 @@
 }
 
 .environment-recs {
-  margin: 12px 0;
+  margin: 9px 0;
 }
 
 .environment-recs > summary {
   font-weight: var(--ref-typeface-weight-medium);
   margin-bottom: 4px;
+  font-size: var(--sys-typescale-body4-size);
+  line-height: var(--sys-typescale-body4-line-height);
+  display: flex;
+
+  &::before {
+    content: " ";
+    width: var(--sys-typescale-body4-line-height);
+    height: var(--sys-typescale-body4-line-height);
+    mask-size: var(--sys-typescale-body4-line-height);
+    mask-image: var(--image-file-triangle-right);
+    background-color: var(--icon-default);
+    margin-right: 4px;
+    flex-shrink: 0;
+  }
+}
+
+details.environment-recs[open] > summary::before {
+  mask-image: var(--image-file-triangle-down);
 }
 
 .environment-recs-list {
   margin: 0;
-  padding-left: 20px;
 }
 
 .detailed-compare-text {
@@ -112,8 +148,7 @@
   grid-template-columns: minmax(min-content, auto) minmax(20px, 50px) max-content;
   grid-auto-rows: 1fr;
   column-gap: 8px;
-  justify-items: flex-end;
-  align-items: center;
+  place-items: center flex-end;
 }
 
 .bucket-label {

package/front_end/panels/timeline/components/networkThrottlingSelector.css

@@ -5,11 +5,14 @@
  */
 
 :host {
-  display: inline-block;
+  display: flex;
+  align-items: center;
   max-width: 100%;
-  min-width: 50px;
+  height: 20px;
 }
 
 devtools-select-menu {
+  min-width: 160px;
   max-width: 100%;
+  height: 20px;
 }