chrome-devtools-frontend 1.0.1386602 → 1.0.1418433

package/front_end/panels/timeline/timelinePanel.css

@@ -29,22 +29,35 @@
 
 .timeline-toolbar-container {
   display: flex;
+  align-items: flex-start;
   flex: none;
-}
-
-.timeline-toolbar-container > .toolbar {
   background-color: var(--sys-color-cdt-base-container);
   border-bottom: 1px solid var(--sys-color-divider);
-}
 
-.timeline-main-toolbar {
-  flex: 1 1 auto;
+  & > :first-child {
+    flex: 1 1 auto;
+  }
 }
 
 .timeline-settings-pane {
+  display: grid;
+  grid-template-columns: 50% 50%;
   flex: none;
   background-color: var(--sys-color-cdt-base-container);
   border-bottom: 1px solid var(--sys-color-divider);
+
+  & > div {
+    margin-left: 5px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    & > select {
+      height: var(--sys-size-9);
+      min-width: var(--sys-size-14);
+      border: none;
+    }
+  }
 }
 
 #timeline-overview-panel {
@@ -137,6 +150,7 @@
 
 #memory-graphs-container .timeline-memory-header::after {
   content: "";
+  /* stylelint-disable-next-line custom-property-pattern */
   background-image: var(--image-file-toolbarResizerVertical);
   background-repeat: no-repeat;
   background-position: right center, center;
@@ -175,7 +189,6 @@
   position: relative;
   background-color: var(--sys-color-cdt-base-container);
   user-select: text;
