chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

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

@@ -11,15 +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 type * as SidebarInsight from './SidebarInsight.js';
-import 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 = {
@@ -49,8 +47,7 @@ export class ThirdParties extends BaseInsight {
   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();
@@ -95,7 +92,7 @@ export class ThirdParties extends BaseInsight {
               description: this.description,
               internalName: this.internalName,
               expanded: this.isActive(),
-            } as SidebarInsight.InsightDetails}
+            }}
             @insighttoggleclick=${this.onSidebarClick}>
                 <div slot="insight-content">
                   <div class="insight-section">
@@ -110,7 +107,7 @@ export class ThirdParties extends BaseInsight {
                           ],
                           overlays: this.#overlaysForEntity.get(entity),
                         })),
-                      } as TableData}>
+                      }}>
                     </devtools-performance-table>`}
                   </div>
 
@@ -126,7 +123,7 @@ export class ThirdParties extends BaseInsight {
                           ],
                           overlays: this.#overlaysForEntity.get(entity),
                         })),
-                      } as TableData}>
+                      }}>
                     </devtools-performance-table>`}
                   </div>
                 </div>

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

@@ -10,8 +10,6 @@ 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 {Category} from './types.js';
 
 const {html} = LitHtml;
@@ -53,17 +51,17 @@ export class Viewport extends BaseInsight {
               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 {

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

@@ -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;
@@ -167,17 +172,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,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;
@@ -285,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 {
@@ -299,6 +310,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 +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;
+}

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);
@@ -47,6 +49,24 @@
     details:first-child & {
       border-top: 1px solid var(--sys-color-divider);
     }
+    }
+  }
+
+.zoom-button {
+  margin-left: auto;
+}
+
+.zoom-icon {
+  visibility: hidden;
+
+  &.active devtools-button {
+    visibility: visible;
+  }
+}
+
+.dropdown-icon {
+  &.active devtools-button {
+    transform: rotate(90deg);
   }
 }
 

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%;

package/front_end/panels/timeline/overlays/OverlaysImpl.test.ts

@@ -150,9 +150,7 @@ describeWithEnvironment('Overlays', () => {
     // Set the visible window to be the entire trace.
     overlays.updateVisibleWindow(parsedTrace.Meta.traceBounds);
 
-    // Find an event on the main chart that is not a frame (you cannot add overlays to frames)
     const event = charts.mainProvider.eventByIndex?.(50);
-    assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
     assert.isOk(event);
     const yPixel = overlays.yPixelForEventOnChart(event);
     // The Y offset for the main chart is 233px, but we add 208px on (200px for the
@@ -197,9 +195,7 @@ describeWithEnvironment('Overlays', () => {
     // Set the visible window to be the entire trace.
     overlays.updateVisibleWindow(parsedTrace.Meta.traceBounds);
 
-    // Find an event on the main chart that is not a frame (you cannot add overlays to frames)
     const event = charts.mainProvider.eventByIndex?.(50);
-    assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
     assert.isOk(event);
     const yPixel = overlays.yPixelForEventOnChart(event);
     // The Y offset for the main chart is 233px, but we add 34px on (the height
@@ -321,7 +317,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_SELECTED',
@@ -390,7 +385,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_LABEL',
@@ -424,7 +418,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_LABEL',
@@ -452,7 +445,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       // Create an entry label overlay
       overlays.add({
@@ -493,7 +485,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       // Create a time range overlay with an empty label
       overlays.add({
@@ -534,7 +525,6 @@ describeWithEnvironment('Overlays', () => {
          const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
          const event = charts.mainProvider.eventByIndex?.(50);
          assert.isOk(event);
-         assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
          // Create a time range overlay with a label
          overlays.add({
@@ -574,7 +564,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
         type: 'TIME_RANGE',
@@ -767,7 +756,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       const selectedOverlay = overlays.add({
         type: 'ENTRY_SELECTED',
@@ -786,7 +774,6 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const timelineFrame = charts.mainProvider.eventByIndex?.(5);
       assert.isOk(timelineFrame);
-      assert.instanceOf(timelineFrame, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_SELECTED',
@@ -804,14 +791,12 @@ describeWithEnvironment('Overlays', () => {
       const {overlays, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
 
       overlays.add({
         type: 'ENTRY_SELECTED',
         entry: event,
       });
 
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
       const existingOverlays = overlays.overlaysForEntry(event);
       assert.deepEqual(existingOverlays, [{
                          type: 'ENTRY_SELECTED',
@@ -825,7 +810,6 @@ describeWithEnvironment('Overlays', () => {
       const event = charts.mainProvider.eventByIndex?.(50);
       assert.isOk(event);
 
-      assert.notInstanceOf(event, Trace.Handlers.ModelHandlers.Frames.TimelineFrame);
       overlays.add({
         type: 'ENTRY_SELECTED',
         entry: event,