chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './Table.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Trace from '../../../../models/trace/trace.js';
@@ -9,13 +11,13 @@ import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import * as SidebarInsight from './SidebarInsight.js';
-import {Table, type TableData} from './Table.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 type ThirdPartiesEntries = Array<[
-  Trace.Insights.InsightRunners.ThirdPartyWeb.Entity,
-  Trace.Insights.InsightRunners.ThirdPartyWeb.Summary,
+  Trace.Extras.ThirdParties.Entity,
+  Trace.Extras.ThirdParties.Summary,
 ]>;
 
 const UIStrings = {
@@ -26,8 +28,7 @@ const UIStrings = {
    * This is displayed after a user expands the section to see more. No character length limits.
    */
   description: 'Third party code can significantly impact load performance. ' +
-      'Assess and reduce the ' +
-      '[amount of third party code](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/) on the page, and try to load what you can after the page has finished loading the main content.',
+      '[Reduce and defer loading of third party code](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/) to prioritize your page\'s content.',
   /** Label for a table column that displays the name of a third-party provider. */
   columnThirdParty: 'Third party',
   /** Label for a column in a data table; entries will be the download size of a web resource in kilobytes. */
@@ -40,14 +41,13 @@ const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Th
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class ThirdParties extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-third-parties`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-third-parties`;
   override insightCategory: Category = Category.ALL;
   override internalName: string = 'third-parties';
   override userVisibleTitle: string = i18nString(UIStrings.title);
   override description: string = i18nString(UIStrings.description);
 
-  #overlaysForEntity =
-      new Map<Trace.Insights.InsightRunners.ThirdPartyWeb.Entity, Overlays.Overlays.TimelineOverlay[]>();
+  #overlaysForEntity = new Map<Trace.Extras.ThirdParties.Entity, Overlays.Overlays.TimelineOverlay[]>();
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     this.#overlaysForEntity.clear();
@@ -85,18 +85,18 @@ export class ThirdParties extends BaseInsight {
     const topMainThreadTimeEntries = entries.sort((a, b) => b[1].mainThreadTime - a[1].mainThreadTime).slice(0, 6);
 
     // clang-format off
-    return LitHtml.html`
+    return html`
         <div class="insights">
-            <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+            <devtools-performance-sidebar-insight .data=${{
               title: this.userVisibleTitle,
               description: this.description,
               internalName: this.internalName,
               expanded: this.isActive(),
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content">
                   <div class="insight-section">
-                    ${LitHtml.html`<${Table.litTagName}
+                    ${html`<devtools-performance-table
                       .data=${{
                         insight: this,
                         headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
@@ -107,12 +107,12 @@ export class ThirdParties extends BaseInsight {
                           ],
                           overlays: this.#overlaysForEntity.get(entity),
                         })),
-                      } as TableData}>
-                    </${Table.litTagName}>`}
+                      }}>
+                    </devtools-performance-table>`}
                   </div>
 
                   <div class="insight-section">
-                    ${LitHtml.html`<${Table.litTagName}
+                    ${html`<devtools-performance-table
                       .data=${{
                         insight: this,
                         headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnBlockingTime)],
@@ -123,15 +123,20 @@ export class ThirdParties extends BaseInsight {
                           ],
                           overlays: this.#overlaysForEntity.get(entity),
                         })),
-                      } as TableData}>
-                    </${Table.litTagName}>`}
+                      }}>
+                    </devtools-performance-table>`}
                   </div>
                 </div>