-  display: block;
 }
 
 .timeline-details-view-block {
@@ -190,6 +203,7 @@
 .timeline-details-view-row {
   padding-left: 10px;
   min-height: 20px;
+  line-height: 16px; /* Vertically center text within row, important for background-color rows like .timeline-details-warning */
 }
 
 .timeline-details-view-block .timeline-details-stack-values {
@@ -234,7 +248,7 @@
   display: inline-block;
   user-select: text;
   text-overflow: ellipsis;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .timeline-details-warning .timeline-details-view-row-value {
@@ -318,6 +332,7 @@
 
   100% {
     opacity: 0%;
+    /* stylelint-disable-next-line custom-property-pattern */
     transform: translateY(var(--to-Y)) translateX(var(--to-X)) rotate(var(--rotation));
   }
 }
@@ -371,13 +386,12 @@
   overflow: hidden;
 }
 
-.timeline-tree-view .toolbar {
+.timeline-tree-view devtools-toolbar {
   background-color: var(--sys-color-cdt-base-container);
   border-bottom: 1px solid var(--sys-color-divider);
 }
 
 .timeline-tree-view .data-grid {
-  border: none;
   flex: auto;
 }
 
@@ -406,8 +420,7 @@
   position: relative;
 }
 
-.timeline-tree-view .data-grid div.background-percent-bar {
-  float: right;
+.timeline-tree-view .data-grid div.background-bar-text {
   position: relative;
   z-index: 1;
 }
@@ -429,7 +442,6 @@
 .timeline-tree-view .data-grid .name-container {
   display: flex;
   align-items: center;
-  padding-left: 2px;
 }
 
 .timeline-tree-view .data-grid .name-container .activity-icon {
@@ -472,15 +484,16 @@
 
 .timeline-tree-view .data-grid .background-bar-container {
   position: absolute;
-  left: 3px;
-  right: 0;
+  /* Small gap on the left side so the first row (which has a 100% width bar, has a distinguishable bar */
+  inset: 0 0 0 2px;
 }
 
 .timeline-tree-view .data-grid .background-bar {
-  float: right;
   height: 18px;
   background-color: var(--sys-color-surface-yellow);
   border-bottom: 1px solid var(--sys-color-yellow-outline);
+  position: absolute;
+  right: 0;
 }
 
 .timeline-tree-view .data-grid .selected .background-bar {
@@ -530,7 +543,7 @@
   }
 
   .timeline-tree-view .data-grid tr.selected span.percent-column,
-  .timeline-tree-view .data-grid tr.selected div.background-percent-bar span,
+  .timeline-tree-view .data-grid tr.selected div.background-bar-text span,
   .timeline-tree-view .data-grid tr.selected .name-container .activity-link .devtools-link .timeline-link {
     color: HighlightText;
   }
@@ -546,9 +559,20 @@
   }
 }
 
-.timeline-details-view-body > div {
-  overflow-y: hidden;
-  overflow-x: hidden;
+.timeline-details-range-summary {
+  height: 100%;
+  margin: var(--sys-size-4) 0;
+
+  & > devtools-performance-timeline-summary {
+    /* The category summary can't be more narrow than this, so we'll force a horizontal scrollbar
+       Also this style can't be applied on the element's :host without !important, thus its here. */
+    min-width: 192px;
+  }
+}
+
+/* Dont need to see insight chips in range summary */
+.timeline-details-range-summary + devtools-related-insight-chips {
+  display:none;
 }
 
 .timeline-details-chip-title > div {
@@ -583,11 +607,191 @@
   flex: none;
 }
 
-.status-pane-container > .small-dialog {
-  width: 100%;
-  height: 100%;
+
+devtools-performance-third-party-tree-view {
+  .background-bar-container {
+    /* Dont need the bars in 3p table */
+    display: none;
+  }
+
+   .timeline-tree-view devtools-toolbar {
+    border: 0;
+   }
+
+  .timeline-tree-view .data-grid .odd {
+    background: none;
+  }
+
+  .timeline-tree-view .data-grid {
+    border-width: 0 !important; /* stylelint-disable-line declaration-no-important */
+
+    th {
+      background-color: var(--sys-color-cdt-base-container);
+      font-weight: var(--ref-typeface-weight-medium);
+      /* Center to give some gap against sorting triangle */
+      text-align: center;
+
+      &.site-column {
+        text-align: left;
+      }
+    }
+
+    tr .numeric-column,
+    tr .site-column {
+      border-left: none;
+      border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+      /* Don't let devtools-button size mess with things */
+      contain: strict;
+      padding: 0;
+      line-height: 21px;
+    }
+
+    .bottom-filler-td,
+    th.sortable {
+      border: none;
+    }
+
+    tr {
+      height: 22px;
+    }
+
+    devtools-button {
+      display: inline-flex;
+      visibility: hidden;
+      margin: 0 8px 0 4px;
+      vertical-align: top;
+    }
+
+    tr.revealed:hover,
+    tr.selected {
+     devtools-button {
+        visibility: visible;
+      }
+    }
+
+    /* Default data-grid has this element on the edge of the rows,
+      we don't need them for the 3P table. So for now set display to none. */
+    .corner,
+    &.data-grid-fits-viewport .corner {
+      display: none;
+    }
+
+    .data-grid-resizer:hover {
+        background: linear-gradient(to right, transparent, transparent 2px, var(--sys-color-divider) 2px, var(--sys-color-divider) 3px, transparent 3px) no-repeat 0 0 / 100% 100%;
+    }
+  }
+
+  .widget.vbox.timeline-tree-view {
+    /* See column width comments in populateColumns() */
+    max-width: min(100%, 550px);
+    min-width: 350px; /* Lower than this, there's not enough room for the entity name */
+    padding: 0 0 0 var(--sys-size-6);
+    border-left: var(--sys-size-1) solid var(--sys-color-divider);
+  }
+
+  /* While timeline treeview name-container uses flexbox to layout, it's overkill for this table's purposes.
+     By not using it, we can benefit from text-overflow:ellipsis applying correctly to names and entity-badges */
+ .timeline-tree-view .data-grid .name-container {
+    display: block;
+    padding-left: 2px;
+
+    .activity-name {
+      display: inline;
+    }
+
+    .activity-icon-container {
+      display: none;
+    }
+
+    .entity-badge {
+      margin-left: var(--sys-size-4);
+      font-weight: var(--ref-typeface-weight-medium);
+      padding: 0 var(--sys-size-2);
+      background-color: var(--sys-color-tonal-container);
+      border-radius: var(--sys-shape-corner-extra-small);
+      height: 16px;
+      line-height: 16px;
+      font-size: var(--sys-typescale-body5-size);
+      display: inline-block;
+    }
+ }
 }
 
 devtools-feedback-button {
   float: right;
 }
+
+devtools-toolbar {
+  .history-dropdown-button {
+    width: var(--sys-size-23);
+    height: var(--sys-size-9);
+    border-radius: var(--sys-shape-corner-extra-small);
+    text-align: left;
+    display: flex;
+    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));
+    }
+
+    &: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);
+      }
+    }
+
+    & > .content {
+      margin-left: 5px;
+      padding-right: 5px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1 1;
+      min-width: 35px;
+
+      &::after {
+        float: right;
+        user-select: none;
+        mask-image: var(--image-file-triangle-down);
+        width: 14px;
+        height: 14px;
+        content: "";
+        position: absolute;
+        background-color: var(--icon-default);
+        right: var(--sys-size-3);
+        top: var(--sys-size-3);
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    .history-dropdown-button[disabled] {
+      opacity: 100%;
+    }
+
+    .history-dropdown-button > .content::after {
+      background-color: ButtonText;
+    }
+
+    .history-dropdown-button[disabled] > .content::after {
+      background-color: GrayText;
+    }
+  }
+}

