chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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

@@ -4,77 +4,64 @@
 
 import './NodeLink.js';
 
-import * as i18n from '../../../../core/i18n/i18n.js';
-import * as Trace from '../../../../models/trace/trace.js';
+import type {ViewportInsightModel} from '../../../../models/trace/insights/Viewport.js';
+import type * 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 type {NodeLinkData} from './NodeLink.js';
-import type * as SidebarInsight from './SidebarInsight.js';
+import {BaseInsightComponent, shouldRenderForCategory} from './Helpers.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: 'Viewport not optimized for mobile',
-  /**
-   * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
-   */
-  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 {
+export class Viewport extends BaseInsightComponent<ViewportInsightModel> {
   static override readonly litTagName = LitHtml.literal`devtools-performance-viewport`;
   override insightCategory: Category = Category.INP;
   override internalName: string = 'viewport';
-  override userVisibleTitle: string = i18nString(UIStrings.title);
-  override description: string = i18nString(UIStrings.description);
 
   override createOverlays(): Overlays.Overlays.TimelineOverlay[] {
     // TODO(b/351757418): create overlay for synthetic input delay events
     return [];
   }
 
-  #render(insight: Trace.Insights.Types.InsightResults['Viewport']): LitHtml.TemplateResult {
+  #render(insight: Trace.Insights.Types.InsightModels['Viewport']): LitHtml.LitTemplate {
+    if (!this.model) {
+      return LitHtml.nothing;
+    }
+
     const backendNodeId = insight.viewportEvent?.args.data.node_id;
 
     // clang-format off
     return html`
         <div class="insights">
             <devtools-performance-sidebar-insight .data=${{
-              title: this.userVisibleTitle,
-              description: this.description,
+              title: this.model.title,
+              description: this.model.description,
               expanded: this.isActive(),
               internalName: this.internalName,
               estimatedSavingsTime: insight.metricSavings?.INP,
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
               ${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
+              // clang-format on
   }
 
   override render(): void {
-    const viewportInsight = Trace.Insights.Common.getInsight('Viewport', this.data.insights, this.data.insightSetKey);
-    const shouldShow = viewportInsight && viewportInsight.mobileOptimized === false;
+    const model = this.model;
+    const shouldShow = model && model.mobileOptimized === false;
 
     const matchesCategory = shouldRenderForCategory({
       activeCategory: this.data.activeCategory,
       insightCategory: this.insightCategory,
     });
-    const output = shouldShow && matchesCategory ? this.#render(viewportInsight) : LitHtml.nothing;
+    const output = shouldShow && matchesCategory ? this.#render(model) : LitHtml.nothing;
     LitHtml.render(output, this.shadow, {host: this});
   }
 }

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

@@ -33,7 +33,7 @@
   td {
     padding-right: var(--sys-size-4);
     min-width: var(--sys-size-20);
-    max-width: var(--sys-size-24);
+    max-width: var(--sys-size-28);
   }
 }
 
@@ -77,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;

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

@@ -130,6 +130,10 @@
   min-width: 0;
 }
 
+.local-field-link {
+  margin-top: 8px;
+}
+
 .logs-section {
   margin-top: 24px;
   display: flex;
@@ -167,17 +171,33 @@
 }
 
 .interaction {
-  display: flex;
-  align-items: center;
-  padding: 7px 0;
+  --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 {
@@ -266,32 +286,15 @@ 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;
   margin-top: 8px;
 }
 
-.setting-hint {
-  margin-left: 6px;
-  vertical-align: bottom;
-  height: 18px;
-  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 {
@@ -299,6 +302,10 @@ x-link { /* stylelint-disable-line selector-type-no-unknown */
   padding-left: 20px;
 }
 
+.environment-rec {
+  font-weight: var(--ref-typeface-weight-medium);
+}
+
 .link-to-log {
   padding: unset;
   background: unset;
@@ -318,3 +325,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 4px;
+  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;
+}

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

@@ -10,9 +10,15 @@
   background-color: var(--sys-color-surface3);
   height: 100%;
   box-sizing: border-box;
+
+  &:not(:hover) .title-help {
+    visibility: hidden;
+  }
 }
 
 .title {
+  display: flex;
+  justify-content: space-between;
   font-size: var(--sys-typescale-headline5-size);
   line-height: var(--sys-typescale-headline5-line-height);
   font-weight: var(--ref-typeface-weight-medium);
@@ -20,6 +26,11 @@
   margin-bottom: 6px;
 }
 
+.title-help {
+  height: var(--sys-typescale-headline5-line-height);
+  margin-left: 4px;
+}
+
 .metric-values-section {
   position: relative;
   display: flex;

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

@@ -18,13 +18,16 @@
   border: 1px solid var(--sys-color-divider);
   display: inline-block;
   margin-right: 4px;
-  content: " ";
 }
 
-.network-request-details-body {
+.network-request-details-cols {
   display: flex;
-  padding-bottom: 5px;
+}
+
+:host {
   border-bottom: 1px solid var(--sys-color-divider);
+  display: block;
+  padding-bottom: 5px;
 }
 
 .network-request-details-col {
@@ -32,7 +35,6 @@
 }
 
 .network-request-details-row {
-  display: flex;
   padding: 0 10px;
   min-height: 20px;
 }
@@ -59,6 +61,7 @@
   text-decoration: underline;
   outline-offset: 2px;
   padding: 0;
+  text-align: left;
 
   .elements-disclosure & {
     color: var(--text-link);
@@ -107,49 +110,6 @@
   font: inherit;
 }
 
-.timings-row {
-  align-self: start;
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.indicator {
-  display: inline-block;
-  width: 10px;
-  height: 4px;
-  margin-right: 5px;
-  border: 1px solid var(--sys-color-on-surface-subtle);
-}
-
-.whisker-left {
-  align-self: center;
-  display: inline-flex;
-  width: 10px;
-  height: 6px;
-  margin-right: 5px;
-  border-left: 1px solid var(--sys-color-on-surface-subtle);
-}
-
-.whisker-right {
-  align-self: center;
-  display: inline-flex;
-  width: 10px;
-  height: 6px;
-  margin-right: 5px;
-  border-right: 1px solid var(--sys-color-on-surface-subtle);
-}
-
-.horizontal {
-  background-color: var(--sys-color-on-surface-subtle);
-  height: 1px;
-  width: 10px;
-  align-self: center;
-}
-
-.time {
-  display: inline-block;
-  padding-left: 10px;
-  /* Push the time to right. */
-  margin-left: auto;
+.timing-rows {
+  width: fit-content;
 }

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

@@ -13,11 +13,24 @@
   margin-right: 5px;
 }
 
-.priority {
+.url--host {
+  color: var(--sys-color-token-subtle);
+}
+
+.priority-row {
   margin-left: 15px;
 }
 
-.priority > devtools-icon {
+.network-category-chip {
+  box-sizing: border-box;
+  width: 10px;
+  height: 10px;
+  border: 1px solid var(--sys-color-divider);
+  display: inline-block;
+  margin-right: 4px;
+}
+
+devtools-icon.priority {
   height: 13px;
   width: 13px;
   color: var(--sys-color-on-surface-subtle);
@@ -33,15 +46,11 @@
   margin: 5px 0;
 }
 
-ul {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-li {
+.timings-row {
+  align-self: start;
   display: flex;
   align-items: center;
+  width: 100%;
 }
 
 .indicator {
@@ -53,7 +62,8 @@ li {
 }
 
 .whisker-left {
-  display: flex;
+  align-self: center;
+  display: inline-flex;
   width: 10px;
   height: 6px;
   margin-right: 5px;
@@ -61,7 +71,8 @@ li {
 }
 
 .whisker-right {
-  display: flex;
+  align-self: center;
+  display: inline-flex;
   width: 10px;
   height: 6px;
   margin-right: 5px;
@@ -78,4 +89,16 @@ li {
 .time {
   /* Push the time to right. */
   margin-left: auto;
+  display: inline-block;
+  padding-left: 10px;
+}
+
+.timings-row--duration {
+  .indicator {
+    border-color: transparent;
+  }
+
+  .time {
+    font-weight: var(--ref-typeface-weight-medium);
+  }
 }

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

@@ -6,7 +6,7 @@
 
 :host {
   display: block;
-  padding: var(--sys-size-6);
+  padding: var(--sys-size-4);
 }
 
 ul {

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

@@ -32,6 +32,8 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     font: var(--sys-typescale-body4-medium);
+    display: flex;
+    align-items: center;
 
     &:focus {
       background-color: var(--sys-color-tonal-container);
@@ -50,6 +52,24 @@
   }
 }
 
+.zoom-button {
+  margin-left: auto;
+}
+
+.zoom-icon {
+  visibility: hidden;
+
+  &.active devtools-button {
+    visibility: visible;
+  }
+}
+
+.dropdown-icon {
+  &.active devtools-button {
+    transform: rotate(90deg);
+  }
+}
+
 .feedback-wrapper {
   position: relative;
   padding: var(--sys-size-6);

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

@@ -9,16 +9,16 @@ export function extensionEntryColor(event: Trace.Types.Extensions.SyntheticExten
   const color = event.args.color;
   // Use a default value for when the color of the extension entry
   // was not passed or was set an unknown value.
-  let themeColor = '--ref-palette-primary70';
+  let themeColor = '--ref-palette-blue70';
   switch (color) {
     case 'primary':
-      themeColor = '--ref-palette-primary70';
+      themeColor = '--ref-palette-blue70';
       break;
     case 'primary-light':
-      themeColor = '--ref-palette-primary80';
+      themeColor = '--ref-palette-blue80';
       break;
     case 'primary-dark':
-      themeColor = '--ref-palette-primary60';
+      themeColor = '--ref-palette-blue60';
       break;
     case 'secondary':
       themeColor = '--ref-palette-purple80';
@@ -30,13 +30,13 @@ export function extensionEntryColor(event: Trace.Types.Extensions.SyntheticExten
       themeColor = '--ref-palette-purple70';
       break;
     case 'tertiary':
-      themeColor = '--ref-palette-tertiary70';
+      themeColor = '--ref-palette-green70';
       break;
     case 'tertiary-light':
-      themeColor = '--ref-palette-tertiary80';
+      themeColor = '--ref-palette-green80';
       break;
     case 'tertiary-dark':
-      themeColor = '--ref-palette-tertiary60';
+      themeColor = '--ref-palette-green60';
       break;
     case 'warning':
       themeColor = '--ref-palette-yellow70';

package/front_end/panels/timeline/fixtures/traces/README.md

@@ -209,3 +209,7 @@ Contains a recording with network request's initiator information.
 ### over-20-invalidations-per-event
 
 Contains a trace where one Layout event has 26 invalidations associated with it.
+
+### scheduler-post-task
+
+Generated from the [scheduler story](https://github.com/ChromeDevTools/performance-stories/tree/main/scheduler). Contains a series of `scheduler.postTask()` calls of different priority and delay, some nested and some ending up cancelled.

package/front_end/panels/timeline/historyToolbarButton.css

@@ -9,16 +9,40 @@
 }
 
 .history-dropdown-button {
-  width: 160px;
-  height: 26px;
+  width: var(--sys-size-23);
+  height: var(--sys-size-9);
+  border-radius: var(--sys-shape-corner-extra-small);
   text-align: left;
   display: flex;
-  border: 1px solid transparent;
-}
+  padding-right: var(--sys-size-5);
+
+  &:hover {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
+
+  &:hover:active {
+    background:
+      linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
+      linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
+  }
 
-.history-dropdown-button[disabled] {
-  opacity: 50%;
-  border: 1px solid transparent;
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  }
+
+  &[disabled] {
+    pointer-events: none;
+    color: var(--sys-color-state-disabled);
+    background-color: var(--sys-color-state-disabled-container);
+
+    .content::after {
+      background-color: var(--sys-color-state-disabled);
+    }
+  }
 }
 
 .history-dropdown-button > .content {
@@ -37,21 +61,11 @@
     content: "";
     position: absolute;
     background-color: var(--icon-default);
-    right: -3px;
+    right: var(--sys-size-3);
+    top: var(--sys-size-3);
   }
 }
 
-.history-dropdown-button:focus-visible::before {
-  content: "";
-  position: absolute;
-  top: 2px;
-  left: 0;
-  right: 0;
-  bottom: 2px;
-  border-radius: 2px;
-  background: var(--divider-line);
-}
-
 @media (forced-colors: active) {
   .history-dropdown-button[disabled] {
     opacity: 100%;