-            </${SidebarInsight.SidebarInsight}>
+            </devtools-performance-sidebar-insight>
         </div>`;
     // clang-format on
   }
 
+  override getRelatedEvents(): Trace.Types.Events.Event[] {
+    const insight = Trace.Insights.Common.getInsight('ThirdPartyWeb', this.data.insights, this.data.insightSetKey);
+    return insight?.relatedEvents ?? [];
+  }
+
   override render(): void {
     const insight = Trace.Insights.Common.getInsight('ThirdPartyWeb', this.data.insights, this.data.insightSetKey);
     const entries = insight && [...insight.summaryByEntity.entries()].filter(kv => kv[0] !== insight.firstPartyEntity);

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

@@ -2,31 +2,33 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './NodeLink.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import type * as Overlays from '../../overlays/overlays.js';
 
 import {BaseInsight, shouldRenderForCategory} from './Helpers.js';
-import {NodeLink, type NodeLinkData} from './NodeLink.js';
-import * as SidebarInsight from './SidebarInsight.js';
 import {Category} from './types.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /** Title of an insight that provides details about if the page's viewport is optimized for mobile viewing. */
-  title: 'Mobile-optimized viewport',
+  title: 'Viewport not optimized for mobile',
   /**
-   * @description Text to tell the user how a viewport meta element can improve performance.
+   * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
    */
-  description: 'A viewport meta element not only optimizes your app for mobile screen sizes, ' +
-      'but also [prevents a 300 millisecond delay to user input](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).',
+  description:
+      'The page\'s viewport is not mobile-optimized, so tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/).',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Viewport.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class Viewport extends BaseInsight {
-  static readonly litTagName = LitHtml.literal`devtools-performance-viewport`;
+  static override readonly litTagName = LitHtml.literal`devtools-performance-viewport`;
   override insightCategory: Category = Category.INP;
   override internalName: string = 'viewport';
   override userVisibleTitle: string = i18nString(UIStrings.title);
@@ -37,30 +39,29 @@ export class Viewport extends BaseInsight {
     return [];
   }
 
-  #render(data: Trace.Insights.Types.InsightResults['Viewport']): LitHtml.TemplateResult {
-    const backendNodeId = data.viewportEvent?.args.data.node_id;
+  #render(insight: Trace.Insights.Types.InsightResults['Viewport']): LitHtml.TemplateResult {
+    const backendNodeId = insight.viewportEvent?.args.data.node_id;
 
     // clang-format off
-    return LitHtml.html`
+    return html`
         <div class="insights">
-            <${SidebarInsight.SidebarInsight.litTagName} .data=${{
+            <devtools-performance-sidebar-insight .data=${{
               title: this.userVisibleTitle,
               description: this.description,
               expanded: this.isActive(),
               internalName: this.internalName,
-            } as SidebarInsight.InsightDetails}
+              estimatedSavingsTime: insight.metricSavings?.INP,
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
-                <div slot="insight-content" class="insight-section">
-                  ${backendNodeId !== undefined ? LitHtml.html`<${NodeLink.litTagName}
-                    .data=${{
-                      backendNodeId,
-                      options: {tooltip: data.viewportEvent?.args.data.content},
-                    } as NodeLinkData}>
-                  </${NodeLink.litTagName}>` : LitHtml.nothing}
-                </div>
-            </${SidebarInsight.SidebarInsight}>
+              ${backendNodeId !== undefined ? html`<devtools-performance-node-link
+                .data=${{
+                  backendNodeId,
+                  options: {tooltip: insight.viewportEvent?.args.data.content},
+                }}>
+              </devtools-performance-node-link>` : LitHtml.nothing}
+            </devtools-performance-sidebar-insight>
         </div>`;