package/front_end/panels/timeline/timelineSelectorStatsView.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2025 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.
+ */
+
+devtools-data-grid {
+  flex: auto;
+}

package/front_end/panels/timeline/timelineStatusDialog.css

@@ -20,6 +20,7 @@
   min-height: auto;
   display: flex;
   align-items: baseline;
+  font-variant-numeric: tabular-nums;
 }
 
 .status-dialog-line .label {
@@ -54,17 +55,6 @@
   border-radius: 12px;
 }
 
-.timeline-status-dialog.small-dialog {
-  width: inherit;
-  justify-content: center;
-}
-
-.small-dialog > .stop-button {
-  align-self: center;
-  margin-top: 20px;
-  height: initial;
-}
-
 @media (forced-colors: active) {
   .timeline-status-dialog {
     border: 1px solid canvastext;
@@ -80,3 +70,26 @@
     background-color: ButtonText;
   }
 }
+
+:host {
+  container-type: inline-size;
+}
+
+/* 326 is the widths above (200 + 80) + a bunch of padding. calc() can't be used here sadly */
+@container (max-width: 326px) {
+  .timeline-status-dialog {
+    box-shadow: none;
+
+    .stop-button {
+      align-self: center;
+    }
+  }
+
+  .status-dialog-line {
+    flex-direction: column;
+
+    .label {
+      display: none;
+    }
+  }
+}

package/front_end/panels/timeline/track_appenders/AnimationsTrackAppender.test.ts

@@ -39,7 +39,7 @@ describeWithEnvironment('AnimationsTrackAppender', function() {
 
   describe('appendTrackAtLevel', function() {
     it('creates a flamechart group for the Animations track', function() {
-      assert.strictEqual(flameChartData.groups.length, 1);
+      assert.lengthOf(flameChartData.groups, 1);
       assert.strictEqual(flameChartData.groups[0].name, 'Animations');
     });
 
@@ -47,8 +47,7 @@ describeWithEnvironment('AnimationsTrackAppender', function() {
       const animationsRequests = parsedTrace.Animations.animations;
       for (let i = 0; i < animationsRequests.length; ++i) {
         const event = animationsRequests[i];
-        assert.strictEqual(
-            flameChartData.entryStartTimes[i], Trace.Helpers.Timing.microSecondsToMilliseconds(event.ts));
+        assert.strictEqual(flameChartData.entryStartTimes[i], Trace.Helpers.Timing.microToMilli(event.ts));
       }
     });
 
@@ -61,14 +60,14 @@ describeWithEnvironment('AnimationsTrackAppender', function() {
           continue;
         }
         const expectedTotalTimeForEvent = event.dur ?
-            Trace.Helpers.Timing.microSecondsToMilliseconds(event.dur) :
+            Trace.Helpers.Timing.microToMilli(event.dur) :
             Timeline.TimelineFlameChartDataProvider.InstantEventVisibleDurationMs;
         assert.strictEqual(flameChartData.entryTotalTimes[i], expectedTotalTimeForEvent);
       }
     });
   });
 
