chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,31 +2,35 @@
 // 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 type {NodeLinkData} from './NodeLink.js';
+import type * 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,28 +41,27 @@ 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,
+              estimatedSavingsTime: insight.metricSavings?.INP,
             } as SidebarInsight.InsightDetails}
             @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},
+                } as NodeLinkData}>
+              </devtools-performance-node-link>` : LitHtml.nothing}
+            </devtools-performance-sidebar-insight>
         </div>`;
     // clang-format on
   }

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-24);
   }
 }
 
@@ -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);
 }
 
@@ -96,7 +89,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 +98,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

@@ -130,13 +130,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,28 +151,25 @@
   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 {
+  display: flex;
+  align-items: center;
+  padding: 7px 0;
 }
 
 .interaction-type {
@@ -201,6 +205,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;
@@ -269,7 +299,7 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   padding-left: 20px;
 }
 
-.link-to-interaction {
+.link-to-log {
   padding: unset;
   background: unset;
   border: unset;
@@ -279,7 +309,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);
   }

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

@@ -53,7 +53,8 @@
   padding: 0 3px;
 }
 
-.devtools-link {
+.devtools-link,
+.timeline-link {
   color: var(--text-link);
   text-decoration: underline;
   outline-offset: 2px;

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

@@ -0,0 +1,45 @@
+/*
+ * 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.
+ */
+
+:host {
+  display: block;
+  padding: var(--sys-size-6);
+}
+
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sys-size-5);
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.insight-chip button {
+  background: none;
+  user-select: none;
+  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-top: var(--sys-size-4);
+  padding: var(--sys-size-2) var(--sys-size-4) var(--sys-size-2) var(--sys-size-4);
+  width: max-content;
+  white-space: pre;
+
+  .keyword {
+    color: var(--sys-color-primary);
+    padding-right: var(--sys-size-3);
+  }
+}
+
+.insight-chip button:hover {
+  background-color: var(--sys-color-state-hover-on-subtle);
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}

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

@@ -13,8 +13,7 @@
 .insight-sets-wrapper {
   display: flex;
   flex-flow: column nowrap;
-  align-items: stretch;
-  height: 100%;
+  flex-grow: 1; /* so it fills the available vertical height in the sidebar */
 
   details {
     flex-grow: 0;
@@ -51,8 +50,27 @@
   }
 }
 
-.insights-category-select {
-  width: max-content;
-  margin-top: 10px;
-  margin-left: 10px;
+.feedback-wrapper {
+  position: relative;
+  padding: var(--sys-size-6);
+
+  .tooltip {
+    visibility: hidden;
+    transition-property: visibility;
+    position: absolute;
+    bottom: 35px; /* height of button + a little extra padding */
+    width: 90%;
+    max-width: 300px;
+    left: var(--sys-size-6);
+    z-index: 1;
+    box-sizing: border-box;
+    padding: var(--sys-size-5) var(--sys-size-6);
+    border-radius: var(--sys-shape-corner-small);
+    background-color: var(--sys-color-cdt-base-container);
+    box-shadow: var(--drop-shadow-depth-3);
+  }
+
+  devtools-button:hover + .tooltip {
+    visibility: visible;
+  }
 }

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

@@ -15,14 +15,20 @@
 }
 
 .metric {
-  margin-top: 10px;
   flex: 1;
   user-select: text;
   cursor: pointer;
+  /* metric container is a button for a11y reasons, so remove default styles
+   * */
+  background: none;
+  border: none;
+  padding: 0;
+  display: block;
+  text-align: left;
 }
 
 .metric-value {
-  font-size: 20px;
+  font-size: var(--sys-size-11);
 }
 
 .metric-value-bad {
@@ -42,6 +48,14 @@
 }
 
 .metric-label {
-  font-size: 12px;
-  font-weight: bold;
+  font: var(--sys-typescale-body4-medium);
+}
+
+.number-with-unit {
+  white-space: nowrap;
+
+  .unit {
+    font-size: 14px;
+    padding: 0 1px;
+  }
 }

package/front_end/panels/timeline/extensions/ExtensionUI.ts

@@ -38,8 +38,11 @@ export function extensionEntryColor(event: Trace.Types.Extensions.SyntheticExten
     case 'tertiary-dark':
       themeColor = '--ref-palette-tertiary60';
       break;
+    case 'warning':
+      themeColor = '--ref-palette-yellow70';
+      break;
     case 'error':
-      themeColor = '--ref-palette-error50';
+      themeColor = '--ref-palette-error60';
       break;
   }
   return ThemeSupport.ThemeSupport.instance().getComputedValue(themeColor);