-    // clang-format on
+              // clang-format on
   }
 
   override render(): void {

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

@@ -4,6 +4,7 @@
 
 import * as CLSCulprits from './CLSCulprits.js';
 import * as DocumentLatency from './DocumentLatency.js';
+import * as EventRef from './EventRef.js';
 import * as FontDisplay from './FontDisplay.js';
 import * as Helpers from './Helpers.js';
 import * as InteractionToNextPaint from './InteractionToNextPaint.js';
@@ -21,6 +22,7 @@ import * as Viewport from './Viewport.js';
 export {
   CLSCulprits,
   DocumentLatency,
+  EventRef,
   FontDisplay,
   Helpers,
   InteractionToNextPaint,

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

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+:host {
+  --markdown-link-text-decoration-style: underline;
+}
+
 .insight {
   display: block;
   position: relative;
@@ -18,6 +22,11 @@
   &.closed {
     background-color: var(--sys-color-surface3);
     border: none;
+
+    &:focus-within {
+      /* Ensure that if the user tabs to a closed insight, we outline it so they know it's focused. */
+      outline: var(--sys-size-1) solid var(--sys-color-primary);
+    }
   }
 
   header {
@@ -27,6 +36,12 @@
       font: var(--sys-typescale-body4-medium);
     }
   }
+
+  &:not(.closed) {
+    header {
+      padding-bottom: var(--sys-size-2);
+    }
+  }
 }
 
 .insight-hover-icon {
@@ -43,7 +58,9 @@
   opacity: 0%;
   transition: opacity 0.2s ease;
 
-  .insight:hover & {
+  /* Ensure that the icon appears when the user hovers, or focuses the header */
+  .insight:hover &,
+  header:focus-within & {
     opacity: 100%;
   }
 
@@ -67,16 +84,15 @@
 }
 
 .insight-section {
-  padding: var(--sys-size-5) 0;
+  padding-top: var(--sys-size-5);
 }
 
 .insight-description:not(:empty) {
   padding-bottom: var(--sys-size-5);
 }
 
-.insight-description:not(:empty),
-.insight-section:not(:last-child) {
-  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+.insight-section:not(:empty) {
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .insight-title {
@@ -116,11 +132,19 @@ dd.dl-title {
 }
 
 .element-img {
-  max-width: 90%;
+  width: var(--sys-size-13);
+  height: var(--sys-size-13);
+  object-fit: cover;
+  border: var(--sys-size-1) solid var(--sys-color-divider);
+  background: var(--sys-color-divider) -0.054px -12px / 100.239% 148.936% no-repeat;
+  margin-right: var(--sys-size-5);
 }
 
 .element-img-details {
   font: var(--sys-typescale-body4-regular);
+  display: flex;
+  flex-direction: column;
+  word-break: break-all;
 
   .element-img-details-size {
     color: var(--color-text-secondary);
@@ -132,7 +156,8 @@ dd.dl-title {
 }
 
 .insight-savings {
-  font-weight: var(--ref-typeface-weight-bold);
+  font: var(--sys-typescale-body4-medium);
+  color: var(--sys-color-green);
 }
 
 ul.insight-icon-results {
@@ -153,12 +178,32 @@ ul.insight-icon-results {
   }
 }
 
-.devtools-link {
+.timeline-link {
   cursor: pointer;
   text-decoration: underline;
   color: var(--sys-color-primary);
+  /* for a11y reasons this is a button, so we have to remove some default
+   * styling */
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
 }
 
-.devtools-link.invalid-link {
+.timeline-link.invalid-link {
   color: var(--sys-color-state-disabled);
 }
+
+.lcp-element {
+  display: inline-flex;
+  align-items: center;
+}
+
+.insight-results:not(:last-child) {
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding-bottom: var(--sys-size-5);
+}
+
+.lcp-element:not(:empty) {
+  padding: inherit;
+}

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

@@ -31,7 +31,15 @@ table.interactive tbody tr.selected {
   background-color: var(--app-color-performance-sidebar-table-row-hover);
 }
 
-table th[scope="row"] {
+table thead th {
+  font: var(--sys-typescale-body4-medium);
+}
+
+table tbody th {
   font-weight: normal;
+}
+
+table th[scope="row"] {
   padding: 3px 0;
+  word-break: break-word;
 }

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

@@ -4,21 +4,6 @@
  * found in the LICENSE file.
  */
 
-.insight-chip {
-  font: var(--sys-typescale-body4-regular);
-  border: var(--sys-size-1) solid var(--sys-color-primary);
-  border-radius: var(--sys-shape-corner-extra-small);
-  display: flex;
-  margin-left: var(--sys-size-3);
-  padding: var(--sys-size-2) var(--sys-size-4) var(--sys-size-2) var(--sys-size-4);
-  width: max-content;
-  white-space: pre;
-
-  .insight-keyword {
-    color: var(--sys-color-primary);
-  }
-}
-
 .layout-shift-details-title,
 .cluster-details-title {
   padding-bottom: var(--sys-size-5);
@@ -42,12 +27,13 @@
   text-align: left;
   border-block: var(--sys-size-1) solid var(--sys-color-divider);
   border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
 
   th,
   td {
     padding-right: var(--sys-size-4);
-    min-width: var(--sys-size-18);
-    max-width: var(--sys-size-30);
+    min-width: var(--sys-size-20);
+    max-width: var(--sys-size-28);
   }
 }
 
@@ -61,13 +47,20 @@
   }
 }
 
-.devtools-link {
+/** TODO: This is duplicated in sidebarInsights.css. Should make a component. */
+.timeline-link {
   cursor: pointer;
   text-decoration: underline;
   color: var(--sys-color-primary);
+  /* for a11y reasons this is a button, so we have to remove some default
+   * styling */
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
 }
 
-.devtools-link.invalid-link {
+.timeline-link.invalid-link {
   color: var(--sys-color-state-disabled);
 }
 
@@ -84,6 +77,12 @@
   vertical-align: top;
 }
 
+.culprit {
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--sys-size-3);
+}
+
 .value {
   display: inline-block;
   user-select: text;
@@ -96,7 +95,8 @@
 .layout-shift-cluster-summary-details {
   font: var(--sys-typescale-body4-regular);
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  column-gap: var(--sys-size-4);
   padding: var(--sys-size-6) var(--sys-size-6) 0 var(--sys-size-6);
 }
 
@@ -104,3 +104,11 @@
   display: flex;
   flex-direction: column;
 }
+
+.shift-row:not(:last-child) {
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+}
+
+.total-row {
+  font: var(--sys-typescale-body4-medium);
+}

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

@@ -73,6 +73,11 @@
   margin-bottom: 10px;
 }
 
+.section-title-help {
+  height: var(--sys-typescale-headline4-line-height);
+  vertical-align: top;
+}
+
 .settings-card {
   border-radius: var(--sys-shape-corner-small);
   padding: 14px 16px 16px;
@@ -130,13 +135,20 @@
   min-width: 0;
 }
 
-.interactions-section {
+.logs-section {
   margin-top: 24px;
   display: flex;
   flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-  min-height: min-content;
+  flex: 1 0 300px;
+  overflow: auto;
+  max-height: max-content;
+
+  --app-color-toolbar-background: transparent;
+}
+
+.logs-section-header {
+  display: flex;
+  align-items: center;
 }
 
 .interactions-clear {
@@ -144,36 +156,49 @@
   vertical-align: sub;
 }
 
-.interactions-list {
+.log {
   padding: 0;
   margin: 0;
   overflow: auto;
-  flex: 1 1 300px;
-  max-height: max-content;
 }
 
-.interaction {
-  display: flex;
-  align-items: center;
-  padding: 7px 0;
+.log-item {
   border: none;
   border-bottom: 1px solid var(--sys-color-divider);
 
   &.highlight {
-    animation: interaction-highlight-fadeout 2s;
+    animation: highlight-fadeout 2s;
   }
 }
 
-.interaction:first-child {
-  border-top: 1px solid var(--sys-color-divider);
+.interaction {
+  --phase-table-margin: 120px;
+  --details-indicator-width: 18px;
+
+  summary {
+    display: flex;
+    align-items: center;
+    padding: 7px 4px;
+
+    &::before {
+      content: " ";
+      height: 14px;
+      width: var(--details-indicator-width);
+      mask-image: var(--image-file-triangle-right);
+      background-color: var(--icon-default);
+      flex-shrink: 0;
+    }
+  }
+
+  details[open] summary::before {
+    mask-image: var(--image-file-triangle-down);
+  }
 }
 
 .interaction-type {
   font-weight: var(--ref-typeface-weight-medium);
-  width: 80px;
+  width: calc(var(--phase-table-margin) - var(--details-indicator-width));
   flex-shrink: 0;
-  margin-right: 12px;
-  white-space: nowrap;
 }
 
 .interaction-inp-chip {
@@ -201,6 +226,32 @@
   font-weight: var(--ref-typeface-weight-medium);
 }
 
+.layout-shift {
+  display: flex;
+  align-items: flex-start;
+}
+
+.layout-shift-score {
+  margin-right: 16px;
+  padding: 7px 0;
+  width: 150px;
+  box-sizing: border-box;
+}
+
+.layout-shift-nodes {
+  flex: 1;
+  min-width: 0;
+}
+
+.layout-shift-node {
+  border-bottom: 1px solid var(--sys-color-divider);
+  padding: 7px 0;
+
+  &:last-child {
+    border: none;
+  }
+}
+
 .record-action {
   display: flex;
   flex-direction: row;
@@ -236,12 +287,6 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   text-decoration-line: underline;
 }
 
-.data-descriptions {
-  margin-top: 10px;
-  padding-left: 12px;
-  border-left: 1px solid var(--sys-color-divider);
-}
-
 .environment-option {
   display: flex;
   align-items: center;
@@ -255,13 +300,9 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   width: 18px;
 }
 
-.environment-recs {
-  margin: 12px 0;
-}
-
-.environment-recs > summary {
+.environment-recs-title {
+  margin-top: 12px;
   font-weight: var(--ref-typeface-weight-medium);
-  margin-bottom: 4px;
 }
 
 .environment-recs-list {
@@ -269,7 +310,11 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   padding-left: 20px;
 }
 
-.link-to-interaction {
+.environment-rec {
+  font-weight: var(--ref-typeface-weight-medium);
+}
+
+.link-to-log {
   padding: unset;
   background: unset;
   border: unset;
@@ -279,7 +324,7 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   cursor: pointer;
 }
 
-@keyframes interaction-highlight-fadeout {
+@keyframes highlight-fadeout {
   from {
     background-color: var(--sys-color-yellow-container);
   }
@@ -288,3 +333,29 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
     background-color: transparent;
   }
 }
+
+.phase-table {
+  border-top: 1px solid var(--sys-color-divider);
+  padding: 7px 0;
+  margin-left: var(--phase-table-margin);
+}
+
+.phase-table-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.phase-table-header-row {
+  font-weight: var(--ref-typeface-weight-medium);
+  margin-bottom: 4px;
+}
+
+.log-extra-details-button {
+  padding: unset;
+  background: unset;
+  border: unset;
+  font: inherit;
+  color: var(--sys-color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}