-  describe('colorForEvent and titleForEvent', function() {
+  describe('colorForEvent', function() {
     before(() => {
       // Rather than use the real colours here and burden the test with having to
       // inject loads of CSS, we fake out the colours. this is fine for our tests as

package/front_end/panels/timeline/track_appenders/AppenderUtils.test.ts

@@ -56,47 +56,45 @@ describeWithEnvironment('AppenderUtils', () => {
     });
   });
 
-  describe('getFormattedTime', () => {
+  describe('getDurationWithSelf', () => {
     // Helper method. Treat input as milliseconds
-    const getFormattedTime = (tot: number, self: number): string => {
-      const totalTime = Trace.Helpers.Timing.millisecondsToMicroseconds(Trace.Types.Timing.MilliSeconds(tot));
-      const selfTime = Trace.Helpers.Timing.millisecondsToMicroseconds(Trace.Types.Timing.MilliSeconds(self));
-      return Timeline.AppenderUtils.getFormattedTime(totalTime, selfTime);
+    const getDurationWithSelf = (tot: number, self: number): string => {
+      const totalTime = Trace.Helpers.Timing.milliToMicro(Trace.Types.Timing.Milli(tot));
+      const selfTime = Trace.Helpers.Timing.milliToMicro(Trace.Types.Timing.Milli(self));
+      return Timeline.AppenderUtils.getDurationString(totalTime, selfTime);
     };
 
     it('returns the time info for a entry with no duration correctly', async () => {
-      const totalTime = Trace.Types.Timing.MicroSeconds(0);
-      const formattedTime = Timeline.AppenderUtils.getFormattedTime(totalTime);
+      const totalTime = Trace.Types.Timing.Micro(0);
+      const formattedTime = Timeline.AppenderUtils.getDurationString(totalTime);
       assert.strictEqual(formattedTime, '');
-
-      const formattedTime2 = Timeline.AppenderUtils.getFormattedTime(undefined);
-      assert.strictEqual(formattedTime2, '');
     });
 
     it('returns the time info for given total time correctly', async () => {
-      const totalTime = Trace.Types.Timing.MicroSeconds(10000);
-      const formattedTime = Timeline.AppenderUtils.getFormattedTime(totalTime);
+      const totalTime = Trace.Types.Timing.Micro(10000);
+      const formattedTime = Timeline.AppenderUtils.getDurationString(totalTime);
       // The i18n encodes spaces using the u00A0 unicode character.
       assert.strictEqual(formattedTime, '10.00\u00A0ms');
     });
 
     it('returns the time info for given total time and self time correctly', async () => {
-      const totalTime = Trace.Types.Timing.MicroSeconds(10000);
-      const selfTime = Trace.Types.Timing.MicroSeconds(1000);
-      const formattedTime = Timeline.AppenderUtils.getFormattedTime(totalTime, selfTime);
-      // The i18n encodes spaces using the u00A0 unicode character.
+      const totalTime = Trace.Types.Timing.Micro(10000);
+      const selfTime = Trace.Types.Timing.Micro(1000);
+      const formattedTime = Timeline.AppenderUtils.getDurationString(totalTime, selfTime);
+      // The i18n encodes spaces using the \u00A0 unicode character, aka \xA0
       assert.strictEqual(formattedTime, '10.00\u00A0ms (self 1.00\u00A0ms)');
     });
 
     it('returns the time info for same total time and self time correctly', async () => {
-      const totalTime = Trace.Types.Timing.MicroSeconds(10000);
-      const selfTime = Trace.Types.Timing.MicroSeconds(10000);
-      const formattedTime = Timeline.AppenderUtils.getFormattedTime(totalTime, selfTime);
-      // The i18n encodes spaces using the u00A0 unicode character.
+      const totalTime = Trace.Types.Timing.Micro(10000);
+      const selfTime = Trace.Types.Timing.Micro(10000);
+      const formattedTime = Timeline.AppenderUtils.getDurationString(totalTime, selfTime);
       assert.strictEqual(formattedTime, '10.00\u00A0ms');
     });
 
     it('has appropriate rounding', () => {
+      const getFormattedTime = getDurationWithSelf;  // For clearer diff
+
       assert.strictEqual(getFormattedTime(10, 9), '10.00\u00A0ms (self 9.00\u00A0ms)');
       assert.strictEqual(getFormattedTime(10, 9.99), '10.00\u00A0ms (self 9.99\u00A0ms)');
       assert.strictEqual(getFormattedTime(10, 9.999), '10.00\u00A0ms (self 10.00\u00A0ms)');
@@ -108,7 +106,8 @@ describeWithEnvironment('AppenderUtils', () => {
     });
 
     it('selfTime is omitted if we hit minSignificance', async () => {
-      // Total and self are really close
+      const getFormattedTime = getDurationWithSelf;  // For clearer diff
+      // Total and self are really close (we always show)
       assert.strictEqual(getFormattedTime(5, 5.00001), '5.00\u00A0ms (self 5.00\u00A0ms)');
       assert.strictEqual(getFormattedTime(5, 5.000001), '5.00\u00A0ms (self 5.00\u00A0ms)');
       assert.strictEqual(getFormattedTime(5, 5.0000001), '5.00\u00A0ms');  // minSignificance hit!
@@ -128,18 +127,18 @@ describeWithEnvironment('AppenderUtils', () => {
       const lastTimestampByLevel: Timeline.AppenderUtils.LastTimestampByLevel = [];
       const eventOne = {
         ...defaultTraceEvent,
-        ts: Trace.Types.Timing.MicroSeconds(0),
-        dur: Trace.Types.Timing.MicroSeconds(10),
+        ts: Trace.Types.Timing.Micro(0),
+        dur: Trace.Types.Timing.Micro(10),
       };
       const eventTwo = {
         ...defaultTraceEvent,
-        ts: Trace.Types.Timing.MicroSeconds(5),
-        dur: Trace.Types.Timing.MicroSeconds(10),
+        ts: Trace.Types.Timing.Micro(5),
+        dur: Trace.Types.Timing.Micro(10),
       };
       const eventThree = {
         ...defaultTraceEvent,
-        ts: Trace.Types.Timing.MicroSeconds(20),
-        dur: Trace.Types.Timing.MicroSeconds(10),
+        ts: Trace.Types.Timing.Micro(20),
+        dur: Trace.Types.Timing.Micro(10),
       };
 
       let level = Timeline.AppenderUtils.getEventLevel(eventOne, lastTimestampByLevel);
@@ -159,23 +158,23 @@ describeWithEnvironment('AppenderUtils', () => {
       const lastTimestampByLevel: Timeline.AppenderUtils.LastTimestampByLevel = [];
       const eventOne = {
         ...defaultTraceEvent,
-        ts: Trace.Types.Timing.MicroSeconds(0),
-        dur: Trace.Types.Timing.MicroSeconds(30),
+        ts: Trace.Types.Timing.Micro(0),
+        dur: Trace.Types.Timing.Micro(30),
       };
       const eventTwo = {
         ...defaultTraceEvent,
-        ts: Trace.Types.Timing.MicroSeconds(5),
-        dur: Trace.Types.Timing.MicroSeconds(10),
+        ts: Trace.Types.Timing.Micro(5),
+        dur: Trace.Types.Timing.Micro(10),
       };
       const eventThree = {
         ...defaultTraceEvent,
-        ts: Trace.Types.Timing.MicroSeconds(10),
-        dur: Trace.Types.Timing.MicroSeconds(2),
+        ts: Trace.Types.Timing.Micro(10),
+        dur: Trace.Types.Timing.Micro(2),
       };
       const eventFour = {
         ...defaultTraceEvent,
-        ts: Trace.Types.Timing.MicroSeconds(20),
-        dur: Trace.Types.Timing.MicroSeconds(10),
+        ts: Trace.Types.Timing.Micro(20),
+        dur: Trace.Types.Timing.Micro(10),
       };
 
       let level = Timeline.AppenderUtils.getEventLevel(eventOne, lastTimestampByLevel);

package/front_end/panels/timeline/track_appenders/CompatibilityTracksAppender.test.ts

@@ -49,12 +49,6 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
           ...parsedTrace.UserTimings.timestampEvents,
           ...parsedTrace.UserTimings.performanceMarks,
           ...parsedTrace.UserTimings.performanceMeasures,
-          ...parsedTrace.PageLoadMetrics.allMarkerEvents.toSorted((m1, m2) => {
-            // These get sorted based on the metric so we have to replicate
-            // that for this assertion.
-            return Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m1.name] -
-                Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m2.name];
-          }),
         ].sort((a, b) => a.ts - b.ts);
         assert.deepEqual(timingsTrackEvents, allTimingEvents);
       });
@@ -90,16 +84,16 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
         await initTrackAppender(this, 'lcp-images-rasterizer.json.gz');
         const rasterTracks = tracksAppender.threadAppenders().filter(
             threadAppender => threadAppender.threadType === Trace.Handlers.Threads.ThreadType.RASTERIZER);
-        assert.strictEqual(rasterTracks.length, 2);
+        assert.lengthOf(rasterTracks, 2);
 
         const raster1Events = tracksAppender.eventsInTrack(rasterTracks[0]);
-        assert.strictEqual(raster1Events.length, 6);
+        assert.lengthOf(raster1Events, 6);
         assert.isTrue(Trace.Helpers.TreeHelpers.canBuildTreesFromEvents(raster1Events));
         const raster1TreeEvents = tracksAppender.eventsForTreeView(rasterTracks[0]);
         assert.deepEqual(raster1TreeEvents, raster1Events);
 
         const raster2Events = tracksAppender.eventsInTrack(rasterTracks[1]);
-        assert.strictEqual(raster2Events.length, 1);
+        assert.lengthOf(raster2Events, 1);
         assert.isTrue(Trace.Helpers.TreeHelpers.canBuildTreesFromEvents(raster2Events));
         const raster2TreeEvents = tracksAppender.eventsForTreeView(rasterTracks[1]);
         assert.deepEqual(raster2TreeEvents, raster2Events);
@@ -118,12 +112,6 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
           ...parsedTrace.UserTimings.timestampEvents,
           ...parsedTrace.UserTimings.performanceMarks,
           ...parsedTrace.UserTimings.performanceMeasures,
-          ...parsedTrace.PageLoadMetrics.allMarkerEvents.toSorted((m1, m2) => {
-            // These get sorted based on the metric so we have to replicate
-            // that for this assertion.
-            return Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m1.name] -
-                Timeline.TimingsTrackAppender.SORT_ORDER_PAGE_LOAD_MARKERS[m2.name];
-          }),
         ].sort((a, b) => a.ts - b.ts);
         assert.deepEqual(timingsGroupEvents, allTimingEvents);
       });
@@ -230,12 +218,10 @@ describeWithEnvironment('CompatibilityTracksAppender', function() {
   it('can return the group for a given level', async () => {
     await initTrackAppender(this, 'web-dev-with-commit.json.gz');
     // The order of these groups might seem odd, but it's based on the setup in
-    // the initTrackAppender function which does Timings, GPU and then threads.
+    // the initTrackAppender function which does GPU and then threads.
     const groupForLevel0 = tracksAppender.groupForLevel(0);
-    assert.strictEqual(groupForLevel0?.name, 'Timings');
+    assert.strictEqual(groupForLevel0?.name, 'GPU');
     const groupForLevel1 = tracksAppender.groupForLevel(1);
-    assert.strictEqual(groupForLevel1?.name, 'GPU');
-    const groupForLevel2 = tracksAppender.groupForLevel(2);
-    assert.strictEqual(groupForLevel2?.name, 'Main — https://web.dev/');
+    assert.strictEqual(groupForLevel1?.name, 'Main — https://web.dev/');
   });
 });